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

declare(strict_types=1);

/** @var array<string, string> $meta */

$brand = \App\Models\SiteSetting::get('brand_name') ?: 'SANEKSA';
$tag = \App\Models\SiteSetting::get('tagline') ?: 'Creative digital experience studio';
?>
<section
    class="hero-resn home-intro-hero relative flex min-h-screen w-full max-w-none flex-col overflow-hidden bg-carbon selection:bg-white/10"
    data-section="hero"
    data-home-touch-root
    data-home-intro
    aria-label="Introduction"
>
    <?php /* Vignette → ambient lights → grain → diamond (WebGL) → touch-glow */ ?>
    <div class="pointer-events-none absolute inset-0 z-0 bg-gradient-to-b from-[#020308]/92 via-[#050a14]/78 to-[#010205]/95" aria-hidden="true"></div>
    <div
        class="hero__ambient-lights pointer-events-none absolute inset-0 z-0 overflow-hidden"
        data-home-ambient-lights
        aria-hidden="true"
    >
        <div class="hero__ambient-lights__streak hero__ambient-lights__streak--a"></div>
        <div class="hero__ambient-lights__streak hero__ambient-lights__streak--b"></div>
        <div class="hero__ambient-lights__streak hero__ambient-lights__streak--c"></div>
    </div>
    <div class="hero__grain pointer-events-none absolute inset-0 z-[1] opacity-[0.092] transition-opacity duration-200 mix-blend-overlay" style="background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E&quot;)" aria-hidden="true"></div>
    <?php \App\Core\View::component('home-diamond-canvas'); ?>
    <div class="hero__touch-glow pointer-events-none absolute inset-0 z-[3] transition-[background] duration-300 ease-out" aria-hidden="true"></div>

    <button
        type="button"
        class="home-intro-hit fixed inset-0 z-[18] cursor-pointer border-0 bg-transparent p-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/35"
        data-home-intro-hit
        disabled
        aria-hidden="true"
        aria-label="<?= e(__('home.click_enter_aria')) ?>"
        aria-describedby="home-intro-hint"
    ></button>

    <div id="touch-ripples" class="pointer-events-none absolute inset-0 z-[22] overflow-hidden" aria-hidden="true"></div>

    <div class="hero__touch-scan pointer-events-none absolute left-0 right-0 z-[23] h-px bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 transition-opacity duration-300" aria-hidden="true"></div>

    <div class="pointer-events-none relative z-[50] flex flex-1 flex-col items-center justify-center px-6 pb-24 pt-28 text-center [isolation:isolate] md:px-10 md:pb-28 md:pt-32">
        <div class="hero-resn__title-wrap hero-intro-title-wrap max-w-2xl">
            <p class="font-hero hero-intro-line hero-intro-line--1 text-xs font-extralight uppercase tracking-[0.35em] text-white/45 md:text-sm"><?= e($brand) ?></p>
            <h1 class="hero-intro-line hero-intro-line--2 mt-8 font-hero text-xl font-extralight leading-snug tracking-wide text-white md:mt-10 md:text-2xl lg:text-3xl">
                <?= e($tag) ?>
            </h1>
            <p class="font-hero hero-intro-line hero-intro-line--3 mt-8 text-xs font-extralight uppercase tracking-[0.3em] text-white/35 md:mt-10"><?= e(__('home.established')) ?></p>
        </div>
        <div class="home-intro-cue mt-4 flex -translate-y-10 flex-col items-center gap-2 md:mt-6 md:-translate-y-14 md:gap-2.5">
            <p id="home-intro-hint" class="home-intro-cue__label font-hero whitespace-nowrap"><?= e(__('home.press_continue')) ?></p>
            <span class="home-intro-cue__dot" aria-hidden="true"></span>
        </div>
    </div>
</section>

<div class="home-below-hero" data-home-below-hero></div>
