/* global React, FramerMotion */
/* Página /privacidade — Política de Privacidade */
const { Navbar: NBpv, Footer: FTpv } = window;

/* Shared section wrapper */
function Sec({ n, title, children }) {
  return (
    <div style={{ marginTop: "2.5rem", paddingTop: "2rem", borderTop: "1px solid rgba(247,248,255,0.06)" }}>
      <h2 style={{ color: "#F7F8FF", fontSize: "1.1rem", fontWeight: 600, lineHeight: 1.3, marginBottom: "0.75rem" }}>
        <span style={{ color: "#FF6B73", marginRight: "0.5rem", fontVariantNumeric: "tabular-nums" }}>{n}.</span>
        {title}
      </h2>
      {children}
    </div>
  );
}

const P = ({ children, style }) => (
  <p style={{ color: "rgba(247,248,255,0.65)", fontSize: "0.9375rem", lineHeight: 1.7, marginTop: "0.75rem", ...style }}>{children}</p>
);

const UL = ({ items }) => (
  <ul style={{ marginTop: "0.75rem", paddingLeft: "1.25rem", listStyleType: "disc", color: "rgba(247,248,255,0.65)", fontSize: "0.9375rem", lineHeight: 1.7, display: "flex", flexDirection: "column", gap: "0.4rem" }}>
    {items.map((it, i) => <li key={i} dangerouslySetInnerHTML={{ __html: it }} />)}
  </ul>
);

const H3 = ({ children }) => (
  <h3 style={{ color: "rgba(247,248,255,0.85)", fontSize: "0.9375rem", fontWeight: 600, marginTop: "1.5rem", marginBottom: "0.25rem" }}>{children}</h3>
);

const A = ({ href, children }) => (
  <a href={href} style={{ color: "#FF6B73", textDecoration: "none" }}
    onMouseOver={e => e.target.style.textDecoration = "underline"}
    onMouseOut={e => e.target.style.textDecoration = "none"}>
    {children}
  </a>
);

