<div class="min-h-screen">

    @include('partials.homepage.navbar')

    {{-- ============================================================
         HERO
    ============================================================ --}}
    <section class="relative pt-36 pb-20 overflow-hidden">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] bg-indigo-50 rounded-full blur-3xl opacity-60 pointer-events-none"></div>
        <div class="absolute top-20 right-0 w-72 h-72 bg-purple-100 rounded-full blur-3xl opacity-40 pointer-events-none"></div>
        <div class="absolute top-10 left-0 w-64 h-64 bg-sky-100 rounded-full blur-3xl opacity-30 pointer-events-none"></div>

        <div class="relative max-w-5xl mx-auto px-6 text-center space-y-6">
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-700 text-xs font-semibold">
                <x-heroicon-o-sparkles class="w-3.5 h-3.5"/>
                Transparent & fair
            </div>
            <h1 class="text-5xl md:text-6xl font-bold text-gray-900 leading-[1.1] tracking-tight">
                Der richtige Plan<br>
                <span class="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">für jedes Team</span>
            </h1>
            <p class="text-xl text-gray-500 max-w-2xl mx-auto leading-relaxed">
                Zwei Pläne, keine versteckten Kosten. Starte kostenlos und upgrade wenn du bereit bist — jederzeit kündbar.
            </p>

            {{-- Billing Toggle --}}
            <div class="flex justify-center pt-4">
                <div class="inline-flex items-center bg-white border border-gray-200 rounded-2xl p-1.5 shadow-sm">
                    <button wire:click="$set('billing', 'monthly')"
                            class="px-6 py-2.5 rounded-xl text-sm font-semibold transition-all
                                {{ $billing === 'monthly' ? 'bg-indigo-600 text-white shadow-sm' : 'text-gray-500 hover:text-gray-700' }}">
                        Monatlich
                    </button>
                    <button wire:click="$set('billing', 'yearly')"
                            class="px-6 py-2.5 rounded-xl text-sm font-semibold transition-all flex items-center gap-2
                                {{ $billing === 'yearly' ? 'bg-indigo-600 text-white shadow-sm' : 'text-gray-500 hover:text-gray-700' }}">
                        Jährlich
                        <span class="text-[10px] font-bold px-2 py-0.5 rounded-full
                            {{ $billing === 'yearly' ? 'bg-white/20 text-white' : 'bg-green-50 text-green-600' }}">
                            Spare bis zu 20%
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </section>


    {{-- ============================================================
         PLAN CARDS — 2 Spalten, zentriert, volle Breite
    ============================================================ --}}
    <section class="pb-32">
        <div class="max-w-5xl mx-auto px-6">

            <div class="grid md:grid-cols-2 gap-8 items-start">
                @foreach($plans as $plan)
                    <div class="relative bg-white border rounded-3xl overflow-hidden transition-all duration-300
                        {{ $plan->is_featured
                            ? 'border-indigo-200 shadow-xl ring-2 ring-indigo-100'
                            : 'border-gray-100 shadow-sm hover:shadow-lg hover:-translate-y-1' }}">

                        @if($plan->is_featured)
                            <div class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white text-center text-xs font-bold py-2 tracking-wider uppercase">
                                Beliebt
                            </div>
                        @endif

                        <div class="p-8 lg:p-10 space-y-7">

                            {{-- Plan name --}}
                            <div class="space-y-2">
                                <h3 class="text-2xl font-bold text-gray-900">{{ $plan->name }}</h3>
                                <p class="text-gray-500">
                                    {{ $plan->isFree() ? 'Perfekt zum Kennenlernen — dauerhaft kostenlos' : 'Alle Features, volle Power — für Profis und Teams' }}
                                </p>
                            </div>

                            {{-- Price --}}
                            <div class="space-y-1.5">
                                <div class="flex items-end gap-2">
                                    @if($plan->isFree())
                                        <span class="text-6xl font-bold text-gray-900">0 €</span>
                                        <span class="text-lg text-gray-400 mb-2">für immer</span>
                                    @else
                                        @if($billing === 'monthly')
                                            <span class="text-6xl font-bold text-gray-900">{{ number_format($plan->getMonthlyPrice() / 100, 0, ',', '.') }} €</span>
                                            <span class="text-lg text-gray-400 mb-2">/ Monat</span>
                                        @else
                                            <span class="text-6xl font-bold text-gray-900">{{ number_format($plan->getYearlyPrice() / 100 / 12, 2, ',', '.') }} €</span>
                                            <span class="text-lg text-gray-400 mb-2">/ Monat</span>
                                        @endif
                                    @endif
                                </div>
                                @if(!$plan->isFree() && $billing === 'yearly')
                                    <p class="text-sm text-green-600 font-medium flex items-center gap-1.5">
                                        <x-heroicon-o-check-circle class="w-4 h-4"/>
                                        {{ $plan->yearly_discount_months }} {{ $plan->yearly_discount_months === 1 ? 'Monat' : 'Monate' }} gratis — {{ number_format($plan->getYearlyPrice() / 100, 0, ',', '.') }} € / Jahr
                                    </p>
                                @endif
                                @if(!$plan->isFree() && $billing === 'monthly')
                                    <p class="text-sm text-gray-400">
                                        {{ number_format($plan->getMonthlyPrice() / 100 * 12, 0, ',', '.') }} € / Jahr bei monatlicher Zahlung
                                    </p>
                                @endif
                            </div>

                            {{-- CTA --}}
                            <a href="{{ route('register') }}"
                               class="block text-center w-full px-6 py-4 rounded-2xl font-bold transition-all
                                   {{ $plan->is_featured
                                       ? 'bg-indigo-600 text-white hover:bg-indigo-700 shadow-lg shadow-indigo-200 hover:shadow-indigo-300 hover:-translate-y-0.5'
                                       : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                                {{ $plan->isFree() ? 'Kostenlos starten' : 'Pro starten' }}
                            </a>

                            <hr class="border-gray-100">

                            {{-- Limits --}}
                            <div class="grid grid-cols-2 gap-4">
                                <div class="bg-gray-50 rounded-xl p-4 text-center">
                                    <x-heroicon-o-cpu-chip class="w-5 h-5 text-gray-400 mx-auto mb-1.5"/>
                                    <p class="text-xl font-bold text-gray-900">{{ $plan->credit_limit > 0 ? $plan->credit_limit : '∞' }}</p>
                                    <p class="text-xs text-gray-500 mt-0.5">Credits</p>
                                </div>
                                <div class="bg-gray-50 rounded-xl p-4 text-center">
                                    <x-heroicon-o-device-phone-mobile class="w-5 h-5 text-gray-400 mx-auto mb-1.5"/>
                                    <p class="text-xl font-bold text-gray-900">{{ $plan->device_limit > 0 ? $plan->device_limit : '∞' }}</p>
                                    <p class="text-xs text-gray-500 mt-0.5">Geräte</p>
                                </div>
                            </div>

                            {{-- Features --}}
                            <div class="space-y-3.5">
                                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Enthalten</p>
                                <ul class="space-y-3">
                                    @foreach($plan->features as $feature)
                                        <li class="flex items-start gap-3">
                                            <div class="w-5 h-5 rounded-full bg-green-50 flex items-center justify-center shrink-0 mt-0.5">
                                                <x-heroicon-o-check class="w-3 h-3 text-green-600"/>
                                            </div>
                                            <span class="text-gray-700">{{ $feature->label }}</span>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

                        </div>

                    </div>
                @endforeach
            </div>

        </div>
    </section>


    {{-- ============================================================
         TRUST BADGES
    ============================================================ --}}
    <section class="py-16 bg-white/60 border-y border-gray-100">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach([
                    ['icon' => 'shield-check', 'bg' => 'bg-green-50', 'ic' => 'text-green-600', 'title' => 'DSGVO-konform', 'desc' => 'Hosting in der EU, deine Daten bleiben geschützt'],
                    ['icon' => 'credit-card', 'bg' => 'bg-indigo-50', 'ic' => 'text-indigo-600', 'title' => 'Keine Kreditkarte nötig', 'desc' => 'Starte kostenlos, ohne Zahlungsdaten'],
                    ['icon' => 'arrow-path', 'bg' => 'bg-purple-50', 'ic' => 'text-purple-600', 'title' => 'Jederzeit wechseln', 'desc' => 'Upgrade, downgrade oder kündige — ganz ohne Stress'],
                    ['icon' => 'clock', 'bg' => 'bg-amber-50', 'ic' => 'text-amber-600', 'title' => 'In 60 Sekunden startklar', 'desc' => 'Registrieren und sofort loslegen'],
                ] as $badge)
                    <div class="flex items-start gap-4 p-5">
                        <div class="w-11 h-11 rounded-2xl {{ $badge['bg'] }} flex items-center justify-center shrink-0">
                            @if($badge['icon'] === 'shield-check')  <x-heroicon-o-shield-check class="w-5 h-5 {{ $badge['ic'] }}"/>
                            @elseif($badge['icon'] === 'credit-card') <x-heroicon-o-credit-card class="w-5 h-5 {{ $badge['ic'] }}"/>
                            @elseif($badge['icon'] === 'arrow-path') <x-heroicon-o-arrow-path class="w-5 h-5 {{ $badge['ic'] }}"/>
                            @else                                    <x-heroicon-o-clock class="w-5 h-5 {{ $badge['ic'] }}"/>
                            @endif
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-900">{{ $badge['title'] }}</p>
                            <p class="text-xs text-gray-500 mt-0.5 leading-relaxed">{{ $badge['desc'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>


    {{-- ============================================================
         FEATURE COMPARISON TABLE
    ============================================================ --}}
    <section class="py-28">
        <div class="max-w-5xl mx-auto px-6">

            <div class="text-center mb-16 space-y-3">
                <h2 class="text-4xl font-bold text-gray-900 leading-tight">Was ist inklusive?</h2>
                <p class="text-lg text-gray-500">Ein detaillierter Vergleich aller Funktionen</p>
            </div>

            <div class="bg-white border border-gray-100 rounded-3xl shadow-sm overflow-hidden">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-100">
                            <th class="text-left p-6 text-gray-500 font-medium text-sm w-1/2">Funktion</th>
                            @foreach($plans as $plan)
                                <th class="p-6 text-center w-1/4">
                                    <span class="text-lg font-bold text-gray-900">{{ $plan->name }}</span>
                                    <p class="text-xs text-gray-400 mt-0.5 font-normal">
                                        {{ $plan->isFree() ? '0 €' : number_format($plan->getMonthlyPrice() / 100, 0) . ' € / Monat' }}
                                    </p>
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody class="text-sm">
                        @foreach([
                            ['name' => 'Kalender & Terminverwaltung', 'free' => true, 'pro' => true],
                            ['name' => 'Aufgaben & Notizen', 'free' => true, 'pro' => true],
                            ['name' => 'Kontaktverwaltung', 'free' => true, 'pro' => true],
                            ['name' => 'KI-Assistent (Basis)', 'free' => true, 'pro' => true],
                            ['name' => 'KI-Assistent (Erweitert)', 'free' => false, 'pro' => true],
                            ['name' => 'Google Calendar Sync', 'free' => false, 'pro' => true],
                            ['name' => 'Outlook Sync', 'free' => false, 'pro' => true],
                            ['name' => 'Automatisierungen', 'free' => false, 'pro' => true],
                            ['name' => 'Unbegrenzte Credits', 'free' => false, 'pro' => true],
                            ['name' => 'Prioritäts-Support', 'free' => false, 'pro' => true],
                        ] as $i => $row)
                            <tr class="{{ $i % 2 === 0 ? 'bg-gray-50/50' : '' }} border-b border-gray-50 last:border-b-0">
                                <td class="px-6 py-4 text-gray-700 font-medium">{{ $row['name'] }}</td>
                                <td class="px-6 py-4 text-center">
                                    @if($row['free'])
                                        <div class="w-6 h-6 rounded-full bg-green-50 flex items-center justify-center mx-auto">
                                            <x-heroicon-o-check class="w-3.5 h-3.5 text-green-600"/>
                                        </div>
                                    @else
                                        <div class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center mx-auto">
                                            <x-heroicon-o-minus class="w-3.5 h-3.5 text-gray-300"/>
                                        </div>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-center">
                                    @if($row['pro'])
                                        <div class="w-6 h-6 rounded-full bg-green-50 flex items-center justify-center mx-auto">
                                            <x-heroicon-o-check class="w-3.5 h-3.5 text-green-600"/>
                                        </div>
                                    @else
                                        <div class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center mx-auto">
                                            <x-heroicon-o-minus class="w-3.5 h-3.5 text-gray-300"/>
                                        </div>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr class="border-t border-gray-100">
                            <td class="p-6"></td>
                            @foreach($plans as $plan)
                                <td class="p-6 text-center">
                                    <a href="{{ route('register') }}"
                                       class="inline-flex items-center justify-center px-5 py-2.5 rounded-xl text-sm font-semibold transition-all
                                           {{ $plan->is_featured
                                               ? 'bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm shadow-indigo-200'
                                               : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                                        {{ $plan->isFree() ? 'Kostenlos starten' : 'Pro starten' }}
                                    </a>
                                </td>
                            @endforeach
                        </tr>
                    </tfoot>
                </table>
            </div>

        </div>
    </section>


    {{-- ============================================================
         FAQ
    ============================================================ --}}
    <section class="py-28 bg-gray-50/80 border-y border-gray-100">
        <div class="max-w-4xl mx-auto px-6">

            <div class="text-center mb-16 space-y-3">
                <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-700 text-xs font-semibold">
                    <x-heroicon-o-question-mark-circle class="w-3.5 h-3.5"/>
                    Häufige Fragen
                </div>
                <h2 class="text-4xl font-bold text-gray-900 leading-tight">Noch Fragen?</h2>
                <p class="text-lg text-gray-500">Alles was du über unsere Pläne wissen musst</p>
            </div>

            <div class="space-y-4" x-data="{ open: null }">
                @foreach([
                    ['q' => 'Kann ich jederzeit upgraden oder downgraden?', 'a' => 'Ja, du kannst deinen Plan jederzeit wechseln. Beim Upgrade wird der Restbetrag deines aktuellen Plans anteilig verrechnet. Beim Downgrade gilt der neue Plan ab der nächsten Abrechnungsperiode.'],
                    ['q' => 'Gibt es eine Mindestlaufzeit?', 'a' => 'Nein. Du kannst monatlich kündigen — ohne Vertragsbindung oder versteckte Kosten. Bei jährlicher Zahlung wird der Restbetrag bei Kündigung nicht erstattet.'],
                    ['q' => 'Ist der kostenlose Plan wirklich kostenlos?', 'a' => 'Ja, der Free-Plan ist dauerhaft kostenlos. Keine Kreditkarte erforderlich. Du kannst jederzeit auf Pro upgraden, wenn du mehr Funktionen benötigst.'],
                    ['q' => 'Welche Zahlungsmethoden akzeptiert ihr?', 'a' => 'Wir akzeptieren alle gängigen Kreditkarten (Visa, Mastercard, AMEX) sowie SEPA-Lastschrift für Kunden im Euro-Raum.'],
                    ['q' => 'Kann ich aziros im Team nutzen?', 'a' => 'Ja! Jedes Teammitglied benötigt ein eigenes Konto mit einem passenden Plan. Über die Kontakte-Funktion könnt ihr Termine koordinieren und Kalender teilen.'],
                    ['q' => 'Was passiert mit meinen Daten nach einer Kündigung?', 'a' => 'Deine Daten bleiben nach Kündigung noch 30 Tage gespeichert. In dieser Zeit kannst du jederzeit wieder einsteigen. Danach werden alle Daten unwiderruflich gelöscht.'],
                ] as $i => $faq)
                    <div class="bg-white border border-gray-100 rounded-2xl shadow-sm overflow-hidden">
                        <button @click="open = open === {{ $i }} ? null : {{ $i }}"
                                class="w-full flex items-center justify-between px-7 py-5 text-left">
                            <span class="text-base font-semibold text-gray-800 pr-4">{{ $faq['q'] }}</span>
                            <x-heroicon-o-chevron-down class="w-5 h-5 text-gray-400 transition-transform duration-200 shrink-0"
                                                       ::class="open === {{ $i }} && 'rotate-180'"/>
                        </button>
                        <div x-show="open === {{ $i }}" x-collapse>
                            <div class="px-7 pb-5 text-gray-500 leading-relaxed">
                                {{ $faq['a'] }}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
    </section>


    {{-- ============================================================
         CTA
    ============================================================ --}}
    <section class="py-28 bg-gradient-to-br from-indigo-600 via-indigo-700 to-purple-700 relative overflow-hidden">
        <div class="absolute inset-0 pointer-events-none">
            <div class="absolute top-0 left-0 w-[500px] h-[500px] bg-white/5 rounded-full -translate-x-1/2 -translate-y-1/2 blur-3xl"></div>
            <div class="absolute bottom-0 right-0 w-[500px] h-[500px] bg-white/5 rounded-full translate-x-1/2 translate-y-1/2 blur-3xl"></div>
        </div>

        <div class="relative max-w-3xl mx-auto px-6 text-center space-y-8">
            <div class="space-y-4">
                <h2 class="text-4xl md:text-5xl font-bold text-white leading-tight">Noch unsicher?</h2>
                <p class="text-xl text-indigo-200">Starte kostenlos und überzeuge dich selbst. Kein Risiko.</p>
            </div>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="{{ route('register') }}"
                   class="inline-flex items-center gap-2 px-8 py-4 rounded-2xl bg-white text-indigo-700 font-bold hover:bg-indigo-50 transition-all shadow-xl hover:-translate-y-0.5">
                    Kostenlos loslegen
                    <x-heroicon-o-arrow-right class="w-4 h-4"/>
                </a>
                <a href="{{ route('homepage.kontakt') }}"
                   class="inline-flex items-center gap-2 px-8 py-4 rounded-2xl bg-indigo-500/40 text-white font-semibold hover:bg-indigo-500/60 transition-all border border-white/20">
                    Fragen? Schreib uns
                </a>
            </div>
        </div>
    </section>


    @include('partials.homepage.footer')

</div>
