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

<section class="hero" style="height: 40vh; background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('assets/images/about-hero.jpg') center/cover no-repeat;">
    <h1>About AfgCars</h1>
    <p>Afghanistan's Premier Marketplace for Luxury & Reliable Vehicles.</p>
</section>

<div class="container">
    <div class="grid" style="grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem;">
        <div class="glass" style="padding: 2.5rem;">
            <h2 style="color: var(--primary-color); margin-bottom: 1.5rem;">Our Mission</h2>
            <p style="margin-bottom: 1rem; color: var(--text-secondary);">
                Founded in 2026, AfgCars aims to revolutionize the automotive industry in Afghanistan by providing a safe, transparent, and efficient platform for buying and selling premium vehicles. 
            </p>
            <p style="color: var(--text-secondary);">
                We bridge the gap between high-end luxury and everyday reliability, ensuring that every citizen has access to the best automotive options with verified seller information and comprehensive vehicle details.
            </p>
        </div>
        <div>
            <img src="assets/images/about-team.jpg" alt="Team" style="width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
        </div>
    </div>
</div>

<div class="container">
    <h2 class="section-title">Our Physical Locations</h2>
    <div class="grid">
        <div class="glass" style="padding: 2rem; text-align: center;">
            <h3 style="color: var(--primary-color); margin-bottom: 1rem;">Kabul Main Showroom</h3>
            <p style="color: var(--text-secondary);">Wazir Akbar Khan, Street 15</p>
            <p style="color: var(--text-secondary);">Kabul, Afghanistan</p>
            <p style="color: var(--text-primary); margin-top: 1rem;">+93 700 123 456</p>
        </div>
        <div class="glass" style="padding: 2rem; text-align: center;">
            <h3 style="color: var(--primary-color); margin-bottom: 1rem;">Herat Branch</h3>
            <p style="color: var(--text-secondary);">Jada-e-Main, Near Blue Mosque</p>
            <p style="color: var(--text-secondary);">Herat, Afghanistan</p>
            <p style="color: var(--text-primary); margin-top: 1rem;">+93 700 987 654</p>
        </div>
        <div class="glass" style="padding: 2rem; text-align: center;">
            <h3 style="color: var(--primary-color); margin-bottom: 1rem;">Mazar-i-Sharif Office</h3>
            <p style="color: var(--text-secondary);">Balkh Gate Road</p>
            <p style="color: var(--text-secondary);">Mazar-i-Sharif, Afghanistan</p>
            <p style="color: var(--text-primary); margin-top: 1rem;">+93 700 456 789</p>
        </div>
    </div>
</div>

<div class="container" style="text-align: center; background: rgba(212, 175, 55, 0.05); padding: 5rem 5%;">
    <h2 style="margin-bottom: 2rem;">Why trust us?</h2>
    <div class="grid" style="grid-template-columns: repeat(4, 1fr);">
        <div>
            <h1 style="color: var(--primary-color);">500+</h1>
            <p style="color: var(--text-secondary);">Premium Cars Sold</p>
        </div>
        <div>
            <h1 style="color: var(--primary-color);">24/7</h1>
            <p style="color: var(--text-secondary);">Support Availability</p>
        </div>
        <div>
            <h1 style="color: var(--primary-color);">100%</h1>
            <p style="color: var(--text-secondary);">Verified Sellers</p>
        </div>
        <div>
            <h1 style="color: var(--primary-color);">5</h1>
            <p style="color: var(--text-secondary);">Major Cities</p>
        </div>
    </div>
</div>

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