// ───────── Stampa - Icon set ─────────
// Thin-stroke "engraved" icons. 24×24 box, stroke 1.6, round caps.
// Only geometric primitives (lines, circles, rects, polylines). No custom illustrations.
// Use <Icon name="mic" size={20} />.

const ICONS = {
  // - Recording / voice -
  mic: (
    <g>
      <rect x="9" y="3" width="6" height="11" rx="3" />
      <path d="M5 11a7 7 0 0 0 14 0" />
      <path d="M12 18v3" />
      <path d="M8 21h8" />
    </g>
  ),
  wave: (
    <g>
      <path d="M3 12h2" />
      <path d="M7 9v6" />
      <path d="M10 6v12" />
      <path d="M13 4v16" />
      <path d="M16 8v8" />
      <path d="M19 10v4" />
      <path d="M21 12h0.5" />
    </g>
  ),
  play: (
    <g>
      <polygon points="7,4 7,20 20,12" fill="currentColor" stroke="none" />
    </g>
  ),
  pause: (
    <g>
      <rect x="6" y="4" width="4" height="16" />
      <rect x="14" y="4" width="4" height="16" />
    </g>
  ),
  stop: (
    <g>
      <rect x="5" y="5" width="14" height="14" rx="1.5" />
    </g>
  ),

  // - Documents / quotes -
  doc: (
    <g>
      <path d="M6 3h9l4 4v14H6z" />
      <path d="M15 3v4h4" />
      <path d="M9 12h7" />
      <path d="M9 16h5" />
    </g>
  ),
  pdf: (
    <g>
      <path d="M6 3h9l4 4v14H6z" />
      <path d="M15 3v4h4" />
      <text x="12" y="17.5" textAnchor="middle" fontSize="5.5" fontFamily="JetBrains Mono, monospace" fontWeight="700" fill="currentColor" stroke="none">PDF</text>
    </g>
  ),
  excel: (
    <g>
      <rect x="4" y="4" width="16" height="16" rx="1" />
      <path d="M4 9h16" />
      <path d="M4 14h16" />
      <path d="M9 4v16" />
      <path d="M14 4v16" />
    </g>
  ),
  list: (
    <g>
      <circle cx="5" cy="6.5" r="1" fill="currentColor" stroke="none" />
      <circle cx="5" cy="12" r="1" fill="currentColor" stroke="none" />
      <circle cx="5" cy="17.5" r="1" fill="currentColor" stroke="none" />
      <path d="M9 6.5h11" />
      <path d="M9 12h11" />
      <path d="M9 17.5h11" />
    </g>
  ),

  // - Stamp / signature -
  seal: (
    <g>
      <circle cx="12" cy="12" r="8" />
      <circle cx="12" cy="12" r="6" />
      <path d="M12 4v1.5" />
      <path d="M12 18.5V20" />
      <path d="M4 12h1.5" />
      <path d="M18.5 12H20" />
    </g>
  ),
  sign: (
    <g>
      <path d="M4 18c2-1 4-5 6-5s2 4 4 3 3-5 6-7" />
      <path d="M4 21h16" />
    </g>
  ),
  check: (
    <g>
      <path d="M4 12.5l5 5L20 6" />
    </g>
  ),
  checkCircle: (
    <g>
      <circle cx="12" cy="12" r="9" />
      <path d="M8 12.5l3 3 5-6" />
    </g>
  ),

  // - Send / share -
  send: (
    <g>
      <path d="M21 3L3 11l7 2 2 7z" />
      <path d="M10 13l11-10" />
    </g>
  ),
  link: (
    <g>
      <path d="M10 14a3.5 3.5 0 0 0 5 0l3-3a3.5 3.5 0 0 0-5-5l-1 1" />
      <path d="M14 10a3.5 3.5 0 0 0-5 0l-3 3a3.5 3.5 0 0 0 5 5l1-1" />
    </g>
  ),
  qr: (
    <g>
      <rect x="3" y="3" width="7" height="7" />
      <rect x="14" y="3" width="7" height="7" />
      <rect x="3" y="14" width="7" height="7" />
      <rect x="6" y="6" width="1" height="1" fill="currentColor" stroke="none" />
      <rect x="17" y="6" width="1" height="1" fill="currentColor" stroke="none" />
      <rect x="6" y="17" width="1" height="1" fill="currentColor" stroke="none" />
      <path d="M14 14h3v3" />
      <path d="M21 14v3" />
      <path d="M14 21h7" />
    </g>
  ),

  // - Categories / build -
  paint: (
    <g>
      <rect x="4" y="3" width="16" height="6" rx="1" />
      <path d="M8 9v3h8V9" />
      <path d="M12 12v4" />
      <rect x="9.5" y="16" width="5" height="5" rx="1" />
    </g>
  ),
  hammer: (
    <g>
      <path d="M14 4l6 6-3 3-6-6z" />
      <path d="M11 7l-7 7 3 3 7-7" />
    </g>
  ),
  bolt: (
    <g>
      <polygon points="13,2 5,14 11,14 9,22 19,10 13,10" />
    </g>
  ),
  pipe: (
    <g>
      <path d="M3 7h8v5h5v5h5" />
      <circle cx="3" cy="7" r="1.5" />
      <circle cx="21" cy="17" r="1.5" />
    </g>
  ),

  // - Currency / numbers -
  shekel: (
    <g>
      <path d="M6 5v14" />
      <path d="M6 5h6a4 4 0 0 1 4 4v10" />
      <path d="M18 19V9a4 4 0 0 0-4-4" stroke="none" />
      <path d="M18 19v-9" />
      <path d="M6 12h12" stroke="none" />
    </g>
  ),
  calc: (
    <g>
      <rect x="5" y="3" width="14" height="18" rx="1.5" />
      <rect x="8" y="6" width="8" height="3" />
      <circle cx="9" cy="13" r="0.6" fill="currentColor" stroke="none" />
      <circle cx="12" cy="13" r="0.6" fill="currentColor" stroke="none" />
      <circle cx="15" cy="13" r="0.6" fill="currentColor" stroke="none" />
      <circle cx="9" cy="16" r="0.6" fill="currentColor" stroke="none" />
      <circle cx="12" cy="16" r="0.6" fill="currentColor" stroke="none" />
      <circle cx="15" cy="16" r="0.6" fill="currentColor" stroke="none" />
      <circle cx="9" cy="19" r="0.6" fill="currentColor" stroke="none" />
      <circle cx="12" cy="19" r="0.6" fill="currentColor" stroke="none" />
      <circle cx="15" cy="19" r="0.6" fill="currentColor" stroke="none" />
    </g>
  ),

  // - Util -
  edit: (
    <g>
      <path d="M4 20l4-1 11-11-3-3L5 16z" />
      <path d="M14 6l3 3" />
    </g>
  ),
  clock: (
    <g>
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3 2" />
    </g>
  ),
  user: (
    <g>
      <circle cx="12" cy="8" r="4" />
      <path d="M4 21c1-4 4.5-6 8-6s7 2 8 6" />
    </g>
  ),
  phone: (
    <g>
      <path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2z" />
    </g>
  ),
  search: (
    <g>
      <circle cx="11" cy="11" r="6" />
      <path d="M20 20l-4.5-4.5" />
    </g>
  ),
  plus: (
    <g>
      <path d="M12 5v14" />
      <path d="M5 12h14" />
    </g>
  ),
  arrowLeft: (
    <g>
      <path d="M5 12h14" />
      <path d="M11 6l-6 6 6 6" />
    </g>
  ),
  arrowRight: (
    <g>
      <path d="M19 12H5" />
      <path d="M13 6l6 6-6 6" />
    </g>
  ),
};

