@extends('layouts.app')

@section('content')

{{-- ═══════════════════════════════════════════
     HERO — Full-screen video background
═══════════════════════════════════════════ --}}
<section id="hero" class="relative h-screen min-h-[600px] flex items-center justify-center overflow-hidden">

    {{-- Video background --}}
    <video
        class="absolute inset-0 w-full h-full object-cover"
        autoplay muted loop playsinline preload="auto"
        poster="/images/hero_poster.jpg">
        <source src="/video/hero_video.mp4" type="video/mp4">
    </video>

    {{-- Dark overlay --}}
    <div class="absolute inset-0 bg-gradient-to-b from-[#1a0e08]/80 via-[#1a0e08]/40 to-[#1a0e08]/80"></div>

    {{-- Content --}}
    <div class="relative z-10 text-center px-6 max-w-5xl mx-auto">

        {{-- Eyebrow --}}
        <p class="font-sans text-[11px] font-medium tracking-[0.35em] text-[#e8c444] uppercase mb-6 animate-on-scroll">
            {{ __('site.hero_eyebrow') }}
        </p>

        {{-- Headline --}}
        <h1 class="font-display font-black text-[clamp(2.8rem,6vw,5.5rem)] leading-[1.05] text-[#f5f0e8] mb-6 animate-on-scroll">
            {!! nl2br(e(__('site.hero_headline'))) !!}
        </h1>

        {{-- Subtitle --}}
        <p class="font-accent italic text-[clamp(1.1rem,2vw,1.5rem)] text-[#f5f0e8]/65 mb-10 tracking-wide animate-on-scroll">
            {{ __('site.hero_subtitle') }}
        </p>

        {{-- CTA --}}
        <a href="#about"
           class="inline-block font-sans text-[12px] font-medium tracking-[0.25em] uppercase
                  bg-[#b5503a] hover:bg-[#a0422c] text-[#f5f0e8]
                  px-10 py-4 transition-all duration-300 hover:tracking-[0.3em] animate-on-scroll">
            {{ __('site.hero_cta') }}
        </a>
    </div>

    {{-- Scroll indicator --}}
    <div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 animate-bounce">
        <span class="font-sans text-[10px] tracking-[0.3em] text-[#f5f0e8]/40 uppercase">{{ __('site.hero_scroll') }}</span>
        <div class="w-px h-10 bg-gradient-to-b from-[#f5f0e8]/40 to-transparent"></div>
    </div>
</section>


{{-- ═══════════════════════════════════════════
     ABOUT — Concept & Story
═══════════════════════════════════════════ --}}
<section id="about" class="bg-[#f5f0e8] py-24 lg:py-36 overflow-hidden">
    <div class="max-w-[1400px] mx-auto px-8 lg:px-16">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">

            {{-- Text --}}
            <div class="{{ $dir === 'rtl' ? 'lg:order-1' : '' }}">
                <p class="font-sans text-[11px] font-medium tracking-[0.3em] text-[#b5503a] uppercase mb-5 animate-on-scroll">
                    {{ __('site.about_label') }}
                </p>
                <h2 class="font-display font-bold text-[clamp(2.2rem,4vw,3.5rem)] leading-[1.1] text-[#2c1810] mb-6 animate-on-scroll">
                    {{ __('site.about_heading') }}
                </h2>
                <p class="font-accent italic text-[clamp(1.1rem,1.8vw,1.35rem)] text-[#6b4c3b] leading-relaxed mb-6 animate-on-scroll">
                    {{ __('site.about_accent') }}
                </p>
                <p class="font-sans text-[15px] leading-[1.85] text-[#3d2214]/75 mb-10 animate-on-scroll">
                    {{ __('site.about_body') }}
                </p>
                <div class="flex items-center gap-4 animate-on-scroll">
                    <div class="w-10 h-px bg-[#b5503a]"></div>
                    <span class="font-sans text-[12px] font-medium tracking-[0.15em] text-[#b5503a] uppercase">
                        {{ __('site.about_vision') }}
                    </span>
                </div>
            </div>

            {{-- Images collage --}}
            <script>
                document.addEventListener('alpine:init', () => {
                    Alpine.store('about', { active: null, hover: null });
                });
            </script>
            <div class="relative h-[520px] {{ $dir === 'rtl' ? 'lg:order-2' : 'lg:order-1' }}">
                {{-- Large image (middle layer) --}}
                <div class="gallery-item absolute top-0 {{ $dir === 'rtl' ? 'right-0' : 'left-0' }} w-[68%] rounded-2xl shadow-2xl animate-on-scroll overflow-hidden cursor-pointer transition-transform duration-500 ease-out"
                     x-data="{ get open(){ return $store.about.active==='img1'; }, get hov(){ return $store.about.hover==='img1'; }, _t:null }"
                     :style="(open||hov) ? 'z-index:50' : 'z-index:20'"
                     :class="(open||hov) ? 'scale-[1.015]' : 'scale-100'"
                     @click="if($store.about.active==='img1'){ let s=$store.about; setTimeout(()=>{ s.active=null },480) } else { $store.about.active='img1' }"
                     @click.outside="if($store.about.active==='img1'){ let s=$store.about; setTimeout(()=>{ s.active=null },480) }"
                     @mouseenter="clearTimeout(_t); $store.about.hover='img1'"
                     @mouseleave="_t=setTimeout(()=>$store.about.hover=null,480)">
                    <div class="relative">
                        <img src="/images/about1.jpg" alt="Jemenitischer Kulturabend" class="block w-full h-auto" loading="lazy">
                        <div class="absolute inset-x-0 bottom-5 flex justify-center pointer-events-none transition-all duration-500"
                             :class="(open||hov) ? 'translate-y-3 opacity-0' : 'translate-y-0 opacity-100'">
                            <div class="animate-bounce">
                                <svg class="w-5 h-5 text-[#e8c444] drop-shadow-lg" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
                            </div>
                        </div>
                        <div class="absolute inset-x-0 bottom-0 h-1/2 px-5 pb-5 flex items-end bg-gradient-to-t from-[#1a0e08] via-[#1a0e08]/70 to-transparent transition-all duration-500 ease-out"
                             :class="(open||hov) ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'">
                            <p class="font-sans text-[12px] text-[#f5f0e8]/90 leading-relaxed">{{ __('site.about1_caption') }}</p>
                        </div>
                    </div>
                </div>
                {{-- Small top-right (drops when about2 hovered/active) --}}
                <div class="gallery-item absolute top-4 {{ $dir === 'rtl' ? 'left-0' : 'right-0' }} w-[38%] rounded-2xl shadow-xl animate-on-scroll overflow-hidden cursor-pointer transition-transform duration-500 ease-out"
                     x-data="{ get open(){ return $store.about.active==='img4'; }, get hov(){ return $store.about.hover==='img4'; }, _t:null }"
                     :style="(open||hov) ? 'z-index:50' : (($store.about.active==='img2'||$store.about.hover==='img2') ? 'z-index:5' : 'z-index:10')"
                     :class="(open||hov) ? 'scale-[1.015]' : 'scale-100'"
                     style="transition-delay:0.15s"
                     @click="if($store.about.active==='img4'){ let s=$store.about; setTimeout(()=>{ s.active=null },480) } else { $store.about.active='img4' }"
                     @click.outside="if($store.about.active==='img4'){ let s=$store.about; setTimeout(()=>{ s.active=null },480) }"
                     @mouseenter="clearTimeout(_t); $store.about.hover='img4'"
                     @mouseleave="_t=setTimeout(()=>$store.about.hover=null,480)">
                    <div class="relative">
                        <img src="/images/about4.jpg" alt="Kaffeekanne" class="block w-full h-auto" loading="lazy">
                        <div class="absolute inset-x-0 bottom-4 flex justify-center pointer-events-none transition-all duration-500"
                             :class="(open||hov) ? 'translate-y-3 opacity-0' : 'translate-y-0 opacity-100'">
                            <div class="animate-bounce">
                                <svg class="w-4 h-4 text-[#e8c444] drop-shadow-lg" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
                            </div>
                        </div>
                        <div class="absolute inset-x-0 bottom-0 h-1/2 px-4 pb-4 flex items-end bg-gradient-to-t from-[#1a0e08] via-[#1a0e08]/70 to-transparent transition-all duration-500 ease-out"
                             :class="(open||hov) ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'">
                            <p class="font-sans text-[11px] text-[#f5f0e8]/90 leading-relaxed">{{ __('site.about3_caption') }}</p>
                        </div>
                    </div>
                </div>
                {{-- Small bottom-right (drops when about4 hovered/active) --}}
                <div class="gallery-item absolute bottom-0 {{ $dir === 'rtl' ? 'left-6' : 'right-6' }} w-[44%] rounded-2xl shadow-xl animate-on-scroll overflow-hidden cursor-pointer transition-transform duration-500 ease-out"
                     x-data="{ get open(){ return $store.about.active==='img2'; }, get hov(){ return $store.about.hover==='img2'; }, _t:null }"
                     :style="(open||hov) ? 'z-index:50' : (($store.about.active==='img4'||$store.about.hover==='img4') ? 'z-index:5' : 'z-index:30')"
                     :class="(open||hov) ? 'scale-[1.015]' : 'scale-100'"
                     style="transition-delay:0.3s"
                     @click="if($store.about.active==='img2'){ let s=$store.about; setTimeout(()=>{ s.active=null },480) } else { $store.about.active='img2' }"
                     @click.outside="if($store.about.active==='img2'){ let s=$store.about; setTimeout(()=>{ s.active=null },480) }"
                     @mouseenter="clearTimeout(_t); $store.about.hover='img2'"
                     @mouseleave="_t=setTimeout(()=>$store.about.hover=null,480)">
                    <div class="relative">
                        <img src="/images/about2.jpg" alt="Veranstaltung" class="block w-full h-auto" loading="lazy">
                        <div class="absolute inset-x-0 bottom-4 flex justify-center pointer-events-none transition-all duration-500"
                             :class="(open||hov) ? 'translate-y-3 opacity-0' : 'translate-y-0 opacity-100'">
                            <div class="animate-bounce">
                                <svg class="w-4 h-4 text-[#e8c444] drop-shadow-lg" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
                            </div>
                        </div>
                        <div class="absolute inset-x-0 bottom-0 h-1/2 px-4 pb-4 flex items-end bg-gradient-to-t from-[#1a0e08] via-[#1a0e08]/70 to-transparent transition-all duration-500 ease-out"
                             :class="(open||hov) ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'">
                            <p class="font-sans text-[11px] text-[#f5f0e8]/90 leading-relaxed">{{ __('site.about2_caption') }}</p>
                        </div>
                    </div>
                </div>
                {{-- Decorative quote --}}
                <span class="absolute {{ $dir === 'rtl' ? 'left-[60%]' : 'right-[38%]' }} bottom-[32%] font-display text-[120px] leading-none text-[#b5503a]/10 select-none pointer-events-none">❝</span>
            </div>
        </div>
    </div>
</section>


{{-- ═══════════════════════════════════════════
     GALLERY — Photo grid
═══════════════════════════════════════════ --}}
<section id="gallery" class="bg-[#2c1810]" style="height: 150vh;">
    <div class="sticky top-0 overflow-hidden" style="height: 100vh;">

        {{-- Header --}}
        <div class="max-w-[1400px] mx-auto px-8 lg:px-16 pt-10 pb-6">
            <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4">
                <div>
                    <p class="font-sans text-[11px] font-medium tracking-[0.3em] text-[#e8c444] uppercase mb-3">
                        {{ __('site.gallery_label') }}
                    </p>
                    <h2 class="font-display font-bold text-[clamp(2rem,3.5vw,3rem)] text-[#f5f0e8]">
                        {{ __('site.gallery_heading') }}
                    </h2>
                </div>
                <a href="https://www.instagram.com/bonmochacafe/" target="_blank" rel="noopener"
                   class="font-sans text-[12px] font-medium tracking-[0.2em] uppercase text-[#b5503a] hover:text-[#e8c444] transition-colors flex-shrink-0">
                    {{ __('site.gallery_cta') }} →
                </a>
            </div>
        </div>

        {{-- Brick-wall rows --}}
        <div class="flex flex-col gap-3">

            {{-- Row 1: moves LEFT (morning) --}}
            <div class="w-full overflow-hidden" id="gallery-wrapper-1">
                <div id="gallery-track-1" class="flex gap-3" style="width: max-content; will-change: transform;">
                    @php $row1 = ['morning1.jpg','morning4.jpg','morning3.jpg','morning5.jpg','morning7.jpg','morning9.jpg','morning11.jpg','morning13.jpg','morning14.jpg','morning35.png','morning18.jpg','morning20.jpg']; @endphp
                    @foreach($row1 as $src)
                    <div class="flex-shrink-0 overflow-hidden rounded-sm" style="height:26vh;">
                        <img src="/images/{{ $src }}" alt="" class="h-full w-auto object-cover" loading="lazy">
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Row 2: moves RIGHT (night) --}}
            <div class="w-full overflow-hidden" id="gallery-wrapper-2">
                <div id="gallery-track-2" class="flex gap-3" style="width: max-content; will-change: transform;">
                    @php $row2 = ['night1.jpg','night3.jpg','night5.jpg','night8.jpg','night11.jpg','night13.jpg','night14.jpg','night17.jpg','night22.jpg','night25.jpg','night27.jpg','night30.jpg']; @endphp
                    @foreach($row2 as $src)
                    <div class="flex-shrink-0 overflow-hidden rounded-sm" style="height:26vh;">
                        <img src="/images/{{ $src }}" alt="" class="h-full w-auto object-cover" loading="lazy">
                    </div>
                    @endforeach
                </div>
            </div>

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


