<?php
/** Shared layout for each independent service page. */
$activePage = 'services';
require __DIR__ . '/header.php';
?>
<main id="main-content">
    <section class="service-hero">
        <img src="<?= htmlspecialchars($serviceImage, ENT_QUOTES, 'UTF-8'); ?>" alt="<?= htmlspecialchars($serviceImageAlt, ENT_QUOTES, 'UTF-8'); ?>">
        <div class="service-hero-overlay"></div>
        <div class="container service-hero-content">
            <p class="eyebrow eyebrow-light">PROLAD service</p>
            <h1><?= htmlspecialchars($serviceName, ENT_QUOTES, 'UTF-8'); ?></h1>
            <p><?= htmlspecialchars($serviceIntro, ENT_QUOTES, 'UTF-8'); ?></p>
            <a class="button" href="contact">Discuss your needs →</a>
        </div>
    </section>

    <section class="section service-detail-section">
        <div class="container service-detail-grid">
            <div>
                <p class="eyebrow">What we deliver</p>
                <h2><?= htmlspecialchars($serviceHeading, ENT_QUOTES, 'UTF-8'); ?></h2>
                <p class="service-detail-copy"><?= htmlspecialchars($serviceDescription, ENT_QUOTES, 'UTF-8'); ?></p>
            </div>
            <ul class="deliverables">
                <?php foreach ($serviceItems as $index => $item): ?>
                    <li><span><?= str_pad((string)($index + 1), 2, '0', STR_PAD_LEFT); ?></span><?= htmlspecialchars($item, ENT_QUOTES, 'UTF-8'); ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
    </section>

    <section class="section service-benefits-section">
        <div class="container">
            <div class="section-heading split-heading">
                <div><p class="eyebrow">Why PROLAD</p><h2>Professional delivery without the guesswork.</h2></div>
                <p>Our architects, engineers and property professionals work as one coordinated team, giving you clearer decisions and more accountable delivery.</p>
            </div>
            <div class="benefit-grid">
                <article><span>01</span><h3>Clear consultation</h3><p>We define your goals, priorities, budget and practical constraints before work begins.</p></article>
                <article><span>02</span><h3>Technical expertise</h3><p>Your project is guided by relevant professional knowledge, careful planning and sound standards.</p></article>
                <article><span>03</span><h3>Transparent execution</h3><p>You receive understandable updates, defined responsibilities and a visible route to completion.</p></article>
            </div>
        </div>
    </section>

    <section class="section service-process-section">
        <div class="container service-process-layout">
            <div><p class="eyebrow eyebrow-light">Our approach</p><h2>A dependable process from enquiry to delivery.</h2></div>
            <ol>
                <li><span>01</span><div><h3>Consultation</h3><p>We understand the requirement and assess the right starting point.</p></div></li>
                <li><span>02</span><div><h3>Scope &amp; proposal</h3><p>We outline deliverables, responsibilities, cost considerations and timing.</p></div></li>
                <li><span>03</span><div><h3>Professional delivery</h3><p>Our team executes the agreed work with disciplined coordination.</p></div></li>
                <li><span>04</span><div><h3>Review &amp; handover</h3><p>We review outcomes with you and close out the engagement properly.</p></div></li>
            </ol>
        </div>
    </section>

    <section class="section service-faq-section">
        <div class="container service-faq-layout">
            <div><p class="eyebrow">Common questions</p><h2>Useful answers before you begin.</h2></div>
            <div class="faq-list">
                <?php foreach (($serviceFaqs ?? []) as $faq): ?>
                    <details><summary><?= htmlspecialchars($faq[0], ENT_QUOTES, 'UTF-8'); ?><span>+</span></summary><p><?= htmlspecialchars($faq[1], ENT_QUOTES, 'UTF-8'); ?></p></details>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <section class="service-cta">
        <div class="container service-cta-inner">
            <div><p class="eyebrow eyebrow-light">Ready when you are</p><h2>Let’s create a clear path forward.</h2></div>
            <a class="button" href="tel:+2348145010155">Call 0814 501 0155</a>
        </div>
    </section>
</main>
<?php require __DIR__ . '/footer.php'; ?>
