@{
    ViewData["Title"] = "Acerca de Nosotros";
}

<div class="container-fluid">
    <!-- Hero Section -->
    <div class="row bg-success text-white py-5 mb-5">
        <div class="col-12 text-center">
            <h1 class="display-4 mb-3">
                <i class="fas fa-leaf me-3"></i>Acerca de Glamping Paradise
            </h1>
            <p class="lead">Conectando personas con la naturaleza desde 2020</p>
        </div>
    </div>

    <!-- Nuestra Historia -->
    <div class="row mb-5">
        <div class="col-lg-6 mb-4">
            <h2 class="mb-4">Nuestra Historia</h2>
            <p class="lead">Glamping Paradise nació de la pasión por la naturaleza y el deseo de ofrecer experiencias únicas que combinen el confort moderno con la belleza del entorno natural.</p>
            <p>Fundado en 2020, nuestro proyecto comenzó como un sueño de crear un espacio donde las familias y aventureros pudieran desconectarse del estrés urbano y reconectarse con lo esencial: la naturaleza, la tranquilidad y los momentos especiales con sus seres queridos.</p>
            <p>Ubicados en un entorno privilegiado, hemos diseñado cada cabaña y experiencia pensando en el bienestar de nuestros huéspedes, respetando siempre el medio ambiente y promoviendo el turismo sostenible.</p>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body bg-light">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <i class="fas fa-home fa-3x text-success mb-2"></i>
                            <h4>15+</h4>
                            <p class="text-muted">Cabañas Únicas</p>
                        </div>
                        <div class="col-6 mb-3">
                            <i class="fas fa-users fa-3x text-primary mb-2"></i>
                            <h4>1000+</h4>
                            <p class="text-muted">Huéspedes Felices</p>
                        </div>
                        <div class="col-6 mb-3">
                            <i class="fas fa-star fa-3x text-warning mb-2"></i>
                            <h4>4.9</h4>
                            <p class="text-muted">Calificación Promedio</p>
                        </div>
                        <div class="col-6 mb-3">
                            <i class="fas fa-tree fa-3x text-success mb-2"></i>
                            <h4>100%</h4>
                            <p class="text-muted">Sostenible</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Nuestra Misión y Visión -->
    <div class="row mb-5">
        <div class="col-md-6 mb-4">
            <div class="card h-100 border-success">
                <div class="card-header bg-success text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-bullseye me-2"></i>Nuestra Misión
                    </h4>
                </div>
                <div class="card-body">
                    <p>Proporcionar experiencias de glamping excepcionales que permitan a nuestros huéspedes reconectarse con la naturaleza sin renunciar al confort y la comodidad, promoviendo el turismo sostenible y el respeto por el medio ambiente.</p>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-check text-success me-2"></i>Experiencias memorables</li>
                        <li><i class="fas fa-check text-success me-2"></i>Confort y naturaleza</li>
                        <li><i class="fas fa-check text-success me-2"></i>Turismo sostenible</li>
                        <li><i class="fas fa-check text-success me-2"></i>Servicio excepcional</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-4">
            <div class="card h-100 border-primary">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-eye me-2"></i>Nuestra Visión
                    </h4>
                </div>
                <div class="card-body">
                    <p>Ser el destino de glamping líder en la región, reconocido por nuestro compromiso con la sostenibilidad, la innovación en experiencias turísticas y la excelencia en el servicio al cliente.</p>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-check text-primary me-2"></i>Liderazgo regional</li>
                        <li><i class="fas fa-check text-primary me-2"></i>Innovación constante</li>
                        <li><i class="fas fa-check text-primary me-2"></i>Sostenibilidad ambiental</li>
                        <li><i class="fas fa-check text-primary me-2"></i>Excelencia en servicio</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Nuestros Valores -->
    <div class="row mb-5">
        <div class="col-12">
            <h2 class="text-center mb-5">Nuestros Valores</h2>
            <div class="row">
                <div class="col-md-3 mb-4">
                    <div class="text-center">
                        <div class="bg-success rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="fas fa-leaf fa-2x text-white"></i>
                        </div>
                        <h5>Sostenibilidad</h5>
                        <p class="text-muted">Comprometidos con la protección del medio ambiente y el desarrollo sostenible.</p>
                    </div>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="text-center">
                        <div class="bg-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="fas fa-heart fa-2x text-white"></i>
                        </div>
                        <h5>Hospitalidad</h5>
                        <p class="text-muted">Tratamos a cada huésped como parte de nuestra familia, con calidez y respeto.</p>
                    </div>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="text-center">
                        <div class="bg-warning rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="fas fa-star fa-2x text-white"></i>
                        </div>
                        <h5>Excelencia</h5>
                        <p class="text-muted">Buscamos la perfección en cada detalle para superar las expectativas.</p>
                    </div>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="text-center">
                        <div class="bg-info rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="fas fa-handshake fa-2x text-white"></i>
                        </div>
                        <h5>Integridad</h5>
                        <p class="text-muted">Actuamos con honestidad y transparencia en todas nuestras relaciones.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Nuestro Equipo -->
    <div class="row mb-5">
        <div class="col-12">
            <h2 class="text-center mb-5">Nuestro Equipo</h2>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card text-center">
                        <div class="card-body">
                            <div class="bg-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 100px; height: 100px;">
                                <i class="fas fa-user fa-3x text-white"></i>
                            </div>
                            <h5>María González</h5>
                            <p class="text-muted">Directora General</p>
                            <p class="small">Con más de 10 años de experiencia en turismo sostenible, María lidera nuestro equipo con pasión y dedicación.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card text-center">
                        <div class="card-body">
                            <div class="bg-success rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 100px; height: 100px;">
                                <i class="fas fa-user fa-3x text-white"></i>
                            </div>
                            <h5>Carlos Rodríguez</h5>
                            <p class="text-muted">Gerente de Operaciones</p>
                            <p class="small">Especialista en hospitalidad y gestión de experiencias, Carlos asegura que cada estadía sea perfecta.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card text-center">
                        <div class="card-body">
                            <div class="bg-warning rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 100px; height: 100px;">
                                <i class="fas fa-user fa-3x text-white"></i>
                            </div>
                            <h5>Ana Martínez</h5>
                            <p class="text-muted">Coordinadora de Sostenibilidad</p>
                            <p class="small">Bióloga especializada en conservación, Ana desarrolla nuestros programas ambientales y educativos.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Certificaciones y Reconocimientos -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card bg-light">
                <div class="card-body">
                    <h4 class="text-center mb-4">Certificaciones y Reconocimientos</h4>
                    <div class="row text-center">
                        <div class="col-md-3 mb-3">
                            <i class="fas fa-certificate fa-3x text-success mb-2"></i>
                            <h6>Certificación Ambiental</h6>
                            <p class="small text-muted">Reconocimiento por prácticas sostenibles</p>
                        </div>
                        <div class="col-md-3 mb-3">
                            <i class="fas fa-award fa-3x text-warning mb-2"></i>
                            <h6>Premio Turismo Verde</h6>
                            <p class="small text-muted">Mejor proyecto ecoturístico 2023</p>
                        </div>
                        <div class="col-md-3 mb-3">
                            <i class="fas fa-medal fa-3x text-primary mb-2"></i>
                            <h6>Excelencia TripAdvisor</h6>
                            <p class="small text-muted">Certificado de excelencia 2023</p>
                        </div>
                        <div class="col-md-3 mb-3">
                            <i class="fas fa-thumbs-up fa-3x text-info mb-2"></i>
                            <h6>Sello de Calidad</h6>
                            <p class="small text-muted">Ministerio de Comercio, Industria y Turismo</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Compromiso Ambiental -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card border-success">
                <div class="card-header bg-success text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-globe-americas me-2"></i>Nuestro Compromiso Ambiental
                    </h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Iniciativas Sostenibles:</h6>
                            <ul>
                                <li>Energía 100% renovable (solar y eólica)</li>
                                <li>Sistema de recolección y tratamiento de aguas</li>
                                <li>Programa de reforestación local</li>
                                <li>Gestión integral de residuos</li>
                                <li>Uso de materiales locales y biodegradables</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6>Impacto Positivo:</h6>
                            <ul>
                                <li>500+ árboles plantados anualmente</li>
                                <li>Reducción del 80% en emisiones de CO2</li>
                                <li>Apoyo a 20+ familias locales</li>
                                <li>Conservación de 50 hectáreas de bosque</li>
                                <li>Programas educativos ambientales</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Call to Action -->
    <div class="row">
        <div class="col-12 text-center">
            <div class="card bg-primary text-white">
                <div class="card-body py-5">
                    <h3 class="mb-3">¿Listo para vivir la experiencia Glamping Paradise?</h3>
                    <p class="lead mb-4">Únete a nosotros en esta aventura única donde el lujo se encuentra con la naturaleza</p>
                    <div class="d-flex gap-3 justify-content-center">
                        <a asp-controller="Home" asp-action="Cabins" class="btn btn-light btn-lg">
                            <i class="fas fa-home me-2"></i>Ver Cabañas
                        </a>
                        <a asp-controller="Home" asp-action="Contact" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-envelope me-2"></i>Contáctanos
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>