"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";

interface Props {
  label: string;
  line1: string;
  line2: string;
}

export default function PageHeader({ label, line1, line2 }: Props) {
  const badgeRef = useRef<HTMLSpanElement>(null);
  const line1Ref = useRef<HTMLDivElement>(null);
  const line2Ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const badge = badgeRef.current;
    const l1    = line1Ref.current;
    const l2    = line2Ref.current;
    if (!badge || !l1 || !l2) return;

    gsap.set(badge, { opacity: 0, y: 12 });
    gsap.set([l1, l2], { y: "110%" });

    const tl = gsap.timeline({ delay: 0.05 });
    tl.to(badge, { opacity: 1, y: 0,  duration: 0.6, ease: "power3.out" }, 0);
    tl.to(l1,    { y: "0%",           duration: 0.85, ease: "power4.out" }, 0.1);
    tl.to(l2,    { y: "0%",           duration: 0.85, ease: "power4.out" }, 0.22);
  }, []);

  return (
    <section className="bg-brand-off-white pt-32 pb-12 px-6">
      <div className="max-w-5xl mx-auto">
        <span
          ref={badgeRef}
          className="inline-block bg-brand-dark text-brand-yellow px-4 py-1.5 rounded-full text-[11px] font-bold tracking-[0.22em] uppercase mb-5"
        >
          {label}
        </span>
        <h1
          className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-none tracking-tight text-brand-dark"
          style={{ fontFamily: "var(--font-space, sans-serif)" }}
        >
          <span className="block overflow-hidden">
            <div ref={line1Ref}>{line1}</div>
          </span>
          <span className="block overflow-hidden opacity-40">
            <div ref={line2Ref}>{line2}</div>
          </span>
        </h1>
      </div>
    </section>
  );
}