// Hero — Panel 1 of the home scroll-hijack stack.
//
// A single full-bleed food image (the Mediterranean Sea Bass kraft box) holds
// the whole viewport, sharp and clean on arrival. The brand wordmark now lives
// quietly top-centre in the fixed nav (consistent on every panel), so the hero
// carries only the image and a quiet scroll cue at the foot — image-only, YSL
// restraint. The cue advances the scroll-hijack one panel.
const HERO_IMAGE = "assets/hero-landing.jpg";  // sauce pour over the sea bass box

function Hero({ onJoin }) {
  const heroRef = React.useRef(null);

  const onScrollCue = () => {
    // Drive the scroll-hijack forward one panel (native scroll is locked on home).
    window.dispatchEvent(new CustomEvent("hijack:go", { detail: { dir: 1 } }));
  };

  return (
    <section className="hero snap-panel" ref={heroRef} data-screen-label="Hero">
      <div className="hero__media" style={{ backgroundImage: `url(${HERO_IMAGE})` }}/>
      <div className="hero__veil"/>
      <button type="button" className="hero__scroll" onClick={onScrollCue} aria-label="Scroll to next panel">
        <span className="hero__scroll-label">A meal is more than fuel.</span>
        <svg className="hero__scroll-chev" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M5 9l7 7 7-7" fill="none" stroke="currentColor" strokeWidth="1.4"
                strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
    </section>
  );
}
window.Hero = Hero;