function Header({ route, setRoute, cartCount, openCart, authUser }) {
  const [navOpen, setNavOpen] = React.useState(false);
  const go = (r) => { setRoute(r); setNavOpen(false); };

  return (
    <>
      <header style={{ position: "sticky", top: 0, zIndex: 50, background: "rgba(255,255,255,.92)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--line)" }}>
        <div className="container between" style={{ height: 80 }}>
          <a className="logo" onClick={() => go("home")} style={{ cursor: "pointer" }}>
            <img src="assets/logo.webp" alt="Cap Bercy" />
            <div className="logo-text">
              <div className="name">Cap Bercy</div>
              <div className="sub">Spécialités italiennes</div>
            </div>
          </a>

          <nav className="row nav-desktop" style={{ gap: 4 }}>
            <NavItem active={route === "home"}  onClick={() => go("home")}>Accueil</NavItem>
            <NavItem active={route === "menu"}  onClick={() => go("menu")}>Menu</NavItem>
            <NavItem active={route === "infos"} onClick={() => go("infos")}>Infos</NavItem>
            {authUser && (
              <NavItem active={route === "admin"} onClick={() => go("admin")}>Admin</NavItem>
            )}
          </nav>

          <div className="row" style={{ gap: 10 }}>
            <button className="btn btn-ghost btn-sm" onClick={openCart} aria-label="Panier">
              <Icon.Bag />
              <span className="header-cta-text">Panier</span>
              {cartCount > 0 && (
                <span className="num" style={{
                  background: "var(--accent)", color: "#fff",
                  borderRadius: 999, padding: "1px 7px", fontSize: 11, fontWeight: 600, marginLeft: 2
                }}>{cartCount}</span>
              )}
            </button>
            <button className="btn btn-primary btn-sm nav-desktop" onClick={() => go("menu")}>
              Commander <Icon.ArrowRight />
            </button>
            <button className="nav-burger btn btn-ghost btn-sm" onClick={() => setNavOpen(true)} aria-label="Ouvrir le menu">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
            </button>
          </div>
        </div>
      </header>

      {navOpen && (
        <>
          <div style={{ position: "fixed", inset: 0, zIndex: 89, background: "rgba(20,17,12,.3)" }} onClick={() => setNavOpen(false)} />
          <nav className="mobile-nav">
            <button className="close" onClick={() => setNavOpen(false)} aria-label="Fermer"><Icon.X /></button>
            <button className={route === "home"  ? "active" : ""} onClick={() => go("home")}>Accueil</button>
            <button className={route === "menu"  ? "active" : ""} onClick={() => go("menu")}>Menu</button>
            <button className={route === "infos" ? "active" : ""} onClick={() => go("infos")}>Infos pratiques</button>
            {authUser && (
              <button className={route === "admin" ? "active" : ""} onClick={() => go("admin")}>Administration</button>
            )}
            <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => go("menu")}>
              Commander en ligne <Icon.ArrowRight />
            </button>
          </nav>
        </>
      )}
    </>
  );
}

function NavItem({ active, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      padding: "8px 14px", borderRadius: 999, fontSize: 14, fontWeight: 500,
      color: active ? "var(--ink)" : "var(--muted)",
      background: active ? "var(--cream)" : "transparent",
      transition: "background .15s, color .15s"
    }}>{children}</button>
  );
}

function Footer({ setRoute, authUser }) {
  const linkStyle = { background: "none", border: "none", cursor: "pointer", color: "#fff", fontSize: 12, padding: 0 };
  return (
    <footer style={{ background: "var(--ink)", color: "#fff", padding: "28px 0", marginTop: 80 }}>
      <div className="container between footer-bottom" style={{ fontSize: 12 }}>
        <div>© 2026 Cap Bercy – Tous droits réservés</div>
        <div className="row" style={{ gap: 16 }}>
          <button style={linkStyle} onClick={() => setRoute("mentions")}>Mentions légales</button>
          <button style={linkStyle} onClick={() => setRoute("confidentialite")}>Confidentialité</button>
          {authUser ? (
            <button onClick={() => setRoute("admin")} style={{ ...linkStyle, opacity: .5 }}>← Admin</button>
          ) : (
            <button onClick={() => setRoute("login")} style={{ ...linkStyle, opacity: .5 }}>Admin</button>
          )}
        </div>
      </div>
    </footer>
  );
}

window.Header = Header;
window.Footer = Footer;