<?php
declare(strict_types=1);
require_once __DIR__ . '/includes/header.php';
?>

<section class="container" style="padding-top: 6rem;">
    <div class="section-title">
        <div>
            <h1>How AFG_CARS Works</h1>
            <p>A transparent, step-by-step guide to luxury vehicle ownership.</p>
        </div>
    </div>

    <div class="section-grid" style="margin-top: 4rem;">
        <div style="background: var(--surface-color); padding: 4rem; border-radius: var(--border-radius); border: 1px solid var(--border-color);">
            <h2 style="color: var(--accent-color); margin-bottom: 3rem; font-size: 2rem;">The Buying Process</h2>
            <div style="display: flex; flex-direction: column; gap: 3rem;">
                <div style="display: flex; gap: 2rem;">
                    <div style="width: 50px; height: 50px; background: var(--accent-color); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">1</div>
                    <div>
                        <h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Online Exploration</h4>
                        <p style="color: var(--text-secondary);">Browse our live inventory with detailed specifications, history reports, and high-resolution images.</p>
                    </div>
                </div>
                <div style="display: flex; gap: 2rem;">
                    <div style="width: 50px; height: 50px; background: var(--accent-color); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">2</div>
                    <div>
                        <h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Showroom Consultation</h4>
                        <p style="color: var(--text-secondary);">Visit our branch to experience the vehicle in person. Our specialists provide a full technical walk-through.</p>
                    </div>
                </div>
                <div style="display: flex; gap: 2rem;">
                    <div style="width: 50px; height: 50px; background: var(--accent-color); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">3</div>
                    <div>
                        <h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Ownership & Handover</h4>
                        <p style="color: var(--text-secondary);">Finalize payment or installment documents. We handle all registration and deliver your car in pristine condition.</p>
                    </div>
                </div>
            </div>
        </div>

        <div style="background: var(--surface-color); padding: 4rem; border-radius: var(--border-radius); border: 1px solid rgba(255,255,255,0.05);">
            <h2 style="color: var(--accent-color); margin-bottom: 3rem; font-size: 2rem;">The Selling Process</h2>
            <div style="display: flex; flex-direction: column; gap: 3rem;">
                <div style="display: flex; gap: 2rem;">
                    <div style="width: 50px; height: 50px; background: #fff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">A</div>
                    <div>
                        <h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Expert Evaluation</h4>
                        <p style="color: var(--text-secondary);">Submit your car details. Our team performs a comprehensive market and technical analysis to determine value.</p>
                    </div>
                </div>
                <div style="display: flex; gap: 2rem;">
                    <div style="width: 50px; height: 50px; background: #fff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">B</div>
                    <div>
                        <h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Guaranteed Offer</h4>
                        <p style="color: var(--text-secondary);">Receive a competitive buy-back or trade-in offer within 24 hours of inspection. No hidden fees.</p>
                    </div>
                </div>
                <div style="display: flex; gap: 2rem;">
                    <div style="width: 50px; height: 50px; background: #fff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">C</div>
                    <div>
                        <h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Secure Transfer</h4>
                        <p style="color: var(--text-secondary);">We handle all the legal paperwork and title transfers. Payment is released immediately upon agreement.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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