"use client";

import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";

const easing: [number, number, number, number] = [0.25, 0.1, 0.25, 1];

interface HeroProps {
  heading?: string;
  headingHighlight?: string;
  subtitle?: string;
  ctaPrimaryLabel?: string;
  ctaPrimaryUrl?: string;
  ctaSecondaryLabel?: string;
  ctaSecondaryUrl?: string;
  videoUrl?: string;
  posterUrl?: string;
}

const Hero = ({
  heading = "Integrated Engineering",
  headingHighlight = "& Energy Services",
  subtitle = "Delivering advanced engineering, inspection, and energy solutions to the world's most demanding industrial environments.",
  ctaPrimaryLabel = "Explore Services",
  ctaPrimaryUrl = "#services",
  ctaSecondaryLabel = "Contact Us",
  ctaSecondaryUrl = "#contact",
  videoUrl = "/hero-video.mp4",
  posterUrl = "/hero-refinery.jpg",
}: HeroProps) => {
  return (
    <section id="home" className="relative flex min-h-[100svh] items-center overflow-hidden bg-primary md:min-h-[700px]">
      {/* Video Background */}
      <div className="absolute inset-0 z-0">
        <video
          autoPlay
          muted
          loop
          playsInline
          poster={posterUrl}
          className="w-full h-full object-cover opacity-40"
        >
          <source src={videoUrl} type="video/mp4" />
        </video>
        <div className="absolute inset-0 bg-gradient-to-r from-primary via-primary/70 to-transparent" />
      </div>

      <div className="relative z-10 petro-container w-full px-4 sm:px-6">
        <motion.div
          initial={{ opacity: 0, x: -40 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.9, ease: easing }}
          className="max-w-2xl py-28 sm:py-32"
        >
          <div className="petro-gold-bar mb-8" />
          <h1 className="text-4xl sm:text-5xl md:text-7xl font-bold text-primary-foreground leading-[1.1] tracking-tight mb-6">
            {heading}{" "}
            <br className="hidden sm:block" />
            <span className="text-accent">{headingHighlight}</span>
          </h1>
          <p className="text-lg md:text-xl text-primary-foreground/75 mb-10 leading-relaxed max-w-lg">
            {subtitle}
          </p>
          <div className="flex flex-wrap gap-4">
            <a href={ctaPrimaryUrl} className="petro-btn-gold flex items-center gap-2 group">
              {ctaPrimaryLabel}
              <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
            </a>
            <a href={ctaSecondaryUrl} className="petro-btn-outline">
              {ctaSecondaryLabel}
            </a>
          </div>
        </motion.div>
      </div>

      <motion.div
        animate={{ y: [0, 10, 0] }}
        transition={{ repeat: Infinity, duration: 2.5 }}
        className="absolute bottom-10 left-1/2 hidden -translate-x-1/2 text-primary-foreground/30 md:block"
      >
        <div className="w-6 h-10 border-2 border-primary-foreground/30 rounded-full flex justify-center p-1">
          <div className="w-1 h-2 bg-primary-foreground/30 rounded-full" />
        </div>
      </motion.div>
    </section>
  );
};

export default Hero;