@extends('frontend.main_master')

@section('title', 'Sobre Nosotros - ' . t('site-title'))
@section('meta_description', 'Conoce más sobre Astro Sabio. Nuestra misión, visión y nuestra innovadora plataforma de astrología digital.')

@push('styles')
    <link rel="stylesheet" href="{{ asset('frontend/css/legal/about-page.css') }}">
@endpush

@section('content')
    <div class="about-v2">
        <section class="py-4 py-lg-5">
            <div class="container">
                <div class="row align-items-center g-4 g-lg-5">
                    <div class="col-lg-6 text-center text-lg-start">
                        <div class="about-pill d-inline-flex align-items-center justify-content-center gap-2 mb-3 mx-auto"
                            style="width: fit-content; text-align: center;">
                            <i class="fa-solid fa-sparkles"></i> Astrología de Nueva Generación
                        </div>
                        <h1 class="about-title fw-black mb-3">
                            Panel Inteligente para
                            <span class="text-astro-teal">Comprender</span>
                            el Cosmos
                        </h1>
                        <p class="about-subtitle mb-4">
                            Algoritmos de precisión astronómica que combinan la sabiduría milenaria con análisis profundos y personalizados en minutos.
                        </p>
                        <div class="d-flex flex-column flex-sm-row gap-2 justify-content-center justify-content-lg-start">
                            <a href="{{ route('birth-chart.index') }}"
                                class="btn btn-astro-teal rounded-pill px-4 py-2 fw-semibold">
                                Explorar Ahora
                            </a>
                            <a href="{{ route('panel') }}"
                                class="btn btn-outline-astro-soft rounded-pill px-4 py-2 fw-semibold">
                                Ver Mis Análisis
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="about-hero-media position-relative overflow-hidden">
                            <img src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxbpjzRb22GpwuTppuaGQFjAelAc6gHMdb1bxI7VHFPyfBZ_qWoS06_qnMeeGsJ2Vyj8z05vV5JLDnFUv6stQHia5ssR-IfVgDgHnbgV8TQeBl6lzPwRl06TN7kYtrBv8cfUyUSbU1BhhaYSIRAB_LG1I12A8GJP0KS1oP8OVH6nA-yM1qvf4_oKtFjecGC-FiwnqxQhlH0V4niLpFqRwfpOuCeqL1xjhBdNv9cCkbF9hL8djIK5Kh1uou09_vICg3qn9_dyJCltY"
                                alt="Tema cósmico" class="w-100 h-100 object-fit-cover">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @php
            use App\Models\AgreementPage;

            $aboutAgreement = AgreementPage::findByKeyAndLocale('about');
        @endphp

        <section class="py-5 bg-white">
            <div class="container">
                <div class="row align-items-start g-4 g-lg-5 mb-5 about-story">
                    <div class="col-lg-5">
                        <div class="about-venus-tablet mx-auto" style="max-width:420px;">
                            <img src="{{ asset('images/venus-tablet.webp') }}" alt="Tablilla de Venus - British Museum"
                                class="w-100 rounded-3 shadow-sm" style="object-fit:cover;">
                            <p class="text-muted small mt-2 mb-0">Tablilla de Venus de Ammisaduqa — Uno de los registros astronómicos más antiguos del mundo</p>
                        </div>
                    </div>
                    <div class="col-lg-7 about-story__text">
                        <h2 class="fw-bold mb-3">¿Quiénes Somos?</h2>
                        @if($aboutAgreement && $aboutAgreement->content)
                            {!! $aboutAgreement->content !!}
                        @else
                            <p class="text-muted mb-3">Astro Sabio nació de un anhelo de trascendencia.</p>
                            <p class="text-muted mb-3">
                                Surgió de la visión compartida de desarrolladores y astrólogos apasionados que contemplan el firmamento no solo para observar las estrellas, sino para descifrar su mensaje. Al investigar las fuentes astronómicas más antiguas, descubrimos que el conocimiento ancestral puede revivir con rigor gracias a la tecnología contemporánea.
                            </p>
                            <p class="text-muted mb-3">
                                Para nosotros, este proyecto es un puente evolutivo: interpretar siglos de sabiduría mediante algoritmos precisos, modelos de inteligencia artificial y la agilidad del entorno digital.
                            </p>
                            <p class="text-muted mb-3">
                                En cada línea de código late una huella del pasado; en cada cálculo, rigor científico; y en cada análisis, el poder de la tecnología moderna.
                            </p>
                            <p class="text-muted mb-0">
                                Nuestra misión es hacer que el lenguaje del cosmos sea comprensible, accesible y riguroso para todos en la era digital.
                            </p>
                        @endif
                    </div>
                </div>
                <div class="row g-3 g-lg-4">
                    <div class="col-md-4">
                        <div class="about-soft-card p-4 h-100">
                            <div class="about-soft-icon"><i class="fa-solid fa-crosshairs"></i></div>
                            <h3 class="h6 fw-bold mt-3">Cálculo de Alta Precisión</h3>
                            <p class="small text-muted mb-0">Nuestros análisis utilizan efemérides astronómicas exactas para calcular posiciones planetarias al segundo de arco.</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="about-soft-card p-4 h-100">
                            <div class="about-soft-icon"><i class="fa-solid fa-heart"></i></div>
                            <h3 class="h6 fw-bold mt-3">Panel Inteligente</h3>
                            <p class="small text-muted mb-0">Diseñado pensando en el usuario: claro, intuitivo y accesible desde cualquier dispositivo.</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="about-soft-card p-4 h-100">
                            <div class="about-soft-icon"><i class="fa-solid fa-chart-line"></i></div>
                            <h3 class="h6 fw-bold mt-3">Evolución Continua</h3>
                            <p class="small text-muted mb-0">Modelos analíticos en constante enriquecimiento y bases de datos astrológicas en continua expansión.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-5 about-alt-bg">
            <div class="container">
                <div class="row g-3 g-lg-4">
                    <div class="col-lg-6">
                        <div class="about-mv-card p-4 p-lg-5 h-100">
                            <h3 class="h4 fw-bold mb-3"><i class="fa-solid fa-rocket me-2 text-astro-teal"></i>Nuestra Misión
                            </h3>
                            <p class="text-muted mb-0">
                                Proporcionar conocimiento astrológico veraz, claro y fundamentado para que cada persona comprenda sus ciclos vitales y potencie su desarrollo consciente.
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="about-mv-card p-4 p-lg-5 h-100">
                            <h3 class="h4 fw-bold mb-3"><i class="fa-solid fa-eye me-2 text-astro-teal"></i>Nuestra Visión</h3>
                            <p class="text-muted mb-0">
                                Ser la plataforma de referencia internacional en astrología rigurosa basada en datos y análisis humanistas para el bienestar personal.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-5 bg-white">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="fw-bold mb-2">¿Por Qué Elegir Astro Sabio?</h2>
                    <p class="text-muted mb-0">Los valores y cualidades que nos distinguen</p>
                </div>
                <div class="row g-3 text-center">
                    <div class="col-6 col-lg-3">
                        <div class="about-feature p-3 h-100">
                            <span class="about-feature-icon"><i class="fa-solid fa-fingerprint"></i></span>
                            <h4 class="h6 fw-bold mt-3 mb-1">Personalizado</h4>
                            <p class="small text-muted mb-0">Análisis únicos configurados según las coordenadas exactas de tu carta natal.</p>
                        </div>
                    </div>
                    <div class="col-6 col-lg-3">
                        <div class="about-feature p-3 h-100">
                            <span class="about-feature-icon"><i class="fa-solid fa-brain"></i></span>
                            <h4 class="h6 fw-bold mt-3 mb-1">IA + Maestría Astrológica</h4>
                            <p class="small text-muted mb-0">La rapidez de la inteligencia artificial combinada con el saber de astrólogos experimentados.</p>
                        </div>
                    </div>
                    <div class="col-6 col-lg-3">
                        <div class="about-feature p-3 h-100">
                            <span class="about-feature-icon"><i class="fa-solid fa-bolt"></i></span>
                            <h4 class="h6 fw-bold mt-3 mb-1">Informes Inmediatos</h4>
                            <p class="small text-muted mb-0">Reportes completos e interactivos generados en pocos segundos.</p>
                        </div>
                    </div>
                    <div class="col-6 col-lg-3">
                        <div class="about-feature p-3 h-100">
                            <span class="about-feature-icon"><i class="fa-solid fa-lock"></i></span>
                            <h4 class="h6 fw-bold mt-3 mb-1">Datos Seguros</h4>
                            <p class="small text-muted mb-0">Tus datos personales y de nacimiento se protegen con los máximos estándares de privacidad.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-5 about-process-wrap text-white">
            <div class="container">
                <div class="text-center mb-5">
                    <h2 class="fw-bold mb-2">¿Cómo Funciona?</h2>
                    <p class="mb-0 text-white-50">Accede a la sabiduría del cosmos en 3 sencillos pasos</p>
                </div>
                <div class="about-steps-track position-relative">
                    <div class="about-steps-line d-none d-md-block" aria-hidden="true"></div>
                    <div class="row g-4 text-center about-steps">
                        <div class="col-md-4 position-relative about-step-item">
                            <span class="about-step-circle">1</span>
                            <h3 class="about-step-title mt-3 mb-1">Crea tu Carta</h3>
                            <p class="about-step-text mb-0">Ingresa tu fecha, hora exacta y lugar de nacimiento para trazar tu mapa natal.</p>
                        </div>
                        <div class="col-md-4 position-relative about-step-item">
                            <span class="about-step-circle">2</span>
                            <h3 class="about-step-title mt-3 mb-1">Elige tu Consulta</h3>
                            <p class="about-step-text mb-0">Compatibilidad de pareja, vocación profesional o tránsitos actuales: selecciona tu área de interés.</p>
                        </div>
                        <div class="col-md-4 position-relative about-step-item">
                            <span class="about-step-circle">3</span>
                            <h3 class="about-step-title mt-3 mb-1">Recibe tu Análisis</h3>
                            <p class="about-step-text mb-0">Obtén interpretaciones detalladas y orientaciones prácticas de forma instantánea.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-5 about-alt-bg">
            <div class="container">
                <div class="about-intro text-center mx-auto">
                    <i class="fa-solid fa-shield-halved fs-3 text-astro-wood mb-3"></i>
                    <h2 class="h4 fw-bold mb-3">La Privacidad y la Transparencia son Nuestra Prioridad</h2>
                    <p class="text-muted mb-3">
                        En Astro Sabio, tus datos están protegidos de extremo a extremo, se utilizan exclusivamente para los cálculos astronómicos y no se comparten con terceros con fines publicitarios.
                    </p>
                    <div class="d-flex flex-wrap justify-content-center gap-2">
                        <a href="{{ route('legal.privacy') }}" class="about-link">Política de Privacidad</a>
                        <span class="text-muted">|</span>
                        <a href="{{ route('legal.kvkk') }}" class="about-link">Protección de Datos</a>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-5 about-alt-bg">
            <div class="container">
                <div class="mx-auto" style="max-width: 860px;">
                    <div class="text-center mb-4">
                        <h2 class="fw-bold mb-1">Preguntas Frecuentes</h2>
                    </div>
                    <div class="accordion about-accordion" id="aboutFaq">
                        <div class="accordion-item">
                            <h3 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#faqOne" aria-expanded="true">
                                    ¿Qué tan precisas son las interpretaciones astrológicas?
                                </button>
                            </h3>
                            <div id="faqOne" class="accordion-collapse collapse show" data-bs-parent="#aboutFaq">
                                <div class="accordion-body">Nuestros análisis se sustentan en efemérides astronómicas de alta precisión y reglas interpretativas avaladas por la astrología clásica y psicológica.</div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h3 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#faqTwo">
                                    ¿Puedo usar la plataforma si no conozco mi hora exacta de nacimiento?
                                </button>
                            </h3>
                            <div id="faqTwo" class="accordion-collapse collapse" data-bs-parent="#aboutFaq">
                                <div class="accordion-body">Sí. No obstante, sin la hora exacta, el cálculo del Ascendente y la distribución de las casas astrológicas será aproximado.</div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h3 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#faqThree">
                                    ¿Están seguros mis datos personales?
                                </button>
                            </h3>
                            <div id="faqThree" class="accordion-collapse collapse" data-bs-parent="#aboutFaq">
                                <div class="accordion-body">Por supuesto. La información se procesa únicamente para la prestación del servicio conforme a las normativas de protección de datos (RGPD).</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-5 about-final-cta text-center text-white">
            <div class="container">
                <h2 class="fw-black mb-3">Descubre tu Carta Natal Hoy Mismo</h2>
                <p class="mb-4 text-white-50">Desbloquea tu potencial interior y accede a tu mapa cósmico en minutos.</p>
                @auth
                    <a href="{{ route('panel') }}" class="btn btn-light rounded-pill px-4 py-2 fw-semibold">
                        Ir a Mi Panel
                    </a>
                @else
                    <a href="{{ auth()->check() ? route('panel') : route('login') }}" class="btn btn-light rounded-pill px-4 py-2 fw-semibold">
                        Calcular Mi Carta
                    </a>
                @endauth
            </div>
        </section>
    </div>

@endsection