function Icon({ name, size = 20, stroke = 1.6, color = 'currentColor', className = '', style = {} }) {
  const el = ICONS[name];
  if (!el) return <span style={{ width: size, height: size, display: 'inline-block', border: '1px dashed currentColor', opacity: 0.4 }} />;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width={size}
      height={size}
      fill="none"
      stroke={color}
      strokeWidth={stroke}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      style={{ flexShrink: 0, ...style }}
      aria-hidden="true"
    >
      {el}
    </svg>
  );
}

// Stamped icon: thin-line icon inside the seal ring. Use for hero/feature icons.
function StampedIcon({ name, size = 56, rotation = -4 }) {
  const ring = Math.max(1.2, size * 0.022);
  return (
    <div style={{
      width: size, height: size, position: 'relative',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      border: `${ring}px solid var(--stamp)`,
      borderRadius: '999px',
      color: 'var(--stamp)',
      transform: `rotate(${rotation}deg)`,
      background: 'transparent',
    }}>
      <div style={{
        position: 'absolute', inset: ring * 1.8,
        border: `${Math.max(1, ring * 0.55)}px solid currentColor`,
        borderRadius: '999px',
        opacity: 0.5,
      }} />
      <Icon name={name} size={size * 0.42} stroke={1.7} />
    </div>
  );
}

