@extends('layouts.master')

@section('title', $banner->title ?? 'Setara Group - Future of Manufacturing')

@section('content')
    <!-- Hero Section -->
    <section class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20 pb-10">
        <!-- Background Video/Image -->
        @if($banner && $banner->image)
            @if(Str::endsWith($banner->image, ['.mp4', '.webm', '.ogg']))
                <video autoplay muted loop playsinline
                    class="absolute inset-0 w-full h-full object-cover opacity-20 pointer-events-none z-0">
                    <source src="{{ asset('storage/' . $banner->image) }}" type="video/mp4">
                </video>
            @else
                <div class="absolute inset-0 w-full h-full z-0">
                    <img src="{{ asset('storage/' . $banner->image) }}" alt="Hero Background"
                        class="w-full h-full object-cover opacity-20">
                </div>
            @endif
        @else
            <video autoplay muted loop playsinline
                class="absolute inset-0 w-full h-full object-cover opacity-20 pointer-events-none z-0">
                <source src="{{ asset('file.mp4') }}" type="video/mp4">
            </video>
        @endif

        <!-- Dark Overlay -->
        <div class="absolute inset-0 bg-background/60 z-0 pointer-events-none"></div>

        <!-- Background Glow -->
        <div class="absolute inset-0 bg-hero-glow pointer-events-none z-0"></div>

        <!-- Decorative Grid -->
        <div class="absolute inset-0 opacity-[0.03]"
            style="background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 30px 30px;">
        </div>

        <div class="container mx-auto px-6 relative z-10 text-center">
            <h1 class="text-5xl md:text-7xl font-bold tracking-tight mt-8 md:mt-12 mb-8 animate-fade-in-up"
                style="animation-delay: 0.1s;">
                @if($banner && $banner->title)
                    {!! str_replace(['Garment', 'Manufacturing'], ['<span class="text-gradient">Garment</span>', 'Manufacturing'], $banner->title) !!}
                @else
                    Redefining <span class="text-gradient">Garment</span> <br> Manufacturing
                @endif
            </h1>

            <p class="text-lg md:text-xl text-secondary max-w-2xl mx-auto mb-10 leading-relaxed animate-fade-in-up"
                style="animation-delay: 0.2s;">
                {{ $banner->subtitle ?? 'Setara Group, founded by the visionary AKM Salahuddin in 1985, embarked on its journey as an export-oriented manufacturer of readymade garments.' }}
            </p>

            <div class="flex flex-col md:flex-row items-center justify-center gap-4 animate-fade-in-up"
                style="animation-delay: 0.3s;">
                <a href="{{ url($banner->button_link ?? '/projects') }}"
                    class="px-8 py-4 bg-primary text-black font-bold rounded-lg hover:translate-y-[-2px] transition-transform duration-300 glow-button w-full md:w-auto">
                    {{ $banner->button_text ?? 'View Projects' }}
                </a>
                <a href="{{ url('/about') }}"
                    class="px-8 py-4 bg-white/5 text-foreground font-semibold rounded-lg border border-white/10 hover:bg-white/10 hover:border-white/20 transition-all duration-300 w-full md:w-auto backdrop-blur-sm">
                    Our Journey
                </a>
            </div>

            @if($banner && $banner->badge)
                <div class="inline-flex items-center px-3 py-1 rounded-full border border-primary/20 bg-primary/5 text-primary text-xs font-semibold tracking-wider uppercase mt-8 animate-fade-in-up"
                    style="animation-delay: 0.4s;">
                    <span class="w-2 h-2 rounded-full bg-primary mr-2 animate-pulse"></span>
                    {{ $banner->badge }}
                </div>
            @endif

            <!-- Stats Floating Cards -->
            <div class="mt-20 grid grid-cols-1 md:grid-cols-3 gap-6 animate-fade-in-up" style="animation-delay: 0.5s;">
                @foreach($stats as $index => $stat)
                    <div
                        class="glass-card p-6 rounded-2xl hover:border-primary/50 transition-all duration-300 hover:-translate-y-2 group cursor-default {{ $index === 1 ? 'transform md:-translate-y-4' : '' }}">
                        <div
                            class="w-16 h-16 mx-auto mb-4 rounded-full bg-white/5 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                            <i
                                class="{{ $stat->icon ?? 'fas fa-chart-line' }} text-3xl text-primary group-hover:scale-110 transition-transform duration-300"></i>
                        </div>
                        <div class="text-4xl font-bold text-foreground mb-2 group-hover:text-primary transition-colors">
                            {{ $stat->value }}
                        </div>
                        <p class="text-sm text-secondary leading-snug">{!! nl2br(e($stat->title)) !!}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Premium Clients Section -->
    <section class="border-y border-[color:var(--border-color)] bg-surface relative pt-24 pb-24 overflow-hidden"
        id="our-clients">
        <!-- Background Elements -->
        <div
            class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(var(--accent),0.05)_0%,transparent_70%)] pointer-events-none z-0">
        </div>
        <div class="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent"></div>

        <div class="container mx-auto px-6 relative z-10 mb-16">
            <div class="flex flex-col items-center text-center">
                <div
                    class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold tracking-widest uppercase mb-6">
                    <span class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></span>
                    Trusted Partners
                </div>
                <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6">Our <span
                        class="text-gradient">Premium</span> Clients</h2>
                <p class="text-secondary max-w-2xl text-sm md:text-base leading-relaxed">
                    Collaborating with industry leaders to deliver excellence. Our strong partnerships reflect our
                    commitment to quality and innovation.
                </p>
            </div>
        </div>

        <!-- Animated Marquee Container -->
        <div class="relative w-full overflow-hidden">
            <!-- Fade Edges -->
            <div
                class="absolute inset-y-0 left-0 w-16 md:w-32 bg-gradient-to-r from-surface to-transparent z-20 pointer-events-none">
            </div>
            <div
                class="absolute inset-y-0 right-0 w-16 md:w-32 bg-gradient-to-l from-surface to-transparent z-20 pointer-events-none">
            </div>

            <div class="flex py-4 gap-6 md:gap-8 group/marquee client-marquee-wrapper overflow-hidden">
                <!-- 4 identical groups for a true seamless infinite scroll that covers any screen width -->
                @for ($i = 0; $i < 4; $i++)
                    <div class="flex shrink-0 gap-6 md:gap-8 items-center client-marquee-group"
                        aria-hidden="{{ $i > 0 ? 'true' : 'false' }}">
                        @foreach($clients as $client)
                            <div
                                class="client-card w-48 h-32 md:w-64 md:h-40 glass-card rounded-2xl flex items-center justify-center p-6 cursor-pointer relative shadow-lg overflow-hidden shrink-0">
                                <!-- Hover Glow -->
                                <div
                                    class="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent opacity-0 transition-opacity duration-500 rounded-2xl pointer-events-none glow-overlay">
                                </div>
                                @if($client->logo)
                                    <div class="relative w-full h-full flex items-center justify-center">
                                        <img src="{{ asset('storage/' . $client->logo) }}" alt="{{ $client->name }}"
                                            class="client-logo theme-logo max-h-16 md:max-h-24 w-auto object-contain">
                                    </div>
                                @else
                                    <h3
                                        class="text-xl md:text-2xl font-bold text-secondary/50 client-text font-serif tracking-wide text-center">
                                        {{ $client->name }}
                                    </h3>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @endfor
            </div>
        </div>
    </section>

    <!-- Our Journey Section -->
    <section class="pt-20 pb-10 relative overflow-hidden" id="our-journey">
        <div class="container mx-auto px-6 relative">
            <div class="text-center mb-20 pointer-events-none">
                <h2 class="text-3xl md:text-5xl font-bold mb-4">Our <span class="text-gradient">Journey</span></h2>
                <p class="text-secondary max-w-xl mx-auto">Decades of excellence, innovation, and growth in the garment
                    industry.</p>
            </div>

            <div class="relative max-w-5xl mx-auto">
                <!-- Vertical Line -->
                <div
                    class="absolute left-4 md:left-1/2 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary/0 via-primary/50 to-primary/0 md:-ml-[1px] h-full">
                </div>

                @foreach($timelines as $index => $timeline)
                    <div class="relative z-10 mb-16 md:mb-24 flex flex-col md:flex-row items-center timeline-item opacity-0 translate-y-8 transition-all duration-1000 ease-out"
                        style="transition-delay: {{ $index * 200 }}ms;">
                        <!-- Date/Dot Mobile -->
                        <div class="flex items-center w-full md:hidden mb-4 pl-12 relative">
                            <div
                                class="absolute left-[11px] w-4 h-4 bg-primary rounded-full shadow-[0_0_10px_rgba(var(--accent),0.8)] border-2 border-black">
                            </div>
                            <span class="text-primary font-bold text-xl ml-2">{{ $timeline->year }}</span>
                        </div>

                        @if($index % 2 == 0)
                            <!-- Content Left -->
                            <div class="w-full md:w-1/2 md:pr-12 md:text-right pl-12 md:pl-0">
                                <div
                                    class="glass-card p-6 md:p-8 rounded-2xl hover:border-primary/50 transition-colors relative group">
                                    <h3 class="text-2xl font-bold text-foreground mb-2">{{ $timeline->title }}</h3>
                                    <p class="text-secondary leading-relaxed">
                                        {!! $timeline->description !!}
                                    </p>
                                    <!-- Arrow -->
                                    <div
                                        class="absolute top-6 -right-3 hidden md:block w-6 h-6 bg-[rgb(var(--bg-secondary))] rotate-45 border-r border-t border-white/10 group-hover:border-primary/50 transition-colors">
                                    </div>
                                </div>
                            </div>
                            <!-- Center Dot Desktop -->
                            <div
                                class="hidden md:flex absolute left-1/2 -ml-3 w-6 h-6 bg-primary rounded-full shadow-[0_0_15px_rgba(var(--accent),0.6)] border-4 border-background z-20 items-center justify-center">
                            </div>
                            <!-- Date Right Desktop -->
                            <div class="w-full md:w-1/2 md:pl-12 hidden md:block">
                                <span
                                    class="text-6xl font-bold text-foreground/5 md:text-foreground/10 select-none">{{ $timeline->year }}</span>
                            </div>
                        @else
                            <!-- Date Left Desktop -->
                            <div class="w-full md:w-1/2 md:pr-12 hidden md:block text-right">
                                <span
                                    class="text-6xl font-bold text-foreground/5 md:text-foreground/10 select-none">{{ $timeline->year }}</span>
                            </div>
                            <!-- Center Dot -->
                            <div
                                class="hidden md:flex absolute left-1/2 -ml-3 w-6 h-6 bg-primary rounded-full shadow-[0_0_15px_rgba(var(--accent),0.6)] border-4 border-background z-20">
                            </div>
                            <!-- Content Right -->
                            <div class="w-full md:w-1/2 md:pl-12 pl-12">
                                <div
                                    class="glass-card p-6 md:p-8 rounded-2xl hover:border-primary/50 transition-colors relative group">
                                    <h3 class="text-2xl font-bold text-foreground mb-2">{{ $timeline->title }}</h3>
                                    <p class="text-secondary leading-relaxed">
                                        {!! $timeline->description !!}
                                    </p>
                                    <!-- Arrow -->
                                    <div
                                        class="absolute top-6 -left-3 hidden md:block w-6 h-6 bg-[rgb(var(--bg-secondary))] rotate-45 border-l border-b border-white/10 group-hover:border-primary/50 transition-colors">
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Production Hub Section -->
    <section
        class="w-full min-h-[85vh] relative flex items-center justify-center overflow-hidden group bg-surface pt-20 pb-10"
        id="production-section">
        <!-- Background Image -->
        <div class="absolute inset-0 z-0">
            <img id="production-bg" src="" alt="Production Hub"
                class="w-full h-full object-cover transition-all duration-1000 filter brightness-[0.6] contrast-[1.1]">
        </div>

        <!-- Overlays -->
        <div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-black/40 z-10"></div>
        <div class="absolute inset-0 bg-primary/5 mix-blend-overlay pointer-events-none z-10"></div>

        <!-- Right Side Navigation -->
        <div class="absolute right-6 top-1/2 -translate-y-1/2 z-30 flex flex-col gap-4 hidden md:flex">
            @foreach($productionHubs as $index => $hub)
                <button onclick="switchSlide({{ $index }})" class="relative group/nav cursor-pointer focus:outline-none">
                    <div class="w-12 h-12 rounded-full border-2 border-border-color bg-foreground/10 backdrop-blur-md flex items-center justify-center hover:bg-primary hover:border-primary transition-all duration-300 nav-dot"
                        data-index="{{ $index }}">
                        <i class="{{ $hub->icon ?? 'fas fa-industry' }} text-foreground/70 group-hover/nav:text-background"></i>
                    </div>
                    <div
                        class="absolute right-14 top-1/2 -translate-y-1/2 bg-background/80 text-foreground text-xs px-3 py-1 rounded opacity-0 group-hover/nav:opacity-100 transition-opacity whitespace-nowrap pointer-events-none backdrop-blur-sm border border-border-color">
                        {{ $hub->title }}
                    </div>
                </button>
            @endforeach
        </div>

        <!-- Bottom Info -->
        <div class="absolute bottom-10 left-10 z-20 max-w-lg transition-all duration-500" id="production-info">
            <div class="flex items-center space-x-4 mb-4">
                <div class="h-px w-12 bg-primary"></div>
                <span class="text-primary tracking-widest uppercase text-xs font-bold"
                    id="production-category">Category</span>
            </div>
            <h3 class="text-3xl font-bold text-foreground mb-2" id="production-title">Title</h3>
            <p class="text-secondary/90 text-sm leading-relaxed" id="production-desc">
                Description
            </p>
        </div>

        <!-- Morphing Background Blob -->
        <div class="absolute left-10Bottom-0 z-10 w-[600px] h-[600px] opacity-30 pointer-events-none mix-blend-screen transition-all duration-1000"
            id="morph-container" style="left: -100px; bottom: -100px;">
            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full filter blur-3xl">
                <defs>
                    <linearGradient id="gold-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" style="stop-color:rgb(var(--accent));stop-opacity:1" />
                        <stop offset="100%" style="stop-color:rgb(var(--accent-hover));stop-opacity:1" />
                    </linearGradient>
                </defs>
                <path id="morph-path" fill="url(#gold-gradient)" d="" transform="translate(100 100)"
                    style="transition: d 1.5s ease-in-out;" />
            </svg>
        </div>
    </section>

    <!-- Partners / Standards -->
    <section class="pt-20 pb-10 bg-surface/30 relative overflow-hidden" id="partners-standards">
        <div class="container mx-auto px-6 relative z-10">
            <div class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-bold tracking-tighter text-foreground mb-4">
                    Our <span class="text-gradient">Partners</span> & Standards
                </h2>
                <p class="text-secondary max-w-2xl mx-auto text-sm md:text-base uppercase tracking-[0.2em]">
                    Committed to Excellence through Global Certifications
                </p>
            </div>
        </div>

        <!-- Marquee Container -->
        <div class="relative w-full overflow-hidden">
            <!-- Fade Edges -->
            <div
                class="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-surface to-transparent z-10 pointer-events-none">
            </div>
            <div
                class="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-surface to-transparent z-10 pointer-events-none">
            </div>

            <!-- Scrolling Track -->
            <div class="flex whitespace-nowrap marquee-track">
                <!-- Logos Set 1 -->
                <div class="flex items-center shrink-0 whitespace-nowrap" style="gap: 4rem; margin: 0 2rem;">
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-primary transition-colors cursor-default font-serif">OEKO-TEX</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-blue-400 transition-colors cursor-default font-sans">WRAP</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-green-500 transition-colors cursor-default font-mono">ISO
                        9001</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-purple-400 transition-colors cursor-default">SEDEX</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-red-400 transition-colors cursor-default font-serif">ACCORD</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-yellow-400 transition-colors cursor-default font-sans">BSCI</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-cyan-400 transition-colors cursor-default font-mono">GOTS</span>
                </div>
                <!-- Logos Set 2 -->
                <div class="flex items-center shrink-0 whitespace-nowrap" style="gap: 4rem; margin: 0 2rem;">
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-primary transition-colors cursor-default font-serif">OEKO-TEX</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-blue-400 transition-colors cursor-default font-sans">WRAP</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-green-500 transition-colors cursor-default font-mono">ISO
                        9001</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-purple-400 transition-colors cursor-default">SEDEX</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-red-400 transition-colors cursor-default font-serif">ACCORD</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-yellow-400 transition-colors cursor-default font-sans">BSCI</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-cyan-400 transition-colors cursor-default font-mono">GOTS</span>
                </div>
                <!-- Logos Set 3 -->
                <div class="flex items-center shrink-0 whitespace-nowrap" style="gap: 4rem; margin: 0 2rem;">
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-primary transition-colors cursor-default font-serif">OEKO-TEX</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-blue-400 transition-colors cursor-default font-sans">WRAP</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-green-500 transition-colors cursor-default font-mono">ISO
                        9001</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-purple-400 transition-colors cursor-default">SEDEX</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-red-400 transition-colors cursor-default font-serif">ACCORD</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-yellow-400 transition-colors cursor-default font-sans">BSCI</span>
                    <span
                        class="text-3xl font-bold text-foreground/30 hover:text-cyan-400 transition-colors cursor-default font-mono">GOTS</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Horizontal Feature Card Carousel (Our Concerns) -->
    <section class="pt-20 pb-10 bg-surface relative overflow-hidden" id="our-concerns">
        <!-- Background Ambience -->
        <div
            class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(var(--accent),0.05)_0%,transparent_70%)] pointer-events-none">
        </div>
        <div class="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-background to-transparent z-10 pointer-events-none">
        </div>
        <div
            class="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-background to-transparent z-10 pointer-events-none">
        </div>

        <div class="container mx-auto relative z-20">
            <!-- Header -->
            <div class="text-center mb-16 px-6">
                <h2 class="text-4xl md:text-6xl font-bold tracking-tighter text-foreground mb-4">Our <span
                        class="text-primary">Concerns</span></h2>
                <p class="text-foreground/40 text-sm md:text-base uppercase tracking-widest hidden md:block">Hover to
                    navigate our ecosystem</p>
            </div>

            <!-- Carousel Section Outer (for hover detection) -->
            <div class="relative group/carousel mx-auto max-w-7xl px-6 md:px-0">
                <!-- Navigation Arrows -->
                <button id="prev-concern"
                    class="absolute left-4 top-1/2 -translate-y-1/2 z-30 w-12 h-12 rounded-full bg-background/50 border border-border-color text-foreground flex items-center justify-center opacity-0 group-hover/carousel:opacity-100 transition-opacity hover:bg-primary hover:text-white hover:border-primary backdrop-blur-md">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button id="next-concern"
                    class="absolute right-4 top-1/2 -translate-y-1/2 z-30 w-12 h-12 rounded-full bg-background/50 border border-border-color text-foreground flex items-center justify-center opacity-0 group-hover/carousel:opacity-100 transition-opacity hover:bg-primary hover:text-white hover:border-primary backdrop-blur-md">
                    <i class="fas fa-chevron-right"></i>
                </button>

                <!-- Horizontal Scroll Container -->
                <div id="concerns-carousel"
                    class="flex overflow-x-auto snap-x snap-mandatory pt-20 pb-12 px-6 md:px-0 scrollbar-hide gap-6 md:gap-10 scroll-smooth"
                    style="overflow-y: visible;">
                    <!-- Spacer -->
                    <div class="hidden md:block min-w-[5vw]"></div>

                    @foreach($concerns as $concern)
                        <div onclick="window.location.href='{{ url('/projects/' . $concern->slug) }}'"
                            class="concern-card-lift snap-center shrink-0 w-[85vw] md:w-[300px] h-[420px] group relative glass-card rounded-[2.5rem] border hover:border-primary/50 transition-all duration-500 hover:shadow-[0_20px_60px_-10px_rgba(var(--accent),0.3)] flex flex-col items-center justify-between p-8 overflow-hidden cursor-pointer">
                            <div
                                class="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                            </div>

                            <div
                                class="relative w-32 h-32 flex items-center justify-center transition-transform duration-500 group-hover:scale-110">
                                @if($concern->image)
                                    <img src="{{ asset('storage/' . $concern->image) }}" alt="{{ $concern->name }}"
                                        class="w-full h-full object-contain filter grayscale group-hover:grayscale-0 transition-all">
                                @else
                                    <div class="text-4xl font-bold text-primary">{{ strtoupper(substr($concern->name, 0, 1)) }}
                                    </div>
                                @endif
                            </div>

                            <div class="relative z-10 text-center">
                                <h3 class="text-2xl font-bold text-foreground mb-3">{{ $concern->name }}</h3>
                                <p
                                    class="text-secondary text-sm line-clamp-2 mb-6 opacity-0 group-hover:opacity-100 transition-all duration-500 translate-y-4 group-hover:translate-y-0">
                                    {{ $concern->description }}
                                </p>
                                <div class="inline-flex items-center text-primary font-bold text-sm tracking-widest uppercase">
                                    Explore <i
                                        class="fas fa-arrow-right ml-2 text-xs transition-transform group-hover:translate-x-2"></i>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    <!-- Spacer -->
                    <div class="hidden md:block min-w-[5vw]"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- The Board Carousel -->
    <section
        class="min-h-screen py-24 md:py-32 relative flex flex-col items-center justify-center overflow-hidden bg-background"
        id="board-section">
        <!-- Ghost Background (Dynamic) -->
        <div id="board-ghost-bg"
            class="absolute inset-0 bg-no-repeat bg-top bg-cover opacity-20 md:opacity-[0.25] grayscale transition-all duration-700 transform scale-105 z-0 pointer-events-none">
        </div>
        <!-- Huge Watermark Text -->
        <div
            class="absolute inset-0 flex items-center justify-center z-0 pointer-events-none opacity-[0.03] select-none overflow-hidden">
            <h1 class="text-[20vw] font-bold text-foreground whitespace-nowrap" id="board-watermark">BOARD</h1>
        </div>

        <!-- Gradient Overlay -->
        <div
            class="absolute inset-0 bg-gradient-to-t from-background via-background/80 to-background/50 z-0 pointer-events-none">
        </div>

        <!-- Content -->
        <div class="relative z-10 w-full max-w-7xl mx-auto px-6 flex flex-col justify-center">
            <div class="text-center mb-10 md:mb-16">
                <h2 class="text-3xl md:text-5xl font-bold mb-2">The <span class="text-gradient">Board</span></h2>
                <p class="text-secondary text-sm uppercase tracking-widest">Our Leadership Team</p>
            </div>

            <!-- Carousel Row -->
            <div class="flex flex-col md:flex-row items-center justify-center w-full relative">
                <!-- PREV Avatar (Left) -->
                <div class="hidden md:flex flex-col items-center cursor-pointer group transition-all duration-300 transform hover:scale-110"
                    onclick="prevBoard()" id="prev-avatar-container">
                    <div
                        class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden border-2 border-border-color grayscale opacity-40 group-hover:opacity-100 group-hover:grayscale-0 group-hover:border-primary/50 transition-all bg-surface relative z-10">
                        <img id="prev-avatar-img" src="" class="w-full h-full object-cover">
                    </div>
                </div>

                <!-- Main Card (Center) -->
                <div class="w-full max-w-2xl mx-4 md:mx-16 xl:mx-24 shrink-0">
                    <div id="board-card"
                        class="glass-card rounded-[2rem] relative transition-all duration-500 border border-border-color shadow-2xl overflow-hidden transform">
                        <div class="p-8 md:p-10">
                            <div class="flex flex-col md:flex-row gap-6 md:gap-8 items-start">
                                <!-- Inner Photo (Square/Rounded) -->
                                <div class="flex-shrink-0 relative group/img cursor-pointer">
                                    <div
                                        class="w-32 h-32 md:w-48 md:h-48 rounded-2xl overflow-hidden border-2 border-border-color shadow-lg transition-all duration-500 transform group-hover/img:scale-105 group-hover/img:border-primary/50 group-hover/img:shadow-[0_0_20px_rgba(var(--accent),0.3)]">
                                        <img id="board-img-card" src=""
                                            class="w-full h-full object-cover transition-transform duration-700 group-hover/img:scale-110">
                                    </div>
                                    <div
                                        class="absolute -bottom-2 -right-2 w-8 h-8 border-r-2 border-b-2 border-primary/30 rounded-br-lg opacity-0 group-hover/img:opacity-100 transition-all duration-300">
                                    </div>
                                </div>

                                <!-- Header Info -->
                                <div class="flex-grow text-left">
                                    <h3 id="board-name" class="text-2xl md:text-3xl font-bold text-foreground mb-1"></h3>
                                    <p id="board-role"
                                        class="text-primary text-xs uppercase tracking-widest font-bold mb-4"></p>
                                    <div id="board-socials" class="flex gap-3 text-secondary/60">
                                        <!-- Social links will be injected here -->
                                    </div>
                                </div>
                            </div>

                            <!-- Bio Text -->
                            <div class="mt-6 md:mt-8">
                                <p id="board-bio" class="text-secondary text-sm md:text-base leading-relaxed font-light">
                                </p>
                            </div>
                        </div>

                        <!-- Nav Bar (Top Transparent) -->
                        <div
                            class="absolute top-4 right-4 flex rounded-full overflow-hidden border border-border-color z-20 shadow-lg backdrop-blur-sm">
                            <button onclick="prevBoard()"
                                class="w-10 h-8 bg-foreground/5 hover:bg-foreground/20 text-foreground flex items-center justify-center transition-colors text-sm">
                                <i class="fas fa-arrow-left"></i>
                            </button>
                            <div class="w-[1px] bg-border-color"></div>
                            <button onclick="nextBoard()"
                                class="w-10 h-8 bg-foreground/5 hover:bg-foreground/20 text-foreground flex items-center justify-center transition-colors text-sm">
                                <i class="fas fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- NEXT Avatar (Right) -->
                <div class="hidden md:flex flex-col items-center cursor-pointer group transition-all duration-300 transform hover:scale-110"
                    onclick="nextBoard()" id="next-avatar-container">
                    <div
                        class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden border-2 border-border-color grayscale opacity-40 group-hover:opacity-100 group-hover:grayscale-0 group-hover:border-primary/50 transition-all bg-surface relative z-10">
                        <img id="next-avatar-img" src="" class="w-full h-full object-cover">
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    <style>
        /* Premium Client Cards */
        .client-card {
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .client-card:hover {
            border-color: rgba(var(--accent), 0.5);
            background-color: rgba(255, 255, 255, 0.05);
            transform: translateY(-8px);
            box-shadow: 0 15px 30px -10px rgba(var(--accent), 0.2);
        }

        .client-card:hover .glow-overlay {
            opacity: 1;
        }

        .client-logo {
            /* Adapts logo visual based on theme */
            filter: var(--logo-filter-default);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .client-card:hover .client-logo {
            /* Glow and full color adapted to theme */
            filter: var(--logo-filter-hover);
            transform: scale(1.15);
        }

        .client-text {
            transition: all 0.5s ease;
        }

        .client-card:hover .client-text {
            color: var(--text-primary);
            text-shadow: 0 0 10px rgba(var(--accent), 0.5);
            transform: scale(1.1);
        }

        /* Auto Marquee Animation */
        .client-marquee-group {
            animation: clientScroll 20s linear infinite;
        }

        .client-marquee-wrapper:hover .client-marquee-group {
            animation-play-state: paused;
        }

        /* gap-6 is 1.5rem (24px) */
        @keyframes clientScroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(calc(-100% - 1.5rem));
            }
        }

        /* gap-8 is 2rem (32px) on md screens and up */
        @media (min-width: 768px) {
            @keyframes clientScroll {
                0% {
                    transform: translateX(0);
                }

                100% {
                    transform: translateX(calc(-100% - 2rem));
                }
            }
        }

        /* Hide scrollbar for Chrome, Safari and Opera */
        #concerns-carousel::-webkit-scrollbar {
            display: none !important;
        }

        /* Hide scrollbar for IE, Edge and Firefox */
        #concerns-carousel {
            -ms-overflow-style: none !important;
            /* IE and Edge */
            scrollbar-width: none !important;
            /* Firefox */
        }

        .concern-card-lift {
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease, border-color 0.5s ease !important;
            will-change: transform;
        }

        .concern-card-lift:hover {
            transform: translateY(-20px) !important;
        }

        /* Ensure the carousel doesn't clip the lift */
        #concerns-carousel {
            padding-top: 40px !important;
            margin-top: -40px !important;
        }
    </style>
