/* global React, Logo, Icon, Button, Eyebrow */
const { useState } = React;

function Header({ onOrder }) {
  const [open, setOpen] = useState(false);
  const links = [
    { id: "menu", label: "Menu", href: "#menu" },
    { id: "order", label: "Order", href: "#order" },
    { id: "gallery", label: "Gallery", href: "#gallery" },
    { id: "about", label: "About", href: "#about" },
    { id: "catering", label: "Catering", href: "#catering" },
  ];
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 30, background: "rgba(251,246,236,0.82)", backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)", borderBottom: "1px solid var(--tf-border)" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 20px", height: 64, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
        <a href="#top" style={{ display: "flex", alignItems: "center" }}>
          <Logo variant="horizontal" height={56} />
        </a>
        <nav className="tf-desktop-nav" style={{ display: "none", gap: 28, alignItems: "center" }}>
          {links.map(l => (
            <a key={l.id} href={l.href} style={{ fontFamily: "var(--tf-font-body)", fontWeight: 500, fontSize: 14, color: "var(--tf-ink-600)", letterSpacing: "0.02em" }}>{l.label}</a>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <a href="tel:+15414235109" className="tf-header-phone" style={{ display: "none", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 500, color: "var(--tf-ink-600)" }}>
            <Icon.Phone /> <span>(541) 423-5109</span>
          </a>
          <Button size="sm" variant="crimson" onClick={onOrder}>Order Now</Button>
          <button onClick={() => setOpen(true)} className="tf-mobile-menu-btn" style={{ background: "transparent", border: "1px solid var(--tf-border-strong)", borderRadius: 999, padding: 9, color: "var(--tf-ink-600)", display: "flex", cursor: "pointer" }} aria-label="Open menu">
            <Icon.Menu />
          </button>
        </div>
      </div>

      {open && (
        <div style={{ position: "fixed", inset: 0, background: "var(--tf-charcoal)", zIndex: 50, display: "flex", flexDirection: "column", padding: "20px 24px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <Logo variant="horizontal" height={48} />
            <button onClick={() => setOpen(false)} style={{ background: "transparent", border: "1px solid rgba(255,255,255,0.2)", borderRadius: 999, padding: 9, color: "#fff", cursor: "pointer", display: "flex" }} aria-label="Close menu"><Icon.Close /></button>
          </div>
          <nav style={{ marginTop: 48, display: "flex", flexDirection: "column", gap: 4 }}>
            {links.map(l => (
              <a key={l.id} href={l.href} onClick={() => setOpen(false)} style={{ fontFamily: "var(--tf-font-display)", fontWeight: 500, fontSize: 36, color: "#f8f1e0", padding: "12px 0", borderBottom: "1px solid rgba(255,255,255,0.06)" }}>{l.label}</a>
            ))}
          </nav>
          <div style={{ marginTop: "auto", color: "var(--tf-brass-300)", fontSize: 13, display: "flex", flexDirection: "column", gap: 10 }}>
            <a href="tel:+15414235109" style={{ display: "flex", gap: 10, alignItems: "center", color: "var(--tf-brass-300)" }}><Icon.Phone /> (541) 423-5109</a>
            <a href="https://maps.google.com/?q=210+Peninger+Rd+Central+Point+OR+97502" target="_blank" rel="noopener" style={{ display: "flex", gap: 10, alignItems: "center", color: "var(--tf-brass-300)" }}><Icon.Pin /> 210 Peninger Rd, Central Point, OR</a>
            <div style={{ display: "flex", gap: 10, alignItems: "center" }}><Icon.Clock /> Open everyday · 11am – 10pm</div>
          </div>
        </div>
      )}

      <style>{`
        @media (min-width: 760px) {
          .tf-desktop-nav { display: flex !important; }
          .tf-mobile-menu-btn { display: none !important; }
        }
        @media (min-width: 920px) {
          .tf-header-phone { display: inline-flex !important; }
        }
      `}</style>
    </header>
  );
}

window.Header = Header;