"use client";

import Image from "next/image";
import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";

interface PageHeroProps {
  eyebrow: string;
  title: string;
  description: string;
  image?: string;
}

export function PageHero({
  eyebrow,
  title,
  description,
  image = "/images/client/hero-sekcija.jpg",
}: PageHeroProps) {
  const ref = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start start", "end start"],
  });
  const bgY = useTransform(scrollYProgress, [0, 1], ["0%", "25%"]);
  const contentY = useTransform(scrollYProgress, [0, 1], ["0%", "-10%"]);
  const fade = useTransform(scrollYProgress, [0, 0.7], [1, 0]);

  return (
    <section
      ref={ref}
      className="relative isolate overflow-hidden bg-steel-900 text-white"
    >
      <motion.div
        style={{ y: bgY }}
        aria-hidden
        className="absolute inset-0 -z-20 h-[125%] w-full"
      >
        <Image
          src={image}
          alt=""
          fill
          priority
          sizes="100vw"
          className="object-cover"
        />
      </motion.div>

      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-br from-steel-900/90 via-steel-900/80 to-steel-900/95"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(60%_60%_at_30%_20%,rgba(255,255,255,0.10),transparent_70%)]"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 bg-grid-steel bg-[size:48px_48px] opacity-[0.08]"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 bg-noise opacity-30 mix-blend-overlay"
      />

      <motion.div
        animate={{ x: [0, 40, 0], y: [0, -20, 0] }}
        transition={{ duration: 16, repeat: Infinity, ease: "easeInOut" }}
        aria-hidden
        className="pointer-events-none absolute -left-32 top-1/3 -z-10 h-[400px] w-[400px] rounded-full bg-sky-500/15 blur-[120px]"
      />

      <motion.div
        style={{ y: contentY, opacity: fade }}
        className="container-wide relative pt-32 pb-20 sm:pt-36 sm:pb-28 lg:pt-40 lg:pb-32"
      >
        <motion.span
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="eyebrow text-white/70 [&::before]:bg-white/30"
        >
          {eyebrow}
        </motion.span>
        <motion.h1
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.05, ease: [0.22, 1, 0.36, 1] }}
          className="mt-5 max-w-4xl font-display text-4xl sm:text-5xl lg:text-[64px] font-semibold leading-[1.05] tracking-tight"
        >
          {title}
        </motion.h1>
        <motion.p
          initial={{ opacity: 0, y: 18 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.15 }}
          className="mt-6 max-w-2xl text-base sm:text-lg leading-relaxed text-white/80"
        >
          {description}
        </motion.p>
      </motion.div>
    </section>
  );
}