<?php
declare(strict_types=1);

require_once __DIR__ . '/includes/config.php';

$pageTitle         = null;
$pageDescription   = SITE_DESCRIPTION;
$pageImage         = 'hero-home.jpg';
$pageImageFallback = IMG_HERO;
$pageType          = 'website';
$pageSlug          = '';

require __DIR__ . '/includes/header.php';
?>

<section class="hero" style="--hero-img:url('<?= e(img('hero-home.jpg', IMG_HERO)) ?>')">
    <div class="container hero-content">
        <div class="eyebrow light">Automotive Restoration · Harare</div>
        <h1>Bringing your<br>vehicle <span>back to life.</span></h1>
        <p class="hero-text">Professional panel beating, accident repairs, towing and vehicle restoration carried out with precision, care and attention to detail.</p>
        <div class="hero-actions">
            <a class="btn btn-blue" href="<?= e(url('contact.php#quote')) ?>">Request a Quote <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
            <a class="btn btn-outline-light" href="<?= e(url('services.php')) ?>">Explore Services</a>
        </div>
    </div>
    <div class="hero-bottom">
        <div class="container hero-info">
            <div class="hero-tagline">Quality workmanship · Safety · Customer care</div>
            <div class="hero-scroll"><span></span> Explore</div>
        </div>
    </div>
</section>

<section class="trust-strip">
    <div class="container trust-grid">
        <?php foreach ($siteData['trust_items'] as $item): ?>
            <div class="trust-item">
                <div class="trust-icon"><i class="fa-solid <?= e($item['icon']) ?>" aria-hidden="true"></i></div>
                <div>
                    <strong><?= e($item['title']) ?></strong>
                    <small><?= e($item['sub']) ?></small>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</section>

<section class="stats">
    <div class="container stats-grid">
        <?php foreach ($siteData['stats'] as $stat): ?>
            <div class="stat">
                <div class="stat-number"><?= e($stat['value']) ?><span><?= e($stat['suffix']) ?></span></div>
                <div class="stat-label"><?= e($stat['label']) ?></div>
            </div>
        <?php endforeach; ?>
    </div>
</section>

<section class="section about" id="about">
    <div class="container about-grid">
        <div class="about-photo">
            <img src="<?= e(img('about-photo.jpg', IMG_ABOUT)) ?>" alt="Vehicle repair at Appele Auto Services" width="1300" height="1600" loading="lazy" decoding="async">
            <div class="about-panel">
                <span>Appele Auto Services</span>
                <strong>Precision work. Proper restoration.</strong>
            </div>
        </div>
        <div class="about-content">
            <div class="eyebrow">Who We Are</div>
            <h2>More than a repair.<br><span>A proper restoration.</span></h2>
            <p>At Appele Panel Beating, we specialise in restoring vehicles after accidents and damage. Our facility combines modern equipment with trained technicians to deliver precise, carefully executed repairs.</p>
            <p>Whether the vehicle requires panel beating, structural work, recovery or additional automotive services, our team is focused on getting the job done properly.</p>

            <div class="check-list">
                <div class="check">
                    <i class="fa-solid fa-check" aria-hidden="true"></i>
                    <div>
                        <strong>Experienced technicians</strong>
                        <small>Skilled professionals focused on quality workmanship.</small>
                    </div>
                </div>
                <div class="check">
                    <i class="fa-solid fa-check" aria-hidden="true"></i>
                    <div>
                        <strong>Modern repair technology</strong>
                        <small>Equipment designed to support accurate restoration.</small>
                    </div>
                </div>
                <div class="check">
                    <i class="fa-solid fa-check" aria-hidden="true"></i>
                    <div>
                        <strong>Customer-focused service</strong>
                        <small>Straightforward communication throughout the repair.</small>
                    </div>
                </div>
            </div>

            <a class="btn btn-blue" href="<?= e(url('about.php')) ?>" style="margin-top:30px;">Read About Us <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
        </div>
    </div>
</section>

