@extends('frontend.main_master')

@section('title', 'About Us - ' . t('site-title'))
@section('meta_description', 'Learn more about Astro Wise: our mission, vision, and innovative AI-powered astrological platform with high-precision astronomical calculations.')

@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;">
                            <span class="about-pill-icon"><i class="bi bi-stars"></i></span>
                            <span class="about-pill-text">Astro Wise Astrology</span>
                        </div>
                        <h1 class="about-hero-title mb-3">
                            The Meeting of <span class="about-gradient-text">Ancient Wisdom</span> & Modern Technology
                        </h1>
                        <p class="about-hero-lead text-muted mb-4">
                            We combine high-precision astronomical mathematical calculations with advanced AI to deliver the most accurate, insightful, and accessible astrological guidance available today.
                        </p>
                        <div class="d-flex flex-wrap gap-3 justify-content-center justify-content-lg-start">
                            <a href="{{ route('birth-chart.index') }}" class="btn btn-astro-primary px-4 py-2">
                                <i class="bi bi-compass me-2"></i>Calculate Your Natal Chart
                            </a>
                            <a href="{{ route('index') }}" class="btn btn-outline-secondary px-4 py-2">
                                Learn More
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-6 text-center">
                        <img src="{{ asset('frontend/images/logo/logo.webp') }}" alt="Astro Wise" class="img-fluid about-hero-img" style="max-height: 380px;">
                    </div>
                </div>
            </div>
        </section>

        <section class="py-5 bg-light">
            <div class="container">
                <div class="text-center max-w-700 mx-auto mb-5">
                    <h2 class="fw-bold mb-3">Our Core Pillars</h2>
                    <p class="text-muted">Discover what makes Astro Wise the premier astrological analysis platform in the United States.</p>
                </div>
                <div class="row g-4">
                    <div class="col-md-4">
                        <div class="card h-100 p-4 border-0 shadow-sm rounded-4 text-center">
                            <div class="fs-1 text-primary mb-3"><i class="bi bi-bullseye"></i></div>
                            <h4 class="fw-bold mb-2">Astronomical Precision</h4>
                            <p class="text-muted">Calculations powered by high-precision astronomical algorithms, ensuring accurate planetary degrees, house cusps, and transits down to the second.</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card h-100 p-4 border-0 shadow-sm rounded-4 text-center">
                            <div class="fs-1 text-primary mb-3"><i class="bi bi-cpu"></i></div>
                            <h4 class="fw-bold mb-2">AI-Powered Insights</h4>
                            <p class="text-muted">Cutting-edge contextual AI assistant that synthesizes complex aspect grids and celestial configurations into clear, empowering guidance.</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card h-100 p-4 border-0 shadow-sm rounded-4 text-center">
                            <div class="fs-1 text-primary mb-3"><i class="bi bi-shield-check"></i></div>
                            <h4 class="fw-bold mb-2">Privacy & Security</h4>
                            <p class="text-muted">Your birth details and personal readings are encrypted and strictly protected. We never sell or compromise your private information.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection