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

declare(strict_types=1);

/** @var array<string, string> $meta */
?>
<div class="page-below-header md:pt-32">
<section class="section-spacing">
    <div class="container-shell max-w-4xl">
        <p class="muted-label"><?= e(__('about.label')) ?></p>
        <h1 class="cinematic-heading mt-4"><?= e(__('about.hero_title')) ?></h1>
        <p class="mt-8 text-lg leading-relaxed text-silver-300"><?= e(__('about.hero_intro')) ?></p>
    </div>
</section>

<section class="section-spacing border-t border-white/10">
    <div class="container-shell max-w-4xl">
        <p class="muted-label"><?= e(__('about.who_label')) ?></p>
        <p class="cinematic-heading mt-6 max-w-3xl text-white md:text-4xl"><?= e(__('about.who_lead')) ?></p>
    </div>
</section>

<section class="section-spacing bg-charcoal/30">
    <div class="container-shell grid gap-14 lg:grid-cols-2 lg:gap-16">
        <div>
            <h2 class="font-display text-2xl text-white md:text-3xl"><?= e(__('about.mission_heading')) ?></h2>
            <p class="mt-5 text-sm leading-relaxed text-silver-300 md:text-base"><?= e(__('about.mission_body')) ?></p>
        </div>
        <div>
            <h2 class="font-display text-2xl text-white md:text-3xl"><?= e(__('about.culture_heading')) ?></h2>
            <p class="mt-5 text-sm leading-relaxed text-silver-300 md:text-base"><?= e(__('about.culture_body')) ?></p>
        </div>
    </div>
</section>

<section class="section-spacing border-t border-white/10">
    <div class="container-shell">
        <p class="muted-label"><?= e(__('about.focus_label')) ?></p>
        <ul class="mt-8 flex flex-wrap gap-3">
            <?php
            foreach (['about.tag_seo', 'about.tag_motion', 'about.tag_uiux', 'about.tag_branding'] as $tagKey):
                ?>
            <li class="rounded-full border border-white/15 bg-white/[0.04] px-5 py-2.5 text-xs uppercase tracking-[0.2em] text-silver-300"><?= e(__($tagKey)) ?></li>
                <?php
            endforeach;
            ?>
        </ul>
    </div>
</section>

<section class="section-spacing bg-smoke-900/20">
    <div class="container-shell">
        <p class="muted-label"><?= e(__('about.testimonials_label')) ?></p>
        <div class="mt-10 grid gap-8 md:grid-cols-3">
            <?php
            foreach (['about.quote_1', 'about.quote_2', 'about.quote_3'] as $quoteKey):
                ?>
            <blockquote class="rounded-2xl border border-white/10 bg-carbon/40 p-8">
                <p class="text-sm leading-relaxed text-silver-200 md:text-base"><?= e(__($quoteKey)) ?></p>
            </blockquote>
            <?php
            endforeach;
            ?>
        </div>
    </div>
</section>

<section class="section-spacing">
    <?php \App\Core\View::component('cta-block', [
        'title' => __('about.cta_title'),
        'text' => __('about.cta_text'),
        'href' => url('/contact'),
        'label' => __('about.cta_button'),
    ]); ?>
</section>
</div>
