@extends('layouts.alerta')

@section('title', 'Plataforma de Alertas — Sydesoft / TeAlerto')

@section('content')

{{-- HERO tecnológico --}}
<section class="py-5" style="
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: white;
">
    <div class="container py-5">
        <div class="row align-items-center g-5">
            
            <div class="col-lg-6">
                <span class="badge bg-danger rounded-pill px-3 py-2 mb-3">Nuevo módulo</span>

                <h1 class="display-5 fw-bold">
                    Plataforma de Alertas para Condominios y Empresas 🚨
                </h1>

                <p class="lead mt-3 opacity-75">
                    TeAlerto centraliza todos los incidentes de tu edificio o empresa en un panel único:
                    <strong>seguridad</strong>, <strong>falta de aseo</strong>, <strong>piscinas</strong>, 
                    <strong>infraestructura</strong> y mucho más.
                </p>

                <div class="d-flex gap-3 mt-4 flex-wrap">
                    <a href="#demo" class="btn btn-danger btn-lg">
                        🚨 Crear alerta demo
                    </a>
                    <a href="{{ url('/') }}" class="btn btn-outline-light btn-lg">
                        Volver al inicio
                    </a>
                </div>
            </div>

            <div class="col-lg-6 text-center">
                <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1000"
                     alt="Dashboard Alertas"
                     class="img-fluid rounded shadow-lg"
                     style="border: 2px solid rgba(255,255,255,.2)">
            </div>

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

{{-- TIPOS DE ALERTA --}}
<section class="py-5 bg-light">
    <div class="container">

        <div class="text-center mb-5">
            <h2 class="fw-bold text-dark">Tipos de alertas más comunes</h2>
            <p class="text-muted">
                La plataforma permite reportar diferentes categorías para una gestión más eficiente.
            </p>
        </div>

        <div class="row g-4">

            {{-- Seguridad --}}
            <div class="col-md-3">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body">
                        <span class="badge bg-danger mb-2">Seguridad</span>
                        <h5 class="fw-bold">Incidentes de seguridad</h5>
                        <p class="text-muted small">Portones abiertos, personas sospechosas, robos, etc.</p>
                    </div>
                </div>
            </div>

            {{-- Aseo --}}
            <div class="col-md-3">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body">
                        <span class="badge bg-success mb-2">Aseo</span>
                        <h5 class="fw-bold">Falta de aseo</h5>
                        <p class="text-muted small">Basura, malos olores, pasillos sucios, etc.</p>
                    </div>
                </div>
            </div>

            {{-- Piscinas --}}
            <div class="col-md-3">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body">
                        <span class="badge bg-info mb-2">Piscinas</span>
                        <h5 class="fw-bold">Problemas en piscinas</h5>
                        <p class="text-muted small">Agua turbia, suciedad, riesgos de seguridad.</p>
                    </div>
                </div>
            </div>

            {{-- Otros --}}
            <div class="col-md-3">
                <div class="card shadow-sm border-0 h-100">
                    <div class="card-body">
                        <span class="badge bg-warning mb-2">Otros</span>
                        <h5 class="fw-bold">Otras incidencias</h5>
                        <p class="text-muted small">Ruidos molestos, luminarias malas, estacionamientos, etc.</p>
                    </div>
                </div>
            </div>

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

{{-- COMO FUNCIONA --}}
<section class="py-5">
    <div class="container">

        <div class="text-center mb-5">
            <h2 class="fw-bold text-dark">Cómo funciona TeAlerto</h2>
            <p class="text-muted">Tres simples pasos para gestionar alertas de forma eficiente.</p>
        </div>

        <div class="row g-5 text-center">

            <div class="col-md-4">
                <div class="p-4 border rounded shadow-sm h-100">
                    <div class="display-6 fw-bold text-danger">1</div>
                    <h5 class="fw-bold mt-3">Se reporta la alerta</h5>
                    <p class="text-muted small">
                        El usuario elige el tipo de alerta, escribe una descripción y puede adjuntar fotos.
                    </p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="p-4 border rounded shadow-sm h-100">
                    <div class="display-6 fw-bold text-warning">2</div>
                    <h5 class="fw-bold mt-3">Administración la recibe</h5>
                    <p class="text-muted small">
                        El sistema notifica automáticamente a los responsables asignados.
                    </p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="p-4 border rounded shadow-sm h-100">
                    <div class="display-6 fw-bold text-success">3</div>
                    <h5 class="fw-bold mt-3">Se gestiona y se cierra</h5>
                    <p class="text-muted small">
                        La alerta cambia de estado: Pendiente → En proceso → Resuelta.
                    </p>
                </div>
            </div>

        </div>

    </div>
