const { Badge, Input } = window.TFCArchiveDesignSystem_df8876;

function Header({ active }) {
  const links = [["index.html","Home"],["photos.html","Clan Photos"],["cards.html","Player Cards"]];
  return (
    <header style={{position:"sticky",top:0,zIndex:30,background:"var(--surface-canvas)",borderBottom:"1px solid var(--border-hairline)"}}>
      <div style={{maxWidth:"var(--container-max)",margin:"0 auto",padding:"16px 24px",display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:12}}>
        <a href="index.html" style={{display:"flex",alignItems:"center",gap:12,textDecoration:"none"}}>
          <span className="tfc-display" style={{color:"var(--text-primary)",fontSize:24}}>TFC ARCHIVE</span>
          <Badge tone="amber">NZ / AUS</Badge>
        </a>
        <nav style={{display:"flex",gap:4}}>
          {links.map(([href,label]) => (
            <a key={href} href={href} style={{
              fontFamily:"var(--font-mono)",fontSize:12,letterSpacing:".1em",textTransform:"uppercase",
              padding:"8px 14px",borderRadius:"var(--radius-sm)",textDecoration:"none",
              color: active===href ? "var(--accent-amber-strong)" : "var(--text-secondary)",
              background: active===href ? "var(--surface-panel-raised)" : "none"
            }}>{label}</a>
          ))}
        </nav>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer style={{borderTop:"1px solid var(--border-hairline)",marginTop:64}}>
      <div style={{maxWidth:"var(--container-max)",margin:"0 auto",padding:"32px 24px",display:"flex",justifyContent:"space-between",flexWrap:"wrap",gap:12}}>
        <span className="tfc-hud-label" style={{color:"var(--text-muted)"}}>TFC ARCHIVE — UNOFFICIAL FAN ARCHIVE</span>
        <span className="tfc-hud-label" style={{color:"var(--text-muted)"}}>NOT AFFILIATED WITH VALVE CORPORATION</span>
      </div>
    </footer>
  );
}

function SearchBox({ value, onChange, placeholder }) {
  return (
    <div style={{maxWidth:480}}>
      <Input placeholder={placeholder} value={value} onChange={e=>onChange(e.target.value)} />
    </div>
  );
}

function Lightbox({ items, index, onClose, onNav, renderCaption }) {
  React.useEffect(() => {
    function onKey(e){
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") onNav(1);
      if (e.key === "ArrowLeft") onNav(-1);
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onNav, onClose]);
  if (index == null) return null;
  const item = items[index];
  return (
    <div onClick={onClose} style={{position:"fixed",inset:0,zIndex:100,background:"rgba(21,19,15,.92)",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:24}}>
      <button aria-label="Close" onClick={onClose} style={{position:"absolute",top:20,right:24,background:"none",border:"none",color:"var(--text-primary)",fontSize:32,cursor:"pointer",lineHeight:1}}>&times;</button>
      <button aria-label="Previous" onClick={e=>{e.stopPropagation();onNav(-1);}} style={{position:"absolute",left:16,top:"50%",transform:"translateY(-50%)",background:"var(--surface-panel-raised)",border:"1px solid var(--border-hairline)",color:"var(--text-primary)",width:44,height:44,borderRadius:"var(--radius-sm)",fontSize:20,cursor:"pointer"}}>&lsaquo;</button>
      <button aria-label="Next" onClick={e=>{e.stopPropagation();onNav(1);}} style={{position:"absolute",right:16,top:"50%",transform:"translateY(-50%)",background:"var(--surface-panel-raised)",border:"1px solid var(--border-hairline)",color:"var(--text-primary)",width:44,height:44,borderRadius:"var(--radius-sm)",fontSize:20,cursor:"pointer"}}>&rsaquo;</button>
      <img src={item.url} alt={item.caption||""} onClick={e=>e.stopPropagation()} style={{maxWidth:"90vw",maxHeight:"78vh",objectFit:"contain",border:"1px solid var(--border-hairline)",background:"var(--surface-panel)"}} />
      <div className="tfc-hud-label" style={{marginTop:16,color:"var(--text-secondary)"}}>{renderCaption ? renderCaption(item) : item.caption} — {index+1} / {items.length}</div>
    </div>
  );
}

window.TFCUI = { Header, Footer, SearchBox, Lightbox };