/* Generic modal shell to share between MVV and Privacy */
function ModalShell({ open, onClose, title, subtitle, children, labelId, maxWidth }) {
  React.useEffect(() => {
    if (!open) return;
    document.body.classList.add('modal-open');
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.classList.remove('modal-open');
      window.removeEventListener('keydown', onKey);
    };
  }, [open, onClose]);

  return (
    <div
      className={`modal-overlay ${open ? 'open' : ''}`}
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
      aria-hidden={!open}
    >
      <div className="modal" role="dialog" aria-modal="true" aria-labelledby={labelId} style={maxWidth ? {maxWidth} : null}>
        <div className="modal-head">
          <div className="modal-head-l">
            <BrandMark size={36} />
            <div>
              <h3>{title || 'InfocuestaSec'}</h3>
              <div className="sub">{subtitle || 'Segurança da Informação'}</div>
            </div>
          </div>
          <button className="modal-close" onClick={onClose} aria-label="Fechar">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M18 6 6 18M6 6l12 12"/>
            </svg>
          </button>
        </div>
        <div className="modal-body">
          {children}
        </div>
      </div>
    </div>
  );
}

/* Missão, Visão, Valores — Modal */

const VALUES = [
  { t: "Integridade e ética", d: "Fazemos o certo, mesmo quando ninguém está olhando." },
  { t: "Confidencialidade e privacidade", d: "Proteção de dados e discrição em primeiro lugar." },
  { t: "Excelência técnica", d: "Qualidade, profundidade e responsabilidade nas entregas." },
  { t: "Transparência", d: "Linguagem clara, relatórios objetivos e alinhamento de expectativas." },
  { t: "Foco em resultado", d: "Priorizamos o que reduz risco de verdade." },
  { t: "Proximidade com o cliente", d: "Atendimento humano, parceiro e sem \u201Ctecniquês\u201D." },
  { t: "Melhoria contínua", d: "Evolução constante de processos, pessoas e tecnologia." },
  { t: "Responsabilidade", d: "Compromisso com prazos, segurança e impacto no negócio." },
];

