<?php
/// file: app/View/studio/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">Studio</p>
        <h1 class="cinematic-heading mt-4">We choreograph attention—then get out of the way.</h1>
        <p class="mt-8 text-lg text-silver-300">SANEKSA is a creative digital experience studio. We partner with brands that want interfaces to feel authored, cinematic, and quietly confident.</p>
    </div>
</section>

<section class="section-spacing border-t border-white/10">
    <div class="container-shell">
        <?php \App\Core\View::component('section-heading', ['label' => 'What we do', 'title' => 'Immersive sites, motion systems, and narrative platforms.', 'kicker' => null]); ?>
        <div class="grid gap-10 md:grid-cols-3">
            <div>
                <h3 class="font-display text-xl text-white">Experience design</h3>
                <p class="mt-3 text-sm text-silver-400">Scroll-native storytelling, spatial hierarchy, and interaction models that feel inevitable.</p>
            </div>
            <div>
                <h3 class="font-display text-xl text-white">Creative technology</h3>
                <p class="mt-3 text-sm text-silver-400">WebGL where it earns its cost, audio that respects consent, performance as a creative constraint.</p>
            </div>
            <div>
                <h3 class="font-display text-xl text-white">Launch craft</h3>
                <p class="mt-3 text-sm text-silver-400">Campaign mechanics, media systems, and the small details that separate premium from loud.</p>
            </div>
        </div>
    </div>
</section>

<section class="section-spacing bg-charcoal/30">
    <div class="container-shell grid gap-12 lg:grid-cols-2">
        <div>
            <p class="muted-label">How we think</p>
            <h2 class="cinematic-heading mt-4">Constraint is the frame. Taste is the lens.</h2>
        </div>
        <ul class="space-y-6 text-silver-300">
            <li><span class="text-white">Depth, not density.</span> Fewer elements, more intention.</li>
            <li><span class="text-white">Silence is UI.</span> Pauses carry meaning; sound earns its entrance.</li>
            <li><span class="text-white">Systems over spikes.</span> We design for sequels, seasons, and second visits.</li>
        </ul>
    </div>
</section>

<section class="section-spacing">
    <div class="container-shell">
        <p class="muted-label">Approach</p>
        <div class="mt-8 grid gap-8 md:grid-cols-4">
            <div class="border-t border-white/15 pt-6">
                <span class="font-display text-3xl text-electric-300">01</span>
                <p class="mt-4 text-sm text-silver-400">Immersion brief — goals, audience tension, launch context.</p>
            </div>
            <div class="border-t border-white/15 pt-6">
                <span class="font-display text-3xl text-electric-300">02</span>
                <p class="mt-4 text-sm text-silver-400">Narrative architecture — chapters, beats, motion hierarchy.</p>
            </div>
            <div class="border-t border-white/15 pt-6">
                <span class="font-display text-3xl text-electric-300">03</span>
                <p class="mt-4 text-sm text-silver-400">Prototype truth — browser-native, measurable, honest.</p>
            </div>
            <div class="border-t border-white/15 pt-6">
                <span class="font-display text-3xl text-electric-300">04</span>
                <p class="mt-4 text-sm text-silver-400">Launch polish — performance, accessibility, audio etiquette.</p>
            </div>
        </div>
    </div>
</section>

<section class="section-spacing border-t border-white/10">
    <div class="container-shell">
        <p class="muted-label">Capabilities</p>
        <p class="mt-6 max-w-3xl font-display text-2xl text-white md:text-3xl">Immersive web · Motion systems · Brand platforms · Campaign experiences · Narrative systems · Creative direction · Sound design partnership</p>
    </div>
</section>

<section class="section-spacing bg-smoke-900/20">
    <div class="container-shell grid gap-10 lg:grid-cols-2">
        <div>
            <p class="muted-label">Team</p>
            <h2 class="cinematic-heading mt-4">Small by choice. Senior by default.</h2>
        </div>
        <p class="text-silver-300">Core collaborators span art direction, motion, engineering, and production. We extend with trusted partners for capture, 3D, and localization—always under one creative spine.</p>
    </div>
</section>

<section class="section-spacing">
    <div class="container-shell">
        <p class="muted-label">Partners</p>
        <p class="mt-6 text-silver-400">Recent collaborators include hospitality groups, automotive studios, fashion houses, music labels, and product teams shipping narrative-heavy launches.</p>
    </div>
</section>

<section class="section-spacing border-t border-white/10">
    <div class="container-shell">
        <p class="muted-label">Values</p>
        <div class="mt-8 grid gap-6 md:grid-cols-3">
            <div class="rounded-2xl border border-white/10 p-6">
                <h3 class="text-white">Precision</h3>
                <p class="mt-2 text-sm text-silver-400">We edit until the interface feels obvious.</p>
            </div>
            <div class="rounded-2xl border border-white/10 p-6">
                <h3 class="text-white">Care</h3>
                <p class="mt-2 text-sm text-silver-400">Accessibility and performance are part of the aesthetic.</p>
            </div>
            <div class="rounded-2xl border border-white/10 p-6">
                <h3 class="text-white">Longevity</h3>
                <p class="mt-2 text-sm text-silver-400">We build systems that survive the next season.</p>
            </div>
        </div>
    </div>
</section>

<section class="section-spacing">
    <?php \App\Core\View::component('cta-block', ['title' => 'Ready when you are.', 'text' => 'Share the launch, the tension, and the standard you want to set.', 'href' => url('/contact'), 'label' => 'Contact']); ?>
</section>
</div>
