@extends('frontend.main_master')

@section('noindex', true)

@section('title', 'How It Works - Astro Wise')
@section('meta_description', 'How does the Astro Wise AI astrology engine and birth chart automation work?')

@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> Easy, Fast & Scientific
                        </div>
                        <h1 class="about-title fw-black mb-3">
                            Astro Wise
                            <span class="text-astro-teal">How It</span>
                            Works?
                        </h1>
                        <p class="about-subtitle mb-4">
                            Enter your birth information, and our AI-powered high-precision astronomical engine will generate your sky map and deep astrological insights in seconds.
                        </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">
                                Get Started
                            </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">Enter Your Birth Details</h5>
                                        <p class="text-muted small mb-0">Provide your birth date, exact time, and birth location.</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">AI Engine Synthesizes the Sky</h5>
                                        <p class="text-muted small mb-0">Planetary coordinates, aspects, and houses are calculated with high-precision astronomical accuracy.</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">Access Your Custom Report</h5>
                                        <p class="text-muted small mb-0">Your birth chart, synastry compatibility, and transit analysis are ready instantly.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection