---
interface Props {
	role: string;
	client: string;
	year: string;
	region: string;
	projectTitle: string;
	projectSubtitle: string;
	projectDescription: string;
	stats: Array<{
		label: string;
		value: string;
	}>;
	videoUrl: string;
	linkUrl: string;
}

const { role, client, year, region, projectTitle, projectSubtitle, projectDescription, stats, videoUrl, linkUrl } = Astro.props;
---
<section id="work" class="relative overflow-hidden group min-h-[100dvh] flex flex-col cursor-pointer">
    <!-- Main Link Overlay -->
    <a href={linkUrl} class="absolute inset-0 z-30" aria-label={`View ${projectTitle} ${projectSubtitle} Case Study`}></a>

    <!-- Video Background -->
    <div class="absolute inset-0 z-0">
        <video
            autoplay
            loop
            muted
            playsinline
            class="w-full h-full object-cover opacity-70 transition-opacity duration-700 group-hover:opacity-100"
        >
            <source src={videoUrl} type="video/mp4" />
        </video>
        <!-- Cinematic Letterboxing / Gradient Vignette -->
        <div class="absolute inset-0 bg-gradient-to-b from-brand-dark/80 via-transparent to-brand-dark/80 pointer-events-none"></div>
        <div class="absolute inset-0 bg-gradient-to-r from-brand-dark/40 via-transparent to-brand-dark/40 pointer-events-none"></div>

        <!-- Subtle Grid Overlay -->
        <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:60px_60px] pointer-events-none opacity-30"></div>
    </div>

    <!-- Main Content Container - Spaced to frame the video -->
    <div class="container mx-auto px-6 lg:px-12 relative z-10 flex-1 flex flex-col justify-between py-12 lg:py-16 pointer-events-none">

        <!-- TOP HUD: Telemetry Data -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 border-t border-white/20 pt-6 animate-on-scroll slide-up">
            <div>
                <span class="text-[9px] font-mono text-brand-accent uppercase tracking-widest block mb-1">/// Role</span>
                <span class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">{role}</span>
            </div>
            <div>
                <span class="text-[9px] font-mono text-brand-accent uppercase tracking-widest block mb-1">/// Client</span>
                <span class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">{client}</span>
            </div>
            <div>
                <span class="text-[9px] font-mono text-brand-accent uppercase tracking-widest block mb-1">/// Year</span>
                <span class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">{year}</span>
            </div>
            <div class="text-right md:text-left">
                <span class="text-[9px] font-mono text-brand-accent uppercase tracking-widest block mb-1">/// Region</span>
                <span class="text-xl md:text-2xl font-bold text-white uppercase tracking-tight">{region}</span>
            </div>
        </div>

        <!-- CENTER AREA: Clear for Video -->
        <div class="flex-1 relative">
            <!-- Side Vertical Title (Optional, unobtrusive) -->
            <div class="hidden lg:block absolute -left-8 top-1/2 -translate-y-1/2 origin-left -rotate-90">
                 <h2 class="text-6xl font-bold text-transparent text-stroke uppercase tracking-tighter opacity-20 select-none">
                    {projectTitle}
                </h2>
            </div>
        </div>

        <!-- BOTTOM HUD: Project Details & Stats -->
        <div class="border-b border-white/20 pb-6 animate-on-scroll slide-up stagger-1">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-end">

                <!-- Title & Description -->
                <div class="lg:col-span-7">
                    <h2 class="text-5xl md:text-7xl font-bold uppercase text-white mb-4 tracking-tighter leading-none">
                        {projectTitle} <span class="text-transparent text-stroke">{projectSubtitle}</span>
                    </h2>
                    <p class="text-slate-300 font-light max-w-lg text-sm md:text-base leading-relaxed">
                        {projectDescription}
                    </p>
                </div>

                <!-- Technical Stats (Mini-Table) -->
                <div class="lg:col-span-5">
                    <div class="grid grid-cols-2 gap-x-8 gap-y-4 font-mono text-xs">
                        {stats.map((stat) => (
                            <div class="border-l border-brand-accent/30 pl-3">
                                <span class="block text-slate-500 text-[10px] uppercase mb-1">{stat.label}</span>
                                <span class="block text-white font-bold">{stat.value}</span>
                            </div>
                        ))}
                    </div>
                </div>

            </div>
        </div>

    </div>
</section>
