@extends('layouts.app') {{-- O el layout público que uses, por ejemplo layouts.guest --}}

@section('title', 'Planner de Matrimonios — datosmatrimonios.cl')

@section('content')
<div class="container py-5">

    {{-- HERO --}}
    <div class="row align-items-center mb-5">
        <div class="col-md-6 mb-4 mb-md-0">
            <h1 class="display-6 fw-semibold mb-3">
                Tu Matrimonio, organizado en un solo lugar ✨
            </h1>
            <p class="text-muted mb-3">
                Checklist, presupuesto, invitados, proveedores y cronograma del día del Matrimonio,
                todo dentro de datosmatrimonios.cl. Sin excels perdidos, sin notas sueltas en el celular.
            </p>
            <p class="text-muted mb-4">
                Crea tu planner online, compártelo con tu pareja y actualízalo cuando quieras.
            </p>

            @auth
                <a href="{{ route('planner.dashboard') }}" class="btn btn-primary btn-lg me-2 mb-2">
                    Ir a mi Planner
                </a>
            @else
                <a href="{{ route('register') }}" class="btn btn-primary btn-lg me-2 mb-2">
                    Crear mi Planner
                </a>
                <a href="{{ route('login') }}" class="btn btn-outline-secondary mb-2">
                    Ya tengo cuenta
                </a>
            @endauth

            <p class="small text-muted mt-2">
                100% online, pensado para parejas en Chile que quieren organizar su matrimonio sin volverse locas.
            </p>
        </div>
        <div class="col-md-6">
            {{-- “Mockup” simple del planner --}}
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h2 class="h6 mb-0">Planner de Matrimonio</h2>
                        <span class="badge bg-light text-muted">datosmatrimonios.cl</span>
                    </div>
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="small text-muted mb-1">Checklist</div>
                            <div class="progress mb-2" style="height: 6px;">
                                <div class="progress-bar" style="width: 45%;"></div>
                            </div>
                            <ul class="small text-muted mb-0 ps-3">
                                <li>Definir presupuesto</li>
                                <li>Reservar lugar</li>
                                <li>Enviar invitaciones</li>
                            </ul>
                        </div>
                        <div class="col-6">
                            <div class="small text-muted mb-1">Presupuesto</div>
                            <p class="mb-1 small">
                                <strong>Total estimado:</strong> $8.000.000<br>
                                <strong>Usado:</strong> $3.500.000
                            </p>
                            <div class="progress mb-2" style="height: 6px;">
                                <div class="progress-bar" style="width: 40%;"></div>
                            </div>
                            <div class="small text-muted">Invitados, proveedores y timeline incluidos.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- BENEFICIOS --}}
    <div class="mb-5">
        <h2 class="h4 mb-3 text-center">Todo lo que necesitas para organizar tu Matrimonio</h2>
        <p class="text-muted text-center mb-4">
            Más que un checklist: es un espacio pensado para parejas, hecho desde Chile
            y adaptado a cómo realmente se organizan los matrimonios acá.
        </p>
        <div class="row g-4">
            <div class="col-md-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <h3 class="h6 mb-2">✅ Checklist inteligente</h3>
                        <p class="small text-muted mb-0">
                            Tareas sugeridas según los meses que faltan para el gran día
                            y opción de agregar tus propias tareas personalizadas.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <h3 class="h6 mb-2">💸 Control de presupuesto</h3>
                        <p class="small text-muted mb-0">
                            Registra cuánto quieres gastar, cuánto te cotizaron, cuánto ya pagaste
                            y cuánto te queda por pagar en cada categoría.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <h3 class="h6 mb-2">👥 Invitados & proveedores</h3>
                        <p class="small text-muted mb-0">
                            Lista de invitados con estados (confirmado, pendiente, no va),
                            y un panel para guardar todos tus proveedores en un solo lugar.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body">
                        <h3 class="h6 mb-2">⏰ Timeline del día D</h3>
                        <p class="small text-muted mb-0">
                            Crea el cronograma del día del Matrimonio con horarios,
                            actividades y responsables, listo para compartir en PDF.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- CÓMO FUNCIONA --}}
    <div class="mb-5">
        <h2 class="h4 mb-3 text-center">¿Cómo funciona?</h2>
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="row g-4">
                    <div class="col-md-4">
                        <div class="h-100">
                            <div class="fw-semibold mb-1">1. Crea tu cuenta</div>
                            <p class="small text-muted mb-0">
                                Te registras en datosmatrimonios.cl y accedes a tu
                                panel privado de Planner de Matrimonio.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="h-100">
                            <div class="fw-semibold mb-1">2. Completa los datos básicos</div>
                            <p class="small text-muted mb-0">
                                Ingresas la fecha, ciudad, estilo y presupuesto estimado.
                                El sistema genera un checklist base adaptado a tu Matrimonio.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="h-100">
                            <div class="fw-semibold mb-1">3. Organiza todo desde un lugar</div>
                            <p class="small text-muted mb-0">
                                Vas marcando tareas, agregando invitados, proveedores,
                                actualizando el presupuesto y descargando tu planner en PDF
                                cuando lo necesites.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- CTA FINAL --}}
    <div class="text-center mb-4">
        <h2 class="h4 mb-2">Empieza a organizar tu Matrimonio hoy</h2>
        <p class="text-muted mb-3">
            No necesitas saber todo desde el principio. Parte con lo básico
            y ve completando tu planner a tu ritmo.
        </p>

        @auth
            <a href="{{ route('planner.dashboard') }}" class="btn btn-primary btn-lg">
                Abrir mi Planner
            </a>
        @else
            <a href="{{ route('register') }}" class="btn btn-primary btn-lg me-2 mb-2">
                Crear mi Planner
            </a>
            <a href="{{ route('login') }}" class="btn btn-outline-secondary mb-2">
                Iniciar sesión
            </a>
        @endauth

        <p class="small text-muted mt-2">
            Puedes editar y actualizar todo cuando quieras. Tu planner es privado
            y solo tú decides con quién compartirlo.
        </p>
    </div>

</div>
@endsection