@extends('layouts.app')

@section('title', ($profile?->nama ?? 'Portfolio') . ' — Chess Monochrome Portfolio')

@php
    $profileName = $profile?->nama ?? 'Adi Yaksa Aufa Alfadil';
    $nameWords = preg_split('/\s+/', trim($profileName)) ?: [$profileName];
    $firstNameLine = count($nameWords) > 2 ? implode(' ', array_slice($nameWords, 0, 2)) : $profileName;
    $secondNameLine = count($nameWords) > 2 ? implode(' ', array_slice($nameWords, 2)) : '';

    $resolveImage = static function (?string $path): ?string {
        if (blank($path)) {
            return null;
        }
        if (\Illuminate\Support\Str::startsWith($path, ['http://', 'https://', '/'])) {
            return $path;
        }
        $trimmed = ltrim($path, '/');
        if (is_file(public_path($trimmed)) && filesize(public_path($trimmed)) > 0) {
            return asset($trimmed);
        }
        $inImages = public_path('images/' . $trimmed);
        if (is_file($inImages) && filesize($inImages) > 0) {
            return asset('images/' . $trimmed);
        }
        return null;
    };

    $profilePhotoUrl = $resolveImage($profile?->foto_profil) ?? $resolveImage('images/profile.png');
    $hasExternalCv = filled($profile?->cv_link) && $profile?->cv_link !== '#';
    $primaryInstitution = $educations->first()?->nama_institusi ?? '';
    $certificatesAndAwards = $certificateItems->concat($awardItems)->values();
@endphp

