<div class="min-h-screen bg-white" x-data>

    {{-- ============================================================
         NAVBAR
    ============================================================ --}}
    <nav class="fixed top-0 inset-x-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
        <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">

            <a href="{{ route('homepage.index') }}" class="flex items-center gap-2.5">
                <div class="w-8 h-8 rounded-xl bg-indigo-600 flex items-center justify-center shadow-sm shadow-indigo-200">
                    <x-heroicon-o-bolt class="w-4 h-4 text-white"/>
                </div>
                <span class="font-bold text-gray-900 text-lg tracking-tight">aziros</span>
                <span class="text-[10px] font-semibold text-indigo-600 bg-indigo-50 border border-indigo-100 px-2 py-0.5 rounded-full ml-1">Redesign Preview</span>
            </a>

            <div class="hidden md:flex items-center gap-7 text-sm font-medium text-gray-500">
                <a href="#features" class="hover:text-indigo-600 transition-colors">Features</a>
                <a href="#pricing" class="hover:text-indigo-600 transition-colors">Preise</a>
                <a href="#app" class="hover:text-indigo-600 transition-colors">App</a>
                <a href="#faq" class="hover:text-indigo-600 transition-colors">FAQ</a>
            </div>

            <div class="flex items-center gap-3">
                <a href="{{ route('login') }}"
                   class="hidden sm:block text-sm font-medium text-gray-600 hover:text-indigo-600 transition-colors">
                    Anmelden
                </a>
                <a href="{{ route('register') }}"
                   class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700 transition-colors shadow-sm shadow-indigo-200">
                    Kostenlos starten
                    <x-heroicon-o-arrow-right class="w-3.5 h-3.5"/>
                </a>
            </div>

        </div>
    </nav>


    {{-- ============================================================
         SECTION 1 — HERO
    ============================================================ --}}
    <section class="relative pt-36 pb-28 overflow-hidden">

        {{-- Background glows --}}
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-indigo-50 rounded-full blur-3xl opacity-60 pointer-events-none"></div>
        <div class="absolute top-20 right-0 w-80 h-80 bg-purple-100 rounded-full blur-3xl opacity-40 pointer-events-none"></div>
        <div class="absolute top-10 left-0 w-72 h-72 bg-sky-100 rounded-full blur-3xl opacity-40 pointer-events-none"></div>

        <div class="relative max-w-7xl mx-auto px-6">
            <div class="grid lg:grid-cols-2 gap-16 items-center">

                {{-- LEFT: Copy --}}
                <div class="space-y-8">

                    {{-- Badge --}}
                    <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">
                        <span class="w-1.5 h-1.5 rounded-full bg-indigo-500 animate-pulse"></span>
                        Beta · Jetzt kostenlos starten
                    </div>

                    {{-- Headline --}}
                    <div class="space-y-4">
                        <h1 class="text-5xl lg:text-6xl font-bold text-gray-900 leading-[1.08] tracking-tight">
                            Dein KI-Assistent<br>
                            <span class="bg-gradient-to-r from-indigo-600 via-purple-600 to-indigo-500 bg-clip-text text-transparent">
                                für den Alltag
                            </span>
                        </h1>
                        <p class="text-xl text-gray-500 leading-relaxed max-w-lg">
                            Aria verwaltet deine Termine, Aufgaben und Kontakte —
                            einfach per Sprache oder Text.
                        </p>
                    </div>

                    {{-- CTAs --}}
                    <div class="flex flex-wrap gap-3">
                        <a href="{{ route('register') }}"
                           class="inline-flex items-center gap-2 px-7 py-3.5 rounded-2xl bg-indigo-600 text-white font-semibold hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-200 hover:shadow-indigo-300 hover:-translate-y-0.5">
                            Kostenlos starten
                            <x-heroicon-o-arrow-right class="w-4 h-4"/>
                        </a>
                        <a href="#demo"
                           class="inline-flex items-center gap-2 px-7 py-3.5 rounded-2xl bg-white border border-gray-200 text-gray-700 font-semibold hover:bg-gray-50 hover:border-gray-300 transition-all">
                            <x-heroicon-o-play-circle class="w-4 h-4 text-indigo-500"/>
                            Demo ansehen
                        </a>
                    </div>

                    {{-- Founder note --}}
                    <p class="text-sm text-gray-400">
                        Gebaut von einem Entwickler aus Wien · Keine Kreditkarte nötig
                    </p>

                    {{-- Trust badges --}}
                    <div class="flex flex-wrap items-center gap-5 text-sm text-gray-500 pt-1">
                        <span class="flex items-center gap-1.5">
                            <span class="text-base">🇦🇹</span>
                            Made in Austria
                        </span>
                        <span class="flex items-center gap-1.5">
                            <x-heroicon-o-shield-check class="w-4 h-4 text-green-500"/>
                            DSGVO konform
                        </span>
                        <span class="flex items-center gap-1.5">
                            <x-heroicon-o-server class="w-4 h-4 text-blue-500"/>
                            EU Server
                        </span>
                        <span class="flex items-center gap-1.5">
                            <x-heroicon-o-lock-closed class="w-4 h-4 text-indigo-500"/>
                            Keine Kreditkarte
                        </span>
                    </div>

                </div>

                {{-- RIGHT: Kalender App Mock --}}
                <div class="relative">

                    {{-- Floating badges --}}
                    <div class="absolute -top-4 -left-4 z-20 bg-white border border-gray-100 rounded-2xl shadow-lg px-4 py-3 flex items-center gap-2.5">
                        <div class="w-8 h-8 rounded-xl bg-green-50 flex items-center justify-center">
                            <x-heroicon-o-check-circle class="w-4 h-4 text-green-500"/>
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-gray-800">Termin erstellt</p>
                            <p class="text-[10px] text-gray-400">Meeting mit Jana – 14:00</p>
                        </div>
                    </div>

                    <div class="absolute -bottom-4 -right-4 z-20 bg-white border border-gray-100 rounded-2xl shadow-lg px-4 py-3 flex items-center gap-2.5">
                        <div class="w-8 h-8 rounded-xl bg-purple-50 flex items-center justify-center">
                            <x-heroicon-o-bolt class="w-4 h-4 text-purple-500"/>
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-gray-800">Aria Assistent</p>
                            <p class="text-[10px] text-gray-400">"Morgen 10 Uhr frei?" — Ja</p>
                        </div>
                    </div>

                    {{-- Browser Frame --}}
                    <div class="bg-white rounded-3xl shadow-2xl border border-gray-100 overflow-hidden">

                        {{-- Window bar --}}
                        <div class="flex items-center gap-1.5 px-4 py-3 border-b border-gray-100 bg-gray-50/50">
                            <div class="w-3 h-3 rounded-full bg-red-300"></div>
                            <div class="w-3 h-3 rounded-full bg-amber-300"></div>
                            <div class="w-3 h-3 rounded-full bg-green-300"></div>
                            <div class="flex-1 mx-4">
                                <div class="bg-gray-100 rounded-md h-5 flex items-center px-3">
                                    <span class="text-[10px] text-gray-400">app.aziros.com/calendar</span>
                                </div>
                            </div>
                        </div>

                        <div class="flex h-72">

                            {{-- Sidebar mock --}}
                            <div class="w-12 bg-gray-50/80 border-r border-gray-100 flex flex-col items-center pt-3 gap-3 shrink-0">
                                @foreach([
                                    ['icon' => 'home',          'active' => false],
                                    ['icon' => 'calendar',      'active' => true],
                                    ['icon' => 'check-circle',  'active' => false],
                                    ['icon' => 'document-text', 'active' => false],
                                    ['icon' => 'users',         'active' => false],
                                ] as $item)
                                    <div class="w-8 h-8 rounded-xl flex items-center justify-center {{ $item['active'] ? 'bg-indigo-600' : 'hover:bg-gray-100' }}">
                                        @if($item['icon'] === 'home')
                                            <x-heroicon-o-home class="w-4 h-4 {{ $item['active'] ? 'text-white' : 'text-gray-400' }}"/>
                                        @elseif($item['icon'] === 'calendar')
                                            <x-heroicon-o-calendar class="w-4 h-4 {{ $item['active'] ? 'text-white' : 'text-gray-400' }}"/>
                                        @elseif($item['icon'] === 'check-circle')
                                            <x-heroicon-o-check-circle class="w-4 h-4 {{ $item['active'] ? 'text-white' : 'text-gray-400' }}"/>
                                        @elseif($item['icon'] === 'document-text')
                                            <x-heroicon-o-document-text class="w-4 h-4 {{ $item['active'] ? 'text-white' : 'text-gray-400' }}"/>
                                        @else
                                            <x-heroicon-o-users class="w-4 h-4 {{ $item['active'] ? 'text-white' : 'text-gray-400' }}"/>
                                        @endif
                                    </div>
                                @endforeach
                            </div>

                            {{-- Calendar mock --}}
                            <div class="flex-1 p-3 overflow-hidden">

                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-xs font-semibold text-gray-700">April 2026</span>
                                    <div class="flex gap-1">
                                        <div class="w-5 h-5 rounded bg-gray-100"></div>
                                        <div class="w-5 h-5 rounded bg-gray-100"></div>
                                    </div>
                                </div>

                                {{-- Day columns --}}
                                <div class="grid grid-cols-5 gap-1.5 text-[10px]">
                                    @foreach(['Mo', 'Di', 'Mi', 'Do', 'Fr'] as $di => $day)
                                        <div class="text-center">
                                            <div class="text-gray-400 mb-1">{{ $day }}</div>
                                            <div class="text-[11px] font-semibold mb-2 {{ $di === 1 ? 'w-6 h-6 bg-indigo-600 text-white rounded-full flex items-center justify-center mx-auto' : 'text-gray-700' }}">
                                                {{ 13 + $di }}
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                {{-- Events mock --}}
                                <div class="grid grid-cols-5 gap-1.5 mt-1">
                                    <div class="space-y-1">
                                        <div class="bg-indigo-100 border-l-2 border-indigo-500 rounded px-1.5 py-1">
                                            <p class="text-[9px] font-semibold text-indigo-700 truncate">Team-Stand</p>
                                            <p class="text-[8px] text-indigo-400">09:00–09:30</p>
                                        </div>
                                    </div>
                                    <div class="space-y-1">
                                        <div class="bg-green-100 border-l-2 border-green-500 rounded px-1.5 py-1">
                                            <p class="text-[9px] font-semibold text-green-700 truncate">Arzt</p>
                                            <p class="text-[8px] text-green-400">10:00–11:00</p>
                                        </div>
                                        <div class="bg-amber-100 border-l-2 border-amber-500 rounded px-1.5 py-1">
                                            <p class="text-[9px] font-semibold text-amber-700 truncate">Deep Work</p>
                                            <p class="text-[8px] text-amber-400">14:00–16:00</p>
                                        </div>
                                    </div>
                                    <div></div>
                                    <div class="space-y-1">
                                        <div class="bg-purple-100 border-l-2 border-purple-500 rounded px-1.5 py-1">
                                            <p class="text-[9px] font-semibold text-purple-700 truncate">Design Review</p>
                                            <p class="text-[8px] text-purple-400">11:00–12:00</p>
                                        </div>
                                    </div>
                                    <div class="space-y-1">
                                        <div class="bg-rose-100 border-l-2 border-rose-500 rounded px-1.5 py-1">
                                            <p class="text-[9px] font-semibold text-rose-700 truncate">Zahnarzt</p>
                                            <p class="text-[8px] text-rose-400">09:30–10:30</p>
                                        </div>
                                    </div>
                                </div>

                                {{-- Aria input mock --}}
                                <div class="mt-3 flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-xl px-3 py-2">
                                    <x-heroicon-o-bolt class="w-3.5 h-3.5 text-indigo-400 shrink-0"/>
                                    <span class="text-[10px] text-gray-400">Morgen Meeting mit Jana um 14 Uhr...</span>
                                    <div class="ml-auto w-1.5 h-4 bg-indigo-400 rounded-full animate-pulse"></div>
                                </div>

                            </div>

                        </div>

                    </div>
                </div>

            </div>
        </div>
    </section>


    {{-- ============================================================
         SECTION 2 — FOUNDER STORY
    ============================================================ --}}
    <section class="py-24 bg-gray-50/80 border-y border-gray-100">
        <div class="max-w-5xl mx-auto px-6">

            <div class="grid md:grid-cols-[200px_1fr] gap-12 items-start">

                {{-- Left: Avatar --}}
                <div class="flex flex-col items-center md:items-start gap-4">
                    <div class="w-20 h-20 rounded-full bg-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-200">
                        <span class="text-2xl font-bold text-white">BB</span>
                    </div>
                    <div>
                        <p class="font-bold text-gray-900 text-base">Boban Blaskovic</p>
                        <p class="text-sm text-gray-500">Gründer & Entwickler, Wien</p>
                    </div>
                </div>

                {{-- Right: Quote + Text --}}
                <div class="space-y-5">
                    <blockquote class="text-2xl md:text-3xl font-medium text-gray-800 leading-snug italic">
                        "Ich hab Aziros gebaut weil ich selbst keinen Assistenten finden konnte der einfach funktioniert —
                        ohne Konfiguration, ohne Lernkurve. Einfach sagen was man braucht und es passiert."
                    </blockquote>
                    <p class="text-gray-500 leading-relaxed text-lg">
                        Als Entwickler jongliere ich täglich zwischen Projekten, Terminen und Kundenkontakten.
                        Aziros ist mein eigenes Werkzeug — das ich jetzt mit dir teile.
                    </p>
                </div>

            </div>

        </div>
    </section>


    {{-- ============================================================
         SECTION 3 — WIE ES FUNKTIONIERT
    ============================================================ --}}
    <section id="demo" 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 md:text-5xl font-bold text-gray-900">So einfach ist Aziros</h2>
                <p class="text-lg text-gray-500">In drei Schritten produktiv</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 relative">

                {{-- Connecting line --}}
                <div class="hidden md:block absolute top-9 left-[calc(16.6%+1rem)] right-[calc(16.6%+1rem)] h-px bg-gradient-to-r from-indigo-200 via-purple-200 to-indigo-200"></div>

                @foreach([
                    [
                        'step'  => '1',
                        'icon'  => 'chat',
                        'color' => 'indigo',
                        'title' => 'Einfach sagen was du brauchst',
                        'text'  => 'Schreib oder sprich mit Aria — auf Deutsch, natürlich.',
                    ],
                    [
                        'step'  => '2',
                        'icon'  => 'sparkles',
                        'color' => 'purple',
                        'title' => 'Aria versteht und handelt',
                        'text'  => 'Termine erstellen, verschieben, Aufgaben anlegen — alles automatisch.',
                    ],
                    [
                        'step'  => '3',
                        'icon'  => 'check',
                        'color' => 'teal',
                        'title' => 'Du bleibst im Überblick',
                        'text'  => 'Kalender, Aufgaben und Kontakte immer aktuell und erreichbar.',
                    ],
                ] as $s)
                    <div class="text-center space-y-5 relative">
                        <div class="flex justify-center">
                            <div class="relative w-20 h-20 rounded-2xl bg-white border border-gray-100 shadow-sm flex items-center justify-center">
                                @if($s['icon'] === 'chat')     <x-heroicon-o-chat-bubble-left-right class="w-8 h-8 text-indigo-600"/>
                                @elseif($s['icon'] === 'sparkles') <x-heroicon-o-sparkles class="w-8 h-8 text-purple-600"/>
                                @else                          <x-heroicon-o-check-circle class="w-8 h-8 text-teal-600"/>
                                @endif
                                <div class="absolute -top-3 -right-3 w-7 h-7 rounded-full bg-indigo-600 text-white text-xs font-bold flex items-center justify-center shadow-sm">
                                    {{ $s['step'] }}
                                </div>
                            </div>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-900 text-lg mb-2">{{ $s['title'] }}</h3>
                            <p class="text-gray-500 leading-relaxed max-w-xs mx-auto">{{ $s['text'] }}</p>
                        </div>
                    </div>
                @endforeach

            </div>

        </div>
    </section>


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

            <div class="text-center max-w-2xl mx-auto mb-16 space-y-4">
                <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 text-indigo-700 text-xs font-semibold border border-indigo-100">
                    <x-heroicon-o-sparkles class="w-3.5 h-3.5"/>
                    Alle Werkzeuge in einer App
                </div>
                <h2 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">
                    Alles was du brauchst
                </h2>
                <p class="text-gray-500 text-lg">
                    Von Terminen bis zu Automatisierungen — Aziros hat alles dabei.
                </p>
            </div>

            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @php
                    $features = [
                        [
                            'icon'  => 'calendar',
                            'bg'    => 'bg-indigo-50',
                            'ic'    => 'text-indigo-600',
                            'tag'   => 'bg-indigo-100 text-indigo-700',
                            'pill'  => 'Kalender',
                            'title' => 'Kalender & Termine',
                            'desc'  => 'Erstelle und verwalte Termine per Sprache. Aria kennt deinen Kalender.',
                        ],
                        [
                            'icon'  => 'clipboard',
                            'bg'    => 'bg-teal-50',
                            'ic'    => 'text-teal-600',
                            'tag'   => 'bg-teal-100 text-teal-700',
                            'pill'  => 'Aufgaben',
                            'title' => 'Aufgaben & Notizen',
                            'desc'  => 'Behalte den Überblick über alle offenen Punkte.',
                        ],
                        [
                            'icon'  => 'microphone',
                            'bg'    => 'bg-purple-50',
                            'ic'    => 'text-purple-600',
                            'tag'   => 'bg-purple-100 text-purple-700',
                            'pill'  => 'KI',
                            'title' => 'Aria Sprachassistent',
                            'desc'  => 'Sprich einfach — Aria versteht natürliche Sprache auf Deutsch.',
                        ],
                        [
                            'icon'  => 'bolt',
                            'bg'    => 'bg-amber-50',
                            'ic'    => 'text-amber-600',
                            'tag'   => 'bg-amber-100 text-amber-700',
                            'pill'  => 'Automation',
                            'title' => 'Automationen',
                            'desc'  => 'Tägliche Agenda, Erinnerungen und mehr — vollautomatisch.',
                        ],
                        [
                            'icon'  => 'users',
                            'bg'    => 'bg-rose-50',
                            'ic'    => 'text-rose-600',
                            'tag'   => 'bg-rose-100 text-rose-700',
                            'pill'  => 'Kontakte',
                            'title' => 'Kontakte',
                            'desc'  => 'Alle wichtigen Personen an einem Ort, verbunden mit deinen Terminen.',
                        ],
                        [
                            'icon'  => 'phone',
                            'bg'    => 'bg-green-50',
                            'ic'    => 'text-green-600',
                            'tag'   => 'bg-green-100 text-green-700',
                            'pill'  => 'Bald',
                            'title' => 'Mobile App',
                            'desc'  => 'iOS und Android App — Aria immer dabei.',
                        ],
                    ];
                @endphp

                @foreach($features as $f)
                    <div class="group bg-white border border-gray-100 rounded-2xl p-7 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
                        <div class="flex items-start justify-between mb-5">
                            <div class="w-12 h-12 rounded-2xl {{ $f['bg'] }} flex items-center justify-center">
                                @if($f['icon'] === 'calendar')    <x-heroicon-o-calendar-days class="w-6 h-6 {{ $f['ic'] }}"/>
                                @elseif($f['icon'] === 'clipboard') <x-heroicon-o-clipboard-document-check class="w-6 h-6 {{ $f['ic'] }}"/>
                                @elseif($f['icon'] === 'microphone') <x-heroicon-o-microphone class="w-6 h-6 {{ $f['ic'] }}"/>
                                @elseif($f['icon'] === 'bolt')    <x-heroicon-o-bolt class="w-6 h-6 {{ $f['ic'] }}"/>
                                @elseif($f['icon'] === 'users')   <x-heroicon-o-users class="w-6 h-6 {{ $f['ic'] }}"/>
                                @else                             <x-heroicon-o-device-phone-mobile class="w-6 h-6 {{ $f['ic'] }}"/>
                                @endif
                            </div>
                            <span class="text-[10px] font-semibold px-2.5 py-1 rounded-full {{ $f['tag'] }}">
                                {{ $f['pill'] }}
                            </span>
                        </div>
                        <h3 class="font-bold text-gray-900 text-lg mb-2">{{ $f['title'] }}</h3>
                        <p class="text-sm text-gray-500 leading-relaxed">{{ $f['desc'] }}</p>
                    </div>
                @endforeach

            </div>

        </div>
    </section>


    {{-- ============================================================
         SECTION 5 — BETA ANGEBOT
    ============================================================ --}}
    <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="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 border border-white/20 text-white text-xs font-semibold">
                <span class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></span>
                Limitiertes Beta-Angebot
            </div>

            <h2 class="text-4xl md:text-5xl font-bold text-white leading-tight">
                Sei einer der ersten<br>100 Nutzer
            </h2>

            <p class="text-xl text-indigo-200 leading-relaxed">
                Als Beta-Nutzer bekommst du: direkten Draht zu mir als Gründer,
                deine Feature-Wünsche werden priorisiert und du hilfst Aziros besser zu machen.
            </p>

            <div class="flex flex-col items-center gap-3">
                @foreach([
                    'Kostenlos starten — kein Risiko',
                    '500 Credits jeden Monat gratis',
                    'Pro Plan 50% günstiger als Beta-Nutzer',
                ] as $point)
                    <div class="flex items-center gap-3 text-white">
                        <div class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center shrink-0">
                            <x-heroicon-o-check class="w-3 h-3 text-white"/>
                        </div>
                        <span class="text-lg">{{ $point }}</span>
                    </div>
                @endforeach
            </div>

            <div class="space-y-3">
                <a href="{{ route('register') }}"
                   class="inline-flex items-center gap-2 px-10 py-4 rounded-2xl bg-white text-indigo-700 font-bold text-lg hover:bg-indigo-50 transition-all shadow-xl hover:-translate-y-0.5">
                    Jetzt kostenlos testen
                    <x-heroicon-o-arrow-right class="w-5 h-5"/>
                </a>
                <p class="text-indigo-300 text-sm">
                    Bereits <span class="font-bold text-white">{{ $userCount }}</span> Nutzer dabei
                </p>
            </div>

        </div>

    </section>


    {{-- ============================================================
         SECTION 6 — APP DOWNLOAD
    ============================================================ --}}
    <section id="app" class="py-28">
        <div class="max-w-5xl mx-auto px-6">

            <div class="grid lg:grid-cols-2 gap-16 items-center">

                {{-- Left: Text + Email --}}
                <div class="space-y-8">

                    <div class="space-y-4">
                        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 text-indigo-700 text-xs font-semibold border border-indigo-100">
                            <x-heroicon-o-device-phone-mobile class="w-3.5 h-3.5"/>
                            Mobile App — coming soon
                        </div>
                        <h2 class="text-4xl font-bold text-gray-900 leading-tight">
                            Aziros in<br>
                            <span class="text-indigo-600">deiner Tasche</span>
                        </h2>
                        <p class="text-lg text-gray-500 leading-relaxed">
                            Die App für iOS und Android kommt bald. Trag dich ein
                            und wir benachrichtigen dich beim Launch.
                        </p>
                    </div>

                    {{-- Email Notify Form --}}
                    @if($notifySubmitted)
                        <div class="flex items-center gap-3 p-4 bg-green-50 border border-green-100 rounded-2xl">
                            <x-heroicon-o-check-circle class="w-5 h-5 text-green-500 shrink-0"/>
                            <p class="text-sm font-semibold text-green-700">Danke! Wir melden uns beim App-Launch.</p>
                        </div>
                    @else
                        <form wire:submit="submitNotify" class="flex gap-3">
                            <input
                                type="email"
                                wire:model="notifyEmail"
                                placeholder="deine@email.com"
                                class="flex-1 border border-gray-200 rounded-xl px-4 py-3 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition-all"
                            />
                            <button
                                type="submit"
                                class="px-5 py-3 bg-indigo-600 text-white text-sm font-semibold rounded-xl hover:bg-indigo-700 transition-all shrink-0 shadow-sm shadow-indigo-200">
                                Benachrichtigen
                            </button>
                        </form>
                        @error('notifyEmail')
                            <p class="text-xs text-red-500 -mt-4">{{ $message }}</p>
                        @enderror
                    @endif

                </div>

                {{-- Right: App Store Badges + Phone Mock --}}
                <div class="flex flex-col items-center gap-8">

                    {{-- iPhone Mockup --}}
                    <div class="relative w-52 h-[400px] bg-gray-900 rounded-[2.5rem] shadow-2xl border-[5px] border-gray-800 overflow-hidden">
                        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-20 h-6 bg-gray-900 rounded-b-xl z-10"></div>
                        <div class="absolute inset-0 bg-white overflow-hidden">
                            <div class="h-8 bg-white flex items-end justify-between px-4 pb-1">
                                <span class="text-[8px] font-bold text-gray-800">9:41</span>
                            </div>
                            <div class="px-3 pt-2 border-b border-gray-100 pb-2 flex items-center gap-1.5">
                                <div class="w-5 h-5 rounded-md bg-indigo-600 flex items-center justify-center">
                                    <x-heroicon-o-bolt class="w-2.5 h-2.5 text-white"/>
                                </div>
                                <span class="text-xs font-bold text-gray-900">aziros</span>
                            </div>
                            <div class="px-3 pt-2 space-y-1.5">
                                <p class="text-[9px] text-gray-400">Heute · 17. April</p>
                                @foreach([
                                    ['Team-Standup', '09:00', 'indigo'],
                                    ['Design Review', '11:00', 'green'],
                                    ['Kundencall', '14:00', 'purple'],
                                    ['Zahnarzt', '16:00', 'amber'],
                                ] as $ev)
                                    <div class="bg-{{ $ev[2] }}-50 border-l-[2px] border-{{ $ev[2] }}-500 rounded-md px-2 py-1.5">
                                        <p class="text-[9px] font-semibold text-{{ $ev[2] }}-700">{{ $ev[0] }}</p>
                                        <p class="text-[8px] text-{{ $ev[2] }}-400">{{ $ev[1] }}</p>
                                    </div>
                                @endforeach
                                <div class="flex items-center gap-1.5 bg-gray-50 border border-gray-200 rounded-lg px-2 py-1.5 mt-2">
                                    <x-heroicon-o-microphone class="w-2.5 h-2.5 text-indigo-500 shrink-0"/>
                                    <span class="text-[8px] text-gray-400">Hey Aria...</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Store Badges --}}
                    <div class="flex gap-4">
                        <div class="relative">
                            <div class="opacity-50 cursor-not-allowed">
                                <div class="flex items-center gap-2.5 px-4 py-2.5 bg-gray-900 text-white rounded-xl min-w-[130px]">
                                    <svg class="w-5 h-5 fill-white shrink-0" viewBox="0 0 24 24">
                                        <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
                                    </svg>
                                    <div>
                                        <p class="text-[8px] text-gray-400">Download on the</p>
                                        <p class="text-xs font-semibold">App Store</p>
                                    </div>
                                </div>
                            </div>
                            <span class="absolute -top-2 -right-2 text-[9px] bg-indigo-600 text-white px-1.5 py-0.5 rounded-full font-semibold">Bald</span>
                        </div>
                        <div class="relative">
                            <div class="opacity-50 cursor-not-allowed">
                                <div class="flex items-center gap-2.5 px-4 py-2.5 bg-gray-900 text-white rounded-xl min-w-[130px]">
                                    <svg class="w-5 h-5 shrink-0" viewBox="0 0 24 24">
                                        <path fill="#4CAF50" d="M1.22 0c-.23.27-.22.7-.22 1.06V22.94c0 .36-.01.8.22 1.06l.09.08 12.32-12.32v-.52L1.31-.08z"/>
                                        <path fill="#FFC107" d="M17.7 16.57l-4.1-4.1v-.52l4.1-4.1.1.05 4.9 2.78c1.4.8 1.4 2.1 0 2.9l-4.9 2.78z"/>
                                        <path fill="#FF3D00" d="M17.8 16.52L13.63 12.37 1.22 24.78c.46.49 1.22.55 2.08.06l14.5-8.32"/>
                                        <path fill="#388E3C" d="M17.8 7.48L3.3.16C2.44-.33 1.68-.27 1.22.22l12.41 12.15z"/>
                                    </svg>
                                    <div>
                                        <p class="text-[8px] text-gray-400">Get it on</p>
                                        <p class="text-xs font-semibold">Google Play</p>
                                    </div>
                                </div>
                            </div>
                            <span class="absolute -top-2 -right-2 text-[9px] bg-indigo-600 text-white px-1.5 py-0.5 rounded-full font-semibold">Bald</span>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </section>


    {{-- ============================================================
         SECTION 7 — PRICING
    ============================================================ --}}
    <section id="pricing" 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">
                <h2 class="text-4xl md:text-5xl font-bold text-gray-900">Transparent und fair</h2>
                <p class="text-lg text-gray-500">Zwei Pläne. Keine versteckten Kosten.</p>
            </div>

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

                {{-- FREE --}}
                <div class="bg-white border border-gray-100 rounded-3xl p-8 shadow-sm space-y-6">
                    <div>
                        <h3 class="font-bold text-gray-900 text-xl mb-2">Kostenlos</h3>
                        <div class="flex items-end gap-1">
                            <span class="text-5xl font-bold text-gray-900">0€</span>
                            <span class="text-sm text-gray-400 mb-1.5">/ Monat</span>
                        </div>
                    </div>
                    <hr class="border-gray-100">
                    <ul class="space-y-3">
                        @foreach([
                            [true,  '500 Credits / Monat'],
                            [true,  'Kalender & Aufgaben'],
                            [true,  'Aria KI-Assistent'],
                            [true,  'iOS & Android App'],
                            [false, 'Push Notifications'],
                            [false, 'Automationen (Pro)'],
                            [false, 'E-Mail Erinnerungen'],
                        ] as [$on, $label])
                            <li class="flex items-center gap-3 text-sm {{ $on ? 'text-gray-700' : 'text-gray-400' }}">
                                @if($on)
                                    <x-heroicon-o-check class="w-4 h-4 text-green-500 shrink-0"/>
                                @else
                                    <x-heroicon-o-x-mark class="w-4 h-4 text-gray-300 shrink-0"/>
                                @endif
                                {{ $label }}
                            </li>
                        @endforeach
                    </ul>
                    <a href="{{ route('register') }}"
                       class="block text-center w-full px-5 py-3.5 rounded-2xl text-sm font-bold bg-gray-100 text-gray-700 hover:bg-gray-200 transition-all">
                        Kostenlos starten
                    </a>
                </div>

                {{-- PRO --}}
                <div class="bg-white border-2 border-indigo-200 rounded-3xl p-8 shadow-lg ring-1 ring-indigo-100 space-y-6 relative">
                    <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-indigo-600 text-white text-xs font-bold uppercase tracking-wider shadow-sm">
                        Beliebteste Wahl
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-900 text-xl mb-2">Pro</h3>
                        <div class="flex items-end gap-1">
                            <span class="text-5xl font-bold text-gray-900">12€</span>
                            <span class="text-sm text-gray-400 mb-1.5">/ Monat</span>
                        </div>
                    </div>
                    <hr class="border-indigo-100">
                    <ul class="space-y-3">
                        @foreach([
                            '10.000 Credits / Monat',
                            'Alles aus Free',
                            'Push Notifications',
                            'Alle Automationen',
                            'E-Mail Erinnerungen',
                            'Google Calendar Sync',
                        ] as $label)
                            <li class="flex items-center gap-3 text-sm text-gray-700">
                                <x-heroicon-o-check class="w-4 h-4 text-indigo-500 shrink-0"/>
                                {{ $label }}
                            </li>
                        @endforeach
                    </ul>
                    <a href="{{ route('register') }}"
                       class="block text-center w-full px-5 py-3.5 rounded-2xl text-sm font-bold bg-indigo-600 text-white hover:bg-indigo-700 transition-all shadow-sm shadow-indigo-200">
                        Pro testen
                    </a>
                </div>

            </div>

            <p class="text-center text-sm text-gray-400 mt-8">
                Beta-Nutzer erhalten <span class="font-semibold text-indigo-600">50% Rabatt</span> auf den Pro Plan — für immer.
            </p>

        </div>
    </section>


    {{-- ============================================================
         SECTION 8 — FAQ
    ============================================================ --}}
    <section id="faq" class="py-28">
        <div class="max-w-3xl mx-auto px-6">

            <div class="text-center mb-16 space-y-3">
                <h2 class="text-4xl md:text-5xl font-bold text-gray-900">Häufige Fragen</h2>
                <p class="text-lg text-gray-500">Alles was du wissen musst</p>
            </div>

            <div class="space-y-3">

                @php
                    $faqs = [
                        [
                            'q' => 'Was sind Credits?',
                            'a' => 'Credits werden für KI-Aktionen verwendet. Ein einfaches Gespräch kostet ~5 Credits, eine Aktion wie Termin erstellen ~30 Credits. Free Nutzer bekommen 500 Credits/Monat, Pro Nutzer 10.000.',
                        ],
                        [
                            'q' => 'Muss ich eine Kreditkarte angeben?',
                            'a' => 'Nein. Du kannst Aziros kostenlos starten ohne Zahlungsdaten anzugeben. Erst beim Upgrade auf Pro wird eine Zahlungsmethode benötigt.',
                        ],
                        [
                            'q' => 'Wie sicher sind meine Daten?',
                            'a' => 'Deine Daten werden ausschließlich auf EU-Servern gespeichert und verarbeitet. Aziros ist vollständig DSGVO-konform. Wir verkaufen keine Daten an Dritte.',
                        ],
                        [
                            'q' => 'Was ist der Unterschied zwischen Free und Pro?',
                            'a' => 'Der Free Plan enthält alle Grundfunktionen (Kalender, Aufgaben, Aria KI-Assistent) mit 500 Credits/Monat. Pro schaltet Automationen, Push Notifications, E-Mail Erinnerungen und Google Calendar Sync frei — mit 10.000 Credits/Monat.',
                        ],
                        [
                            'q' => 'Kann ich jederzeit kündigen?',
                            'a' => 'Ja, jederzeit. Kein Abo, keine Mindestlaufzeit. Du kannst deinen Pro Plan in den Einstellungen monatlich kündigen — du verlierst keine Daten.',
                        ],
                    ];
                @endphp

                @foreach($faqs as $faq)
                    <div
                        x-data="{ open: false }"
                        class="border border-gray-100 rounded-2xl overflow-hidden bg-white shadow-sm"
                    >
                        <button
                            @click="open = !open"
                            class="w-full flex items-center justify-between px-6 py-5 text-left font-semibold text-gray-900 hover:bg-gray-50 transition-colors"
                        >
                            <span>{{ $faq['q'] }}</span>
                            <x-heroicon-o-chevron-down
                                class="w-5 h-5 text-gray-400 transition-transform duration-200 shrink-0 ml-4"
                                ::class="open ? 'rotate-180' : ''"
                            />
                        </button>
                        <div
                            x-show="open"
                            x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 max-h-0"
                            x-transition:enter-end="opacity-100 max-h-96"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-start="opacity-100 max-h-96"
                            x-transition:leave-end="opacity-0 max-h-0"
                            class="px-6 pb-5"
                        >
                            <p class="text-gray-500 leading-relaxed">{{ $faq['a'] }}</p>
                        </div>
                    </div>
                @endforeach

            </div>

        </div>
    </section>


    {{-- ============================================================
         FOOTER
    ============================================================ --}}
    <footer class="bg-white border-t border-gray-100 py-10">
        <div class="max-w-6xl mx-auto px-6">
            <div class="flex flex-col md:flex-row items-center justify-between gap-4">
                <div class="flex items-center gap-2.5">
                    <div class="w-7 h-7 rounded-lg bg-indigo-600 flex items-center justify-center">
                        <x-heroicon-o-bolt class="w-3.5 h-3.5 text-white"/>
                    </div>
                    <span class="font-bold text-gray-900 tracking-tight">aziros</span>
                    <span class="text-xs text-indigo-600 bg-indigo-50 border border-indigo-100 px-2 py-0.5 rounded-full font-medium">Redesign Preview</span>
                </div>
                <span class="text-sm text-gray-400">&copy; {{ date('Y') }} aziros · Made with ♥ in Vienna</span>
                <div class="flex items-center gap-4 text-sm text-gray-500">
                    <a href="{{ route('homepage.index') }}" class="hover:text-indigo-600 transition-colors">Aktuelle Homepage</a>
                    <span class="text-gray-200">&middot;</span>
                    <a href="{{ route('register') }}" class="text-indigo-600 font-semibold hover:text-indigo-700 transition-colors">Kostenlos starten</a>
                </div>
            </div>
        </div>
    </footer>

</div>
