// Design System — referência visual completa do Ezza CRM
// Acesso: Ctrl+Shift+D em qualquer tela do app

const { useState: useDSState } = React;

/* ── helper: seção com título ─────────────────────────────── */
function DSSection({ title, children }) {
  return (
    <div className="ds-section">
      <div className="ds-section-title">{title}</div>
      {children}
    </div>
  );
}

/* ── helper: item de token ────────────────────────────────── */
function DSToken({ label, value, preview }) {
  return (
    <div className="ds-token">
      {preview}
      <div className="ds-token-info">
        <div className="ds-token-label">{label}</div>
        <div className="ds-token-value">{value}</div>
      </div>
    </div>
  );
}

/* ── Swatch de cor ────────────────────────────────────────── */
function Swatch({ color, label, variable }) {
  return (
    <div className="ds-swatch">
      <div className="ds-swatch-color" style={{ background: color }} />
      <div className="ds-swatch-label">{label}</div>
      {variable && <div className="ds-swatch-var">{variable}</div>}
      <div className="ds-swatch-hex">{color}</div>
    </div>
  );
}

/* ── Ícone com label ──────────────────────────────────────── */
function DSIcon({ name, icon }) {
  const [copied, setCopied] = useDSState(false);
  const copy = () => {
    navigator.clipboard?.writeText(`{ICN.${name}}`);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };
  return (
    <div className="ds-icon" onClick={copy} title={`Copiar {ICN.${name}}`}>
      <div className="ds-icon-preview">{icon}</div>
      <div className="ds-icon-name">{copied ? '✓' : name}</div>
    </div>
  );
}

/* ── Toast demo ───────────────────────────────────────────── */
function DSToastDemo() {
  const toast = useToast();
  return (
    <div className="ds-row" style={{ gap: 10, flexWrap: 'wrap' }}>
      <button className="btn-ghost btn-sm" onClick={() => toast('Operação realizada com sucesso!')}>Toast padrão</button>
      <button className="btn-ghost btn-sm" onClick={() => toast('Lead "Bruno" criado com sucesso!')}>Toast com contexto</button>
    </div>
  );
}

