import { useState, useEffect, useRef } from "react";

/* ============================================================
   TICKETPUNCH UI — Complete Cyberpunk Design System
   Font: IBM Plex Mono | Palette: Dark / White / Gold / Red / Peach
   ============================================================ */

const FontInjector = () => (
  <style>{`
    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      /* ── DARK ── */
      --d-900: #060606;
      --d-800: #0A0A0A;
      --d-700: #0f0f0f;
      --d-600: #1e1e1e;
      --d-500: #2a2a2a;

      /* ── WHITE ── */
      --w-100: #FFFFFF;
      --w-200: #EFEFEF;
      --w-300: #CDCDCD;
      --w-400: #AAAAAA;
      --w-500: #888888;

      /* ── GOLD ── */
      --g-100: #FFF4CC;
      --g-300: #FFD700;
      --g-500: #C8960C;
      --g-700: #7A5800;
      --g-900: #3D2C00;

      /* ── RED ── */
      --r-100: #FFE5E5;
      --r-300: #FF6666;
      --r-500: #FF3333;
      --r-700: #CC0000;
      --r-900: #550000;

      /* ── PEACH ── */
      --p-100: #FFF0EB;
      --p-300: #FFBFA8;
      --p-500: #FF8C69;
      --p-700: #C45A35;
      --p-900: #5C2010;

      /* ── SEMANTIC ALIASES ── */
      --bg:           var(--d-900);
      --surface:      var(--d-800);
      --header:       var(--d-700);
      --border-1:     var(--d-600);
      --border-2:     var(--d-500);
      --text-primary: var(--w-100);
      --text-6:       #383838;

      --font: 'IBM Plex Mono', monospace;
      --tooth: 9px;
    }
    body { background: var(--bg); color: var(--text-primary); font-family: var(--font); }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--border-2); }

    @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.2} }
    @keyframes scroll-up { 0%{transform:translateY(0)} 100%{transform:translateY(-50%)} }
    @keyframes spin-slow  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
    @keyframes progress-fill { from{width:0} to{width:var(--fill)} }
    @keyframes toast-in { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }

    .pulse-anim  { animation: pulse-dot 1400ms ease-in-out infinite; }
    .scroll-anim { animation: scroll-up 12s linear infinite; }
    .spin-slow   { animation: spin-slow 8s linear infinite; }
    .toast-anim  { animation: toast-in 0.3s ease forwards; }

    .punched-frame { position: relative; }
    .punched-frame::before,
    .punched-frame::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: var(--tooth);
      z-index: 20;
      pointer-events: none;
      background: repeating-linear-gradient(
        90deg,
        transparent 0px, transparent 8px,
        var(--bg) 8px, var(--bg) 18px
      );
    }
    .punched-frame::before { top: 0; }
    .punched-frame::after  { bottom: 0; }
  `}</style>
);

const GrainOverlay = ({ strength = 0.18 }) => {
  const canvasRef = useRef(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    const W = 256, H = 256;
    canvas.width = W; canvas.height = H;
    const imageData = ctx.createImageData(W, H);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      const v = (Math.random() * 255) | 0;
      data[i] = data[i+1] = data[i+2] = v;
      data[i+3] = (strength * 255) | 0;
    }
    ctx.putImageData(imageData, 0, 0);
  }, [strength]);
  return (
    <canvas ref={canvasRef} style={{
      position:"absolute", inset:0, width:"100%", height:"100%",
      pointerEvents:"none", mixBlendMode:"overlay", opacity:0.9, zIndex:5
    }}/>
  );
};

const GeometricOverlay = () => (
  <svg style={{ position:"absolute", inset:0, width:"100%", height:"100%", pointerEvents:"none", zIndex:4, opacity:0.07 }} preserveAspectRatio="xMidYMid slice">
    <defs>
      <pattern id="lattice" width="32" height="32" patternUnits="userSpaceOnUse">
        <path d="M 32 0 L 0 0 0 32" fill="none" stroke="white" strokeWidth="0.5"/>
        <circle cx="0" cy="0" r="1" fill="white" opacity="0.5"/>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#lattice)"/>
    <circle cx="50%" cy="50%" r="80" fill="none" stroke="white" strokeWidth="0.5"/>
    <circle cx="50%" cy="50%" r="140" fill="none" stroke="white" strokeWidth="0.3"/>
    <line x1="50%" y1="0" x2="50%" y2="100%" stroke="white" strokeWidth="0.3"/>
    <line x1="0" y1="50%" x2="100%" y2="50%" stroke="white" strokeWidth="0.3"/>
    <polygon points="50%,10% 90%,90% 10%,90%" fill="none" stroke="white" strokeWidth="0.4" opacity="0.5"/>
  </svg>
);

const PunchHoles = () => (
  <>
    {[{top:"3px",left:"4px"},{top:"3px",right:"4px"},{bottom:"3px",left:"4px"},{bottom:"3px",right:"4px"}].map((pos,i) => (
      <div key={i} style={{
        position:"absolute", ...pos, width:9, height:9, borderRadius:"50%",
        background:"radial-gradient(circle, var(--bg) 4px, transparent 4px)",
        border:"1px solid var(--d-500)", zIndex:25, pointerEvents:"none",
      }}/>
    ))}
  </>
);

const Punched = ({ children, style={}, className="" }) => (
  <div className={`punched-frame ${className}`} style={{ position:"relative", ...style }}>
    <PunchHoles/>
    {children}
  </div>
);

const TicketShell = ({ children, stubHeight=60, style={} }) => (
  <Punched style={style}>
    <div style={{ background:"var(--surface)", border:"1px solid var(--border-1)",
      boxShadow:"0 40px 100px rgba(0,0,0,0.95)", position:"relative", overflow:"hidden" }}>
      <svg style={{ position:"absolute", inset:0, width:"100%", height:"100%", pointerEvents:"none", zIndex:6 }}>
        <rect x="8" y="8" width="calc(100% - 16px)" height="calc(100% - 16px)"
          fill="none" stroke="var(--d-500)" strokeWidth="1" strokeDasharray="4 3"/>
      </svg>
      <GrainOverlay/>
      <GeometricOverlay/>
      {stubHeight > 0 && (
        <div style={{ position:"absolute", bottom:stubHeight, left:0, right:0, zIndex:8,
          borderTop:"1px dashed var(--border-2)", display:"flex", alignItems:"center", justifyContent:"center" }}>
          <span style={{ background:"var(--surface)", padding:"0 8px", fontSize:7, color:"var(--w-500)",
            letterSpacing:"0.2em", fontFamily:"var(--font)" }}>✂ TEAR</span>
        </div>
      )}
      {children}
    </div>
  </Punched>
);

const Barcode = ({ value="OMEGA-7749-XX", width=120, height=28 }) => {
  const bars = [];
  for (let i = 0; i < 48; i++)
    bars.push({ x: i*(width/48), w: Math.random()>0.5?1.5:0.8, o: 0.4+Math.random()*0.6 });
  return (
    <div style={{ display:"flex", flexDirection:"column", alignItems:"center", gap:2 }}>
      <svg width={width} height={height} style={{ display:"block" }}>
        {bars.map((b,i) => <rect key={i} x={b.x} y={0} width={b.w} height={height} fill="var(--w-300)" opacity={b.o}/>)}
      </svg>
      <span style={{ fontSize:6, letterSpacing:"0.28em", color:"var(--w-500)", fontFamily:"var(--font)", textTransform:"uppercase" }}>{value}</span>
    </div>
  );
};

const StatusPill = ({ status="active", label, pulse=true }) => {
  const colors = {
    active:   "var(--g-300)",
    inactive: "var(--w-500)",
    warning:  "var(--p-500)",
    danger:   "var(--r-500)",
    pending:  "var(--g-100)",
  };
  const color = colors[status] || colors.active;
  return (
    <div style={{ display:"inline-flex", alignItems:"center", gap:6, padding:"3px 8px",
      border:`1px solid ${color}33`, background:`${color}0d`, borderRadius:2 }}>
      <div className={pulse?"pulse-anim":""} style={{ width:5, height:5, borderRadius:"50%",
        background:color, boxShadow:`0 0 6px ${color}` }}/>
      <span style={{ fontSize:8, letterSpacing:"0.28em", color, fontFamily:"var(--font)", textTransform:"uppercase" }}>
        {label || status}
      </span>
    </div>
  );
};