</section>

{{-- FORMULARIO DEMO + TABLA --}}
<section id="demo" class="py-5 bg-light">
    <div class="container">

        <div class="row g-5">

            {{-- Formulario --}}
            <div class="col-lg-6">
                <div class="card shadow border-0">
                    <div class="card-body p-4">

                        <h4 class="fw-bold mb-2">Crear una alerta (demo)</h4>
                        <p class="small text-muted">
                            Más adelante podrás conectarlo a tu base de datos real.
                        </p>

                        <form class="mt-3">

                            <div class="mb-3">
                                <label class="form-label small fw-bold">Título de la alerta</label>
                                <input type="text" class="form-control" placeholder="Ej: Portón queda abierto de noche">
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label small fw-bold">Tipo</label>
                                    <select class="form-select">
                                        <option>Selecciona...</option>
                                        <option>Seguridad</option>
                                        <option>Aseo</option>
                                        <option>Piscina</option>
                                        <option>Infraestructura</option>
                                        <option>Otros</option>
                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label small fw-bold">Nivel</label>
                                    <select class="form-select">
                                        <option>Selecciona...</option>
                                        <option>Alta</option>
                                        <option>Media</option>
                                        <option>Baja</option>
                                    </select>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label small fw-bold">Ubicación</label>
                                <input type="text" class="form-control" placeholder="Ej: Torre A, piso 7, piscina">
                            </div>

                            <div class="mb-3">
                                <label class="form-label small fw-bold">Descripción</label>
                                <textarea rows="3" class="form-control" placeholder="Describe el problema"></textarea>
                            </div>

                            <button class="btn btn-danger px-4 py-2">
                                🚨 Enviar alerta demo
                            </button>

                        </form>

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

            {{-- Tabla de ejemplo --}}
            <div class="col-lg-6">
                <div class="card shadow border-0">
                    <div class="card-body p-4">

                        <h4 class="fw-bold">Alertas recientes (ejemplo)</h4>

                        <div class="table-responsive mt-3">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>Fecha</th>
                                        <th>Título</th>
                                        <th>Tipo</th>
                                        <th>Nivel</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="small text-muted">05/12/2025 - 16:32</td>
                                        <td class="small">Portón queda abierto</td>
                                        <td><span class="badge bg-danger">Seguridad</span></td>
                                        <td><span class="badge bg-danger-subtle text-danger">Alta</span></td>
                                        <td><span class="badge bg-warning">En proceso</span></td>
                                    </tr>

                                    <tr>
                                        <td class="small text-muted">05/12/2025 - 15:10</td>
                                        <td class="small">Pasillos con basura</td>
                                        <td><span class="badge bg-success">Aseo</span></td>
                                        <td><span class="badge bg-warning-subtle text-warning">Media</span></td>
                                        <td><span class="badge bg-success">Resuelta</span></td>
                                    </tr>

                                    <tr>
                                        <td class="small text-muted">04/12/2025 - 19:45</td>
                                        <td class="small">Piscina con agua turbia</td>
                                        <td><span class="badge bg-info">Piscina</span></td>
                                        <td><span class="badge bg-danger-subtle text-danger">Alta</span></td>
                                        <td><span class="badge bg-secondary">Pendiente</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

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

        </div>

    </div>
</section>

{{-- FAQ --}}
<section class="py-5">
    <div class="container">

        <h3 class="fw-bold mb-3 text-center">¿Por qué usar una plataforma de alertas?</h3>

        <p class="text-muted text-center mb-4">
            Una solución profesional para mejorar la convivencia, la seguridad y la gestión interna.
        </p>

        <div class="row text-center g-4">

            <div class="col-md-4">
                <div class="p-4 shadow-sm rounded border h-100">
                    <h5 class="fw-bold">📌 Registro completo</h5>
                    <p class="small text-muted">Cada alerta queda documentada con fecha, hora y responsable.</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="p-4 shadow-sm rounded border h-100">
                    <h5 class="fw-bold">📊 Estadísticas reales</h5>
                    <p class="small text-muted">Tipos de incidencias, tiempos de respuesta, áreas críticas.</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="p-4 shadow-sm rounded border h-100">
                    <h5 class="fw-bold">🤝 Transparencia</h5>
                    <p class="small text-muted">La comunidad ve que la administración realmente gestiona.</p>
                </div>
            </div>

        </div>

    </div>
</section>

@endsection