// Hero.jsx — full-bleed hero with logo, title, CTA buttons, info strip.
// Info strip status reflects current opening hours: green "Åpent nå" / red "Stengt nå".
function Hero({ onOpenMenu }) {
  // Opening hours (24h). idx 0 = Sunday .. 6 = Saturday.
  const HOURS = {
    0: [11, 21], // Sun
    1: [11, 21], // Mon
    2: [11, 21], // Tue
    3: [11, 21], // Wed
    4: [11, 21], // Thu
    5: [11, 22], // Fri
    6: [11, 22], // Sat
  };

  const [isOpen, setIsOpen] = React.useState(() => checkOpen());
  function checkOpen() {
    const now = new Date();
    const [o, c] = HOURS[now.getDay()];
    const h = now.getHours() + now.getMinutes() / 60;
    return h >= o && h < c;
  }
  React.useEffect(() => {
    const t = setInterval(() => setIsOpen(checkOpen()), 60 * 1000);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="jv-hero" id="hjem">
      <div className="jv-hero-bg" />
      <img className="jv-hero-burger" src="assets/hero-burger.png" alt="" aria-hidden="true" />
      <div className="jv-hero-inner">
        <div className="jv-hero-logo"><img src="assets/jafs-logo.png" alt="Jafs" /></div>
        <h1>JAFS <em>JELØYA</em></h1>
        <p>Fabelaktig fastfood</p>
        <div className="jv-hero-btns">
          <button className="jv-btn menu" onClick={onOpenMenu}>Se meny</button>
          <a href="#tilbud" className="jv-btn ghost">Månedens tilbud</a>
        </div>
      </div>
      <div className="jv-strip">
        <div className="jv-strip-inner">
          <div className="jv-strip-item">
            <span className="jv-strip-label">Status</span>
            <span className={"jv-strip-value " + (isOpen ? "open" : "closed")}>
              ● {isOpen ? "Åpent nå" : "Stengt nå"}
            </span>
          </div>
          <div className="jv-strip-item">
            <span className="jv-strip-label">Telefon</span>
            <span className="jv-strip-value">98 64 20 28</span>
          </div>
          <div className="jv-strip-item">
            <span className="jv-strip-label">Adresse</span>
            <span className="jv-strip-value">Gimleveien 5, Moss</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;