/* === Trust Bar === */
const TrustBar = () => {
  const items = [
    { tag: 'ICP-BRASIL', sub: 'Certificação' },
    { tag: 'OAB API v2', sub: 'Cadastro Nacional' },
    { tag: 'LGPD', sub: 'Conformidade' },
    { tag: 'PIX · CARTÃO · BOLETO', sub: 'Pagamentos' },
    { tag: '24/7', sub: 'Antifraude' },
    { tag: 'iOS · ANDROID · WEB', sub: 'Disponível' },
  ];
  return (
    <section style={{ background: 'var(--white)', padding: '40px 0', borderBottom: '1px solid var(--line)', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)',
          gap: 0, alignItems: 'center',
        }} className="trust-grid">
          {items.map((it, i) => (
            <div key={i} style={{
              padding: '8px 16px',
              borderLeft: i > 0 ? '1px solid var(--line)' : 'none',
              textAlign: 'center',
            }} className="trust-item">
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 500, color: 'var(--navy-900)', letterSpacing: '0.04em' }}>
                {it.tag}
              </div>
              <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 4 }}>{it.sub}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .trust-grid { grid-template-columns: 1fr 1fr 1fr !important; gap: 16px 0 !important; }
          .trust-item:nth-child(4) { border-left: none !important; }
        }
      `}</style>
    </section>
  );
};

window.TrustBar = TrustBar;