<?php
/// file: app/View/services/index.php

declare(strict_types=1);

/** @var list<array<string, mixed>> $services */
?>
<div class="page-below-header md:pt-32">
<section class="section-spacing">
    <div class="container-shell max-w-4xl">
        <p class="muted-label">Services</p>
        <h1 class="cinematic-heading mt-4">What we deliver—with clarity, sequence, and restraint.</h1>
    </div>
</section>

<section class="section-spacing">
    <div class="container-shell grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)]">
        <nav class="service-nav hidden lg:block lg:sticky lg:top-32" aria-label="Services">
            <?php foreach ($services as $i => $s): ?>
                <a class="service-nav__link block border-l-2 border-transparent py-3 pl-4 text-sm text-silver-400 hover:text-white data-[active=true]:border-electric-400 data-[active=true]:text-white" href="#svc-<?= (int) $s['id'] ?>"><?= e((string) $s['title']) ?></a>
            <?php endforeach; ?>
        </nav>
        <div class="space-y-16">
            <?php foreach ($services as $s): ?>
                <article id="svc-<?= (int) $s['id'] ?>" class="service-block scroll-mt-32 rounded-3xl border border-white/10 bg-charcoal/30 p-8 md:p-12">
                    <h2 class="font-display text-3xl text-white"><?= e((string) $s['title']) ?></h2>
                    <p class="mt-4 text-silver-300"><?= e((string) $s['short_description']) ?></p>
                    <div class="mt-8 grid gap-8 md:grid-cols-2">
                        <div>
                            <p class="muted-label">Detail</p>
                            <p class="mt-3 text-sm text-silver-400"><?= nl2br(e((string) $s['detail'])) ?></p>
                        </div>
                        <div>
                            <p class="muted-label">Process</p>
                            <p class="mt-3 text-sm text-silver-400"><?= nl2br(e((string) $s['process'])) ?></p>
                        </div>
                        <div>
                            <p class="muted-label">Outputs</p>
                            <p class="mt-3 text-sm text-silver-400"><?= nl2br(e((string) $s['deliverables'])) ?></p>
                        </div>
                        <div>
                            <p class="muted-label">Ideal partner</p>
                            <p class="mt-3 text-sm text-silver-400"><?= nl2br(e((string) $s['ideal_client'])) ?></p>
                        </div>
                    </div>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="section-spacing">
    <?php \App\Core\View::component('cta-block', ['title' => 'Scope your next chapter.', 'text' => 'We will respond with a clear read on fit, timeline, and narrative approach.', 'href' => url('/contact'), 'label' => 'Contact']); ?>
</section>
</div>
