@extends('layouts.public')

@section('title', 'The Boss Of AI Newsletter')
@section('meta_description', 'Discover the AI tools, automations and business opportunities worth paying attention to.')

@section('content')
<section class="border-b border-graphite-200 bg-ink py-16 text-paper md:py-24">
    <div class="shell max-w-3xl">
        <h1 class="text-4xl leading-[1.02] md:text-[3.5rem]">The Boss Of AI Newsletter</h1>
        <p class="mt-5 max-w-[54ch] text-lg leading-relaxed text-graphite-400">
            Discover the AI tools, automations and business opportunities worth paying attention to.
        </p>
        <div class="mt-8 max-w-lg">
            <x-newsletter-form source="newsletter-page" tone="dark" />
            <p class="mt-3 text-sm text-graphite-400">One issue a week. Unsubscribe whenever you like.</p>
        </div>
    </div>
</section>

@if ($featured)
    <section class="border-b border-graphite-200 py-12 md:py-16">
        <div class="shell">
            <a href="{{ $featured->external_url }}" target="_blank" rel="noopener" class="group block">
                <div class="flex flex-wrap items-center gap-3 text-sm text-graphite-500">
                    <span class="rounded-full bg-signal px-2.5 py-1 text-[13px] font-medium text-ink">Latest issue</span>
                    <span>{{ $featured->category }}</span>
                    <span>{{ $featured->published_at?->format('j M Y') }}</span>
                </div>
                <h2 class="mt-4 max-w-[24ch] text-3xl leading-tight group-hover:underline md:text-[2.5rem]">{{ $featured->title }}</h2>
                <p class="mt-4 max-w-[62ch] text-lg leading-relaxed text-graphite-600">{{ $featured->excerpt }}</p>
            </a>
        </div>
    </section>
@endif

<section class="py-12 md:py-16">
    <div class="shell">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <h2 class="text-2xl">Recent issues</h2>
            @if ($categories->isNotEmpty())
                <ul class="flex flex-wrap gap-2">
                    @foreach ($categories as $category)
                        <li class="rounded-full border border-graphite-200 px-3 py-1 text-[13px] text-graphite-600">{{ $category }}</li>
                    @endforeach
                </ul>
            @endif
        </div>

        @if ($articles->isEmpty())
            <div class="mt-8 rounded-lg border border-dashed border-graphite-300 p-10">
                <h3 class="text-lg">No issues published yet</h3>
                <p class="mt-2 max-w-[52ch] text-graphite-600">
                    Subscribe above and the first one will arrive in your inbox.
                </p>
            </div>
        @else
            <ul class="mt-8 grid gap-x-8 gap-y-2 md:grid-cols-2 lg:grid-cols-3">
                @foreach ($articles as $article)
                    <li class="border-t border-graphite-200">
                        <a href="{{ $article->external_url }}" target="_blank" rel="noopener" class="group block py-6">
                            <div class="flex flex-wrap items-center gap-3 text-sm text-graphite-500">
                                <span>{{ $article->category }}</span>
                                <span>{{ $article->published_at?->format('j M Y') }}</span>
                                @if ($article->read_time)<span>{{ $article->read_time }}</span>@endif
                            </div>
                            <h3 class="mt-2 text-xl leading-snug group-hover:underline">{{ $article->title }}</h3>
                            <p class="mt-2 text-[15px] leading-relaxed text-graphite-600">{{ $article->excerpt }}</p>
                        </a>
                    </li>
                @endforeach
            </ul>

            <div class="mt-10">{{ $articles->links() }}</div>
        @endif
    </div>
</section>

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