/* Lojo — icon set + brand spark mark. Stroke-based, currentColor. */

// The brand spark mark — a four-point spark / "lojo" glint.
function SparkMark({ size = 22, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ ...style, width: "40px", height: "40px" }} aria-hidden="true">
      <path d="M12 1.5c.45 4.3 2.2 6.05 6.5 6.5 -4.3.45-6.05 2.2-6.5 6.5 -.45-4.3-2.2-6.05-6.5-6.5 4.3-.45 6.05-2.2 6.5-6.5Z"
      fill="var(--accent)" />
      <path d="M19 14.2c.22 2.1 1.08 2.96 3.18 3.18 -2.1.22-2.96 1.08-3.18 3.18 -.22-2.1-1.08-2.96-3.18-3.18 2.1-.22 2.96-1.08 3.18-3.18Z"
      fill="var(--accent)" opacity="0.55" />
    </svg>);

}

// Wordmark: spark + "Lojo"
function Wordmark({ size = 20 }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
      <SparkMark size={size + 4} style={{ filter: 'drop-shadow(0 0 10px var(--accent-glow))' }} />
      <span className="serif" style={{ ...{
          fontSize: size + 4, fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--fg)', lineHeight: 1
        }, fontSize: "36px" }}>Lojo</span>
    </span>);

}

function Icon({ name, size = 20, stroke = 1.8, style }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round', style, 'aria-hidden': true };
  switch (name) {
    case 'arrow-right':return <svg {...p}><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></svg>;
    case 'arrow-down':return <svg {...p}><path d="M12 5v14" /><path d="m6 13 6 6 6-6" /></svg>;
    case 'check':return <svg {...p}><path d="M20 6 9 17l-5-5" /></svg>;
    case 'x':return <svg {...p}><path d="M18 6 6 18" /><path d="M6 6l12 12" /></svg>;
    case 'eye':return <svg {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" /></svg>;
    case 'eye-off':return <svg {...p}><path d="M10.7 5.1A10.4 10.4 0 0 1 12 5c6.5 0 10 7 10 7a13.2 13.2 0 0 1-2 2.7M6.6 6.6A13.3 13.3 0 0 0 2 12s3.5 7 10 7a10 10 0 0 0 4-.8" /><path d="m2 2 20 20" /></svg>;
    case 'bot':return <svg {...p}><rect x="4" y="8" width="16" height="11" rx="3" /><path d="M12 8V4M8 2h8" /><circle cx="9" cy="13.5" r="1" fill="currentColor" stroke="none" /><circle cx="15" cy="13.5" r="1" fill="currentColor" stroke="none" /></svg>;
    case 'search':return <svg {...p}><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>;
    case 'zap':return <svg {...p}><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z" /></svg>;
    case 'lock':return <svg {...p}><rect x="4" y="11" width="16" height="9" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></svg>;
    case 'globe':return <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18Z" /></svg>;
    case 'doc':return <svg {...p}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z" /><path d="M14 3v5h5M9 13h6M9 17h6" /></svg>;
    case 'spinner':return <svg {...p} className="spin"><path d="M12 3a9 9 0 1 0 9 9" /></svg>;
    case 'clock':return <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>;
    case 'no-cost':return <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M9.5 9.5a2.5 2.5 0 0 1 4.2-1M14 14a2.5 2.5 0 0 1-4.5-1.2M12 7v10" /></svg>;
    case 'minus':return <svg {...p}><path d="M5 12h14" /></svg>;
    case 'star':return <svg {...p} fill="currentColor" stroke="none"><path d="M12 2.5 14.9 8.6 21.5 9.5 16.7 14.1 17.9 20.6 12 17.5 6.1 20.6 7.3 14.1 2.5 9.5 9.1 8.6Z" /></svg>;
    case 'shield':return <svg {...p}><path d="M12 2 4 5v6c0 5 3.4 8.5 8 11 4.6-2.5 8-6 8-11V5Z" /><path d="m9 12 2 2 4-4" /></svg>;
    case 'cart':return <svg {...p}><circle cx="9" cy="20" r="1.4" /><circle cx="18" cy="20" r="1.4" /><path d="M2 3h2l2.5 13h11l2-8H6" /></svg>;
    default:return <svg {...p}></svg>;
  }
}

Object.assign(window, { SparkMark, Wordmark, Icon });