@extends('web.layouts.web-master')

@php
    $brand = config('domains.domains.pressekonto.brand', []);
    $from = request()->query('from');
    $todayDate = now()->locale('de')->isoFormat('dddd, D. MMMM YYYY');
    $fmtEuro = static fn (int $cents): string => number_format($cents / 100, $cents % 100 === 0 ? 0 : 2, ',', '.');
    $fmtCount = static fn (int $value): string => number_format($value, 0, ',', '.');
    $minPlanMonthlyCents = $plans->min('monthly_price_cents');
@endphp

@section('title', $brand['meta_title'] ?? 'pressekonto – Publisher-Hub')
@section('meta_description',
    $brand['meta_description'] ??
    'Der gemeinsame Publisher-Hub für presseecho und
    businessportal24.')

@section('content')
    <x-web.hub.top-utility-bar :date="$todayDate" />
    <x-web.hub.site-header />
    <x-web.hub.brand-context-banner :from="$from" />

    <main class="bg-bg text-ink">

        {{-- ============== HERO ============== --}}
        <section class="hero-grid">
            <div
                class="max-w-layout mx-auto px-8 pt-16 lg:pt-20 pb-20 lg:pb-24 grid items-start gap-10 lg:gap-12 grid-cols-1 lg:grid-cols-[1.4fr_1fr]">

                <div>
                    <div class="section-eyebrow mb-6">Publisher-Hub</div>

                    <h1
                        class="text-[40px] sm:text-[48px] lg:text-[56px] font-bold leading-[1.05] tracking-[-1.2px] text-ink m-0">
                        Ein Konto.<br />
                        Zwei Reichweiten.<br />
                        <x-web.brand-mark brand="presseecho" /> und <x-web.brand-mark brand="businessportal24" />.
                    </h1>

                    <p class="text-[16px] lg:text-[17px] leading-[1.55] text-ink-2 mt-7 m-0 max-w-[560px]">
                        <x-web.brand-mark brand="pressekonto" :serif="false" /> ist der gemeinsame Publisher-Bereich für
                        unsere beiden Pressefachportale. Pressemitteilungen schreiben, automatisiert prüfen lassen, auf
                        beiden Reichweiten veröffentlichen — und Mitteilungen, Newsrooms und Abrechnung an einem Ort
                        verwalten.
                    </p>

                    <div class="mt-8 flex flex-wrap items-center gap-3">
                        @auth
                            <a href="{{ \App\Support\LoginRedirect::homeFor(auth()->user()) }}"
                                class="inline-flex items-center gap-2.5 px-7 py-3.5 text-[15px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[6px] transition-colors cursor-pointer">
                                Zum pressekonto
                                <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                                    <path d="M3 13L13 3M13 3H6M13 3v7" stroke="currentColor" stroke-width="1.6"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </a>
                        @else
                            <a href="{{ route('register') }}"
                                class="inline-flex items-center gap-2.5 px-7 py-3.5 text-[15px] font-semibold text-white bg-hub hover:bg-hub-2 rounded-[6px] transition-colors cursor-pointer">
                                Konto erstellen
                                <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                                    <path d="M3 13L13 3M13 3H6M13 3v7" stroke="currentColor" stroke-width="1.6"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </a>
                            <a href="{{ route('login') }}"
                                class="inline-flex items-center gap-2 px-6 py-3.5 text-[15px] font-semibold text-hub border border-hub/25 hover:border-hub/60 rounded-[6px] transition-colors cursor-pointer">
                                Anmelden
                            </a>
                        @endauth
                    </div>

                    <div class="mt-9 flex flex-wrap items-center gap-x-7 gap-y-3 text-[12.5px] text-ink-3">
                        <span class="flex items-center gap-2">
                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" class="text-hub">
                                <path d="M8 1.5l5.5 2.5v4c0 3.3-2.2 5.8-5.5 6.5C4.7 13.8 2.5 11.3 2.5 8V4z"
                                    stroke="currentColor" stroke-width="1.3" fill="none" />
                                <path d="M5.5 8l2 2 3.5-4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                            Prüfung inklusive
                        </span>
                        <span class="flex items-center gap-2">
                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" class="text-hub">
                                <rect x="2" y="3" width="12" height="10" stroke="currentColor" stroke-width="1.3" />
                                <path d="M2 6h12" stroke="currentColor" stroke-width="1.3" />
                            </svg>
                            Transparente Tarife
                        </span>
                        <span class="flex items-center gap-2">
                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" class="text-hub">
                                <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.3" />
                                <path d="M8 4v4l2.5 1.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" />
                            </svg>
                            Monatlich kündbar
                        </span>
                    </div>
                </div>

                {{-- Architektur-Diagramm --}}
                <div class="relative">
                    <div class="relative bg-bg-elev border border-bg-rule rounded-[4px] p-7">
                        <div class="eyebrow muted mb-5">Architektur</div>

                        <div class="relative mx-auto" style="width:100%;height:320px;">
                            <svg class="absolute inset-0" width="100%" height="100%" viewBox="0 0 380 320"
                                preserveAspectRatio="none">
                                <line x1="190" y1="160" x2="80" y2="60" stroke="var(--color-hub)"
                                    stroke-width="1" stroke-dasharray="3 3" opacity="0.45" />
                                <line x1="190" y1="160" x2="300" y2="60" stroke="var(--color-hub)"
                                    stroke-width="1" stroke-dasharray="3 3" opacity="0.45" />
                                <line x1="190" y1="160" x2="80" y2="260" stroke="var(--color-hub)"
                                    stroke-width="1" stroke-dasharray="3 3" opacity="0.3" />
                                <line x1="190" y1="160" x2="300" y2="260" stroke="var(--color-hub)"
                                    stroke-width="1" stroke-dasharray="3 3" opacity="0.3" />
                            </svg>

                            <div class="absolute" style="top:50%;left:50%;transform:translate(-50%,-50%);">
                                <div
                                    class="w-[140px] h-[140px] rounded-full bg-hub-grad flex flex-col items-center justify-center text-white shadow-lg shadow-hub/30 text-center">
                                    <div class="text-[10px] font-bold tracking-[0.22em] uppercase text-hub-line">Hub</div>
                                    <div class="text-[15px] font-bold tracking-[-0.3px] mt-1">
                                        <x-web.brand-mark brand="pressekonto" variant="on-dark" :serif="false" />
                                    </div>
                                </div>
                            </div>

                            <div class="absolute" style="top:10px;left:0;">
                                <div class="px-3.5 py-2.5 bg-white border border-bg-rule rounded-[3px] min-w-[160px]">
                                    <div class="text-[10px] font-bold tracking-[0.18em] uppercase text-ink-3">Brand-Portal
                                    </div>
                                    <div class="text-[14px] font-bold text-ink mt-0.5 tracking-[-0.2px]">
                                        <x-web.brand-mark brand="presseecho" />
                                    </div>
                                    <div class="text-[10.5px] text-ink-3 mt-0.5">Branchen-Presse · Archiv</div>
                                </div>
                            </div>

                            <div class="absolute" style="top:10px;right:0;">
                                <div
                                    class="px-3.5 py-2.5 bg-white border border-bg-rule rounded-[3px] min-w-[160px] text-right">
                                    <div class="text-[10px] font-bold tracking-[0.18em] uppercase text-ink-3">Brand-Portal
                                    </div>
                                    <div class="text-[14px] font-bold text-ink mt-0.5 tracking-[-0.2px]">
                                        <x-web.brand-mark brand="businessportal24" />
                                    </div>
                                    <div class="text-[10.5px] text-ink-3 mt-0.5">Wirtschaft · Live</div>
                                </div>
                            </div>

                            <div class="absolute" style="bottom:10px;left:0;">
                                <div class="px-3.5 py-2 bg-bg border border-bg-rule rounded-[3px]">
                                    <div class="text-[10px] text-ink-3 tracking-[0.14em] uppercase font-semibold">
                                        Veröffentlichung</div>
                                    <div class="font-mono text-[13px] font-semibold text-ink mt-0.5">2× Portale, 1× Klick
                                    </div>
                                </div>
                            </div>

                            <div class="absolute" style="bottom:10px;right:0;">
                                <div class="px-3.5 py-2 bg-bg border border-bg-rule rounded-[3px] text-right">
                                    <div class="text-[10px] text-ink-3 tracking-[0.14em] uppercase font-semibold">
                                        Reichweite</div>
                                    <div class="font-mono text-[13px] font-semibold text-ink mt-0.5">zusammengeführt</div>
                                </div>
                            </div>
                        </div>

                        <hr class="rule mt-2" />

                        <div class="grid grid-cols-3 gap-4 mt-4">
                            <div>
                                <div
                                    class="font-mono text-[20px] font-semibold text-hub leading-none tracking-[-0.3px] tabular-nums">
                                    {{ $fmtCount($hubStats['releases_total']) }}</div>
                                <div class="text-[10.5px] text-ink-3 mt-1 leading-tight">Mitteilungen<br />im Archiv</div>
                            </div>
                            <div>
                                <div
                                    class="font-mono text-[20px] font-semibold text-hub leading-none tracking-[-0.3px] tabular-nums">
                                    {{ $fmtCount($hubStats['newsrooms']) }}</div>
                                <div class="text-[10.5px] text-ink-3 mt-1 leading-tight">aktive<br />Newsrooms</div>
                            </div>
                            <div>
                                <div
                                    class="font-mono text-[20px] font-semibold text-hub leading-none tracking-[-0.3px] tabular-nums">
                                    {{ $fmtCount($hubStats['categories']) }}</div>
                                <div class="text-[10.5px] text-ink-3 mt-1 leading-tight">Branchen-<br />Rubriken</div>
                            </div>
                        </div>
                    </div>

                    <div
                        class="absolute -bottom-3 -right-3 px-3 py-1.5 bg-accent-soft border border-accent/30 text-accent-deep text-[10.5px] font-bold tracking-[0.14em] uppercase rounded-[2px]">
                        Live-Architektur
                    </div>
                </div>
            </div>
        </section>

        <hr class="rule" />

        {{-- ============== WAS SIE HIER KÖNNEN ============== --}}
        <section class="max-w-layout mx-auto px-8 pt-16 lg:pt-20 pb-12 lg:pb-16">
            <header class="mb-10 flex flex-col lg:flex-row lg:items-baseline lg:justify-between gap-3">
                <div>
                    <div class="section-eyebrow mb-4">Was Sie hier können</div>
                    <h2
                        class="text-[28px] lg:text-[34px] font-bold m-0 tracking-[-0.7px] text-ink leading-[1.15] max-w-[700px]">
                        Pressearbeit von der Mitteilung bis zur Auswertung — an einem zentralen Ort.
                    </h2>
                </div>
                <a href="#funktion"
                    class="text-[12.5px] font-semibold text-hub hover:underline whitespace-nowrap cursor-pointer">
                    So funktioniert es im Detail →
                </a>
            </header>

            <div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

                <article class="bg-bg-card border border-bg-rule rounded-[4px] p-7 flex flex-col">
                    <div
                        class="w-11 h-11 rounded-[4px] bg-hub-soft border border-hub-soft-2 flex items-center justify-center text-hub mb-5">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                            <path d="M4 4h12l4 4v12H4z" stroke="currentColor" stroke-width="1.6"
                                stroke-linejoin="round" />
                            <path d="M16 4v4h4" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" />
                            <path d="M7 11h10M7 14h10M7 17h6" stroke="currentColor" stroke-width="1.4"
                                stroke-linecap="round" />
                        </svg>
                    </div>
                    <div class="eyebrow mb-2">01 · Veröffentlichen</div>
                    <h3 class="text-[19px] font-semibold m-0 tracking-[-0.3px] text-ink leading-[1.25]">
                        Pressemitteilungen auf beiden Portalen
                    </h3>
                    <p class="text-[13.5px] leading-[1.6] text-ink-2 mt-3 m-0">
                        Eine Mitteilung schreiben, Inhaltsprüfung durchlaufen lassen, auf <x-web.brand-mark brand="presseecho"
                            :serif="false" /> und <x-web.brand-mark brand="businessportal24" :serif="false" />
                        gleichzeitig veröffentlichen. Vorschau und Qualitäts-Checkliste inklusive.
                    </p>
                    <ul class="mt-5 space-y-1.5 text-[12.5px] text-ink-3 list-none p-0">
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Editor mit
                            Qualitäts-Checkliste</li>
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Geplante
                            Veröffentlichung mit Wunschtermin</li>
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Bilder und
                            Pressekontakt je Mitteilung</li>
                    </ul>
                </article>

                <article class="bg-bg-card border border-bg-rule rounded-[4px] p-7 flex flex-col">
                    <div
                        class="w-11 h-11 rounded-[4px] bg-hub-soft border border-hub-soft-2 flex items-center justify-center text-hub mb-5">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                            <rect x="3" y="5" width="18" height="14" stroke="currentColor" stroke-width="1.6" />
                            <path d="M3 9h18" stroke="currentColor" stroke-width="1.6" />
                            <circle cx="6.5" cy="7" r="0.6" fill="currentColor" />
                            <circle cx="8.5" cy="7" r="0.6" fill="currentColor" />
                            <path d="M6 12h7M6 15h10" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
                        </svg>
                    </div>
                    <div class="eyebrow mb-2">02 · Newsrooms verwalten</div>
                    <h3 class="text-[19px] font-semibold m-0 tracking-[-0.3px] text-ink leading-[1.25]">
                        Eigene Unternehmens-Pressestelle
                    </h3>
                    <p class="text-[13.5px] leading-[1.6] text-ink-2 mt-3 m-0">
                        Jeder Newsroom mit Logo, Kontaktperson, Themen-Schwerpunkten und vollständiger Mitteilungs-Historie.
                        Mehrere Newsrooms pro Konto möglich — etwa für Agenturen mit mehreren Marken.
                    </p>
                    <ul class="mt-5 space-y-1.5 text-[12.5px] text-ink-3 list-none p-0">
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Eigene
                            Newsroom-Seite auf beiden Portalen</li>
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Logo und
                            Pressekontakte je Newsroom</li>
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Vollständige
                            Mitteilungs-Historie</li>
                    </ul>
                </article>

                <article class="bg-bg-card border border-bg-rule rounded-[4px] p-7 flex flex-col">
                    <div
                        class="w-11 h-11 rounded-[4px] bg-hub-soft border border-hub-soft-2 flex items-center justify-center text-hub mb-5">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                            <path d="M4 20V8M10 20v-6M16 20V4M22 20V12" stroke="currentColor" stroke-width="1.7"
                                stroke-linecap="round" />
                            <path d="M3 21h19" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
                        </svg>
                    </div>
                    <div class="eyebrow mb-2">03 · Überblick behalten</div>
                    <h3 class="text-[19px] font-semibold m-0 tracking-[-0.3px] text-ink leading-[1.25]">
                        Aufrufe, Status und Abrechnung zentral
                    </h3>
                    <p class="text-[13.5px] leading-[1.6] text-ink-2 mt-3 m-0">
                        Aufrufe je Mitteilung über beide Portale. Prüf-Status und Feedback direkt an der
                        Mitteilung, Buchungen und Rechnungen zentral im Konto.
                    </p>
                    <ul class="mt-5 space-y-1.5 text-[12.5px] text-ink-3 list-none p-0">
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Aufrufe je
                            Mitteilung</li>
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Prüf-Status
                            &amp; Feedback</li>
                        <li class="flex items-center gap-2"><span class="w-1 h-1 bg-hub rounded-full"></span> Buchungen
                            &amp; Rechnungen zentral</li>
                    </ul>
                </article>
            </div>
        </section>

        {{-- ============== SO FUNKTIONIERT ES — 4 STEPS ============== --}}
        <section id="funktion" class="max-w-layout mx-auto px-8 pt-8 lg:pt-10 pb-16 lg:pb-20">
            <header class="mb-8">
                <div class="section-eyebrow mb-4">So funktioniert es</div>
                <h2
                    class="text-[26px] lg:text-[30px] font-bold m-0 tracking-[-0.6px] text-ink leading-[1.18] max-w-[680px]">
                    Vier Schritte von der Registrierung bis zur veröffentlichten Mitteilung.
                </h2>
            </header>

            <hr class="rule-strong" />

            <ol class="grid gap-0 list-none p-0 m-0 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
                <li class="relative px-7 py-7 border-r border-b lg:border-b-0 border-bg-rule">
                    <div class="flex items-baseline gap-3 mb-3">
                        <span class="font-mono text-[11px] font-bold tracking-[0.18em] text-accent">01</span>
                        <span class="h-px flex-1 bg-bg-rule"></span>
                    </div>
                    <div class="text-[16.5px] font-semibold text-ink tracking-[-0.2px] mb-2">Registrieren</div>
                    <p class="text-[12.5px] text-ink-2 leading-[1.55] m-0">
                        Konto in unter zwei Minuten anlegen — mit E-Mail und Passwort, Anmeldung wahlweise
                        auch passwortlos per Magic-Link. Nach Bestätigung Ihrer E-Mail-Adresse ist das Konto
                        für beide Portale freigeschaltet.
                    </p>
                </li>
                <li class="relative px-7 py-7 border-r border-b lg:border-b-0 border-bg-rule">
                    <div class="flex items-baseline gap-3 mb-3">
                        <span class="font-mono text-[11px] font-bold tracking-[0.18em] text-accent">02</span>
                        <span class="h-px flex-1 bg-bg-rule"></span>
                    </div>
                    <div class="text-[16.5px] font-semibold text-ink tracking-[-0.2px] mb-2">Erstellen</div>
                    <p class="text-[12.5px] text-ink-2 leading-[1.55] m-0">
                        Mitteilung im Editor verfassen — mit Quellenangaben, Anhängen, Pressekontakt. Newsroom und
                        Themen-Tags zuweisen.
                    </p>
                </li>
                <li class="relative px-7 py-7 border-r border-bg-rule bg-accent-soft/40">
                    <div class="flex flex-wrap items-baseline gap-3 mb-3">
                        <span class="font-mono text-[11px] font-bold tracking-[0.18em] text-accent-deep">03</span>
                        <span
                            class="inline-flex items-center gap-1.5 text-[9.5px] font-bold tracking-[0.16em] uppercase text-accent-deep px-1.5 py-0.5 border border-accent/35 rounded-[2px]">
                            <span class="w-1 h-1 bg-accent-deep rounded-full"></span> Unsere Qualitätssicherung
                        </span>
                        <span class="h-px flex-1 bg-accent/25"></span>
                    </div>
                    <div class="text-[16.5px] font-semibold text-ink tracking-[-0.2px] mb-2">Prüfen lassen</div>
                    <p class="text-[12.5px] text-ink-2 leading-[1.55] m-0">
                        Prüfung auf Quellenqualität, Relevanz und formale Korrektheit — werktags in der
                        Regel am selben Tag. Feedback direkt an der Mitteilung.
                    </p>
                </li>
                <li class="relative px-7 py-7">
                    <div class="flex items-baseline gap-3 mb-3">
                        <span class="font-mono text-[11px] font-bold tracking-[0.18em] text-accent">04</span>
                        <span class="h-px flex-1 bg-bg-rule"></span>
                    </div>
                    <div class="text-[16.5px] font-semibold text-ink tracking-[-0.2px] mb-2">Veröffentlichen</div>
                    <p class="text-[12.5px] text-ink-2 leading-[1.55] m-0">
                        Auf <x-web.brand-mark brand="presseecho" :serif="false" /> und <x-web.brand-mark
                            brand="businessportal24" :serif="false" /> gleichzeitig live. Themen-Verknüpfung im Archiv
                        automatisch. Statistik beginnt zu laufen.
                    </p>
                </li>
            </ol>

            <hr class="rule-strong" />

            <div class="mt-5 px-5 py-3 bg-bg-card-warm border-l-2 border-accent text-[12.5px] text-ink-2 leading-[1.55]">
                <strong class="text-ink font-semibold">Die Inhaltsprüfung</strong> ist Teil unseres
                Qualitätsversprechens: Jede Mitteilung wird vor der Veröffentlichung gegen unsere
                Veröffentlichungsrichtlinien geprüft — bei einer Ablehnung erhalten Sie die Begründung und können eine
                Überprüfung verlangen. Das gilt für alle Tarife, auch den Starter.
            </div>
        </section>

        {{-- ============== TARIFE ============== --}}
        <section id="tarife" class="bg-hub-soft/40 border-y border-bg-rule" x-data="{ interval: 'monthly' }">
            <div class="max-w-layout mx-auto px-8 pt-16 lg:pt-20 pb-16 lg:pb-20">

                <header class="mb-10 lg:mb-12 grid items-end gap-6 grid-cols-1 lg:grid-cols-[1fr_auto]">
                    <div>
                        <div class="section-eyebrow mb-4">Tarife</div>
                        <h2
                            class="text-[28px] lg:text-[34px] font-bold m-0 tracking-[-0.7px] text-ink leading-[1.15] max-w-[760px]">
                            Ein Konto, beide Portale. Keine versteckten Aufschläge für Reichweite.
                        </h2>
                        <p class="text-[14.5px] text-ink-2 leading-[1.55] m-0 mt-4 max-w-[640px]">
                            Alle Tarife enthalten die Inhaltsprüfung, Ihren eigenen Newsroom und die
                            Veröffentlichung auf <strong class="text-ink font-semibold"><x-web.brand-mark
                                    brand="presseecho" :serif="false" /></strong> und <strong
                                class="text-ink font-semibold"><x-web.brand-mark brand="businessportal24"
                                    :serif="false" /></strong> ohne Mehrkosten. Unser Angebot richtet sich
                            ausschließlich an Unternehmen, Selbstständige und Agenturen — die Veröffentlichung
                            erfolgt stets über Ihr Firmenprofil.
                        </p>
                    </div>

                    <div class="flex items-center gap-1 p-1 bg-white border border-bg-rule rounded-[4px] w-fit">
                        <button type="button" @click="interval = 'monthly'"
                            :class="interval === 'monthly' ? 'text-white bg-hub' : 'text-ink-3'"
                            class="px-4 py-2 text-[12.5px] font-semibold rounded-[3px] cursor-pointer transition-colors">Monatlich</button>
                        <button type="button" @click="interval = 'yearly'"
                            :class="interval === 'yearly' ? 'text-white bg-hub' : 'text-ink-3'"
                            class="px-4 py-2 text-[12.5px] font-semibold rounded-[3px] cursor-pointer transition-colors">Jährlich
                            · 2 Monate gratis</button>
                    </div>
                </header>

                <div class="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
                    @foreach ($plans as $plan)
                        @php($isPopular = $plan->slug === 'business')
                        <article
                            class="relative bg-white rounded-[4px] p-7 flex flex-col {{ $isPopular ? 'border-2 border-hub pt-12 shadow-lg shadow-hub/10' : 'border border-bg-rule' }}">
                            @if ($isPopular)
                                <div class="ribbon-recommend">Empfohlen</div>
                            @endif

                            <div class="eyebrow {{ $isPopular ? '' : 'muted' }} mb-3">{{ $plan->name }}</div>

                            <div class="mt-4">
                                <div class="flex items-baseline gap-1.5" x-show="interval === 'monthly'">
                                    <span
                                        class="text-[38px] font-bold {{ $isPopular ? 'text-hub' : 'text-ink' }} tracking-[-1.2px] leading-none">{{ $fmtEuro((int) $plan->monthly_price_cents) }}&nbsp;€</span>
                                    <span class="text-[12.5px] text-ink-3">/ Monat</span>
                                </div>
                                <div class="flex items-baseline gap-1.5" x-show="interval === 'yearly'" x-cloak>
                                    <span
                                        class="text-[38px] font-bold {{ $isPopular ? 'text-hub' : 'text-ink' }} tracking-[-1.2px] leading-none">{{ $fmtEuro((int) $plan->yearly_price_cents) }}&nbsp;€</span>
                                    <span class="text-[12.5px] text-ink-3">/ Jahr</span>
                                </div>
                                <div class="text-[11.5px] text-ink-3 mt-1.5 min-h-[16px]">netto zzgl. USt.</div>
                            </div>

                            <a href="{{ route('register') }}"
                                class="mt-6 inline-flex items-center justify-center gap-2 px-4 py-2.5 text-[13px] font-semibold rounded-[4px] transition-colors cursor-pointer {{ $isPopular ? 'text-white bg-hub hover:bg-hub-2' : 'text-hub border border-hub/30 hover:border-hub' }}">
                                Tarif wählen
                            </a>

                            <hr class="rule my-6" />

                            <ul class="space-y-2.5 text-[12.5px] text-ink-2 list-none p-0 m-0">
                                <li class="flex items-start gap-2.5">
                                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                        class="text-hub flex-shrink-0 mt-[3px]">
                                        <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <span><strong class="font-semibold">{{ $plan->press_release_quota }}
                                            Mitteilungen</strong> pro Monat</span>
                                </li>
                                <li class="flex items-start gap-2.5">
                                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                        class="text-hub flex-shrink-0 mt-[3px]">
                                        <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <span>{{ $plan->daily_limit ? 'max. '.$plan->daily_limit.' Veröffentlichungen pro Tag' : 'Ohne Tageslimit' }}</span>
                                </li>
                                @foreach ($plan->benefitsList() as $benefit)
                                    <li class="flex items-start gap-2.5">
                                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                                            class="text-hub flex-shrink-0 mt-[3px]">
                                            <path d="M3 8.5L6.5 12 13 4" stroke="currentColor" stroke-width="1.7"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                        <span>{{ $benefit }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </article>
                    @endforeach
                </div>

                {{-- Enterprise-Streifen --}}
                <article
                    class="mt-6 bg-hub text-ink-on-dark rounded-[4px] px-8 py-7 grid items-center gap-6 grid-cols-1 lg:grid-cols-[1fr_auto]">
                    <div>
                        <div class="eyebrow on-dark mb-2">Enterprise</div>
                        <div class="text-[13.5px] text-ink-on-dark-2 leading-[1.6] max-w-[720px]">
                            Mehr als 60 Mitteilungen pro Monat, mehrere Marken oder Sonderkonditionen?
                            Wir erstellen Ihnen ein Angebot auf Anfrage — Prüfung und die
                            Veröffentlichung auf beiden Portalen inklusive.
                        </div>
                    </div>
                    <button type="button" x-data @click="$dispatch('open-contact-modal')"
                        class="inline-flex items-center justify-center gap-2 px-5 py-3 text-[13.5px] font-semibold text-hub bg-white hover:bg-bg rounded-[4px] whitespace-nowrap transition-colors cursor-pointer">
                        Anfrage senden
                        <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
                            <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5"
                                stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </button>
                </article>

                <div
                    class="mt-10 grid items-center gap-5 px-6 py-5 bg-white border border-bg-rule rounded-[4px] grid-cols-1 lg:grid-cols-[auto_1fr_auto]">
                    <div
                        class="w-10 h-10 rounded-full bg-hub-soft border border-hub-soft-2 flex items-center justify-center text-hub flex-shrink-0">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                            <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.6" />
                            <path d="M12 8v5l3 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
                        </svg>
                    </div>
                    <div class="text-[13px] text-ink-2 leading-[1.55]">
                        <strong class="text-ink font-semibold">Alle Tarife monatlich kündbar.</strong>
                        Preise netto zzgl. USt. Buchung und Verwaltung direkt im Publisher-Konto,
                        die Abrechnung läuft sicher über Stripe. Auch ohne Abo möglich: eine
                        Einzel-Pressemitteilung für {{ $fmtEuro($singlePmPriceCents) }}&nbsp;€ netto.
                    </div>
                    @auth
                        <a href="{{ \App\Support\LoginRedirect::homeFor(auth()->user()) }}"
                            class="text-[12.5px] font-semibold text-hub whitespace-nowrap hover:underline cursor-pointer">
                            Zum pressekonto →
                        </a>
                    @else
                        <a href="{{ route('register') }}"
                            class="text-[12.5px] font-semibold text-hub whitespace-nowrap hover:underline cursor-pointer">
                            Jetzt Konto erstellen →
                        </a>
                    @endauth
                </div>
            </div>
        </section>

        {{-- ============== PLATTFORM-FAMILIE ============== --}}
        <section id="familie" class="max-w-layout mx-auto px-8 pt-16 lg:pt-20 pb-12 lg:pb-16">
            <header class="mb-10">
                <div class="section-eyebrow mb-4">Hinter pressekonto</div>
                <h2
                    class="text-[26px] lg:text-[32px] font-bold m-0 tracking-[-0.6px] text-ink leading-[1.18] max-w-[820px]">
                    Zwei eigenständige Pressefachportale. Eine kuratierte Verlags-Familie.
                </h2>
                <p class="text-[14.5px] text-ink-2 leading-[1.55] m-0 mt-4 max-w-[760px]">
                    <x-web.brand-mark brand="pressekonto" :serif="false" /> ist nicht „irgendein Tool" — es ist die
                    zentrale Plattform für unsere beiden Pressefachportale. Jedes Portal hat einen
                    eigenen Charakter, eigene Leserschaft und eigene Themen-Schwerpunkte.
                </p>
            </header>

            <div class="grid gap-6 grid-cols-1 lg:grid-cols-2">

                {{-- presseecho --}}
                <article class="bg-bg-card border border-bg-rule rounded-[4px] overflow-hidden">
                    <div class="px-7 pt-7 pb-6 text-white"
                        style="background:linear-gradient(135deg, rgb(26, 61, 46) 0%, rgb(18, 45, 34) 100%);">
                        <div class="text-[11px] font-bold tracking-[0.20em] uppercase mb-3" style="color:#9BD5B2;">
                            Brand-Portal · 01</div>
                        <div class="flex items-baseline gap-3 mb-2">
                            <span class="text-[28px] lg:text-[34px] font-bold tracking-[-0.8px] leading-none">
                                <x-web.brand-mark brand="presseecho" variant="on-dark" />
                            </span>
                        </div>
                        <div class="text-[12.5px] tracking-[0.12em] uppercase font-semibold" style="color:#9BD5B2;">
                            Branchen-Presse · Themen-Archiv
                        </div>
                    </div>
                    <div class="px-7 py-7">
                        <p class="text-[13.5px] leading-[1.6] text-ink-2 m-0">
                            Themen-Sammlung und Langzeit-Archiv für Pressemitteilungen aus DACH. Editorial-Charakter,
                            Themen-Tiefe, nach Branchen erschlossen — der Ort, an dem eine Mitteilung über Jahre auffindbar
                            bleibt.
                        </p>
                        <hr class="rule my-5" />
                        <div class="grid gap-4 mb-5 grid-cols-2">
                            <div>
                                <div class="font-mono text-[18px] font-semibold text-ink leading-none tabular-nums">
                                    {{ $fmtCount($hubStats['releases_presseecho']) }}</div>
                                <div class="text-[11px] text-ink-3 mt-1">Mitteilungen im Archiv</div>
                            </div>
                            <div>
                                <div class="font-mono text-[18px] font-semibold text-ink leading-none tabular-nums">
                                    {{ $fmtCount($hubStats['categories']) }} Branchen</div>
                                <div class="text-[11px] text-ink-3 mt-1">nach Branchen erschlossen</div>
                            </div>
                        </div>
                        <a href="{{ config('domains.domain_presseecho_url') }}"
                            class="inline-flex items-center gap-2 text-[13px] font-semibold hover:underline"
                            style="color:#1F4D3A;">
                            Zur Plattform: <x-web.brand-mark brand="presseecho" :serif="false"
                                class="font-semibold" />
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                    </div>
                </article>

                {{-- businessportal24 --}}
                <article class="bg-bg-card border border-bg-rule rounded-[4px] overflow-hidden">
                    <div class="px-7 pt-7 pb-6 text-white"
                        style="background:linear-gradient(135deg, rgb(26, 31, 38) 0%, rgb(35, 42, 51) 100%);">
                        <div class="text-[11px] font-bold tracking-[0.20em] uppercase mb-3" style="color:#C84A1E;">
                            Brand-Portal · 02</div>
                        <div class="flex items-baseline gap-3 mb-2">
                            <span class="text-[28px] lg:text-[34px] font-bold tracking-[-0.8px] leading-none">
                                <x-web.brand-mark brand="businessportal24" variant="on-dark" />
                            </span>
                        </div>
                        <div class="text-[12.5px] tracking-[0.12em] uppercase font-semibold" style="color:#C84A1E;">
                            Wirtschaft &amp; Märkte · Live-Charakter
                        </div>
                    </div>
                    <div class="px-7 py-7">
                        <p class="text-[13.5px] leading-[1.6] text-ink-2 m-0">
                            Pressemitteilungen aus Wirtschaft, Märkten, Finanzen. Tageszeitlicher Rhythmus, Live-Ticker,
                            Branchen-fokussiert. Der Ort, an dem eine Mitteilung am Erscheinungstag die größte Sichtbarkeit
                            bekommt.
                        </p>
                        <hr class="rule my-5" />
                        <div class="grid gap-4 mb-5 grid-cols-2">
                            <div>
                                <div class="font-mono text-[18px] font-semibold text-ink leading-none tabular-nums">
                                    {{ $fmtCount($hubStats['releases_businessportal']) }}</div>
                                <div class="text-[11px] text-ink-3 mt-1">Mitteilungen im Archiv</div>
                            </div>
                            <div>
                                <div class="font-mono text-[18px] font-semibold text-ink leading-none tabular-nums">
                                    {{ $fmtCount($hubStats['newsrooms']) }}</div>
                                <div class="text-[11px] text-ink-3 mt-1">aktive Newsrooms</div>
                            </div>
                        </div>
                        <a href="{{ config('domains.domain_businessportal_url') }}"
                            class="inline-flex items-center gap-2 text-[13px] font-semibold hover:underline"
                            style="color:#C84A1E;">
                            Zur Plattform: <x-web.brand-mark brand="businessportal24" :serif="false"
                                class="font-semibold" />
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                    </div>
                </article>
            </div>

            <div class="mt-7 px-6 py-5 bg-hub text-ink-on-dark-2 rounded-[4px] flex items-center gap-5">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                    class="text-hub-line flex-shrink-0">
                    <path d="M3 12c2-2 4-2 6 0M21 12c-2-2-4-2-6 0" stroke="currentColor" stroke-width="1.5"
                        stroke-linecap="round" />
                    <path d="M9 12h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                </svg>
                <div class="text-[13px] leading-[1.55]">
                    Pressemitteilungen, die Sie über <x-web.brand-mark brand="pressekonto" variant="on-dark"
                        :serif="false" /> einreichen, erscheinen auf <strong class="text-white font-semibold">beiden
                        Portalen</strong> — ohne Aufpreis, ohne doppelte Eingabe. Sie haben eine zentrale
                    Mitteilungs-Verwaltung und eine zentrale Reichweiten-Statistik.
                </div>
            </div>
        </section>

        <hr class="rule" />

        {{-- ============== PLATTFORM IN ZAHLEN ============== --}}
        <section class="max-w-layout mx-auto px-8 pt-12 lg:pt-16 pb-12 lg:pb-16">
            <header class="mb-8 grid items-baseline gap-2 lg:gap-6 grid-cols-1 lg:grid-cols-[auto_1fr]">
                <div class="section-eyebrow">Die Plattform in Zahlen</div>
                <div class="text-[12px] text-ink-3 font-mono text-left lg:text-right">Stand
                    {{ now()->locale('de')->isoFormat('D. MMMM YYYY') }}</div>
            </header>
            <hr class="rule-strong mb-7" />

            <div class="grid gap-10 grid-cols-1 lg:grid-cols-[2fr_1fr]">

                <div>
                    <p class="text-[15px] lg:text-[16px] leading-[1.7] text-ink-2 m-0">
                        Über <x-web.brand-mark brand="pressekonto" :serif="false" /> veröffentlichen Unternehmen,
                        Verbände und öffentliche Einrichtungen aus Deutschland, Österreich und der Schweiz.
                        Jede Mitteilung durchläuft vor der Veröffentlichung unsere Inhaltsprüfung — die
                        Veröffentlichungen unterliegen unserem Qualitätsstandard und bleiben im Archiv
                        beider Portale dauerhaft auffindbar.
                    </p>
                    <p class="text-[13px] leading-[1.65] text-ink-3 m-0 mt-5">
                        Alle Kennzahlen stammen direkt aus der Plattform und werden laufend aktualisiert.
                    </p>
                </div>

                <aside class="bg-bg-card-warm border border-bg-rule-strong rounded-[4px] p-6">
                    <div class="eyebrow mb-4">Plattform im Überblick</div>
                    <hr class="rule mb-5" />
                    <dl class="space-y-4 m-0">
                        <div class="flex items-baseline justify-between gap-3">
                            <dt class="text-[12.5px] text-ink-3">Mitteilungen im Archiv</dt>
                            <dd class="font-mono text-[16px] font-semibold text-ink m-0 tabular-nums">{{ $fmtCount($hubStats['releases_total']) }}</dd>
                        </div>
                        <div class="flex items-baseline justify-between gap-3">
                            <dt class="text-[12.5px] text-ink-3">Aktive Newsrooms</dt>
                            <dd class="font-mono text-[16px] font-semibold text-ink m-0 tabular-nums">{{ $fmtCount($hubStats['newsrooms']) }}</dd>
                        </div>
                        <div class="flex items-baseline justify-between gap-3">
                            <dt class="text-[12.5px] text-ink-3">Branchen-Rubriken</dt>
                            <dd class="font-mono text-[16px] font-semibold text-ink m-0 tabular-nums">{{ $fmtCount($hubStats['categories']) }}</dd>
                        </div>
                        <div class="flex items-baseline justify-between gap-3">
                            <dt class="text-[12.5px] text-ink-3">Portale je Veröffentlichung</dt>
                            <dd class="font-mono text-[16px] font-semibold text-ink m-0 tabular-nums">2</dd>
                        </div>
                    </dl>
                </aside>
            </div>
        </section>

        {{-- ============== FAQ ============== --}}
        <section id="faq" class="bg-bg-elev border-y border-bg-rule">
            <div
                class="max-w-layout mx-auto px-8 pt-12 lg:pt-16 pb-12 lg:pb-16 grid gap-10 lg:gap-12 grid-cols-1 lg:grid-cols-[1fr_2fr]">

                <div>
                    <div class="section-eyebrow mb-4">Häufige Fragen</div>
                    <h2 class="text-[24px] lg:text-[28px] font-bold m-0 tracking-[-0.5px] text-ink leading-[1.2]">
                        Antworten zu Konto, Prüfung, Tarifen und Rechtlichem.
                    </h2>
                    <p class="text-[13px] text-ink-3 leading-[1.55] mt-4 m-0">
                        Sie finden hier nicht, was Sie suchen?
                        <button type="button" x-data @click="$dispatch('open-contact-modal')"
                            class="text-hub font-semibold underline underline-offset-[3px] decoration-hub/30 hover:decoration-hub cursor-pointer">Schreiben
                            Sie unserem Support</button> — wir antworten werktags.
                    </p>
                </div>

                <div>
                    <hr class="rule-strong" />

                    <details class="border-b border-bg-rule group" open>
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Was kostet ein
                                Konto?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Ein Konto selbst kostet nichts. Sie zahlen für die Pressemitteilungen, die Sie veröffentlichen —
                            entweder als Einzel-Pressemitteilung ohne Abo ({{ $fmtEuro($singlePmPriceCents) }}&nbsp;€ netto)
                            oder über einen Monats- bzw. Jahres-Tarif ab {{ $fmtEuro((int) $minPlanMonthlyCents) }}&nbsp;€ / Monat.
                            Die Prüfung und die Veröffentlichung auf beiden Portalen sind immer enthalten.
                        </div>
                    </details>

                    <details class="border-b border-bg-rule group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Wie läuft die
                                Prüfung?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Sobald Sie eine Mitteilung einreichen, wird sie auf formale Korrektheit, Quellenqualität,
                            Themenrelevanz und die Einhaltung unserer Veröffentlichungsrichtlinien geprüft — werktags
                            in der Regel am selben Tag. Bei einer Ablehnung erhalten Sie die Begründung direkt an der
                            Mitteilung und können eine Überprüfung verlangen; ein abgelehnter Beitrag verbraucht kein
                            Kontingent.
                        </div>
                    </details>

                    <details class="border-b border-bg-rule group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Auf welchen Portalen
                                erscheint meine Mitteilung?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Auf <strong class="text-ink font-semibold"><x-web.brand-mark brand="presseecho"
                                    :serif="false" /></strong> und <strong
                                class="text-ink font-semibold"><x-web.brand-mark brand="businessportal24"
                                    :serif="false" /></strong> — beide. Welche Sektion und welche Branchen-Rubrik die
                            Mitteilung erhält, wird automatisch aus Ihren Themen-Tags abgeleitet und in der Vorschau
                            angezeigt. Sie können bei Bedarf Hinweise hinzufügen.
                        </div>
                    </details>

                    <details class="border-b border-bg-rule group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Wie lange dauert die
                                Veröffentlichung?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Nach bestandener Inhaltsprüfung geht Ihre Mitteilung sofort live — werktags in der Regel
                            noch am selben Tag. Alternativ legen Sie einen Wunschtermin fest: Dann erscheint die
                            Mitteilung automatisch zum geplanten Zeitpunkt, geprüft und freigegeben ist sie bereits davor.
                        </div>
                    </details>

                    <details class="border-b border-bg-rule group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Kann ich monatlich
                                kündigen?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Ja, alle Tarife sind monatlich kündbar. Bei jährlicher Zahlweise läuft der bereits bezahlte
                            Zeitraum bis zum Ende der zwölf Monate; danach wird monatlich abgerechnet, sofern Sie nicht
                            erneut die jährliche Zahlweise wählen. Kündigen können Sie direkt im Konto oder ohne
                            Anmeldung über <a
                                class="text-hub underline underline-offset-[3px] decoration-hub/30 hover:decoration-hub"
                                href="{{ route('kuendigung', ['edition' => 'de']) }}">unsere Kündigungsseite</a>.
                            Ihr Konto und Ihre Newsroom-Archive bleiben bestehen — auch nach Kündigung sind
                            veröffentlichte Mitteilungen weiter im Archiv auffindbar.
                        </div>
                    </details>

                    <details class="border-b border-bg-rule group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Wie steht es um DSGVO und
                                Datenverarbeitung?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Detaillierte Informationen zu Speicherdauer, Auftragsverarbeitung und Betroffenenrechten
                            finden Sie in unserer <a
                                class="text-hub underline underline-offset-[3px] decoration-hub/30 hover:decoration-hub"
                                href="{{ route('datenschutz', ['edition' => 'de']) }}">Datenschutzerklärung</a>. Für
                            Anfragen zu Ihren Daten nutzen Sie unser <button type="button" x-data
                                @click="$dispatch('open-contact-modal')"
                                class="text-hub underline underline-offset-[3px] decoration-hub/30 hover:decoration-hub cursor-pointer">Kontaktformular</button>.
                        </div>
                    </details>

                    <details class="border-b border-bg-rule group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Was passiert, wenn ich vom
                                Brand-Portal komme?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Wenn Sie über den „Publisher-Bereich"-Button auf <x-web.brand-mark brand="presseecho"
                                :serif="false" /> oder <x-web.brand-mark brand="businessportal24" :serif="false" />
                            hier ankommen, wird Ihnen oben angezeigt, woher Sie kommen — und dass Ihr Konto auf beiden
                            Portalen gilt. Sie können jederzeit zurück auf das ursprüngliche Portal, ohne Anmeldung zu
                            verlieren.
                        </div>
                    </details>

                    <details class="group">
                        <summary class="flex items-center justify-between gap-4 py-5">
                            <span class="text-[15.5px] font-semibold text-ink tracking-[-0.2px]">Gibt es eine API für meine
                                PR-Tools?</span>
                            <svg class="faq-chev text-ink-3 flex-shrink-0" width="14" height="14"
                                viewBox="0 0 16 16" fill="none">
                                <path d="M3 6l5 5 5-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </summary>
                        <div class="pb-5 text-[13.5px] text-ink-2 leading-[1.65] max-w-[640px]">
                            Ja — eine Token-basierte REST-API zum Einreichen von Mitteilungen, Statusabfragen und
                            Bild-Upload. Die technische Dokumentation finden Sie auf unserer <a
                                class="text-hub underline underline-offset-[3px] decoration-hub/30 hover:decoration-hub"
                                href="{{ route('api', ['edition' => 'de']) }}">API-Seite</a>. Ihre API-Tokens
                            erstellen Sie direkt in Ihrem Konto — Voraussetzung ist eine aktive Buchung
                            (Tarif oder Einzel-Pressemitteilung).
                        </div>
                    </details>
                </div>
            </div>
        </section>

        {{-- ============== CTA-Wiederholung ============== --}}
        <section class="max-w-layout mx-auto px-8 pt-12 lg:pt-16 pb-12 lg:pb-16">
            <div
                class="grid items-center gap-6 lg:gap-8 px-6 lg:px-10 py-10 lg:py-12 bg-hub-grad text-ink-on-dark rounded-[4px] relative overflow-hidden grid-cols-1 lg:grid-cols-[1fr_auto]">
                <svg class="absolute inset-0 opacity-10 pointer-events-none" width="100%" height="100%"
                    preserveAspectRatio="none">
                    <defs>
                        <pattern id="hub-grid" x="0" y="0" width="48" height="48" patternUnits="userSpaceOnUse">
                            <path d="M48 0H0V48" stroke="white" stroke-width="0.5" fill="none" />
                        </pattern>
                    </defs>
                    <rect width="100%" height="100%" fill="url(#hub-grid)" />
                </svg>

                <div class="relative">
                    <div class="section-eyebrow on-dark mb-4">Loslegen</div>
                    <h2
                        class="text-[26px] lg:text-[34px] font-bold m-0 tracking-[-0.7px] text-white leading-[1.15] max-w-[680px]">
                        In zwei Minuten registriert. Veröffentlichen mit Tarif oder als Einzel-Pressemitteilung.
                    </h2>
                    <p class="text-[13.5px] lg:text-[14px] text-ink-on-dark-2 leading-[1.55] mt-4 m-0 max-w-[600px]">
                        Das Konto ist kostenlos. Tarife monatlich kündbar, Abrechnung sicher über Stripe.
                    </p>
                </div>
                <div class="relative flex flex-col gap-2.5">
                    @auth
                        <a href="{{ \App\Support\LoginRedirect::homeFor(auth()->user()) }}"
                            class="inline-flex items-center justify-center gap-2.5 px-7 py-3.5 text-[15px] font-semibold text-hub bg-white hover:bg-bg rounded-[6px] whitespace-nowrap transition-colors cursor-pointer">
                            Zum pressekonto
                            <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                                <path d="M3 13L13 3M13 3H6M13 3v7" stroke="currentColor" stroke-width="1.6"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                    @else
                        <a href="{{ route('register') }}"
                            class="inline-flex items-center justify-center gap-2.5 px-7 py-3.5 text-[15px] font-semibold text-hub bg-white hover:bg-bg rounded-[6px] whitespace-nowrap transition-colors cursor-pointer">
                            Konto erstellen
                            <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                                <path d="M3 13L13 3M13 3H6M13 3v7" stroke="currentColor" stroke-width="1.6"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                        <a href="{{ route('login') }}"
                            class="inline-flex items-center justify-center gap-2 px-7 py-3 text-[13px] font-medium text-white/85 hover:text-white whitespace-nowrap transition-colors cursor-pointer">
                            Bereits Konto? Anmelden →
                        </a>
                    @endauth
                </div>
            </div>
        </section>
    </main>

    <x-web.hub.contact-modal />

    <x-web.hub.site-footer />
@endsection