const TerminalMask = ({ lines=[], size=120 }) => {
  const defaultLines = [
    "CLASSIFIED // OMEGA PROTOCOL","ACCESS GRANTED — NEXUS-7","THREAT LEVEL: CRITICAL",
    "SYNC: 99.7% COMPLETE","FIREWALL: ACTIVE","ENCRYPTION: AES-512",
    "NODE: 192.168.0.77","UPTIME: 847:22:11","AGENT: SPECTRE-9","STATUS: OPERATIONAL",...lines
  ];
  const doubled = [...defaultLines, ...defaultLines];
  return (
    <div style={{ width:size, height:size, borderRadius:"50%", overflow:"hidden", position:"relative",
      border:"1px solid var(--d-500)", background:"var(--bg)",
      boxShadow:"inset 0 0 20px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.6)" }}>
      <div className="scroll-anim" style={{ position:"absolute", width:"100%", paddingTop:8 }}>
        {doubled.map((line,i) => (
          <div key={i} style={{ padding:"1.5px 8px", fontSize:6.5, letterSpacing:"0.18em",
            color: i%3===0 ? "var(--g-300)" : "var(--w-500)",
            fontFamily:"var(--font)", textTransform:"uppercase", whiteSpace:"nowrap", overflow:"hidden" }}>{line}</div>
        ))}
      </div>
      <div style={{ position:"absolute", inset:0, borderRadius:"50%",
        background:"radial-gradient(circle, transparent 40%, var(--bg) 80%)", pointerEvents:"none" }}/>
    </div>
  );
};

const Divider = ({ label }) => (
  <div style={{ display:"flex", alignItems:"center", gap:10, padding:"4px 0" }}>
    <div style={{ flex:1, height:1, background:"var(--border-1)" }}/>
    {label
      ? <span style={{ fontSize:7, letterSpacing:"0.28em", color:"var(--w-500)", textTransform:"uppercase", fontFamily:"var(--font)" }}>{label}</span>
      : <svg width="8" height="8"><polygon points="4,0 8,4 4,8 0,4" fill="var(--d-500)"/></svg>
    }
    <div style={{ flex:1, height:1, background:"var(--border-1)" }}/>
  </div>
);

const SectionLabel = ({ children, sub }) => (
  <div style={{ marginBottom:20 }}>
    <div style={{ display:"flex", alignItems:"center", gap:8 }}>
      <div style={{ width:2, height:14, background:"var(--g-300)" }}/>
      <span style={{ fontSize:9.5, fontWeight:700, letterSpacing:"0.34em", textTransform:"uppercase",
        fontFamily:"var(--font)", color:"var(--w-100)" }}>{children}</span>
    </div>
    {sub && <div style={{ marginTop:4, marginLeft:10, fontSize:7, letterSpacing:"0.2em",
      color:"var(--g-700)", textTransform:"uppercase", fontFamily:"var(--font)" }}>{sub}</div>}
  </div>
);

const Micro = ({ children, color="var(--text-6)" }) => (
  <span style={{ fontSize:7, letterSpacing:"0.28em", color, fontFamily:"var(--font)", textTransform:"uppercase" }}>{children}</span>
);

// ── 1. HEADER ──────────────────────────────────────────────────
const Header = ({ activeTab, setActiveTab }) => {
  const navItems = ["DASHBOARD","INTEL","ASSETS","COMMS","SYSTEM"];
  return (
    <Punched style={{ zIndex:100 }}>
      <div style={{ position:"relative", background:"var(--header)", borderBottom:"1px solid var(--border-1)",
        height:52, display:"flex", alignItems:"center", padding:"0 24px", gap:24, overflow:"hidden" }}>
        <GrainOverlay strength={0.1}/>
        <div style={{ display:"flex", alignItems:"center", gap:10, zIndex:7 }}>
          <svg width="18" height="18" viewBox="0 0 18 18">
            <polygon points="9,1 17,5 17,13 9,17 1,13 1,5" fill="none" stroke="var(--g-300)" strokeWidth="1.5"/>
            <polygon points="9,5 13,7 13,11 9,13 5,11 5,7" fill="var(--g-500)" opacity="0.3"/>
            <circle cx="9" cy="9" r="2" fill="var(--g-300)"/>
          </svg>
          <div>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:"0.22em", textTransform:"uppercase",
              fontFamily:"var(--font)", color:"var(--w-100)" }}>NEXUS</div>
            <div style={{ fontSize:6.5, letterSpacing:"0.34em", color:"var(--g-500)", textTransform:"uppercase", fontFamily:"var(--font)" }}>OMEGA PROTOCOL</div>
          </div>
        </div>
        <div style={{ width:1, height:28, background:"var(--border-1)", zIndex:7 }}/>
        <div style={{ display:"flex", gap:2, zIndex:7 }}>
          {navItems.map(item => (
            <button key={item} onClick={() => setActiveTab(item)} style={{
              background: activeTab===item ? "rgba(255,215,0,0.06)" : "transparent",
              border: activeTab===item ? "1px solid var(--g-700)" : "1px solid transparent",
              color: activeTab===item ? "var(--g-300)" : "var(--w-500)",
              padding:"5px 12px", cursor:"pointer", fontFamily:"var(--font)",
              fontSize:8, letterSpacing:"0.22em", textTransform:"uppercase", transition:"all 0.2s"
            }}>
              {item}
              {activeTab===item && <div style={{ width:"100%", height:1, background:"var(--g-300)", marginTop:2 }}/>}
            </button>
          ))}
        </div>
        <div style={{ flex:1 }}/>
        <div style={{ display:"flex", alignItems:"center", gap:14, zIndex:7 }}>
          <StatusPill status="active" label="SYS ONLINE"/>
          <div style={{ textAlign:"right" }}>
            <div style={{ fontSize:8, letterSpacing:"0.2em", color:"var(--w-300)", textTransform:"uppercase", fontFamily:"var(--font)" }}>AGT-09</div>
            <div style={{ fontSize:6.5, letterSpacing:"0.18em", color:"var(--g-500)", textTransform:"uppercase", fontFamily:"var(--font)" }}>CLEARANCE: OMEGA</div>
          </div>
          <div style={{ width:28, height:28, borderRadius:"50%", border:"1px solid var(--g-700)",
            background:"var(--surface)", display:"flex", alignItems:"center", justifyContent:"center",
            fontSize:9, color:"var(--g-300)", fontFamily:"var(--font)" }}>Ω</div>
        </div>
      </div>
    </Punched>
  );
};

// ── 2. BUTTON ──────────────────────────────────────────────────
const Button = ({ variant="primary", children, icon, size="md", disabled, onClick }) => {
  const sizes = { sm:"4px 10px", md:"7px 16px", lg:"10px 22px" };
  const fontSizes = { sm:7.5, md:8.5, lg:9.5 };
  const bases = {
    primary:   { bg:"var(--g-300)",              color:"var(--d-900)", border:"1px solid var(--g-300)" },
    secondary: { bg:"rgba(255,215,0,0.06)",       color:"var(--g-300)", border:"1px solid var(--g-700)" },
    outline:   { bg:"transparent",               color:"var(--w-100)", border:"1px solid var(--w-300)" },
    ghost:     { bg:"transparent",               color:"var(--w-500)", border:"1px solid transparent" },
    danger:    { bg:"rgba(255,51,51,0.10)",       color:"var(--r-500)", border:"1px solid var(--r-700)" },
    success:   { bg:"rgba(255,215,0,0.08)",       color:"var(--g-300)", border:"1px solid var(--g-700)" },
  };
  const s = bases[variant] || bases.primary;
  return (
    <button onClick={onClick} disabled={disabled} style={{
      background:s.bg, color:s.color, border:s.border,
      padding:sizes[size], fontFamily:"var(--font)",
      fontSize:fontSizes[size], letterSpacing:"0.22em", textTransform:"uppercase",
      cursor:disabled?"not-allowed":"pointer", opacity:disabled?0.4:1,
      display:"inline-flex", alignItems:"center", gap:6,
      position:"relative", overflow:"hidden", transition:"all 0.2s", outline:"none",
    }}>
      {["top:2px;left:2px","top:2px;right:2px","bottom:2px;left:2px","bottom:2px;right:2px"].map((pos,i) => {
        const st = pos.split(";").reduce((a,p)=>{ const [k,v]=p.split(":"); a[k]=v; return a; },{});
        return <div key={i} style={{ position:"absolute", ...st, width:2, height:2, background:s.color, opacity:0.5 }}/>;
      })}
      {icon && <span style={{ fontSize:fontSizes[size]*1.1 }}>{icon}</span>}
      {children}
    </button>
  );
};

// ── 3. INPUT ───────────────────────────────────────────────────
const Input = ({ placeholder, label, type="text", value, onChange, prefix, suffix, hint }) => (
  <div style={{ display:"flex", flexDirection:"column", gap:5 }}>
    {label && <label style={{ fontSize:7.5, letterSpacing:"0.28em", color:"var(--g-500)", textTransform:"uppercase", fontFamily:"var(--font)" }}>{label}</label>}
    <div style={{ position:"relative", background:"var(--surface)", border:"1px solid var(--border-1)",
      display:"flex", alignItems:"center", overflow:"hidden" }}>
      {prefix && <span style={{ padding:"0 8px", fontSize:8, color:"var(--g-500)", fontFamily:"var(--font)", borderRight:"1px solid var(--border-1)" }}>{prefix}</span>}
      <input type={type} placeholder={placeholder} value={value} onChange={onChange} style={{
        flex:1, background:"transparent", border:"none", outline:"none",
        color:"var(--w-100)", fontFamily:"var(--font)", fontSize:9, letterSpacing:"0.14em", padding:"9px 12px",
      }}/>
      {suffix && <span style={{ padding:"0 8px", fontSize:8, color:"var(--g-500)", fontFamily:"var(--font)", borderLeft:"1px solid var(--border-1)" }}>{suffix}</span>}
      <div style={{ position:"absolute", inset:2, border:"1px dashed var(--border-1)", pointerEvents:"none" }}/>
    </div>
    {hint && <div style={{ fontSize:7, letterSpacing:"0.18em", color:"var(--g-700)", fontFamily:"var(--font)", textTransform:"uppercase" }}>{hint}</div>}
  </div>
);