@section('content')
    <!-- =========================================================
         STICKY MONOCHROME NAVBAR
         ========================================================= -->
    <header class="sticky top-0 z-40 bg-white/90 backdrop-blur-md border-b border-zinc-200">
        <div class="max-w-7xl mx-auto px-5 sm:px-8 h-16 flex items-center justify-between gap-4">
            <div class="flex items-center gap-4">
                <a href="#home" class="inline-flex items-center gap-2.5 group">
                    <span class="w-8 h-8 bg-zinc-950 text-white flex items-center justify-center transition-transform duration-300 group-hover:rotate-6 group-hover:-translate-y-0.5">
                        <x-chess-piece piece="king" class="w-4 h-4" />
                    </span>
                    <span class="font-display font-bold text-lg tracking-tight uppercase text-zinc-950">
                        {{ $profile?->monogram ?? 'AYA' }}
                    </span>
                </a>
                <span id="nav-phase-hud" class="hidden sm:inline-flex items-center gap-1.5 px-2.5 py-1 border border-zinc-200 bg-zinc-50 font-mono text-[10px] uppercase tracking-[0.18em] text-zinc-500">
                    <span class="w-1.5 h-1.5 rounded-full bg-zinc-950 animate-pulse"></span>
                    <span id="nav-phase-label">OPENING</span>
                </span>
            </div>

            <nav id="primary-nav" aria-label="Primary Navigation" class="hidden md:flex relative items-center gap-7 font-mono text-[11px] font-medium uppercase tracking-[0.2em] text-zinc-500 py-1">
                <a href="#home" data-nav-section="home" class="nav-link text-zinc-950 font-bold hover:text-zinc-950 transition">About</a>
                <a href="#journey" data-nav-section="journey" class="nav-link hover:text-zinc-950 transition">Journey</a>
                <a href="#work" data-nav-section="work" class="nav-link hover:text-zinc-950 transition">Work</a>
                <a href="#certificates" data-nav-section="certificates" class="nav-link hover:text-zinc-950 transition">Certificates</a>
                <a href="#contact" data-nav-section="contact" class="nav-link hover:text-zinc-950 transition">Contact</a>
                <span id="nav-active-bar" class="pointer-events-none absolute -bottom-1 left-0 h-[2px] bg-zinc-950 transition-all duration-300 ease-out" style="width: 40px; transform: translateX(0px);"></span>
            </nav>

            <div class="flex items-center gap-2 sm:gap-3">
                <a
                    href="#contact"
                    data-magnetic
                    class="inline-flex items-center gap-2 px-4 py-2 border border-zinc-950 font-mono text-[11px] font-bold uppercase tracking-[0.18em] text-zinc-950 hover:bg-zinc-950 hover:text-white transition"
                >
                    <span>[ HIRE ME</span>
                    <i class="fas fa-arrow-right text-[10px]"></i>
                    <span>]</span>
                </a>
                <a
                    href="{{ auth()->check() ? route('admin.dashboard') : route('login') }}"
                    id="stealth-login-btn"
                    data-stealth-login
                    aria-label="Admin Login"
                    title="{{ auth()->check() ? 'Admin Panel' : 'H8' }}"
                    class="w-7 h-7 flex items-center justify-center font-mono text-[10px] tracking-widest text-zinc-400/20 hover:text-zinc-950/75 transition-all duration-300 select-none"
                >
                    <span aria-hidden="true">H8</span>
                </a>
                <button
                    type="button"
                    id="mobile-menu-btn"
                    aria-label="Toggle Menu"
                    class="md:hidden w-9 h-9 border border-zinc-300 flex items-center justify-center text-zinc-950"
                >
                    <i class="fas fa-bars text-sm"></i>
                </button>
            </div>
        </div>

        <!-- Mobile Menu Drawer -->
        <div id="mobile-menu" class="hidden md:hidden border-t border-zinc-200 bg-white px-5 py-4 space-y-2 font-mono text-xs uppercase tracking-[0.2em]">
            <a href="#home" class="block py-2 text-zinc-700 hover:text-zinc-950">About</a>
            <a href="#journey" class="block py-2 text-zinc-700 hover:text-zinc-950">Journey &amp; Board</a>
            <a href="#work" class="block py-2 text-zinc-700 hover:text-zinc-950">Selected Work</a>
            <a href="#certificates" class="block py-2 text-zinc-700 hover:text-zinc-950">Certificates</a>
            <a href="#contact" class="block py-2 text-zinc-700 hover:text-zinc-950">Contact &amp; Guestbook</a>
        </div>
    </header>

    <!-- =========================================================
         SECTION 1: HERO (PURE WHITE & CHESS GEOMETRY)
         ========================================================= -->
    <section id="home" class="board-grid-light relative overflow-hidden pt-10 pb-12 lg:py-0 lg:min-h-[calc(100vh-4rem)] flex items-center">
        <!-- Faint Interactive Chessboard Coordinate Reticle & Corner Checkers Backdrop -->
        <div id="hero-reticle" class="pointer-events-none absolute inset-0 flex items-center justify-center overflow-hidden transition-transform duration-300 ease-out" aria-hidden="true">
            <svg viewBox="0 0 800 800" class="w-[620px] sm:w-[780px] h-[620px] sm:h-[780px] text-zinc-950/[0.07]">
                <circle cx="400" cy="400" r="350" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="6 8" class="animate-spin-slow origin-center" style="transform-box: fill-box;"/>
                <circle cx="400" cy="400" r="265" fill="none" stroke="currentColor" stroke-width="1" stroke-dasharray="14 10" class="animate-spin-slow-reverse origin-center" style="transform-box: fill-box;"/>
                <circle cx="400" cy="400" r="175" fill="none" stroke="currentColor" stroke-width="1"/>
                <line x1="30" y1="400" x2="770" y2="400" stroke="currentColor" stroke-width="1"/>
                <line x1="400" y1="30" x2="400" y2="770" stroke="currentColor" stroke-width="1"/>
                <rect x="190" y="190" width="420" height="420" fill="none" stroke="currentColor" stroke-width="0.9" stroke-dasharray="3 6"/>
                <!-- Animated Chess Knight & Gambit Vector Paths -->
                <path d="M165 615 L165 445 L285 445 L285 265 L400 265" fill="none" stroke="currentColor" stroke-width="2.2" stroke-dasharray="10 8" class="animate-dash-flow"/>
                <path d="M635 615 L635 445 L515 445 L515 265 L400 265" fill="none" stroke="currentColor" stroke-width="2.2" stroke-dasharray="10 8" class="animate-dash-flow"/>
            </svg>
        </div>

        <!-- Architectural Corner Checkered Accents on White Hero -->
        <div class="pointer-events-none absolute top-4 left-4 hidden sm:grid grid-cols-3 w-12 h-12 opacity-20" aria-hidden="true">
            <span class="bg-zinc-950"></span><span></span><span class="bg-zinc-950"></span>
            <span></span><span class="bg-zinc-950"></span><span></span>
            <span class="bg-zinc-950"></span><span></span><span class="bg-zinc-950"></span>
        </div>
        <div class="pointer-events-none absolute bottom-4 right-4 hidden sm:grid grid-cols-3 w-12 h-12 opacity-20" aria-hidden="true">
            <span class="bg-zinc-950"></span><span></span><span class="bg-zinc-950"></span>
            <span></span><span class="bg-zinc-950"></span><span></span>
            <span class="bg-zinc-950"></span><span></span><span class="bg-zinc-950"></span>
        </div>
        <div class="pointer-events-none absolute -left-16 bottom-6 hidden xl:block opacity-[0.06]" aria-hidden="true">
            <x-chess-ornament variant="knight-wireframe" class="w-64 h-72 text-zinc-950" />
        </div>

        <div class="max-w-7xl mx-auto px-5 sm:px-8 w-full relative z-10">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-6 items-center">

                <!-- Left Column: Player Identity & CV CTA -->
                @php
                    $rawPlayerCode = (string) ($profile?->player_code ?? 'PLAYER_001');
                    $rawPosition = (string) ($profile?->posisi ?? '');
                    $rawSemester = (string) ($profile?->semester_label ?? '');

                    $heroPlayerCode = (filled($rawPosition) && str_contains(strtoupper($rawPosition), 'WEB') && str_contains(strtoupper($rawPlayerCode), 'WEB'))
                        ? trim(\Illuminate\Support\Str::before($rawPlayerCode, '//'))
                        : $rawPlayerCode;

                    $heroPosition = $rawPosition;
                    if (filled($rawSemester) && str_contains(strtoupper($rawSemester), 'SEMESTER') && preg_match('/\b(\d+(?:st|nd|rd|th)|first|second|third|fourth|fifth|sixth|seventh|eighth)\s+semester\b/i', $heroPosition)) {
                        $heroPosition = trim(preg_replace('/\b(\d+(?:st|nd|rd|th)|first|second|third|fourth|fifth|sixth|seventh|eighth)\s+semester\b\s*[\/|•-]?\s*/i', '', $heroPosition));
                    }
                @endphp
                <div class="lg:col-span-4 order-2 lg:order-1 text-center lg:text-left hero-stagger hero-stagger-1">
                    <div class="inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.22em] text-zinc-500 mb-3">
                        <span class="w-2 h-2 bg-zinc-950 inline-block"></span>
                        <span>{{ $heroPlayerCode }}</span>
                    </div>

                    <h1 class="font-display font-bold uppercase tracking-tight leading-[0.88] text-5xl sm:text-6xl xl:text-[4.5rem] text-zinc-950">
                        {{ $firstNameLine }}
                        @if ($secondNameLine)
                            <br>{{ $secondNameLine }}
                        @endif
                    </h1>

                    <div class="mt-6 space-y-2 font-mono text-xs uppercase tracking-[0.14em] text-zinc-700 max-w-sm mx-auto lg:mx-0">
                        <p class="flex items-center justify-center lg:justify-start gap-2.5">
                            <span class="px-1.5 py-0.5 bg-zinc-950 text-white text-[10px] font-bold">ID</span>
                            <span>{{ $profile?->lokasi }}</span>
                        </p>
                        @if (filled($heroPosition))
                            <p class="flex items-center justify-center lg:justify-start gap-2">
                                <span class="text-zinc-400">&gt;</span>
                                <span>{{ $heroPosition }}</span>
                            </p>
                        @endif
                        @if (filled($profile?->fokus_utama))
                            <p class="flex items-center justify-center lg:justify-start gap-2">
                                <span class="text-zinc-400">&gt;</span>
                                <span>{{ $profile->fokus_utama }}</span>
                            </p>
                        @endif
                    </div>

                    <div class="mt-9 flex flex-wrap items-center justify-center lg:justify-start gap-4">
                        @if ($hasExternalCv)
                            <a
                                href="{{ $profile->cv_link }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                data-magnetic
                                class="inline-flex items-center gap-3 px-6 py-3.5 bg-zinc-950 hover:bg-zinc-800 text-white font-mono text-xs font-bold uppercase tracking-[0.18em] transition shadow-lg shadow-zinc-950/10"
                            >
                                <span>Download CV</span>
                                <i class="fas fa-arrow-right text-[11px]"></i>
                            </a>
                        @else
                            <button
                                type="button"
                                data-open-cv
                                data-magnetic
                                class="inline-flex items-center gap-3 px-6 py-3.5 bg-zinc-950 hover:bg-zinc-800 text-white font-mono text-xs font-bold uppercase tracking-[0.18em] transition shadow-lg shadow-zinc-950/10"
                            >
                                <span>View / Print CV</span>
                                <i class="fas fa-arrow-right text-[11px]"></i>
                            </button>
                        @endif
                    </div>
                </div>

                <!-- Center Column: Spatial 3D Chess Diorama + Cutout Portrait + Themeable King & Knights -->
                <div class="lg:col-span-4 order-1 lg:order-2 flex flex-col items-center relative hero-stagger hero-stagger-2 hero-3d-stage">
                    <div id="hero-portrait-wrap" class="group relative w-80 sm:w-96 lg:w-full max-w-[420px] aspect-[4/5] flex items-end justify-center overflow-visible select-none" style="transform-style: preserve-3d;">
                        <!-- Interactive 3D Diorama Container (Drags / Tilts smoothly in 3D space) -->
                        <div id="hero-3d-diorama" class="relative w-full h-full flex items-end justify-center overflow-visible">
                            <!-- Ambient Dark Halo (activates when White or Split pieces are selected for crisp contrast) -->
                            <div id="hero-piece-aura" class="pointer-events-none absolute inset-x-4 top-6 bottom-12 rounded-full blur-2xl opacity-0 transition-opacity duration-500 z-0" style="background: radial-gradient(circle, rgba(9,9,11,0.22) 0%, rgba(9,9,11,0.08) 48%, transparent 74%); transform: translateZ(-55px);" aria-hidden="true"></div>

                            <!-- Deep Back Z-Layer (-70px): Architectural Chess Coordinate Ring -->
                            <div class="hero-layer-reticle pointer-events-none absolute inset-0 flex items-center justify-center z-[1]" aria-hidden="true">
                                <div class="w-72 h-72 sm:w-80 sm:h-80 rounded-full border border-dashed border-zinc-950/15 animate-spin-slow flex items-center justify-center">
                                    <div class="w-56 h-56 sm:w-64 sm:h-64 rounded-full border border-zinc-950/10"></div>
                                </div>
                            </div>

                            <!-- Mid Z-Layer (-28px): 3D-Shaded King & Dual Knights -->
                            <div class="hero-layer-pieces pointer-events-none absolute inset-0 flex items-center justify-center z-[2]" aria-hidden="true">
                                <!-- Center Towering King -->
                                <div id="hero-king-ornament" class="piece-tone-black absolute top-1 sm:top-0 left-1/2 -translate-x-1/2 transition-all duration-500 ease-out group-hover:-translate-y-2">
                                    <x-chess-ornament variant="king" uid="hero_king" class="animate-royal-float w-56 h-72 sm:w-64 sm:h-80 text-zinc-950 opacity-95 drop-shadow-[0_24px_32px_rgba(0,0,0,0.28)]" />
                                </div>
                                <!-- Left Flanking Knight -->
                                <div id="hero-knight-left" class="piece-tone-black absolute bottom-10 -left-3 sm:-left-6 transition-all duration-500 ease-out -rotate-12 group-hover:-translate-x-3 group-hover:-rotate-[16deg]">
                                    <x-chess-ornament variant="knight" uid="hero_kl" class="animate-knight-sway w-40 h-48 sm:w-48 sm:h-56 text-zinc-950 opacity-95 drop-shadow-[0_18px_28px_rgba(0,0,0,0.32)]" />
                                </div>
                                <!-- Right Flanking Mirrored Knight -->
                                <div id="hero-knight-right" class="piece-tone-black absolute bottom-10 -right-3 sm:-right-6 transition-all duration-500 ease-out rotate-12 group-hover:translate-x-3 group-hover:rotate-[16deg]">
                                    <div class="-scale-x-100">
                                        <x-chess-ornament variant="knight" uid="hero_kr" class="animate-knight-sway w-40 h-48 sm:w-48 sm:h-56 text-zinc-950 opacity-95 drop-shadow-[0_18px_28px_rgba(0,0,0,0.32)]" />
                                    </div>
                                </div>
                            </div>

                            <!-- 3D Extruded Monochrome Chessboard Pedestal (+10px Z) -->
                            <div class="hero-layer-pedestal pointer-events-none absolute inset-x-4 -bottom-1 h-28 z-[4] flex flex-col items-center justify-end" aria-hidden="true">
                                <div class="hero-3d-pedestal-top w-full h-24 border-2 border-zinc-950 opacity-90"></div>
                                <div class="w-[92%] h-2.5 bg-zinc-950 border-x border-b border-zinc-700 shadow-xl"></div>
                            </div>

                            <!-- Foreground Cutout Portrait Plane (+62px Z) with Studio Rim Sheen -->
                            <div class="hero-layer-portrait relative z-10 w-[86%] h-[92%] flex items-end justify-center pointer-events-none">
                                <!-- Soft 3D Contact Shadow Anchored Beneath Portrait -->
                                <div class="pointer-events-none absolute bottom-3 w-44 h-6 rounded-full bg-zinc-950/35 blur-md" style="transform: translateZ(-22px) rotateX(75deg);" aria-hidden="true"></div>

                                @if ($profilePhotoUrl)
                                    <div class="relative w-full h-full flex items-end justify-center">
                                        <img
                                            src="{{ $profilePhotoUrl }}"
                                            alt="{{ $profileName }}"
                                            draggable="false"
                                            class="relative z-10 w-full h-full object-contain object-bottom drop-shadow-[0_28px_34px_rgba(0,0,0,0.42)] select-none transition-transform duration-700 ease-out group-hover:scale-[1.025]"
                                        >
                                        <div id="hero-portrait-sheen" class="pointer-events-none absolute inset-0 z-20 opacity-0 group-hover:opacity-100" aria-hidden="true"></div>
                                    </div>
                                @else
                                    <div class="relative z-10 w-full h-full bg-zinc-100 border border-zinc-300 flex items-center justify-center">
                                        <x-chess-piece piece="king" class="w-24 h-24 text-zinc-950" />
                                    </div>
                                @endif
                            </div>

                            <!-- High-Depth Floating Spatial Coordinates (+92px Z) -->
                            <div class="hero-layer-coords pointer-events-none absolute inset-0 z-20 hidden sm:block" aria-hidden="true">
                                <span class="absolute top-12 left-4 px-2 py-0.5 bg-white/90 border border-zinc-300 font-mono text-[9px] tracking-[0.22em] text-zinc-700 shadow-sm">
                                    E4 // 3D
                                </span>
                            </div>

                            <div class="pointer-events-none absolute inset-x-0 bottom-0 h-14 z-20 bg-gradient-to-t from-white via-white/80 to-transparent" style="transform: translateZ(66px);"></div>
                        </div>
                    </div>

                    <button
                        type="button"
                        id="hero-move-badge"
                        title="Click to cycle chess opening formations & notation"
                        class="relative z-30 -mt-4 inline-flex items-center gap-2 px-4 py-2 bg-zinc-950 hover:bg-zinc-800 text-white border border-white/20 font-mono text-[10px] uppercase tracking-[0.22em] shadow-xl transition active:scale-95 animate-float-subtle cursor-pointer"
                    >
                        <x-chess-piece piece="knight" class="w-3.5 h-3.5" />
                        <span id="hero-move-text">WHITE TO MOVE // 1. E4</span>
                    </button>

                    <!-- Switcher for King & Knight Backdrop Tone + Interactive 3D Orbit -->
                    <div class="relative z-30 mt-2.5 flex flex-wrap items-center justify-center gap-2">
                        <div class="inline-flex items-center border border-zinc-300 bg-white/95 backdrop-blur p-0.5 shadow-sm font-mono text-[9px] uppercase tracking-wider" role="group" aria-label="Backdrop Chess Piece Tone">
                            <button type="button" data-hero-piece-tone="black" class="hero-tone-btn px-2.5 py-1 bg-zinc-950 text-white font-bold transition">
                                &#9818; Black
                            </button>
                            <button type="button" data-hero-piece-tone="white" class="hero-tone-btn px-2.5 py-1 text-zinc-600 hover:text-zinc-950 transition">
                                &#9812; White
                            </button>
                            <button type="button" data-hero-piece-tone="split" class="hero-tone-btn px-2.5 py-1 text-zinc-600 hover:text-zinc-950 transition">
                                &#9680; Split
                            </button>
                        </div>

                        <button
                            type="button"
                            id="hero-3d-orbit-btn"
                            title="Toggle continuous 3D showcase orbit (or drag portrait directly)"
                            class="inline-flex items-center gap-1.5 px-2.5 py-1.5 border border-zinc-300 bg-white/95 hover:border-zinc-950 font-mono text-[9px] uppercase tracking-wider text-zinc-700 hover:text-zinc-950 shadow-sm transition"
                        >
                            <i class="fas fa-cube text-[9px]"></i>
                            <span>3D Orbit</span>
                        </button>
                    </div>
                    <p class="mt-1.5 font-mono text-[9px] uppercase tracking-[0.22em] text-zinc-400">
                        Drag portrait to inspect 3D depth
                    </p>
                </div>

                <!-- Right Column: Telemetry Status, Animated Counters & Social Links -->
                <div class="lg:col-span-4 order-3 text-center lg:text-right space-y-7 hero-stagger hero-stagger-3">
                    <!-- Status -->
                    <div>
                        <p class="font-mono text-[10px] uppercase tracking-[0.25em] text-zinc-400 mb-1.5">Status</p>
                        <div class="inline-flex items-center gap-2 font-display font-bold text-sm uppercase tracking-wide text-zinc-950">
                            <span class="relative flex h-2.5 w-2.5">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-zinc-950 opacity-50"></span>
                                <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-zinc-950"></span>
                            </span>
                            <span>{{ $profile?->status_kerja ?? 'Open to Work' }}</span>
                        </div>
                        @if (filled($profile?->ketersediaan))
                            <p class="font-mono text-[11px] uppercase tracking-wider text-zinc-500 mt-1">{{ $profile->ketersediaan }}</p>
                        @endif
                    </div>

                    <!-- Highlight Metric -->
                    <div class="border-y border-zinc-200 py-4">
                        <div class="flex items-baseline justify-center lg:justify-end gap-2">
                            <span class="font-display text-4xl sm:text-5xl font-bold tracking-tight text-zinc-950">
                                {{ $profile?->semester_label ?? 'SEM 05' }}
                            </span>
                            <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-zinc-400">RANK</span>
                        </div>
                        @if ($primaryInstitution)
                            <p class="font-mono text-[10px] uppercase tracking-[0.16em] text-zinc-500 mt-1 truncate">
                                {{ $primaryInstitution }}
                            </p>
                        @endif
                    </div>

                    <!-- Portfolio Dynamic Counters -->
                    <div>
                        <p class="font-mono text-[10px] uppercase tracking-[0.25em] text-zinc-400 mb-3">Portfolio</p>
                        <div class="grid grid-cols-3 gap-4 max-w-xs mx-auto lg:ml-auto lg:mr-0">
                            <div>
                                <span class="block font-mono text-[9px] uppercase tracking-wider text-zinc-400">Projects</span>
                                <span class="font-display text-3xl font-bold text-zinc-950" data-count-target="{{ $portfolioCounts['project'] }}">
                                    {{ str_pad((string) $portfolioCounts['project'], 2, '0', STR_PAD_LEFT) }}
                                </span>
                            </div>
                            <div class="border-x border-zinc-200 px-2">
                                <span class="block font-mono text-[9px] uppercase tracking-wider text-zinc-400">Certs</span>
                                <span class="font-display text-3xl font-bold text-zinc-950" data-count-target="{{ $portfolioCounts['certificate'] }}">
                                    {{ str_pad((string) $portfolioCounts['certificate'], 2, '0', STR_PAD_LEFT) }}
                                </span>
                            </div>
                            <div>
                                <span class="block font-mono text-[9px] uppercase tracking-wider text-zinc-400">Exp/Awards</span>
                                <span class="font-display text-3xl font-bold text-zinc-950" data-count-target="{{ $portfolioCounts['experience'] + $portfolioCounts['award'] }}">
                                    {{ str_pad((string) ($portfolioCounts['experience'] + $portfolioCounts['award']), 2, '0', STR_PAD_LEFT) }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Bottom Hero Actions & Dynamic Social Links -->
                    <div class="flex flex-wrap items-center justify-center lg:justify-end gap-2 pt-1">
                        <a
                            href="#work"
                            data-magnetic
                            class="inline-flex items-center gap-2 px-4 py-2 bg-zinc-950 hover:bg-zinc-800 text-white font-mono text-[11px] font-bold uppercase tracking-[0.16em] transition"
                        >
                            <span>View Work</span>
                            <i class="fas fa-arrow-right text-[10px]"></i>
                        </a>
                        @foreach ($socialMedias->take(3) as $soc)
                            <a
                                href="{{ $soc->url }}"
                                target="{{ str_starts_with($soc->url, 'http') ? '_blank' : '_self' }}"
                                rel="noopener noreferrer"
                                class="px-3 py-2 border border-zinc-300 hover:border-zinc-950 font-mono text-[10px] font-semibold uppercase tracking-wider text-zinc-700 hover:text-zinc-950 transition"
                            >
                                {{ strtoupper($soc->nama_platform) }} &rarr;
                            </a>
                        @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>

    <x-chess-divider variant="to-dark" />

    <!-- =========================================================
         SECTION 2: THE STRATEGY SO FAR + INTERACTIVE TACTICAL CHESSBOARD
         ========================================================= -->
    <section id="journey" class="board-grid-dark relative py-20 sm:py-28 text-zinc-100">
        <div class="max-w-7xl mx-auto px-5 sm:px-8">

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                <!-- Left Column: Story & Dynamic Technical Skills -->
                <div class="lg:col-span-5 reveal-up">
                    <p class="font-mono text-[11px] uppercase tracking-[0.25em] text-zinc-400 mb-3">
                        GRANDMASTER STRATEGY // SKILLS
                    </p>
                    <h2 class="font-display font-bold uppercase tracking-tight leading-[0.9] text-4xl sm:text-6xl text-white">
                        THE JOURNEY<br>SO FAR.
                    </h2>

                    <p class="mt-6 text-sm sm:text-base text-zinc-300 leading-relaxed font-mono">
                        {{ $profile?->deskripsi }}
                    </p>

                    <!-- Technical Skills from DB -->
                    <div class="mt-9">
                        <div class="flex items-center justify-between border-b border-zinc-800 pb-2 mb-4">
                            <span class="font-mono text-[11px] uppercase tracking-[0.2em] text-zinc-400">Technical Skills</span>
                            <span class="font-mono text-[10px] text-zinc-500">HOVER OR CLICK TO MOVE</span>
                        </div>

                        <div class="grid grid-cols-2 gap-2.5" id="skills-grid">
                            @forelse ($technicalSkills as $idx => $skill)
                                <button
                                    type="button"
                                    data-chess-move-index="{{ $idx }}"
                                    class="chess-skill-btn group text-left p-3 border {{ $idx === 0 ? 'border-white bg-zinc-900' : 'border-zinc-800/90 bg-zinc-950/70 hover:border-zinc-500' }} transition-all duration-300 ease-out"
                                >
                                    <div class="flex items-center justify-between gap-2">
                                        <span class="inline-flex items-center gap-2 font-mono text-xs font-bold text-white">
                                            <x-chess-piece :piece="$skill->bidak_catur" class="w-3.5 h-3.5 text-zinc-300 transition-transform duration-500 ease-out group-hover:scale-125 group-hover:-rotate-6" />
                                            <span>{{ $skill->nama_skill }}</span>
                                        </span>
                                        <span class="font-mono text-[10px] px-1.5 py-0.5 bg-zinc-800/80 text-zinc-300">
                                            {{ $skill->kode_notasi }}
                                        </span>
                                    </div>
                                    <div class="mt-2.5 w-full h-[3px] bg-zinc-800 overflow-hidden">
                                        <div class="skill-fill-bar h-full bg-white" data-skill-scale="{{ number_format(((int) $skill->tingkat_kemahiran) / 100, 3, '.', '') }}"></div>
                                    </div>
                                </button>
                            @empty
                                <p class="col-span-2 font-mono text-xs text-zinc-500">No skills seeded yet.</p>
                            @endforelse
                        </div>
                    </div>
                </div>

                <!-- Right Column: Realistic Interactive Free-Move Monochrome 8x8 Chessboard -->
                <div class="lg:col-span-7 reveal-up">
                    <div class="border border-zinc-800 bg-[#0d0d10] p-4 sm:p-6 shadow-2xl">
                        <!-- Board Header Telemetry & Interactive Controls -->
                        <div class="flex flex-wrap items-center justify-between gap-3 pb-4 mb-4 border-b border-zinc-800">
                            <div class="flex items-center gap-2.5">
                                <span id="chess-live-dot" class="w-2.5 h-2.5 bg-white inline-block animate-pulse"></span>
                                <div>
                                    <span class="font-mono text-xs font-bold uppercase tracking-[0.2em] text-white block">
                                        INTERACTIVE SKILL BOARD // 8x8
                                    </span>
                                    <span class="font-mono text-[10px] text-zinc-400">
                                        Click or drag any piece to any square you like
                                    </span>
                                </div>
                            </div>

                            <div class="flex flex-wrap items-center gap-1.5">
                                <button
                                    type="button"
                                    id="chess-3d-btn"
                                    title="Toggle 2D / 3D board perspective"
                                    class="px-2.5 py-1.5 border border-zinc-700 hover:border-white font-mono text-[10px] uppercase tracking-wider text-zinc-300 hover:text-white transition"
                                >
                                    <i class="fas fa-cube mr-1"></i>3D View
                                </button>
                                <button
                                    type="button"
                                    id="chess-mode-btn"
                                    title="Switch between Free Move mode (any square) and Chess Rules mode"
                                    class="px-2.5 py-1.5 border border-zinc-700 hover:border-white font-mono text-[10px] uppercase tracking-wider text-white bg-zinc-900 transition"
                                >
                                    Mode: Free
                                </button>
                                <button
                                    type="button"
                                    id="chess-flip-btn"
                                    title="Flip chessboard"
                                    class="px-2.5 py-1.5 border border-zinc-700 hover:border-white font-mono text-[10px] uppercase tracking-wider text-zinc-300 hover:text-white transition"
                                >
                                    <i class="fas fa-retweet mr-1"></i>Flip
                                </button>
                                <button
                                    type="button"
                                    id="chess-tour-btn"
                                    class="px-2.5 py-1.5 border border-zinc-700 hover:border-white font-mono text-[10px] uppercase tracking-wider text-zinc-300 hover:text-white transition"
                                >
                                    <i class="fas fa-play mr-1 text-[9px]"></i>Auto Tour
                                </button>
                                <button
                                    type="button"
                                    id="chess-reset-btn"
                                    class="px-2.5 py-1.5 bg-white hover:bg-zinc-200 text-zinc-950 font-mono text-[10px] font-bold uppercase tracking-wider transition"
                                >
                                    Reset
                                </button>
                            </div>
                        </div>

                        <!-- Synchronized Auto-Tour Clock Bar -->
                        <div class="w-full h-[2px] bg-zinc-900 mb-4 overflow-hidden">
                            <div id="chess-tour-bar" class="h-full bg-white w-0 transition-none"></div>
                        </div>

                        <!-- Realistic Tournament Board Frame with A-H / 1-8 Borders & 3D Perspective Stage -->
                        @php
                            $files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
                            $ranks = [8, 7, 6, 5, 4, 3, 2, 1];
                        @endphp
                        <div id="chessboard-3d-stage" class="py-2">
                        <div id="chessboard-cabinet" class="mx-auto max-w-[490px] bg-[#141418] border-2 border-zinc-700 p-2 sm:p-3.5 shadow-[0_24px_60px_rgba(0,0,0,0.75)]">
                            <!-- Top File Coordinates -->
                            <div class="grid grid-cols-8 px-4 sm:px-5 pb-1.5 font-mono text-[9px] uppercase tracking-widest text-zinc-500 text-center select-none" aria-hidden="true">
                                @foreach ($files as $f)
                                    <span>{{ $f }}</span>
                                @endforeach
                            </div>

                            <div class="flex items-stretch">
                                <!-- Left Rank Coordinates -->
                                <div class="w-4 sm:w-5 flex flex-col justify-around font-mono text-[9px] text-zinc-500 text-center select-none pr-1" aria-hidden="true">
                                    @foreach ($ranks as $r)
                                        <span>{{ $r }}</span>
                                    @endforeach
                                </div>

                                <!-- 8x8 Board Surface + Floating Movable Pieces Layer -->
                                <div class="flex-1 grid grid-cols-8 border border-zinc-600 aspect-square relative overflow-hidden" id="tactical-chessboard">
                                    @foreach ($ranks as $rIndex => $rank)
                                        @foreach ($files as $fIndex => $file)
                                            @php
                                                $coord = $file . $rank;
                                                $isLightSquare = ($rIndex + $fIndex) % 2 === 0;
                                            @endphp
                                            <button
                                                type="button"
                                                data-square="{{ $coord }}"
                                                aria-label="Chess square {{ $coord }}"
                                                class="chess-square flex items-center justify-center {{ $isLightSquare ? 'bg-[#f4f4f1] text-zinc-950' : 'bg-[#222227] text-white' }}"
                                            >
                                                <span class="chess-hint-slot pointer-events-none flex items-center justify-center w-full h-full"></span>
                                            </button>
                                        @endforeach
                                    @endforeach

                                    <!-- Tactical Move Vector Overlay -->
                                    <svg id="chess-vector-overlay" viewBox="0 0 800 800" class="pointer-events-none absolute inset-0 w-full h-full z-[6]" aria-hidden="true">
                                        <polyline id="chess-vector-path" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="4" stroke-dasharray="10 8" stroke-linecap="round" stroke-linejoin="round" class="animate-dash-flow" points=""/>
                                    </svg>

                                    <!-- Movable Skill Chess Pieces Layer -->
                                    <div id="chess-pieces-layer" class="pointer-events-none absolute inset-0 z-10">
                                        @foreach ($chessMoves as $idx => $move)
                                            @php
                                                $colIdx = array_search($move['square'][0] ?? 'e', $files, true);
                                                $rowIdx = 8 - (int) ($move['square'][1] ?? 1);
                                                $colIdx = $colIdx === false ? 4 : $colIdx;
                                            @endphp
                                            <button
                                                type="button"
                                                data-piece-idx="{{ $idx }}"
                                                aria-label="{{ $move['skill'] }} ({{ ucfirst($move['piece']) }})"
                                                title="{{ $move['skill'] }} — {{ ucfirst($move['piece']) }}"
                                                class="chess-piece-token pointer-events-auto"
                                                style="transform: translate3d({{ $colIdx * 100 }}%, {{ $rowIdx * 100 }}%, 0);"
                                            >
                                                <span class="chess-piece-inner flex flex-col items-center justify-center w-full h-full px-0.5">
                                                    <span class="relative flex items-center justify-center">
                                                        <x-chess-piece
                                                            :piece="$move['piece']"
                                                            class="w-6 h-6 sm:w-8 sm:h-8 text-white drop-shadow-[0_2px_3px_rgba(0,0,0,0.95)]"
                                                            style="stroke: #09090b; stroke-width: 2.2px; paint-order: stroke fill;"
                                                        />
                                                    </span>
                                                    <span class="px-1 py-[1px] bg-zinc-950/90 border border-white/25 text-white font-mono text-[7px] sm:text-[8px] font-bold uppercase tracking-tight leading-none max-w-[92%] truncate -mt-0.5 shadow">
                                                        {{ \Illuminate\Support\Str::limit($move['skill'], 8, '') }}
                                                    </span>
                                                </span>
                                            </button>
                                        @endforeach
                                    </div>
                                </div>

                                <!-- Right Rank Coordinates -->
                                <div class="w-4 sm:w-5 flex flex-col justify-around font-mono text-[9px] text-zinc-500 text-center select-none pl-1" aria-hidden="true">
                                    @foreach ($ranks as $r)
                                        <span>{{ $r }}</span>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Bottom File Coordinates -->
                            <div class="grid grid-cols-8 px-4 sm:px-5 pt-1.5 font-mono text-[9px] uppercase tracking-widest text-zinc-500 text-center select-none" aria-hidden="true">
                                @foreach ($files as $f)
                                    <span>{{ $f }}</span>
                                @endforeach
                            </div>
                        </div>
                        </div>

                        <!-- Live Move Readout + Recent Move Tape -->
                        <div class="mt-5 p-4 border border-zinc-800 bg-zinc-950 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                            <div>
                                <div class="flex flex-wrap items-center gap-2 font-mono text-[11px] uppercase tracking-[0.2em] text-zinc-400">
                                    <span id="move-readout-number" class="px-2 py-0.5 bg-white text-zinc-950 font-bold">PIECE 01</span>
                                    <span id="move-readout-piece">{{ strtoupper((string) ($chessMoves->first()['piece'] ?? 'KING')) }}</span>
                                    <span>•</span>
                                    <span id="move-readout-square">SQUARE {{ strtoupper((string) ($chessMoves->first()['square'] ?? 'E1')) }}</span>
                                </div>
                                <h3 id="move-readout-skill" class="font-display text-xl font-bold uppercase text-white mt-1.5">
                                    {{ $chessMoves->first()['skill'] ?? 'Laravel' }}
                                </h3>
                                <p id="move-readout-desc" class="text-xs text-zinc-400 mt-1 leading-relaxed">
                                    {{ $chessMoves->first()['description'] ?? '' }}
                                </p>
                            </div>
                            <div class="sm:text-right shrink-0 border-t sm:border-t-0 sm:border-l border-zinc-800 pt-3 sm:pt-0 sm:pl-4">
                                <span class="block font-mono text-[10px] uppercase tracking-widest text-zinc-500">Proficiency</span>
                                <span id="move-readout-score" class="font-display text-3xl font-bold text-white">
                                    {{ $chessMoves->first()['proficiency'] ?? 90 }}%
                                </span>
                            </div>
                        </div>

                        <!-- Live Move Notation History Tape -->
                        <div class="mt-3 px-3.5 py-2.5 border border-zinc-800/80 bg-[#070709] flex items-center gap-3 overflow-x-auto no-scrollbar">
                            <span class="font-mono text-[9px] uppercase tracking-[0.2em] text-zinc-500 shrink-0">Move Log:</span>
                            <div id="chess-move-log" class="flex items-center gap-2 font-mono text-[11px] text-zinc-300">
                                <span class="text-zinc-500">Click or drag any piece to start recording moves...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 4 Strategic Pillar Columns (Editorial Hairline Strip) -->
            <div class="mt-14 border border-zinc-800/90 bg-zinc-950/70 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-zinc-800/80">
                @foreach ($pillarSkills as $pillar)
                    <div class="group p-6 hover:bg-zinc-900/50 transition-colors duration-300 reveal-up">
                        <div class="flex items-center justify-between mb-5">
                            <span class="font-mono text-[10px] uppercase tracking-[0.22em] text-zinc-500 group-hover:text-zinc-300 transition-colors">
                                {{ $pillar->kode_notasi }}
                            </span>
                            <span class="w-8 h-8 border border-zinc-800 bg-zinc-900/80 text-zinc-200 group-hover:bg-white group-hover:text-zinc-950 group-hover:border-white flex items-center justify-center transition-all duration-300">
                                <x-chess-piece :piece="$pillar->bidak_catur" class="w-4 h-4" />
                            </span>
                        </div>
                        <h3 class="font-display text-lg font-bold uppercase tracking-tight text-white">
                            {{ $pillar->nama_skill }}
                        </h3>
                        <p class="font-mono text-[11px] text-zinc-400 mt-2 leading-relaxed">
                            {{ $pillar->deskripsi }}
                        </p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- =========================================================
         SECTION 3: TIMELINE ("FROM STUDENT TO SHIPPING.")
         ========================================================= -->
    <section id="timeline" class="checker-pattern-dark bg-[#09090b] py-20 sm:py-28 border-t border-zinc-900 text-zinc-100">
        <div class="max-w-7xl mx-auto px-5 sm:px-8">

            <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-16">
                <div>
                    <p class="font-mono text-[11px] uppercase tracking-[0.25em] text-zinc-400 mb-3">
                        CHRONICLE // EDUCATION &amp; EXPERIENCE
                    </p>
                    <h2 class="font-display font-bold uppercase tracking-tight leading-[0.9] text-4xl sm:text-6xl text-white">
                        FROM STUDENT<br>TO SHIPPING.
                    </h2>
                </div>

                <!-- Timeline Filter Buttons -->
                <div class="inline-flex flex-wrap border border-zinc-800 bg-zinc-950/90 p-1 font-mono text-[11px] uppercase tracking-wider">
                    <button type="button" data-timeline-filter="all" class="timeline-filter-btn px-3.5 py-2 bg-white text-zinc-950 font-bold transition">All</button>
                    <button type="button" data-timeline-filter="education" class="timeline-filter-btn px-3.5 py-2 text-zinc-400 hover:text-white transition">Education</button>
                    <button type="button" data-timeline-filter="work" class="timeline-filter-btn px-3.5 py-2 text-zinc-400 hover:text-white transition">Work</button>
                    <button type="button" data-timeline-filter="committee" class="timeline-filter-btn px-3.5 py-2 text-zinc-400 hover:text-white transition">Committee</button>
                    <button type="button" data-timeline-filter="organization" class="timeline-filter-btn px-3.5 py-2 text-zinc-400 hover:text-white transition">Organization</button>
                    <button type="button" data-timeline-filter="leadership" class="timeline-filter-btn px-3.5 py-2 text-zinc-400 hover:text-white transition">Leadership</button>
                </div>
            </div>

            <!-- Vertical Spine Timeline -->
            <div class="relative" id="timeline-container">
                <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-px bg-zinc-800/90 -translate-x-1/2">
                    <div id="timeline-spine-fill" class="w-full bg-white h-0 transition-[height] duration-150 ease-out"></div>
                    <div id="timeline-traveler" class="hidden md:flex absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-white border-2 border-zinc-950 text-zinc-950 items-center justify-center shadow-[0_0_22px_rgba(255,255,255,0.55)] pointer-events-none z-30 transition-transform duration-150 ease-out" aria-hidden="true">
                        <x-chess-piece piece="rook" class="w-4 h-4" />
                        <span id="timeline-capture-badge" class="pointer-events-none absolute left-full ml-2.5 px-2 py-0.5 bg-white text-zinc-950 font-mono text-[9px] font-bold uppercase tracking-widest whitespace-nowrap opacity-0 shadow-lg">R×P</span>
                    </div>
                </div>

                <div class="space-y-12" id="timeline-list">
                    @forelse ($timelineItems as $index => $item)
                        @php
                            $isLeft = $index % 2 === 0;
                            $hasDistinctNarrative = filled($item['narrative']) && trim((string) $item['narrative']) !== trim((string) $item['description']);
                        @endphp
                        <div
                            data-timeline-type="{{ $item['type'] }}"
                            data-timeline-category="{{ $item['category'] ?? $item['type'] }}"
                            class="timeline-node relative grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-10 items-center reveal-up transition-all duration-300"
                        >
                            <!-- Center Spine Node (Target Piece Captured by Descending Rook) -->
                            <div
                                data-piece="{{ strtolower((string) $item['piece']) }}"
                                class="timeline-spine-node hidden md:flex absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 w-10 h-10 bg-[#09090b] border border-zinc-500 text-white items-center justify-center shadow-lg transition-all duration-300 hover:scale-125 hover:border-white hover:bg-white hover:text-zinc-950"
                            >
                                <span class="timeline-node-ring pointer-events-none absolute inset-0 border border-white opacity-0" aria-hidden="true"></span>
                                <span class="timeline-node-piece inline-flex items-center justify-center">
                                    <x-chess-piece :piece="$item['piece']" class="w-4 h-4" />
                                </span>
                                <span class="timeline-node-captured-mark pointer-events-none absolute inset-0 flex items-center justify-center font-mono text-xs font-bold text-zinc-400" aria-hidden="true">&times;</span>
                            </div>

                            <!-- Card Column -->
                            <div class="md:col-span-5 {{ $isLeft ? 'md:col-start-1' : 'md:col-start-8' }}">
                                <article class="tilt-card editorial-card border border-zinc-800/90 bg-[#0d0d10]/95 hover:border-zinc-500 p-6 sm:p-7 transition-colors duration-300">
                                    <div class="flex flex-wrap items-center justify-between gap-2 mb-4">
                                        <span class="font-mono text-[10px] font-bold uppercase tracking-[0.2em] px-2.5 py-1 bg-white text-zinc-950">
                                            {{ $item['badge'] }}
                                        </span>
                                        <span class="font-mono text-xs font-semibold text-zinc-400">
                                            {{ $item['tahun'] }}
                                        </span>
                                    </div>

                                    <h3 class="font-display text-2xl font-bold uppercase tracking-tight text-white">
                                        {{ $item['title'] }}
                                    </h3>
                                    <p class="font-mono text-xs uppercase tracking-wider text-zinc-300 mt-1.5">
                                        {{ $item['subtitle'] }}
                                    </p>

                                    @if (filled($item['description']))
                                        <p class="text-xs sm:text-sm text-zinc-400 mt-4 leading-relaxed">
                                            {{ $item['description'] }}
                                        </p>
                                    @endif

                                    <div class="mt-5 pt-3 border-t border-zinc-800/80 flex items-center justify-between font-mono text-[10px] uppercase tracking-widest text-zinc-500">
                                        <span>{{ $item['meta'] }}</span>
                                        <span class="text-zinc-400">{{ $item['year_marker'] }}</span>
                                    </div>
                                </article>
                            </div>

                            <!-- Narrative + Year Callout Opposite Column -->
                            <div class="md:col-span-5 {{ $isLeft ? 'md:col-start-8 md:text-left' : 'md:col-start-1 md:row-start-1 md:text-right' }}">
                                <div class="font-display font-bold text-4xl sm:text-5xl text-zinc-800 select-none">
                                    {{ $item['year_marker'] }}
                                </div>
                                @if ($hasDistinctNarrative)
                                    <p class="font-mono text-xs sm:text-sm text-zinc-400 mt-2 leading-relaxed max-w-md {{ $isLeft ? '' : 'md:ml-auto' }}">
                                        {{ $item['narrative'] }}
                                    </p>
                                @else
                                    <p class="font-mono text-[11px] uppercase tracking-[0.18em] text-zinc-500 mt-2 max-w-md {{ $isLeft ? '' : 'md:ml-auto' }}">
                                        {{ $item['subtitle'] }} // {{ $item['meta'] }}
                                    </p>
                                @endif
                            </div>
                        </div>
                    @empty
                        <div class="border border-dashed border-zinc-800 p-8 text-center font-mono text-xs text-zinc-500">
                            No timeline records found in database.
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>

    <x-chess-divider variant="to-light" />

    <!-- =========================================================
         SECTION 4: SELECTED WORK SPLIT SHOWCASE (PURE WHITE)
         ========================================================= -->
    <section id="work" class="bg-white py-20 sm:py-24 text-zinc-950">
        <div class="max-w-7xl mx-auto px-5 sm:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
                <!-- Left Headline -->
                <div class="lg:col-span-4 text-center lg:text-left reveal-up">
                    <p class="font-mono text-[11px] uppercase tracking-[0.25em] text-zinc-400 mb-3">
                        CURATED PORTFOLIO // INDEX
                    </p>
                    <h2 class="font-display font-bold uppercase tracking-tight leading-[0.88] text-5xl sm:text-6xl text-zinc-950">
                        SELECTED<br>WORK.
                    </h2>
                    <p class="font-mono text-xs text-zinc-600 mt-6 leading-relaxed max-w-sm mx-auto lg:mx-0 uppercase">
                        {{ $portfolios->count() }} dynamic records across web systems, UI/UX certifications, and student competition recognitions — stored and served via MySQL.
                    </p>
                    <div class="mt-7">
                        <a
                            href="#projects"
                            data-magnetic
                            class="inline-flex items-center gap-3 px-6 py-3.5 bg-zinc-950 hover:bg-zinc-800 text-white font-mono text-xs font-bold uppercase tracking-[0.18em] transition"
                        >
                            <span>Browse All</span>
                            <i class="fas fa-arrow-right text-[10px]"></i>
                        </a>
                    </div>
                </div>

                <!-- Center 3D Interactive Chess Sculpture Stage (Replaces Repeated Portrait) -->
                <div class="lg:col-span-4 flex justify-center reveal-up">
                    <div id="work-3d-stage" class="group relative w-72 sm:w-80 aspect-[4/5] border border-zinc-950 bg-[#09090b] text-white overflow-hidden shadow-[0_24px_60px_-20px_rgba(0,0,0,0.45)] flex flex-col justify-between">
                        <!-- Top Stage HUD -->
                        <div class="relative z-20 flex items-center justify-between px-4 pt-3.5 font-mono text-[9px] uppercase tracking-[0.22em] text-zinc-400">
                            <span>3D MONUMENT // CHESS</span>
                            <span id="work-3d-status">ORBIT READY</span>
                        </div>

                        <!-- Real-Time WebGL 3D Canvas (Activated by Three.js Module when available) -->
                        <canvas id="work-3d-canvas" class="hidden absolute inset-0 w-full h-full z-10 cursor-grab active:cursor-grabbing"></canvas>

                        <!-- Built-in 3D Volumetric CSS/SVG Sculpture Fallback -->
                        <div id="work-3d-fallback" class="relative z-[5] flex-1 flex items-center justify-center overflow-hidden px-4">
                            <div class="hero-3d-floor pointer-events-none absolute inset-x-0 bottom-0 h-28 opacity-40" style="background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%), linear-gradient(-45deg, #ffffff 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ffffff 75%), linear-gradient(-45deg, transparent 75%, #ffffff 75%); background-size: 32px 32px; background-position: 0 0, 0 16px, 16px -16px, -16px 0;" aria-hidden="true"></div>
                            <div id="work-fallback-pieces" class="piece-tone-white relative flex items-end justify-center transition-transform duration-700 ease-out group-hover:scale-105">
                                <x-chess-ornament variant="pawn" uid="work_pawn_l" class="w-20 h-28 -mr-5 mb-1 opacity-90 -rotate-6 transition-transform duration-700 ease-out group-hover:-translate-x-2" />
                                <x-chess-ornament variant="king" uid="work_king_c" class="w-36 h-48 z-10 drop-shadow-[0_18px_24px_rgba(255,255,255,0.16)]" />
                                <x-chess-ornament variant="knight" uid="work_knight_r" class="w-24 h-32 -ml-6 mb-1 opacity-95 rotate-6 transition-transform duration-700 ease-out group-hover:translate-x-2" />
                            </div>
                        </div>

                        <!-- Bottom 3D Material Toggle Bar -->
                        <div class="relative z-20 flex items-center justify-between px-3.5 py-2.5 bg-zinc-950/90 border-t border-zinc-800 font-mono text-[9px] uppercase tracking-wider">
                            <span class="text-zinc-400">DRAG TO ROTATE</span>
                            <div class="inline-flex border border-zinc-700 p-0.5">
                                <button type="button" data-work-3d-tone="white" class="work-tone-btn px-2 py-0.5 bg-white text-zinc-950 font-bold transition">&#9812; White</button>
                                <button type="button" data-work-3d-tone="black" class="work-tone-btn px-2 py-0.5 text-zinc-300 hover:text-white transition">&#9818; Black</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Metrics Stack (Swiss Typographic Hairline Ledger) -->
                <div class="lg:col-span-4 text-center lg:text-right space-y-5 reveal-up">
                    <div>
                        <p class="font-mono text-[10px] uppercase tracking-[0.22em] text-zinc-400">{{ $profile?->status_kerja }}</p>
                        <p class="font-mono text-xs uppercase text-zinc-800 mt-0.5">{{ $profile?->lokasi }}</p>
                        <p class="font-mono text-xs text-zinc-500">{{ $profile?->email }}</p>
                    </div>

                    <div class="border border-zinc-200 grid grid-cols-2 divide-x divide-y divide-zinc-200 bg-white">
                        <div class="p-4 sm:p-5 hover:bg-zinc-50 transition-colors">
                            <span class="block font-mono text-[10px] uppercase tracking-widest text-zinc-400">Projects</span>
                            <span class="font-display text-3xl font-bold text-zinc-950 mt-1 inline-block" data-count-target="{{ $portfolioCounts['project'] }}">{{ str_pad((string) $portfolioCounts['project'], 2, '0', STR_PAD_LEFT) }}</span>
                        </div>
                        <div class="p-4 sm:p-5 hover:bg-zinc-50 transition-colors">
                            <span class="block font-mono text-[10px] uppercase tracking-widest text-zinc-400">Certificates</span>
                            <span class="font-display text-3xl font-bold text-zinc-950 mt-1 inline-block" data-count-target="{{ $portfolioCounts['certificate'] }}">{{ str_pad((string) $portfolioCounts['certificate'], 2, '0', STR_PAD_LEFT) }}</span>
                        </div>
                        <div class="p-4 sm:p-5 hover:bg-zinc-50 transition-colors">
                            <span class="block font-mono text-[10px] uppercase tracking-widest text-zinc-400">Awards</span>
                            <span class="font-display text-3xl font-bold text-zinc-950 mt-1 inline-block" data-count-target="{{ $portfolioCounts['award'] }}">{{ str_pad((string) $portfolioCounts['award'], 2, '0', STR_PAD_LEFT) }}</span>
                        </div>
                        <div class="p-4 sm:p-5 hover:bg-zinc-50 transition-colors">
                            <span class="block font-mono text-[10px] uppercase tracking-widest text-zinc-400">Skills</span>
                            <span class="font-display text-3xl font-bold text-zinc-950 mt-1 inline-block" data-count-target="{{ $portfolioCounts['skill'] }}">{{ str_pad((string) $portfolioCounts['skill'], 2, '0', STR_PAD_LEFT) }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 5-Column Horizontal Featured Strip (Editorial Hairline Index) -->
            @if ($featuredItems->isNotEmpty())
                <div class="mt-14 border border-zinc-200 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 divide-y sm:divide-y-0 sm:divide-x divide-zinc-200 bg-white">
                    @foreach ($featuredItems as $feat)
                        @php
                            $featThumb = $resolveImage($feat->gambar);
                            $featLink = filled($feat->link_detail) && $feat->link_detail !== '#' ? $feat->link_detail : '';
                            $featTags = is_array($feat->tech_stack) ? implode(',', $feat->tech_stack) : '';
                        @endphp
                        <button
                            type="button"
                            class="open-portfolio-modal group text-left bg-white hover:bg-zinc-950 hover:text-white p-4 sm:p-5 transition-colors duration-300"
                            data-title="{{ $feat->judul }}"
                            data-category="{{ strtoupper((string) $feat->kategori) }}"
                            data-year="{{ $feat->tahun }}"
                            data-issuer="{{ $feat->penyelenggara ?? $feat->sub_judul ?? '' }}"
                            data-description="{{ $feat->deskripsi ?? '' }}"
                            data-image="{{ $featThumb ?? '' }}"
                            data-tags="{{ $featTags }}"
                            data-link="{{ $featLink }}"
                        >
                            <div class="flex items-center justify-between font-mono text-[9px] uppercase tracking-[0.2em] text-zinc-400 group-hover:text-zinc-400">
                                <span>{{ strtoupper($feat->kategori) }}</span>
                                <x-chess-piece :piece="$feat->bidak_catur" class="w-3.5 h-3.5 transition-transform duration-300 group-hover:translate-x-0.5" />
                            </div>
                            <p class="font-display font-bold text-sm uppercase tracking-tight mt-2.5 truncate">
                                {{ $feat->judul }}
                            </p>
                            <p class="font-mono text-[10px] text-zinc-500 group-hover:text-zinc-300 mt-1">
                                {{ $feat->tahun }}
                            </p>
                        </button>
                    @endforeach
                </div>
            @endif
        </div>
    </section>

    <!-- =========================================================
         SECTION 5: RECENT PROJECTS & ARCHIVE GRID (NUMBERED CARDS)
         ========================================================= -->
    <section id="projects" class="relative overflow-hidden bg-zinc-100 py-20 sm:py-24 border-t border-zinc-200 text-zinc-950">
        <!-- Subtle Black Knight Watermark on Light Section -->
        <div data-scroll-parallax="-0.08" class="pointer-events-none absolute -right-10 -top-8 opacity-[0.06] hidden md:block will-change-transform" aria-hidden="true">
            <x-chess-ornament variant="knight" class="w-72 h-80 text-zinc-950 -rotate-12" />
        </div>
        <div class="max-w-7xl mx-auto px-5 sm:px-8 relative z-10">
            <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
                <div>
                    <p class="font-mono text-[11px] uppercase tracking-[0.25em] text-zinc-500 mb-2">
                        SELECTED REPOSITORY // ARCHIVE
                    </p>
                    <h2 class="font-display font-bold uppercase tracking-tight leading-[0.9] text-4xl sm:text-6xl text-zinc-950">
                        RECENT<br>PROJECTS.
                    </h2>
                </div>

                <!-- Category Filter Tabs -->
                <div class="inline-flex flex-wrap border border-zinc-300 bg-white p-1 font-mono text-[11px] uppercase tracking-wider" role="tablist">
                    <button type="button" data-portfolio-tab="all" class="portfolio-tab-btn px-4 py-2 bg-zinc-950 text-white font-bold transition">
                        All ({{ $portfolios->count() }})
                    </button>
                    <button type="button" data-portfolio-tab="project" class="portfolio-tab-btn px-4 py-2 text-zinc-600 hover:text-zinc-950 transition">
                        Projects ({{ $portfolioCounts['project'] }})
                    </button>
                    <button type="button" data-portfolio-tab="certificate" class="portfolio-tab-btn px-4 py-2 text-zinc-600 hover:text-zinc-950 transition">
                        Certificates ({{ $portfolioCounts['certificate'] }})
                    </button>
                    <button type="button" data-portfolio-tab="award" class="portfolio-tab-btn px-4 py-2 text-zinc-600 hover:text-zinc-950 transition">
                        Awards ({{ $portfolioCounts['award'] }})
                    </button>
                </div>
            </div>

            <!-- Numbered Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="portfolio-grid">
                @forelse ($portfolios as $port)
                    @php
                        $thumbUrl = $resolveImage($port->gambar);
                        $catKey = strtolower((string) $port->kategori);
                        $hasDetailLink = filled($port->link_detail) && $port->link_detail !== '#';
                        $tagList = is_array($port->tech_stack) ? $port->tech_stack : [];
                    @endphp
                    <article
                        data-portfolio-category="{{ $catKey }}"
                        class="portfolio-card tilt-card tilt-card-light editorial-card group bg-white border border-zinc-200 hover:border-zinc-950 hover:shadow-[0_20px_50px_-22px_rgba(0,0,0,0.28)] flex flex-col justify-between transition-all duration-300 reveal-up"
                    >
                        <div>
                            <!-- Card Top Index + Chess Piece -->
                            <div class="p-6 pb-4 flex items-start justify-between gap-4 border-b border-zinc-100">
                                <span class="outline-num font-display font-bold text-5xl leading-none select-none">
                                    {{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}
                                </span>
                                <div class="text-right">
                                    <span class="inline-flex items-center gap-1.5 font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-zinc-500">
                                        <x-chess-piece :piece="$port->bidak_catur" class="w-3.5 h-3.5 text-zinc-950" />
                                        <span>{{ strtoupper($port->kategori) }}</span>
                                    </span>
                                    <span class="block font-mono text-xs text-zinc-400 mt-0.5">{{ $port->tahun }}</span>
                                </div>
                            </div>

                            <!-- Monochrome Preview Image -->
                            @if ($thumbUrl)
                                <div class="relative aspect-[16/9] bg-zinc-950 overflow-hidden border-b border-zinc-200">
                                    <img
                                        src="{{ $thumbUrl }}"
                                        alt="{{ $port->judul }}"
                                        class="w-full h-full object-cover grayscale contrast-125 group-hover:scale-105 group-hover:grayscale-0 transition-all duration-700 ease-out"
                                    >
                                </div>
                            @endif

                            <!-- Body -->
                            <div class="p-6">
                                <h3 class="font-display text-xl font-bold uppercase tracking-tight text-zinc-950">
                                    {{ $port->judul }}
                                </h3>
                                @if (filled($port->deskripsi))
                                    <p class="text-xs sm:text-sm text-zinc-600 mt-2.5 leading-relaxed">
                                        {{ $port->deskripsi }}
                                    </p>
                                @endif

                                @if (! empty($tagList))
                                    <div class="mt-4 flex flex-wrap gap-1.5">
                                        @foreach ($tagList as $tag)
                                            <span class="px-2 py-0.5 border border-zinc-300 font-mono text-[10px] uppercase tracking-wider text-zinc-700 bg-zinc-50">
                                                {{ $tag }}
                                            </span>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="px-6 pb-6 pt-3 flex items-center justify-between gap-3 border-t border-zinc-100">
                            <button
                                type="button"
                                class="open-portfolio-modal inline-flex items-center gap-2 px-4 py-2 border border-zinc-950 font-mono text-[11px] font-bold uppercase tracking-wider text-zinc-950 hover:bg-zinc-950 hover:text-white transition"
                                data-title="{{ $port->judul }}"
                                data-category="{{ strtoupper((string) $port->kategori) }}"
                                data-year="{{ $port->tahun }}"
                                data-issuer="{{ $port->penyelenggara ?? $port->sub_judul ?? '' }}"
                                data-description="{{ $port->deskripsi ?? '' }}"
                                data-image="{{ $thumbUrl ?? '' }}"
                                data-tags="{{ implode(',', $tagList) }}"
                                data-link="{{ $hasDetailLink ? $port->link_detail : '' }}"
                            >
                                <i class="far fa-eye text-[10px]"></i>
                                <span>Details</span>
                            </button>

                            @if ($hasDetailLink)
                                <a
                                    href="{{ $port->link_detail }}"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    class="font-mono text-[11px] font-bold uppercase tracking-wider text-zinc-700 hover:text-zinc-950 inline-flex items-center gap-1.5"
                                >
                                    <span>Live Site</span>
                                    <i class="fas fa-arrow-up-right-from-square text-[10px]"></i>
                                </a>
                            @else
                                <span class="font-mono text-[10px] uppercase tracking-widest text-zinc-400">
                                    {{ $port->sub_judul ?? 'ARCHIVE' }}
                                </span>
                            @endif
                        </div>
                    </article>
                @empty
                    <div class="col-span-full border border-dashed border-zinc-300 bg-white p-10 text-center font-mono text-xs text-zinc-500">
                        No portfolio records found in database.
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <x-chess-divider variant="to-dark" />

    <!-- =========================================================
         SECTION 6: THE CERTIFICATES & RECOGNITIONS (SWISS CREDENTIAL LEDGER)
         ========================================================= -->
    <section id="certificates" class="board-grid-dark py-20 sm:py-28 text-zinc-100">
        <div class="max-w-7xl mx-auto px-5 sm:px-8">
            <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-14 reveal-up">
                <div>
                    <p class="font-mono text-[11px] uppercase tracking-[0.25em] text-zinc-400 mb-3">
                        VERIFIED CREDENTIALS &amp; HONORS
                    </p>
                    <h2 class="font-display font-bold uppercase tracking-tight leading-[0.9] text-4xl sm:text-6xl text-white">
                        THE<br>CERTIFICATES.
                    </h2>
                </div>
                <p class="font-mono text-xs uppercase tracking-wider text-zinc-400 max-w-sm leading-relaxed">
                    Professional certifications and competition awards validating technical rigor and interface craft.
                </p>
            </div>

            <div class="border-y border-zinc-800 divide-y divide-zinc-800/80">
                @forelse ($certificatesAndAwards as $cert)
                    @php
                        $certThumb = $resolveImage($cert->gambar);
                        $certLink = filled($cert->link_detail) && $cert->link_detail !== '#' ? $cert->link_detail : '';
                        $certTags = is_array($cert->tech_stack) ? $cert->tech_stack : [];
                    @endphp
                    <article class="group relative grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-6 items-center py-6 sm:py-7 px-3 sm:px-5 -mx-3 sm:-mx-5 hover:bg-zinc-900/55 transition-colors duration-300 reveal-up">
                        <!-- Year + Chess Piece Identifier -->
                        <div class="md:col-span-2 flex items-center gap-3.5">
                            <span class="w-9 h-9 border border-zinc-800 bg-zinc-950 text-zinc-300 group-hover:border-white group-hover:bg-white group-hover:text-zinc-950 flex items-center justify-center shrink-0 transition-all duration-300">
                                <x-chess-piece :piece="$cert->bidak_catur" class="w-4 h-4" />
                            </span>
                            <div>
                                <span class="block font-mono text-xs font-bold text-white">{{ $cert->tahun }}</span>
                                <span class="block font-mono text-[9px] uppercase tracking-[0.2em] text-zinc-500">{{ strtoupper($cert->kategori) }}</span>
                            </div>
                        </div>

                        <!-- Credential Title & Editorial Summary -->
                        <div class="md:col-span-6">
                            <h3 class="font-display text-xl sm:text-2xl font-bold uppercase tracking-tight text-white group-hover:translate-x-1 transition-transform duration-300">
                                {{ $cert->judul }}
                            </h3>
                            @if (filled($cert->deskripsi))
                                <p class="text-xs sm:text-sm text-zinc-400 mt-1.5 leading-relaxed max-w-2xl">
                                    {{ $cert->deskripsi }}
                                </p>
                            @endif
                        </div>

                        <!-- Issuer & Micro Thumbnail / Tags -->
                        <div class="md:col-span-2 flex md:flex-col md:items-start gap-2">
                            <span class="font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-zinc-300">
                                {{ strtoupper($cert->penyelenggara ?? $cert->kategori) }}
                            </span>
                            @if (! empty($certTags))
                                <span class="font-mono text-[10px] text-zinc-500 truncate max-w-full">
                                    {{ implode(' · ', array_slice($certTags, 0, 2)) }}
                                </span>
                            @endif
                        </div>

                        <!-- Action & Optional Preview Badge -->
                        <div class="md:col-span-2 flex items-center md:justify-end gap-3">
                            @if ($certThumb)
                                <img
                                    src="{{ $certThumb }}"
                                    alt="{{ $cert->judul }}"
                                    class="hidden xl:block w-14 h-10 object-cover grayscale border border-zinc-800 opacity-50 group-hover:opacity-100 group-hover:border-zinc-400 transition-all duration-300 shrink-0"
                                >
                            @endif
                            <button
                                type="button"
                                class="open-portfolio-modal inline-flex items-center gap-2 px-4 py-2.5 border border-zinc-700 group-hover:border-white group-hover:bg-white group-hover:text-zinc-950 font-mono text-[11px] font-bold uppercase tracking-wider text-white transition-all duration-300 shrink-0"
                                data-title="{{ $cert->judul }}"
                                data-category="{{ strtoupper((string) $cert->kategori) }}"
                                data-year="{{ $cert->tahun }}"
                                data-issuer="{{ $cert->penyelenggara ?? $cert->sub_judul ?? '' }}"
                                data-description="{{ $cert->deskripsi ?? '' }}"
                                data-image="{{ $certThumb ?? '' }}"
                                data-tags="{{ implode(',', $certTags) }}"
                                data-link="{{ $certLink }}"
                            >
                                <span>Inspect</span>
                                <i class="fas fa-arrow-right text-[10px] transition-transform duration-300 group-hover:translate-x-0.5"></i>
                            </button>
                        </div>
                    </article>
                @empty
                    <div class="py-10 text-center font-mono text-xs text-zinc-500">
                        No certificates or awards seeded yet.
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <x-chess-divider variant="to-light" />

    <!-- =========================================================
         SECTION 7: LET'S BUILD SOMETHING + PLAYER ID CARD + GUESTBOOK
         ========================================================= -->
    <section id="contact" class="board-grid-light relative overflow-hidden py-20 sm:py-28 text-zinc-950">
        <!-- Monumental Animated Black King & Knight Watermark Duo on White Contact Section -->
        <div data-scroll-parallax="-0.06" class="pointer-events-none absolute top-10 right-4 lg:right-12 hidden md:flex items-end gap-0 opacity-[0.07] will-change-transform" aria-hidden="true">
            <x-chess-ornament variant="knight" uid="ct_knight" class="animate-knight-sway w-52 h-60 text-zinc-950 -mr-10 -rotate-6" />
            <x-chess-ornament variant="king" uid="ct_king" class="animate-royal-float w-60 h-72 text-zinc-950 rotate-3" />
        </div>
        <div class="max-w-7xl mx-auto px-5 sm:px-8 relative z-10">

            <!-- Section Heading & Quick Links -->
            <div class="max-w-3xl mb-12 reveal-up">
                <p class="font-mono text-[11px] uppercase tracking-[0.25em] text-zinc-500 mb-3">
                    DIRECT CONTACT // NEXT MOVE
                </p>
                <h2 class="font-display font-bold uppercase tracking-tight leading-[0.88] text-4xl sm:text-6xl text-zinc-950">
                    LET'S BUILD<br>SOMETHING.
                </h2>
                <p class="font-mono text-xs sm:text-sm text-zinc-600 mt-4 uppercase tracking-wide">
                    Have a project or collaboration in mind? Send a message or sign the guestbook below.
                </p>

                <div class="mt-6 flex flex-wrap gap-2.5">
                    @if (filled($profile?->email))
                        <a
                            href="mailto:{{ $profile->email }}"
                            data-magnetic
                            class="inline-flex items-center gap-2 px-5 py-2.5 border border-zinc-950 bg-zinc-950 text-white hover:bg-zinc-800 font-mono text-[11px] font-bold uppercase tracking-wider transition"
                        >
                            <i class="far fa-envelope"></i>
                            <span>{{ $profile->email }}</span>
                        </a>
                    @endif
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">

                <!-- Left Column: Chess Grandmaster Player ID Card & Find Me -->
                <div class="lg:col-span-4 space-y-6 reveal-up">
                    <!-- Monochrome Vertical Player ID Card with Real Photo -->
                    <div class="tilt-card bg-[#09090b] text-white border-2 border-zinc-950 p-6 shadow-2xl relative overflow-hidden">
                        <!-- Lanyard Notch -->
                        <div class="w-16 h-2.5 bg-zinc-800 border border-zinc-700 mx-auto mb-5 rounded-full"></div>

                        <div class="flex items-center justify-between font-mono text-[10px] uppercase tracking-[0.2em] text-zinc-400 mb-4">
                            <span>CHESS // DEV PASS</span>
                            <x-chess-piece piece="king" class="w-4 h-4 text-white" />
                        </div>

                        <!-- Player Photo Framed Over Dark Checkered Board & Subtle King Silhouette -->
                        <div class="checker-pattern-dark border border-zinc-800 aspect-[4/4] relative flex items-end justify-center overflow-hidden bg-zinc-900">
                            <div class="pointer-events-none absolute inset-0 flex items-center justify-center opacity-20" aria-hidden="true">
                                <x-chess-ornament variant="king" uid="id_bg_king" class="piece-tone-white w-48 h-56" />
                            </div>
                            @if ($profilePhotoUrl)
                                <img src="{{ $profilePhotoUrl }}" alt="{{ $profileName }}" class="relative z-10 w-full h-full object-contain object-bottom drop-shadow-[0_14px_20px_rgba(0,0,0,0.6)]">
                            @else
                                <x-chess-piece piece="king" class="relative z-10 w-20 h-20 text-white m-auto" />
                            @endif
                            <div class="pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-zinc-950/90 to-transparent z-20"></div>
                        </div>

                        <div class="mt-5">
                            <h3 class="font-display text-xl font-bold uppercase tracking-tight text-white">
                                {{ $profileName }}
                            </h3>
                            <p class="font-mono text-[11px] uppercase tracking-wider text-zinc-400 mt-1">
                                {{ $profile?->posisi }}
                            </p>
                        </div>

                        <div class="mt-4 pt-4 border-t border-zinc-800 flex items-center justify-between font-mono text-[10px] uppercase tracking-widest text-zinc-400">
                            <span class="px-2 py-0.5 bg-white text-zinc-950 font-bold">{{ $profile?->status_kerja ?? 'OPEN' }}</span>
                            <span>{{ $profile?->semester_label ?? 'SEM 05' }}</span>
                        </div>

                        <!-- Barcode Vector -->
                        <div class="mt-5 pt-4 border-t border-zinc-800/80">
                            <div class="h-8 w-full flex items-stretch gap-[2px] opacity-85" aria-hidden="true">
                                @foreach ([3,1,2,4,1,2,1,3,2,1,4,2,1,3,1,2,3,1,2,4,1,2,1,3] as $bar)
                                    <span class="bg-white flex-1" style="flex-grow: {{ $bar }};"></span>
                                    <span class="bg-transparent w-[2px]"></span>
                                @endforeach
                            </div>
                            <p class="font-mono text-[9px] text-center tracking-[0.35em] text-zinc-500 mt-2">
                                ID // {{ strtoupper($profile?->monogram ?? 'AYA') }}-2026-UMMI
                            </p>
                        </div>
                    </div>

                    <!-- Find Me Directory (Dynamic from social_medias table) -->
                    <div class="bg-white border border-zinc-200 p-6">
                        <h3 class="font-display text-lg font-bold uppercase tracking-tight text-zinc-950 mb-4 flex items-center gap-2">
                            <x-chess-piece piece="bishop" class="w-4 h-4" />
                            <span>Find Me</span>
                        </h3>

                        <div class="space-y-2.5">
                            @forelse ($socialMedias as $soc)
                                <a
                                    href="{{ $soc->url }}"
                                    target="{{ str_starts_with($soc->url, 'http') ? '_blank' : '_self' }}"
                                    rel="noopener noreferrer"
                                    class="group flex items-center justify-between p-3 border border-zinc-200 hover:border-zinc-950 hover:bg-zinc-950 hover:text-white transition"
                                >
                                    <div class="flex items-center gap-3 min-w-0">
                                        <span class="w-9 h-9 border border-zinc-300 group-hover:border-zinc-700 flex items-center justify-center text-sm shrink-0">
                                            <i class="{{ $soc->icon_class ?: 'fas fa-link' }}"></i>
                                        </span>
                                        <div class="min-w-0">
                                            <p class="font-mono text-xs font-bold truncate">{{ $soc->username ?: $soc->nama_platform }}</p>
                                            <p class="font-mono text-[10px] uppercase tracking-wider text-zinc-400">on {{ $soc->nama_platform }}</p>
                                        </div>
                                    </div>
                                    <i class="fas fa-arrow-right text-xs text-zinc-400 group-hover:text-white shrink-0"></i>
                                </a>
                            @empty
                                <p class="font-mono text-xs text-zinc-500">No social links configured.</p>
                            @endforelse
                        </div>
                    </div>
                </div>

                <!-- Right Column: Contact Form & Visitor Guestbook -->
                <div class="lg:col-span-8 space-y-8 reveal-up">
                    <!-- Contact Form Card -->
                    <div class="bg-white border border-zinc-300 shadow-[0_24px_60px_-28px_rgba(0,0,0,0.18)] p-6 sm:p-8 transition-colors duration-300 hover:border-zinc-950/50">
                        <div class="flex items-center justify-between gap-4 mb-6 pb-4 border-b border-zinc-200">
                            <div>
                                <h3 class="font-display text-2xl font-bold uppercase tracking-tight text-zinc-950">Send a Message</h3>
                                <p class="font-mono text-xs text-zinc-500 mt-0.5">Direct inquiry — messages are stored securely in the database.</p>
                            </div>
                            <x-chess-piece piece="knight" class="w-6 h-6 text-zinc-950" />
                        </div>

                        @if (session('contact_success'))
                            <div class="mb-5 border-2 border-zinc-950 bg-zinc-950 text-white px-4 py-3 font-mono text-xs flex items-center gap-2.5">
                                <i class="fas fa-check"></i>
                                <span>{{ session('contact_success') }}</span>
                            </div>
                        @endif

                        @if ($errors->contact->any())
                            <div class="mb-5 border-2 border-zinc-950 bg-zinc-100 text-zinc-950 px-4 py-3 font-mono text-xs space-y-1">
                                @foreach ($errors->contact->all() as $error)
                                    <p>&bull; {{ $error }}</p>
                                @endforeach
                            </div>
                        @endif

                        <form action="{{ route('contact.store') }}" method="POST" class="space-y-4">
                            @csrf
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <label for="contact-nama" class="block font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500 mb-1.5">Your Name</label>
                                    <input
                                        id="contact-nama"
                                        type="text"
                                        name="nama"
                                        value="{{ old('nama') }}"
                                        required
                                        placeholder="John Doe"
                                        class="w-full px-4 py-3 border border-zinc-300 bg-zinc-50 text-sm text-zinc-950 placeholder-zinc-400 focus:outline-none focus:border-zinc-950 focus:bg-white transition"
                                    >
                                </div>
                                <div>
                                    <label for="contact-email" class="block font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500 mb-1.5">Email Address</label>
                                    <input
                                        id="contact-email"
                                        type="email"
                                        name="email"
                                        value="{{ old('email') }}"
                                        required
                                        placeholder="john@example.com"
                                        class="w-full px-4 py-3 border border-zinc-300 bg-zinc-50 text-sm text-zinc-950 placeholder-zinc-400 focus:outline-none focus:border-zinc-950 focus:bg-white transition"
                                    >
                                </div>
                            </div>

                            <div>
                                <label for="contact-subjek" class="block font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500 mb-1.5">Subject</label>
                                <input
                                    id="contact-subjek"
                                    type="text"
                                    name="subjek"
                                    value="{{ old('subjek') }}"
                                    placeholder="Project collaboration / Internship opportunity"
                                    class="w-full px-4 py-3 border border-zinc-300 bg-zinc-50 text-sm text-zinc-950 placeholder-zinc-400 focus:outline-none focus:border-zinc-950 focus:bg-white transition"
                                >
                            </div>

                            <div>
                                <label for="contact-pesan" class="block font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500 mb-1.5">Message</label>
                                <textarea
                                    id="contact-pesan"
                                    name="pesan"
                                    rows="4"
                                    required
                                    placeholder="Tell me about your project or idea..."
                                    class="w-full px-4 py-3 border border-zinc-300 bg-zinc-50 text-sm text-zinc-950 placeholder-zinc-400 focus:outline-none focus:border-zinc-950 focus:bg-white transition"
                                >{{ old('pesan') }}</textarea>
                            </div>

                            <button
                                type="submit"
                                class="inline-flex items-center justify-center gap-2.5 px-7 py-3.5 bg-zinc-950 hover:bg-zinc-800 text-white font-mono text-xs font-bold uppercase tracking-[0.2em] transition"
                            >
                                <span>Send Message</span>
                                <i class="fas fa-arrow-right text-[10px]"></i>
                            </button>
                        </form>
                    </div>

                    <!-- Visitor Guestbook / Comments Section -->
                    <div id="comments-section" class="bg-white border border-zinc-200 p-6 sm:p-8">
                        <div class="flex flex-wrap items-center justify-between gap-4 mb-6 pb-4 border-b border-zinc-200">
                            <div>
                                <h3 class="font-display text-xl font-bold uppercase tracking-tight text-zinc-950">
                                    Visitor Guestbook ({{ $comments->count() }})
                                </h3>
                                <p class="font-mono text-xs text-zinc-500 mt-0.5">Leave a note or feedback — persisted in MySQL.</p>
                            </div>
                            <x-chess-piece piece="pawn" class="w-5 h-5 text-zinc-950" />
                        </div>

                        @if (session('comment_success'))
                            <div class="mb-5 border-2 border-zinc-950 bg-zinc-950 text-white px-4 py-3 font-mono text-xs flex items-center gap-2.5">
                                <i class="fas fa-check"></i>
                                <span>{{ session('comment_success') }}</span>
                            </div>
                        @endif

                        @if ($errors->comment->any())
                            <div class="mb-5 border-2 border-zinc-950 bg-zinc-100 text-zinc-950 px-4 py-3 font-mono text-xs space-y-1">
                                @foreach ($errors->comment->all() as $error)
                                    <p>&bull; {{ $error }}</p>
                                @endforeach
                            </div>
                        @endif

                        <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
                            <!-- Form -->
                            <form action="{{ route('comments.store') }}" method="POST" enctype="multipart/form-data" class="md:col-span-5 space-y-3.5">
                                @csrf
                                <div>
                                    <label for="comment-nama" class="block font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-zinc-500 mb-1">Name</label>
                                    <input
                                        id="comment-nama"
                                        type="text"
                                        name="nama"
                                        value="{{ old('nama') }}"
                                        required
                                        placeholder="Your name"
                                        class="w-full px-3.5 py-2.5 border border-zinc-300 bg-zinc-50 text-sm text-zinc-950 focus:outline-none focus:border-zinc-950 focus:bg-white transition"
                                    >
                                </div>
                                <div>
                                    <label for="comment-text" class="block font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-zinc-500 mb-1">Comment</label>
                                    <textarea
                                        id="comment-text"
                                        name="komentar"
                                        rows="3"
                                        required
                                        placeholder="Write your note..."
                                        class="w-full px-3.5 py-2.5 border border-zinc-300 bg-zinc-50 text-sm text-zinc-950 focus:outline-none focus:border-zinc-950 focus:bg-white transition"
                                    >{{ old('komentar') }}</textarea>
                                </div>
                                <div>
                                    <label for="comment-photo" class="block w-full border border-dashed border-zinc-400 hover:border-zinc-950 bg-zinc-50 px-3 py-2.5 text-center cursor-pointer transition">
                                        <span class="font-mono text-[11px] font-semibold text-zinc-700 inline-flex items-center gap-2">
                                            <i class="fas fa-upload"></i>
                                            <span id="comment-photo-label">Optional Avatar (Max 5MB)</span>
                                        </span>
                                        <input id="comment-photo" type="file" name="foto_profil" accept="image/*" class="hidden">
                                    </label>
                                </div>
                                <button
                                    type="submit"
                                    class="w-full py-2.5 bg-zinc-950 hover:bg-zinc-800 text-white font-mono text-[11px] font-bold uppercase tracking-[0.18em] transition"
                                >
                                    Post Comment
                                </button>
                            </form>

                            <!-- Comment List -->
                            <div class="md:col-span-7 space-y-3 max-h-80 overflow-y-auto pr-1">
                                @forelse ($comments as $comment)
                                    @php
                                        $commentAvatar = $resolveImage($comment->foto_profil);
                                    @endphp
                                    <div class="border border-zinc-200 bg-zinc-50/80 p-4 flex items-start gap-3.5">
                                        @if ($commentAvatar)
                                            <img src="{{ $commentAvatar }}" alt="{{ $comment->nama }}" class="w-10 h-10 object-cover grayscale border border-zinc-950 shrink-0">
                                        @else
                                            <div class="w-10 h-10 bg-zinc-950 text-white font-display font-bold text-sm flex items-center justify-center shrink-0">
                                                {{ strtoupper(substr($comment->nama, 0, 1)) }}
                                            </div>
                                        @endif

                                        <div class="flex-1 min-w-0">
                                            <div class="flex items-center justify-between gap-2">
                                                <p class="font-display font-bold text-sm uppercase text-zinc-950 truncate">{{ $comment->nama }}</p>
                                                <span class="font-mono text-[10px] text-zinc-400 shrink-0">
                                                    {{ $comment->created_at?->format('M d, Y') }}
                                                </span>
                                            </div>
                                            <p class="text-xs sm:text-sm text-zinc-700 mt-1 leading-relaxed break-words">
                                                {{ $comment->komentar }}
                                            </p>
                                        </div>
                                    </div>
                                @empty
                                    <p class="font-mono text-xs text-zinc-500 text-center py-8">
                                        No comments yet. Make the opening move!
                                    </p>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- =========================================================
         SECTION 8: BOLD MONOCHROME EDITORIAL FOOTER
         ========================================================= -->
    <footer class="bg-[#09090b] text-white border-t border-zinc-800 pt-16 pb-10 overflow-hidden">
        <div class="max-w-7xl mx-auto px-5 sm:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-end">

                <!-- Left Nav Links -->
                <div class="lg:col-span-4 space-y-6">
                    <div class="inline-flex items-center gap-2.5">
                        <span class="w-9 h-9 bg-white text-zinc-950 flex items-center justify-center">
                            <x-chess-piece piece="king" class="w-5 h-5" />
                        </span>
                        <span class="font-display font-bold text-xl tracking-tight uppercase">{{ $profile?->monogram ?? 'AYA' }}</span>
                    </div>

                    <ul class="space-y-1.5 font-display font-bold text-2xl sm:text-3xl uppercase tracking-tight">
                        <li><a href="#home" class="hover:text-zinc-400 transition">About</a></li>
                        <li><a href="#journey" class="hover:text-zinc-400 transition">Journey</a></li>
                        <li><a href="#work" class="hover:text-zinc-400 transition">Work</a></li>
                        <li><a href="#certificates" class="hover:text-zinc-400 transition">Certificates</a></li>
                        <li><a href="#contact" class="hover:text-zinc-400 transition">Contact</a></li>
                    </ul>
                </div>

                <!-- Center 3D Chess Pawn-to-King Evolution Emblem -->
                <div class="lg:col-span-4 flex justify-center">
                    <div class="tilt-card group relative w-64 sm:w-72 aspect-[4/4] border border-zinc-800 bg-[#0d0d11] flex flex-col items-center justify-center overflow-hidden p-5">
                        <div class="hero-3d-floor pointer-events-none absolute inset-x-0 -bottom-2 h-24 opacity-30" style="background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%), linear-gradient(-45deg, #ffffff 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ffffff 75%), linear-gradient(-45deg, transparent 75%, #ffffff 75%); background-size: 28px 28px; background-position: 0 0, 0 14px, 14px -14px, -14px 0;" aria-hidden="true"></div>
                        <div class="piece-tone-white relative z-10 flex items-end justify-center transition-transform duration-500 group-hover:scale-105">
                            <x-chess-ornament variant="pawn" uid="ft_pawn" class="animate-knight-sway w-20 h-24 -mr-3 opacity-85 -rotate-6 transition-transform duration-500 group-hover:-translate-x-2" />
                            <x-chess-ornament variant="king" uid="ft_king" class="animate-royal-float w-32 h-40 z-10 drop-shadow-[0_14px_24px_rgba(255,255,255,0.16)]" />
                            <div class="-scale-x-100 -ml-4 rotate-6 transition-transform duration-500 group-hover:translate-x-2">
                                <x-chess-ornament variant="knight" uid="ft_knight" class="animate-knight-sway w-22 h-28 opacity-90" />
                            </div>
                        </div>
                        <span class="relative z-10 mt-3 px-3 py-1 border border-zinc-700 bg-zinc-950/90 font-mono text-[9px] uppercase tracking-[0.26em] text-zinc-300">
                            01. PAWN &rarr; KING // ENDGAME
                        </span>
                    </div>
                </div>

                <!-- Right Closing Statement -->
                <div class="lg:col-span-4 text-left lg:text-right space-y-6">
                    <h2 class="font-display font-bold uppercase tracking-tight leading-[0.88] text-4xl sm:text-5xl text-white">
                        KEEP BUILDING<br>FORWARD.
                    </h2>
                    @if (filled($profile?->motto))
                        <p class="font-mono text-xs text-zinc-400 uppercase tracking-wider leading-relaxed">
                            {{ $profile->motto }}
                        </p>
                    @endif
                    <div class="flex flex-wrap lg:justify-end gap-3">
                        <a
                            href="#home"
                            data-magnetic
                            class="inline-flex items-center gap-3 px-6 py-3 border border-white hover:bg-white hover:text-zinc-950 font-mono text-xs font-bold uppercase tracking-[0.18em] transition"
                        >
                            <span>Back to Top</span>
                            <i class="fas fa-arrow-up text-[10px]"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Copyright & Social Strip -->
            <div class="mt-12 pt-6 border-t border-zinc-800/80 flex flex-col sm:flex-row items-center justify-between gap-4 font-mono text-[10px] uppercase tracking-[0.2em] text-zinc-500">
                <p>&copy; {{ date('Y') }} {{ strtoupper($profileName) }}. ALL RIGHTS RESERVED. BUILT WITH LARAVEL &amp; MYSQL.</p>
                <div class="flex items-center gap-4">
                    @foreach ($socialMedias as $soc)
                        <a
                            href="{{ $soc->url }}"
                            target="{{ str_starts_with($soc->url, 'http') ? '_blank' : '_self' }}"
                            rel="noopener noreferrer"
                            class="hover:text-white transition"
                        >
                            {{ strtoupper($soc->nama_platform) }}
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </footer>

    <!-- Floating Back-to-Top Chess Rook Button -->
    <a
        href="#home"
        id="back-to-top-btn"
        aria-label="Back to top"
        title="Back to Top"
        class="fixed bottom-6 right-6 z-40 w-11 h-11 bg-zinc-950 text-white border border-white/25 shadow-2xl flex items-center justify-center opacity-0 pointer-events-none translate-y-3 hover:bg-white hover:text-zinc-950 hover:border-zinc-950 transition-all duration-300"
    >
        <x-chess-piece piece="rook" class="w-5 h-5" />
    </a>

    @include('partials.cv-modal')
    @include('partials.portfolio-modal')
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
        const canHover = window.matchMedia('(hover: hover) and (pointer: fine)').matches;

        // 1. Mobile Nav Toggle
        const mobileBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        if (mobileBtn && mobileMenu) {
            mobileBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
            mobileMenu.querySelectorAll('a').forEach((link) => {
                link.addEventListener('click', () => mobileMenu.classList.add('hidden'));
            });
        }

        // 2. Magnetic CTA Buttons & Smooth 3D Tilt Cards
        if (canHover && !prefersReduced) {
            document.querySelectorAll('[data-magnetic]').forEach((btn) => {
                btn.style.transition = 'transform 0.42s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease';
                btn.addEventListener('mousemove', (e) => {
                    const rect = btn.getBoundingClientRect();
                    const dx = (e.clientX - rect.left - rect.width / 2) * 0.22;
                    const dy = (e.clientY - rect.top - rect.height / 2) * 0.22;
                    btn.style.transform = `translate3d(${dx.toFixed(2)}px, ${dy.toFixed(2)}px, 0)`;
                });
                btn.addEventListener('mouseleave', () => {
                    btn.style.transform = '';
                });
            });

            document.querySelectorAll('.tilt-card').forEach((card) => {
                let rafId = null;
                card.addEventListener('mousemove', (e) => {
                    const rect = card.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    const rx = ((y / rect.height) - 0.5) * -4.2;
                    const ry = ((x / rect.width) - 0.5) * 4.2;
                    if (rafId) cancelAnimationFrame(rafId);
                    rafId = requestAnimationFrame(() => {
                        card.style.setProperty('--gx', `${x}px`);
                        card.style.setProperty('--gy', `${y}px`);
                        card.style.transform = `perspective(1100px) rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg) translateY(-3px)`;
                    });
                });
                card.addEventListener('mouseleave', () => {
                    if (rafId) cancelAnimationFrame(rafId);
                    card.style.transform = '';
                });
            });
        }

        // 4. Hero 3D Spatial Diorama Physics Engine (Cursor Tilt, Pointer Drag-to-Orbit & 3D Auto-Orbit)
        const heroSection = document.getElementById('home');
        const heroPortraitWrap = document.getElementById('hero-portrait-wrap');
        const heroDiorama = document.getElementById('hero-3d-diorama');
        const heroPortraitSheen = document.getElementById('hero-portrait-sheen');
        const heroKingOrnament = document.getElementById('hero-king-ornament');
        const heroKnightLeft = document.getElementById('hero-knight-left');
        const heroKnightRight = document.getElementById('hero-knight-right');
        const heroOrbitBtn = document.getElementById('hero-3d-orbit-btn');

        let formationSpread = 0;
        let formationKingLift = 0;
        let formationAngle = 0;

        const applyHeroFormation = (spread, kingLift, angleDeg, tiltBias = 0) => {
            if (heroKingOrnament) {
                heroKingOrnament.style.transform = `translate3d(calc(-50% + ${(tiltBias * -10).toFixed(2)}px), ${kingLift.toFixed(2)}px, 0)`;
            }
            if (heroKnightLeft) {
                heroKnightLeft.style.transform = `translate3d(${(-spread - tiltBias * 14).toFixed(2)}px, -4px, 0) rotate(${(-12 - angleDeg - tiltBias * 7).toFixed(2)}deg)`;
            }
            if (heroKnightRight) {
                heroKnightRight.style.transform = `translate3d(${(spread - tiltBias * 14).toFixed(2)}px, -4px, 0) rotate(${(12 + angleDeg + tiltBias * 7).toFixed(2)}deg)`;
            }
        };

        if (heroDiorama && !prefersReduced) {
            let targetRx = 4;
            let targetRy = -4;
            let currRx = 4;
            let currRy = -4;
            let cursorNx = 0;
            let isDragging = false;
            let dragStartX = 0;
            let dragStartY = 0;
            let dragOriginRx = 0;
            let dragOriginRy = 0;
            let autoOrbit = true;
            let orbitPhase = 0;

            if (heroPortraitWrap) {
                heroPortraitWrap.classList.add('cursor-grab');
                heroPortraitWrap.addEventListener('pointerdown', (e) => {
                    if (e.button !== 0 && e.pointerType === 'mouse') return;
                    isDragging = true;
                    dragStartX = e.clientX;
                    dragStartY = e.clientY;
                    dragOriginRx = targetRx;
                    dragOriginRy = targetRy;
                    heroPortraitWrap.classList.remove('cursor-grab');
                    heroPortraitWrap.classList.add('cursor-grabbing');
                    heroDiorama.classList.add('is-dragging');
                    heroPortraitWrap.setPointerCapture(e.pointerId);
                });

                heroPortraitWrap.addEventListener('pointermove', (e) => {
                    if (!isDragging) return;
                    const dx = e.clientX - dragStartX;
                    const dy = e.clientY - dragStartY;
                    targetRy = Math.max(-28, Math.min(28, dragOriginRy + dx * 0.22));
                    targetRx = Math.max(-18, Math.min(18, dragOriginRx - dy * 0.16));
                });

                const endHeroDrag = (e) => {
                    if (!isDragging) return;
                    isDragging = false;
                    heroPortraitWrap.classList.remove('cursor-grabbing');
                    heroPortraitWrap.classList.add('cursor-grab');
                    heroDiorama.classList.remove('is-dragging');
                    if (heroPortraitWrap.hasPointerCapture(e.pointerId)) {
                        heroPortraitWrap.releasePointerCapture(e.pointerId);
                    }
                    if (!autoOrbit) {
                        targetRx = 0;
                        targetRy = 0;
                    }
                };

                heroPortraitWrap.addEventListener('pointerup', endHeroDrag);
                heroPortraitWrap.addEventListener('pointercancel', endHeroDrag);
            }

            if (heroSection && canHover) {
                heroSection.addEventListener('mousemove', (e) => {
                    if (isDragging) return;
                    const rect = heroSection.getBoundingClientRect();
                    const nx = (e.clientX - rect.left) / rect.width - 0.5;
                    const ny = (e.clientY - rect.top) / rect.height - 0.5;
                    cursorNx = nx;
                    targetRy = nx * 22;
                    targetRx = ny * -14;

                    if (heroPortraitSheen) {
                        heroPortraitSheen.style.setProperty('--sx', `${((nx + 0.5) * 100).toFixed(1)}%`);
                        heroPortraitSheen.style.setProperty('--sy', `${((ny + 0.5) * 100).toFixed(1)}%`);
                    }
                }, { passive: true });

                heroSection.addEventListener('mouseleave', () => {
                    cursorNx = 0;
                    if (!autoOrbit && !isDragging) {
                        targetRx = 0;
                        targetRy = 0;
                    }
                });
            }

            const syncOrbitButton = () => {
                if (!heroOrbitBtn) return;
                heroOrbitBtn.classList.toggle('bg-zinc-950', autoOrbit);
                heroOrbitBtn.classList.toggle('text-white', autoOrbit);
                heroOrbitBtn.classList.toggle('border-zinc-950', autoOrbit);
                heroOrbitBtn.classList.toggle('bg-white/95', !autoOrbit);
                heroOrbitBtn.classList.toggle('text-zinc-700', !autoOrbit);
            };
            syncOrbitButton();

            if (heroOrbitBtn) {
                heroOrbitBtn.addEventListener('click', () => {
                    autoOrbit = !autoOrbit;
                    syncOrbitButton();
                    if (!autoOrbit && !isDragging) {
                        targetRx = 0;
                        targetRy = 0;
                    }
                });
            }

            const tickHero3D = () => {
                if (autoOrbit && !isDragging && cursorNx === 0) {
                    orbitPhase += 0.018;
                    targetRy = Math.sin(orbitPhase) * 11.5;
                    targetRx = Math.cos(orbitPhase * 0.75) * 4.5 + 2;
                    if (heroPortraitSheen) {
                        heroPortraitSheen.style.setProperty('--sx', `${(50 + Math.sin(orbitPhase) * 28).toFixed(1)}%`);
                        heroPortraitSheen.style.setProperty('--sy', '32%');
                    }
                }

                currRx += (targetRx - currRx) * 0.085;
                currRy += (targetRy - currRy) * 0.085;

                heroDiorama.style.transform = `rotateX(${currRx.toFixed(2)}deg) rotateY(${currRy.toFixed(2)}deg)`;
                applyHeroFormation(formationSpread, formationKingLift, formationAngle, currRy / 22);

                requestAnimationFrame(tickHero3D);
            };
            requestAnimationFrame(tickHero3D);
        }

        const heroMoveBadge = document.getElementById('hero-move-badge');
        const heroMoveText = document.getElementById('hero-move-text');
        if (heroMoveBadge && heroMoveText) {
            const openings = [
                { label: 'WHITE TO MOVE // 1. E4', spread: 0, kingLift: 0, angle: 0 },
                { label: 'SICILIAN // 1... C5', spread: 14, kingLift: -8, angle: 2 },
                { label: 'KNIGHT DEVELOP // 2. NF3', spread: 24, kingLift: -4, angle: 4 },
                { label: 'RUY LOPEZ // 3. BB5', spread: 10, kingLift: -12, angle: 6 },
                { label: 'CASTLED KING // O-O', spread: -8, kingLift: -6, angle: -2 },
            ];
            let openingIdx = 0;
            heroMoveBadge.addEventListener('click', () => {
                openingIdx = (openingIdx + 1) % openings.length;
                const state = openings[openingIdx];
                heroMoveText.textContent = state.label;
                formationSpread = state.spread;
                formationKingLift = state.kingLift;
                formationAngle = state.angle;
                applyHeroFormation(formationSpread, formationKingLift, formationAngle, 0);
            });
        }

        // Hero King & Knight Piece Color Switcher (Black / White / Split)
        const heroToneBtns = document.querySelectorAll('[data-hero-piece-tone]');
        const heroPieceAura = document.getElementById('hero-piece-aura');
        const applyHeroPieceTone = (tone) => {
            const setTone = (el, isWhite) => {
                if (!el) return;
                el.classList.toggle('piece-tone-white', isWhite);
                el.classList.toggle('piece-tone-black', !isWhite);
                const svg = el.querySelector('.chess-ornament-svg');
                if (svg) {
                    svg.classList.remove('is-tone-pop');
                    void svg.offsetWidth;
                    svg.classList.add('is-tone-pop');
                }
            };
            if (tone === 'white') {
                setTone(heroKingOrnament, true);
                setTone(heroKnightLeft, true);
                setTone(heroKnightRight, true);
                if (heroPieceAura) heroPieceAura.style.opacity = '1';
            } else if (tone === 'split') {
                setTone(heroKingOrnament, false);
                setTone(heroKnightLeft, true);
                setTone(heroKnightRight, true);
                if (heroPieceAura) heroPieceAura.style.opacity = '0.7';
            } else {
                setTone(heroKingOrnament, false);
                setTone(heroKnightLeft, false);
                setTone(heroKnightRight, false);
                if (heroPieceAura) heroPieceAura.style.opacity = '0';
            }

            heroToneBtns.forEach((b) => {
                const active = b.dataset.heroPieceTone === tone;
                b.classList.toggle('bg-zinc-950', active);
                b.classList.toggle('text-white', active);
                b.classList.toggle('font-bold', active);
                b.classList.toggle('text-zinc-600', !active);
            });
        };

        heroToneBtns.forEach((btn) => {
            btn.addEventListener('click', () => applyHeroPieceTone(btn.dataset.heroPieceTone));
        });

        // 5. Scroll Progress Bar, Navbar Active Tracker, Phase HUD, Descending Rook Capture & Watermark Drift
        const scrollProgress = document.getElementById('scroll-progress');
        const navLinks = Array.from(document.querySelectorAll('#primary-nav .nav-link'));
        const navBar = document.getElementById('nav-active-bar');
        const phaseLabel = document.getElementById('nav-phase-label');
        const timelineContainer = document.getElementById('timeline-container');
        const timelineSpineFill = document.getElementById('timeline-spine-fill');
        const timelineTraveler = document.getElementById('timeline-traveler');
        const timelineCaptureBadge = document.getElementById('timeline-capture-badge');
        const timelineSpineNodes = Array.from(document.querySelectorAll('.timeline-spine-node'));
        const scrollParallaxEls = Array.from(document.querySelectorAll('[data-scroll-parallax]'));
        const pieceNotationMap = { king: 'K', queen: 'Q', rook: 'R', bishop: 'B', knight: 'N', pawn: 'P' };
        let captureBadgeTimer = null;

        const triggerRookCaptureFx = (pieceName) => {
            if (timelineTraveler) {
                timelineTraveler.classList.remove('is-rook-slam');
                void timelineTraveler.offsetWidth;
                timelineTraveler.classList.add('is-rook-slam');
            }
            if (timelineCaptureBadge) {
                const code = pieceNotationMap[(pieceName || 'pawn').toLowerCase()] || 'P';
                timelineCaptureBadge.textContent = `R×${code}`;
                timelineCaptureBadge.classList.add('is-visible');
                if (captureBadgeTimer) clearTimeout(captureBadgeTimer);
                captureBadgeTimer = setTimeout(() => {
                    timelineCaptureBadge.classList.remove('is-visible');
                }, 900);
            }
        };

        const trackedSections = [
            { id: 'home', phase: 'OPENING' },
            { id: 'journey', phase: 'MIDDLEGAME' },
            { id: 'work', phase: 'TACTICS' },
            { id: 'certificates', phase: 'CREDENTIAL' },
            { id: 'contact', phase: 'ENDGAME' },
        ].map((item) => ({ ...item, el: document.getElementById(item.id) })).filter((item) => item.el);

        const syncNavBar = (sectionId, phase) => {
            if (phaseLabel) phaseLabel.textContent = phase;
            navLinks.forEach((link) => {
                const active = link.dataset.navSection === sectionId;
                link.classList.toggle('text-zinc-950', active);
                link.classList.toggle('font-bold', active);
                if (active && navBar) {
                    navBar.style.width = `${link.offsetWidth}px`;
                    navBar.style.transform = `translateX(${link.offsetLeft}px)`;
                }
            });
        };

        let scrollTicking = false;
        const onScrollUpdate = () => {
            scrollTicking = false;
            const maxScroll = Math.max(1, document.documentElement.scrollHeight - window.innerHeight);
            const ratio = Math.min(1, Math.max(0, window.scrollY / maxScroll));
            if (scrollProgress) {
                scrollProgress.style.transform = `scaleX(${ratio.toFixed(4)})`;
            }

            const probeY = window.scrollY + window.innerHeight * 0.32;
            let activeItem = trackedSections[0];
            for (const item of trackedSections) {
                if (probeY >= item.el.offsetTop) {
                    activeItem = item;
                }
            }
            if (activeItem) {
                syncNavBar(activeItem.id, activeItem.phase);
            }

            if (timelineContainer && timelineSpineFill) {
                const rect = timelineContainer.getBoundingClientRect();
                const startY = window.innerHeight * 0.72;
                const progress = Math.min(1, Math.max(0, (startY - rect.top) / Math.max(1, rect.height)));
                const pct = `${(progress * 100).toFixed(2)}%`;
                timelineSpineFill.style.height = pct;
                if (timelineTraveler) {
                    timelineTraveler.style.top = pct;
                }

                const rookViewportY = rect.top + progress * rect.height;
                timelineSpineNodes.forEach((node) => {
                    const row = node.closest('.timeline-node');
                    if (!row || row.classList.contains('hidden')) return;
                    const nodeRect = node.getBoundingClientRect();
                    if (!nodeRect.height) return;
                    const nodeCenterY = nodeRect.top + nodeRect.height * 0.5;
                    const shouldCapture = rookViewportY >= nodeCenterY - 10;
                    const isCaptured = node.dataset.captured === '1';

                    if (shouldCapture && !isCaptured) {
                        node.dataset.captured = '1';
                        node.classList.remove('is-reviving', 'is-capturing');
                        void node.offsetWidth;
                        node.classList.add('is-capturing', 'is-captured');
                        triggerRookCaptureFx(node.dataset.piece);
                        setTimeout(() => node.classList.remove('is-capturing'), 600);
                    } else if (!shouldCapture && isCaptured) {
                        node.dataset.captured = '0';
                        node.classList.remove('is-captured', 'is-capturing');
                        void node.offsetWidth;
                        node.classList.add('is-reviving');
                        setTimeout(() => node.classList.remove('is-reviving'), 450);
                    }
                });
            }

            if (!prefersReduced && scrollParallaxEls.length) {
                const vhMid = window.innerHeight * 0.5;
                scrollParallaxEls.forEach((el) => {
                    const rect = el.getBoundingClientRect();
                    const speed = parseFloat(el.dataset.scrollParallax || '-0.06');
                    const delta = (rect.top + rect.height * 0.5 - vhMid) * speed;
                    el.style.transform = `translate3d(0, ${delta.toFixed(1)}px, 0)`;
                });
            }

            const backTopBtn = document.getElementById('back-to-top-btn');
            if (backTopBtn) {
                const showTop = window.scrollY > 420;
                backTopBtn.classList.toggle('opacity-0', !showTop);
                backTopBtn.classList.toggle('pointer-events-none', !showTop);
                backTopBtn.classList.toggle('translate-y-3', !showTop);
            }
        };

        const scheduleScrollUpdate = () => {
            if (!scrollTicking) {
                scrollTicking = true;
                requestAnimationFrame(onScrollUpdate);
            }
        };

        onScrollUpdate();
        window.addEventListener('scroll', scheduleScrollUpdate, { passive: true });
        window.addEventListener('resize', scheduleScrollUpdate);

        // 6. Scroll Reveal Observer (Sibling Stagger Cascade, Checkered Dividers, GPU Skill Bars & Counters)
        const animateCounter = (el) => {
            const target = Number(el.dataset.countTarget);
            if (Number.isNaN(target) || el.dataset.counted === '1') return;
            el.dataset.counted = '1';
            if (prefersReduced || target === 0) {
                el.textContent = String(target).padStart(2, '0');
                return;
            }
            const duration = 750;
            const start = performance.now();
            const step = (now) => {
                const p = Math.min(1, (now - start) / duration);
                const eased = 1 - Math.pow(1 - p, 4);
                const val = Math.round(eased * target);
                el.textContent = String(val).padStart(2, '0');
                if (p < 1) requestAnimationFrame(step);
            };
            requestAnimationFrame(step);
        };

        document.querySelectorAll('.reveal-up').forEach((el) => {
            const parent = el.parentElement;
            if (!parent) return;
            const siblings = Array.from(parent.children).filter((c) => c.classList.contains('reveal-up'));
            const idx = siblings.indexOf(el);
            if (idx > 0 && siblings.length > 1) {
                el.style.setProperty('--reveal-delay', `${Math.min(idx * 70, 350)}ms`);
            }
        });

        const revealTargets = document.querySelectorAll('.reveal-up, .chess-divider, #skills-grid, [data-count-target]');
        if ('IntersectionObserver' in window) {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                    if (!entry.isIntersecting) return;
                    const el = entry.target;
                    if (el.classList.contains('reveal-up')) {
                        el.classList.add('is-visible');
                    }
                    if (el.classList.contains('chess-divider')) {
                        el.classList.add('is-revealed');
                    }
                    if (el.id === 'skills-grid') {
                        el.querySelectorAll('.skill-fill-bar').forEach((bar, i) => {
                            const scaleVal = bar.dataset.skillScale || '0';
                            bar.style.transitionDelay = `${Math.min(i * 65, 320)}ms`;
                            bar.style.transform = `scaleX(${scaleVal})`;
                        });
                    }
                    if (el.dataset.countTarget !== undefined) {
                        animateCounter(el);
                    }
                    observer.unobserve(el);
                });
            }, { threshold: 0.08, rootMargin: '0px 0px -24px 0px' });
            revealTargets.forEach((el) => observer.observe(el));
        } else {
            document.querySelectorAll('.reveal-up').forEach((el) => el.classList.add('is-visible'));
            document.querySelectorAll('.chess-divider').forEach((el) => el.classList.add('is-revealed'));
            document.querySelectorAll('.skill-fill-bar').forEach((bar) => {
                bar.style.transform = `scaleX(${bar.dataset.skillScale || '0'})`;
            });
        }

        // 7. Realistic Free-Move & Drag-and-Drop 8x8 Interactive Chessboard
        const initialMoves = @json($chessMoves);
        const chessboard = document.getElementById('tactical-chessboard');
        const skillBtns = document.querySelectorAll('.chess-skill-btn');
        const boardSquares = Array.from(document.querySelectorAll('.chess-square'));
        const pieceTokens = Array.from(document.querySelectorAll('.chess-piece-token'));
        const modeBtn = document.getElementById('chess-mode-btn');
        const tourBtn = document.getElementById('chess-tour-btn');
        const flipBtn = document.getElementById('chess-flip-btn');
        const resetBtn = document.getElementById('chess-reset-btn');
        const tourBar = document.getElementById('chess-tour-bar');
        const vectorPath = document.getElementById('chess-vector-path');
        const moveLogEl = document.getElementById('chess-move-log');

        const readoutNum = document.getElementById('move-readout-number');
        const readoutPiece = document.getElementById('move-readout-piece');
        const readoutSquare = document.getElementById('move-readout-square');
        const readoutSkill = document.getElementById('move-readout-skill');
        const readoutDesc = document.getElementById('move-readout-desc');
        const readoutScore = document.getElementById('move-readout-score');

        const pieceUnicode = {
            king: '♔',
            queen: '♕',
            rook: '♖',
            bishop: '♗',
            knight: '♘',
            pawn: '♙',
        };

        const squareToCoords = (square) => {
            if (!square || square.length < 2) return null;
            const fileIdx = 'abcdefgh'.indexOf(square[0].toLowerCase());
            const rankNum = Number(square[1]);
            if (fileIdx === -1 || Number.isNaN(rankNum) || rankNum < 1 || rankNum > 8) return null;
            return {
                col: fileIdx,
                row: 8 - rankNum,
                x: fileIdx * 100 + 50,
                y: (8 - rankNum) * 100 + 50,
            };
        };

        const coordsToSquare = (col, row) => {
            if (col < 0 || col > 7 || row < 0 || row > 7) return null;
            return 'abcdefgh'[col] + String(8 - row);
        };

        let pieceSquares = initialMoves.map((m) => m.square);
        let selectedIdx = 0;
        let chessMode = 'free'; // 'free' | 'legal'
        let moveHistory = [];
        let vectorTrail = initialMoves.length ? [initialMoves[0].square] : [];
        let lastMoveSquares = [];
        let tourInterval = null;
        let tourStep = 0;
        const TOUR_DURATION_MS = 2400;

        const getPieceAtSquare = (square) => pieceSquares.findIndex((sq) => sq === square);

        const getChessLegalSquares = (pieceType, fromSquare) => {
            const origin = squareToCoords(fromSquare);
            if (!origin) return [];
            const results = [];
            const { col, row } = origin;
            const p = (pieceType || 'pawn').toLowerCase();

            const addRay = (dc, dr, maxSteps = 7) => {
                for (let step = 1; step <= maxSteps; step += 1) {
                    const sq = coordsToSquare(col + dc * step, row + dr * step);
                    if (!sq) break;
                    results.push(sq);
                    if (getPieceAtSquare(sq) !== -1) break;
                }
            };

            if (p === 'king') {
                for (let dc = -1; dc <= 1; dc += 1) {
                    for (let dr = -1; dr <= 1; dr += 1) {
                        if (dc !== 0 || dr !== 0) {
                            const sq = coordsToSquare(col + dc, row + dr);
                            if (sq) results.push(sq);
                        }
                    }
                }
            } else if (p === 'queen') {
                [[1,0],[-1,0],[0,1],[0,-1],[1,1],[1,-1],[-1,1],[-1,-1]].forEach(([dc, dr]) => addRay(dc, dr));
            } else if (p === 'rook') {
                [[1,0],[-1,0],[0,1],[0,-1]].forEach(([dc, dr]) => addRay(dc, dr));
            } else if (p === 'bishop') {
                [[1,1],[1,-1],[-1,1],[-1,-1]].forEach(([dc, dr]) => addRay(dc, dr));
            } else if (p === 'knight') {
                [[1,2],[2,1],[2,-1],[1,-2],[-1,-2],[-2,-1],[-2,1],[-1,2]].forEach(([dc, dr]) => {
                    const sq = coordsToSquare(col + dc, row + dr);
                    if (sq) results.push(sq);
                });
            } else {
                const oneUp = coordsToSquare(col, row - 1);
                if (oneUp && getPieceAtSquare(oneUp) === -1) {
                    results.push(oneUp);
                    if (row === 6) {
                        const twoUp = coordsToSquare(col, row - 2);
                        if (twoUp && getPieceAtSquare(twoUp) === -1) results.push(twoUp);
                    }
                }
                [-1, 1].forEach((dc) => {
                    const diag = coordsToSquare(col + dc, row - 1);
                    if (diag && getPieceAtSquare(diag) !== -1) results.push(diag);
                });
            }

            return results;
        };

        const renderMoveLog = () => {
            if (!moveLogEl) return;
            if (moveHistory.length === 0) {
                moveLogEl.innerHTML = '<span class="text-zinc-500">Click or drag any piece to start recording moves...</span>';
                return;
            }
            moveLogEl.innerHTML = '';
            moveHistory.slice(-8).forEach((entry, idx) => {
                const badge = document.createElement('span');
                badge.className = 'px-2 py-0.5 bg-zinc-900 border border-zinc-700 text-zinc-200 whitespace-nowrap';
                badge.textContent = `${moveHistory.length - Math.min(8, moveHistory.length) + idx + 1}. ${entry}`;
                moveLogEl.appendChild(badge);
            });
            moveLogEl.parentElement.scrollLeft = moveLogEl.parentElement.scrollWidth;
        };

        const syncBoardVisuals = () => {
            if (!initialMoves.length) return;
            const activeMove = selectedIdx !== null ? initialMoves[selectedIdx] : initialMoves[0];
            const activeSquare = selectedIdx !== null ? pieceSquares[selectedIdx] : pieceSquares[0];
            const legalTargets = selectedIdx !== null
                ? getChessLegalSquares(activeMove.piece, activeSquare)
                : [];

            skillBtns.forEach((btn) => {
                const match = Number(btn.dataset.chessMoveIndex) === selectedIdx;
                btn.classList.toggle('border-white', match);
                btn.classList.toggle('bg-zinc-900', match);
                btn.classList.toggle('border-zinc-800', !match);
            });

            pieceTokens.forEach((token) => {
                const idx = Number(token.dataset.pieceIdx);
                const coords = squareToCoords(pieceSquares[idx]);
                if (coords && !token.classList.contains('is-dragging')) {
                    token.style.transform = `translate3d(${coords.col * 100}%, ${coords.row * 100}%, 0)`;
                }
                token.classList.toggle('is-selected', idx === selectedIdx);
            });

            boardSquares.forEach((sqEl) => {
                const sq = sqEl.dataset.square;
                const isSelectedSq = selectedIdx !== null && sq === activeSquare;
                const isLast = lastMoveSquares.includes(sq);
                sqEl.classList.toggle('is-selected', isSelectedSq);
                sqEl.classList.toggle('is-last-move', isLast && !isSelectedSq);

                const hintSlot = sqEl.querySelector('.chess-hint-slot');
                if (hintSlot) {
                    hintSlot.innerHTML = '';
                    if (selectedIdx !== null && legalTargets.includes(sq)) {
                        const occupied = getPieceAtSquare(sq) !== -1;
                        const marker = document.createElement('span');
                        marker.className = occupied ? 'chess-hint-ring' : 'chess-hint-dot';
                        hintSlot.appendChild(marker);
                    }
                }
            });

            if (vectorPath) {
                const pts = vectorTrail
                    .slice(-6)
                    .map((sq) => squareToCoords(sq))
                    .filter(Boolean)
                    .map((c) => `${c.x},${c.y}`)
                    .join(' ');
                vectorPath.setAttribute('points', pts);
            }

            if (activeMove) {
                if (readoutNum) readoutNum.textContent = `PIECE ${String(activeMove.move_number).padStart(2, '0')}`;
                if (readoutPiece) readoutPiece.textContent = (activeMove.piece || 'KING').toUpperCase();
                if (readoutSquare) readoutSquare.textContent = `SQUARE ${(activeSquare || '').toUpperCase()}`;
                if (readoutSkill) readoutSkill.textContent = activeMove.skill || '';
                if (readoutDesc) readoutDesc.textContent = activeMove.description || '';
                if (readoutScore) readoutScore.textContent = `${activeMove.proficiency ?? 0}%`;
            }
        };

        const movePieceToSquare = (idx, targetSquare) => {
            if (idx === null || idx < 0 || idx >= initialMoves.length || !targetSquare) return false;
            const fromSquare = pieceSquares[idx];
            if (fromSquare === targetSquare) return false;

            const moveInfo = initialMoves[idx];
            if (chessMode === 'legal') {
                const legal = getChessLegalSquares(moveInfo.piece, fromSquare);
                if (!legal.includes(targetSquare)) return false;
            }

            const occupantIdx = getPieceAtSquare(targetSquare);
            if (occupantIdx !== -1 && occupantIdx !== idx) {
                pieceSquares[occupantIdx] = fromSquare;
            }
            pieceSquares[idx] = targetSquare;
            lastMoveSquares = [fromSquare, targetSquare];
            vectorTrail.push(targetSquare);

            const glyph = pieceUnicode[(moveInfo.piece || 'pawn').toLowerCase()] || '♙';
            const swapMark = occupantIdx !== -1 && occupantIdx !== idx ? '⇄' : '→';
            moveHistory.push(`${glyph} ${fromSquare}${swapMark}${targetSquare}`);
            renderMoveLog();
            syncBoardVisuals();

            const landingSq = boardSquares.find((sq) => sq.dataset.square === targetSquare);
            if (landingSq) {
                landingSq.classList.remove('is-drop-flash');
                void landingSq.offsetWidth;
                landingSq.classList.add('is-drop-flash');
            }
            return true;
        };

        const restartTourClock = () => {
            if (!tourBar) return;
            tourBar.style.transition = 'none';
            tourBar.style.width = '0%';
            requestAnimationFrame(() => {
                requestAnimationFrame(() => {
                    tourBar.style.transition = `width ${TOUR_DURATION_MS}ms linear`;
                    tourBar.style.width = '100%';
                });
            });
        };

        const stopAutoTour = () => {
            if (tourInterval) {
                clearInterval(tourInterval);
                tourInterval = null;
            }
            if (tourBar) {
                tourBar.style.transition = 'none';
                tourBar.style.width = '0%';
            }
            if (tourBtn) {
                tourBtn.innerHTML = '<i class="fas fa-play mr-1 text-[9px]"></i>Auto Tour';
                tourBtn.classList.remove('bg-white', 'text-zinc-950', 'font-bold');
                tourBtn.classList.add('text-zinc-300');
            }
        };

        // Click Squares to Move Selected Piece
        boardSquares.forEach((sqEl) => {
            sqEl.addEventListener('click', () => {
                stopAutoTour();
                const targetSq = sqEl.dataset.square;
                if (selectedIdx === null) {
                    const found = getPieceAtSquare(targetSq);
                    if (found !== -1) {
                        selectedIdx = found;
                        syncBoardVisuals();
                    }
                    return;
                }
                const moved = movePieceToSquare(selectedIdx, targetSq);
                if (!moved) {
                    const found = getPieceAtSquare(targetSq);
                    if (found !== -1) {
                        selectedIdx = found;
                        syncBoardVisuals();
                    }
                }
            });
        });

        // Drag-and-Drop + Click Selection on Piece Tokens
        pieceTokens.forEach((token) => {
            let startX = 0;
            let startY = 0;
            let baseCol = 0;
            let baseRow = 0;
            let hasDragged = false;
            let activeHoverSq = null;

            token.addEventListener('pointerdown', (e) => {
                if (e.button !== 0 && e.pointerType === 'mouse') return;
                e.stopPropagation();
                stopAutoTour();

                const idx = Number(token.dataset.pieceIdx);
                selectedIdx = idx;
                syncBoardVisuals();

                const coords = squareToCoords(pieceSquares[idx]);
                if (!coords) return;
                baseCol = coords.col;
                baseRow = coords.row;
                startX = e.clientX;
                startY = e.clientY;
                hasDragged = false;

                token.setPointerCapture(e.pointerId);
            });

            token.addEventListener('pointermove', (e) => {
                if (!token.hasPointerCapture(e.pointerId)) return;
                const rawDx = e.clientX - startX;
                const rawDy = e.clientY - startY;
                if (!hasDragged && Math.hypot(rawDx, rawDy) < 6) return;

                if (!hasDragged) {
                    hasDragged = true;
                    token.classList.add('is-dragging');
                }

                const isFlipped = chessboard?.classList.contains('is-flipped');
                const dx = isFlipped ? -rawDx : rawDx;
                const dy = isFlipped ? -rawDy : rawDy;
                token.style.transform = `translate3d(calc(${baseCol * 100}% + ${dx}px), calc(${baseRow * 100}% + ${dy}px), 0)`;

                token.style.visibility = 'hidden';
                const underEl = document.elementFromPoint(e.clientX, e.clientY);
                token.style.visibility = '';
                const hoverSqEl = underEl?.closest('.chess-square');

                boardSquares.forEach((sq) => sq.classList.remove('is-drop-hover'));
                if (hoverSqEl) {
                    hoverSqEl.classList.add('is-drop-hover');
                    activeHoverSq = hoverSqEl.dataset.square;
                } else {
                    activeHoverSq = null;
                }
            });

            const finishPointer = (e) => {
                if (token.hasPointerCapture(e.pointerId)) {
                    token.releasePointerCapture(e.pointerId);
                }
                boardSquares.forEach((sq) => sq.classList.remove('is-drop-hover'));

                if (hasDragged) {
                    token.classList.remove('is-dragging');
                    const idx = Number(token.dataset.pieceIdx);
                    if (activeHoverSq) {
                        movePieceToSquare(idx, activeHoverSq);
                    }
                    syncBoardVisuals();
                }
                hasDragged = false;
                activeHoverSq = null;
            };

            token.addEventListener('pointerup', finishPointer);
            token.addEventListener('pointercancel', finishPointer);
        });

        // Left-Side Skill Buttons Select & Highlight Piece
        skillBtns.forEach((btn) => {
            const idx = Number(btn.dataset.chessMoveIndex);
            btn.addEventListener('click', () => {
                stopAutoTour();
                selectedIdx = idx;
                syncBoardVisuals();
            });
            btn.addEventListener('mouseenter', () => {
                if (!tourInterval) {
                    selectedIdx = idx;
                    syncBoardVisuals();
                }
            });
        });

        if (modeBtn) {
            modeBtn.addEventListener('click', () => {
                chessMode = chessMode === 'free' ? 'legal' : 'free';
                modeBtn.textContent = chessMode === 'free' ? 'Mode: Free' : 'Mode: Chess Rules';
                modeBtn.classList.toggle('bg-white', chessMode === 'legal');
                modeBtn.classList.toggle('text-zinc-950', chessMode === 'legal');
                modeBtn.classList.toggle('font-bold', chessMode === 'legal');
                modeBtn.classList.toggle('bg-zinc-900', chessMode === 'free');
                modeBtn.classList.toggle('text-white', chessMode === 'free');
                syncBoardVisuals();
            });
        }

        if (resetBtn) {
            resetBtn.addEventListener('click', () => {
                stopAutoTour();
                pieceSquares = initialMoves.map((m) => m.square);
                selectedIdx = 0;
                moveHistory = [];
                lastMoveSquares = [];
                vectorTrail = initialMoves.length ? [initialMoves[0].square] : [];
                renderMoveLog();
                syncBoardVisuals();
            });
        }

        if (tourBtn) {
            const runTourStep = () => {
                if (!initialMoves.length) return;
                const idx = tourStep % initialMoves.length;
                selectedIdx = idx;
                const legal = getChessLegalSquares(initialMoves[idx].piece, pieceSquares[idx]);
                const emptyLegal = legal.filter((sq) => getPieceAtSquare(sq) === -1);
                const candidate = emptyLegal[0] || legal[0];
                if (candidate) {
                    movePieceToSquare(idx, candidate);
                } else {
                    syncBoardVisuals();
                }
                tourStep += 1;
            };

            tourBtn.addEventListener('click', () => {
                if (tourInterval) {
                    stopAutoTour();
                    return;
                }
                tourBtn.innerHTML = '<i class="fas fa-pause mr-1 text-[9px]"></i>Pause';
                tourBtn.classList.add('bg-white', 'text-zinc-950', 'font-bold');
                tourBtn.classList.remove('text-zinc-300');
                runTourStep();
                restartTourClock();
                tourInterval = setInterval(() => {
                    runTourStep();
                    restartTourClock();
                }, TOUR_DURATION_MS);
            });
        }

        if (flipBtn && chessboard) {
            flipBtn.addEventListener('click', () => {
                chessboard.classList.toggle('is-flipped');
                flipBtn.classList.toggle('bg-white');
                flipBtn.classList.toggle('text-zinc-950');
                flipBtn.classList.toggle('font-bold');
            });
        }

        const board3dBtn = document.getElementById('chess-3d-btn');
        const boardCabinet = document.getElementById('chessboard-cabinet');
        if (board3dBtn && boardCabinet) {
            board3dBtn.addEventListener('click', () => {
                const is3d = boardCabinet.classList.toggle('is-3d');
                board3dBtn.classList.toggle('bg-white', is3d);
                board3dBtn.classList.toggle('text-zinc-950', is3d);
                board3dBtn.classList.toggle('font-bold', is3d);
                board3dBtn.classList.toggle('text-zinc-300', !is3d);
            });
        }

        renderMoveLog();
        syncBoardVisuals();

        // 8. Smooth Animated Timeline & Portfolio Filtering
        const animateFilter = (items, shouldShowFn) => {
            items.forEach((item) => item.classList.add('filter-anim-out'));
            setTimeout(() => {
                let visibleIdx = 0;
                items.forEach((item) => {
                    const show = shouldShowFn(item);
                    item.classList.toggle('hidden', !show);
                    if (show) {
                        setTimeout(() => {
                            item.classList.remove('filter-anim-out');
                        }, visibleIdx * 45);
                        visibleIdx += 1;
                    }
                });
            }, 150);
        };

        const timelineBtns = document.querySelectorAll('.timeline-filter-btn');
        const timelineNodes = document.querySelectorAll('.timeline-node');
        timelineBtns.forEach((btn) => {
            btn.addEventListener('click', () => {
                const filter = btn.dataset.timelineFilter;
                timelineBtns.forEach((b) => {
                    const active = b === btn;
                    b.classList.toggle('bg-white', active);
                    b.classList.toggle('text-zinc-950', active);
                    b.classList.toggle('font-bold', active);
                    b.classList.toggle('text-zinc-400', !active);
                });
                animateFilter(timelineNodes, (node) => filter === 'all' || node.dataset.timelineType === filter || node.dataset.timelineCategory === filter);
                setTimeout(scheduleScrollUpdate, 280);
            });
        });

        const portfolioBtns = document.querySelectorAll('.portfolio-tab-btn');
        const portfolioCards = document.querySelectorAll('.portfolio-card');
        portfolioBtns.forEach((btn) => {
            btn.addEventListener('click', () => {
                const tab = btn.dataset.portfolioTab;
                portfolioBtns.forEach((b) => {
                    const active = b === btn;
                    b.classList.toggle('bg-zinc-950', active);
                    b.classList.toggle('text-white', active);
                    b.classList.toggle('font-bold', active);
                    b.classList.toggle('text-zinc-600', !active);
                });
                animateFilter(portfolioCards, (card) => tab === 'all' || card.dataset.portfolioCategory === tab);
            });
        });

        // 9. Comment Avatar File Label
        const photoInput = document.getElementById('comment-photo');
        const photoLabel = document.getElementById('comment-photo-label');
        if (photoInput && photoLabel) {
            photoInput.addEventListener('change', () => {
                photoLabel.textContent = photoInput.files?.[0]?.name || 'Optional Avatar (Max 5MB)';
            });
        }

        // 10. Smooth Animated Modals (CV & Portfolio Detail)
        const openModal = (modal) => {
            if (!modal) return;
            modal.classList.remove('hidden');
            requestAnimationFrame(() => modal.classList.add('is-open'));
        };

        const closeModal = (modal) => {
            if (!modal || modal.classList.contains('hidden')) return;
            modal.classList.remove('is-open');
            setTimeout(() => modal.classList.add('hidden'), 240);
        };

        const cvModal = document.getElementById('cv-modal');
        document.querySelectorAll('[data-open-cv]').forEach((btn) => {
            btn.addEventListener('click', () => openModal(cvModal));
        });

        const portfolioModal = document.getElementById('portfolio-modal');
        const modalImgWrap = document.getElementById('portfolio-modal-image-wrap');
        const modalImg = document.getElementById('portfolio-modal-image');
        const modalCategory = document.getElementById('portfolio-modal-category');
        const modalYear = document.getElementById('portfolio-modal-year');
        const modalTitle = document.getElementById('portfolio-modal-title');
        const modalIssuer = document.getElementById('portfolio-modal-issuer');
        const modalDesc = document.getElementById('portfolio-modal-description');
        const modalTags = document.getElementById('portfolio-modal-tags');
        const modalLink = document.getElementById('portfolio-modal-link');

        document.querySelectorAll('.open-portfolio-modal').forEach((btn) => {
            btn.addEventListener('click', () => {
                if (!portfolioModal) return;
                const { title, category, year, issuer, description, image, tags, link } = btn.dataset;
                modalCategory.textContent = category || '';
                modalYear.textContent = year || '';
                modalTitle.textContent = title || '';
                modalIssuer.textContent = issuer || '';
                modalDesc.textContent = description || '';

                if (image) {
                    modalImg.src = image;
                    modalImg.alt = title || '';
                    modalImgWrap.classList.remove('hidden');
                } else {
                    modalImgWrap.classList.add('hidden');
                }

                modalTags.innerHTML = '';
                if (tags) {
                    tags.split(',').filter(Boolean).forEach((tag) => {
                        const span = document.createElement('span');
                        span.className = 'px-2.5 py-1 border border-zinc-700 font-mono text-[10px] uppercase tracking-wider text-zinc-300';
                        span.textContent = tag.trim();
                        modalTags.appendChild(span);
                    });
                }

                if (link) {
                    modalLink.href = link;
                    modalLink.classList.remove('hidden');
                } else {
                    modalLink.classList.add('hidden');
                }

                openModal(portfolioModal);
            });
        });

        document.querySelectorAll('[data-close-modal]').forEach((btn) => {
            btn.addEventListener('click', () => closeModal(document.getElementById(btn.dataset.closeModal)));
        });

        [cvModal, portfolioModal].forEach((modal) => {
            if (!modal) return;
            modal.addEventListener('click', (e) => {
                if (e.target === modal) closeModal(modal);
            });
        });

        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                [cvModal, portfolioModal].forEach((m) => closeModal(m));
            }
        });
    });
