// ============================================================
// AgenticX — Central Legal (Legal / Privacidade / Termos / LGPD / Segurança)
// Renderizada via hash-route dentro do mesmo HTML.
// Conteúdo: base editorial — revisar juridicamente antes de publicar.
// ============================================================

// PLACEHOLDERS a confirmar com o cliente:
const LEGAL_CONTACT = 'contato@agenticx.com.br';
const PRIVACY_CONTACT = 'privacidade@agenticx.com.br';
const SECURITY_CONTACT = 'seguranca@agenticx.com.br';
const LEGAL_UPDATED = 'Junho de 2026';

const LEGAL_DOCS = [
  {
    id: 'legal',
    hash: 'legal',
    label: 'Legal',
    title: 'Central Legal',
    objective: 'Informações legais e documentos de uso da plataforma.',
    body: [
      'Nesta página você encontra as informações legais relacionadas ao uso da nossa plataforma de IA, incluindo políticas, termos, avisos e canais de contato. Nosso objetivo é manter regras claras, linguagem simples e transparência sobre como o serviço funciona.',
      'Os documentos podem ser atualizados para refletir melhorias no produto, mudanças legais ou novas funcionalidades. Quando houver alteração relevante, poderemos comunicar os usuários pelos canais disponíveis.',
    ],
    finalCall: { label: 'Dúvidas legais ou institucionais?', email: LEGAL_CONTACT, prefix: 'Entre em contato pelo canal indicado no site.' },
    isHub: true,
  },
  {
    id: 'privacidade',
    hash: 'privacidade',
    label: 'Privacidade',
    title: 'Política de Privacidade',
    objective: 'Como coletamos, usamos e protegemos dados pessoais.',
    body: [
      'Respeitamos a privacidade dos usuários e tratamos dados pessoais apenas para operar, melhorar e proteger nossos serviços. Podemos coletar informações fornecidas diretamente pelo usuário, dados de uso da plataforma e informações necessárias para atendimento, suporte e segurança.',
      'Não vendemos dados pessoais. O compartilhamento de dados ocorre apenas quando necessário para prestação do serviço, cumprimento legal, prevenção de fraudes ou uso de fornecedores essenciais, sempre com medidas adequadas de proteção.',
    ],
    finalCall: { label: 'Solicitações sobre privacidade', email: PRIVACY_CONTACT, prefix: 'Fale conosco pelo canal de atendimento ou pelo e-mail de privacidade.' },
  },
  {
    id: 'termos',
    hash: 'termos',
    label: 'Termos',
    title: 'Termos de Uso',
    objective: 'Regras de uso, responsabilidades e condições da plataforma.',
    body: [
      'Ao acessar ou usar a plataforma, o usuário concorda em utilizar o serviço de forma lícita, responsável e de acordo com estes termos. A plataforma pode incluir recursos de IA, automações, integrações e canais de atendimento, conforme o plano contratado.',
      'O usuário é responsável pelas informações inseridas, pelas integrações configuradas e pelo uso adequado das respostas geradas por IA. A tecnologia apoia processos e decisões, mas não substitui validação humana quando houver impacto operacional, jurídico, financeiro ou sensível.',
    ],
    finalCall: { label: 'Atualizações', prefix: 'Consulte estes termos periodicamente para acompanhar atualizações.' },
  },
  {
    id: 'lgpd',
    hash: 'lgpd',
    label: 'LGPD',
    title: 'LGPD — Proteção de Dados',
    objective: 'Direitos dos titulares e canal para solicitações sobre dados.',
    body: [
      'Atuamos em conformidade com a Lei Geral de Proteção de Dados Pessoais (LGPD), adotando práticas para proteger dados pessoais e respeitar os direitos dos titulares. O titular pode solicitar acesso, correção, confirmação de tratamento, portabilidade, anonimização, bloqueio ou eliminação de dados, conforme aplicável.',
      'Quando tratamos dados em nome de clientes, seguimos as instruções contratuais e aplicamos medidas de segurança, confidencialidade e governança. Solicitações relacionadas à LGPD serão avaliadas conforme a legislação, a natureza do dado e a relação com o serviço contratado.',
    ],
    finalCall: { label: 'Exercer seus direitos', email: PRIVACY_CONTACT, prefix: 'Envie uma solicitação pelo canal de privacidade informado pela empresa.' },
  },
  {
    id: 'seguranca',
    hash: 'seguranca',
    label: 'Segurança',
    title: 'Segurança da Informação',
    objective: 'Medidas para proteger dados, acessos e integrações.',
    body: [
      'Adotamos medidas técnicas e organizacionais para proteger dados, acessos e integrações, incluindo controle de acesso, uso de credenciais, monitoramento, backups, segregação de ambientes e boas práticas de infraestrutura.',
      'Embora nenhum ambiente digital seja isento de riscos, trabalhamos para reduzir vulnerabilidades, limitar acessos desnecessários e responder a incidentes de forma responsável. Também recomendamos que os usuários protejam suas credenciais, utilizem senhas fortes e restrinjam permissões conforme a necessidade.',
    ],
    finalCall: { label: 'Comunicar vulnerabilidades ou incidentes', email: SECURITY_CONTACT, prefix: 'Utilize o canal de segurança informado no site.' },
  },
];