// ── 4. CARD ────────────────────────────────────────────────────
const Card = ({ children, title, sub, tag, style={} }) => (
  <Punched style={style}>
    <div style={{ position:"relative", background:"var(--surface)", border:"1px solid var(--border-1)", overflow:"hidden" }}>
      <GrainOverlay strength={0.12}/>
      {["top:0;left:0","top:0;right:0","bottom:0;left:0","bottom:0;right:0"].map((pos,i) => {
        const st = pos.split(";").reduce((a,p)=>{ const [k,v]=p.split(":"); a[k]=v; return a; },{});
        return (
          <div key={i} style={{ position:"absolute", ...st, width:12, height:12, zIndex:7,
            borderTop:    i<2  ? "1px solid var(--g-700)" : "none",
            borderBottom: i>=2 ? "1px solid var(--g-700)" : "none",
            borderLeft:   (i===0||i===2) ? "1px solid var(--g-700)" : "none",
            borderRight:  (i===1||i===3) ? "1px solid var(--g-700)" : "none",
          }}/>
        );
      })}
      {(title||sub||tag) && (
        <div style={{ padding:"10px 14px 8px", borderBottom:"1px solid var(--border-1)", position:"relative", zIndex:7 }}>
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start" }}>
            <div>
              {title && <div style={{ fontSize:9.5, fontWeight:600, letterSpacing:"0.22em", textTransform:"uppercase",
                fontFamily:"var(--font)", color:"var(--w-100)" }}>{title}</div>}
              {sub && <div style={{ fontSize:7, letterSpacing:"0.18em", color:"var(--g-500)", textTransform:"uppercase",
                fontFamily:"var(--font)", marginTop:3 }}>{sub}</div>}
            </div>
            {tag && <div style={{ fontSize:7, padding:"2px 7px", border:"1px solid var(--g-700)", color:"var(--g-500)",
              letterSpacing:"0.2em", textTransform:"uppercase", fontFamily:"var(--font)" }}>{tag}</div>}
          </div>
        </div>
      )}
      <div style={{ padding:14, position:"relative", zIndex:7 }}>{children}</div>
    </div>
  </Punched>
);

// ── 5. BADGE ───────────────────────────────────────────────────
const Badge = ({ children, variant="default" }) => {
  const vars = {
    default: { bg:"var(--surface)",          color:"var(--w-400)", border:"1px solid var(--border-2)" },
    active:  { bg:"rgba(255,215,0,0.08)",    color:"var(--g-300)", border:"1px solid var(--g-700)" },
    danger:  { bg:"rgba(255,51,51,0.08)",    color:"var(--r-500)", border:"1px solid var(--r-700)" },
    warning: { bg:"rgba(255,140,105,0.08)",  color:"var(--p-500)", border:"1px solid var(--p-700)" },
    omega:   { bg:"rgba(255,244,204,0.05)",  color:"var(--g-100)", border:"1px solid var(--g-700)" },
  };
  const v = vars[variant] || vars.default;
  return (
    <span style={{ ...v, display:"inline-block", padding:"2px 7px", fontSize:7,
      letterSpacing:"0.22em", textTransform:"uppercase", fontFamily:"var(--font)" }}>{children}</span>
  );
};

// ── 6. PROGRESS BAR ────────────────────────────────────────────
const ProgressBar = ({ value=65, label, color="var(--g-300)" }) => (
  <div style={{ display:"flex", flexDirection:"column", gap:4 }}>
    {label && (
      <div style={{ display:"flex", justifyContent:"space-between" }}>
        <Micro color="var(--w-500)">{label}</Micro>
        <Micro color="var(--g-500)">{value}%</Micro>
      </div>
    )}
    <div style={{ height:3, background:"var(--border-1)", position:"relative", overflow:"hidden" }}>
      <div style={{ "--fill":`${value}%`, width:`${value}%`, height:"100%", background:color,
        animation:"progress-fill 1.5s ease forwards", boxShadow:`0 0 8px ${color}` }}/>
      {[25,50,75].map(t => (
        <div key={t} style={{ position:"absolute", top:0, left:`${t}%`, width:1, height:"100%", background:"var(--border-2)" }}/>
      ))}
    </div>
  </div>
);

// ── 7. SPINNER ─────────────────────────────────────────────────
const Spinner = ({ size=32 }) => (
  <div style={{ position:"relative", width:size, height:size }}>
    <div className="spin-slow" style={{ width:"100%", height:"100%",
      border:"1px solid var(--border-2)", borderTop:"1px solid var(--g-300)", borderRadius:"50%" }}/>
    <div style={{ position:"absolute", inset:4, border:"1px dashed var(--g-700)", borderRadius:"50%" }}/>
    <div style={{ position:"absolute", inset:"50%", transform:"translate(-50%,-50%)",
      width:4, height:4, background:"var(--g-300)", borderRadius:"50%" }}/>
  </div>
);

// ── 8. TABS ────────────────────────────────────────────────────
const Tabs = ({ tabs, active, onSelect }) => (
  <div style={{ borderBottom:"1px solid var(--border-1)", display:"flex", gap:0 }}>
    {tabs.map((tab,i) => (
      <button key={i} onClick={() => onSelect(i)} style={{
        background: active===i ? "rgba(255,215,0,0.04)" : "transparent",
        border:"none", borderBottom: active===i ? "1px solid var(--g-300)" : "1px solid transparent",
        color: active===i ? "var(--g-300)" : "var(--w-500)",
        padding:"8px 16px", cursor:"pointer", fontFamily:"var(--font)",
        fontSize:8, letterSpacing:"0.22em", textTransform:"uppercase", position:"relative", marginBottom:-1,
      }}>
        {active===i && <div style={{ position:"absolute", top:0, left:0, right:0, height:1, background:"var(--g-700)" }}/>}
        {tab}
      </button>
    ))}
  </div>
);

// ── 9. ACCORDION ───────────────────────────────────────────────
const AccordionItem = ({ title, children }) => {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ borderBottom:"1px solid var(--border-1)" }}>
      <button onClick={() => setOpen(!open)} style={{
        width:"100%", background:"transparent", border:"none", padding:"10px 14px",
        display:"flex", justifyContent:"space-between", alignItems:"center",
        cursor:"pointer", color:"var(--w-300)", fontFamily:"var(--font)",
        fontSize:8.5, letterSpacing:"0.22em", textTransform:"uppercase",
      }}>
        <span>{title}</span>
        <svg width="10" height="10" style={{ transform:open?"rotate(180deg)":"rotate(0deg)", transition:"transform 0.2s" }}>
          <polygon points="5,7 0,0 10,0" fill="var(--g-500)"/>
        </svg>
      </button>
      {open && (
        <div style={{ padding:"8px 14px 12px", color:"var(--w-500)", fontSize:8.5, lineHeight:1.7,
          fontFamily:"var(--font)", letterSpacing:"0.1em", borderTop:"1px dashed var(--border-1)" }}>
          {children}
        </div>
      )}
    </div>
  );
};

// ── 10. TOOLTIP ────────────────────────────────────────────────
const Tooltip = ({ label, children }) => {
  const [show, setShow] = useState(false);
  return (
    <div style={{ position:"relative", display:"inline-block" }}
      onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
      {children}
      {show && (
        <div style={{ position:"absolute", bottom:"calc(100% + 6px)", left:"50%", transform:"translateX(-50%)",
          background:"var(--header)", border:"1px solid var(--g-700)", padding:"5px 10px",
          whiteSpace:"nowrap", zIndex:200, pointerEvents:"none" }}>
          <span style={{ fontSize:7.5, letterSpacing:"0.18em", color:"var(--g-300)",
            fontFamily:"var(--font)", textTransform:"uppercase" }}>{label}</span>
          <div style={{ position:"absolute", bottom:-4, left:"50%", transform:"translateX(-50%)", width:6, height:4,
            background:"var(--header)", borderRight:"1px solid var(--g-700)", borderBottom:"1px solid var(--g-700)",
            transformOrigin:"center", rotate:"45deg" }}/>
        </div>
      )}
    </div>
  );
};