function PrivacyPage() {
  return (
    <>
      <NBpv />
      <main style={{ minHeight: "100vh", background: "#070B1F" }}>
        <div style={{ maxWidth: "720px", margin: "0 auto", padding: "7rem 1.25rem 5rem" }}>

          <div style={{ marginBottom: "2.5rem" }}>
            <div className="eyebrow-orange" style={{ marginBottom: "1rem" }}>Legal</div>
            <h1 style={{ color: "#F7F8FF", fontSize: "clamp(1.875rem,5vw,3rem)", fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1.1, marginBottom: "0.75rem" }}>
              Política de Privacidade
            </h1>
            <p style={{ color: "rgba(247,248,255,0.35)", fontSize: "0.8125rem" }}>
              Última actualização: 10 de Junho de 2026
            </p>
          </div>

          <P>
            O Captixy (captixy.com) é uma plataforma de qualificação de leads com assistente virtual de
            inteligência artificial, operada por João Rodrigues. Nesta política explicamos que dados pessoais
            tratamos, com que finalidade, durante quanto tempo, e quais os teus direitos.
          </P>

          <Sec n="1" title="Quem somos">
            <P><strong style={{ color: "rgba(247,248,255,0.85)" }}>João Rodrigues</strong></P>
            <P>Email para questões de privacidade: <A href="mailto:contact@captixy.com">contact@captixy.com</A></P>
            <P>Portugal</P>
          </Sec>

          <Sec n="2" title="A quem se aplica esta política">
            <P>Esta política aplica-se a três tipos de pessoas:</P>
            <UL items={[
              "<strong>Visitantes</strong> do site captixy.com;",
              "<strong>Clientes</strong> — negócios e profissionais que criam conta e utilizam a plataforma Captixy;",
              "<strong>Leads</strong> — pessoas que interagem com a assistente virtual de um Cliente, através de um link, QR code ou widget do Captixy.",
            ]} />
          </Sec>

          <Sec n="3" title="Dados dos Clientes (negócios que usam o Captixy)">
            <H3>Que dados recolhemos</H3>
            <UL items={[
              "Nome e apelido;",
              "Email e telefone;",
              "Nome e dados do negócio (tipo de actividade, contexto fornecido para configurar a assistente);",
              "Dados de utilização da plataforma (configurações, estatísticas de uso);",
              "Dados de facturação e pagamento, quando aplicável (não armazenamos números de cartão).",
            ]} />
            <H3>Finalidade e base legal</H3>
            <UL items={[
              "<strong>Prestação do serviço</strong> (execução de contrato): criação e gestão da conta, funcionamento da plataforma, suporte;",
              "<strong>Comunicações de serviço</strong> (execução de contrato): avisos sobre a conta, alterações, notificações de leads;",
              "<strong>Melhoria do produto</strong> (interesse legítimo): análise de utilização de forma agregada;",
              "<strong>Obrigações legais</strong>: facturação e registos exigidos por lei, quando aplicável.",
            ]} />
            <H3>Quanto tempo guardamos</H3>
            <P>Durante a vigência da conta. Após o encerramento, os dados são apagados no prazo de 30 dias, excepto os que devamos conservar por obrigação legal.</P>
          </Sec>

          <Sec n="4" title="Dados dos Leads (contactos dos nossos Clientes)">
            <H3>O papel do Captixy</H3>
            <P>Quando interages com a assistente virtual de um negócio, os teus dados são recolhidos <strong style={{ color: "rgba(247,248,255,0.85)" }}>em nome desse negócio</strong>.</P>
            <P>Para efeitos do RGPD: o <strong style={{ color: "rgba(247,248,255,0.85)" }}>negócio</strong> com quem comunicaste é o <strong style={{ color: "rgba(247,248,255,0.85)" }}>Responsável pelo Tratamento</strong>; o <strong style={{ color: "rgba(247,248,255,0.85)" }}>Captixy</strong> actua como <strong style={{ color: "rgba(247,248,255,0.85)" }}>Subcontratante</strong>.</P>
            <H3>Que dados são recolhidos</H3>
            <UL items={["Nome;", "Contacto (telefone e/ou email);", "Respostas às perguntas feitas pela assistente;", "Histórico da conversa;", "Marcações de horário, quando aplicável."]} />
            <H3>Finalidade</H3>
            <P>Permitir que o negócio te contacte. O Captixy <strong style={{ color: "rgba(247,248,255,0.85)" }}>não utiliza os teus dados para fins próprios</strong>, não te envia comunicações, e não partilha os teus dados com outros negócios.</P>
            <H3>Transparência sobre a IA</H3>
            <P>A assistente é um sistema de inteligência artificial, identificado como tal no início de cada conversa. As tuas mensagens são processadas por um fornecedor de modelos de linguagem para gerar as respostas da assistente.</P>
            <H3>Os teus direitos como lead</H3>
            <P>Podes exercer os teus direitos (acesso, rectificação, apagamento, oposição) junto do negócio com quem comunicaste, ou contactando-nos em <A href="mailto:contact@captixy.com">contact@captixy.com</A> — encaminharemos o pedido.</P>
          </Sec>

          <Sec n="5" title="Dados dos Visitantes do Site">
            <P>O site captixy.com pode recolher dados técnicos básicos (endereço IP, tipo de browser, páginas visitadas) para fins de segurança e estatística, através de cookies ou tecnologias semelhantes.</P>
          </Sec>

          <Sec n="6" title="Subcontratantes e Transferências Internacionais">
            <P>Para prestar o serviço, o Captixy utiliza fornecedores técnicos que podem tratar dados pessoais por nossa conta:</P>
            <div style={{ marginTop: "1rem", overflowX: "auto" }}>
              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.875rem" }}>
                <thead>
                  <tr style={{ borderBottom: "1px solid rgba(247,248,255,0.1)" }}>
                    {["Fornecedor", "Função", "Localização"].map((h) => (
                      <th key={h} style={{ textAlign: "left", padding: "0.5rem 0.75rem", color: "rgba(247,248,255,0.45)", fontWeight: 500 }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {[
                    ["Supabase", "Base de dados e autenticação", "União Europeia"],
                    ["Railway", "Alojamento do backend", "EUA"],
                    ["Vercel", "Alojamento do frontend", "Rede global"],
                    ["OpenAI", "Processamento de linguagem natural", "EUA"],
                    ["Resend", "Envio de emails transaccionais", "EUA"],
                  ].map(([n, f, l], i) => (
                    <tr key={i} style={{ borderBottom: "1px solid rgba(247,248,255,0.05)" }}>
                      <td style={{ padding: "0.5rem 0.75rem", color: "rgba(247,248,255,0.75)", fontWeight: 500 }}>{n}</td>
                      <td style={{ padding: "0.5rem 0.75rem", color: "rgba(247,248,255,0.55)" }}>{f}</td>
                      <td style={{ padding: "0.5rem 0.75rem", color: "rgba(247,248,255,0.55)" }}>{l}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <P>As transferências para fora do EEE assentam em mecanismos legais adequados (Cláusulas Contratuais-Tipo e/ou decisões de adequação da Comissão Europeia).</P>
          </Sec>

          <Sec n="7" title="Segurança">
            <UL items={[
              "Isolamento de dados entre contas (multi-tenant com Row Level Security);",
              "Encriptação em trânsito (HTTPS/TLS);",
              "Controlo de acessos e autenticação;",
              "Cópias de segurança regulares.",
            ]} />
            <P>Comprometemo-nos a notificar os afectados e as autoridades competentes em caso de violação de dados.</P>
          </Sec>

          <Sec n="8" title="Os Teus Direitos (RGPD)">
            <UL items={[
              "<strong>Acesso</strong> aos teus dados pessoais;",
              "<strong>Rectificação</strong> de dados incorrectos;",
              "<strong>Apagamento</strong> dos teus dados;",
              "<strong>Limitação</strong> ou <strong>oposição</strong> ao tratamento;",
              "<strong>Portabilidade</strong> dos dados;",
              "<strong>Retirada do consentimento</strong> a qualquer momento.",
            ]} />
            <P>Para exercer qualquer direito: <A href="mailto:contact@captixy.com">contact@captixy.com</A>. Respondemos no prazo máximo de um mês.</P>
            <P>Tens também o direito de apresentar reclamação à <strong style={{ color: "rgba(247,248,255,0.85)" }}>CNPD — Comissão Nacional de Proteção de Dados</strong> (<A href="https://www.cnpd.pt" target="_blank" rel="noopener noreferrer">www.cnpd.pt</A>).</P>
          </Sec>

          <Sec n="9" title="Menores">
            <P>O Captixy não se destina a menores de 16 anos e não recolhemos dados de menores conscientemente. Contacta-nos se souberes de um caso.</P>
          </Sec>

          <Sec n="10" title="Alterações a esta Política">
            <P>Podemos actualizar esta política periodicamente. A data no topo reflecte a versão em vigor. Alterações relevantes serão comunicadas aos Clientes por email.</P>
          </Sec>

          <Sec n="11" title="Contacto">
            <P>Para qualquer questão sobre privacidade: <A href="mailto:contact@captixy.com">contact@captixy.com</A></P>
            <P style={{ marginTop: "0.25rem" }}>Captixy · captixy.com · João Rodrigues</P>
          </Sec>

          <div style={{ marginTop: "3rem", paddingTop: "2rem", borderTop: "1px solid rgba(247,248,255,0.06)", display: "flex", gap: "1rem", flexWrap: "wrap" }}>
            <a href="/termos" style={{ fontSize: "0.875rem", color: "rgba(247,248,255,0.45)" }}
              onMouseOver={e => e.target.style.color = "#F7F8FF"}
              onMouseOut={e => e.target.style.color = "rgba(247,248,255,0.45)"}>
              Termos de Utilização →
            </a>
            <a href="/" style={{ fontSize: "0.875rem", color: "rgba(247,248,255,0.45)" }}
              onMouseOver={e => e.target.style.color = "#F7F8FF"}
              onMouseOut={e => e.target.style.color = "rgba(247,248,255,0.45)"}>
              ← Captixy
            </a>
          </div>
        </div>
      </main>
      <FTpv />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PrivacyPage />);