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

    @include('partials.homepage.navbar')

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

        <div class="relative max-w-5xl mx-auto px-6 text-center space-y-6">
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-700 text-xs font-semibold">
                <x-heroicon-o-heart class="w-3.5 h-3.5"/>
                Die Geschichte hinter aziros
            </div>
            <h1 class="text-5xl md:text-6xl font-bold text-gray-900 leading-[1.1] tracking-tight">
                Wir bauen die Zukunft<br>
                <span class="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">der Produktivität</span>
            </h1>
            <p class="text-xl text-gray-500 max-w-2xl mx-auto leading-relaxed">
                aziros entstand aus der Überzeugung, dass Kalender, Aufgaben und KI zusammengehören — in einer einzigen, einfach zu bedienenden Plattform. Made in Austria.
            </p>
        </div>
    </section>


    {{-- ============================================================
         STATS BAR
    ============================================================ --}}
    <section class="py-14 bg-white/60 border-y border-gray-100">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                @foreach([
                    ['value' => '2024', 'label' => 'Gegründet', 'icon' => 'calendar'],
                    ['value' => '500+', 'label' => 'Aktive Teams', 'icon' => 'users'],
                    ['value' => '10+', 'label' => 'Teammitglieder', 'icon' => 'user-group'],
                    ['value' => 'Österreich', 'label' => 'Hauptsitz', 'icon' => 'map-pin'],
                ] as $stat)
                    <div class="text-center space-y-2">
                        <div class="w-12 h-12 rounded-2xl bg-indigo-50 flex items-center justify-center mx-auto">
                            @if($stat['icon'] === 'calendar')    <x-heroicon-o-calendar class="w-5 h-5 text-indigo-600"/>
                            @elseif($stat['icon'] === 'users')   <x-heroicon-o-users class="w-5 h-5 text-indigo-600"/>
                            @elseif($stat['icon'] === 'user-group') <x-heroicon-o-user-group class="w-5 h-5 text-indigo-600"/>
                            @else                                <x-heroicon-o-map-pin class="w-5 h-5 text-indigo-600"/>
                            @endif
                        </div>
                        <p class="text-3xl font-bold text-gray-900">{{ $stat['value'] }}</p>
                        <p class="text-sm text-gray-500">{{ $stat['label'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>


    {{-- ============================================================
         MISSION
    ============================================================ --}}
    <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: Text --}}
                <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-purple-50 border border-purple-100 text-purple-700 text-xs font-semibold">
                            <x-heroicon-o-flag class="w-3.5 h-3.5"/>
                            Unsere Mission
                        </div>
                        <h2 class="text-4xl font-bold text-gray-900 leading-tight">
                            Produktivität<br>
                            <span class="text-indigo-600">neu gedacht</span>
                        </h2>
                    </div>
                    <p class="text-lg text-gray-500 leading-relaxed">
                        Wir glauben, dass Produktivitätstools zu kompliziert geworden sind. Teams jonglieren zwischen fünf verschiedenen Apps — Kalender hier, Aufgaben dort, Notizen woanders — und verlieren dabei wertvolle Zeit.
                    </p>
                    <p class="text-lg text-gray-500 leading-relaxed">
                        aziros vereint alles an einem Ort: Intelligente Terminplanung, Aufgabenverwaltung und einen KI-Assistenten, der versteht was du brauchst. Sag einfach was du willst — der Rest passiert automatisch.
                    </p>
                    <div class="flex flex-wrap gap-3 pt-2">
                        <a href="{{ route('register') }}"
                           class="inline-flex items-center gap-2 px-6 py-3 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">
                            Jetzt ausprobieren
                            <x-heroicon-o-arrow-right class="w-4 h-4"/>
                        </a>
                        <a href="{{ route('homepage.kontakt') }}"
                           class="inline-flex items-center gap-2 px-6 py-3 rounded-2xl bg-white border border-gray-200 text-gray-700 font-semibold hover:bg-gray-50 hover:border-gray-300 transition-all">
                            Kontakt aufnehmen
                        </a>
                    </div>
                </div>

                {{-- Right: Values --}}
                <div class="space-y-5">
                    @foreach([
                        ['icon' => 'light-bulb', 'bg' => 'bg-amber-50', 'ic' => 'text-amber-600', 'border' => 'border-amber-100', 'title' => 'Einfachheit zuerst', 'desc' => 'Wir glauben, dass die besten Tools die sind, die man nicht erklären muss. Jede Funktion wird so einfach wie möglich gebaut — keine unnötige Komplexität, keine überladenen Menüs.'],
                        ['icon' => 'shield-check', 'bg' => 'bg-green-50', 'ic' => 'text-green-600', 'border' => 'border-green-100', 'title' => 'Datenschutz by Design', 'desc' => 'Deine Daten gehören dir. Wir hosten in der EU, folgen der DSGVO und setzen keine Tracking-Cookies ein. Transparenz und Vertrauen stehen bei uns an erster Stelle.'],
                        ['icon' => 'rocket-launch', 'bg' => 'bg-indigo-50', 'ic' => 'text-indigo-600', 'border' => 'border-indigo-100', 'title' => 'Ständige Innovation', 'desc' => 'Wir integrieren die neueste KI-Technologie, um dir immer einen Schritt voraus zu helfen. Neue Features werden regelmäßig ausgerollt — basierend auf echtem Nutzerfeedback.'],
                    ] as $value)
                        <div class="bg-white border {{ $value['border'] }} rounded-2xl p-6 flex items-start gap-5 shadow-sm hover:shadow-md transition-all duration-200">
                            <div class="w-12 h-12 rounded-2xl {{ $value['bg'] }} flex items-center justify-center shrink-0">
                                @if($value['icon'] === 'light-bulb')    <x-heroicon-o-light-bulb class="w-6 h-6 {{ $value['ic'] }}"/>
                                @elseif($value['icon'] === 'shield-check') <x-heroicon-o-shield-check class="w-6 h-6 {{ $value['ic'] }}"/>
                                @else                                   <x-heroicon-o-rocket-launch class="w-6 h-6 {{ $value['ic'] }}"/>
                                @endif
                            </div>
                            <div class="space-y-1.5">
                                <p class="text-base font-semibold text-gray-900">{{ $value['title'] }}</p>
                                <p class="text-sm text-gray-500 leading-relaxed">{{ $value['desc'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>

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


    {{-- ============================================================
         WHY AZIROS — Full-width feature showcase
    ============================================================ --}}
    <section 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 mb-16 space-y-3">
                <h2 class="text-4xl font-bold text-gray-900 leading-tight">Warum aziros?</h2>
                <p class="text-lg text-gray-500">Was uns von anderen Produktivitätstools unterscheidet</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                @foreach([
                    ['icon' => 'bolt', 'bg' => 'bg-gradient-to-br from-indigo-50 to-indigo-100/50', 'ic' => 'text-indigo-600', 'title' => 'KI-first Ansatz', 'desc' => 'Der KI-Assistent ist keine Ergänzung — er ist das Herzstück. Natürliche Sprache statt komplizierter Menüs. Sag was du brauchst, der Rest passiert automatisch.'],
                    ['icon' => 'globe-alt', 'bg' => 'bg-gradient-to-br from-green-50 to-green-100/50', 'ic' => 'text-green-600', 'title' => 'Made in Austria', 'desc' => 'Entwickelt in Österreich, gehostet in der EU. DSGVO-konform von Grund auf, mit Fokus auf Datenschutz, Sicherheit und Transparenz.'],
                    ['icon' => 'puzzle-piece', 'bg' => 'bg-gradient-to-br from-purple-50 to-purple-100/50', 'ic' => 'text-purple-600', 'title' => 'Alles in einem', 'desc' => 'Kalender, Aufgaben, Notizen, Kontakte und Automatisierung — ohne zwischen fünf Apps zu wechseln. Eine Plattform für deinen gesamten Arbeitstag.'],
                ] as $f)
                    <div class="bg-white border border-gray-100 rounded-3xl p-8 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 space-y-5">
                        <div class="w-14 h-14 rounded-2xl {{ $f['bg'] }} flex items-center justify-center">
                            @if($f['icon'] === 'bolt')         <x-heroicon-o-bolt class="w-7 h-7 {{ $f['ic'] }}"/>
                            @elseif($f['icon'] === 'globe-alt') <x-heroicon-o-globe-alt class="w-7 h-7 {{ $f['ic'] }}"/>
                            @else                              <x-heroicon-o-puzzle-piece class="w-7 h-7 {{ $f['ic'] }}"/>
                            @endif
                        </div>
                        <h3 class="text-lg font-bold text-gray-900">{{ $f['title'] }}</h3>
                        <p class="text-gray-500 leading-relaxed">{{ $f['desc'] }}</p>
                    </div>
                @endforeach
            </div>

        </div>
    </section>


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

            <div class="text-center mb-16 space-y-3">
                <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-700 text-xs font-semibold">
                    <x-heroicon-o-user-group class="w-3.5 h-3.5"/>
                    Unser Team
                </div>
                <h2 class="text-4xl font-bold text-gray-900 leading-tight">Die Menschen hinter aziros</h2>
                <p class="text-lg text-gray-500">Leidenschaft für großartige Software</p>
            </div>

            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
                @foreach([
                    ['name' => 'Max Mustermann', 'role' => 'CEO & Gründer', 'img' => 'https://i.pravatar.cc/300?img=11'],
                    ['name' => 'Anna Schmidt', 'role' => 'CTO', 'img' => 'https://i.pravatar.cc/300?img=25'],
                    ['name' => 'David Weber', 'role' => 'Lead Designer', 'img' => 'https://i.pravatar.cc/300?img=33'],
                    ['name' => 'Lena Fischer', 'role' => 'Head of Product', 'img' => 'https://i.pravatar.cc/300?img=47'],
                ] as $member)
                    <div class="group">
                        <div class="bg-white border border-gray-100 rounded-3xl shadow-sm overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
                            <div class="aspect-[4/5] bg-gradient-to-br from-gray-100 to-gray-50 overflow-hidden">
                                <img src="{{ $member['img'] }}" alt="{{ $member['name'] }}"
                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                            </div>
                            <div class="p-6 text-center space-y-1">
                                <p class="text-base font-bold text-gray-900">{{ $member['name'] }}</p>
                                <p class="text-sm text-gray-500">{{ $member['role'] }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
    </section>


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

            <div class="text-center mb-16 space-y-3">
                <h2 class="text-4xl font-bold text-gray-900 leading-tight">Unsere Reise</h2>
                <p class="text-lg text-gray-500">Von der Idee zur Plattform</p>
            </div>

            <div class="space-y-0 relative">
                {{-- Vertical line --}}
                <div class="absolute left-6 md:left-1/2 top-0 bottom-0 w-px bg-indigo-100 md:-translate-x-px"></div>

                @foreach([
                    ['year' => '2024 Q1', 'title' => 'Die Idee', 'desc' => 'aziros entsteht aus der Frustration über fragmentierte Produktivitätstools. Die erste Vision: Kalender + KI in einer App.'],
                    ['year' => '2024 Q3', 'title' => 'Erste Beta', 'desc' => 'Die erste Version geht live — mit Kalender, Aufgaben und einem KI-Assistenten, der natürliche Sprache versteht.'],
                    ['year' => '2025 Q1', 'title' => 'Google & Outlook Sync', 'desc' => 'Integration mit Google Calendar und Microsoft Outlook. Bestehende Kalender werden nahtlos eingebunden.'],
                    ['year' => '2025 Q2', 'title' => 'Automatisierungen', 'desc' => 'No-Code Automatisierungsregeln machen wiederkehrende Abläufe zum Kinderspiel. Und das ist erst der Anfang.'],
                ] as $i => $milestone)
                    <div class="relative flex items-start gap-8 pb-12 {{ $i % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse' }}">

                        {{-- Dot --}}
                        <div class="absolute left-6 md:left-1/2 w-3 h-3 rounded-full bg-indigo-600 border-4 border-white shadow-sm -translate-x-1.5 md:-translate-x-1.5 mt-1.5 z-10"></div>

                        {{-- Content --}}
                        <div class="ml-14 md:ml-0 md:w-[calc(50%-2rem)] {{ $i % 2 === 0 ? 'md:pr-8' : 'md:pl-8' }}">
                            <div class="bg-white border border-gray-100 rounded-2xl shadow-sm p-6 space-y-2 hover:shadow-md transition-all duration-200">
                                <span class="text-xs font-bold text-indigo-600 uppercase tracking-wider">{{ $milestone['year'] }}</span>
                                <h3 class="text-lg font-bold text-gray-900">{{ $milestone['title'] }}</h3>
                                <p class="text-sm text-gray-500 leading-relaxed">{{ $milestone['desc'] }}</p>
                            </div>
                        </div>

                    </div>
                @endforeach
            </div>

        </div>
    </section>


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

        <div class="relative max-w-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">
                    Werde Teil der aziros Community
                </h2>
                <p class="text-xl text-indigo-200 max-w-2xl mx-auto">
                    Starte noch heute kostenlos und erlebe Produktivität neu — ohne Risiko, ohne Kreditkarte.
                </p>
            </div>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="{{ route('register') }}"
                   class="inline-flex items-center gap-2 px-8 py-4 rounded-2xl bg-white text-indigo-700 font-bold hover:bg-indigo-50 transition-all shadow-xl hover:-translate-y-0.5">
                    Kostenlos loslegen
                    <x-heroicon-o-arrow-right class="w-4 h-4"/>
                </a>
                <a href="{{ route('homepage.kontakt') }}"
                   class="inline-flex items-center gap-2 px-8 py-4 rounded-2xl bg-indigo-500/40 text-white font-semibold hover:bg-indigo-500/60 transition-all border border-white/20">
                    Kontakt aufnehmen
                </a>
            </div>
        </div>
    </section>


    @include('partials.homepage.footer')

</div>