// ── 11. DATA TABLE ─────────────────────────────────────────────
const DataTable = ({ columns, rows }) => (
  <Punched>
    <div style={{ border:"1px solid var(--border-1)", overflow:"hidden", position:"relative" }}>
      <GrainOverlay strength={0.08}/>
      <div style={{ display:"grid", gridTemplateColumns:`repeat(${columns.length}, 1fr)`,
        borderBottom:"1px solid var(--border-2)", background:"var(--header)", position:"relative", zIndex:7 }}>
        {columns.map((col,i) => (
          <div key={i} style={{ padding:"8px 12px", fontSize:7.5, letterSpacing:"0.22em",
            textTransform:"uppercase", color:"var(--g-500)", fontFamily:"var(--font)",
            borderRight: i<columns.length-1 ? "1px solid var(--border-1)" : "none" }}>
            {col}
          </div>
        ))}
      </div>
      {rows.map((row,ri) => (
        <div key={ri} style={{ display:"grid", gridTemplateColumns:`repeat(${columns.length}, 1fr)`,
          borderBottom: ri<rows.length-1 ? "1px solid var(--border-1)" : "none",
          background: ri%2===0 ? "transparent" : "rgba(255,215,0,0.01)", position:"relative", zIndex:7 }}>
          {row.map((cell,ci) => (
            <div key={ci} style={{ padding:"7px 12px", fontSize:8, letterSpacing:"0.12em",
              color: ci===0 ? "var(--w-200)" : "var(--w-500)", fontFamily:"var(--font)",
              borderRight: ci<row.length-1 ? "1px solid var(--border-1)" : "none" }}>
              {cell}
            </div>
          ))}
        </div>
      ))}
    </div>
  </Punched>
);

// ── 12. TOGGLE ─────────────────────────────────────────────────
const Toggle = ({ checked, onChange, label }) => (
  <div style={{ display:"flex", alignItems:"center", gap:10 }}>
    <div onClick={onChange} style={{ cursor:"pointer", width:40, height:16, position:"relative",
      background: checked ? "rgba(255,215,0,0.1)" : "var(--surface)",
      border:`1px solid ${checked ? "var(--g-700)" : "var(--border-1)"}` }}>
      {[...Array(8)].map((_,i) => (
        <div key={i} style={{ position:"absolute", top:2, bottom:2, left:4+i*4, width:1,
          background:"var(--border-2)", opacity:checked?1:0.4 }}/>
      ))}
      <div style={{ position:"absolute", top:1, width:12, height:12,
        background: checked ? "var(--g-300)" : "var(--border-2)",
        left: checked ? "calc(100% - 14px)" : 1,
        transition:"all 0.2s", boxShadow: checked ? "0 0 8px var(--g-500)" : "none",
        display:"flex", alignItems:"center", justifyContent:"center",
        fontSize:5, color: checked ? "var(--d-900)" : "transparent" }}>■</div>
    </div>
    {label && <span style={{ fontSize:8, letterSpacing:"0.18em", color:"var(--w-400)",
      fontFamily:"var(--font)", textTransform:"uppercase" }}>{label}</span>}
  </div>
);

// ── 13. ALERT ──────────────────────────────────────────────────
const Alert = ({ type="info", title, message, onClose }) => {
  const types = {
    info:    { color:"var(--w-300)",  border:"var(--border-2)", icon:"◈" },
    success: { color:"var(--g-300)",  border:"var(--g-700)",    icon:"✓" },
    warning: { color:"var(--p-500)",  border:"var(--p-700)",    icon:"⚠" },
    danger:  { color:"var(--r-500)",  border:"var(--r-700)",    icon:"✕" },
  };
  const t = types[type] || types.info;
  return (
    <Punched>
      <div className="toast-anim" style={{ background:"var(--surface)", border:`1px solid ${t.border}`,
        padding:"10px 14px", position:"relative", overflow:"hidden", display:"flex", gap:10, alignItems:"flex-start" }}>
        <GrainOverlay strength={0.1}/>
        <span style={{ fontSize:14, color:t.color, zIndex:7 }}>{t.icon}</span>
        <div style={{ flex:1, zIndex:7 }}>
          {title && <div style={{ fontSize:9, fontWeight:600, letterSpacing:"0.2em", color:t.color,
            textTransform:"uppercase", fontFamily:"var(--font)", marginBottom:3 }}>{title}</div>}
          <div style={{ fontSize:8, letterSpacing:"0.14em", color:"var(--w-500)", fontFamily:"var(--font)" }}>{message}</div>
        </div>
        {onClose && <button onClick={onClose} style={{ background:"none", border:"none",
          color:"var(--w-500)", cursor:"pointer", fontSize:10, zIndex:7 }}>×</button>}
      </div>
    </Punched>
  );
};

// ── 14. BREADCRUMBS ────────────────────────────────────────────
const Breadcrumbs = ({ items }) => (
  <div style={{ display:"flex", alignItems:"center", gap:6 }}>
    {items.map((item,i) => (
      <div key={i} style={{ display:"flex", alignItems:"center", gap:6 }}>
        <span style={{ fontSize:8, letterSpacing:"0.18em",
          color: i===items.length-1 ? "var(--g-300)" : "var(--w-500)",
          textTransform:"uppercase", fontFamily:"var(--font)", cursor:i<items.length-1?"pointer":"default" }}>
          {item}
        </span>
        {i<items.length-1 && (
          <svg width="6" height="6"><polygon points="3,0 6,3 3,6 0,3" fill="var(--g-700)"/></svg>
        )}
      </div>
    ))}
  </div>
);

// ── 15. STEPPER ────────────────────────────────────────────────
const Stepper = ({ steps, current }) => (
  <div style={{ display:"flex", alignItems:"center" }}>
    {steps.map((step,i) => (
      <div key={i} style={{ display:"flex", alignItems:"center", flex:i<steps.length-1?1:"none" }}>
        <div style={{ display:"flex", flexDirection:"column", alignItems:"center", gap:4 }}>
          <div style={{ width:24, height:24,
            border:`1px solid ${i<=current ? "var(--g-300)" : "var(--border-2)"}`,
            background: i<current ? "var(--g-300)" : i===current ? "rgba(255,215,0,0.1)" : "transparent",
            display:"flex", alignItems:"center", justifyContent:"center",
            fontSize:7.5, color: i<current ? "var(--d-900)" : i===current ? "var(--g-300)" : "var(--w-500)",
            fontFamily:"var(--font)", fontWeight:700, letterSpacing:"0.1em" }}>
            {i<current ? "✓" : i+1}
          </div>
          <span style={{ fontSize:7, letterSpacing:"0.16em",
            color: i<=current ? "var(--g-300)" : "var(--w-500)",
            textTransform:"uppercase", fontFamily:"var(--font)", whiteSpace:"nowrap" }}>{step}</span>
        </div>
        {i<steps.length-1 && (
          <div style={{ flex:1, height:1, background: i<current ? "var(--g-500)" : "var(--border-1)",
            margin:"0 8px", marginBottom:14 }}/>
        )}
      </div>
    ))}
  </div>
);

