@php
    $steps = [
        ['icon' => 'arrow-up-tray', 'title' => 'Upload', 'text' => 'Drag your file onto the page or pick it from your device. Everything travels over an encrypted connection.'],
        ['icon' => 'bolt', 'title' => 'Process', 'text' => 'Your job goes straight to our processing queue and you watch the progress live — no frozen tabs.'],
        ['icon' => 'arrow-down-tray', 'title' => 'Download', 'text' => 'Grab your finished file from a private, expiring link. We delete both copies automatically.'],
    ];

    $reasons = [
        ['icon' => 'bolt', 'title' => 'Genuinely fast', 'text' => 'Real conversion engines — FFmpeg, LibreOffice, Ghostscript, ImageMagick — running on a queue built for concurrency.'],
        ['icon' => 'shield-check', 'title' => 'Private by design', 'text' => 'Files are stored outside the web root, downloaded only through signed expiring links, and deleted on a schedule.'],
        ['icon' => 'squares-plus', 'title' => 'Every format', 'text' => 'Documents, spreadsheets, slides, images, audio, video, archives and data — one site instead of ten.'],
        ['icon' => 'sparkles', 'title' => 'Free, without the catch', 'text' => 'No watermarks, no account required, no crippled output. Paid plans only raise the limits.'],
    ];
@endphp

