@php
    /** @var \App\Support\Tools\ToolDefinition $tool */
    $schema = [
        '@context' => 'https://schema.org',
        '@type' => 'SoftwareApplication',
        'name' => $tool->name,
        'applicationCategory' => 'UtilitiesApplication',
        'operatingSystem' => 'Any (web browser)',
        'url' => $seo['canonical'],
        'description' => $seo['description'],
        'offers' => ['@type' => 'Offer', 'price' => '0', 'priceCurrency' => config('zamatools.plans.currency', 'USD')],
    ];
@endphp

<x-layouts.app :title="$seo['title']"
               :description="$seo['description']"
               :canonical="$seo['canonical']"
               :schema="$schema">

    <div class="container-page pt-6 pb-16 sm:pb-24">
        <x-breadcrumbs :items="$seo['breadcrumbs']" class="mb-5" />

        <div class="grid gap-8 lg:grid-cols-12 lg:gap-10">

            {{-- ------------------------------------------------ main column --}}
            <div class="lg:col-span-8">
                <header class="mb-6 text-center lg:text-left">
                    <div class="flex items-center justify-center gap-3 lg:justify-start">
                        <span class="from-brand-500 to-accent-600 grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-gradient-to-br text-white shadow-lg shadow-brand-600/20">
                            <x-icon :name="$tool->icon" class="h-6 w-6" />
                        </span>
                        <h1 class="text-2xl leading-tight sm:text-3xl">{{ $seo['h1'] }}</h1>
                    </div>
                    <p class="mx-auto mt-3 max-w-2xl leading-relaxed text-ink-500 lg:mx-0">{{ $seo['lead'] }}</p>
                </header>

                @include('tools.partials.uploader')

                <x-ad-slot placement="tool_below_upload" class="mt-6" />

                {{-- --------------------------------------------- SEO copy --}}
                <div class="prose-zama mt-14 max-w-none">
                    <h2>About {{ $tool->name }}</h2>
                    @foreach ($seo['intro'] as $paragraph)
                        <p>{{ $paragraph }}</p>
                    @endforeach

                    <h2>How to use {{ $tool->name }}</h2>
                    <ol class="not-prose grid gap-3 pl-0 sm:grid-cols-3">
                        @foreach ($seo['steps'] as $index => $step)
                            <li class="card list-none p-4">
                                <span class="bg-brand-100 text-brand-800 dark:bg-brand-950/70 dark:text-brand-300 grid h-7 w-7 place-items-center rounded-lg text-xs font-bold">
                                    {{ $index + 1 }}
                                </span>
                                <h3 class="mt-2.5 mb-1 text-[0.9375rem]">{{ $step['title'] }}</h3>
                                <p class="mb-0 text-[0.8125rem] leading-relaxed text-ink-500">{{ $step['text'] }}</p>
                            </li>
                        @endforeach
                    </ol>

                    @if ($tool->features !== [])
                        <h2>What this tool can do</h2>
                        <ul>
                            @foreach ($tool->features as $feature)
                                <li>{{ $feature }}</li>
                            @endforeach
                        </ul>
                    @endif

                    <h2>Why use {{ $brand['name'] }}</h2>
                    <div class="not-prose grid gap-3 sm:grid-cols-2">
                        @foreach ($seo['benefits'] as $benefit)
                            <div class="card p-4">
                                <span class="bg-brand-100 text-brand-700 dark:bg-brand-950/60 dark:text-brand-300 grid h-9 w-9 place-items-center rounded-xl">
                                    <x-icon :name="$benefit['icon'] ?? 'sparkles'" class="h-4.5 w-4.5" />
                                </span>
                                <h3 class="mt-3 mb-1 text-[0.9375rem]">{{ $benefit['title'] }}</h3>
                                <p class="mb-0 text-[0.8125rem] leading-relaxed text-ink-500">{{ $benefit['text'] }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>

                <x-faq :items="$seo['faq']" class="mt-14" heading="{{ $tool->name }} — questions & answers" />
            </div>

            {{-- --------------------------------------------------- sidebar --}}
            <aside class="space-y-5 lg:col-span-4">
                <div class="panel">
                    <h2 class="text-base">Tool details</h2>
                    <dl class="mt-4 space-y-3 text-sm">
                        <div class="flex items-start justify-between gap-3">
                            <dt class="text-ink-500">Accepts</dt>
                            <dd class="text-right font-medium text-ink-900 dark:text-white">{{ $tool->acceptsLabel() }}</dd>
                        </div>
                        @if ($tool->outputExtension)
                            <div class="flex items-start justify-between gap-3">
                                <dt class="text-ink-500">Produces</dt>
                                <dd class="text-right font-medium text-ink-900 dark:text-white">
                                    {{ strtoupper($tool->outputExtension) }}
                                </dd>
                            </div>
                        @endif
                        <div class="flex items-start justify-between gap-3">
                            <dt class="text-ink-500">Max file size</dt>
                            <dd class="text-right font-medium text-ink-900 dark:text-white">{{ $config['maxSizeLabel'] }}</dd>
                        </div>
                        @if ($tool->multiple)
                            <div class="flex items-start justify-between gap-3">
                                <dt class="text-ink-500">Files per job</dt>
                                <dd class="text-right font-medium text-ink-900 dark:text-white">Up to {{ $config['maxFiles'] }}</dd>
                            </div>
                        @endif
                        <div class="flex items-start justify-between gap-3">
                            <dt class="text-ink-500">Your plan</dt>
                            <dd class="text-right font-medium text-ink-900 dark:text-white">{{ $limits->planName() }}</dd>
                        </div>
                        <div class="flex items-start justify-between gap-3">
                            <dt class="text-ink-500">Files kept for</dt>
                            <dd class="text-right font-medium text-ink-900 dark:text-white">{{ $limits->retentionHours }} hours</dd>
                        </div>
                    </dl>

                    @guest
                        <div class="divider mt-5 pt-5">
                            <p class="text-xs leading-relaxed text-ink-500">
                                Need bigger files or more conversions per day?
                                <a href="{{ route('pricing') }}" class="link">See the plans</a>.
                            </p>
                        </div>
                    @endguest
                </div>

                <div class="panel">
                    <h2 class="text-base">Your privacy</h2>
                    <ul class="mt-3.5 space-y-2.5 text-[0.8125rem] leading-relaxed text-ink-500">
                        <li class="flex gap-2.5">
                            <x-icon name="shield-check" class="mt-0.5 h-4 w-4 shrink-0 text-emerald-600" />
                            Uploads are stored on a private disk that is not reachable from the web.
                        </li>
                        <li class="flex gap-2.5">
                            <x-icon name="clock" class="mt-0.5 h-4 w-4 shrink-0 text-emerald-600" />
                            Everything is deleted automatically after {{ $limits->retentionHours }} hours.
                        </li>
                        <li class="flex gap-2.5">
                            <x-icon name="trash" class="mt-0.5 h-4 w-4 shrink-0 text-emerald-600" />
                            You can delete your files yourself the moment you are done.
                        </li>
                    </ul>
                </div>

                @if ($related->isNotEmpty())
                    <div class="panel">
                        <h2 class="text-base">Related tools</h2>
                        <div class="mt-3.5 space-y-1.5">
                            @foreach ($related as $item)
                                <a href="{{ $item->url() }}"
                                   class="group flex items-center gap-3 rounded-xl p-2 transition hover:bg-ink-100 dark:hover:bg-ink-800">
                                    <span class="bg-ink-100 text-ink-600 dark:bg-ink-800 dark:text-ink-300 grid h-8 w-8 shrink-0 place-items-center rounded-lg">
                                        <x-icon :name="$item->icon" class="h-4 w-4" />
                                    </span>
                                    <span class="min-w-0 flex-1 truncate text-sm font-medium text-ink-800 dark:text-ink-200">
                                        {{ $item->name }}
                                    </span>
                                    <x-icon name="chevron-right" class="h-3.5 w-3.5 shrink-0 text-ink-300 transition group-hover:translate-x-0.5 dark:text-ink-600" />
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif

                <x-ad-slot placement="tool_sidebar" />
            </aside>
        </div>
    </div>
</x-layouts.app>