// ────────── Icons artboard ──────────
function IconsArtboard() {
  const groups = [
    { title: 'Recording · voice', items: ['mic', 'wave', 'play', 'pause', 'stop'] },
    { title: 'Documents · output', items: ['doc', 'pdf', 'excel', 'list', 'calc'] },
    { title: 'Stamp · signature', items: ['seal', 'sign', 'check', 'checkCircle', 'send'] },
    { title: 'Categories · trades', items: ['paint', 'hammer', 'bolt', 'pipe', 'shekel'] },
    { title: 'Util', items: ['edit', 'clock', 'user', 'phone', 'search', 'plus', 'link', 'qr', 'arrowLeft', 'arrowRight'] },
  ];

  return (
    <div dir="rtl" className="paper-tex" style={{
      width: '100%', height: '100%',
      padding: '48px 56px',
      color: 'var(--ink)',
      fontFamily: 'var(--font-sans)',
      display: 'flex', flexDirection: 'column', gap: 28,
      overflow: 'hidden',
    }}>
      {/* Header ledger */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        borderBottom: '1px solid var(--rule-strong)', paddingBottom: 14,
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
          <span className="idx">02 / 06</span>
          <span className="smallcaps">איקונים · Icon set</span>
        </div>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-muted)' }}>
          24×24 · STROKE 1.6 · ROUND CAPS · {Object.keys(ICONS).length} GLYPHS
        </span>
      </div>

      {/* Hero: 4 stamped feature icons */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18,
        padding: '4px 0 8px',
      }}>
        {[
          { i: 'mic',  k: 'הקלט',     d: 'דיבור חופשי' },
          { i: 'list', k: 'ארגן',     d: 'כתב כמויות' },
          { i: 'seal', k: 'חתום',     d: 'PDF ממותג' },
          { i: 'send', k: 'שלח',      d: 'קישור ללקוח' },
        ].map((s, idx) => (
          <div key={idx} style={{
            border: '1px solid var(--rule)', borderRadius: 6, padding: 18,
            background: 'var(--panel)',
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <StampedIcon name={s.i} size={54} rotation={-6 + idx * 2} />
            <div>
              <div className="font-display" style={{ fontSize: 22, lineHeight: 1 }}>{s.k}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-muted)', marginTop: 4 }}>{s.d}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Icon grid by group */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20, flex: 1 }}>
        {groups.map((g, gi) => (
          <div key={gi}>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10,
            }}>
              <span className="idx" style={{ fontSize: 10 }}>{String(gi + 1).padStart(2, '0')}</span>
              <span className="smallcaps" style={{ fontSize: 10 }}>{g.title}</span>
              <span style={{ flex: 1, borderTop: '1px dashed var(--rule)', marginInlineStart: 8 }} />
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-faint)' }}>
                {g.items.length}
              </span>
            </div>
            <div style={{
              display: 'grid',
              gridTemplateColumns: `repeat(${Math.max(g.items.length, 10)}, 1fr)`,
              gap: 8,
            }}>
              {g.items.map((name) => (
                <div key={name} style={{
                  border: '1px solid var(--rule)', borderRadius: 4,
                  background: 'var(--panel)',
                  height: 80,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                  gap: 8,
                  padding: 6,
                }}>
                  <Icon name={name} size={24} color="var(--ink)" />
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 9,
                    color: 'var(--ink-muted)', letterSpacing: '0.03em',
                  }}>{name}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Footer: usage swatch */}
      <div style={{
        borderTop: '1px solid var(--rule-strong)', paddingTop: 14,
        display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 24, alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon name="mic" size={16} color="var(--ink)" />
          <Icon name="mic" size={20} color="var(--ink)" />
          <Icon name="mic" size={24} color="var(--ink)" />
          <Icon name="mic" size={32} color="var(--ink)" />
        </div>
        <div style={{ fontSize: 12, color: 'var(--ink-muted)' }}>
          <span className="smallcaps" style={{ marginInlineEnd: 8 }}>שימוש</span>
          16, 20, 24, 32 · משתמשים ב־<code className="font-mono" style={{ fontSize: 11, color: 'var(--ink)' }}>currentColor</code> ויורשים את הצבע מההורה.
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Icon name="seal" size={20} color="var(--stamp)" />
          <Icon name="seal" size={20} color="var(--amber)" />
          <Icon name="seal" size={20} color="var(--sage)" />
          <Icon name="seal" size={20} color="var(--ink-muted)" />
        </div>
      </div>
    </div>
  );
}

window.Icon = Icon;
window.StampedIcon = StampedIcon;
window.IconsArtboard = IconsArtboard;