@extends('layouts.app')

@section('title', 'Wedding Planner | Organiza tu matrimonio con Datos Matrimonios')

@section('content')
<div class="bg-white text-gray-800">

    <!-- HERO -->
    <section class="py-5 border-bottom" style="background: linear-gradient(135deg, #fff8f6 0%, #fdf2f3 100%);">
        <div class="container">
            <div class="row align-items-center g-4">
                <div class="col-lg-6">
                    <span class="badge rounded-pill text-bg-light border px-3 py-2 mb-3">
                        Planifica tu matrimonio de forma simple y hermosa
                    </span>

                    <h1 class="display-4 fw-bold mb-3">
                        Tu wedding planner digital en un solo lugar
                    </h1>

                    <p class="lead text-muted mb-4">
                        Organiza tareas, presupuesto, invitados, proveedores y el cronograma de tu gran día
                        desde una plataforma pensada para novios y novias que quieren disfrutar el proceso
                        sin estrés.
                    </p>

                    <div class="d-flex flex-wrap gap-3 mb-4">
                        @guest
                            <a href="{{ route('register') }}" class="btn btn-dark btn-lg px-4">
                                Comenzar ahora
                            </a>
                            <a href="{{ route('login') }}" class="btn btn-outline-dark btn-lg px-4">
                                Ya tengo cuenta
                            </a>
                        @else
                            <a href="{{ route('planner.dashboard') }}" class="btn btn-dark btn-lg px-4">
                                Ir a mi planner
                            </a>
                            <a href="{{ route('planner.checkout') }}" class="btn btn-outline-dark btn-lg px-4">
                                Activar planner
                            </a>
                        @endguest
                    </div>

                    <div class="row g-3 small text-muted">
                        <div class="col-6">
                            <div class="p-3 bg-white rounded-4 shadow-sm h-100">
                                ✅ Gestión de tareas
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 bg-white rounded-4 shadow-sm h-100">
                                ✅ Presupuesto ordenado
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 bg-white rounded-4 shadow-sm h-100">
                                ✅ Lista de invitados
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 bg-white rounded-4 shadow-sm h-100">
                                ✅ Proveedores y timeline
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="bg-white rounded-4 shadow-lg p-4 border">
                        <div class="mb-3">
                            <span class="badge text-bg-dark mb-2">Vista general</span>
                            <h3 class="fw-bold mb-0">Organiza cada detalle de tu boda</h3>
                        </div>

                        <div class="row g-3">
                            <div class="col-12">
                                <div class="p-3 rounded-4" style="background:#f8f9fa;">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <strong>Checklist de tareas</strong>
                                        <span class="text-success">75% completado</span>
                                    </div>
                                    <div class="progress mt-3" style="height: 8px;">
                                        <div class="progress-bar bg-dark" style="width: 75%;"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="p-3 rounded-4 h-100" style="background:#f8f9fa;">
                                    <small class="text-muted d-block mb-1">Presupuesto</small>
                                    <h4 class="fw-bold mb-0">$8.500.000</h4>
                                    <span class="text-muted">Total estimado</span>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="p-3 rounded-4 h-100" style="background:#f8f9fa;">
                                    <small class="text-muted d-block mb-1">Invitados</small>
                                    <h4 class="fw-bold mb-0">126</h4>
                                    <span class="text-muted">Confirmados y pendientes</span>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="p-3 rounded-4" style="background:#f8f9fa;">
                                    <small class="text-muted d-block mb-2">Próximos hitos</small>
                                    <ul class="list-unstyled mb-0">
                                        <li class="mb-2">💐 Confirmar decoración floral</li>
                                        <li class="mb-2">🎵 Reservar música y animación</li>
                                        <li class="mb-0">📋 Enviar invitaciones pendientes</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- BENEFICIOS -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <span class="text-uppercase text-muted small fw-semibold">Beneficios</span>
                <h2 class="fw-bold mt-2">Todo lo que necesitas para planificar tu matrimonio</h2>
                <p class="text-muted mb-0">
                    Una herramienta pensada para simplificar la organización y ayudarte a tomar mejores decisiones.
                </p>
            </div>

            <div class="row g-4">
                <div class="col-md-6 col-lg-3">
                    <div class="h-100 p-4 border rounded-4 shadow-sm">
                        <div class="fs-2 mb-3">📝</div>
                        <h5 class="fw-bold">Tareas claras</h5>
                        <p class="text-muted mb-0">
                            Lleva el control de cada pendiente y marca el avance de tu planificación.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="h-100 p-4 border rounded-4 shadow-sm">
                        <div class="fs-2 mb-3">💰</div>
                        <h5 class="fw-bold">Presupuesto ordenado</h5>
                        <p class="text-muted mb-0">
                            Registra gastos, evita desajustes y mantén el control financiero de tu boda.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="h-100 p-4 border rounded-4 shadow-sm">
                        <div class="fs-2 mb-3">👰🤵</div>
                        <h5 class="fw-bold">Invitados y proveedores</h5>
                        <p class="text-muted mb-0">
                            Gestiona tu lista de invitados y organiza a cada proveedor en un solo panel.
                        </p>
                    </div>
                </div>

                <div class="col-md-6 col-lg-3">
                    <div class="h-100 p-4 border rounded-4 shadow-sm">
                        <div class="fs-2 mb-3">⏰</div>
                        <h5 class="fw-bold">Timeline del evento</h5>
                        <p class="text-muted mb-0">
                            Planifica cada momento importante para llegar al gran día con tranquilidad.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- COMO FUNCIONA -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <span class="text-uppercase text-muted small fw-semibold">Cómo funciona</span>
                <h2 class="fw-bold mt-2">Empieza en pocos pasos</h2>
            </div>

            <div class="row g-4 text-center">
                <div class="col-md-4">
                    <div class="p-4 bg-white rounded-4 shadow-sm h-100">
                        <div class="display-6 fw-bold text-dark mb-3">1</div>
                        <h5 class="fw-bold">Crea tu cuenta</h5>
                        <p class="text-muted mb-0">
                            Regístrate en la plataforma y completa la información básica de tu matrimonio.
                        </p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="p-4 bg-white rounded-4 shadow-sm h-100">
                        <div class="display-6 fw-bold text-dark mb-3">2</div>
                        <h5 class="fw-bold">Activa tu planner</h5>
                        <p class="text-muted mb-0">
                            Accede a todas las herramientas premium para gestionar cada detalle.
                        </p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="p-4 bg-white rounded-4 shadow-sm h-100">
                        <div class="display-6 fw-bold text-dark mb-3">3</div>
                        <h5 class="fw-bold">Organiza sin estrés</h5>
                        <p class="text-muted mb-0">
                            Controla tareas, invitados, presupuesto y proveedores desde un solo lugar.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="py-5">
        <div class="container">
            <div class="p-5 rounded-4 text-white text-center shadow-lg"
                 style="background: linear-gradient(135deg, #1f1f1f 0%, #444 100%);">
                <h2 class="fw-bold mb-3">Haz que planificar tu boda sea más fácil</h2>
                <p class="mb-4 text-white-50">
                    Deja atrás las planillas desordenadas y empieza a organizar tu matrimonio con una plataforma creada para ti.
                </p>

                @guest
                    <a href="{{ route('register') }}" class="btn btn-light btn-lg px-4 me-2">
                        Crear cuenta
                    </a>
                    <a href="{{ route('login') }}" class="btn btn-outline-light btn-lg px-4">
                        Iniciar sesión
                    </a>
                @else
                    <a href="{{ route('planner.checkout') }}" class="btn btn-light btn-lg px-4 me-2">
                        Activar planner
                    </a>
                    <a href="{{ route('planner.dashboard') }}" class="btn btn-outline-light btn-lg px-4">
                        Ir a mi cuenta
                    </a>
                @endguest
            </div>
        </div>
    </section>

</div>
@endsection