portifolio-evandrodevbr/app/components/EngineeringWithAI.tsx

import { Section } from "./Section";

const RESPONSIBILITIES = [
  {
    title: "Quem pode acessar cada dado?",
    description:
      "Login não basta. Permissões precisam ser verificadas no servidor e testadas entre usuários, empresas e perfis diferentes.",
  },
  {
    title: "Como recuperar a operação?",
    description:
      "Ambientes separados, acesso restrito à produção e backups com restauração testada reduzem o impacto de uma alteração errada.",
  },
  {
    title: "Quem valida antes de publicar?",
    description:
      "Código gerado também passa por revisão, testes e avaliação de dependências. O escopo inclui manutenção, custos e riscos de operação.",
  },
];

export default function EngineeringWithAI() {
  return (
    <Section
      id="engineering-ai"
      eyebrow="IA no desenvolvimento"
      title="Se a IA cria um sistema, por que contratar um desenvolvedor?"
      description="A IA permite testar ideias e construir protótipos mesmo sem experiência em programação. Quando o sistema passa a cuidar de clientes, dinheiro ou dados pessoais, alguém precisa avaliar o que foi gerado e validar como ele se comporta fora da demonstração."
      disableChildrenAnimation
    >
      <div className="border-l-2 border-[var(--slash)] pl-sp-5">
        <p className="max-w-[75ch] text-lg leading-8 text-[var(--ink)]">
          Você contrata engenharia para transformar as regras do seu negócio em
          um sistema que possa ser testado, operado e mantido. A IA pode fazer
          parte desse trabalho. Ela não dispensa decisões sobre arquitetura,
          segurança e responsabilidade pelos dados.
        </p>
      </div>

      <div className="mt-sp-8 grid gap-sp-6 md:grid-cols-3">
        {RESPONSIBILITIES.map((item) => (
          <article
            key={item.title}
            className="border-t border-[var(--border)] pt-sp-5"
          >
            <h3 className="text-lg font-semibold leading-snug">{item.title}</h3>
            <p className="ds-copy">{item.description}</p>
          </article>
        ))}
      </div>

      <div className="mt-sp-12">
        <h3 className="ds-card-title">O que casos documentados ensinam</h3>
        <p className="ds-copy max-w-[75ch]">
          São episódios de 2025, não avaliações atuais das plataformas. Eles
          mostram riscos de configuração, permissões e operação; não provam que
          todo sistema feito com IA seja inseguro ou que um profissional elimine
          qualquer risco.
        </p>
        <div className="mt-sp-6 space-y-sp-3">
          <details className="ds-card">
            <summary className="cursor-pointer text-base font-semibold leading-7">
              Dados expostos em aplicações criadas com Lovable
            </summary>
            <div className="mt-sp-4 max-w-[85ch] space-y-sp-3 text-sm leading-7">
              <p>
                Em 29 de maio de 2025, a Semafor noticiou uma análise de Matt
                Palmer e Kody Low: 170 de 1.645 aplicações examinadas permitiam
                acesso indevido a informações, incluindo dados de usuários e
                chaves de API. A reportagem relacionou a exposição à
                configuração de acesso dos bancos conectados às aplicações.
              </p>
              <p>
                O registro CVE-2025-48757 descreve políticas insuficientes de
                acesso por registro no banco. O fornecedor contesta a atribuição
                da vulnerabilidade à plataforma e ressalta a responsabilidade
                dos clientes por seus dados. O relato de exposição não comprova
                roubo por terceiros em todas essas aplicações.
              </p>
              <p>
                <strong>O cuidado técnico:</strong> testar se uma pessoa
                consegue ler ou alterar dados de outra, em vez de considerar a
                tela de login uma prova de segurança.
              </p>
              <div className="flex flex-wrap gap-x-sp-6 gap-y-sp-2">
                <a
                  className="underline underline-offset-4"
                  href="https://www.semafor.com/article/05/29/2025/the-hottest-new-vibe-coding-startup-lovable-is-a-sitting-duck-for-hackers"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Reportagem da Semafor (em inglês)
                </a>
                <a
                  className="underline underline-offset-4"
                  href="https://nvd.nist.gov/vuln/detail/CVE-2025-48757"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Registro e contestação no NVD
                </a>
              </div>
            </div>
          </details>

          <details className="ds-card">
            <summary className="cursor-pointer text-base font-semibold leading-7">
              Replit: um agente apagou dados de uma aplicação
            </summary>
            <div className="mt-sp-4 max-w-[85ch] space-y-sp-3 text-sm leading-7">
              <p>
                Em julho de 2025, Jason Lemkin, cofundador da SaaStr, relatou
                que um agente apagou dados durante a construção de uma
                aplicação. A Replit reconheceu o episódio e informou que o banco
                foi integralmente recuperado por rollback. Naquele projeto,
                alterações de desenvolvimento podiam afetar a produção.
              </p>
              <p>
                A plataforma anunciou separação entre bancos de desenvolvimento
                e produção por padrão. <strong>O cuidado técnico:</strong>{" "}
                limitar permissões de agentes, separar ambientes e testar a
                recuperação antes de depender dela. Neste caso houve exclusão e
                recuperação de dados, não roubo de informações.
              </p>
              <a
                className="inline-block underline underline-offset-4"
                href="https://replit.com/blog/doubling-down-on-our-commitment-to-secure-vibe-coding"
                target="_blank"
                rel="noopener noreferrer"
              >
                Relato e medidas publicadas pela Replit (29/07/2025)
              </a>
            </div>
          </details>

          <details className="ds-card">
            <summary className="cursor-pointer text-base font-semibold leading-7">
              Base44: aplicações privadas com falha de acesso
            </summary>
            <div className="mt-sp-4 max-w-[85ch] space-y-sp-3 text-sm leading-7">
              <p>
                Em julho de 2025, pesquisadores da Wiz demonstraram uma falha
                que permitia acesso não autorizado a aplicações privadas do
                Base44. A falha estava na camada compartilhada de autenticação
                da plataforma, não em um erro comprovado de um usuário
                iniciante.
              </p>
              <p>
                A Wix corrigiu o problema em menos de 24 horas após a
                notificação e informou não ter encontrado evidência de
                exploração maliciosa. <strong>O cuidado técnico:</strong>{" "}
                avaliar também o fornecedor e as permissões efetivas das
                integrações, além do código da aplicação.
              </p>
              <a
                className="inline-block underline underline-offset-4"
                href="https://www.wiz.io/blog/critical-vulnerability-base44"
                target="_blank"
                rel="noopener noreferrer"
              >
                Pesquisa da Wiz e resposta da Wix (29/07/2025)
              </a>
            </div>
          </details>
        </div>
      </div>

      <div className="mt-sp-8 grid gap-sp-6 lg:grid-cols-2">
        <article className="ds-card">
          <h3 className="ds-card-title !mt-0">E a LGPD?</h3>
          <p className="ds-copy">
            Usar IA não afasta as obrigações de proteção de dados. A ANPD exige
            medidas técnicas e administrativas também de agentes de pequeno
            porte e esclarece que as flexibilizações não os isentam das demais
            obrigações da LGPD, como bases legais e direitos dos titulares.
          </p>
          <p className="ds-copy">
            O trabalho técnico inclui controles de acesso, coleta limitada ao
            necessário e rotinas de retenção e exclusão. Conformidade depende
            também dos processos da empresa e de orientação jurídica; contratar
            desenvolvimento não equivale a uma certificação de adequação.
          </p>
          <a
            className="mt-sp-4 inline-block text-sm underline underline-offset-4"
            href="https://www.gov.br/anpd/pt-br/acesso-a-informacao/institucional/atos-normativos/regulamentacoes_anpd/resolucao-cd-anpd-no-2-de-27-de-janeiro-de-2022"
            target="_blank"
            rel="noopener noreferrer"
          >
            ANPD: Resolução nº 2/2022, arts. 6º, 12 e 13
          </a>
        </article>
        <article className="ds-card">
          <h3 className="ds-card-title !mt-0">
            Já começou com IA? Podemos partir daí.
          </h3>
          <p className="ds-copy">
            Seu protótipo ajuda a explicar a ideia. Antes de propor uma
            reconstrução, avalio o que pode ser aproveitado, quais riscos
            precisam de correção e o que falta para atender usuários em
            produção.
          </p>
          <p className="ds-copy">
            Você não precisa saber programar para conduzir o negócio. Precisa
            entender o que está contratando, acompanhar a entrega e ter clareza
            sobre quem cuida de cada parte do sistema.
          </p>
          <a className="ds-link ds-link-accent mt-sp-6" href="/#contact">
            Avaliar meu projeto
          </a>
        </article>
      </div>
    </Section>
  );
}