
function Differentials() {
  const left = [
    { i: <Icons.Sparkle style={{width:22,height:22}}/>, t: '100% customizável', d: 'App personalizado com cores, logo e identidade da sua prefeitura. Cada secretaria ativa só os módulos que precisa.' },
    { i: <Icons.Lock style={{width:22,height:22}}/>, t: 'Você no controle dos dados', d: 'Cloud da Sasi ou auto-hospedagem em servidores próprios. A prefeitura mantém o controle total dos dados.' },
  ];
  const right = [
    { i: <Icons.Layers style={{width:22,height:22}}/>, t: 'IA para o setor público', d: 'Agentes de IA que automatizam atendimento, classificam demandas e geram insights para decisão pública.' },
    { i: <Icons.Globe style={{width:22,height:22}}/>, t: 'Atualizações ágeis', d: 'Publique novas versões em tempo real, sem depender da autorização das lojas de aplicativos.' },
  ];

  return (
    <section id="diferenciais">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>Diferenciais</span>
          <h2>Construído para o<br/><span className="serif-i" style={{color:'var(--primary)'}}>setor público brasileiro.</span></h2>
        </div>
        <div className="diffs-bento">

          <div className="diffs-col">
            {left.map((it, i) => (
              <div key={i} className="diff-card">
                <div className="diff-card-icon">{it.i}</div>
                <h4>{it.t}</h4>
                <p>{it.d}</p>
              </div>
            ))}
          </div>

          <div className="diffs-phone-col">
            <video
              className="diffs-video"
              src="assets/Design sem nome.mp4"
              autoPlay loop muted playsInline
            />
          </div>

          <div className="diffs-col">
            {right.map((it, i) => (
              <div key={i} className="diff-card">
                <div className="diff-card-icon">{it.i}</div>
                <h4>{it.t}</h4>
                <p>{it.d}</p>
              </div>
            ))}
          </div>

        </div>
      </div>
    </section>
  );
}
window.Differentials = Differentials;
