function Diferenca() {
  const rows = [
    { left: 'Começa pelo Figma.', right: 'Começa pela pergunta: contra quem a gente está jogando?' },
    { left: 'Faz moodboard de referência.', right: 'Faz dossiê de concorrência com leitura linha a linha.' },
    { left: 'Pergunta: "do que você gosta?"', right: 'Pergunta: "quem é o cliente que paga sem pensar duas vezes?"' },
    { left: 'Entrega três opções de logo.', right: 'Entrega uma decisão — com o raciocínio que levou até ela.' },
    { left: 'Resolve no gosto do cliente.', right: 'Resolve no que o mercado está pedindo e o seu concorrente não viu.' },
    { left: 'Cobra pela entrega visual.', right: 'Cobra pelo risco que você deixa de correr nos próximos 24 meses.' },
    { left: 'Prazo verbal, atualização quando lembrar.', right: 'Contrato com entregas datadas, plataforma de acompanhamento e atualização periódica.' },
    { left: 'Nunca teve a experiência de criar uma marca.', right: null },
  ];

  return (
    <Section id="diferenca" style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--line-soft)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 60, marginBottom: 70 }} className="dif-head">
          <Label n="05">Diferenciação</Label>
          <MaskLines
            tag="h2"
            className="serif"
            style={{ fontSize: 'clamp(38px, 5.5vw, 78px)', lineHeight: 0.98, letterSpacing: '-0.03em' }}
            lines={[
              <>Dois processos.</>,
              <>Um <em className="italic">traz caixa.</em></>,
            ]}
          />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 0, alignItems: 'stretch' }} className="dif-grid">
          <div className="dif-col-header" style={{ padding: '24px 32px', borderBottom: '1px solid var(--line)' }}>
            <div className="mono" style={{ color: 'var(--fg-mute)' }}>O designer comum</div>
          </div>
          <div style={{ width: 1, background: 'var(--line)' }} className="dif-divider" />
          <div className="dif-col-header" style={{ padding: '24px 32px', borderBottom: '1px solid var(--line)', background: 'var(--bg-2)' }}>
            <div className="mono" style={{ color: 'var(--accent)' }}>→ O Método PHI</div>
          </div>

          {rows.map((r, i) => (
            <React.Fragment key={i}>
              <Reveal delay={i * 60} style={{
                padding: '28px 32px',
                borderBottom: i < rows.length - 1 ? '1px solid var(--line-soft)' : '1px solid var(--line)',
                color: 'var(--fg-mute)',
                fontSize: 18, lineHeight: 1.45, letterSpacing: '-0.01em',
              }}>
                {r.left}
              </Reveal>
              <div style={{ width: 1, background: 'var(--line)' }} className="dif-divider" />
              <Reveal delay={i * 60 + 80} style={{
                padding: '28px 32px',
                borderBottom: i < rows.length - 1 ? '1px solid var(--line-soft)' : '1px solid var(--line)',
                background: 'var(--bg-2)',
                fontSize: 19, letterSpacing: '-0.01em', lineHeight: 1.4,
              }} className="serif">
                {r.right === null ? (
                  <>
                    Dono da{' '}
                    <a
                      href="https://instagram.com/joully.sn"
                      target="_blank"
                      rel="noopener noreferrer"
                      style={{ color: 'var(--accent)', textDecoration: 'none', borderBottom: '1px solid oklch(from var(--accent) l c h / 0.4)', paddingBottom: 1, transition: 'border-color .2s' }}
                      onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--accent)'}
                      onMouseLeave={e => e.currentTarget.style.borderColor = 'oklch(from var(--accent) l c h / 0.4)'}
                    >@joully.sn</a>
                  </>
                ) : r.right}
              </Reveal>
            </React.Fragment>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .dif-head { grid-template-columns: 1fr !important; gap: 20px !important; }
          .dif-grid { grid-template-columns: 1fr 1fr !important; }
          .dif-divider { display: none !important; }
          .dif-grid > div, .dif-grid > .reveal { padding: 14px 10px !important; font-size: 13px !important; }
          .dif-col-header { padding: 12px 10px !important; font-size: 11px !important; }
        }
        @media (max-width: 480px) {
          .dif-grid > div, .dif-grid > .reveal { font-size: 12px !important; padding: 12px 8px !important; }
        }
      `}</style>
    </Section>
  );
}

window.Diferenca = Diferenca;