// Atoms.jsx — Stratavex shared building blocks + icon set for the workforce demo.

const Chevron = ({ size = 32, id = 'mark' }) => (
  <svg viewBox="0 0 512 512" width={size} height={size} aria-hidden="true">
    <defs>
      <linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stopColor="#1B2A4A"/>
        <stop offset="50%" stopColor="#2D3F5E"/>
        <stop offset="100%" stopColor="#1B2A4A"/>
      </linearGradient>
    </defs>
    <g transform="translate(256, 256) scale(2.2)">
      <polygon points="-50,0 30,-80 38,-72 -38,0 38,72 30,80" fill="none" stroke="#3B82A0" strokeWidth="1" opacity="0.2"/>
      <polygon points="-42,0 28,-72 38,-60 -28,0 38,60 28,72" fill={`url(#${id})`} stroke="#3B82A0" strokeWidth="0.6" opacity="0.9"/>
      <line x1="28" y1="-72" x2="-28" y2="0" stroke="#5BA3C0" strokeWidth="1" opacity="0.5"/>
      <line x1="-28" y1="0" x2="28" y2="72" stroke="#5BA3C0" strokeWidth="1" opacity="0.35"/>
      <polygon points="-55,0 -42,0 28,-72 22,-78" fill="#3B82A0" opacity="0.3"/>
      <polygon points="-28,-5 -23,0 -28,5 -33,0" fill="#5BA3C0" opacity="0.7"/>
    </g>
  </svg>
);

const Logo = ({ size = 32, markId = 'logoMark' }) => (
  <a href="#top" className="logo">
    <span className="logo-icon"><Chevron size={size} id={markId} /></span>
    <span className="logo-wordmark">STRATA<span className="v">V</span>EX</span>
  </a>
);

const CornerBrackets = () => (
  <div className="corner-brackets" aria-hidden="true">
    <div className="bracket tl"></div>
    <div className="bracket tr"></div>
    <div className="bracket bl"></div>
    <div className="bracket br"></div>
  </div>
);

const SectionTag = ({ children }) => <div className="section-tag">{children}</div>;

// Lucide-style outline icons — 24×24, 1.5 stroke, round caps. stroke=currentColor.
const Ic = (paths) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">{paths}</svg>
);
const Icons = {
  // orchestrator — network / routing hub
  orchestrator: () => Ic(<><circle cx="12" cy="5" r="2.4"/><circle cx="5" cy="19" r="2.4"/><circle cx="19" cy="19" r="2.4"/><path d="M12 7.4v3.6m0 0L6.4 17.2M12 11l5.6 6.2"/></>),
  // Marcus — competitive intel / target scope
  target: () => Ic(<><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3.5"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></>),
  // Calloway — technical / drafting compass
  compass: () => Ic(<><path d="M12 3v5M9 21l3-9 3 9M7 8h10"/><circle cx="12" cy="8" r="1.3"/></>),
  // Sable — pricing / risk
  pricing: () => Ic(<><path d="M3 17l5-5 4 3 8-8"/><path d="M16 7h4v4"/><path d="M3 21h18"/></>),
  // Ada — proposal architecture / layers
  layers: () => Ic(<><path d="M4 7l8-4 8 4-8 4-8-4z"/><path d="M4 12l8 4 8-4M4 17l8 4 8-4"/></>),
  // critic / review — balance scale
  scale: () => Ic(<><path d="M12 3v18M7 21h10M5 7h14M5 7l-2.5 6a3 3 0 0 0 5 0L5 7zm14 0l-2.5 6a3 3 0 0 0 5 0L19 7zM8 5l4-1 4 1"/></>),
  // red team — adversary / crosshair-alert
  redteam: () => Ic(<><path d="M12 2l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V5l8-3z"/><path d="M12 8v4M12 15.5v.5"/></>),
  // compliance — clipboard check
  compliance: () => Ic(<><path d="M9 4h6v2H9zM7 4H6a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1"/><path d="m9 13 2 2 4-4"/></>),
  check: () => Ic(<path d="M5 12l4.5 4.5L19 7"/>),
  arrowRight: () => Ic(<path d="M4 12h15M13 6l6 6-6 6"/>),
  play: () => <svg viewBox="0 0 24 24"><path d="M7 5.5v13l11-6.5z"/></svg>,
  pause: () => <svg viewBox="0 0 24 24"><path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z"/></svg>,
  restart: () => Ic(<><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v4h4"/></>),
};

Object.assign(window, { Chevron, Logo, CornerBrackets, SectionTag, Icons });
