// Hero.jsx — full-bleed cinematic photo + giant italic display + glass search bar

function Hero({ onSearch }) {
  const [q, setQ] = React.useState("");
  const heroRef = React.useRef(null);
  const midRef = React.useRef(null);

  React.useEffect(() => {
    let raf = 0;
    const update = () => {
      raf = 0;
      const hero = heroRef.current;
      const mid = midRef.current;
      if (!hero || !mid) return;
      // Layer follows scroll: scroll down → shift down, scroll up → shift up.
      // Damped so the motion is subtle.
      const y = window.scrollY * 0.18;
      mid.style.setProperty("--mid-scroll", y + "px");
    };
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(update);
    };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <section className="rd-hero" data-screen-label="01 Home / Hero" ref={heroRef}>
      <div className="rd-hero__layer rd-hero__layer--bg" />
      <div className="rd-hero__scrim" />
      <div className="rd-hero__layer rd-hero__layer--mid" ref={midRef} />
      <div className="rd-hero__layer rd-hero__layer--fg" />
      <div className="rd-hero__inner">
        <h1 className="rd-hero__title">
          Your car,<br />expertly<br />repaired.
        </h1>
        <p className="rd-hero__sub">
          Full service autobody and collision repairs, combined with genuine customer care.
        </p>
        <p className="rd-hero__lead">Find your nearest location.</p>
        <form
          className="rd-search"
          onSubmit={(e) => { e.preventDefault(); onSearch && onSearch(q); }}
        >
          <div className="rd-search__field">
            <img src="assets/icon-pin.svg" alt="" />
            <input
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder="City, Province or Postal"
            />
          </div>
          <button type="submit" className="btn-primary btn-primary--lg rd-search__submit">
            <span className="rd-search__submit-text">Find a&nbsp; Location</span>
            <svg className="rd-search__submit-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2.5" />
              <path d="m20 20-3.5-3.5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
            </svg>
          </button>
        </form>
      </div>
    </section>
  );
}

window.Hero = Hero;