/* ── Switch demo ──────────────────────────────────────────── */
function DSSwitch() {
  const [on, setOn] = useDSState(false);
  return (
    <div className={`switch ${on ? 'switch-on' : ''}`} onClick={() => setOn(v => !v)}>
      <div className="switch-knob" />
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   TELA PRINCIPAL
══════════════════════════════════════════════════════════════ */
function DesignSystem({ onBack }) {
  const [activeTab, setActiveTab] = useDSState('fundacao');

  const TABS = [
    { id: 'fundacao',    label: 'Fundação'    },
    { id: 'tipografia',  label: 'Tipografia'  },
    { id: 'botoes',      label: 'Botões'      },
    { id: 'inputs',      label: 'Inputs'      },
    { id: 'cards',       label: 'Cards'       },
    { id: 'componentes', label: 'Componentes' },
    { id: 'icones',      label: 'Ícones'      },
  ];

  return (
    <>
      {/* ── Header ── */}
      <div className="ds-header">
        <div className="col">
          <div className="ds-header-title">Design System <em>Ezza CRM</em></div>
          <div className="ds-header-sub">Tokens, componentes e padrões de interface · v1.0</div>
        </div>
        <div className="ds-badge">
          <span style={{ color: 'oklch(0.55 0.18 295)' }}>{ICN.bolt2}</span>
          Referência de handoff
        </div>
      </div>

      {/* ── Tabs ── */}
      <div className="ds-tabs">
        {TABS.map(t => (
          <button
            key={t.id}
            className={`ds-tab ${activeTab === t.id ? 'ds-tab-on' : ''}`}
            onClick={() => setActiveTab(t.id)}
          >{t.label}</button>
        ))}
      </div>

      {/* ══════════ FUNDAÇÃO ══════════ */}
      {activeTab === 'fundacao' && (
        <div className="ds-content">

          <DSSection title="Cores principais">
            <div className="ds-swatches">
              <Swatch color="oklch(0.55 0.18 295)" label="Roxo principal"   variable="--acc-lav" />
              <Swatch color="oklch(0.45 0.20 295)" label="Roxo escuro"      />
              <Swatch color="oklch(0.70 0.15 295)" label="Roxo claro"       />
              <Swatch color="oklch(0.92 0.06 295)" label="Roxo superfície"  />
            </div>
          </DSSection>

          <DSSection title="Cores semânticas">
            <div className="ds-swatches">
              <Swatch color="oklch(0.55 0.16 155)" label="Mint / Sucesso"  />
              <Swatch color="oklch(0.55 0.13 80)"  label="Amarelo / Aviso" />
              <Swatch color="oklch(0.55 0.16 250)" label="Azul / Info"     />
              <Swatch color="oklch(0.55 0.15 18)"  label="Rosa / Perigo"   variable="--danger" />
            </div>
          </DSSection>

          <DSSection title="Superfícies & texto">
            <div className="ds-swatches">
              <Swatch color="oklch(0.97 0.008 250)" label="Background"     />
              <Swatch color="oklch(1 0 0)"           label="Card / Surface" variable="--card" />
              <Swatch color="oklch(0.93 0.01 255)"   label="Card border"    variable="--card-border" />
              <Swatch color="oklch(0.14 0.015 255)"  label="Ink (texto)"    variable="--ink" />
              <Swatch color="oklch(0.42 0.01 255)"   label="Ink muted"      variable="--ink-muted" />
              <Swatch color="oklch(0.62 0.01 255)"   label="Ink soft"       variable="--ink-soft" />
              <Swatch color="oklch(0.78 0.01 255)"   label="Ink faint"      variable="--ink-faint" />
            </div>
          </DSSection>

          <DSSection title="Tokens de espaço & forma">
            <div className="ds-tokens-grid">
              <DSToken label="Radius LG"  value="20px"  preview={<div style={{ width:40, height:40, background:'var(--acc-lav)', borderRadius:20, opacity:.8 }} />} />
              <DSToken label="Radius MD"  value="16px"  preview={<div style={{ width:40, height:40, background:'var(--acc-lav)', borderRadius:16, opacity:.8 }} />} />
              <DSToken label="Radius SM"  value="12px"  preview={<div style={{ width:40, height:40, background:'var(--acc-lav)', borderRadius:12, opacity:.8 }} />} />
              <DSToken label="Radius pill" value="999px" preview={<div style={{ width:60, height:28, background:'var(--acc-lav)', borderRadius:999, opacity:.8 }} />} />
              <DSToken label="Gap padrão" value="12–14px" preview={<div className="ds-row" style={{ gap:4 }}><div style={{ width:16, height:32, background:'oklch(0.90 0.03 250)', borderRadius:4 }} /><div style={{ width:16, height:32, background:'oklch(0.90 0.03 250)', borderRadius:4 }} /></div>} />
              <DSToken label="Sombra card" value="card-shadow" preview={<div style={{ width:40, height:40, background:'white', borderRadius:12, boxShadow:'var(--card-shadow)' }} />} />
            </div>
          </DSSection>

          <DSSection title="Pills / Badges">
            <div className="ds-row" style={{ gap: 10, flexWrap: 'wrap' }}>
              <span className="pill pill-blue">Azul</span>
              <span className="pill pill-yellow">Amarelo</span>
              <span className="pill pill-pink">Rosa</span>
              <span className="pill pill-mint">Mint</span>
              <span className="pill pill-lav">Lavanda</span>
            </div>
            <div className="ds-code">{'<span className="pill pill-blue">Texto</span>'}</div>
          </DSSection>

        </div>
      )}

      {/* ══════════ TIPOGRAFIA ══════════ */}
      {activeTab === 'tipografia' && (
        <div className="ds-content">

          <DSSection title="Manrope — fonte principal">
            <div className="col" style={{ gap: 20 }}>
              {[
                { w: 800, size: 32, label: 'Display / Hero' },
                { w: 700, size: 22, label: 'Título de tela' },
                { w: 700, size: 18, label: 'Subtítulo' },
                { w: 600, size: 15, label: 'Card title' },
                { w: 600, size: 13.5, label: 'Corpo padrão' },
                { w: 500, size: 12, label: 'Secundário' },
                { w: 400, size: 11, label: 'Caption / hint' },
              ].map(({ w, size, label }) => (
                <div key={size} className="ds-type-row">
                  <div style={{ fontFamily: 'Manrope', fontWeight: w, fontSize: size, letterSpacing: size > 20 ? '-0.02em' : 0 }}>
                    Ezza CRM — Plataforma de Vendas
                  </div>
                  <div className="ds-type-meta">{label} · {size}px · {w}</div>
                </div>
              ))}
            </div>
          </DSSection>

          <DSSection title="Instrument Serif — display / editorial">
            <div className="col" style={{ gap: 12 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontStyle: 'italic', color: 'var(--ink-soft)' }}>
                Pipeline <em style={{ fontWeight: 400 }}>de Vendas</em>
              </div>
              <div className="ds-code">{'fontFamily: var(--font-display) · italic · usado em títulos de tela'}</div>
            </div>
          </DSSection>

          <DSSection title="JetBrains Mono — código & dados">
            <div className="col" style={{ gap: 12 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13 }}>
                {'{{nome}} · R$ 12.800,00 · +55 (11) 99512-6603'}
              </div>
              <div className="ds-code">{'fontFamily: var(--font-mono) · usado em: telefones, valores, código, tags de variável'}</div>
            </div>
          </DSSection>

          <DSSection title="Padrão de labels — ALL CAPS">
            <div className="col" style={{ gap: 12 }}>
              <div className="field-lbl">IDENTIDADE DO AGENTE</div>
              <div className="field-lbl">COMPORTAMENTO</div>
              <div className="ds-code">{'className="field-lbl" → 10.5px · uppercase · letter-spacing 0.08em · weight 700 · ink-muted'}</div>
            </div>
          </DSSection>

        </div>
      )}

      {/* ══════════ BOTÕES ══════════ */}
      {activeTab === 'botoes' && (
        <div className="ds-content">

          <DSSection title="Variantes principais">
            <div className="ds-row" style={{ gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <button className="btn-primary">{ICN.plus} Primário</button>
              <button className="btn-ghost">Secundário</button>
              <button className="btn-primary" disabled style={{ opacity: 0.45 }}>Desativado</button>
            </div>
            <div className="ds-code">{'btn-primary · btn-ghost'}</div>
          </DSSection>

          <DSSection title="Tamanhos">
            <div className="ds-row" style={{ gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
              <button className="btn-primary">Normal</button>
              <button className="btn-primary btn-sm">Small</button>
              <button className="btn-ghost">Normal</button>
              <button className="btn-ghost btn-sm">Small</button>
            </div>
            <div className="ds-code">{'btn-primary btn-sm · btn-ghost btn-sm'}</div>
          </DSSection>

          <DSSection title="Botões de ação — Kanban">
            <div className="ds-row" style={{ gap: 10 }}>
              <button className="btn-ganhou">{ICN.check} Ganhou</button>
              <button className="btn-perdeu">{ICN.x} Perdeu</button>
            </div>
            <div className="ds-code">{'btn-ganhou · btn-perdeu'}</div>
          </DSSection>

          <DSSection title="Botão de perigo">
            <div className="ds-row" style={{ gap: 10 }}>
              <button className="btn-danger">{ICN.trash} Excluir lead</button>
            </div>
            <div className="ds-code">{'btn-danger'}</div>
          </DSSection>

          <DSSection title="Mini button — ações de card">
            <div className="ds-row" style={{ gap: 10 }}>
              <button className="mini-btn">{ICN.x}</button>
              <button className="mini-btn">{ICN.edit}</button>
              <button className="mini-btn">{ICN.more}</button>
            </div>
            <div className="ds-code">{'mini-btn · 32×32px · usado em drawers e cards'}</div>
          </DSSection>

        </div>
      )}

      {/* ══════════ INPUTS ══════════ */}
      {activeTab === 'inputs' && (
        <div className="ds-content">

          <DSSection title="Input padrão — ezz-input">
            <div className="col" style={{ gap: 10, maxWidth: 400 }}>
              <input className="ezz-input" placeholder="Ex: Bruno Henrique" />
              <textarea className="ezz-input" rows={3} placeholder="Texto longo…" style={{ fontFamily: 'inherit', resize: 'vertical' }} />
              <select className="ezz-input" style={{ appearance: 'auto' }}>
                <option>Indicação</option>
                <option>Meta Ads</option>
                <option>Site</option>
              </select>
            </div>
            <div className="ds-code">{'className="ezz-input" · bg oklch(0.97) · border 0.5px oklch(0.90) · radius 12px · padding 10px 14px'}</div>
          </DSSection>

          <DSSection title="Input com prefixo">
            <div style={{ maxWidth: 280 }}>
              <div className="ezz-input ezz-input-prefix">
                <span className="muted" style={{ fontSize: 13, fontWeight: 600 }}>R$</span>
                <input placeholder="0" style={{ border: 0, outline: 0, flex: 1, fontFamily: 'inherit', fontSize: 13, background: 'transparent' }} />
              </div>
            </div>
            <div className="ds-code">{'ezz-input ezz-input-prefix → display:flex + gap'}</div>
          </DSSection>

          <DSSection title="Input sem borda — inline fields (Agente IA)">
            <div className="col" style={{ gap: 0, maxWidth: 400, border: '0.5px solid oklch(0.92 0.01 250)', borderRadius: 16, padding: '4px 16px' }}>
              <div className="ai-inline-row">
                <div className="ai-lbl" style={{ width: 140, flexShrink: 0 }}>Nome do agente</div>
                <input className="ai-bare-input" placeholder="Ex: Sofia, Carlos…" />
              </div>
              <div className="ai-inline-row" style={{ borderBottom: 0, paddingBottom: 0 }}>
                <div className="ai-lbl" style={{ width: 140, flexShrink: 0 }}>Objetivo</div>
                <input className="ai-bare-input" placeholder="O que o agente deve alcançar…" />
              </div>
            </div>
            <div className="ds-code">{'ai-inline-row + ai-lbl + ai-bare-input → transparent, border:none, padding:0'}</div>
          </DSSection>

          <DSSection title="Select customizado (ai-sel)">
            <div className="ds-row" style={{ gap: 10 }}>
              {['8h','9h','10h'].map(h => (
                <select key={h} className="ai-sel" defaultValue={h}>
                  {['8h','9h','10h','11h','12h'].map(v => <option key={v} value={v}>{v}</option>)}
                </select>
              ))}
            </div>
            <div className="ds-code">{'ai-sel → appearance:none · SVG chevron · border:none · radius 10px · bg oklch(0.95)'}</div>
          </DSSection>

          <DSSection title="Field — label + input (formulários)">
            <div className="form-grid" style={{ maxWidth: 480 }}>
              <Field label="Nome do lead" full>
                <input className="ezz-input" placeholder="Ex: Construtora S.A." />
              </Field>
              <Field label="WhatsApp">
                <input className="ezz-input" placeholder="(11) 99999-9999" />
              </Field>
              <Field label="Origem">
                <input className="ezz-input" placeholder="Site, Indicação…" />
              </Field>
            </div>
            <div className="ds-code">{'<Field label="…"> + className="field-lbl" (all caps) + form-grid (2 colunas)'}</div>
          </DSSection>

        </div>
      )}

      {/* ══════════ CARDS ══════════ */}
      {activeTab === 'cards' && (
        <div className="ds-content">

          <DSSection title="Variantes de card (controladas pelo Tweaks Panel)">
            <div className="ds-row" style={{ gap: 16, flexWrap: 'wrap', alignItems: 'flex-start' }}>
              {/* Glass */}
              <div>
                <div className="ds-code" style={{ marginBottom: 8 }}>cs-glass (padrão)</div>
                <div className="card" style={{ width: 200, padding: '16px 18px' }}>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>Card Glass</div>
                  <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>backdrop-filter: blur(20px)</div>
                </div>
              </div>
              {/* Flat */}
              <div>
                <div className="ds-code" style={{ marginBottom: 8 }}>cs-flat</div>
                <div style={{ width: 200, padding: '16px 18px', background: 'oklch(0.97 0.008 250)', borderRadius: 20 }}>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>Card Flat</div>
                  <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>Sólido, sem blur</div>
                </div>
              </div>
              {/* Outlined */}
              <div>
                <div className="ds-code" style={{ marginBottom: 8 }}>cs-outlined</div>
                <div style={{ width: 200, padding: '16px 18px', borderRadius: 20, border: '1px solid oklch(0.86 0.012 255)', background: 'transparent' }}>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>Card Outlined</div>
                  <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>Border only</div>
                </div>
              </div>
            </div>
          </DSSection>

          <DSSection title="Card hero roxo — Agente IA">
            <div className="ai-hero" style={{ maxWidth: 480 }}>
              <div className="ds-row" style={{ gap: 14, alignItems: 'center' }}>
                <div className="ai-hero-ic">{ICN.bolt2}</div>
                <div className="col" style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 16, color: 'white' }}>Sofia</div>
                  <div style={{ fontSize: 12, color: 'oklch(1 0 0 / 0.65)' }}>SDR Virtual · VAPI · <span style={{ color: 'oklch(0.82 0.18 150)' }}>● Ativo</span></div>
                </div>
                <button className="ai-hero-save">Salvar</button>
              </div>
            </div>
            <div className="ds-code">{'ai-hero → gradient oklch(0.36 0.22 295) → oklch(0.28 0.16 295) · radius 20px'}</div>
          </DSSection>

          <DSSection title="Card de lead — Pipeline">
            <div style={{ width: 200 }}>
              <div className="lead-card">
                <div className="lead-card-top">
                  <div className="lead-name">Bruno Henrique</div>
                  <span className="pill pill-pink" style={{ fontSize: 10 }}>QUENTE</span>
                </div>
                <div className="lead-empresa muted">Construtora Paineiras</div>
                <div className="lead-valor money">R$ 12.800,00</div>
                <div className="lead-foot">
                  <span className="lead-status">
                    <span className="lead-status-ic">{ICN.phone}</span>
                    Aguardando
                  </span>
                  <div className="lead-wa">{ICN.whatsapp}</div>
                </div>
              </div>
            </div>
            <div className="ds-code">{'lead-card → white · radius 16px · cursor:grab · hover: translateY(-2px)'}</div>
          </DSSection>

          <DSSection title="Card AI — análise inteligente">
            <div className="ai-card" style={{ maxWidth: 400 }}>
              <div className="ds-row" style={{ gap: 12, alignItems: 'flex-start' }}>
                <div className="ai-card-ic">{ICN.bolt2}</div>
                <div className="col" style={{ flex: 1 }}>
                  <div className="ai-card-title">Análise Inteligente</div>
                  <div className="ai-card-sub">Gere um resumo imediato das dores do lead.</div>
                </div>
                <button className="btn-primary btn-sm">Gerar IA</button>
              </div>
            </div>
            <div className="ds-code">{'ai-card → gradient roxo · text white · usado em drawers e painéis'}</div>
          </DSSection>

        </div>
      )}

      {/* ══════════ COMPONENTES ══════════ */}
      {activeTab === 'componentes' && (
        <div className="ds-content">

          <DSSection title="Toggle Row — padrão de configurações">
            <div className="card" style={{ padding: '4px 20px', maxWidth: 520 }}>
              <div className="toggle-row">
                <div className="col" style={{ flex: 1 }}>
                  <div className="toggle-lbl">Notificações por e-mail</div>
                  <div className="toggle-hint">Receba avisos de novos leads e tarefas no seu e-mail.</div>
                </div>
                <DSSwitch />
              </div>
              <div className="toggle-row">
                <div className="col" style={{ flex: 1 }}>
                  <div className="toggle-lbl">Push no celular</div>
                  <div className="toggle-hint">Alertas em tempo real no dispositivo móvel.</div>
                </div>
                <DSSwitch />
              </div>
            </div>
            <div className="ds-code">{'toggle-row · toggle-lbl · toggle-hint · + <Switch />'}</div>
          </DSSection>

          <DSSection title="Switch">
            <div className="ds-row" style={{ gap: 20, alignItems: 'center' }}>
              <div>
                <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>OFF</div>
                <div className="switch"><div className="switch-knob" /></div>
              </div>
              <div>
                <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>ON (interativo)</div>
                <DSSwitch />
              </div>
            </div>
            <div className="ds-code">{'switch · switch-on · switch-knob → largura 40px, knob 18px'}</div>
          </DSSection>

          <DSSection title="Toast">
            <DSToastDemo />
            <div className="ds-code">{'useToast() → toast("mensagem") · duração 3s · posição bottom-center'}</div>
          </DSSection>

          <DSSection title="Score Ring — lead score">
            <div className="ds-row" style={{ gap: 24 }}>
              <ScoreRing pct={92} />
              <ScoreRing pct={65} />
              <ScoreRing pct={38} />
            </div>
            <div className="ds-code">{'<ScoreRing pct={0-100} /> · SVG · stroke oklch(0.55 0.16 250)'}</div>
          </DSSection>

          <DSSection title="Timeline item">
            <div className="timeline" style={{ maxWidth: 380 }}>
              <TLItem ic={ICN.plus}  title="Lead criado"     body="Adicionado ao sistema."      when="13/05 às 08:12" color="mint"   />
              <TLItem ic={ICN.phone} title="Primeiro contato" body="Conversa iniciada via Site." when="13/05 às 16:08" color="blue"   />
              <TLItem ic={ICN.mail}  title="Material enviado" body="Catálogo compartilhado."    when="14/05 às 09:12" color="yellow" />
            </div>
            <div className="ds-code">{'<TLItem ic={ICN.x} title color body when /> · colors: mint|blue|yellow'}</div>
          </DSSection>

          <DSSection title="Pill de temperatura">
            <div className="ds-row" style={{ gap: 10 }}>
              <span className="pill pill-blue" style={{ fontSize: 10, letterSpacing: '0.08em' }}>FRIO</span>
              <span className="pill pill-yellow" style={{ fontSize: 10, letterSpacing: '0.08em' }}>MORNO</span>
              <span className="pill pill-pink" style={{ fontSize: 10, letterSpacing: '0.08em' }}>QUENTE</span>
            </div>
            <div className="ds-code">{'<TempPill temp="quente|morno|frio" big? />'}</div>
          </DSSection>

          <DSSection title="Badge IA — card com IA ativa">
            <div style={{ position: 'relative', display: 'inline-block', paddingTop: 12 }}>
              <div style={{ position: 'absolute', top: 0, left: 12, display: 'inline-flex', alignItems: 'center', gap: 4, background: 'oklch(0.55 0.18 295)', color: 'white', fontSize: 9.5, fontWeight: 800, letterSpacing: '0.06em', padding: '3px 8px 3px 6px', borderRadius: '0 0 8px 8px', textTransform: 'uppercase' }}>
                <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                IA
                <span className="lead-ai-pulse" />
              </div>
              <div className="lead-card lead-card-ai" style={{ width: 180, paddingTop: 24 }}>
                <div className="lead-name">Eva Rodrigues</div>
                <div className="lead-empresa muted">Studio Maracá</div>
              </div>
            </div>
            <div className="ds-code">{'lead-card-ai → border roxa · lead-ai-badge + lead-ai-pulse (animation 1.6s)'}</div>
          </DSSection>

        </div>
      )}

      {/* ══════════ ÍCONES ══════════ */}
      {activeTab === 'icones' && (
        <div className="ds-content">
          <DSSection title="Ícones disponíveis — clique para copiar o JSX">
            <div className="ds-icons-grid">
              {Object.entries(ICN).map(([name, icon]) => (
                <DSIcon key={name} name={name} icon={icon} />
              ))}
            </div>
            <div className="ds-code">{'Todos definidos em icons.jsx · Stroke 1.6 · Lucide-style · {ICN.nome}'}</div>
          </DSSection>

          <DSSection title="Tamanhos de ícone">
            <div className="ds-row" style={{ gap: 20, alignItems: 'flex-end' }}>
              {[12, 16, 18, 20, 24].map(size => (
                <div key={size} className="col" style={{ alignItems: 'center', gap: 6 }}>
                  <Icon size={size}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></Icon>
                  <div className="muted" style={{ fontSize: 10 }}>{size}px</div>
                </div>
              ))}
            </div>
            <div className="ds-code">{'<Icon size={18} stroke={1.6}> · padrão do sistema: 16–18px'}</div>
          </DSSection>
        </div>
      )}

      {/* ── Estilos ── */}
      <style>{`
        .ds-header {
          display: flex; align-items: flex-start; justify-content: space-between;
          margin-bottom: 24px; gap: 16px;
        }
        .ds-header-title {
          font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1;
        }
        .ds-header-title em {
          font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ink-soft);
        }
        .ds-header-sub {
          font-size: 12px; color: var(--ink-muted); margin-top: 6px;
          text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
        }
        .ds-badge {
          display: inline-flex; align-items: center; gap: 8px;
          background: oklch(0.94 0.04 295); color: oklch(0.38 0.18 295);
          border: 1px solid oklch(0.84 0.08 295);
          border-radius: 999px; padding: 8px 16px;
          font-size: 12px; font-weight: 700; white-space: nowrap;
        }
        .ds-tabs {
          display: flex; gap: 4px; flex-wrap: wrap;
          border-bottom: 1px solid oklch(0.92 0.01 250);
          margin-bottom: 28px; padding-bottom: 0;
        }
        .ds-tab {
          border: none; background: transparent; padding: 10px 16px;
          font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink-muted);
          cursor: default; border-radius: 12px 12px 0 0;
          border-bottom: 2px solid transparent; margin-bottom: -1px;
          transition: color .15s;
        }
        .ds-tab:hover { color: var(--ink); background: oklch(0.97 0.01 250); }
        .ds-tab-on { color: oklch(0.38 0.18 295) !important; border-bottom-color: oklch(0.55 0.18 295); font-weight: 700; background: transparent !important; }

        .ds-content { display: flex; flex-direction: column; gap: 32px; }

        .ds-section { }
        .ds-section-title {
          font-size: 10.5px; font-weight: 700; text-transform: uppercase;
          letter-spacing: 0.1em; color: var(--ink-muted); margin-bottom: 16px;
          padding-bottom: 10px; border-bottom: 1px solid oklch(0.93 0.01 255);
        }

        .ds-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
        .ds-swatch { width: 140px; }
        .ds-swatch-color { height: 56px; border-radius: 14px; margin-bottom: 8px; border: 0.5px solid oklch(0.92 0.01 250); }
        .ds-swatch-label { font-size: 12px; font-weight: 600; color: var(--ink); }
        .ds-swatch-var { font-size: 10.5px; font-family: var(--font-mono); color: oklch(0.55 0.18 295); margin-top: 2px; }
        .ds-swatch-hex { font-size: 10px; color: var(--ink-muted); font-family: var(--font-mono); margin-top: 2px; }

        .ds-tokens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
        .ds-token { display: flex; align-items: center; gap: 14px; background: oklch(0.98 0.005 250); border-radius: 14px; padding: 12px 16px; border: 0.5px solid oklch(0.92 0.01 250); }
        .ds-token-label { font-size: 12px; font-weight: 600; }
        .ds-token-value { font-size: 11px; color: var(--ink-muted); font-family: var(--font-mono); margin-top: 2px; }

        .ds-type-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid oklch(0.95 0.005 250); }
        .ds-type-meta { font-size: 11px; color: var(--ink-faint); white-space: nowrap; font-family: var(--font-mono); }

        .ds-code {
          margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px;
          color: oklch(0.38 0.18 295); background: oklch(0.96 0.02 295 / 0.4);
          padding: 8px 14px; border-radius: 10px; line-height: 1.6;
        }

        .ds-row { display: flex; align-items: center; }

        .ds-icons-grid {
          display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px;
        }
        .ds-icon {
          display: flex; flex-direction: column; align-items: center; gap: 6px;
          padding: 14px 8px; border-radius: 14px; cursor: default;
          background: oklch(0.98 0.005 250); border: 0.5px solid oklch(0.92 0.01 250);
          transition: background .12s;
        }
        .ds-icon:hover { background: white; box-shadow: 0 4px 12px -4px rgba(20,30,60,.1); }
        .ds-icon-preview { color: var(--ink); display: grid; place-items: center; }
        .ds-icon-name { font-size: 10px; color: var(--ink-muted); font-family: var(--font-mono); text-align: center; }
      `}</style>
    </>
  );
}

window.DesignSystem = DesignSystem;