// atoms.jsx — logo, icons, simple shared bits

const Bolt = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinejoin="round" strokeLinecap="round">
    <path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z" fill="currentColor" stroke="none" />
  </svg>
);

const Brand = () => (
  <a href="#top" className="brand">
    <span className="brand-bolt"><Bolt size={18} /></span>
    <span>Gretl</span>
  </a>
);

const Icon = ({ name, size = 16 }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case 'apple': return <svg {...props}><path d="M16 2c0 2-1.5 3.5-3.5 3.5" /><path d="M19 17.5c-.7 1.6-1.6 3.2-3 3.2-1.4 0-1.8-.9-3.5-.9s-2.2.9-3.5.9c-1.4 0-2.4-1.6-3.1-3.1C4 14 3.7 8 7 7c1.5-.5 3 .5 3.8.5.8 0 2.6-1 4.4-.8.8.1 3 .3 4.5 2.5-3.5 1.9-3 6.5.3 8.3z" /></svg>;
    case 'windows': return <svg {...props}><path d="M3 5.5 11 4v8H3z" /><path d="M11 4l10-2v10H11z" /><path d="M3 12h8v8l-8-1.5z" /><path d="M11 12h10v10l-10-2z" /></svg>;
    case 'linux': return <svg {...props}><circle cx="12" cy="9" r="5" /><path d="M9 8.5h.01M15 8.5h.01" /><path d="M8 14c-2 1.5-3 3.5-3 6h14c0-2.5-1-4.5-3-6" /></svg>;
    case 'chrome': return <svg {...props}><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="3" /><path d="M12 3v9M21 12l-7-1M3 8.5l7 4" /></svg>;
    case 'sun': return <svg {...props}><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4 12H2m20 0h-2M5 5l1.5 1.5M17.5 17.5 19 19M5 19l1.5-1.5M17.5 6.5 19 5" /></svg>;
    case 'moon': return <svg {...props}><path d="M21 13a9 9 0 1 1-10-10 7 7 0 0 0 10 10z" /></svg>;
    case 'arrow': return <svg {...props}><path d="M5 12h14M13 6l6 6-6 6" /></svg>;
    case 'play': return <svg {...props} fill="currentColor"><path d="M7 4v16l13-8z" /></svg>;
    case 'stop': return <svg {...props} fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="1" /></svg>;
    case 'tag': return <svg {...props}><path d="M3 12V4h8l9 9-8 8-9-9z" /><circle cx="7.5" cy="7.5" r="1.2" fill="currentColor" /></svg>;
    case 'group': return <svg {...props}><rect x="3" y="3" width="7" height="7" rx="1.2" /><rect x="14" y="3" width="7" height="7" rx="1.2" /><rect x="3" y="14" width="7" height="7" rx="1.2" /><rect x="14" y="14" width="7" height="7" rx="1.2" /></svg>;
    case 'plug': return <svg {...props}><path d="M9 2v4M15 2v4" /><path d="M5 8h14v4a7 7 0 0 1-14 0z" /><path d="M12 19v3" /></svg>;
    case 'shield': return <svg {...props}><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3z" /></svg>;
    case 'flow': return <svg {...props}><circle cx="5" cy="6" r="2" /><circle cx="5" cy="18" r="2" /><circle cx="19" cy="12" r="2" /><path d="M7 6h6c2 0 4 2 4 4v0M7 18h6c2 0 4-2 4-4v0" /></svg>;
    case 'eye': return <svg {...props}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" /><circle cx="12" cy="12" r="3" /></svg>;
    case 'kbd': return <svg {...props}><rect x="2" y="6" width="20" height="12" rx="2" /><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10" /></svg>;
    case 'doc': return <svg {...props}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6M8 13h8M8 17h6" /></svg>;
    case 'check': return <svg {...props}><path d="M5 13l4 4 10-10" /></svg>;
    case 'gh': return <svg {...props}><path d="M9 19c-4 1.5-4-2-6-2.5M15 22v-3.5a3 3 0 0 0-.8-2.3c2.7-.3 5.5-1.3 5.5-6a4.7 4.7 0 0 0-1.3-3.2 4.4 4.4 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12 12 0 0 0-6.4 0C5.9 1.5 4.8 1.8 4.8 1.8a4.4 4.4 0 0 0-.1 3.2A4.7 4.7 0 0 0 3.4 8.2c0 4.6 2.8 5.7 5.5 6a3 3 0 0 0-.8 2.3V22" /></svg>;
    case 'ext': return <svg {...props}><path d="M14 4h6v6M10 14 20 4M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5" /></svg>;
    case 'bolt': return <svg {...props} fill="currentColor" stroke="none"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z" /></svg>;
    default: return null;
  }
};

Object.assign(window, { Bolt, Brand, Icon });