<x-layouts.app :canonical="route('home')">

    {{-- ------------------------------------------------------------- hero --}}
    <section class="relative overflow-hidden">
        <div class="hero-glow pointer-events-none absolute inset-x-0 -top-40 h-[34rem] opacity-70"></div>
        <div class="grid-pattern pointer-events-none absolute inset-x-0 top-0 h-96 opacity-60"></div>

        <div class="container-page relative pt-16 pb-14 sm:pt-24 sm:pb-20">
            <div class="mx-auto max-w-3xl text-center">
                <span class="badge badge-brand mb-5 gap-1.5 px-3 py-1">
                    <x-icon name="sparkles" class="h-3.5 w-3.5" />
                    {{ $toolCount }} free tools · no signup required
                </span>

                <h1 class="text-4xl leading-[1.08] font-extrabold sm:text-5xl lg:text-6xl">
                    All Your File Tools <span class="text-gradient">in One Place</span>
                </h1>

                <p class="mx-auto mt-5 max-w-2xl text-base leading-relaxed text-ink-600 sm:text-lg dark:text-ink-400">
                    Convert, compress, merge, split, edit and manage your files quickly and securely.
                </p>

                <div class="mx-auto mt-8 max-w-2xl">
                    @include('partials.search', ['compact' => false, 'id' => 'hero-search'])
                </div>

                <div class="mt-5 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-xs text-ink-500">
                    <span class="inline-flex items-center gap-1.5">
                        <x-icon name="check-circle" class="h-4 w-4 text-emerald-600" /> Files deleted automatically
                    </span>
                    <span class="inline-flex items-center gap-1.5">
                        <x-icon name="check-circle" class="h-4 w-4 text-emerald-600" /> No watermarks
                    </span>
                    <span class="inline-flex items-center gap-1.5">
                        <x-icon name="check-circle" class="h-4 w-4 text-emerald-600" /> Works on any device
                    </span>
                    @if ($conversionCount)
                        <span class="inline-flex items-center gap-1.5">
                            <x-icon name="check-circle" class="h-4 w-4 text-emerald-600" />
                            {{ number_format($conversionCount) }} files processed
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <x-ad-slot placement="home_top" class="container-page" />

    {{-- --------------------------------------------------- popular tools --}}
    <section class="container-page pb-4">
        <div class="mb-6 flex flex-wrap items-end justify-between gap-3">
            <div>
                <p class="eyebrow">Most used</p>
                <h2 class="mt-1.5 text-2xl sm:text-3xl">Popular tools</h2>
            </div>
            <a href="{{ route('tools.index') }}" class="btn btn-secondary btn-sm">
                All {{ $toolCount }} tools
                <x-icon name="arrow-right" class="h-3.5 w-3.5" />
            </a>
        </div>

        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($popular as $tool)
                <x-tool-card :tool="$tool" x-reveal="{{ $loop->index }}" />
            @endforeach
        </div>
    </section>

    {{-- ----------------------------------------------------- categories --}}
    <section class="section container-page">
        <div class="mb-6">
            <p class="eyebrow">Browse by type</p>
            <h2 class="mt-1.5 text-2xl sm:text-3xl">Categories</h2>
            <p class="mt-2 max-w-2xl text-ink-500">
                Every tool is grouped by what you are working with, so you can go straight to the right place.
            </p>
        </div>

        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($categories as $category)
                <x-category-card :category="$category" x-reveal="{{ $loop->index }}" />
            @endforeach
        </div>
    </section>

    {{-- --------------------------------------------------- how it works --}}
    <section class="border-y border-ink-200/70 bg-white dark:border-ink-800 dark:bg-ink-900/40">
        <div class="section container-page">
            <div class="mx-auto mb-10 max-w-2xl text-center">
                <p class="eyebrow">Three steps</p>
                <h2 class="mt-1.5 text-2xl sm:text-3xl">How it works</h2>
                <p class="mt-2 text-ink-500">
                    The same simple flow for every one of our {{ $toolCount }} tools.
                </p>
            </div>

            <div class="relative grid gap-6 sm:grid-cols-3">
                {{-- Connector line, desktop only. --}}
                <div class="absolute top-7 right-[16%] left-[16%] hidden border-t-2 border-dashed border-ink-200 sm:block dark:border-ink-800"></div>

                @foreach ($steps as $index => $step)
                    <div class="relative text-center" x-reveal="{{ $index }}">
                        <span class="from-brand-500 to-accent-600 relative mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br text-white shadow-lg shadow-brand-600/25">
                            <x-icon :name="$step['icon']" class="h-6 w-6" />
                            <span class="absolute -top-1.5 -right-1.5 grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-ink-900 text-[0.6875rem] font-bold text-white dark:border-ink-900 dark:bg-white dark:text-ink-900">
                                {{ $index + 1 }}
                            </span>
                        </span>
                        <h3 class="mt-4 text-lg">{{ $step['title'] }}</h3>
                        <p class="mx-auto mt-1.5 max-w-xs text-sm leading-relaxed text-ink-500">{{ $step['text'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- --------------------------------------------------- why choose us --}}
    <section class="section container-page">
        <div class="grid gap-10 lg:grid-cols-12 lg:gap-14">
            <div class="lg:col-span-5">
                <p class="eyebrow">Why {{ $brand['name'] }}</p>
                <h2 class="mt-1.5 text-2xl sm:text-3xl">Built like a product, not a demo</h2>
                <p class="mt-4 leading-relaxed text-ink-500">
                    Behind the simple upload box there is a real processing pipeline: strict file validation, isolated
                    workspaces per job, a background queue that keeps your browser free, and automatic cleanup so
                    nothing lingers on our disks.
                </p>
                <div class="mt-6 flex flex-wrap gap-3">
                    <a href="{{ route('tools.index') }}" class="btn btn-primary">
                        Start converting
                        <x-icon name="arrow-right" class="h-4 w-4" />
                    </a>
                    <a href="{{ route('pricing') }}" class="btn btn-secondary">See plans</a>
                </div>
            </div>

            <div class="grid gap-3 sm:grid-cols-2 lg:col-span-7">
                @foreach ($reasons as $index => $reason)
                    <div class="card shadow-card p-5" x-reveal="{{ $index }}">
                        <span class="bg-brand-100 text-brand-700 dark:bg-brand-950/60 dark:text-brand-300 grid h-10 w-10 place-items-center rounded-xl">
                            <x-icon :name="$reason['icon']" class="h-5 w-5" />
                        </span>
                        <h3 class="mt-3.5 text-base">{{ $reason['title'] }}</h3>
                        <p class="mt-1.5 text-sm leading-relaxed text-ink-500">{{ $reason['text'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ---------------------------------------------------------- FAQ --}}
    <section class="section border-t border-ink-200/70 bg-white dark:border-ink-800 dark:bg-ink-900/40">
        <div class="container-page">
            <div class="mx-auto max-w-3xl">
                <x-faq :items="$faqs" heading="Frequently asked questions"
                       lead="Everything people usually want to know before uploading a file." />
            </div>
        </div>
    </section>

    {{-- ---------------------------------------------------------- CTA --}}
    <section class="container-page pb-16 sm:pb-24">
        <div class="relative overflow-hidden rounded-3xl border border-ink-200/70 bg-white p-8 text-center sm:p-14 dark:border-ink-800 dark:bg-ink-900">
            <div class="hero-glow pointer-events-none absolute inset-0 opacity-60"></div>
            <div class="relative">
                <h2 class="text-2xl sm:text-3xl">Ready to convert your first file?</h2>
                <p class="mx-auto mt-3 max-w-xl text-ink-500">
                    Pick a tool, drop your file in, and download the result. No account, no install, no watermark.
                </p>
                <div class="mt-7 flex flex-wrap justify-center gap-3">
                    <a href="{{ route('tools.index') }}" class="btn btn-primary btn-lg">
                        Browse all tools
                        <x-icon name="arrow-right" class="h-4 w-4" />
                    </a>
                    <a href="{{ route('register') }}" class="btn btn-secondary btn-lg">Create a free account</a>
                </div>
            </div>
        </div>
    </section>

    <x-ad-slot placement="home_bottom" class="container-page pb-10" />
</x-layouts.app>