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

    @include('partials.homepage.navbar')


    {{-- ============================================================
         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>
                        KI-gestützte Produktivität — jetzt verfügbar
                    </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 Kalender.<br>
                            Dein Assistent.<br>
                            <span class="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
                                Dein Vorteil.
                            </span>
                        </h1>
                        <p class="text-xl text-gray-500 leading-relaxed max-w-lg">
                            aziros verbindet Kalender, Aufgaben und einen KI-Assistenten in einer Plattform.
                            Sag was du brauchst — der Rest passiert automatisch.
                        </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="#how-it-works"
                           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"/>
                            Wie es funktioniert
                        </a>
                    </div>

                    {{-- Social proof --}}
                    <div class="flex items-center gap-4 pt-2">
                        <div class="flex -space-x-2.5">
                            @foreach([
                                'https://i.pravatar.cc/40?img=1',
                                'https://i.pravatar.cc/40?img=5',
                                'https://i.pravatar.cc/40?img=8',
                                'https://i.pravatar.cc/40?img=12',
                            ] as $avatar)
                                <img src="{{ $avatar }}" alt="User"
                                     class="w-9 h-9 rounded-full border-2 border-white object-cover">
                            @endforeach
                        </div>
                        <div class="text-sm text-gray-500">
                            <span class="font-semibold text-gray-700">500+</span> Teams nutzen aziros täglich
                        </div>
                    </div>

                </div>

                {{-- RIGHT: 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">KI-Assistent</p>
                            <p class="text-[10px] text-gray-400">"Morgen 10 Uhr frei?" — Ja</p>
                        </div>
                    </div>

                    {{-- App UI Mock --}}
                    <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">

                                {{-- Week header --}}
                                <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 $i => $day)
                                        <div class="text-center">
                                            <div class="text-gray-400 mb-1">{{ $day }}</div>
                                            <div class="text-[11px] font-semibold mb-2
                                                {{ $i === 1 ? 'w-6 h-6 bg-indigo-600 text-white rounded-full flex items-center justify-center mx-auto' : 'text-gray-700' }}">
                                                {{ 13 + $i }}
                                            </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>

                                {{-- AI 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>


    {{-- ============================================================
         TRUSTED BY + STATS
    ============================================================ --}}
    <section class="py-14 border-y border-gray-100 bg-white/60">
        <div class="max-w-7xl mx-auto px-6">

            {{-- Logos --}}
            <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 text-center mb-8">
                Vertraut von Teams aus allen Branchen
            </p>
            <div class="flex flex-wrap justify-center items-center gap-10 opacity-40 mb-12">
                @foreach(['Consulting', 'Design Studio', 'Tech GmbH', 'Agentur AG', 'Startup Hub'] as $company)
                    <span class="text-base font-bold text-gray-700 tracking-tight">{{ $company }}</span>
                @endforeach
            </div>

            {{-- Stats --}}
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                @foreach([
                    ['value' => '500+', 'label' => 'Aktive Teams', 'icon' => 'users'],
                    ['value' => '2.4h', 'label' => 'Ø Zeit gespart / Woche', 'icon' => 'clock'],
                    ['value' => '98%', 'label' => 'Kundenzufriedenheit', 'icon' => 'heart'],
                    ['value' => '< 60s', 'label' => 'Setup-Zeit', 'icon' => 'bolt'],
                ] as $stat)
                    <div class="text-center p-4">
                        <p class="text-3xl font-bold text-gray-900">{{ $stat['value'] }}</p>
                        <p class="text-sm text-gray-500 mt-1">{{ $stat['label'] }}</p>
                    </div>
                @endforeach
            </div>

        </div>
    </section>


    {{-- ============================================================
         FEATURES GRID
    ============================================================ --}}
    <section id="features" class="py-28">
        <div class="max-w-7xl mx-auto px-6">

            {{-- Header --}}
            <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 Plattform
                </div>
                <h2 class="text-4xl font-bold text-gray-900 leading-tight">
                    Alles was du brauchst.<br>
                    <span class="text-indigo-600">Nichts was du nicht brauchst.</span>
                </h2>
                <p class="text-gray-500 text-lg">
                    Von der Terminplanung bis zur KI-Automatisierung — aziros deckt deinen Arbeitstag komplett ab.
                </p>
            </div>

            {{-- Feature cards --}}
            <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',
                            'title' => 'Intelligente Terminplanung',
                            'desc'  => 'Erstelle Termine per Texteingabe. Die KI erkennt automatisch Konflikte und schlägt freie Zeitfenster vor.',
                            'pill'  => 'KI-Konflikterkennung',
                        ],
                        [
                            'icon'  => 'check-circle',
                            'bg'    => 'bg-teal-50',
                            'ic'    => 'text-teal-600',
                            'tag'   => 'bg-teal-100 text-teal-700',
                            'title' => 'Aufgaben & Notizen',
                            'desc'  => 'Halte Ideen, To-Dos und Notizen fest. Priorisiere, verknüpfe und erledige — ohne Chaos.',
                            'pill'  => 'Alles verknüpft',
                        ],
                        [
                            'icon'  => 'bolt',
                            'bg'    => 'bg-purple-50',
                            'ic'    => 'text-purple-600',
                            'tag'   => 'bg-purple-100 text-purple-700',
                            'title' => 'Einfach sagen, fertig',
                            'desc'  => 'Schreib oder sprich einfach was du brauchst. Der Assistent plant, erinnert und organisiert für dich.',
                            'pill'  => 'KI-Assistent',
                        ],
                        [
                            'icon'  => 'users',
                            'bg'    => 'bg-amber-50',
                            'ic'    => 'text-amber-600',
                            'tag'   => 'bg-amber-100 text-amber-700',
                            'title' => 'Team & Kontakte',
                            'desc'  => 'Behalte dein Netzwerk im Blick. Teile Termine und koordiniere Meetings mit Teilnehmern.',
                            'pill'  => 'Kollaboration',
                        ],
                        [
                            'icon'  => 'arrow-path',
                            'bg'    => 'bg-green-50',
                            'ic'    => 'text-green-600',
                            'tag'   => 'bg-green-100 text-green-700',
                            'title' => 'Routinen automatisieren',
                            'desc'  => 'Erstelle Regeln für wiederkehrende Abläufe. Was sich wiederholt, muss nicht manuell gemacht werden.',
                            'pill'  => 'No-Code Regeln',
                        ],
                        [
                            'icon'  => 'puzzle-piece',
                            'bg'    => 'bg-rose-50',
                            'ic'    => 'text-rose-600',
                            'tag'   => 'bg-rose-100 text-rose-700',
                            'title' => 'Google & Outlook Sync',
                            'desc'  => 'Verbinde deine bestehenden Kalender. Alles bleibt synchron — auf jedem Gerät, jederzeit.',
                            'pill'  => 'Google & Outlook',
                        ],
                    ];
                @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 class="w-6 h-6 {{ $f['ic'] }}"/>
                                @elseif($f['icon'] === 'check-circle') <x-heroicon-o-check-circle 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'] }}"/>
                                @elseif($f['icon'] === 'arrow-path') <x-heroicon-o-arrow-path class="w-6 h-6 {{ $f['ic'] }}"/>
                                @else                                <x-heroicon-o-puzzle-piece 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>


    {{-- ============================================================
         HOW IT WORKS
    ============================================================ --}}
    <section id="how-it-works" class="py-28 bg-gray-50/80 border-y border-gray-100">
        <div class="max-w-7xl mx-auto px-6">

            <div class="text-center max-w-xl mx-auto mb-16 space-y-3">
                <h2 class="text-4xl font-bold text-gray-900 leading-tight">
                    In 3 Schritten bereit
                </h2>
                <p class="text-gray-500 text-lg">
                    Kein Onboarding-Stress. In Minuten produktiv.
                </p>
            </div>

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

                {{-- Connecting line --}}
                <div class="hidden md:block absolute top-10 left-1/3 right-1/3 h-px bg-gradient-to-r from-indigo-200 via-purple-200 to-indigo-200"></div>

                @foreach([
                    ['step' => '01', 'icon' => 'user-plus', 'title' => 'Account erstellen', 'desc' => 'Registriere dich in unter 60 Sekunden. Keine Kreditkarte nötig — direkt loslegen.', 'color' => 'indigo'],
                    ['step' => '02', 'icon' => 'link', 'title' => 'Kalender verbinden', 'desc' => 'Sync dein Google oder Outlook Konto. Bestehende Termine werden automatisch importiert.', 'color' => 'purple'],
                    ['step' => '03', 'icon' => 'bolt', 'title' => 'KI nutzen', 'desc' => 'Schreib einfach was du brauchst. "Morgen Meeting um 10 Uhr" — der Rest passiert automatisch.', 'color' => 'teal'],
                ] as $step)
                    <div class="relative text-center space-y-5">

                        {{-- Step circle --}}
                        <div class="flex justify-center">
                            <div class="relative w-20 h-20 rounded-2xl bg-white border border-gray-200 shadow-sm flex items-center justify-center">
                                @if($step['icon'] === 'user-plus') <x-heroicon-o-user-plus class="w-8 h-8 text-indigo-600"/>
                                @elseif($step['icon'] === 'link')  <x-heroicon-o-link class="w-8 h-8 text-purple-600"/>
                                @else                              <x-heroicon-o-bolt 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">
                                    {{ $step['step'][1] }}
                                </div>
                            </div>
                        </div>

                        <div class="space-y-2">
                            <h3 class="font-bold text-gray-900 text-lg">{{ $step['title'] }}</h3>
                            <p class="text-gray-500 leading-relaxed max-w-xs mx-auto">{{ $step['desc'] }}</p>
                        </div>

                    </div>
                @endforeach

            </div>

        </div>
    </section>


    {{-- ============================================================
         FEATURE SHOWCASE — KI Assistent
    ============================================================ --}}
    <section class="py-28">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid lg:grid-cols-2 gap-16 items-center">

                {{-- Left: Chat mock --}}
                <div class="relative">

                    <div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden">

                        {{-- Header --}}
                        <div class="border-b border-gray-100 px-6 py-4 flex items-center gap-3">
                            <div class="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center">
                                <x-heroicon-o-bolt class="w-5 h-5 text-white"/>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-gray-800">aziros Assistent</p>
                                <div class="flex items-center gap-1.5">
                                    <div class="w-1.5 h-1.5 rounded-full bg-green-500"></div>
                                    <p class="text-[10px] text-gray-400">Online</p>
                                </div>
                            </div>
                        </div>

                        {{-- Chat messages --}}
                        <div class="p-6 space-y-5">

                            {{-- User message --}}
                            <div class="flex justify-end">
                                <div class="bg-indigo-600 text-white text-sm rounded-2xl rounded-br-md px-5 py-3 max-w-[320px]">
                                    Erstell mir morgen um 9 ein Meeting mit dem Design Team, eine Stunde.
                                </div>
                            </div>

                            {{-- AI response --}}
                            <div class="flex items-start gap-3">
                                <div class="w-8 h-8 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0">
                                    <x-heroicon-o-bolt class="w-3.5 h-3.5 text-indigo-600"/>
                                </div>
                                <div class="bg-gray-50 border border-gray-100 text-sm rounded-2xl rounded-bl-md px-5 py-3 max-w-[320px] text-gray-700">
                                    <p>Erledigt!</p>
                                    <p class="text-gray-500 mt-1.5">Design Team Meeting<br>
                                    <span class="font-medium text-gray-700">Mo, 14.04 &middot; 09:00–10:00 Uhr</span></p>
                                </div>
                            </div>

                            {{-- User message 2 --}}
                            <div class="flex justify-end">
                                <div class="bg-indigo-600 text-white text-sm rounded-2xl rounded-br-md px-5 py-3 max-w-[320px]">
                                    Wann hab ich als nächstes eine Stunde frei für den Zahnarzt?
                                </div>
                            </div>

                            {{-- AI response 2 --}}
                            <div class="flex items-start gap-3">
                                <div class="w-8 h-8 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0">
                                    <x-heroicon-o-bolt class="w-3.5 h-3.5 text-indigo-600"/>
                                </div>
                                <div class="bg-gray-50 border border-gray-100 text-sm rounded-2xl rounded-bl-md px-5 py-3 max-w-[320px] text-gray-700">
                                    <p>Nächste freie Stunde:</p>
                                    <p class="font-medium text-gray-800 mt-1.5">Di, 15.04 &middot; 11:00–12:00 Uhr</p>
                                    <button class="mt-2.5 text-xs font-semibold text-indigo-600 hover:underline">
                                        Termin erstellen &rarr;
                                    </button>
                                </div>
                            </div>

                        </div>

                        {{-- Input --}}
                        <div class="border-t border-gray-100 px-5 py-3.5 flex items-center gap-3">
                            <div class="flex-1 bg-gray-50 border border-gray-200 rounded-xl px-4 py-2.5 text-sm text-gray-400">
                                Nachricht eingeben...
                            </div>
                            <div class="w-9 h-9 rounded-xl bg-indigo-600 flex items-center justify-center">
                                <x-heroicon-o-paper-airplane class="w-4 h-4 text-white"/>
                            </div>
                        </div>

                    </div>

                    {{-- Floating stat --}}
                    <div class="absolute -bottom-5 -left-5 bg-white border border-gray-100 rounded-2xl shadow-lg p-4 flex items-center gap-3">
                        <div class="w-11 h-11 rounded-xl bg-amber-50 flex items-center justify-center">
                            <x-heroicon-o-clock class="w-5 h-5 text-amber-500"/>
                        </div>
                        <div>
                            <p class="text-xl font-bold text-gray-900 leading-none">2.4h</p>
                            <p class="text-xs text-gray-400 mt-0.5">Ø Zeit gespart / Woche</p>
                        </div>
                    </div>

                </div>

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

                    <div class="space-y-5">
                        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-purple-50 text-purple-700 text-xs font-semibold border border-purple-100">
                            <x-heroicon-o-bolt class="w-3.5 h-3.5"/>
                            KI-Assistent
                        </div>
                        <h2 class="text-4xl font-bold text-gray-900 leading-tight">
                            Einfach sagen.<br>
                            <span class="text-indigo-600">Der Rest passiert.</span>
                        </h2>
                        <p class="text-lg text-gray-500 leading-relaxed">
                            Kein aufwändiges Klicken durch Menüs. Schreib einfach was du brauchst —
                            der KI-Assistent erledigt den Rest sofort.
                        </p>
                    </div>

                    <div class="space-y-4">
                        @foreach([
                            ['icon' => 'calendar', 'title' => 'Termine per Text', 'desc' => '"Morgen 14 Uhr Zahnarzt für 1 Stunde" — direkt im Kalender.'],
                            ['icon' => 'magnifying-glass', 'title' => 'Freie Slots finden', 'desc' => 'Frag wann du als nächstes Zeit hast — sofortige Antwort.'],
                            ['icon' => 'bell', 'title' => 'Erinnerungen automatisch', 'desc' => 'Wichtige Termine werden automatisch mit Reminder versehen.'],
                        ] as $p)
                            <div class="flex items-start gap-4 p-5 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all duration-200">
                                <div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0">
                                    @if($p['icon'] === 'calendar')          <x-heroicon-o-calendar class="w-5 h-5 text-indigo-600"/>
                                    @elseif($p['icon'] === 'magnifying-glass') <x-heroicon-o-magnifying-glass class="w-5 h-5 text-indigo-600"/>
                                    @else                                   <x-heroicon-o-bell class="w-5 h-5 text-indigo-600"/>
                                    @endif
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-800">{{ $p['title'] }}</p>
                                    <p class="text-sm text-gray-500 mt-0.5">{{ $p['desc'] }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>

                </div>

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


    {{-- ============================================================
         MOBILE APP
    ============================================================ --}}
    <section id="app" class="py-28 bg-gray-50/80 border-y border-gray-100">
        <div class="max-w-7xl mx-auto px-6">

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

                {{-- LEFT: Text + App Store Badges --}}
                <div class="space-y-8">

                    <div class="space-y-5">
                        <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
                        </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">
                            Verwalte Termine, Aufgaben und Kontakte —
                            und sprich einfach mit Aria, wo immer du bist.
                        </p>
                    </div>

                    {{-- Feature points --}}
                    <div class="space-y-4">
                        @foreach([
                            ['icon' => 'microphone', 'title' => '"Hey Aria"', 'desc' => 'Sprachsteuerung direkt aus der App'],
                            ['icon' => 'calendar',   'title' => 'Immer dabei', 'desc' => 'Termine, Aufgaben und Notizen immer dabei'],
                            ['icon' => 'bell',       'title' => 'Push-Erinnerungen', 'desc' => 'Push-Erinnerungen zur richtigen Zeit (Pro)'],
                        ] as $ap)
                            <div class="flex items-start gap-4 p-5 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all duration-200">
                                <div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0">
                                    @if($ap['icon'] === 'microphone') <x-heroicon-o-microphone class="w-5 h-5 text-indigo-600"/>
                                    @elseif($ap['icon'] === 'calendar') <x-heroicon-o-calendar class="w-5 h-5 text-indigo-600"/>
                                    @else <x-heroicon-o-bell class="w-5 h-5 text-indigo-600"/>
                                    @endif
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-800">{{ $ap['title'] }}</p>
                                    <p class="text-sm text-gray-500 mt-0.5">{{ $ap['desc'] }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    {{-- App Store Badges (Bald verfügbar) --}}
                    <div class="flex flex-wrap gap-4">

                        {{-- iOS --}}
                        <div class="relative inline-block">
                            <div class="opacity-50 cursor-not-allowed select-none">
                                <div class="flex items-center gap-3 px-5 py-3 bg-gray-900 text-white rounded-2xl border border-gray-800 min-w-[160px]">
                                    <svg class="w-7 h-7 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-[10px] text-gray-400 leading-none">Download on the</p>
                                        <p class="text-sm font-semibold leading-tight">App Store</p>
                                    </div>
                                </div>
                            </div>
                            <span class="absolute -top-2 -right-2 text-xs bg-indigo-600 text-white px-2 py-0.5 rounded-full font-semibold shadow-sm">
                                Bald
                            </span>
                        </div>

                        {{-- Android --}}
                        <div class="relative inline-block">
                            <div class="opacity-50 cursor-not-allowed select-none">
                                <div class="flex items-center gap-3 px-5 py-3 bg-gray-900 text-white rounded-2xl border border-gray-800 min-w-[160px]">
                                    <svg class="w-7 h-7 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-[10px] text-gray-400 leading-none">Get it on</p>
                                        <p class="text-sm font-semibold leading-tight">Google Play</p>
                                    </div>
                                </div>
                            </div>
                            <span class="absolute -top-2 -right-2 text-xs bg-indigo-600 text-white px-2 py-0.5 rounded-full font-semibold shadow-sm">
                                Bald
                            </span>
                        </div>

                    </div>

                </div>

                {{-- RIGHT: iPhone Mockup --}}
                <div class="flex justify-center lg:justify-end">
                    <div class="relative">

                        {{-- Phone frame --}}
                        <div class="relative w-64 h-[520px] bg-gray-900 rounded-[3rem] shadow-2xl border-[6px] border-gray-800 overflow-hidden">

                            {{-- Notch --}}
                            <div class="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-7 bg-gray-900 rounded-b-2xl z-10"></div>

                            {{-- Screen --}}
                            <div class="absolute inset-0 bg-white overflow-hidden">

                                {{-- Status bar --}}
                                <div class="h-10 bg-white flex items-end justify-between px-5 pb-1">
                                    <span class="text-[9px] font-bold text-gray-800">9:41</span>
                                    <div class="flex items-center gap-1">
                                        <svg class="w-3 h-2 text-gray-700 fill-current" viewBox="0 0 12 8">
                                            <rect x="0" y="0" width="10" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1"/>
                                            <rect x="1" y="1" width="6" height="6" rx="0.5"/>
                                            <rect x="10.5" y="2.5" width="1.5" height="3" rx="0.5"/>
                                        </svg>
                                    </div>
                                </div>

                                {{-- App header --}}
                                <div class="px-4 pt-1 pb-3 border-b border-gray-100">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-2">
                                            <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="text-sm font-bold text-gray-900">aziros</span>
                                        </div>
                                        <div class="w-7 h-7 rounded-full bg-gray-100 flex items-center justify-center">
                                            <x-heroicon-o-bell class="w-3.5 h-3.5 text-gray-500"/>
                                        </div>
                                    </div>
                                </div>

                                {{-- Content --}}
                                <div class="px-4 pt-3 space-y-3">

                                    <div>
                                        <p class="text-[10px] text-gray-400">Heute</p>
                                        <p class="text-sm font-bold text-gray-900">Donnerstag, 17. April</p>
                                    </div>

                                    <div class="space-y-2">
                                        <div class="bg-indigo-50 border-l-[3px] border-indigo-500 rounded-lg px-3 py-2">
                                            <p class="text-xs font-semibold text-indigo-700">Team-Standup</p>
                                            <p class="text-[10px] text-indigo-400">09:00 – 09:30</p>
                                        </div>
                                        <div class="bg-green-50 border-l-[3px] border-green-500 rounded-lg px-3 py-2">
                                            <p class="text-xs font-semibold text-green-700">Design Review</p>
                                            <p class="text-[10px] text-green-400">11:00 – 12:00</p>
                                        </div>
                                        <div class="bg-purple-50 border-l-[3px] border-purple-500 rounded-lg px-3 py-2">
                                            <p class="text-xs font-semibold text-purple-700">Kundencall</p>
                                            <p class="text-[10px] text-purple-400">14:00 – 14:30</p>
                                        </div>
                                        <div class="bg-amber-50 border-l-[3px] border-amber-500 rounded-lg px-3 py-2">
                                            <p class="text-xs font-semibold text-amber-700">Zahnarzt</p>
                                            <p class="text-[10px] text-amber-400">16:00 – 17:00</p>
                                        </div>
                                    </div>

                                    {{-- Aria voice input --}}
                                    <div class="flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-xl px-3 py-2">
                                        <x-heroicon-o-microphone class="w-3.5 h-3.5 text-indigo-500 shrink-0"/>
                                        <span class="text-[10px] text-gray-400">Hey Aria...</span>
                                        <div class="ml-auto flex gap-0.5 items-center">
                                            @foreach([2, 3, 2, 4, 3] as $bh)
                                                <div class="w-0.5 bg-indigo-400 rounded-full animate-pulse" style="height: {{ $bh * 3 }}px"></div>
                                            @endforeach
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

                        {{-- Floating: Push-Benachrichtigung --}}
                        <div class="absolute -right-8 top-16 bg-white border border-gray-100 rounded-2xl shadow-xl px-4 py-3 flex items-center gap-2.5 w-52">
                            <div class="w-8 h-8 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0">
                                <x-heroicon-o-bell class="w-4 h-4 text-indigo-600"/>
                            </div>
                            <div>
                                <p class="text-xs font-semibold text-gray-800">Erinnerung</p>
                                <p class="text-[10px] text-gray-400">Standup in 5 Min.</p>
                            </div>
                        </div>

                        {{-- Floating: Hey Aria --}}
                        <div class="absolute -left-8 bottom-20 bg-indigo-600 rounded-2xl shadow-xl px-4 py-3 flex items-center gap-2.5">
                            <x-heroicon-o-microphone class="w-4 h-4 text-white shrink-0"/>
                            <p class="text-xs font-semibold text-white">Hey Aria</p>
                            <div class="flex gap-0.5 items-center ml-1">
                                @foreach([2, 3, 2] as $wh)
                                    <div class="w-0.5 bg-white/70 rounded-full animate-pulse" style="height: {{ $wh * 3 }}px"></div>
                                @endforeach
                            </div>
                        </div>

                    </div>
                </div>

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


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

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

                {{-- Left: Copy --}}
                <div class="space-y-6">
                    <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-green-50 text-green-700 text-xs font-semibold border border-green-100">
                        <x-heroicon-o-tag class="w-3.5 h-3.5"/>
                        Einfaches Preismodell
                    </div>
                    <h2 class="text-4xl font-bold text-gray-900 leading-tight">
                        Kostenlos starten.<br>
                        <span class="text-indigo-600">Pro ab 13 € / Monat.</span>
                    </h2>
                    <p class="text-lg text-gray-500 leading-relaxed">
                        Zwei Pläne. Keine versteckten Kosten. Der Free-Plan ist dauerhaft kostenlos — upgrade erst, wenn du bereit bist. Jederzeit kündbar, ohne Mindestlaufzeit.
                    </p>
                    <div class="flex flex-wrap gap-3 pt-2">
                        <a href="{{ route('homepage.preise') }}"
                           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:-translate-y-0.5">
                            Pläne vergleichen
                            <x-heroicon-o-arrow-right class="w-4 h-4"/>
                        </a>
                    </div>
                </div>

                {{-- Right: Plan cards preview --}}
                <div class="grid sm:grid-cols-2 gap-5">

                    {{-- Free --}}
                    <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm space-y-4">
                        <h3 class="font-bold text-gray-900 text-lg">Free</h3>
                        <div class="flex items-end gap-1">
                            <span class="text-4xl font-bold text-gray-900">0 €</span>
                            <span class="text-sm text-gray-400 mb-1">für immer</span>
                        </div>
                        <hr class="border-gray-100">
                        <ul class="space-y-2.5">
                            @foreach(['Kalender & Termine', 'Aufgaben & Notizen', 'KI-Assistent (Basis)', 'Kontaktverwaltung'] as $f)
                                <li class="flex items-center gap-2 text-sm text-gray-600">
                                    <x-heroicon-o-check class="w-4 h-4 text-green-500"/>
                                    {{ $f }}
                                </li>
                            @endforeach
                        </ul>
                        <a href="{{ route('register') }}"
                           class="block text-center w-full px-5 py-3 rounded-xl text-sm font-semibold 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-2xl p-6 shadow-md ring-1 ring-indigo-100 space-y-4 relative">
                        <div class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 rounded-full bg-indigo-600 text-white text-[10px] font-bold uppercase tracking-wider">
                            Beliebt
                        </div>
                        <h3 class="font-bold text-gray-900 text-lg">Pro</h3>
                        <div class="flex items-end gap-1">
                            <span class="text-4xl font-bold text-gray-900">13 €</span>
                            <span class="text-sm text-gray-400 mb-1">/ Monat</span>
                        </div>
                        <hr class="border-gray-100">
                        <ul class="space-y-2.5">
                            @foreach(['Alles aus Free', 'Google & Outlook Sync', 'Automatisierungen', 'Prioritäts-Support'] as $f)
                                <li class="flex items-center gap-2 text-sm text-gray-600">
                                    <x-heroicon-o-check class="w-4 h-4 text-indigo-500"/>
                                    {{ $f }}
                                </li>
                            @endforeach
                        </ul>
                        <a href="{{ route('register') }}"
                           class="block text-center w-full px-5 py-3 rounded-xl text-sm font-bold bg-indigo-600 text-white hover:bg-indigo-700 transition-all shadow-sm shadow-indigo-200">
                            Pro starten
                        </a>
                    </div>

                </div>

            </div>

        </div>
    </section>


    {{-- ============================================================
         TESTIMONIALS
    ============================================================ --}}
    <section class="py-28">
        <div class="max-w-7xl mx-auto px-6">

            <div class="text-center mb-16 space-y-3">
                <h2 class="text-4xl font-bold text-gray-900">Was unsere Nutzer sagen</h2>
                <p class="text-lg text-gray-500">Echte Erfahrungen von echten Teams</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                @foreach([
                    [
                        'quote' => 'Seit ich aziros nutze, vergesse ich keine Termine mehr. Der KI-Assistent ist wie ein persönlicher Kalender-Manager.',
                        'name'  => 'Sarah M.',
                        'role'  => 'Freelance Designerin',
                        'img'   => 'https://i.pravatar.cc/80?img=25',
                    ],
                    [
                        'quote' => 'Unser Team koordiniert Termine jetzt 3x schneller. Die Konflikt-Erkennung hat uns schon mehrfach gerettet.',
                        'name'  => 'Thomas K.',
                        'role'  => 'Projektleiter, Tech-Startup',
                        'img'   => 'https://i.pravatar.cc/80?img=33',
                    ],
                    [
                        'quote' => 'Endlich alles an einem Ort. Kalender, Aufgaben und Notizen — ohne zwischen fünf Apps hin- und herzuwechseln.',
                        'name'  => 'Lisa H.',
                        'role'  => 'Operations Managerin',
                        'img'   => 'https://i.pravatar.cc/80?img=47',
                    ],
                ] as $t)
                    <div class="bg-white border border-gray-100 rounded-2xl p-7 shadow-sm space-y-5 hover:shadow-md transition-all duration-200">

                        {{-- Stars --}}
                        <div class="flex gap-0.5">
                            @for($i = 0; $i < 5; $i++)
                                <svg class="w-4 h-4 text-amber-400 fill-current" viewBox="0 0 20 20">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                </svg>
                            @endfor
                        </div>

                        <p class="text-gray-600 leading-relaxed">"{{ $t['quote'] }}"</p>

                        <div class="flex items-center gap-3 pt-1">
                            <img src="{{ $t['img'] }}" alt="{{ $t['name'] }}"
                                 class="w-10 h-10 rounded-full object-cover border-2 border-white shadow-sm">
                            <div>
                                <p class="text-sm font-semibold text-gray-800">{{ $t['name'] }}</p>
                                <p class="text-xs text-gray-400">{{ $t['role'] }}</p>
                            </div>
                        </div>

                    </div>
                @endforeach
            </div>

        </div>
    </section>


    {{-- ============================================================
         CTA FINAL
    ============================================================ --}}
    <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-4xl 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">
                    Dein Arbeitstag verdient<br>ein Upgrade
                </h2>
                <p class="text-xl text-indigo-200 max-w-2xl mx-auto">
                    Schließe dich 500+ Teams an, die mit aziros mehr schaffen — mit weniger Aufwand.
                </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.preise') }}"
                   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">
                    Alle Pläne ansehen
                </a>
            </div>

            <div class="flex flex-wrap justify-center items-center gap-6 text-indigo-200 text-sm">
                @foreach(['Kostenloser Plan verfügbar', 'Pro ab 13 €/Monat', 'Jederzeit kündbar'] as $t)
                    <span class="flex items-center gap-1.5">
                        <x-heroicon-o-check class="w-3.5 h-3.5"/>
                        {{ $t }}
                    </span>
                @endforeach
            </div>

        </div>
    </section>


    @include('partials.homepage.footer')

</div>
