/* Cinemagraph-style hero with parallax and slow Ken Burns */
const Hero = ({ heroSrc }) => {
  const bgRef = React.useRef(null);
    const titleRef = React.useRef(null);

  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const y = window.scrollY;
        if (bgRef.current) bgRef.current.style.transform = `scale(${1.06 + Math.min(y * 0.0001, 0.04)}) translateY(${y * 0.18}px)`;
        if (titleRef.current) titleRef.current.style.transform = `translateY(${y * 0.08}px)`;
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Slow Ken Burns via inline animated style
  React.useEffect(() => {
    if (!bgRef.current) return;
    const el = bgRef.current;
    el.animate(
      [
        { transform: "scale(1.06) translate(-1%, 0)" },
        { transform: "scale(1.12) translate(1%, -1%)" },
      ],
      { duration: 22000, iterations: Infinity, direction: "alternate", easing: "ease-in-out" }
    );
  }, []);

  return (
    <section className="hero" id="top">
      <div
        className="hero-bg"
        ref={bgRef}
        style={{
          backgroundImage: heroSrc
            ? `url(${heroSrc})`
            : "linear-gradient(180deg, #1a1815 0%, #2a2520 35%, #3d3128 70%, #5a4a38 100%)",
        }}
      />

      <div className="hero-vignette" />

      <div className="hero-content">
        <div className="hero-eyebrow">
          <span className="dot"></span>
          <span className="mono">Private Offering · South Miami · Equestrian Corridor</span>
        </div>

        <h1 className="hero-title" ref={titleRef}>
          Villa<br />
          Francesca<span className="amp">.</span>
        </h1>

        <div className="hero-meta">
          <div className="hero-meta-col">
            <span style={{ opacity: 0.7 }}>Built by</span>
            <strong>The Calta Group</strong>
          </div>
          <div className="hero-meta-col">
            <span style={{ opacity: 0.7 }}>Address</span>
            <strong>9999 SW 87th Court</strong>
          </div>
          <div className="hero-meta-col">
            <span style={{ opacity: 0.7 }}>Offered at</span>
            <strong>$5,399,000</strong>
          </div>
          <div className="hero-meta-col">
            <span style={{ opacity: 0.7 }}>Program</span>
            <strong>6 BR · 8 BA · 0.78 AC</strong>
          </div>
        </div>
        <a href="#enquire" className="oh-band"><b>Open House</b> Saturday, October 3 · 11 AM – 2 PM</a>
      </div>

      <div className="scroll-cue">
        <span>Scroll</span>
        <span className="line"></span>
      </div>
    </section>
  );
};

window.Hero = Hero;