function MvvModal({ open, onClose }) {
  return (
    <ModalShell open={open} onClose={onClose} labelId="mvv-title">
      <h2 id="mvv-title">Missão, Visão e Valores</h2>
      <p className="lede">Estes princípios guiam nosso trabalho e o relacionamento com clientes, parceiros e colaboradores.</p>

      <div className="modal-section">
        <h4>Missão</h4>
        <p>Garantir a segurança da informação de empresas, reduzindo riscos de forma prática e transparente, com foco em resultados, conformidade e continuidade do negócio.</p>
      </div>

      <div className="modal-section">
        <h4>Visão</h4>
        <p>Ser reconhecida como referência em segurança acessível e eficiente para pequenas e médias empresas, destacando-se pela qualidade técnica, proximidade no atendimento e capacidade de entregar melhorias reais na maturidade de segurança.</p>
      </div>

      <div className="modal-section">
        <h4>Valores</h4>
        <ul className="values-list">
          {VALUES.map((v, i) => (
            <li key={i}>
              <span className="v-num">0{i + 1}</span>
              <div>
                <strong>{v.t}</strong>
                <span>{v.d}</span>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </ModalShell>
  );
}

/* ─────────────────────────────────────────────────────────── */
/* Política de Privacidade — Modal                              */
/* ─────────────────────────────────────────────────────────── */

const PRIVACY_BASES = [
  "Consentimento do titular, quando exigido",
  "Cumprimento de obrigação legal ou regulatória",
  "Execução de contrato ou de procedimentos preliminares",
  "Exercício regular de direitos em processos judiciais, administrativos ou arbitrais",
  "Legítimo interesse da Infocuesta SEC ou de terceiros, respeitados os direitos do titular",
  "Proteção do crédito, quando aplicável",
];

const PRIVACY_FINALITIES = [
  "Prestação, gestão e suporte aos serviços contratados",
  "Comunicação e relacionamento comercial",
  "Melhoria da experiência de navegação e desempenho do site",
  "Execução de atividades técnicas, consultivas e operacionais",
  "Cumprimento de obrigações legais e regulatórias",
  "Segurança da informação e prevenção a fraudes",
];

const PRIVACY_RIGHTS = [
  "Confirmação da existência de tratamento",
  "Acesso, correção ou atualização",
  "Anonimização, bloqueio ou eliminação",
  "Portabilidade, quando aplicável",
  "Informações sobre compartilhamentos",
  "Revogação de consentimento",
  "Oposição a tratamentos baseados em legítimo interesse",
];

const PRIVACY_AUDIENCE = [
  "Visitantes do site e demais canais digitais",
  "Clientes, potenciais clientes e seus representantes",
  "Parceiros comerciais, fornecedores e prestadores de serviços",
  "Colaboradores, candidatos e terceiros autorizados",
  "Qualquer pessoa que tenha acesso a dados pessoais sob responsabilidade da empresa",
];

const PRIVACY_SHARING = [
  "Fornecedores de tecnologia e infraestrutura",
  "Parceiros envolvidos na execução de serviços",
  "Autoridades públicas, mediante obrigação legal ou ordem válida",
  "Assessorias jurídicas, contábeis ou auditorias",
];

function BulletList({ items }) {
  return (
    <ul className="prose-list">
      {items.map((t, i) => <li key={i}>{t}</li>)}
    </ul>
  );
}

function PrivacyModal({ open, onClose }) {
  return (
    <ModalShell open={open} onClose={onClose} labelId="priv-title" maxWidth="840px">
      <div className="doc-meta">
        <span className="chip"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> Última atualização · 2026</span>
        <span className="chip">LGPD · Lei nº 13.709/2018</span>
      </div>

      <h2 id="priv-title">Política de Privacidade e Proteção de Dados</h2>
      <p className="lede">A Infocuesta SEC atua com responsabilidade, ética e transparência no tratamento de dados pessoais de clientes, parceiros, fornecedores, colaboradores e visitantes de seus canais digitais. Esta Política descreve como os dados pessoais são coletados, utilizados, armazenados e protegidos, em conformidade com a Lei Geral de Proteção de Dados Pessoais.</p>
      <p className="lede" style={{marginTop: -12}}>Recomendamos a leitura atenta deste documento e a consulta periódica desta página, uma vez que esta Política poderá ser atualizada para refletir melhorias operacionais, mudanças legais ou ajustes internos.</p>

      <div className="modal-section">
        <h4><span className="sec-num">01</span> Abrangência</h4>
        <p>Esta Política aplica-se a todas as pessoas físicas que se relacionam com a Infocuesta SEC, incluindo, quando aplicável:</p>
        <BulletList items={PRIVACY_AUDIENCE} />
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">02</span> Finalidade da Política</h4>
        <p>O objetivo desta Política é apresentar, de forma clara e acessível:</p>
        <BulletList items={[
          "Quais dados pessoais podem ser tratados",
          "As finalidades e bases legais do tratamento",
          "As medidas de segurança adotadas",
          "Os direitos assegurados aos titulares",
          "Os canais disponíveis para contato e solicitações",
        ]} />
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">03</span> Tratamento de Dados Pessoais</h4>
        <h5 className="sub-h">3.1 · Bases legais</h5>
        <p>O tratamento de dados pessoais poderá ocorrer com fundamento, entre outros, nas seguintes bases legais:</p>
        <BulletList items={PRIVACY_BASES} />

        <h5 className="sub-h">3.2 · Coleta e uso dos dados</h5>
        <p>Os dados pessoais podem ser fornecidos diretamente pelo titular ou coletados automaticamente durante a navegação em nossos canais digitais. As principais finalidades do tratamento incluem:</p>
        <BulletList items={PRIVACY_FINALITIES} />

        <h5 className="sub-h">3.3 · Compartilhamento</h5>
        <p>O compartilhamento de dados pessoais ocorre apenas quando necessário e de forma controlada, por exemplo, com:</p>
        <BulletList items={PRIVACY_SHARING} />
        <div className="callout">
          <Icon.Shield style={{width: 16, height: 16, color: 'var(--signal)'}}/>
          <span>A Infocuesta SEC <strong>não vende dados pessoais</strong>.</span>
        </div>

        <h5 className="sub-h">3.4 · Armazenamento e retenção</h5>
        <div className="retention-table">
          <div className="rt-row rt-head">
            <span>Categoria de dados</span>
            <span>Prazo de retenção</span>
          </div>
          <div className="rt-row">
            <span>Dados cadastrais e de contato</span>
            <span>Até 3 anos após o encerramento do relacionamento</span>
          </div>
          <div className="rt-row">
            <span>Dados de navegação e identificação digital</span>
            <span>Até 6 meses após o último acesso</span>
          </div>
        </div>
        <p style={{marginTop: 14}}>Os dados são armazenados em ambientes seguros, próprios ou de terceiros contratados, observando critérios técnicos, contratuais e legais de proteção.</p>

        <h5 className="sub-h">3.5 · Segurança da informação</h5>
        <p>A Infocuesta SEC adota medidas técnicas e organizacionais compatíveis com os riscos envolvidos, incluindo controle de acessos, gestão de vulnerabilidades, monitoramento contínuo, políticas internas e cláusulas contratuais de confidencialidade.</p>
        <p style={{marginTop: 10}}>Apesar das boas práticas adotadas, nenhum ambiente é completamente imune a incidentes. Caso ocorra um evento relevante, serão adotadas medidas de resposta, mitigação e comunicação, conforme a legislação aplicável.</p>
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">04</span> Direitos dos titulares</h4>
        <p>O titular dos dados pode, a qualquer momento, solicitar:</p>
        <BulletList items={PRIVACY_RIGHTS} />
        <div className="callout">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{color: 'var(--accent-2)'}}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="m22 6-10 7L2 6"/></svg>
          <span>As solicitações devem ser encaminhadas para: <a href="mailto:contato@infocuesta.com.br" style={{color:'var(--accent-2)', textDecoration:'underline'}}>contato@infocuesta.com.br</a></span>
        </div>
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">05</span> Cookies</h4>
        <p>Este site institucional não utiliza cookies, armazenamento local no navegador nem ferramentas de analytics ou rastreamento — é uma página estática, sem formulários, sem login e sem coleta automática de dados de navegação. O contato acontece exclusivamente por WhatsApp ou e-mail, fora deste site.</p>
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">06</span> Identificação do Controlador</h4>
        <div className="controller-card">
          <div>
            <div className="ck-label">Empresa</div>
            <div className="ck-val">Infocuesta SEC</div>
          </div>
          <div>
            <div className="ck-label">E-mail de contato</div>
            <div className="ck-val"><a href="mailto:contato@infocuesta.com.br">contato@infocuesta.com.br</a></div>
          </div>
        </div>
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">07</span> Atualizações</h4>
        <p>Esta Política poderá ser revisada a qualquer momento. A versão vigente estará sempre disponível neste endereço.</p>
      </div>
    </ModalShell>
  );
}

Object.assign(window, { MvvModal, PrivacyModal, EthicsModal, NewsModal });

/* ─────────────────────────────────────────────────────────── */
/* Notícias — Modal com clippings reais                         */
/* ─────────────────────────────────────────────────────────── */

const NEWS_CLIPPINGS = [
  {
    src: "noticia0.png",
    source: "Security Leaders",
    headline: "64% das violações com IA no Brasil envolvem dados sensíveis de clientes e empresas",
    pull: "O uso de IA generativa nas empresas saltou de 50% para 71% em um ano — e 64% das violações de política já envolvem dados regulados.",
  },
  {
    src: "noticia1-v2.png",
    source: "CNN Brasil",
    headline: "45% dos ataques hackers no Brasil acontece por falhas básicas; entenda",
    pull: "45,2% dos ataques começam por falhas básicas — mais de 70% das invasões combinam isso com credenciais válidas.",
  },
  {
    src: "noticia2-v2.png",
    source: "Kaspersky · comunicado oficial",
    headline: "América Latina é a região mais afetada por ransomware, aponta Kaspersky",
    pull: "8,13% das organizações na América Latina tiveram ataques de ransomware detectados em 2025 — a maior taxa do mundo.",
  },
  {
    src: "noticia3-v2.png",
    source: "TI Inside",
    headline: "Brasil amadurece em cibersegurança, mas phishing persiste",
    pull: "Os ataques de phishing mais que dobraram: de 28% para 58% das empresas atacadas entre 2021 e 2026.",
  },
  {
    src: "noticia4.png",
    source: "CNN Brasil",
    headline: "Nem gigante do setor aéreo escapa: LATAM confirma vazamento de dados de clientes",
    pull: "Dados expostos incluem nome completo, data de nascimento, e-mail, telefone, endereço e dígitos parciais de cartão de crédito — LATAM comunicou o caso à ANPD.",
  },
  {
    src: "noticia5.png",
    source: "TI Inside",
    headline: "Ataque a shopping em BH expõe dados pessoais críticos — mais um alerta para o varejo",
    pull: "Servidores do Shopping Cidade (BH) foram invadidos, causando indisponibilidade temporária de arquivos — modo de operação típico de ransomware, uma das maiores ameaças ao varejo hoje.",
  },
];

function NewsModal({ open, onClose }) {
  return (
    <ModalShell open={open} onClose={onClose} labelId="news-title" maxWidth="900px">
      <div className="doc-meta">
        <span className="chip"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/><path d="M18 14h-8M15 18h-5M10 6h8v4h-8z"/></svg> Cobertura na imprensa</span>
        <span className="chip">Brasil · 2026</span>
      </div>

      <h2 id="news-title">O cenário do Brasil em segurança da informação.</h2>
      <p className="lede">
        Os números não são alarmismo — são imprensa. Selecionamos algumas manchetes recentes de veículos como CNN Brasil, Kaspersky, Security Leaders e TI Inside para mostrar o tamanho do desafio que enfrentamos juntos.
      </p>

      <div className="news-grid">
        {NEWS_CLIPPINGS.map((n, i) => (
          <article className="news-card" key={i}>
            <div className="news-card-media">
              <img src={n.src} alt={n.headline} loading="lazy" />
            </div>
            <div className="news-card-body">
              <div className="news-source">
                <span className="news-source-dot"></span>
                {n.source}
              </div>
              <h4>{n.headline}</h4>
              <p className="news-pull">"{n.pull}"</p>
            </div>
          </article>
        ))}
      </div>

      <div className="callout" style={{marginTop: 28}}>
        <Icon.Shield style={{width: 16, height: 16, color:'var(--signal)'}}/>
        <span>
          Se a estatística virar manchete, alguém já pagou o preço. A <strong style={{color:'var(--text)'}}>InfocuestaSec</strong> existe para que sua empresa não seja a próxima.
        </span>
      </div>

      <p style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 11,
        color: 'var(--text-3)',
        marginTop: 22,
        fontStyle: 'italic',
        textAlign: 'center'
      }}>
        Todos os direitos das imagens pertencem aos respectivos veículos. Reproduzidas aqui apenas a título informativo.
      </p>
    </ModalShell>
  );
}

