"use client";

import Image from "next/image";
import { motion, useScroll, useTransform } from "motion/react";
import { useRef } from "react";
import { Reveal, RevealText } from "@/components/Reveal";

export function PageHero({
  kicker,
  title,
  lead,
  image,
  pos = "center",
}: {
  kicker: string;
  title: string;
  lead: string;
  image: string;
  pos?: string;
}) {
  const ref = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start start", "end start"],
  });
  const y = useTransform(scrollYProgress, [0, 1], ["0%", "14%"]);

  return (
    <section
      ref={ref}
      className="relative h-[78svh] min-h-[520px] overflow-hidden bg-ink md:h-[82svh]"
    >
      <motion.div className="absolute inset-0" style={{ y }}>
        <Image
          src={image}
          alt=""
          fill
          priority
          className="object-cover"
          style={{ objectPosition: pos }}
          sizes="100vw"
        />
        <div className="absolute inset-0 bg-linear-to-t from-ink via-ink/55 to-ink/25" />
      </motion.div>

      <div className="hud-frame pointer-events-none absolute inset-5 md:inset-8" />

      <div className="relative z-10 flex h-full flex-col justify-end px-5 pb-12 md:px-10 md:pb-16">
        <p className="font-mono text-[10px] tracking-[0.35em] text-brass uppercase">{kicker}</p>
        <h1 className="font-display mt-4 max-w-5xl text-4xl leading-[0.9] sm:text-6xl md:text-8xl">
          <RevealText text={title} />
        </h1>
        <Reveal delay={0.15}>
          <p className="mt-6 max-w-xl text-base text-paper/75 md:text-lg">{lead}</p>
        </Reveal>
      </div>
    </section>
  );
}