/* Iconography */

function IconGrid({ icons }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: 8 }}>
      {icons.map(i => (
        <div key={i.name} style={{
          padding: 16, background: 'var(--bg-primary)',
          border: '1px solid var(--border-secondary)', borderRadius: 10,
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
        }}>
          <div style={{ color: 'var(--brand-600)', width: 24, height: 24,
            display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              {i.path}
            </svg>
          </div>
          <div style={{ fontSize: 11, color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)' }}>{i.name}</div>
        </div>
      ))}
    </div>
  );
}

function S_Iconography() {
  const icons = [
    { name: 'arrow-up-right', path: <><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></> },
    { name: 'truck', path: <><rect x="1" y="6" width="15" height="12"/><polyline points="16 9 20 9 23 12 23 18 16 18"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/></> },
    { name: 'package', path: <><path d="M16.5 9.4l-9-5.19M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></> },
    { name: 'map-pin', path: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></> },
    { name: 'check-circle', path: <><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></> },
    { name: 'shield', path: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> },
    { name: 'scale', path: <><path d="M6 5l6-1 6 1M6 5L3 12h6L6 5zM18 5l-3 7h6l-3-7zM9 12a3 3 0 0 1-6 0M21 12a3 3 0 0 1-6 0M12 4v18M9 22h6"/></> },
    { name: 'bar-chart', path: <><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></> },
    { name: 'file-text', path: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></> },
    { name: 'clock', path: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></> },
    { name: 'layers', path: <><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></> },
    { name: 'globe', path: <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></> },
    { name: 'user', path: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></> },
    { name: 'settings', path: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></> },
    { name: 'search', path: <><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></> },
    { name: 'filter', path: <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/> },
  ];
  return (
    <Section
      id="iconography"
      eyebrow="05 · Iconography"
      title="Lucide, 24px, 2px stroke."
      intro="One icon library across the whole system. Sharp corners (no line-join rounding), 2px stroke, 24px canvas. For key concepts — arrow, truck, scale, shield — we draw bespoke versions that echo the emblem's L-bracket geometry."
    >
      <Block title="Icon library" note="Use this library by default in product UIs.">
        <Card pad={24}>
          <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 16, rowGap: 14, fontSize: 13, lineHeight: 1.5 }}>
            <div style={{ color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em' }}>Library</div>
            <div style={{ color: 'var(--text-primary)' }}>
              <strong style={{ fontWeight: 600 }}>Lucide</strong> — <code style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>lucide-react</code>.
              The de-facto open-source set; predominant import in the nexus4 product code.
              <span style={{ color: 'var(--text-tertiary)' }}> Some product surfaces also use <code style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>@untitledui/icons</code> via the Untitled UI components — confirm with the lead engineer before locking in for new work.</span>
            </div>

            <div style={{ color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em' }}>Install</div>
            <div><Code>pnpm add lucide-react</Code></div>

            <div style={{ color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em' }}>Sizes</div>
            <div style={{ color: 'var(--text-secondary)' }}>
              <strong style={{ color: 'var(--text-primary)', fontWeight: 600 }}>16px</strong> inline with text · <strong style={{ color: 'var(--text-primary)', fontWeight: 600 }}>20px</strong> in buttons · <strong style={{ color: 'var(--text-primary)', fontWeight: 600 }}>24px</strong> standalone / toolbar.
            </div>

            <div style={{ color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em' }}>Stroke</div>
            <div style={{ color: 'var(--text-secondary)' }}>
              <code style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>strokeWidth={'{1.5}'}</code> — matches the system's drawn weight.
            </div>

            <div style={{ color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em' }}>Colour</div>
            <div style={{ color: 'var(--text-secondary)' }}>
              Inherit <code style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>currentColor</code> — never hardcode a hex; the icon recolours via parent text colour.
            </div>
          </div>

          <div style={{ marginTop: 18 }}>
            <Code block>{`import { ArrowUpRight, Truck, Shield } from 'lucide-react';

// Inline with text (16px), inherits colour
<span className="text-brand-600">
  <ArrowUpRight size={16} strokeWidth={1.5} /> View report
</span>

// Standalone (24px) on a button
<button className="icon-btn">
  <Shield size={24} strokeWidth={1.5} aria-hidden />
</button>`}</Code>
          </div>
        </Card>
      </Block>

      <Block title="System icons" note="Drawn from the Lucide set. Never use filled + outline in the same view.">
        <IconGrid icons={icons} />
      </Block>

      <Block title="Sizes">
        <Card pad={32}>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 48 }}>
            {[16, 20, 24, 32, 40, 56].map(sz => (
              <div key={sz} style={{ textAlign: 'center' }}>
                <div style={{ color: 'var(--brand-600)', height: 56, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width={sz} height={sz} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/>
                  </svg>
                </div>
                <div style={{ fontSize: 12, color: 'var(--text-quaternary)', fontFamily: 'var(--font-mono)', marginTop: 8 }}>{sz}px</div>
              </div>
            ))}
          </div>
        </Card>
      </Block>

      <Block title="Brand marks">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 12 }}>
          {[
            { bg: 'var(--brand-600)', fg: '#fff' },
            { bg: 'var(--accent-400)', fg: 'var(--brand-700)' },
            { bg: 'var(--brand-50)', fg: 'var(--brand-600)' },
            { bg: 'var(--neutral-900)', fg: 'var(--accent-400)' },
          ].map((c, i) => (
            <div key={i} style={{
              background: c.bg, color: c.fg,
              aspectRatio: '1', borderRadius: 16,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: '1px solid var(--border-secondary)',
            }}>
              <ArrowMark size={72} fill={c.fg} />
            </div>
          ))}
        </div>
      </Block>
    </Section>
  );
}
window.S_Iconography = S_Iconography;