@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-4 sm:px-6 lg:px-8 pt-12 sm:pt-16 lg:pt-20 pb-16 sm: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-[34px] 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>
                            Monats- oder Jahrestarife
                        </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>

                        {{-- Mobile: gestapelte Karten. Ab lg: Diagramm mit absolut positionierten Knoten. --}}
                        <div class="lg:hidden flex flex-col gap-3">
                            <div class="px-3.5 py-3 bg-white border border-bg-rule rounded-[3px]">
                                <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 class="mx-auto w-[120px] h-[120px] 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-[14px] font-bold tracking-[-0.3px] mt-1">
                                    <x-web.brand-mark brand="pressekonto" variant="on-dark" :serif="false" />
                                </div>
                            </div>
                            <div class="px-3.5 py-3 bg-white border border-bg-rule rounded-[3px]">
                                <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 class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <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 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">Reichweite</div>
                                    <div class="font-mono text-[13px] font-semibold text-ink mt-0.5">zusammengeführt</div>
                                </div>
                            </div>
                        </div>

                        <div class="relative mx-auto hidden lg:block" 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-1 sm: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-4 sm:px-6 lg: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-4 sm:px-6 lg: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-4 sm:px-6 lg: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">Monatstarife monatlich kündbar, Jahrestarife zum Ende der Laufzeit.</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-4 sm:px-6 lg: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-4 sm:px-6 lg: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-4 sm:px-6 lg: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]">Welche Laufzeiten
                                haben die Tarife — und wie kündige ich?</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]">
                            Monatstarife verlängern sich monatlich und sind monatlich kündbar. Jahrestarife
                            verlängern sich um jeweils zwölf Monate und sind zum Ende der jeweiligen Laufzeit
                            kündbar. 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-4 sm:px-6 lg: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 mit monatlicher oder jährlicher Laufzeit, 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.site-footer />
@endsection