@extends('frontend.main_master')

@section('noindex', true)

@section('title', 'Cómo Funciona - Astro Sabio')
@section('meta_description', '¿Cómo funciona la inteligencia artificial y el motor de cálculo astrológico de Astro Sabio?')

@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-wand-magic-sparkles"></i> Fácil, Rápido y Científico
                        </div>
                        <h1 class="about-title fw-black mb-3">
                            Astro Sabio
                            <span class="text-astro-teal">¿Cómo</span>
                            Funciona?
                        </h1>
                        <p class="about-subtitle mb-4">
                            Introduzca sus datos de nacimiento y nuestro motor astronómico de alta precisión junto con la inteligencia artificial generará su carta natal y análisis astrológicos en segundos.
                        </p>
                        <div class="d-flex flex-column flex-sm-row gap-2 justify-content-center justify-content-lg-start">
                            <a href="{{ auth()->check() ? route('panel') : route('login') }}"
                                class="btn btn-astro-teal rounded-pill px-4 py-2 fw-semibold">
                                Comenzar Ahora
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="about-hero-card p-4 rounded-4 shadow-sm bg-white border">
                            <div class="d-flex flex-column gap-3">
                                <div class="d-flex align-items-start gap-3">
                                    <div class="rounded-circle bg-astro-teal text-white d-flex align-items-center justify-content-center flex-shrink-0" style="width: 36px; height: 36px; font-weight: bold; background: #0F5A4F;">1</div>
                                    <div>
                                        <h5 class="fw-bold mb-1">Ingrese sus Datos de Nacimiento</h5>
                                        <p class="text-muted small mb-0">Defina su fecha, hora exacta y lugar de nacimiento en el sistema.</p>
                                    </div>
                                </div>
                                <div class="d-flex align-items-start gap-3">
                                    <div class="rounded-circle bg-astro-teal text-white d-flex align-items-center justify-content-center flex-shrink-0" style="width: 36px; height: 36px; font-weight: bold; background: #0F5A4F;">2</div>
                                    <div>
                                        <h5 class="fw-bold mb-1">Análisis con Inteligencia Artificial</h5>
                                        <p class="text-muted small mb-0">Las posiciones planetarias, aspectos y tránsitos se calculan con máxima exactitud.</p>
                                    </div>
                                </div>
                                <div class="d-flex align-items-start gap-3">
                                    <div class="rounded-circle bg-astro-teal text-white d-flex align-items-center justify-content-center flex-shrink-0" style="width: 36px; height: 36px; font-weight: bold; background: #0F5A4F;">3</div>
                                    <div>
                                        <h5 class="fw-bold mb-1">Acceda a su Informe Personalizado</h5>
                                        <p class="text-muted small mb-0">Su carta astral, sinastría de pareja y análisis de ciclos listos de inmediato.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection