CybberTicket.jsx

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>
  );
}