<?php
require_once __DIR__ . '/includes/header.php';
?>

<section class="hero" style="height: 50vh; background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), url('assets/images/about-hero.jpg') center/cover no-repeat fixed;">
    <h1 class="fw-black" style="font-size: 5rem; letter-spacing: -3px; color: #fff;">Our Legacy</h1>
    <p class="text-secondary fw-bold" style="font-size: 1.3rem; max-width: 700px; margin-left: auto; margin-right: auto;">The definitive portal for elite automotive excellence in Afghanistan.</p>
</section>

<div class="container" style="padding: 10rem 0;">
    <div class="grid" style="grid-template-columns: 1fr 1fr; align-items: center; gap: 6rem;">
        <div class="glass" style="padding: 4rem; border-top: 5px solid var(--primary-color);">
            <h2 class="fw-black mb-2 text-gold" style="font-size: 2.5rem; text-transform: uppercase; letter-spacing: 2px;">Our Strategic Mission</h2>
            <p class="text-secondary mb-2 fw-bold" style="font-size: 1.2rem; line-height: 2;">
                Established in 2026, AfgCars has redefined the standards of the Afghan automotive industry. Our platform is engineered to deliver absolute transparency, unparalleled security, and an elite trading experience for the nation's most discerning car enthusiasts.
            </p>
            <p class="text-secondary fw-bold" style="font-size: 1.15rem; line-height: 2;">
                We bridge the critical gap between high-end global automotive luxury and the dynamic local Afghan market, ensuring every transaction is verified and every vehicle is an asset.
            </p>
        </div>
        <div style="position: relative;">
            <img src="assets/images/about-team.jpg" alt="Team" class="w-full" style="border-radius: 32px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); border: 1px solid var(--glass-border);">
            <div style="position: absolute; bottom: -30px; right: -30px; background: var(--primary-color); padding: 2.5rem; border-radius: 20px; color: #000; box-shadow: 0 20px 40px rgba(0,0,0,0.3);">
                <h3 class="fw-black" style="font-size: 1.5rem;">EST. 2026</h3>
                <p class="fw-bold text-sm">Founded in Kabul</p>
            </div>
        </div>
    </div>
</div>

<div class="container" style="padding: 8rem 0;">
    <h2 class="section-title justify-center mb-4" style="font-size: 3.5rem;">Our National Network</h2>
    <div class="grid grid-3 mt-3">
        <div class="glass text-center" style="padding: 4rem 2rem;">
            <h3 class="fw-black text-gold mb-1" style="font-size: 1.6rem; text-transform: uppercase;">Kabul Main Experience</h3>
            <p class="text-secondary fw-bold">Wazir Akbar Khan, District 10</p>
            <p class="text-secondary fw-bold">Kabul, Afghanistan</p>
            <p class="fw-black mt-2" style="font-size: 1.3rem; color: #fff;">+93 700 123 456</p>
        </div>
        <div class="glass text-center" style="padding: 4rem 2rem;">
            <h3 class="fw-black text-gold mb-1" style="font-size: 1.6rem; text-transform: uppercase;">Herat Elite Branch</h3>
            <p class="text-secondary fw-bold">Jada-e-Main, Near Blue Mosque</p>
            <p class="text-secondary fw-bold">Herat, Afghanistan</p>
            <p class="fw-black mt-2" style="font-size: 1.3rem; color: #fff;">+93 700 987 654</p>
        </div>
        <div class="glass text-center" style="padding: 4rem 2rem;">
            <h3 class="fw-black text-gold mb-1" style="font-size: 1.6rem; text-transform: uppercase;">Mazar-i-Sharif Luxury</h3>
            <p class="text-secondary fw-bold">Balkh Gate National Road</p>
            <p class="text-secondary fw-bold">Mazar-i-Sharif, Afghanistan</p>
            <p class="fw-black mt-2" style="font-size: 1.3rem; color: #fff;">+93 700 456 789</p>
        </div>
    </div>
</div>

<div class="container" style="text-align: center; background: rgba(30, 41, 59, 0.4); padding: 10rem 6%; border-radius: 48px; margin-bottom: 8rem;">
    <h2 class="fw-black mb-4" style="font-size: 3.5rem; color: #fff;">Unrivaled Standards</h2>
    <div class="grid grid-4 mt-3">
        <div>
            <h1 class="text-gold fw-black" style="font-size: 5rem; line-height: 1;">800+</h1>
            <p class="text-secondary fw-bold" style="font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px;">Premium Sales</p>
        </div>
        <div>
            <h1 class="text-gold fw-black" style="font-size: 5rem; line-height: 1;">24/7</h1>
            <p class="text-secondary fw-bold" style="font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px;">Concierge Access</p>
        </div>
        <div>
            <h1 class="text-gold fw-black" style="font-size: 5rem; line-height: 1;">100%</h1>
            <p class="text-secondary fw-bold" style="font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px;">Verified Listings</p>
        </div>
        <div>
            <h1 class="text-gold fw-black" style="font-size: 5rem; line-height: 1;">08+</h1>
            <p class="text-secondary fw-bold" style="font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px;">National Hubs</p>
        </div>
    </div>
</div>

<?php require_once __DIR__ . '/includes/footer.php'; ?>