/* ─────────────────────────────────────────────────────────── */
/* Código de Ética e Conduta — Modal                            */
/* ─────────────────────────────────────────────────────────── */

const ETHICS_VALUES = [
  { t: "Integridade",         d: "Agir com honestidade, transparência e responsabilidade." },
  { t: "Excelência técnica",  d: "Entregar qualidade, consistência e melhoria contínua." },
  { t: "Respeito",            d: "Promover um ambiente seguro e inclusivo, livre de discriminação e assédio." },
  { t: "Confidencialidade",   d: "Proteger informações e dados conforme a criticidade e necessidade." },
  { t: "Segurança",           d: "Atuar com mentalidade preventiva e foco em redução de riscos." },
];

function EthicsModal({ open, onClose }) {
  return (
    <ModalShell open={open} onClose={onClose} labelId="eth-title" maxWidth="840px">
      <div className="doc-meta">
        <span className="chip"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> Última atualização · 2026</span>
        <span className="chip">Documento institucional</span>
      </div>

      <h2 id="eth-title">Código de Ética e Conduta</h2>
      <p className="lede">Este Código consolida os princípios que orientam a atuação da Infocuesta SEC. Existe para fortalecer um ambiente de trabalho respeitoso, relações comerciais justas e uma cultura baseada em integridade, segurança e responsabilidade.</p>
      <div className="callout" style={{marginBottom: 28}}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{color:'var(--accent-2)'}}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="m22 6-10 7L2 6"/></svg>
        <span>Dúvidas, reportes ou sugestões: <a href="mailto:contato@infocuesta.com.br" style={{color:'var(--accent-2)', textDecoration:'underline'}}>contato@infocuesta.com.br</a></span>
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">01</span> Aplicação</h4>
        <p>Este Código se aplica a colaboradores, prestadores de serviço, parceiros e demais pessoas que atuem em nome da Infocuesta SEC ou tenham acesso a informações, ativos e ambientes sob nossa responsabilidade.</p>
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">02</span> Objetivo</h4>
        <p>Definir padrões claros de conduta para apoiar decisões do dia a dia, prevenir conflitos, reduzir riscos e preservar nossa reputação, garantindo coerência com leis, contratos e boas práticas de governança.</p>
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">03</span> Valores e compromissos</h4>
        <ul className="values-list">
          {ETHICS_VALUES.map((v, i) => (
            <li key={i}>
              <span className="v-num">0{i + 1}</span>
              <div>
                <strong>{v.t}</strong>
                <span>{v.d}</span>
              </div>
            </li>
          ))}
        </ul>
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">04</span> Ambiente de trabalho · respeito, diversidade e segurança</h4>
        <p>Mantemos <strong style={{color:'var(--text)'}}>tolerância zero</strong> para discriminação, intimidação, violência, assédio moral ou sexual. Esperamos que todos contribuam para relações profissionais saudáveis e colaborativas.</p>
        <BulletList items={[
          "Respeite diferenças e trate todos com cordialidade e isonomia.",
          "Evite condutas que exponham colegas a constrangimentos ou riscos.",
          "Reporte situações inadequadas por meio dos canais da empresa.",
        ]} />
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">05</span> Conduta profissional esperada</h4>
        <p>Quem atua pela Infocuesta SEC deve:</p>
        <BulletList items={[
          "Cumprir leis, contratos, políticas internas e boas práticas aplicáveis.",
          "Agir com transparência, registrando decisões e evidências quando necessário.",
          "Evitar promessas, declarações e compromissos sem autorização.",
          "Zelar pela qualidade técnica, prazos e confidencialidade acordada.",
        ]} />
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">06</span> Uso de bens, recursos e acessos</h4>
        <p>Recursos físicos e digitais (equipamentos, credenciais, dados, licenças, contas e ambientes) devem ser utilizados <strong style={{color:'var(--text)'}}>exclusivamente para finalidades profissionais</strong>.</p>
        <BulletList items={[
          "Não compartilhe senhas, tokens, chaves, contas ou acessos.",
          "Não copie, distribua ou retenha materiais da empresa sem permissão.",
          "Proteja ativos de clientes, parceiros e fornecedores como se fossem nossos.",
        ]} />
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">07</span> Confidencialidade e proteção de dados</h4>
        <p>Protegemos informações estratégicas e dados pessoais com controles técnicos e administrativos adequados. Todos devem respeitar a confidencialidade, <strong style={{color:'var(--text)'}}>inclusive após o encerramento do vínculo</strong>.</p>
        <BulletList items={[
          "Use informações apenas no limite do necessário (\u201Cneed to know\u201D).",
          "Armazene documentos em locais autorizados e com controle de acesso.",
          "Evite compartilhar dados por canais não aprovados.",
        ]} />
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">08</span> Relação com clientes, fornecedores e concorrentes</h4>
        <p>Buscamos relações comerciais pautadas por ética, qualidade e conformidade. Competimos de forma leal e respeitamos direitos do consumidor e regras de mercado.</p>
        <div className="ethics-rel-grid">
          <div className="ethics-rel">
            <div className="rel-label">Clientes</div>
            <div className="rel-val">Atendimento claro, objetivo e com expectativas alinhadas.</div>
          </div>
          <div className="ethics-rel">
            <div className="rel-label">Fornecedores</div>
            <div className="rel-val">Seleção baseada em qualidade, custo-benefício, integridade e segurança.</div>
          </div>
          <div className="ethics-rel">
            <div className="rel-label">Concorrentes</div>
            <div className="rel-val">Nada de práticas desleais, informações privilegiadas ou manipulação.</div>
          </div>
        </div>
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">09</span> Brindes, presentes e hospitalidades</h4>
        <p>Para evitar influência indevida, brindes e cortesias devem ser moderados e compatíveis com o contexto. <strong style={{color:'var(--text)'}}>Em caso de dúvida, recuse ou consulte a liderança.</strong></p>
        <BulletList items={[
          "Não aceite benefícios que possam afetar decisões ou parecer troca de favores.",
          "Convites e eventos devem ter propósito profissional legítimo e valores razoáveis.",
        ]} />
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">10</span> Anticorrupção e relação com o setor público</h4>
        <p>A Infocuesta SEC <strong style={{color:'var(--text)'}}>não tolera corrupção</strong>, pagamento de facilitação ou qualquer vantagem indevida para obter benefício. Relações com órgãos públicos devem seguir estritamente a lei e a ética.</p>
        <BulletList items={[
          "É proibido oferecer, prometer ou autorizar vantagem indevida a agente público ou terceiros relacionados.",
          "Registre e documente interações relevantes quando aplicável.",
        ]} />
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">11</span> Conflito de interesses</h4>
        <p>Evite situações em que interesses pessoais possam interferir (ou parecer interferir) em decisões profissionais. Em caso de possível conflito, comunique imediatamente a liderança.</p>
        <BulletList items={[
          "Não use cargo, influência ou recursos da empresa para fins particulares.",
          "Não atue em atividades concorrentes sem autorização expressa.",
          "Transparência sempre: comunique vínculos ou relações que possam afetar decisões.",
        ]} />
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">12</span> Comunicação e mídias sociais</h4>
        <p>A comunicação deve ser profissional e responsável. Em redes sociais, evite expor informações internas, clientes, incidentes, projetos e qualquer conteúdo que possa causar danos reputacionais.</p>
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">13</span> Reporte de condutas e não retaliação</h4>
        <p>Incentivamos o reporte de situações suspeitas, violações ou dúvidas. <strong style={{color:'var(--text)'}}>Quem reporta de boa-fé será protegido contra retaliações.</strong> Investigações serão conduzidas com confidencialidade e imparcialidade.</p>
        <div className="callout">
          <Icon.Shield style={{width: 16, height: 16, color:'var(--signal)'}}/>
          <span>Canal de contato: <a href="mailto:contato@infocuesta.com.br" style={{color:'var(--accent-2)', textDecoration:'underline'}}>contato@infocuesta.com.br</a></span>
        </div>
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">14</span> Medidas disciplinares</h4>
        <p>Violações a este Código podem resultar em medidas administrativas, disciplinares e legais cabíveis, considerando gravidade, recorrência, impacto e evidências.</p>
      </div>

      <div className="modal-section">
        <h4><span className="sec-num">15</span> Atualizações</h4>
        <p>Este documento pode ser atualizado para refletir melhorias, mudanças legais e evolução operacional. A versão vigente estará sempre disponível em nossos canais oficiais.</p>
      </div>

      <p style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 12,
        color: 'var(--text-3)',
        marginTop: 28,
        paddingTop: 20,
        borderTop: '1px dashed var(--line)',
        fontStyle: 'italic'
      }}>
        Observação: este documento é orientativo e não substitui políticas específicas, contratos ou legislação aplicável.
      </p>
    </ModalShell>
  );
}