@extends('front.layouts.app')

@section('content')
    <div class="container-lg text-center py-5">
        <h1 class="display-5 text-body-emphasis font-family-zilla-slab">
            Get the <span class="bg-highlighter-yellow fw-bold px-2">Right AI</span> for <span
                class="bg-highlighter-pink fw-bold px-2">Any Task</span>
        </h1>
        <h2 class="lead h4 mb-4">Curating over 750+ AI tools and growing 🛠️</h2>

        <div class="row justify-content-center">
            <div class="col-12 col-md-9 col-lg-8 col-xl-7 mx-auto mb-4">
                @include('front.partials.search')
            </div>

            <div class="col-12 col-md-9 col-lg-9 col-xl-9 mx-auto">
                <div class="d-inline-flex justify-content-center flex-wrap gap-1">
                    <span class="align-self-center">Filter by</span>
                    @foreach ($top_parent_categories as $category)
                        <a href="{{ route('front.discover.category', ['category_slug' => $category->slug]) }}"
                            class="btn btn-outline-dark text-decoration-none border-2 fw-bold rounded-pill px-3">{{ $category->name }}
                            {{ $category->emoji }}</a>
                    @endforeach
                    <a href="{{ route('front.discover.home') }}"
                        class="btn btn-outline-dark text-decoration-none border-2 fw-bold rounded-pill px-3">and
                        {{ $non_top_parent_categories->count() }} more top categories!</a>
                </div>

            </div>

        </div>

    </div>


    @if ($latest_ai_tools->count() > 0)
        <div class="container-lg">
            <p class="text-center h3 fw-bold mb-3">Featured AI Tools</p>
            <div class="row justify-content-center g-3">
                @foreach ($latest_ai_tools as $ai_tool)
                    <div class="col-6 col-lg-4">
                        @include('front.partials.ai-tool-card', ['ai_tool' => $ai_tool])
                    </div>
                @endforeach
            </div>
        </div>
    @endif
    <div class="container-lg mt-3 mb-3 text-center">
        <a class="btn btn-primary rounded-pill px-4 breathing-effect btn-lg text-decoration-none bg-gradient"
            href="{{ route('front.discover.home') }}">Discover {{ $tools_count }} More AI Tools</a>
    </div>
@endsection