// Chrome — announcement bar + site header. The announcement bar carries the
// current day's hours so the customer never has to dig.

function AnnouncementBar() {
  return (
    <div style={{
      background: "var(--c-dark-green)",
      color: "var(--c-cream)",
      padding: "10px var(--pad-x)",
      fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em",
      textTransform: "uppercase",
      display: "flex", justifyContent: "center", alignItems: "center", gap: 28,
    }}>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
        <span style={{ width: 6, height: 6, borderRadius: 999,
                        background: "var(--c-yellow)" }} />
        Open today · 6 am – 4 pm
      </span>
      <span style={{ opacity: 0.55 }}>·</span>
      <span>Weekend kitchen Sat–Sun · 10 am – 2 pm</span>
      <span style={{ opacity: 0.55 }}>·</span>
      <span>Free Wi-Fi · 516 S Hampton</span>
    </div>
  );
}

function SiteHeader({ currentPage }) {
  const nav = [
    { l: "Menu", h: "menu.html", k: "menu" },
    { l: "Market", h: "market.html", k: "market" },
    { l: "Kitchen", h: "kitchen.html", k: "kitchen" },
    { l: "Host", h: "host.html", k: "host" },
    { l: "Apply", h: "apply.html", k: "apply" },
    { l: "About", h: "about.html", k: "about" },
    { l: "Community", h: "community.html", k: "community" },
    { l: "Visit", h: "visit.html", k: "visit" },
  ];
  const [menuOpen, setMenuOpen] = React.useState(false);
  return (
    <>
    <header className="site-header" style={{
      background: "var(--c-cream)",
      borderBottom: "1px solid color-mix(in oklab, var(--c-dark-green) 12%, transparent)",
      position: "sticky", top: 0, zIndex: 50,
      backdropFilter: "saturate(140%) blur(6px)",
    }}>
      <AnnouncementBar />
      <div className="wrap" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "18px 0", gap: 14,
      }}>
        <a href="home.html" className="header-wordmark"
           style={{ display: "inline-flex", textDecoration: "none" }}>
          <Wordmark scale={0.95} />
        </a>
        <a href="home.html" className="header-basket"
           style={{ display: "none", textDecoration: "none",
                    alignItems: "center", gap: 8 }}
           aria-label="Everyday Works home">
          <img src="assets/basket-mark.png" alt=""
               style={{ width: 30, height: 30, display: "block", flexShrink: 0 }} />
          <span style={{
            display: "inline-flex", alignItems: "baseline", gap: 4,
            lineHeight: 0.85,
          }}>
            <span style={{
              fontFamily: "var(--font-wordmark)", fontSize: 16,
              letterSpacing: "-0.01em", textTransform: "uppercase",
              color: "var(--c-sea-green)",
            }}>EVERYDAY</span>
            <span style={{
              fontFamily: "var(--font-wordmark)", fontSize: 16,
              letterSpacing: "-0.01em", textTransform: "uppercase",
              color: "var(--c-charcoal)",
            }}>WORKS</span>
          </span>
        </a>
        <nav className="header-nav" style={{ display: "flex", gap: 24, alignItems: "center" }}>
          {nav.map(n => {
            const active = n.k === currentPage;
            return (
              <a key={n.l} href={n.h} style={{
                color: "var(--c-dark-green)", textDecoration: "none",
                fontSize: 14.5, fontWeight: 600,
                position: "relative",
                paddingBottom: 4,
                borderBottom: active
                  ? "2px solid var(--c-sea-green)"
                  : "2px solid transparent",
              }}>{n.l}</a>
            );
          })}
          <span style={{ width: 1, height: 22, background: "color-mix(in oklab, var(--c-dark-green) 18%, transparent)" }} />
          <a href="https://www.clover.com/online-ordering/everyday-works-dallas"
             target="_blank" rel="noopener"
             className="btn btn-primary header-order">Order pickup →</a>
        </nav>

        {/* Mobile-only: hamburger / close button (Order CTA is the sticky bottom pill) */}
        <div className="header-mobile-actions" style={{
          display: "none", alignItems: "center", gap: 0,
        }}>
          <button onClick={() => setMenuOpen(!menuOpen)}
                  aria-label={menuOpen ? "Close menu" : "Open menu"}
                  style={{
                    background: menuOpen ? "var(--c-dark-green)" : "transparent",
                    border: menuOpen ? "1px solid var(--c-dark-green)" : "1px solid color-mix(in oklab, var(--c-dark-green) 22%, transparent)",
                    width: 46, height: 46, borderRadius: 12, cursor: "pointer",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    transition: "background 0.15s ease",
                    padding: 0,
                  }}>
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <path d={menuOpen ? "M5 5L17 17 M17 5L5 17" : "M3 6H19 M3 11H19 M3 16H19"}
                    stroke={menuOpen ? "var(--c-cream)" : "var(--c-dark-green)"}
                    strokeWidth="2" strokeLinecap="round" />
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      <div className="header-drawer" style={{
        display: menuOpen ? "block" : "none",
        background: "var(--c-cream)",
        borderTop: "1px solid color-mix(in oklab, var(--c-dark-green) 12%, transparent)",
        minHeight: "calc(100vh - 130px)",
      }}>
        <div className="wrap" style={{ padding: "10px 0 80px",
                                         display: "flex", flexDirection: "column", gap: 0 }}>
          {nav.map(n => (
            <a key={n.l} href={n.h}
               onClick={() => setMenuOpen(false)}
               style={{
                 color: "var(--c-dark-green)", textDecoration: "none",
                 fontFamily: "var(--font-display)",
                 fontSize: 28, fontWeight: 400,
                 padding: "16px 4px",
                 borderBottom: "1px solid color-mix(in oklab, var(--c-dark-green) 10%, transparent)",
                 display: "flex", justifyContent: "space-between", alignItems: "center",
                 lineHeight: 1.1,
               }}>
              <span>{n.l}</span>
              <span style={{ color: "var(--c-sea-green)", fontSize: 18 }}>→</span>
            </a>
          ))}
        </div>
      </div>
    </header>
    </>
  );
}

window.SiteHeader = SiteHeader;