const LEGAL_HASHES = LEGAL_DOCS.map((d) => d.hash);

// ---------- Legal page ----------
const LegalPage = ({ activeHash }) => {
  const active = (activeHash || 'legal').replace('#', '');
  const doc = LEGAL_DOCS.find((d) => d.hash === active) || LEGAL_DOCS[0];

  return (
    <main id="legal" data-screen-label="Central Legal" className="pt-16 sm:pt-20 pb-24">
      <Container>
        <div className="max-w-2xl">
          <Eyebrow>Central Legal</Eyebrow>
          <h1 className="mt-5 text-4xl sm:text-5xl lg:text-[3.5rem] lg:leading-[1.05] font-medium text-black">
            Transparência e <span className="font-em text-forest">regras claras</span>
          </h1>
          <p className="mt-6 text-base sm:text-lg text-slate leading-relaxed">
            Tudo o que rege o uso da nossa plataforma de IA, em linguagem simples: políticas, termos e como protegemos seus dados.
          </p>
        </div>

        <div className="mt-14 grid lg:grid-cols-[16rem_1fr] gap-10 lg:gap-16">
          {/* Sidebar nav */}
          <aside className="lg:sticky lg:top-24 self-start">
            <nav className="flex flex-row flex-wrap lg:flex-col gap-2">
              {LEGAL_DOCS.map((d) => {
                const on = d.hash === active;
                return (
                  <a key={d.id} href={`#${d.hash}`}
                     className={`block rounded-xl px-4 py-3 text-sm font-medium transition-colors ${on ? 'bg-forest text-white' : 'text-slate hover:bg-sage hover:text-forest'}`}>
                    {d.label}
                  </a>
                );
              })}
            </nav>
          </aside>

          {/* Content */}
          <article key={doc.id} className="fade-in-img max-w-2xl">
            <p className="text-xs font-semibold uppercase tracking-wide text-teal">{doc.label}</p>
            <h2 className="mt-2 text-3xl sm:text-4xl font-medium text-black leading-[1.1]">{doc.title}</h2>
            <p className="mt-3 text-slate">{doc.objective}</p>

            {/* Hub: list of docs */}
            {doc.isHub && (
              <div className="mt-8 grid sm:grid-cols-2 gap-3">
                {LEGAL_DOCS.filter((d) => !d.isHub).map((d) => (
                  <a key={d.id} href={`#${d.hash}`}
                     className="group flex items-start justify-between gap-4 rounded-2xl border border-line p-5 hover:border-forest transition-colors">
                    <span>
                      <span className="block text-base font-medium text-black">{d.label}</span>
                      <span className="mt-1 block text-sm text-slate leading-snug">{d.objective}</span>
                    </span>
                    <span className="mt-1 shrink-0 text-forest opacity-0 group-hover:opacity-100 transition-opacity"><IArrow size={14}/></span>
                  </a>
                ))}
              </div>
            )}

            <div className="mt-7 space-y-5">
              {doc.body.map((p, i) => (
                <p key={i} className="text-base text-black/80 leading-relaxed">{p}</p>
              ))}
            </div>

            {/* Final call */}
            <div className="mt-8 rounded-2xl bg-sage/60 border border-line p-6">
              <p className="text-sm font-semibold text-black">{doc.finalCall.label}</p>
              <p className="mt-1.5 text-sm text-slate leading-relaxed">
                {doc.finalCall.prefix}
                {doc.finalCall.email && (
                  <> <a href={`mailto:${doc.finalCall.email}`} className="text-forest underline underline-offset-2">{doc.finalCall.email}</a></>
                )}
              </p>
            </div>

            <p className="mt-8 text-xs text-slate">Última atualização: {LEGAL_UPDATED}</p>
          </article>
        </div>
      </Container>
    </main>
  );
};

Object.assign(window, { LEGAL_DOCS, LEGAL_HASHES, LegalPage });