@extends('frontend.main_master')

@section('noindex', true)

@section('title', 'Nasıl Çalışır - Astro Bilge')
@section('meta_description', 'Astro Bilge astroloji yapay zekası ve doğum haritası otomasyonu nasıl çalışır?')

@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> Kolay, Hızlı ve Bilimsel
                        </div>
                        <h1 class="about-title fw-black mb-3">
                            Astro Bilge
                            <span class="text-astro-teal">Nasıl</span>
                            Çalışır?
                        </h1>
                        <p class="about-subtitle mb-4">
                            Doğum bilgilerinizi girin, yapay zeka destekli yüksek hassasiyetli astroloji motorumuz saniyeler içinde gökyüzü haritanızı ve derin astrolojik analizlerinizi oluştursun.
                        </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">
                                Hemen Başla
                            </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">Doğum Bilgilerinizi Girin</h5>
                                        <p class="text-muted small mb-0">Doğum tarihi, saati ve yerinizi sisteme tanımlayın.</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">Yapay Zeka Analiz Etsin</h5>
                                        <p class="text-muted small mb-0">Gezegen konumları, açılar, evler ve transitler milisaniyeler içinde hesaplansın.</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">Kişisel Raporunuza Ulaşın</h5>
                                        <p class="text-muted small mb-0">Doğum haritanız, sinastri uyumunuz ve döngü analizleriniz anında hazır.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection