@props([
    'topics' => null,
    'subscribers' => 84000,
])

@php
    $themeKey = config('app.theme');
    $topics ??= config('domains.domains.'.$themeKey.'.brand.newsletter_topics', [
        ['name' => 'Tageszusammenfassung', 'meta' => 'Mo–Fr · 07:00 Uhr', 'active' => true],
        ['name' => 'Wochenrückblick', 'meta' => 'Sonntags · 18:00 Uhr', 'active' => false],
        ['name' => 'Energie & Klima', 'meta' => 'ab Content-Score 80 · max. 2× pro Woche', 'active' => true],
        ['name' => 'IPO & M&A', 'meta' => 'ausgewählt von der Redaktion · ca. 3–5 Mails/Monat', 'active' => false],
    ]);
@endphp

<section id="newsletter" class="max-w-layout mx-auto px-8 mt-16">
    <div class="relative overflow-hidden bg-topbar-grad text-ink-on-dark p-12 px-14">
        <svg width="280" height="280" viewBox="0 0 280 280" class="absolute -right-10 -top-10 opacity-[0.06]" aria-hidden="true">
            <circle cx="140" cy="140" r="120" stroke="white" stroke-width="1" fill="none" />
            <circle cx="140" cy="140" r="80" stroke="white" stroke-width="1" fill="none" />
            <circle cx="140" cy="140" r="40" stroke="white" stroke-width="1" fill="none" />
        </svg>

        <div class="relative grid gap-12 grid-cols-1 lg:grid-cols-[1.1fr_1fr]">
            <div>
                <div class="eyebrow on-dark mb-3">Bleiben Sie informiert</div>
                <h2 class="font-serif text-[30px] font-semibold m-0 leading-[1.18] tracking-[-0.4px] mb-3.5 max-w-[460px] text-white">
                    Pressemeldungen, kuratiert in Ihren Posteingang
                </h2>
                <p class="text-[14px] leading-[1.55] text-white/70 max-w-[440px] m-0 mb-6">
                    Die wichtigsten Meldungen aus DACH — täglich, wöchentlich oder branchenspezifisch. Keine Werbung, jederzeit kündbar.
                </p>

                <form action="#newsletter-subscribe" method="post" class="flex mb-3.5 max-w-[460px]">
                    @csrf
                    <label class="sr-only" for="newsletter-email">E-Mail-Adresse</label>
                    <input id="newsletter-email" type="email" name="email" required
                        placeholder="Ihre E-Mail-Adresse"
                        class="flex-1 px-4 py-3.5 text-[14px] bg-white/[0.08] border border-white/[0.18] text-white outline-none rounded-none placeholder-white/40 focus:border-brand focus:ring-0">
                    <button type="submit"
                        class="px-[22px] py-3.5 text-[13px] font-semibold bg-brand text-white whitespace-nowrap rounded-none cursor-pointer hover:bg-brand-deep transition-colors">
                        Kostenlos abonnieren →
                    </button>
                </form>
                <div class="text-[11px] text-white/50">
                    Über {{ number_format($subscribers, 0, ',', '.') }} Abonnenten · Datenschutz nach DSGVO
                </div>
            </div>

            <div class="flex flex-col gap-2.5 self-stretch">
                @foreach ($topics as $topic)
                    <label class="flex items-start gap-3.5 px-4 py-3.5 cursor-pointer transition-colors
                            {{ ($topic['active'] ?? false) ? 'bg-white/[0.06] border border-brand/40 hover:bg-white/[0.1]' : 'border border-white/10 hover:border-white/30 hover:bg-white/[0.04]' }}">
                        @if ($topic['active'] ?? false)
                            <span class="w-[18px] h-[18px] flex-shrink-0 mt-0.5 bg-brand border border-brand flex items-center justify-center">
                                <svg width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                                    <path d="M2 6l3 3 5-6" stroke="white" stroke-width="2" />
                                </svg>
                            </span>
                        @else
                            <span class="w-[18px] h-[18px] flex-shrink-0 mt-0.5 border border-white/30"></span>
                        @endif

                        <div class="flex-1">
                            <div class="text-[13.5px] font-semibold text-white">{{ $topic['name'] }}</div>
                            <div class="text-[11.5px] text-white/55 mt-0.5">{{ $topic['meta'] }}</div>
                        </div>

                        <input type="checkbox" name="topics[]" value="{{ \Illuminate\Support\Str::slug($topic['name']) }}"
                            {{ ($topic['active'] ?? false) ? 'checked' : '' }} class="sr-only">
                    </label>
                @endforeach
            </div>
        </div>
    </div>
</section>