'use client';

import { Button } from '@/components/ui/Button';
import Image from 'next/image';
import { motion, AnimatePresence } from 'framer-motion';
import { useState, useEffect } from 'react';

interface HeroVideoProps {
  data?: any;
  title?: string;
  subtitle?: string;
  description?: string;
  videoUrl?: string;
  posterImage?: any;
  ctaLabel?: string;
  ctaHref?: string;
  linkText?: string;
  linkHref?: string;
  secondaryCtaLabel?: string;
  secondaryCtaHref?: string;
  badge?: string;
}

export function HeroVideo(props: HeroVideoProps) {
  const { data } = props;
  const title = props.title || data?.title || 'DIE EXPERTEN FÜR KABELTIEFBAU';
  const subtitle = props.subtitle || props.description || data?.subtitle || 'Wir verbinden Infrastruktur mit Präzision. Von Horizontalbohrungen bis zu komplexen Leitungsnetzen.';
  const videoUrl = props.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 = props.ctaLabel || props.linkText || data?.ctaLabel || 'Unternehmen entdecken';
  const ctaHref = props.ctaHref || props.linkHref || data?.ctaHref || '#unternehmen';
  
  const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || 'Projekt anfragen';
  const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || '/kontakt';

  return (
    <div className="relative w-full h-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
      {/* Background color while video loads */}
      <div className="absolute inset-0 z-0 bg-neutral-dark" />
      
      {videoUrl && (
        <video
          className="absolute inset-0 w-full h-full object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
          src={videoUrl}
          poster={posterSrc}
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
        />
      )}
      
      {/* Cinematic Color Grading Overlay */}
      <div className="absolute inset-0 bg-[#0a192f]/30 z-[2] mix-blend-multiply" />
      
      {/* Dramatic Vignette & Fade to content */}
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-transparent via-black/20 to-black/80 z-[2]" />
      <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/60 to-transparent 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">
            <Button 
              href={ctaHref} 
              variant="primary"
              size="lg"
            >
              {ctaLabel}
            </Button>
            
            <Button 
              href={secondaryCtaHref} 
              variant="outline"
              size="lg"
              className="border-white/60 text-white hover:text-primary hover:bg-white"
            >
              {secondaryCtaLabel}
            </Button>
          </div>
        </motion.div>
      </div>
    </div>
  );
}