{{-- ═══════════════════════════════════════════
     TV / MEDIA — HR appearance
═══════════════════════════════════════════ --}}
<section id="tv" class="bg-[#1a0e08] py-24 lg:py-36">
    <div class="max-w-[1400px] mx-auto px-8 lg:px-16">

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">

            {{-- Text --}}
            <div>
                <p class="font-sans text-[11px] font-medium tracking-[0.3em] text-[#e8c444] uppercase mb-5 animate-on-scroll">
                    {{ __('site.tv_label') }}
                </p>
                <h2 class="font-display font-bold text-[clamp(2rem,3.5vw,3rem)] leading-[1.1] text-[#f5f0e8] mb-6 animate-on-scroll">
                    {{ __('site.tv_heading') }}
                </h2>
                <p class="font-sans text-[15px] leading-[1.85] text-[#f5f0e8]/65 mb-4 animate-on-scroll">
                    {{ __('site.tv_body') }}
                </p>
                <p class="font-sans text-[15px] leading-[1.85] text-[#f5f0e8]/65 mb-8 animate-on-scroll">
                    {{ __('site.tv_body2') }}
                </p>
                <a href="https://www.ardmediathek.de/video/die-ratgeber/die-ratgeber-vom-20-08-2025/hr/YTgyYjNiMjYtZmIxOS00NTI4LTk1NDEtYzcyZDE3NGZhYjk1"
                   target="_blank" rel="noopener"
                   class="inline-flex items-center gap-3 font-sans text-[13px] font-medium
                          text-[#e8c444] hover:text-[#f5f0e8] transition-colors duration-300 animate-on-scroll">
                    {{ __('site.tv_cta') }}
                </a>
            </div>

            {{-- Video --}}
            <div class="relative animate-on-scroll" id="video-container">

                {{-- HR badge --}}
                <div class="absolute top-4 right-4 z-20">
                    <span class="font-sans text-[10px] font-medium tracking-widest uppercase
                                 bg-[#e8c444] text-[#2c1810] px-3 py-1.5 inline-block">
                        HR · Die Ratgeber
                    </span>
                </div>

                {{-- Video element --}}
                <div class="aspect-video rounded-sm overflow-hidden shadow-2xl bg-[#2c1810] relative group" id="video-wrapper" dir="ltr">
                    <video id="bonmocha-video" class="w-full h-full object-cover pointer-events-none" preload="metadata">
                        <source src="/stream/onTV_compressed.mp4" type="video/mp4">
                        <track id="track-de" kind="subtitles" srclang="de" label="Deutsch" src="/stream/onTVde.vtt">
                        <track id="track-en" kind="subtitles" srclang="en" label="English" src="/stream/onTVen.vtt">
                        <track id="track-ar" kind="subtitles" srclang="ar" label="العربية" src="/stream/onTVar.vtt">
                    </video>

                    {{-- Centre play/pause feedback icon --}}
                    <div id="video-feedback" class="absolute inset-0 flex items-center justify-center pointer-events-none z-20">
                        <div id="video-feedback-inner"
                             class="w-16 h-16 rounded-full bg-[#1a0e08]/55 flex items-center justify-center"
                             style="opacity:0;">
                            <svg id="feedback-play-icon"  class="w-7 h-7 text-white"        fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                            <svg id="feedback-pause-icon" class="w-7 h-7 text-white hidden" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                        </div>
                    </div>

                    {{-- Start overlay --}}
                    <div id="video-start-overlay" class="absolute inset-0 flex items-center justify-center bg-[#1a0e08]/40 z-30 cursor-pointer">
                        <button type="button" id="btn-start" class="w-14 h-14 rounded-full bg-[#b5503a] hover:bg-[#c4614a] flex items-center justify-center shadow-2xl transition-transform duration-200 hover:scale-110">
                            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z"/>
                            </svg>
                        </button>
                    </div>

                    {{-- Custom subtitle display --}}
                    <div id="subtitle-display"
                         class="absolute left-0 right-0 text-center px-6 pointer-events-none hidden"
                         style="bottom: 72px;">
                        <span class="font-sans text-[13px] leading-relaxed text-white bg-[#1a0e08]/75 px-3 py-1 rounded-sm inline-block"></span>
                    </div>

                    {{-- Custom controls overlay --}}
                    <div id="video-controls"
                         class="absolute inset-0 flex flex-col justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300">

                        {{-- Gradient --}}
                        <div class="absolute inset-0 bg-gradient-to-t from-[#1a0e08]/80 via-transparent to-transparent pointer-events-none"></div>

                        {{-- Controls bar --}}
                        <div class="relative z-10 px-4 pb-4 pt-8">

                            {{-- Progress bar --}}
                            <div class="mb-3 group/progress cursor-pointer" id="progress-bar-container">
                                <div class="h-[3px] bg-[#f5f0e8]/20 rounded-full relative">
                                    <div id="progress-bar" class="h-full bg-[#e8c444] rounded-full relative transition-none" style="width:0%">
                                        <div class="absolute right-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-[#e8c444] rounded-full shadow-md opacity-0 group-hover/progress:opacity-100 transition-opacity"></div>
                                    </div>
                                </div>
                            </div>

                            {{-- Buttons row --}}
                            <div class="flex items-center gap-4">

                                {{-- Play/Pause --}}
                                <button type="button" id="btn-play" class="text-[#f5f0e8] hover:text-[#e8c444] transition-colors" aria-label="Play">
                                    <svg id="icon-play" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                                    <svg id="icon-pause" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                                </button>

                                {{-- Rewind 5s --}}
                                <button type="button" id="btn-rewind" class="text-[#f5f0e8]/70 hover:text-[#e8c444] transition-colors" aria-label="Rewind 5s">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 640 640">
                                        <path d="M88 256L232 256C241.7 256 250.5 250.2 254.2 241.2C257.9 232.2 255.9 221.9 249 215L202.3 168.3C277.6 109.7 386.6 115 455.8 184.2C530.8 259.2 530.8 380.7 455.8 455.7C380.8 530.7 259.3 530.7 184.3 455.7C174.1 445.5 165.3 434.4 157.9 422.7C148.4 407.8 128.6 403.4 113.7 412.9C98.8 422.4 94.4 442.2 103.9 457.1C113.7 472.7 125.4 487.5 139 501C239 601 401 601 501 501C601 401 601 239 501 139C406.8 44.7 257.3 39.3 156.7 122.8L105 71C98.1 64.2 87.8 62.1 78.8 65.8C69.8 69.5 64 78.3 64 88L64 232C64 245.3 74.7 256 88 256z"/>
                                        <text x="340" y="415" text-anchor="middle" font-size="210" font-family="sans-serif" font-weight="bold" fill="currentColor">5</text>
                                    </svg>
                                </button>

                                {{-- Forward 5s --}}
                                <button type="button" id="btn-forward" class="text-[#f5f0e8]/70 hover:text-[#e8c444] transition-colors" aria-label="Forward 5s">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 640 640">
                                        <path d="M552 256L408 256C398.3 256 389.5 250.2 385.8 241.2C382.1 232.2 384.1 221.9 391 215L437.7 168.3C362.4 109.7 253.4 115 184.2 184.2C109.2 259.2 109.2 380.7 184.2 455.7C259.2 530.7 380.7 530.7 455.7 455.7C463.9 447.5 471.2 438.8 477.6 429.6C487.7 415.1 507.7 411.6 522.2 421.7C536.7 431.8 540.2 451.8 530.1 466.3C521.6 478.5 511.9 490.1 501 501C401 601 238.9 601 139 501C39.1 401 39 239 139 139C233.3 44.7 382.7 39.4 483.3 122.8L535 71C541.9 64.1 552.2 62.1 561.2 65.8C570.2 69.5 576 78.3 576 88L576 232C576 245.3 565.3 256 552 256z"/>
                                        <text x="300" y="415" text-anchor="middle" font-size="210" font-family="sans-serif" font-weight="bold" fill="currentColor">5</text>
                                    </svg>
                                </button>

                                {{-- Mute --}}
                                <button type="button" id="btn-mute" class="text-[#f5f0e8] hover:text-[#e8c444] transition-colors" aria-label="Mute">
                                    <svg id="icon-unmuted" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>
                                    <svg id="icon-muted" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 24 24"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>
                                </button>

                                {{-- Time --}}
                                <span id="video-time" class="font-sans text-[11px] text-[#f5f0e8]/70 tabular-nums">0:00 / 0:00</span>

                                {{-- Spacer --}}
                                <div class="flex-1"></div>

                                {{-- CC button --}}
                                <div class="relative flex items-center" id="cc-wrapper">
                                    <button type="button" id="btn-cc" class="font-sans text-[10px] font-bold tracking-wider border border-[#f5f0e8]/40 text-[#f5f0e8]/70 hover:border-[#e8c444] hover:text-[#e8c444] px-2 leading-5 transition-colors rounded-sm" aria-label="Subtitles">
                                        CC
                                    </button>
                                    {{-- CC menu --}}
                                    <div id="cc-menu" class="hidden absolute bottom-8 right-0 bg-[#2c1810] border border-[#b5503a]/30 rounded-sm overflow-hidden min-w-[100px]">
                                        <button type="button" data-lang="off" class="cc-option w-full text-left font-sans text-[11px] text-[#f5f0e8]/70 hover:text-[#e8c444] hover:bg-[#1a0e08] px-4 py-2 transition-colors">Aus / Off</button>
                                        <button type="button" data-lang="de"  class="cc-option w-full text-left font-sans text-[11px] text-[#f5f0e8]/70 hover:text-[#e8c444] hover:bg-[#1a0e08] px-4 py-2 transition-colors">Deutsch</button>
                                        <button type="button" data-lang="en"  class="cc-option w-full text-left font-sans text-[11px] text-[#f5f0e8]/70 hover:text-[#e8c444] hover:bg-[#1a0e08] px-4 py-2 transition-colors">English</button>
                                        <button type="button" data-lang="ar"  class="cc-option w-full text-left font-sans text-[11px] text-[#f5f0e8]/70 hover:text-[#e8c444] hover:bg-[#1a0e08] px-4 py-2 transition-colors">العربية</button>
                                    </div>
                                </div>

                                {{-- Fullscreen --}}
                                <button type="button" id="btn-fs" class="flex items-center text-[#f5f0e8]/70 hover:text-[#e8c444] transition-colors" aria-label="Fullscreen">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
                                </button>

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


{{-- ═══════════════════════════════════════════
     VISION 31 + LOCATION — merged
═══════════════════════════════════════════ --}}
<section id="vision" class="bg-[#f5f0e8] min-h-screen flex items-center overflow-hidden">

    <div class="w-full max-w-[1400px] mx-auto px-8 lg:px-16 py-24 lg:py-32">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">

            {{-- Left: Text --}}
            <div class="{{ $dir === 'rtl' ? 'lg:order-2' : '' }}">
                <p class="font-sans text-[11px] font-medium tracking-[0.3em] text-[#b5503a] uppercase mb-6 animate-on-scroll">
                    {{ __('site.place_eyebrow') }}
                </p>
                <h2 class="font-display font-black text-[clamp(3rem,5.5vw,5rem)] leading-[1] text-[#2c1810] mb-3 animate-on-scroll">
                    {{ __('site.place_heading') }}
                </h2>
                <p class="font-accent italic text-[clamp(1.4rem,2.5vw,2rem)] text-[#b5503a] mb-8 animate-on-scroll">
                    {{ __('site.place_sub') }}
                </p>
                <p class="font-sans text-[15px] leading-[1.85] text-[#3d2214]/70 mb-10 animate-on-scroll">
                    {{ __('site.place_body') }}
                </p>
                <div class="flex items-center gap-5 animate-on-scroll">
                    <span class="font-sans text-[10px] font-medium tracking-[0.4em] uppercase
                                 bg-[#b5503a] text-[#f5f0e8] px-5 py-2.5 inline-block">
                        {{ __('site.location_badge') }}
                    </span>
                    <span class="font-sans text-[12px] font-medium tracking-[0.1em] text-[#6b4c3b] uppercase">
                        {{ __('site.location_address') }}
                    </span>
                </div>
            </div>

            {{-- Right: Building image --}}
            <div class="relative h-[520px] animate-on-scroll {{ $dir === 'rtl' ? 'lg:order-1' : '' }}">
                <img src="/images/vision31-event.jpg" alt="Kulturcampus Frankfurt · Vision 31"
                     class="w-full h-full object-cover rounded-sm shadow-2xl">
                <div class="absolute inset-0 bg-gradient-to-t from-[#1a0e08]/70 to-transparent rounded-sm"></div>
                <div class="absolute bottom-6 {{ $dir === 'rtl' ? 'right-6' : 'left-6' }}">
                    <span class="font-sans text-[10px] font-medium tracking-[0.25em] uppercase
                                 bg-[#e8c444] text-[#2c1810] px-4 py-2 inline-block">
                        {{ __('site.vision_badge') }}
                    </span>
                </div>
            </div>

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


@if(false)
{{-- ═══════════════════════════════════════════
     PRESS / ARTICLES — disabled, re-enable by removing @if(false) / @endif
═══════════════════════════════════════════ --}}
<section id="press" class="bg-[#faf7f2] py-24 lg:py-32">
    <div class="max-w-[1400px] mx-auto px-8 lg:px-16">

        <div class="mb-14">
            <p class="font-sans text-[11px] font-medium tracking-[0.3em] text-[#b5503a] uppercase mb-4 animate-on-scroll">
                {{ __('site.press_label') }}
            </p>
            <h2 class="font-display font-bold text-[clamp(2rem,3.5vw,3rem)] text-[#2c1810] animate-on-scroll">
                {{ __('site.press_heading') }}
            </h2>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

            {{-- Article 1 --}}
            <article class="group bg-white border border-[#d4c4a8]/40 rounded-sm overflow-hidden
                            hover:shadow-xl hover:-translate-y-1 transition-all duration-400 animate-on-scroll">
                <div class="h-[240px] overflow-hidden">
                    <img src="/images/img-05.jpg" alt="{{ __('site.article1_title') }}"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                         loading="lazy">
                </div>
                <div class="p-8">
                    <div class="flex items-center gap-3 mb-4">
                        <span class="font-sans text-[10px] font-medium tracking-[0.25em] uppercase
                                     bg-[#b5503a]/10 text-[#b5503a] px-3 py-1.5">
                            {{ __('site.article1_tag') }}
                        </span>
                        <span class="font-sans text-[12px] text-[#6b4c3b]/50">{{ __('site.article1_date') }}</span>
                    </div>
                    <h3 class="font-display font-bold text-[1.4rem] leading-snug text-[#2c1810] mb-3 group-hover:text-[#b5503a] transition-colors">
                        {{ __('site.article1_title') }}
                    </h3>
                    <p class="font-sans text-[14px] leading-relaxed text-[#6b4c3b]/80">
                        {{ __('site.article1_excerpt') }}
                    </p>
                </div>
            </article>

            {{-- Article 2 --}}
            <article class="group bg-white border border-[#d4c4a8]/40 rounded-sm overflow-hidden
                            hover:shadow-xl hover:-translate-y-1 transition-all duration-400 animate-on-scroll"
                     style="transition-delay:0.1s">
                <div class="h-[240px] overflow-hidden">
                    <img src="/images/vision31-event.jpg" alt="{{ __('site.article2_title') }}"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                         loading="lazy">
                </div>
                <div class="p-8">
                    <div class="flex items-center gap-3 mb-4">
                        <span class="font-sans text-[10px] font-medium tracking-[0.25em] uppercase
                                     bg-[#2c1810]/10 text-[#2c1810] px-3 py-1.5">
                            {{ __('site.article2_tag') }}
                        </span>
                        <span class="font-sans text-[12px] text-[#6b4c3b]/50">{{ __('site.article2_date') }}</span>
                    </div>
                    <h3 class="font-display font-bold text-[1.4rem] leading-snug text-[#2c1810] mb-3 group-hover:text-[#b5503a] transition-colors">
                        {{ __('site.article2_title') }}
                    </h3>
                    <p class="font-sans text-[14px] leading-relaxed text-[#6b4c3b]/80">
                        {{ __('site.article2_excerpt') }}
                    </p>
                </div>
            </article>
        </div>
    </div>
</section>
@endif






@if(false)
{{-- ═══════════════════════════════════════════
     CONTACT — disabled, re-enable by removing @if(false) / @endif
═══════════════════════════════════════════ --}}
<section id="contact" class="bg-[#f5f0e8] py-24 lg:py-36">
    <div class="max-w-[1400px] mx-auto px-8 lg:px-16">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">

            {{-- Left: Text --}}
            <div>
                <p class="font-sans text-[11px] font-medium tracking-[0.3em] text-[#b5503a] uppercase mb-5 animate-on-scroll">
                    {{ __('site.contact_label') }}
                </p>
                <h2 class="font-display font-bold text-[clamp(2.5rem,4vw,3.5rem)] leading-[1.05] text-[#2c1810] mb-6 animate-on-scroll">
                    {{ __('site.contact_heading') }}
                </h2>
                <p class="font-sans text-[15px] leading-[1.85] text-[#3d2214]/70 mb-12 animate-on-scroll">
                    {{ __('site.contact_body') }}
                </p>

                {{-- Contact links --}}
                <div class="space-y-5 animate-on-scroll">
                    <a href="https://www.instagram.com/bonmochacafe/" target="_blank" rel="noopener"
                       class="flex items-center gap-5 group">
                        <div class="w-12 h-12 rounded-full border border-[#b5503a]/30 group-hover:bg-[#b5503a] group-hover:border-[#b5503a] flex items-center justify-center transition-all duration-300">
                            <svg class="w-5 h-5 text-[#b5503a] group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                            </svg>
                        </div>
                        <div>
                            <p class="font-sans text-[11px] tracking-widest text-[#6b4c3b]/50 uppercase mb-0.5">{{ __('site.contact_instagram') }}</p>
                            <p class="font-sans text-[15px] font-medium text-[#2c1810] group-hover:text-[#b5503a] transition-colors">@bonmochacafe</p>
                        </div>
                    </a>
                </div>
            </div>

            {{-- Right: Large decorative image --}}
            <div class="relative h-[500px] animate-on-scroll">
                <img src="/images/img-45.jpg" alt="Bon Mocha Kontakt"
                     class="w-full h-full object-cover rounded-sm shadow-xl">
                <div class="absolute inset-0 bg-gradient-to-t from-[#2c1810]/40 to-transparent rounded-sm"></div>
                <blockquote class="absolute bottom-8 {{ $dir === 'rtl' ? 'right-8 left-8' : 'left-8 right-8' }} bg-[#2c1810]/90 backdrop-blur-sm p-6">
                    <p class="font-accent italic text-[1.1rem] leading-relaxed text-[#f5f0e8]/90 mb-3">
                        "Frankfurt schmeckt den Jemen."
                    </p>
                    <span class="font-sans text-[11px] tracking-widest text-[#e8c444]/70 uppercase">— BON MOCHA</span>
                </blockquote>
            </div>
        </div>
    </div>
</section>
@endif

@endsection