// Header.jsx — sticky nav (no cart)
const Header = ({ navigate }) => {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const links = [
    { id: "home",    label: "Home" },
    { id: "about",   label: "Our Story" },
    { id: "visit",   label: "Visit" },
    { id: "soon",    label: "Coming Soon", disabled: true }
  ];

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 40,
      background: "var(--tp-navy)", color: "var(--tp-cream)",
      borderBottom: "3px solid var(--tp-red)",
    }}>
      <div style={{
        maxWidth: "var(--max-w)", margin: "0 auto", padding: "0 24px",
        height: 96, display: "flex", alignItems: "center", gap: 16,
      }}>
        <button style={iconBtn} className="mobile-only" onClick={() => setMobileOpen(!mobileOpen)}>
          {mobileOpen ? <Icons.X size={22}/> : <Icons.Menu size={22}/>}
        </button>
        <a onClick={() => navigate("home")} style={{cursor: "pointer", display: "flex", alignItems: "center"}}>
          <LogoLockup height={74}/>
        </a>
        <nav style={{display: "flex", gap: 4, marginLeft: "auto"}} className="desktop-only">
          {links.map((l, i) => (
            <a key={i}
              onClick={l.disabled ? undefined : () => navigate(l.id)}
              aria-disabled={l.disabled || undefined}
              title={l.disabled ? "Coming soon to the website" : undefined}
              style={{
                cursor: l.disabled ? "not-allowed" : "pointer", padding: "10px 14px",
                color: l.disabled ? "rgba(245,236,217,0.4)" : "var(--tp-cream)",
                fontFamily: "var(--font-body)",
                fontSize: 14, fontWeight: 600, letterSpacing: "0.02em",
                textTransform: "uppercase", borderBottom: "2px solid transparent",
                transition: "border-color 200ms",
              }}
              onMouseEnter={(e) => { if (!l.disabled) e.currentTarget.style.borderBottomColor = "var(--tp-red)"; }}
              onMouseLeave={(e) => { if (!l.disabled) e.currentTarget.style.borderBottomColor = "transparent"; }}
            >{l.label}</a>
          ))}
        </nav>
        <div style={{display: "flex", alignItems: "center", gap: 8, marginLeft: "auto"}} className="desktop-only">
          {[
            { Ic: Icons.Insta,    href: "https://www.instagram.com/tripleplayohio" },
            { Ic: Icons.Facebook, href: "https://www.facebook.com/tripleplaysportscardsandmemorabilia" },
            { Ic: Icons.TikTok,  href: "https://www.tiktok.com/@tripleplayohio" },
          ].map(({ Ic, href }, i) => (
            <a key={i} href={href} target="_blank" rel="noopener noreferrer" style={{
              width: 42, height: 42, borderRadius: 999,
              border: "2px solid rgba(245,236,217,0.35)",
              color: "var(--tp-cream)", display: "flex",
              alignItems: "center", justifyContent: "center", cursor: "pointer",
            }}><Ic size={20}/></a>
          ))}
        </div>
      </div>
      {mobileOpen && (
        <div className="mobile-only" style={{
          background: "var(--tp-navy-deep)", borderTop: "1px solid rgba(245,236,217,0.1)",
          flexDirection: "column", padding: "8px 24px 28px",
        }}>
          {links.map((l, i) => (
            <a key={i}
              onClick={l.disabled ? undefined : () => { navigate(l.id); setMobileOpen(false); }}
              aria-disabled={l.disabled || undefined}
              style={{
                display: "flex", alignItems: "center", padding: "18px 0",
                cursor: l.disabled ? "not-allowed" : "pointer",
                color: l.disabled ? "rgba(245,236,217,0.4)" : "var(--tp-cream)",
                fontFamily: "var(--font-body)",
                fontSize: 20, fontWeight: 700, letterSpacing: "0.02em",
                borderBottom: "1px solid rgba(245,236,217,0.1)",
              }}>{l.label}{l.disabled ? <span style={{fontSize: 11, marginLeft: 10, color: "var(--tp-red)", textTransform: "uppercase", letterSpacing: "0.08em"}}>Soon</span> : null}</a>
          ))}
          <div style={{display: "flex", gap: 16, marginTop: 24}}>
            {[
              { Ic: Icons.Insta,    href: "https://www.instagram.com/tripleplayohio" },
              { Ic: Icons.Facebook, href: "https://www.facebook.com/tripleplaysportscardsandmemorabilia" },
              { Ic: Icons.TikTok,  href: "https://www.tiktok.com/@tripleplayohio" },
            ].map(({ Ic, href }, i) => (
              <a key={i} href={href} target="_blank" rel="noopener noreferrer" style={{
                width: 44, height: 44, borderRadius: 999,
                border: "1px solid rgba(245,236,217,0.25)",
                color: "var(--tp-cream)", display: "flex", alignItems: "center", justifyContent: "center",
              }}><Ic size={20}/></a>
            ))}
          </div>
        </div>
      )}
    </header>
  );
};

const iconBtn = {
  background: "transparent", border: "none", color: "var(--tp-cream)",
  cursor: "pointer", padding: 8, borderRadius: 6, display: "flex",
};

const Banner = () => {
  const cfg = TP_CONFIG.BANNER;
  if (!cfg || !cfg.enabled || !cfg.message) return null;
  return (
    <div style={{
      background: "var(--tp-red)", color: "var(--tp-cream)",
      textAlign: "center", padding: "10px 24px",
      fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 600,
      letterSpacing: "0.02em", lineHeight: 1.4,
    }}>
      {cfg.message}
    </div>
  );
};

Object.assign(window, { Header, Banner });