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