/**
 * SeloSeguranca — faixa de selos de segurança/compliance.
 * Tier 3 #15 do benchmarking (padrão Umbler/Digisac/Halk). Posicionado
 * entre Integrations e FAQ pra fechar a objeção técnico-jurídica de
 * sócio sênior (LGPD, OAB, canal oficial, segurança) antes do FAQ.
 *
 * Selo Meta Business Partner fica como placeholder até a empresa entrar
 * no programa oficial — substitua {META_PARTNER_BADGE_URL} pela URL do
 * selo aprovado.
 */
const SeloSeguranca = () => {
  const selos = [
    {
      icon: <Icon.Shield size={28}/>,
      title: 'LGPD compliant',
      sub: 'Criptografia em trânsito e repouso · aceite registrado · logs de auditoria',
    },
    {
      icon: <Icon.Doc size={28}/>,
      title: 'Conforme OAB',
      sub: 'Dentro do Provimento sobre publicidade e captação · sem treinamento em modelos públicos',
    },
    {
      icon: <Icon.Whatsapp size={28}/>,
      title: 'WhatsApp Business API',
      sub: 'Integração oficial via Meta · número oficial do escritório, sem migração',
    },
    {
      icon: <Icon.Bolt size={28}/>,
      title: 'Dados criptografados',
      sub: 'TLS 1.3 em trânsito · AES-256 em repouso · segregação por escritório',
    },
  ];

  // Selo Meta Business Partner — opcional. Quando substituir
  // {META_PARTNER_BADGE_URL} por uma URL pública real, renderiza o badge.
  const META_PARTNER_BADGE_URL = '{META_PARTNER_BADGE_URL}';
  const hasMetaBadge = META_PARTNER_BADGE_URL && !META_PARTNER_BADGE_URL.startsWith('{');

  return (
    <section className="section section-light section-selos" id="seguranca" data-screen-label="09 Segurança">
      <div className="container">
        <div className="section-heading section-heading-tight">
          <div className="eyebrow"><span className="dot"></span>SEGURANÇA E COMPLIANCE</div>
          <h2>Pronto pra escritório<br/><span className="text-accent">que leva LGPD a sério.</span></h2>
          <p>Não rodamos no "modo demonstração". A operação é montada com a régua de segurança que cliente jurídico exige — desde o primeiro dia.</p>
        </div>

        <ul className="selo-grid">
          {selos.map((s, i) => (
            <li key={i} className="selo-card reveal">
              <div className="selo-icon" aria-hidden="true">{s.icon}</div>
              <div className="selo-text">
                <h3>{s.title}</h3>
                <p>{s.sub}</p>
              </div>
            </li>
          ))}
        </ul>

        {hasMetaBadge && (
          <div className="selo-partner reveal">
            <img src={META_PARTNER_BADGE_URL} alt="Meta Business Partner" className="selo-partner-img"/>
            <p className="selo-partner-label">Programa oficial Meta Business Partner</p>
          </div>
        )}
        {!hasMetaBadge && (
          <div className="selo-partner selo-partner-placeholder reveal" aria-hidden="false">
            <div className="selo-partner-ph-box">
              <span className="selo-partner-ph-tag">META BUSINESS PARTNER</span>
              <span className="selo-partner-ph-hint">{'substituir {META_PARTNER_BADGE_URL} por URL do selo'}</span>
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

window.SeloSeguranca = SeloSeguranca;