// ── 16. SELECT ─────────────────────────────────────────────────
const Select = ({ label, options, value, onChange }) => {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ position:"relative", display:"flex", flexDirection:"column", gap:5 }}>
      {label && <label style={{ fontSize:7.5, letterSpacing:"0.28em", color:"var(--g-500)",
        textTransform:"uppercase", fontFamily:"var(--font)" }}>{label}</label>}
      <div onClick={() => setOpen(!open)} style={{ background:"var(--surface)", border:"1px solid var(--border-1)",
        padding:"9px 12px", cursor:"pointer", display:"flex", justifyContent:"space-between",
        alignItems:"center", position:"relative" }}>
        <span style={{ fontSize:9, letterSpacing:"0.14em", fontFamily:"var(--font)",
          color: value ? "var(--w-100)" : "var(--w-500)" }}>
          {value || "— SELECT OPTION —"}
        </span>
        <svg width="8" height="8" style={{ transform:open?"rotate(180deg)":"none", transition:"transform 0.2s" }}>
          <polygon points="4,6 0,0 8,0" fill="var(--g-500)"/>
        </svg>
        <div style={{ position:"absolute", inset:2, border:"1px dashed var(--border-1)", pointerEvents:"none" }}/>
      </div>
      {open && (
        <div style={{ position:"absolute", top:"calc(100% + 2px)", left:0, right:0, background:"var(--header)",
          border:"1px solid var(--g-700)", zIndex:100, overflow:"hidden" }}>
          {options.map((opt,i) => (
            <div key={i} onClick={() => { onChange(opt); setOpen(false); }} style={{
              padding:"8px 12px", cursor:"pointer", fontSize:8.5, letterSpacing:"0.14em",
              fontFamily:"var(--font)", color:"var(--w-400)", textTransform:"uppercase",
              borderBottom: i<options.length-1 ? "1px solid var(--border-1)" : "none", transition:"background 0.1s",
            }}
            onMouseEnter={e => e.currentTarget.style.background="rgba(255,215,0,0.05)"}
            onMouseLeave={e => e.currentTarget.style.background="transparent"}>
              <div style={{ display:"flex", alignItems:"center", gap:8 }}>
                <div style={{ width:3, height:3, background:"var(--g-500)" }}/>{opt}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ── 17. MODAL ──────────────────────────────────────────────────
const Modal = ({ open, onClose, title, children }) => {
  if (!open) return null;
  return (
    <div style={{ position:"fixed", inset:0, background:"rgba(0,0,0,0.85)", zIndex:1000,
      display:"flex", alignItems:"center", justifyContent:"center", backdropFilter:"blur(4px)" }}>
      <div style={{ position:"relative", maxWidth:480, width:"90%", maxHeight:"80vh", overflow:"hidden" }}>
        <TicketShell stubHeight={0}>
          <div style={{ padding:"20px 20px 16px", position:"relative", zIndex:8 }}>
            <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:16 }}>
              <div>
                <div style={{ fontSize:7, letterSpacing:"0.28em", color:"var(--g-700)",
                  fontFamily:"var(--font)", textTransform:"uppercase", marginBottom:4 }}>// CLASSIFIED DIALOGUE</div>
                <div style={{ fontSize:11, fontWeight:700, letterSpacing:"0.22em", textTransform:"uppercase",
                  fontFamily:"var(--font)", color:"var(--g-300)" }}>{title}</div>
              </div>
              <button onClick={onClose} style={{ background:"transparent", border:"1px solid var(--g-700)",
                color:"var(--g-500)", width:24, height:24, cursor:"pointer", fontFamily:"var(--font)", fontSize:10,
                display:"flex", alignItems:"center", justifyContent:"center" }}>×</button>
            </div>
            <Divider/>
            <div style={{ marginTop:14, color:"var(--w-400)", fontSize:8.5, lineHeight:1.7,
              letterSpacing:"0.12em", fontFamily:"var(--font)" }}>{children}</div>
            <div style={{ marginTop:18, display:"flex", gap:8, justifyContent:"flex-end" }}>
              <Button variant="ghost" onClick={onClose}>CANCEL</Button>
              <Button variant="primary" onClick={onClose}>CONFIRM</Button>
            </div>
          </div>
        </TicketShell>
      </div>
    </div>
  );
};

// ── 18. AVATAR ─────────────────────────────────────────────────
const Avatar = ({ initials="Ω", status }) => (
  <div style={{ position:"relative", width:40, height:40 }}>
    <div style={{ width:"100%", height:"100%", borderRadius:"50%", background:"var(--surface)",
      border:"1px solid var(--g-700)", display:"flex", alignItems:"center", justifyContent:"center",
      overflow:"hidden", position:"relative" }}>
      <GeometricOverlay/>
      <span style={{ fontSize:13, color:"var(--g-300)", fontFamily:"var(--font)", zIndex:7 }}>{initials}</span>
    </div>
    {status && (
      <div className="pulse-anim" style={{ position:"absolute", bottom:1, right:1, width:7, height:7,
        borderRadius:"50%", background:"var(--g-300)", border:"1px solid var(--bg)",
        boxShadow:"0 0 6px var(--g-500)" }}/>
    )}
  </div>
);

// ── 19. FIELDSET ───────────────────────────────────────────────
const Fieldset = ({ legend, children }) => (
  <div style={{ border:"1px solid var(--border-1)", padding:"14px 16px", position:"relative", marginTop:8 }}>
    <div style={{ position:"absolute", top:-7, left:12, background:"var(--bg)", padding:"0 6px",
      fontSize:7, letterSpacing:"0.28em", color:"var(--g-500)", textTransform:"uppercase", fontFamily:"var(--font)" }}>
      {legend}
    </div>
    <div style={{ display:"flex", flexDirection:"column", gap:14 }}>{children}</div>
  </div>
);

// ── 20. STAT CARD ──────────────────────────────────────────────
const StatCard = ({ label, value, unit, change, trend }) => (
  <Punched>
    <div style={{ position:"relative", background:"var(--surface)", border:"1px solid var(--border-1)",
      padding:"14px 16px", overflow:"hidden" }}>
      <GrainOverlay strength={0.1}/>
      <div style={{ position:"relative", zIndex:7 }}>
        <div style={{ fontSize:7, letterSpacing:"0.28em", color:"var(--g-700)", textTransform:"uppercase",
          fontFamily:"var(--font)", marginBottom:8 }}>{label}</div>
        <div style={{ display:"flex", alignItems:"baseline", gap:4 }}>
          <span style={{ fontSize:26, fontWeight:700, letterSpacing:"0.04em",
            fontFamily:"var(--font)", lineHeight:1, color:"var(--w-100)" }}>{value}</span>
          {unit && <span style={{ fontSize:9, color:"var(--g-500)", fontFamily:"var(--font)", letterSpacing:"0.14em" }}>{unit}</span>}
        </div>
        {change !== undefined && (
          <div style={{ marginTop:6, fontSize:7.5, letterSpacing:"0.18em", fontFamily:"var(--font)",
            color: trend==="up" ? "var(--g-300)" : trend==="down" ? "var(--r-500)" : "var(--w-500)" }}>
            {trend==="up" ? "▲" : trend==="down" ? "▼" : "—"} {change}
          </div>
        )}
      </div>
      <div style={{ position:"absolute", bottom:-20, right:-20, width:60, height:60,
        borderRadius:"50%", background:"rgba(255,215,0,0.03)", pointerEvents:"none" }}/>
    </div>
  </Punched>
);

// ── 21. SIDEBAR ────────────────────────────────────────────────
const Sidebar = ({ activeItem, setActiveItem }) => {
  const items = [
    { icon:"◈", label:"DASHBOARD", sub:"OVERVIEW" },
    { icon:"◉", label:"INTEL",     sub:"CLASSIFIED" },
    { icon:"▣", label:"ASSETS",    sub:"INVENTORY" },
    { icon:"◆", label:"COMMS",     sub:"ENCRYPTED" },
    { icon:"⬡", label:"ANALYTICS", sub:"METRICS" },
    { icon:"⊕", label:"SETTINGS",  sub:"CONFIG" },
  ];
  return (
    <Punched style={{ width:160 }}>
      <div style={{ background:"var(--header)", borderRight:"1px solid var(--border-1)",
        display:"flex", flexDirection:"column", position:"relative", overflow:"hidden", height:"100%" }}>
        <GrainOverlay strength={0.13}/>
        <div style={{ position:"absolute", right:0, top:0, bottom:0, width:8,
          background:"repeating-linear-gradient(180deg, transparent 0px, transparent 8px, var(--bg) 8px, var(--bg) 18px)",
          zIndex:10 }}/>
        <div style={{ padding:"12px 0", flex:1, position:"relative", zIndex:7 }}>
          {items.map((item,i) => (
            <button key={i} onClick={() => setActiveItem(item.label)} style={{
              width:"100%", background: activeItem===item.label ? "rgba(255,215,0,0.05)" : "transparent",
              border:"none", borderLeft: activeItem===item.label ? "2px solid var(--g-300)" : "2px solid transparent",
              borderRight:"none", padding:"10px 14px", cursor:"pointer", textAlign:"left",
              borderBottom: i<items.length-1 ? "1px solid var(--border-1)" : "none",
            }}>
              <div style={{ display:"flex", gap:8, alignItems:"center" }}>
                <span style={{ fontSize:11, color: activeItem===item.label ? "var(--g-300)" : "var(--w-500)" }}>{item.icon}</span>
                <div>
                  <div style={{ fontSize:8, fontWeight:600, letterSpacing:"0.18em", textTransform:"uppercase",
                    color: activeItem===item.label ? "var(--g-300)" : "var(--w-400)", fontFamily:"var(--font)" }}>{item.label}</div>
                  <div style={{ fontSize:6, letterSpacing:"0.2em", color:"var(--g-700)", textTransform:"uppercase", fontFamily:"var(--font)" }}>{item.sub}</div>
                </div>
              </div>
            </button>
          ))}
        </div>
        <div style={{ padding:"12px 14px", borderTop:"1px solid var(--border-1)", position:"relative", zIndex:7 }}>
          <Barcode value="AGT-09-NEXUS" width={120} height={16}/>
        </div>
      </div>
    </Punched>
  );
};

// ── 22. FOOTER ─────────────────────────────────────────────────
const Footer = () => (
  <Punched style={{ marginTop:8 }}>
    <div style={{ position:"relative", background:"var(--header)", borderTop:"1px solid var(--border-1)",
      padding:"12px 24px", display:"flex", justifyContent:"space-between", alignItems:"center", overflow:"hidden" }}>
      <GrainOverlay strength={0.1}/>
      <div style={{ position:"relative", zIndex:7 }}>
        <Micro color="var(--g-700)">© NEXUS PROTOCOL — OMEGA DIVISION — CLEARANCE REQUIRED</Micro>
      </div>
      <div style={{ position:"relative", zIndex:7 }}>
        <Barcode value="NEXUS-FOOTER-SYS" width={100} height={14}/>
      </div>
      <div style={{ position:"relative", zIndex:7, display:"flex", gap:12 }}>
        <Micro color="var(--g-500)">v4.7.2</Micro>
        <Micro color="var(--g-700)">BUILD-20470312</Micro>
      </div>
    </div>
  </Punched>
);

// ══════════════════════════════════════════════════════════════
//  DEMO PAGE
// ══════════════════════════════════════════════════════════════
export default function TicketPunchUIDemo() {
  const [activeNavTab,   setActiveNavTab]   = useState("DASHBOARD");
  const [activeSideItem, setActiveSideItem] = useState("DASHBOARD");
  const [activeTab,      setActiveTab]      = useState(0);
  const [toggleA,        setToggleA]        = useState(true);
  const [toggleB,        setToggleB]        = useState(false);
  const [modalOpen,      setModalOpen]      = useState(false);
  const [selectVal,      setSelectVal]      = useState("");
  const [inputVal,       setInputVal]       = useState("");

  return (
    <div style={{ fontFamily:"var(--font)", background:"var(--bg)", minHeight:"100vh",
      color:"var(--text-primary)", position:"relative" }}>
      <FontInjector/>

      {/* Ambient gold glow */}
      <div style={{ position:"fixed", top:"30%", left:"50%", transform:"translate(-50%,-50%)",
        width:600, height:600, borderRadius:"50%",
        background:"radial-gradient(circle, rgba(255,215,0,0.025) 0%, transparent 70%)",
        pointerEvents:"none", zIndex:0 }}/>

      <div style={{ display:"flex", flexDirection:"column", height:"100vh", overflow:"hidden" }}>
        <Header activeTab={activeNavTab} setActiveTab={setActiveNavTab}/>
        <div style={{ display:"flex", flex:1, overflow:"hidden" }}>
          <Sidebar activeItem={activeSideItem} setActiveItem={setActiveSideItem}/>

          <div style={{ flex:1, overflow:"auto", padding:24 }}>

            {/* Page Header */}
            <div style={{ marginBottom:28, display:"flex", justifyContent:"space-between", alignItems:"flex-start" }}>
              <div>
                <Breadcrumbs items={["NEXUS","DASHBOARD","COMPONENT LAB"]}/>
                <h1 style={{ fontSize:22, fontWeight:700, letterSpacing:"0.18em", textTransform:"uppercase",
                  fontFamily:"var(--font)", marginTop:8, lineHeight:1, color:"var(--w-100)" }}>TICKETPUNCH UI</h1>
                <div style={{ fontSize:8, letterSpacing:"0.28em", color:"var(--g-700)", textTransform:"uppercase",
                  fontFamily:"var(--font)", marginTop:6 }}>
                  DESIGN SYSTEM — OMEGA CLASSIFICATION — BUILD 2047.03.12
                </div>
              </div>
              <div style={{ display:"flex", gap:8, alignItems:"center" }}>
                <StatusPill status="active" label="ALL SYSTEMS GO"/>
                <Button variant="outline" size="sm">EXPORT</Button>
              </div>
            </div>

            {/* STAT CARDS */}
            <SectionLabel sub="// REAL-TIME METRICS — CLASSIFIED">SYSTEM OVERVIEW</SectionLabel>
            <div style={{ display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:12, marginBottom:28 }}>
              <StatCard label="ACTIVE NODES" value="847"  change="+12 TODAY" trend="up"/>
              <StatCard label="THREAT LEVEL" value="2.7"  unit="%" change="-0.4 DELTA" trend="down"/>
              <StatCard label="DATA STREAMS" value="1.4"  unit="TB" change="+0.2 TB" trend="up"/>
              <StatCard label="UPTIME"       value="99.9" unit="%" change="NOMINAL" trend="neutral"/>
            </div>

            {/* MAIN TICKET CARD */}
            <SectionLabel sub="// TICKET SHELL — PRIMARY CONTAINER">CLASSIFIED INTEL BRIEF</SectionLabel>
            <div style={{ marginBottom:28 }}>
              <TicketShell stubHeight={68}>
                <div style={{ padding:"28px 24px 80px", position:"relative", zIndex:8 }}>
                  <div style={{ display:"flex", gap:20, alignItems:"flex-start" }}>
                    <TerminalMask size={100}/>
                    <div style={{ flex:1 }}>
                      <div style={{ fontSize:7, letterSpacing:"0.34em", color:"var(--g-700)",
                        textTransform:"uppercase", fontFamily:"var(--font)", marginBottom:6 }}>
                        // OMEGA-NEXUS // DIRECTIVE 7749 // CLASSIFIED
                      </div>
                      <h2 style={{ fontSize:18, fontWeight:700, letterSpacing:"0.18em", textTransform:"uppercase",
                        fontFamily:"var(--font)", marginBottom:10, lineHeight:1.2, color:"var(--g-300)" }}>
                        OPERATION<br/>BLACKOUT
                      </h2>
                      <p style={{ fontSize:8.5, color:"var(--w-500)", lineHeight:1.8,
                        letterSpacing:"0.12em", fontFamily:"var(--font)", maxWidth:420 }}>
                        AUTHORIZED PERSONNEL ONLY. MISSION PARAMETERS LOCKED PENDING CLEARANCE VERIFICATION.
                        ALL COMMUNICATION ENCRYPTED VIA NEXUS-PROTOCOL AES-512.
                      </p>
                      <div style={{ marginTop:14, display:"flex", gap:8, flexWrap:"wrap" }}>
                        <Badge variant="omega">OMEGA-7</Badge>
                        <Badge variant="danger">TOP SECRET</Badge>
                        <Badge variant="warning">ACTIVE</Badge>
                        <Badge>NEXUS-PROTOCOL</Badge>
                      </div>
                    </div>
                    <div style={{ display:"flex", flexDirection:"column", gap:10, alignItems:"flex-end" }}>
                      <Barcode value="OP-7749-BX-OMEGA" width={130} height={36}/>
                      <Micro color="var(--g-700)">ISSUED: 2047.03.12</Micro>
                    </div>
                  </div>
                </div>
                <div style={{ position:"absolute", bottom:0, left:0, right:0, height:68, padding:"0 24px",
                  display:"flex", alignItems:"center", justifyContent:"space-between", zIndex:8 }}>
                  <Micro color="var(--g-700)">REF: NEXUS-OP-7749</Micro>
                  <div style={{ display:"flex", gap:16 }}>
                    <StatusPill status="active" label="MISSION ACTIVE"/>
                    <StatusPill status="warning" label="HIGH RISK"/>
                  </div>
                </div>
              </TicketShell>
            </div>

            {/* TABS + TABLE */}
            <SectionLabel sub="// DATA MANAGEMENT INTERFACE">INTEL DATABASE</SectionLabel>
            <div style={{ marginBottom:28 }}>
              <Card>
                <Tabs tabs={["AGENTS","MISSIONS","ASSETS","THREATS"]} active={activeTab} onSelect={setActiveTab}/>
                <div style={{ marginTop:16 }}>
                  <DataTable
                    columns={["AGENT ID","STATUS","CLEARANCE","ASSIGNMENT","LAST ACTIVE"]}
                    rows={[
                      ["AGT-001 SPECTRE", <Badge variant="active">ACTIVE</Badge>,      "OMEGA", "OP-7749", "0:04:22 AGO"],
                      ["AGT-002 PHANTOM", <Badge variant="warning">STANDBY</Badge>,    "DELTA", "OP-7700", "2:14:07 AGO"],
                      ["AGT-003 WRAITH",  <Badge variant="danger">COMPROMISED</Badge>, "GAMMA", "—",       "6:55:13 AGO"],
                      ["AGT-004 NEXUS",   <Badge>OFFLINE</Badge>,                      "ALPHA", "OP-7801", "1D 04H AGO"],
                    ]}
                  />
                </div>
              </Card>
            </div>

            {/* BUTTONS */}
            <SectionLabel sub="// INTERACTION PRIMITIVES">BUTTON SYSTEM</SectionLabel>
            <div style={{ marginBottom:28 }}>
              <Card title="BUTTON VARIANTS" sub="ALL STATES + SIZES">
                <div style={{ display:"flex", flexWrap:"wrap", gap:8, marginBottom:16 }}>
                  <Button variant="primary">EXECUTE</Button>
                  <Button variant="secondary">STANDBY</Button>
                  <Button variant="outline">CONFIRM</Button>
                  <Button variant="ghost">DISMISS</Button>
                  <Button variant="danger">ABORT</Button>
                  <Button variant="success">SECURE</Button>
                  <Button variant="primary" disabled>LOCKED</Button>
                  <Button variant="outline" size="sm">SMALL</Button>
                  <Button variant="primary" size="lg">LAUNCH SEQUENCE</Button>
                  <Tooltip label="OMEGA CLASSIFIED FUNCTION">
                    <Button variant="secondary" icon="◈">WITH ICON</Button>
                  </Tooltip>
                </div>
                <Divider label="ICON VARIANTS"/>
                <div style={{ display:"flex", gap:8, marginTop:12 }}>
                  {["◈","◉","▣","◆","⊕"].map((icon,i) => (
                    <Button key={i} variant="secondary" size="sm" icon={icon}>{icon==="⊕"?"ADD":""}</Button>
                  ))}
                </div>
              </Card>
            </div>

            {/* FORM ELEMENTS */}
            <SectionLabel sub="// DATA ENTRY SYSTEM">FORM ELEMENTS</SectionLabel>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:16, marginBottom:28 }}>
              <Card title="TEXT INPUTS" sub="TERMINAL STYLE">
                <div style={{ display:"flex", flexDirection:"column", gap:14 }}>
                  <Input label="AGENT ID" placeholder="ENTER AGENT IDENTIFIER"
                    value={inputVal} onChange={e => setInputVal(e.target.value)} hint="FORMAT: AGT-XXX-CLEARANCE"/>
                  <Input label="AUTHORIZATION CODE" placeholder="••••••••" type="password"/>
                  <Input label="COORDINATES" placeholder="00.000000, 00.000000" prefix="GEO" suffix="WGS84"/>
                  <Fieldset legend="COMMS CHANNEL">
                    <Input label="FREQUENCY" placeholder="XXX.XXXXX MHZ" prefix="RF"/>
                    <Toggle checked={toggleA} onChange={() => setToggleA(!toggleA)} label="ENCRYPTION ENABLED"/>
                  </Fieldset>
                </div>
              </Card>
              <Card title="SELECTORS + TOGGLES" sub="CONTROL ELEMENTS">
                <div style={{ display:"flex", flexDirection:"column", gap:14 }}>
                  <Select label="CLEARANCE LEVEL" options={["ALPHA","BETA","GAMMA","DELTA","OMEGA"]}
                    value={selectVal} onChange={setSelectVal}/>
                  <Select label="MISSION STATUS" options={["ACTIVE","STANDBY","COMPLETED","ABORT","CLASSIFIED"]}
                    value="" onChange={() => {}}/>
                  <Divider label="TOGGLES"/>
                  <Toggle checked={toggleA} onChange={() => setToggleA(!toggleA)} label="ACTIVE SURVEILLANCE"/>
                  <Toggle checked={toggleB} onChange={() => setToggleB(!toggleB)} label="STEALTH MODE"/>
                  <Toggle checked={true}    onChange={() => {}}                   label="ENCRYPTION LAYER"/>
                  <Divider/>
                  <div>
                    <Micro color="var(--g-500)">PROGRESS INDICATORS</Micro>
                    <div style={{ marginTop:10, display:"flex", flexDirection:"column", gap:10 }}>
                      <ProgressBar value={87} label="UPLINK SYNC" color="var(--g-300)"/>
                      <ProgressBar value={44} label="THREAT SCAN" color="var(--p-500)"/>
                      <ProgressBar value={12} label="BREACH RISK" color="var(--r-500)"/>
                    </div>
                  </div>
                </div>
              </Card>
            </div>

            {/* STATUS + BADGES */}
            <SectionLabel sub="// CLASSIFICATION LABELS">STATUS SYSTEM</SectionLabel>
            <div style={{ marginBottom:28 }}>
              <Card title="BADGES + STATUS PILLS" sub="ALL VARIANTS">
                <div style={{ display:"flex", flexWrap:"wrap", gap:8, marginBottom:16 }}>
                  <StatusPill status="active"/>
                  <StatusPill status="inactive" label="OFFLINE"/>
                  <StatusPill status="warning"  label="STANDBY"/>
                  <StatusPill status="danger"   label="BREACH"/>
                  <StatusPill status="pending"  label="SYNCING"/>
                </div>
                <Divider label="BADGES"/>
                <div style={{ display:"flex", flexWrap:"wrap", gap:6, marginTop:12 }}>
                  <Badge variant="omega">OMEGA</Badge>
                  <Badge variant="active">ACTIVE</Badge>
                  <Badge variant="danger">COMPROMISED</Badge>
                  <Badge variant="warning">ALERT</Badge>
                  <Badge>DEFAULT</Badge>
                  <Badge>CLASSIFIED</Badge>
                  <Badge>NEXUS</Badge>
                </div>
              </Card>
            </div>

            {/* ACCORDION + STEPPER */}
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:16, marginBottom:28 }}>
              <div>
                <SectionLabel sub="// COLLAPSIBLE SECTIONS">ACCORDION</SectionLabel>
                <Card>
                  <AccordionItem title="MISSION PARAMETERS">
                    PRIMARY OBJECTIVE: INFILTRATE NEXUS SIGMA NODE. SECONDARY: EXTRACT DATA PACKAGE DELTA-7.
                    ABORT CODE: 4419-OMEGA. DURATION: 72H MAX.
                  </AccordionItem>
                  <AccordionItem title="AGENT DOSSIER">
                    AGENT: SPECTRE-9 // RANK: SENIOR OPERATIVE // CLEARANCE: OMEGA //
                    STATUS: FIELD ACTIVE // DEPLOYMENTS: 47 COMPLETED.
                  </AccordionItem>
                  <AccordionItem title="CLASSIFIED INTEL">
                    [REDACTED — CLEARANCE LEVEL OMEGA REQUIRED. CONTACT DIVISION COMMANDER FOR ACCESS CREDENTIALS.]
                  </AccordionItem>
                </Card>
              </div>
              <div>
                <SectionLabel sub="// MISSION PROGRESS WIZARD">STEPPER</SectionLabel>
                <Card>
                  <Stepper steps={["BRIEF","DEPLOY","ACTIVE","EXTRACT","DEBRIEF"]} current={2}/>
                  <div style={{ marginTop:20 }}>
                    <Divider label="CURRENT PHASE"/>
                    <div style={{ marginTop:12, padding:"12px", border:"1px solid var(--g-900)", position:"relative" }}>
                      <div style={{ fontSize:7, letterSpacing:"0.28em", color:"var(--g-300)",
                        fontFamily:"var(--font)", textTransform:"uppercase", marginBottom:6 }}>▶ PHASE 3: ACTIVE DEPLOYMENT</div>
                      <div style={{ fontSize:8, color:"var(--w-500)", lineHeight:1.7, letterSpacing:"0.12em", fontFamily:"var(--font)" }}>
                        AGENT SPECTRE-9 IS CURRENTLY ACTIVE IN THE FIELD. ALL VITALS NOMINAL.
                        COMMS ENCRYPTED. ETA TO OBJECTIVE: 04:22:11.
                      </div>
                    </div>
                  </div>
                </Card>
              </div>
            </div>

            {/* ALERTS + LOADER */}
            <SectionLabel sub="// SYSTEM NOTIFICATIONS">ALERTS + LOADERS</SectionLabel>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:16, marginBottom:28 }}>
              <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
                <Alert type="success" title="OPERATION SECURED"
                  message="NEXUS NODE ALPHA SECURED. ALL OBJECTIVES COMPLETE. EXTRACTION CONFIRMED."/>
                <Alert type="warning" title="SIGNAL INTERFERENCE"
                  message="COMMS DEGRADED ON CHANNEL 7. SWITCHING TO BACKUP FREQUENCY 449.7750 MHZ."/>
                <Alert type="danger" title="BREACH DETECTED"
                  message="UNAUTHORIZED ACCESS ATTEMPT — NODE SIGMA. LOCKDOWN INITIATED. STANDBY." onClose={() => {}}/>
                <Alert type="info" title="ROUTINE SCAN COMPLETE"
                  message="ALL SYSTEMS NOMINAL. NEXT SCHEDULED SWEEP IN 04:00:00."/>
              </div>
              <Card title="SYSTEM STATES" sub="LOADING INDICATORS">
                <div style={{ display:"flex", gap:20, alignItems:"center", justifyContent:"center", padding:20 }}>
                  {[["SMALL",28],["MEDIUM",44],["LARGE",64]].map(([lbl,sz]) => (
                    <div key={lbl} style={{ display:"flex", flexDirection:"column", alignItems:"center", gap:8 }}>
                      <Spinner size={sz}/><Micro color="var(--g-500)">{lbl}</Micro>
                    </div>
                  ))}
                </div>
                <Divider label="AVATARS"/>
                <div style={{ display:"flex", gap:10, marginTop:12, alignItems:"center" }}>
                  <Avatar initials="Ω" status="active"/>
                  <Avatar initials="Σ" status="active"/>
                  <Avatar initials="Δ"/>
                  <Avatar initials="Γ"/>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:8.5, letterSpacing:"0.16em", fontFamily:"var(--font)", color:"var(--g-300)" }}>OMEGA TEAM</div>
                    <div style={{ fontSize:7, letterSpacing:"0.18em", color:"var(--g-700)", fontFamily:"var(--font)",
                      textTransform:"uppercase", marginTop:2 }}>4 AGENTS // 2 ACTIVE</div>
                  </div>
                </div>
              </Card>
            </div>

            {/* MODAL TRIGGER */}
            <SectionLabel sub="// OVERLAY SYSTEM">MODAL SYSTEM</SectionLabel>
            <div style={{ marginBottom:28 }}>
              <Card title="MODAL TRIGGER" sub="TICKET-SHELL OVERLAY">
                <div style={{ display:"flex", gap:8, alignItems:"center" }}>
                  <Button variant="outline" onClick={() => setModalOpen(true)}>OPEN CLASSIFIED BRIEF</Button>
                  <Tooltip label="OPENS A FULL TICKET-SHELL MODAL">
                    <Button variant="ghost" icon="◈"/>
                  </Tooltip>
                </div>
              </Card>
            </div>

            {/* TYPOGRAPHY */}
            <SectionLabel sub="// IBM PLEX MONO TYPE SYSTEM">TYPOGRAPHY</SectionLabel>
            <div style={{ marginBottom:28 }}>
              <Card title="TYPE SCALE + WEIGHTS">
                <div style={{ display:"flex", flexDirection:"column", gap:6 }}>
                  {[
                    { size:22,  weight:700, text:"DISPLAY — OMEGA PROTOCOL",                                           color:"var(--g-300)" },
                    { size:16,  weight:700, text:"H1 — CLASSIFIED DIRECTIVE",                                          color:"var(--w-100)" },
                    { size:13,  weight:600, text:"H2 — NEXUS SYSTEM HEADER",                                           color:"var(--w-200)" },
                    { size:11,  weight:600, text:"H3 — OPERATION BRIEFING",                                            color:"var(--w-300)" },
                    { size:9.5, weight:500, text:"H4 — SUBHEADING ALPHA",                                              color:"var(--w-300)" },
                    { size:8.5, weight:400, text:"BODY — STANDARD INTEL REPORT BODY TEXT FOR EXTENDED BRIEFINGS",      color:"var(--w-400)" },
                    { size:7.5, weight:400, text:"SMALL — SECONDARY SUPPORT LABELS AND DESCRIPTORS",                   color:"var(--w-500)" },
                    { size:7,   weight:400, text:"MICRO — OMEGA-7749 // COPYRIGHT NEXUS DIVISION // CLEARANCE REQUIRED", color:"var(--g-700)" },
                  ].map((t,i) => (
                    <div key={i} style={{ display:"flex", alignItems:"baseline", gap:16,
                      borderBottom: i<7 ? "1px solid var(--border-1)" : "none", paddingBottom:6 }}>
                      <span style={{ fontSize:7, color:"var(--g-700)", width:28, fontFamily:"var(--font)", letterSpacing:"0.1em" }}>{t.size}PX</span>
                      <span style={{ fontSize:t.size, fontWeight:t.weight, letterSpacing:"0.14em",
                        textTransform:"uppercase", fontFamily:"var(--font)", color:t.color }}>{t.text}</span>
                    </div>
                  ))}
                </div>
              </Card>
            </div>

            {/* COLOR PALETTE */}
            <SectionLabel sub="// DESIGN TOKENS — COLOR SYSTEM">COLOR PALETTE</SectionLabel>
            <div style={{ marginBottom:28 }}>
              <Card title="TOKEN PALETTE" sub="TICKETPUNCH DESIGN LANGUAGE">
                <div style={{ display:"grid", gridTemplateColumns:"repeat(5, 1fr)", gap:8 }}>
                  {[
                    { scheme:"DARK",  name:"D-900", val:"#060606" },
                    { scheme:"DARK",  name:"D-800", val:"#0A0A0A" },
                    { scheme:"DARK",  name:"D-700", val:"#0f0f0f" },
                    { scheme:"DARK",  name:"D-600", val:"#1e1e1e" },
                    { scheme:"DARK",  name:"D-500", val:"#2a2a2a" },
                    { scheme:"WHITE", name:"W-100", val:"#FFFFFF" },
                    { scheme:"WHITE", name:"W-200", val:"#EFEFEF" },
                    { scheme:"WHITE", name:"W-300", val:"#CDCDCD" },
                    { scheme:"WHITE", name:"W-400", val:"#AAAAAA" },
                    { scheme:"WHITE", name:"W-500", val:"#888888" },
                    { scheme:"GOLD",  name:"G-100", val:"#FFF4CC" },
                    { scheme:"GOLD",  name:"G-300", val:"#FFD700" },
                    { scheme:"GOLD",  name:"G-500", val:"#C8960C" },
                    { scheme:"GOLD",  name:"G-700", val:"#7A5800" },
                    { scheme:"GOLD",  name:"G-900", val:"#3D2C00" },
                    { scheme:"RED",   name:"R-100", val:"#FFE5E5" },
                    { scheme:"RED",   name:"R-300", val:"#FF6666" },
                    { scheme:"RED",   name:"R-500", val:"#FF3333" },
                    { scheme:"RED",   name:"R-700", val:"#CC0000" },
                    { scheme:"RED",   name:"R-900", val:"#550000" },
                    { scheme:"PEACH", name:"P-100", val:"#FFF0EB" },
                    { scheme:"PEACH", name:"P-300", val:"#FFBFA8" },
                    { scheme:"PEACH", name:"P-500", val:"#FF8C69" },
                    { scheme:"PEACH", name:"P-700", val:"#C45A35" },
                    { scheme:"PEACH", name:"P-900", val:"#5C2010" },
                  ].map((c,i) => (
                    <div key={i} style={{ display:"flex", flexDirection:"column", gap:4 }}>
                      {i%5===0 && (
                        <div style={{ fontSize:6.5, letterSpacing:"0.22em", color:"var(--w-400)",
                          fontFamily:"var(--font)", textTransform:"uppercase", marginBottom:2, fontWeight:600 }}>{c.scheme}</div>
                      )}
                      {i%5!==0 && <div style={{ height:15 }}/>}
                      <div style={{ height:32, background:c.val, border:"1px solid var(--border-1)",
                        boxShadow:["GOLD","RED","PEACH"].includes(c.scheme) ? `0 0 10px ${c.val}55` : "none" }}/>
                      <div style={{ fontSize:6.5, letterSpacing:"0.18em", color:"var(--w-500)",
                        fontFamily:"var(--font)", textTransform:"uppercase" }}>{c.name}</div>
                      <div style={{ fontSize:6, letterSpacing:"0.12em", color:"var(--g-700)", fontFamily:"var(--font)" }}>{c.val}</div>
                    </div>
                  ))}
                </div>
              </Card>
            </div>

            {/* PRIMITIVES */}
            <SectionLabel sub="// CORE VISUAL PRIMITIVES">DESIGN PRIMITIVES</SectionLabel>
            <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:16, marginBottom:28 }}>
              <Card title="GRAIN OVERLAY" sub="STATIC NOISE TEXTURE" style={{ minHeight:120 }}>
                <div style={{ display:"flex", flexDirection:"column", gap:6 }}>
                  {[0.08,0.18,0.28].map((s,i) => (
                    <div key={i} style={{ position:"relative", height:28, background:"var(--header)", border:"1px solid var(--border-1)" }}>
                      <GrainOverlay strength={s}/>
                      <div style={{ position:"absolute", inset:0, display:"flex", alignItems:"center", justifyContent:"center", zIndex:7 }}>
                        <Micro color="var(--g-500)">{(s*100).toFixed(0)}% STRENGTH</Micro>
                      </div>
                    </div>
                  ))}
                </div>
              </Card>
              <Card title="BARCODES" sub="GENERATIVE PATTERN">
                <div style={{ display:"flex", flexDirection:"column", gap:10 }}>
                  <Barcode value="OMEGA-7749-XX"  width={160} height={32}/>
                  <Barcode value="NEXUS-ALPHA-01" width={160} height={20}/>
                  <Barcode value="CLASSIFIED"     width={160} height={14}/>
                </div>
              </Card>
              <Card title="TERMINAL MASK" sub="SCROLLING INTEL FEED">
                <div style={{ display:"flex", gap:12, justifyContent:"center" }}>
                  <TerminalMask size={90}/><TerminalMask size={70}/>
                </div>
              </Card>
            </div>

            <Footer/>
          </div>
        </div>
      </div>

      <Modal open={modalOpen} onClose={() => setModalOpen(false)} title="CLASSIFIED DIRECTIVE">
        <p style={{ marginBottom:12 }}>
          THIS DOCUMENT CONTAINS INFORMATION OF THE HIGHEST CLASSIFICATION.
          UNAUTHORIZED DISCLOSURE IS A VIOLATION OF NEXUS PROTOCOL ARTICLE 7-OMEGA.
        </p>
        <p>
          OPERATION BLACKOUT IS AUTHORIZED BY DIVISION COMMANDER NEXUS-1.
          ALL AGENTS MUST CONFIRM RECEIPT VIA SECURE CHANNEL BEFORE DEPLOYMENT.
        </p>
        <div style={{ marginTop:16 }}>
          <Barcode value="DIRECTIVE-4419-OMEGA" width={160} height={24}/>
        </div>
      </Modal>
    </div>
  );
}