</script>

<script type="module">
    const stageEl = document.getElementById('work-3d-stage');
    const canvasEl = document.getElementById('work-3d-canvas');
    const fallbackEl = document.getElementById('work-3d-fallback');
    const fallbackPieces = document.getElementById('work-fallback-pieces');
    const statusEl = document.getElementById('work-3d-status');
    const toneBtns = document.querySelectorAll('[data-work-3d-tone]');

    let activeTone = 'white';
    let apply3dToneFn = null;

    const updateFallbackTone = (tone) => {
        if (!fallbackPieces) return;
        fallbackPieces.classList.toggle('piece-tone-white', tone === 'white');
        fallbackPieces.classList.toggle('piece-tone-black', tone === 'black');
    };

    toneBtns.forEach((btn) => {
        btn.addEventListener('click', () => {
            activeTone = btn.dataset.work3dTone;
            toneBtns.forEach((b) => {
                const active = b === btn;
                b.classList.toggle('bg-white', active);
                b.classList.toggle('text-zinc-950', active);
                b.classList.toggle('font-bold', active);
                b.classList.toggle('text-zinc-300', !active);
            });
            updateFallbackTone(activeTone);
            if (apply3dToneFn) apply3dToneFn(activeTone);
        });
    });

    if (stageEl && canvasEl) {
        try {
            const THREE = await import('https://esm.sh/three@0.169.0');

            const renderer = new THREE.WebGLRenderer({ canvas: canvasEl, antialias: true, alpha: true });
            renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));

            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera(36, 1, 0.1, 100);
            camera.position.set(0, 3.3, 6.2);
            camera.lookAt(0, 0.9, 0);

            const resize = () => {
                const rect = stageEl.getBoundingClientRect();
                const w = Math.max(240, rect.width);
                const h = Math.max(280, rect.height);
                renderer.setSize(w, h, false);
                camera.aspect = w / h;
                camera.updateProjectionMatrix();
            };
            resize();
            window.addEventListener('resize', resize);

            // Studio Monochrome Lighting
            scene.add(new THREE.AmbientLight(0xffffff, 0.55));
            const keyLight = new THREE.DirectionalLight(0xffffff, 2.2);
            keyLight.position.set(4, 7, 5);
            scene.add(keyLight);
            const rimLight = new THREE.DirectionalLight(0xd4d4d8, 1.3);
            rimLight.position.set(-5, 4, -4);
            scene.add(rimLight);

            const group = new THREE.Group();
            scene.add(group);

            // 3D Checkered Plinth (4x4 Monochrome Tiles + Beveled Obsidian Frame)
            const frameMesh = new THREE.Mesh(
                new THREE.BoxGeometry(3.8, 0.28, 3.8),
                new THREE.MeshStandardMaterial({ color: 0x121215, roughness: 0.45, metalness: 0.35 })
            );
            frameMesh.position.y = -0.14;
            group.add(frameMesh);

            const lightTileMat = new THREE.MeshStandardMaterial({ color: 0xf4f4f1, roughness: 0.35, metalness: 0.1 });
            const darkTileMat = new THREE.MeshStandardMaterial({ color: 0x222227, roughness: 0.4, metalness: 0.25 });
            for (let x = 0; x < 4; x += 1) {
                for (let z = 0; z < 4; z += 1) {
                    const tile = new THREE.Mesh(
                        new THREE.BoxGeometry(0.84, 0.08, 0.84),
                        (x + z) % 2 === 0 ? lightTileMat : darkTileMat
                    );
                    tile.position.set((x - 1.5) * 0.86, 0.04, (z - 1.5) * 0.86);
                    group.add(tile);
                }
            }

            // Shared Piece Material (Switches live between Ivory White & Obsidian Black)
            const pieceMat = new THREE.MeshStandardMaterial({
                color: 0xfafafa,
                roughness: 0.24,
                metalness: 0.18,
            });

            apply3dToneFn = (tone) => {
                if (tone === 'black') {
                    pieceMat.color.setHex(0x1f1f24);
                    pieceMat.roughness = 0.22;
                    pieceMat.metalness = 0.48;
                } else {
                    pieceMat.color.setHex(0xfafafa);
                    pieceMat.roughness = 0.25;
                    pieceMat.metalness = 0.14;
                }
            };

            // 1. Lathe-Turned 3D King (Center)
            const kingProfile = [
                [0.0, 0.0], [0.56, 0.0], [0.56, 0.14], [0.46, 0.22],
                [0.34, 0.38], [0.22, 0.95], [0.19, 1.38], [0.34, 1.48],
                [0.24, 1.56], [0.36, 1.98], [0.28, 2.08], [0.0, 2.12],
            ].map(([r, y]) => new THREE.Vector2(r, y));
            const kingGroup = new THREE.Group();
            const kingBody = new THREE.Mesh(new THREE.LatheGeometry(kingProfile, 36), pieceMat);
            kingGroup.add(kingBody);
            const crossV = new THREE.Mesh(new THREE.BoxGeometry(0.11, 0.38, 0.11), pieceMat);
            crossV.position.y = 2.28;
            const crossH = new THREE.Mesh(new THREE.BoxGeometry(0.3, 0.1, 0.11), pieceMat);
            crossH.position.y = 2.33;
            kingGroup.add(crossV, crossH);
            kingGroup.position.set(0, 0.08, 0);
            group.add(kingGroup);

            // 2. Lathe-Turned 3D Pawn (Front Left)
            const pawnProfile = [
                [0.0, 0.0], [0.42, 0.0], [0.42, 0.11], [0.33, 0.19],
                [0.24, 0.32], [0.14, 0.78], [0.26, 0.86], [0.13, 0.94], [0.0, 0.96],
            ].map(([r, y]) => new THREE.Vector2(r, y));
            const pawnGroup = new THREE.Group();
            const pawnBody = new THREE.Mesh(new THREE.LatheGeometry(pawnProfile, 32), pieceMat);
            const pawnHead = new THREE.Mesh(new THREE.SphereGeometry(0.24, 28, 28), pieceMat);
            pawnHead.position.y = 1.14;
            pawnGroup.add(pawnBody, pawnHead);
            pawnGroup.position.set(-0.98, 0.08, 0.65);
            group.add(pawnGroup);

            // 3. Sculpted Extruded 3D Knight (Front Right)
            const knightShape = new THREE.Shape();
            knightShape.moveTo(-0.32, 0.2);
            knightShape.lineTo(0.34, 0.2);
            knightShape.bezierCurveTo(0.36, 0.72, 0.3, 1.12, 0.12, 1.44);
            knightShape.lineTo(0.06, 1.68);
            knightShape.lineTo(-0.1, 1.52);
            knightShape.bezierCurveTo(-0.34, 1.42, -0.48, 1.2, -0.5, 0.98);
            knightShape.lineTo(-0.28, 0.92);
            knightShape.bezierCurveTo(-0.14, 0.98, -0.06, 0.9, -0.1, 0.78);
            knightShape.bezierCurveTo(-0.22, 0.62, -0.32, 0.44, -0.32, 0.2);

            const knightGeo = new THREE.ExtrudeGeometry(knightShape, {
                depth: 0.26,
                bevelEnabled: true,
                bevelThickness: 0.06,
                bevelSize: 0.05,
                bevelSegments: 4,
            });
            knightGeo.translate(0, 0, -0.13);
            const knightGroup = new THREE.Group();
            const knightBase = new THREE.Mesh(new THREE.CylinderGeometry(0.36, 0.44, 0.2, 32), pieceMat);
            knightBase.position.y = 0.1;
            const knightHead = new THREE.Mesh(knightGeo, pieceMat);
            knightGroup.add(knightBase, knightHead);
            knightGroup.position.set(1.0, 0.08, 0.48);
            knightGroup.rotation.y = -0.55;
            group.add(knightGroup);

            // Activate Canvas & Hide Fallback
            canvasEl.classList.remove('hidden');
            if (fallbackEl) fallbackEl.classList.add('hidden');
            if (statusEl) statusEl.textContent = 'WEBGL 3D LIVE';

            // Pointer Drag Orbit + Smooth Idle Rotation
            let isOrbitDragging = false;
            let lastPtrX = 0;
            let lastPtrY = 0;
            let targetRotY = -0.35;
            let targetRotX = 0.12;

            canvasEl.addEventListener('pointerdown', (e) => {
                isOrbitDragging = true;
                lastPtrX = e.clientX;
                lastPtrY = e.clientY;
                canvasEl.setPointerCapture(e.pointerId);
            });
            canvasEl.addEventListener('pointermove', (e) => {
                if (!isOrbitDragging) return;
                targetRotY += (e.clientX - lastPtrX) * 0.012;
                targetRotX = Math.max(-0.25, Math.min(0.45, targetRotX + (e.clientY - lastPtrY) * 0.008));
                lastPtrX = e.clientX;
                lastPtrY = e.clientY;
            });
            const endOrbit = (e) => {
                isOrbitDragging = false;
                if (canvasEl.hasPointerCapture(e.pointerId)) {
                    canvasEl.releasePointerCapture(e.pointerId);
                }
            };
            canvasEl.addEventListener('pointerup', endOrbit);
            canvasEl.addEventListener('pointercancel', endOrbit);

            let clockT = 0;
            const animate3d = () => {
                clockT += 0.02;
                if (!isOrbitDragging) {
                    targetRotY += 0.0045;
                }
                pawnGroup.position.y = 0.08 + Math.sin(clockT * 1.3) * 0.06;
                knightGroup.position.y = 0.08 + Math.sin(clockT * 1.3 + 1.8) * 0.06;
                kingGroup.rotation.y = Math.sin(clockT * 0.6) * 0.14;
                group.rotation.y += (targetRotY - group.rotation.y) * 0.08;
                group.rotation.x += (targetRotX - group.rotation.x) * 0.08;
                renderer.render(scene, camera);
                requestAnimationFrame(animate3d);
            };
            animate3d();
        } catch (err) {
            if (statusEl) statusEl.textContent = '3D STAGE ACTIVE';
        }
    }
</script>
@endpush