@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="col-12 col-md-9 col-lg-8 col-xl-7 mx-auto mb-4">

            <form class="form-inline d-flex justify-content-center border rounded-pill p-2">
                <input class="form-control form-control-lg border-0 rounded-pill" type="search" placeholder="Search AI Tools"
                    aria-label="Search">
                <button class="btn btn-lg btn-primary bg-gradient text-white rounded-pill ms-2 text-nowrap px-4 fw-bold"
                    type="submit">Search with AI ✨</button>
            </form>
        </div>

        <div class="col-12 col-md-9 col-lg-9 col-xl-9 mx-auto">
            Filter by
            @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 mb-1 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 mb-1 rounded-pill px-3">and
                {{ $non_top_parent_categories->count() }} more top categories!</a>
        </div>


    </div>


    <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">
            @for ($i = 1; $i <= 18; $i++)
                <div class="col-6 col-lg-4">
                    @include('front.partials.ai-tool-card')
                </div>
            @endfor
        </div>
    </div>
    <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