'use client';

import Link from 'next/link';
import Image from 'next/image';
import { motion, AnimatePresence } from 'framer-motion';
import { useState, useEffect } from 'react';

interface HeroVideoProps {
  data?: {
    title?: string;
    subtitle?: string;
    videoUrl?: string;
    posterImage?: {
      url?: string;
      alt?: string;
    } | any;
    ctaLabel?: string;
    ctaHref?: string;
    secondaryCtaLabel?: string;
    secondaryCtaHref?: string;
  };
}

export function HeroVideo({ data }: HeroVideoProps) {
  const title = data?.title || 'DIE EXPERTEN FÜR KABELTIEFBAU';
  const subtitle = data?.subtitle || 'Wir verbinden Infrastruktur mit Präzision. Von Horizontalbohrungen bis zu komplexen Leitungsnetzen.';
  const videoUrl = data?.videoUrl || '/assets/dummy-hero.mp4';
  
  const posterSrc = data?.posterImage?.url || "/assets/photos/DJI_0048.JPG";
  const posterAlt = data?.posterImage?.alt || "E-TIB Gruppe Baustelle";

  const ctaLabel = data?.ctaLabel || 'Unternehmen entdecken';
  const ctaHref = data?.ctaHref || '#unternehmen';
  
  const secondaryCtaLabel = data?.secondaryCtaLabel || 'Projekt anfragen';
  const secondaryCtaHref = data?.secondaryCtaHref || '/kontakt';

  return (
    <div className="relative w-full h-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
      {/* High-quality background image (Immediate visible content) */}
      <div className="absolute inset-0 z-0 overflow-hidden">
        <Image
          src={posterSrc}
          alt={posterAlt}
          fill
          priority
          className="object-cover opacity-40 grayscale contrast-125"
          sizes="100vw"
        />
      </div>
      
      {/* Video element */}
      {videoUrl && (
        <video
          className="absolute inset-0 w-full h-full object-cover opacity-50 z-1 pointer-events-none"
          src={videoUrl}
          poster={posterSrc}
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
        />
      )}
      
      <div className="absolute inset-0 bg-primary-dark/30 z-[2] mix-blend-multiply" />
      <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-black/60 z-[3]" />
      
      <div className="container relative z-[4] text-center px-4">
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
        >
          <h1 
            className="font-heading font-bold text-4xl md:text-6xl lg:text-8xl text-white mb-6 uppercase tracking-tight drop-shadow-lg"
            dangerouslySetInnerHTML={{ __html: title.replace('KABELTIEFBAU', '<span class="text-primary-light">KABELTIEFBAU</span>').replace(/\n/g, '<br />') }}
          />
          
          <p className="text-lg md:text-xl lg:text-2xl text-white/90 max-w-3xl mx-auto mb-12 drop-shadow">
            {subtitle}
          </p>
          
          <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
            <Link 
              href={ctaHref} 
              className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-bold text-white bg-primary rounded-none shadow-lg transition-transform hover:-translate-y-1"
            >
              <span className="relative z-10">{ctaLabel}</span>
            </Link>
            
            <Link 
              href={secondaryCtaHref} 
              className="px-8 py-4 text-lg font-bold text-white border-2 border-white/60 hover:bg-white hover:text-primary rounded-none transition-colors"
            >
              {secondaryCtaLabel}
            </Link>
          </div>
        </motion.div>
      </div>
    </div>
  );
}