@extends('layouts.public')

@section('title', $tool->name.' — AI tool review and pricing | Boss Of AI')
@section('meta_description', $tool->summary)

@section('content')
<article class="py-12 md:py-16">
    <div class="shell">
        <nav class="text-sm text-graphite-500" aria-label="Breadcrumb">
            <a href="{{ route('tools.index') }}" class="hover:text-ink">AI tools</a>
            <span class="mx-2 text-graphite-300">/</span>
            <a href="{{ route('tools.index', ['category' => $tool->category->slug]) }}" class="hover:text-ink">{{ $tool->category->name }}</a>
        </nav>

        <div class="mt-6 grid gap-12 lg:grid-cols-[1fr_20rem] lg:gap-16">
            <div>
                <h1 class="text-4xl leading-[1.05] md:text-5xl">{{ $tool->name }}</h1>
                <p class="mt-4 max-w-[60ch] text-lg leading-relaxed text-graphite-600">{{ $tool->summary }}</p>

                <div class="mt-8 max-w-[68ch] space-y-5 text-[17px] leading-relaxed text-graphite-700">
                    @foreach (preg_split('/\r\n\r\n|\n\n/', $tool->description) as $paragraph)
                        <p>{{ $paragraph }}</p>
                    @endforeach
                </div>

                @if (! empty($tool->tags))
                    <ul class="mt-8 flex flex-wrap gap-2">
                        @foreach ($tool->tags as $tag)
                            <li class="rounded-full border border-graphite-200 px-3 py-1 text-[13px] text-graphite-600">{{ $tag }}</li>
                        @endforeach
                    </ul>
                @endif
            </div>

            <aside class="lg:sticky lg:top-24 lg:self-start">
                <div class="rounded-xl border border-graphite-200 p-6">
                    <dl class="space-y-5 text-[15px]">
                        <div>
                            <dt class="text-[13px] text-graphite-500">Category</dt>
                            <dd class="mt-1"><a href="{{ route('tools.index', ['category' => $tool->category->slug]) }}" class="underline underline-offset-4">{{ $tool->category->name }}</a></dd>
                        </div>
                        <div>
                            <dt class="text-[13px] text-graphite-500">Pricing</dt>
                            <dd class="mt-1">{{ $tool->pricingLabel() }}@if ($tool->pricing_note) <span class="text-graphite-600">— {{ $tool->pricing_note }}</span>@endif</dd>
                        </div>
                        @if ($tool->best_for)
                            <div>
                                <dt class="text-[13px] text-graphite-500">Best for</dt>
                                <dd class="mt-1 leading-relaxed">{{ $tool->best_for }}</dd>
                            </div>
                        @endif
                    </dl>

                    <a href="{{ route('tools.visit', $tool) }}" rel="noopener nofollow" target="_blank" class="btn btn-primary mt-6 w-full">
                        Visit {{ $tool->name }}
                    </a>
                    <p class="mt-3 text-center text-[13px] text-graphite-500">Opens {{ parse_url($tool->website, PHP_URL_HOST) }}</p>
                </div>

                <div class="mt-5 rounded-xl bg-graphite-50 p-6">
                    <h2 class="text-base">Get the newsletter</h2>
                    <p class="mt-2 text-sm leading-relaxed text-graphite-600">
                        New tools and automations worth using, once a week.
                    </p>
                    <div class="mt-4">
                        <x-newsletter-form source="tool-page" />
                    </div>
                </div>
            </aside>
        </div>

        @if ($related->isNotEmpty())
            <section class="mt-16 border-t border-graphite-200 pt-10">
                <h2 class="text-2xl">More {{ strtolower($tool->category->name) }} tools</h2>
                <div class="mt-6 grid gap-4 sm:grid-cols-3">
                    @foreach ($related as $item)
                        <a href="{{ route('tools.show', $item) }}" class="rounded-lg border border-graphite-200 p-5 transition-colors hover:border-ink">
                            <h3 class="text-lg">{{ $item->name }}</h3>
                            <p class="mt-2 text-[15px] leading-relaxed text-graphite-600">{{ $item->summary }}</p>
                        </a>
                    @endforeach
                </div>
            </section>
        @endif
    </div>
</article>

@include('partials.lead-finder-cta')
@endsection