<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'AsignaPro') }}</title>
    <x-pwa-meta theme-color="#07377f" />

    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800&family=plus-jakarta-sans:600,700,800&display=swap" rel="stylesheet">

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased h-full bg-mesh-light text-ink-900">

    <div class="min-h-full grid lg:grid-cols-[minmax(520px,0.9fr)_1.1fr]">

        {{-- Left: form --}}
        <div class="flex flex-col justify-center px-5 py-8 sm:px-10 lg:px-14 xl:px-20">
            <div class="mx-auto w-full max-w-[430px]">
                <a href="/" class="mx-auto flex w-fit items-center justify-center gap-2.5 mb-8 lg:mx-0 lg:inline-flex">
                    <img src="{{ asset('assets/brand/logo.png') }}" alt="AsignaPro" class="h-10 w-auto">
                </a>

                <div class="rounded-2xl bg-white border border-ink-100 shadow-soft-lg p-6 sm:p-8">
                    {{ $slot }}
                </div>

                <p class="mt-10 text-center text-xs text-ink-500">
                    © {{ date('Y') }} AsignaPro · <a href="#" class="hover:text-ink-700">Términos</a> · <a href="#" class="hover:text-ink-700">Privacidad</a>
                </p>
            </div>
        </div>

        {{-- Right: brand panel --}}
        <div class="hidden lg:flex flex-col justify-between relative overflow-hidden bg-white border-l border-ink-100 p-12 xl:p-16">
            <div class="absolute inset-0 bg-grid opacity-60"></div>
            <div class="absolute inset-x-12 top-16 h-72 rounded-full bg-brand-100/70 blur-3xl"></div>
            <div class="absolute right-0 bottom-0 w-[32rem] h-[32rem] rounded-full bg-sky-100/80 blur-3xl"></div>

            <div class="relative">
                <div class="inline-flex items-center gap-2 rounded-full border border-ink-100 bg-white/80 px-3 py-2 shadow-soft">
                    <div class="w-8 h-8 rounded-full bg-brand-600 text-white flex items-center justify-center font-bold text-sm">★</div>
                    <span class="text-xs font-semibold uppercase tracking-wider text-ink-500">Plataforma SaaS de reservas</span>
                </div>
            </div>

            <div class="relative max-w-xl">
                <h1 class="text-4xl xl:text-6xl font-bold font-display tracking-tight leading-[1.02] text-balance text-ink-900">
                    Tu agenda, tu equipo y tus clientes en un solo lugar.
                </h1>
                <p class="mt-6 text-lg leading-8 text-ink-600 max-w-lg text-pretty">
                    Recibe reservas online 24/7, gestiona tu calendario, automatiza recordatorios y
                    cobra desde el primer día. Diseñado para barberías, peluquerías, spas y centros estéticos.
                </p>

                {{-- Mini stats --}}
                <div class="mt-10 grid grid-cols-3 gap-6">
                    <div class="rounded-2xl bg-white/80 border border-ink-100 p-4 shadow-soft">
                        <p class="text-3xl font-bold font-display text-ink-900">+2k</p>
                        <p class="text-xs text-ink-500 mt-1">Reservas/día</p>
                    </div>
                    <div class="rounded-2xl bg-white/80 border border-ink-100 p-4 shadow-soft">
                        <p class="text-3xl font-bold font-display text-ink-900">99.9%</p>
                        <p class="text-xs text-ink-500 mt-1">Uptime</p>
                    </div>
                    <div class="rounded-2xl bg-white/80 border border-ink-100 p-4 shadow-soft">
                        <p class="text-3xl font-bold font-display text-ink-900">24/7</p>
                        <p class="text-xs text-ink-500 mt-1">Online</p>
                    </div>
                </div>
            </div>

            <div class="relative">
                <p class="text-xs text-ink-500">Confiado por negocios en Colombia, México y España</p>
            </div>
        </div>
    </div>
    @livewireScriptConfig
</body>
</html>
