@extends('layouts.base')
@section('content')
<div class="min-h-screen flex flex-col">
        {{-- NAV --}}
        <nav class="border-b border-white/5 backdrop-blur-md sticky top-0 z-40">
            <div class="max-w-6xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between">
                <a href="{{ route('home') }}" class="flex items-center gap-2 text-lg font-bold">
                    <span class="text-2xl">🤖</span>
                    <span class="bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">DummyBot</span>
                </a>
                @auth
                    <div class="flex items-center gap-2">
                        <a href="{{ route('app') }}" class="btn btn-ghost text-sm">App</a>
                        <a href="{{ route('settings') }}" class="btn btn-ghost text-sm">Ajustes</a>
                        <form method="POST" action="{{ route('logout') }}" class="inline">
                            @csrf
                            <button class="btn btn-ghost text-sm">Salir</button>
                        </form>
                    </div>
                @else
                    <div class="flex items-center gap-2">
                        <a href="{{ route('login') }}" class="btn btn-ghost text-sm">Login</a>
                        <a href="{{ route('register') }}" class="btn btn-primary text-sm">Empezar</a>
                    </div>
                @endauth
            </div>
        </nav>

        {{-- HERO --}}
        <main class="flex-1 flex items-center">
            <div class="max-w-6xl mx-auto px-4 sm:px-6 py-16 grid lg:grid-cols-2 gap-12 items-center">
                <div class="anim-in">
                    <div class="inline-block chip prio-low mb-4">Para cerebros que van a 200 km/h</div>
                    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight tracking-tight">
                        Tus tareas, en una
                        <span class="bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">pantalla</span>
                        con
                        <span class="bg-gradient-to-r from-pink-400 to-yellow-400 bg-clip-text text-transparent">cara</span>.
                    </h1>
                    <p class="mt-6 text-lg text-zinc-300 max-w-xl">
                        Un bot físico que te recuerda lo que tienes que hacer, vibrando y haciendo muecas.
                        Diseñado para personas con TDAH que se pierden entre 14 pestañas del navegador.
                    </p>
                    <div class="mt-8 flex flex-wrap gap-3">
                        <a href="{{ route('register') }}" class="btn btn-primary">
                            Crear cuenta gratis
                            <span class="text-xs opacity-80 ml-1">→</span>
                        </a>
                        <a href="{{ route('login') }}" class="btn btn-ghost">Ya tengo cuenta</a>
                    </div>
                    <div class="mt-10 flex items-center gap-6 text-sm text-zinc-400">
                        <div class="flex items-center gap-2">
                            <span class="w-2 h-2 rounded-full bg-green-400"></span> Open source
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="w-2 h-2 rounded-full bg-indigo-400"></span> Self-hosted
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="w-2 h-2 rounded-full bg-pink-400"></span> Hecho con cariño
                        </div>
                    </div>
                </div>

                {{-- PREVIEW --}}
                <div class="anim-in" style="animation-delay: .15s">
                    <div class="relative">
                        <div class="absolute -inset-8 bg-gradient-to-tr from-indigo-500/20 via-purple-500/20 to-pink-500/20 blur-3xl"></div>
                        <div class="relative glass rounded-2xl p-6">
                            <div class="flex items-center gap-2 mb-4">
                                <div class="w-3 h-3 rounded-full bg-red-400/70"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-400/70"></div>
                                <div class="w-3 h-3 rounded-full bg-green-400/70"></div>
                                <div class="ml-auto text-xs text-zinc-500">dummybot.local</div>
                            </div>
                            <div class="space-y-3">
                                <div class="task-card flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-red-400 to-pink-500 flex items-center justify-center text-xl">😰</div>
                                    <div class="flex-1">
                                        <div class="font-semibold">Revisar PR de cliente X</div>
                                        <div class="text-xs text-zinc-500 flex gap-2 mt-1">
                                            <span class="chip prio-high">alta</span>
                                            <span>~25 min</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="task-card flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-yellow-300 to-orange-400 flex items-center justify-center text-xl">😐</div>
                                    <div class="flex-1">
                                        <div class="font-semibold">Llamar al dentista</div>
                                        <div class="text-xs text-zinc-500 flex gap-2 mt-1">
                                            <span class="chip prio-med">media</span>
                                            <span>5 min</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="task-card flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-300 to-emerald-500 flex items-center justify-center text-xl">😊</div>
                                    <div class="flex-1">
                                        <div class="font-semibold line-through text-zinc-500">Comprar café</div>
                                        <div class="text-xs text-zinc-500 mt-1">✓ hecha hace 12 min</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        {{-- FEATURES --}}
        <section class="border-t border-white/5 py-16 bg-black/20">
            <div class="max-w-6xl mx-auto px-4 sm:px-6 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @php
                $features = [
                    ['icon' => '⚡', 'title' => 'Sin fricción', 'desc' => 'Abre la app, escribe la tarea, listo. Tu DummyBot la muestra en la pantalla.'],
                    ['icon' => '🔁', 'title' => 'Tareas recurrentes', 'desc' => 'Llamar al dentista cada lunes. Se autogeneran al marcarlas como hechas.'],
                    ['icon' => '🏷️', 'title' => 'Proyectos y tags', 'desc' => 'Agrupa por cliente, contexto o lo que sea. Filtros al vuelo.'],
                    ['icon' => '⌨️', 'title' => 'Atajos de teclado', 'desc' => 'n = nueva · d = done · s = snooze · / = buscar. Sin tocar el ratón.'],
                    ['icon' => '📊', 'title' => 'Stats honestas', 'desc' => 'Sin gamificación tóxica. Solo datos para que veas cómo vas.'],
                    ['icon' => '🔌', 'title' => 'API abierta', 'desc' => 'Webhook, JSON, importa de Notion, etc. Si lo puedes describir, lo puedes hacer.'],
                ];
                @endphp
                @foreach ($features as $f)
                    <div class="glass rounded-xl p-6">
                        <div class="text-3xl">{{ $f['icon'] }}</div>
                        <h3 class="mt-3 font-semibold text-lg">{{ $f['title'] }}</h3>
                        <p class="mt-1 text-sm text-zinc-400">{{ $f['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </section>

        <footer class="border-t border-white/5 py-6 text-center text-xs text-zinc-500">
            DummyBot · Hecho con
            <span class="text-pink-400">♥</span>
            para cerebros no neurotípicos
        </footer>
    </div>


@endsection