<section class="section services" id="services">
    <div class="container">
        <div class="section-head">
            <div>
                <div class="eyebrow">Our Services</div>
                <h2 class="section-title">Everything your<br>vehicle needs.</h2>
            </div>
            <p class="section-copy">From accident assessment through to restoration and recovery, Appele offers a range of services around the complete vehicle repair experience.</p>
        </div>

        <div class="service-grid">
            <?php foreach ($servicesData as $service): ?>
                <article class="service-card" id="<?= e($service['slug']) ?>">
                    <div class="service-top">
                        <span class="service-number"><?= e($service['num']) ?> / <?= e($service['tag']) ?></span>
                        <div class="service-icon"><i class="fa-solid <?= e($service['icon']) ?>" aria-hidden="true"></i></div>
                    </div>
                    <h3><?= e($service['title']) ?></h3>
                    <p><?= e($service['short']) ?></p>
                    <a href="<?= e(url('services.php#' . $service['slug'])) ?>" class="service-link">
                        Discuss this service <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="service-feature">
    <div class="service-feature-grid">
        <div class="service-feature-image" style="background-image:linear-gradient(90deg,rgba(7,24,47,.08),rgba(7,24,47,.55)), url('<?= e(img('service-feature.jpg', IMG_SERVICE_FEATURE)) ?>')"></div>
        <div class="service-feature-content">
            <div class="eyebrow light">Major Repairs</div>
            <h2>Serious damage<br>requires <span>serious precision.</span></h2>
            <p>For vehicles involved in major accidents, repair quality matters at every stage. Our structural repair service combines specialist equipment with trained technicians to work through demanding restoration requirements.</p>
            <div class="feature-points">
                <div class="feature-point">
                    <i class="fa-solid fa-crosshairs" aria-hidden="true"></i>
                    <strong>Precision</strong>
                    <small>Accurate repair processes</small>
                </div>
                <div class="feature-point">
                    <i class="fa-solid fa-user-gear" aria-hidden="true"></i>
                    <strong>Skilled Team</strong>
                    <small>Trained technicians</small>
                </div>
                <div class="feature-point">
                    <i class="fa-solid fa-shield-heart" aria-hidden="true"></i>
                    <strong>Safety</strong>
                    <small>Safety-conscious workmanship</small>
                </div>
                <div class="feature-point">
                    <i class="fa-solid fa-list-check" aria-hidden="true"></i>
                    <strong>Documentation</strong>
                    <small>Clear repair records</small>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section process" id="process">
    <div class="container">
        <div class="section-head">
            <div>
                <div class="eyebrow">Our Process</div>
                <h2 class="section-title">A clearer path<br>from damage to done.</h2>
            </div>
            <p class="section-copy">A straightforward approach helps keep the repair process organised, transparent and focused on the vehicle.</p>
        </div>

        <div class="process-grid">
            <?php foreach ($siteData['process'] as $step): ?>
                <div class="process-step">
                    <div class="process-number"><?= e($step['num']) ?></div>
                    <div class="process-line"></div>
                    <h3><?= e($step['title']) ?></h3>
                    <p><?= e($step['desc']) ?></p>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="section gallery" id="gallery">
    <div class="container">
        <div class="section-head">
            <div>
                <div class="eyebrow">Our Work</div>
                <h2 class="section-title">Built to look<br>right again.</h2>
            </div>
            <p class="section-copy">A visual showcase for repair work, workshop activity, completed vehicles and the people behind the process.</p>
        </div>

        <div class="gallery-grid">
            <?php
            $galleryItems = [
                ['gallery-1.jpg', IMG_GALLERY_1, 'Vehicle Restoration'],
                ['gallery-2.jpg', IMG_GALLERY_2, 'Workshop'],
                ['gallery-3.jpg', IMG_GALLERY_3, 'Tools & Prep'],
                ['gallery-4.jpg', IMG_GALLERY_4, 'Interior Work'],
                ['gallery-5.jpg', IMG_GALLERY_5, 'Completed Vehicle'],
            ];
            foreach ($galleryItems as $item): ?>
                <div class="gallery-item">
                    <img src="<?= e(img($item[0], $item[1])) ?>" alt="<?= e($item[2]) ?>" width="900" height="900" loading="lazy" decoding="async">
                    <div class="gallery-overlay"><span><?= e($item[2]) ?></span></div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="section testimonials">
    <div class="container">
        <div class="section-head">
            <div>
                <div class="eyebrow">Client Experiences</div>
                <h2 class="section-title">What our clients<br>say about us.</h2>
            </div>
            <p class="section-copy">Quality workmanship is important. So is the experience around it.</p>
        </div>

        <?php
        $featured = null; $side = [];
        foreach ($testimonialsData as $t) {
            if (!empty($t['featured']) && $featured === null) $featured = $t;
            else $side[] = $t;
        }
        if ($featured === null && !empty($testimonialsData)) $featured = array_shift($side);
        ?>
        <div class="testimonial-grid">
            <?php if ($featured): ?>
                <div class="testimonial-main">
                    <div>
                        <div class="quote-mark">“</div>
                        <blockquote><?= e($featured['text']) ?></blockquote>
                    </div>
                    <div class="client">
                        <div class="client-avatar"><?= e(strtoupper(substr($featured['name'], 0, 1))) ?></div>
                        <div>
                            <strong><?= e($featured['name']) ?></strong>
                            <small><?= e($featured['role']) ?></small>
                        </div>
                    </div>
                </div>
            <?php endif; ?>

            <div class="testimonial-side">
                <?php foreach (array_slice($side, 0, 3) as $t): ?>
                    <div class="testimonial-mini">
                        <div class="stars">★★★★★</div>
                        <p><?= e($t['text']) ?></p>
                        <strong><?= e($t['name']) ?></strong>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>

<?php
$faqs = array_slice($faqsData, 0, 5);
require __DIR__ . '/includes/components/faq.php';
?>

<?php require __DIR__ . '/includes/components/cta.php'; ?>
<?php require __DIR__ . '/includes/footer.php'; ?>