@endpush

@push('scripts')
    <script>
        // Timeline Observer
        const observerOptions = { threshold: 0.2 };
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.remove('opacity-0', 'translate-y-8');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);
        document.querySelectorAll('.timeline-item').forEach(item => observer.observe(item));

        // Production Hub Logic
        const hubs = @json($productionHubs);
        let activeHub = 0;
        const bgImage = document.getElementById('production-bg');
        const categoryEl = document.getElementById('production-category');
        const titleEl = document.getElementById('production-title');
        const descEl = document.getElementById('production-desc');
        const infoContainer = document.getElementById('production-info');
        const morphPath = document.getElementById('morph-path');
        const navDots = document.querySelectorAll('.nav-dot');

        function switchSlide(index) {
            if (!hubs[index]) return;
            activeHub = index;
            const hub = hubs[index];

            bgImage.style.transition = "transform 1s ease-in-out, opacity 1s ease-in-out";
            bgImage.style.transform = "scale(0.95)";
            bgImage.style.opacity = "0";
            infoContainer.classList.add('opacity-0', 'translate-y-4', 'scale-90');

            navDots.forEach((dot, i) => {
                if (i === index) {
                    dot.classList.add('bg-primary', 'border-primary');
                    dot.classList.remove('bg-black/40', 'border-white/20');
                    dot.querySelector('i').classList.remove('text-white/70');
                    dot.querySelector('i').classList.add('text-black');
                } else {
                    dot.classList.remove('bg-primary', 'border-primary');
                    dot.classList.add('bg-black/40', 'border-white/20');
                    dot.querySelector('i').classList.add('text-white/70');
                    dot.querySelector('i').classList.remove('text-black');
                }
            });

            setTimeout(() => {
                bgImage.src = "{{ asset('storage') }}/" + hub.image;
                categoryEl.textContent = hub.category;
                titleEl.textContent = hub.title;
                descEl.textContent = hub.description;

                const defaultPath = 'M44.7,-76.4C58.9,-69.2,71.8,-59.1,81.6,-46.6C91.4,-34.1,98.1,-19.2,95.8,-5.3C93.5,8.6,82.2,21.5,71.6,32.6C61,43.7,51.1,52.9,40.4,60.6C29.7,68.3,18.2,74.5,5.6,76.3C-7,78.1,-20.7,75.5,-33.3,69.5C-45.9,63.5,-57.4,54.1,-66.4,42.8C-75.4,31.5,-81.9,18.3,-82.7,4.7C-83.5,-8.9,-78.6,-22.9,-70.7,-35.1C-62.8,-47.3,-51.9,-57.7,-39.7,-65.8C-27.5,-73.9,-14,-79.7,0.5,-80.5C15,-81.3,30.5,-77.2,44.7,-76.4Z';
                morphPath.setAttribute('d', hub.morph_path || defaultPath);

                bgImage.style.transition = "none";
                bgImage.style.transform = "scale(0.95)";
                void bgImage.offsetWidth;
                bgImage.style.transition = "transform 1.5s ease-out, opacity 1.5s ease-out";
                bgImage.style.transform = "scale(1.05)";
                bgImage.style.opacity = "1";
                infoContainer.classList.remove('opacity-0', 'translate-y-4', 'scale-90');
            }, 1000);
        }

        if (hubs.length > 0) {
            switchSlide(0);
            setInterval(() => {
                let next = (activeHub + 1) % hubs.length;
                switchSlide(next);
            }, 6000);
        }

        // Marquee Magic
        const track = document.querySelector('.marquee-track');
        if (track) {
            let currentScroll = 0;
            let targetSpeed = 0.5;
            let currentSpeed = 0.5;
            const damping = 0.05;

            const section = track.closest('section');
            section.addEventListener('mouseenter', () => targetSpeed = 0);
            section.addEventListener('mouseleave', () => targetSpeed = 0.5);

            function animateMarquee() {
                currentSpeed += (targetSpeed - currentSpeed) * damping;
                currentScroll -= currentSpeed;
                if (Math.abs(currentScroll) >= track.scrollWidth / 3) {
                    currentScroll = 0;
                }
                track.style.transform = `translateX(${currentScroll}px)`;
                requestAnimationFrame(animateMarquee);
            }
            animateMarquee();
        }

        // Auto-scroll for Concerns
        const carousel = document.getElementById('concerns-carousel');
        if (carousel) {
            let isDown = false;
            let startX;
            let scrollLeft;
            let autoScrollInterval;

            const startAutoScroll = () => {
                // Auto-scroll disabled per user request
            };

            const stopAutoScroll = () => clearInterval(autoScrollInterval);

            carousel.addEventListener('mousedown', (e) => {
                isDown = true;
                stopAutoScroll();
                startX = e.pageX - carousel.offsetLeft;
                scrollLeft = carousel.scrollLeft;
            });

            carousel.addEventListener('mouseleave', () => {
                isDown = false;
                startAutoScroll();
            });

            carousel.addEventListener('mouseup', () => {
                isDown = false;
                startAutoScroll();
            });

            carousel.addEventListener('mouseenter', stopAutoScroll);

            carousel.addEventListener('mousemove', (e) => {
                if (!isDown) return;
                e.preventDefault();
                const x = e.pageX - carousel.offsetLeft;
                const walk = (x - startX) * 2;
                carousel.scrollLeft = scrollLeft - walk;
            });

            // Initialize auto-scroll
            startAutoScroll();

            // Handle Manual Navigation
            const prevBtn = document.getElementById('prev-concern');
            const nextBtn = document.getElementById('next-concern');

            if (prevBtn && nextBtn) {
                nextBtn.addEventListener('click', () => {
                    const firstCard = carousel.querySelector('.snap-center');
                    if (!firstCard) return;
                    const cardWidth = firstCard.offsetWidth + 40;
                    carousel.scrollBy({ left: cardWidth, behavior: 'smooth' });
                    stopAutoScroll();
                    setTimeout(startAutoScroll, 5000); // Resume auto-scroll after 5s of inactivity
                });

                prevBtn.addEventListener('click', () => {
                    const firstCard = carousel.querySelector('.snap-center');
                    if (!firstCard) return;
                    const cardWidth = firstCard.offsetWidth + 40;
                    carousel.scrollBy({ left: -cardWidth, behavior: 'smooth' });
                    stopAutoScroll();
                    setTimeout(startAutoScroll, 5000);
                });
            }
        }

        // Board Carousel Logic
        const boardMembersData = @json($boardMembers);
        const boardMembers = boardMembersData.map(member => ({
            ...member,
            image: member.image.startsWith('http') ? member.image : "{{ asset('storage') }}/" + member.image
        }));

        let currentBoardIndex = 0;
        const ghostBg = document.getElementById('board-ghost-bg');
        const watermark = document.getElementById('board-watermark');
        const imgCard = document.getElementById('board-img-card');
        const nameEl = document.getElementById('board-name');
        const roleEl = document.getElementById('board-role');
        const bioEl = document.getElementById('board-bio');
        const cardEl = document.getElementById('board-card');
        const prevImg = document.getElementById('prev-avatar-img');
        const nextImg = document.getElementById('next-avatar-img');
        const socialsEl = document.getElementById('board-socials');

        const iconMap = {
            linkedin: 'fab fa-linkedin-in',
            facebook: 'fab fa-facebook-f',
            twitter: 'fab fa-twitter',
            instagram: 'fab fa-instagram',
            globe: 'fas fa-globe'
        };

        function renderBoard(index) {
            if (!boardMembers.length) return;
            currentBoardIndex = index;
            const member = boardMembers[index];
            const prevIndex = (index - 1 + boardMembers.length) % boardMembers.length;
            const nextIndex = (index + 1) % boardMembers.length;

            cardEl.style.opacity = '0';
            cardEl.style.transform = 'scale(0.95)';

            setTimeout(() => {
                ghostBg.style.backgroundImage = `url('${member.image}')`;
                watermark.textContent = member.name.split(' ')[0].toUpperCase();
                imgCard.src = member.image;
                nameEl.textContent = member.name;
                roleEl.textContent = member.role;
                bioEl.innerHTML = member.bio;
                prevImg.src = boardMembers[prevIndex].image;
                nextImg.src = boardMembers[nextIndex].image;

                // Render Socials
                socialsEl.innerHTML = '';
                if (member.social_links) {
                    const normalizedLinks = Array.isArray(member.social_links)
                        ? member.social_links
                        : Object.entries(member.social_links).map(([platform, url]) => ({ platform, url }));

                    normalizedLinks.forEach(link => {
                        if (link.url) {
                            const iconClass = iconMap[link.platform] || 'fas fa-link';
                            const a = document.createElement('a');
                            a.href = link.url;
                            a.target = "_blank";
                            a.className = "hover:text-primary transition-colors";
                            a.innerHTML = `<i class="${iconClass}"></i>`;
                            socialsEl.appendChild(a);
                        }
                    });
                }

                cardEl.style.opacity = '1';
                cardEl.style.transform = 'scale(1)';
            }, 300);
        }

        function nextBoard() {
            renderBoard((currentBoardIndex + 1) % boardMembers.length);
        }

        function prevBoard() {
            renderBoard((currentBoardIndex - 1 + boardMembers.length) % boardMembers.length);
        }

        if (boardMembers.length > 0) {
            renderBoard(0);
        }
    </script>
@endpush