function Hero({ sansFont, cursiveFont }) {
  const wrapRef = React.useRef(null);
  const [parallax, setParallax] = React.useState({ x: 0, y: 0 });

  React.useEffect(() => {
    const onMove = (e) => {
      const { innerWidth, innerHeight } = window;
      const x = (e.clientX / innerWidth - 0.5) * 12;
      const y = (e.clientY / innerHeight - 0.5) * 8;
      setParallax({ x, y });
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <section
      id="top"
      className="relative h-screen w-full overflow-hidden bg-black grain"
      style={{ "--grain-opacity": 0.14 }}>
      
      {/* Background image */}
      <img
        src="assets/hero-lake.webp"
        alt="Lakeside studio at golden hour"
        className="absolute inset-0 w-full h-full object-cover"
        style={{ filter: "brightness(0.9) contrast(1.03) saturate(1.02)" }} />

      {/* Film vignette */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
          "radial-gradient(120% 80% at 50% 30%, transparent 35%, rgba(0,0,0,0.45) 100%)"
        }} />
      
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
          "linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, transparent 30%, transparent 45%, rgba(0,0,0,0.65) 100%)"
        }} />



      {/* Hero typography */}
      <div
        ref={wrapRef}
        className="relative z-10 h-full w-full flex flex-col justify-end pb-[10vh] md:pb-[12vh] px-5 md:px-10"
        style={{
          transform: `translate3d(${parallax.x * -0.5}px, ${parallax.y * -0.5}px, 0)`,
          transition: "transform .25s ease-out"
        }}>
        
        {/* Eyebrow */}
        <div className="flex items-center gap-3 mb-6 md:mb-8">
          <span className="w-10 h-px bg-white/50" />
          <span className="uppercase tracking-[0.35em] text-[11px] md:text-[12px] text-white/70">ALPHA - SPRING COLLECTION

          </span>
        </div>

        <h1
          className="hero-title"
          style={{
            fontFamily: sansFont,
            fontSize: "clamp(56px, 12vw, 240px)"
          }}>
          
          <span className="block">Changing the</span>
          <span className="block">
            <span className="opacity-90">way you</span>{" "}
            <span
              className="italic align-baseline inline-block"
              style={{ ...{
                  fontFamily: cursiveFont,
                  fontStyle: "normal",
                  fontWeight: 500,
                  fontSize: "1.35em",
                  transform: "translateY(0.06em) rotate(-3deg)",
                  color: "#fff",
                  textShadow: "0 2px 30px rgba(0,0,0,0.35)",
                  paddingLeft: "0.05em"
                }, fontFamily: "Caveat" }}>
              
              Sit<span style={{ fontSize: "0.6em", verticalAlign: "super", marginLeft: "0.05em", opacity: 0.7 }}>.</span>
            </span>
          </span>
        </h1>

        {/* Bottom row */}
        <div className="mt-10 md:mt-14 flex flex-col md:flex-row md:items-end md:justify-between gap-6">
          <p className="max-w-sm text-[13px] md:text-[14px] leading-relaxed text-white/70">
            Form, material and presence — handcrafted seating objects made for the
            homes of those who slow down.
          </p>

          <div className="flex items-center gap-6">
            <a
              href="#products"
              onClick={(e) => {
                e.preventDefault();
                const el = document.getElementById("products");
                if (el) window.scrollTo({ top: el.offsetTop - 20, behavior: "smooth" });
              }}
              className="group inline-flex items-center gap-3 text-sm uppercase tracking-[0.28em] text-white hover:text-white/90 transition">
              
              <span className="relative">
                Explore the collection
                <span className="absolute left-0 right-0 -bottom-1 h-px bg-white/40 group-hover:bg-white transition-colors" />
              </span>
              <span className="inline-flex items-center justify-center w-10 h-10 rounded-full ring-1 ring-white/30 group-hover:ring-white/70 transition">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                  <path d="M5 12h14M13 6l6 6-6 6" />
                </svg>
              </span>
            </a>
          </div>
        </div>

        {/* Meta row */}
        <div className="mt-10 md:mt-14 pt-6 border-t border-white/10 flex items-center justify-between text-[11px] uppercase tracking-[0.28em] text-white/50">
          <span>EST. 2022 — INDIA / DELHI </span>
          <span className="hidden md:inline">Scroll</span>
          <span>IN FRAME : BRUNEL</span>
        </div>
      </div>

      {/* Bottom gradient */}
      <div className="absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-b from-transparent to-black pointer-events-none" />

      {/* Language bar — thin single line pinned to bottom */}
      <div className="absolute bottom-0 left-0 right-0 z-20 border-t border-white/10 bg-black/50 backdrop-blur-sm">
        <div className="py-2">
          <Marquee
            items={["Qurcee", "Chair", "Silla", "Chaise", "Kursee", "Stoel", "Sedia", "Cadeira", "Stuhl", "Krzesło", "椅子", "كرسي"]}
            className="text-[10px] md:text-[11px] font-medium leading-none"
            speed="slow"
            opacity={0.45} />
          
        </div>
      </div>
    </section>);

}

Object.assign(window, { Hero });