import Navbar from "../../components/Navbar";
import Footer from "../HomePage/Footer";

const privacyData = [
  {
    id: 1,
    question: "Que dados o Decoda coleta?",
    answer:
      "O Decoda coleta dados anônimos sobre como você usa a plataforma para ajudar na melhoria contínua. Coletamos informações como quais páginas você visita, quanto tempo você passa em cada atividade, seu tipo de navegador e sistema operacional. Não coletamos dados pessoais como nome, email ou outras informações de identificação pessoal sem seu consentimento explícito.",
  },
  {
    id: 2,
    question: "Para que são usados esses dados?",
    answer:
      "Os dados coletados são usados exclusivamente para entender como os estudantes e educadores interagem com a plataforma, permitindo que melhoremos a usabilidade, corrijamos problemas técnicos e desenvolvamos novas funcionalidades mais alinhadas com as necessidades educacionais.",
  },
  {
    id: 3,
    question: "Como funciona o consentimento de cookies?",
    answer:
      "Respeitamos sua privacidade. Ao visitar o Decoda, você verá um aviso informando sobre a coleta de dados. Você pode aceitar ou rejeitar explicitamente. Se rejeitar, nenhum dado será coletado. Você pode mudar sua decisão a qualquer momento através das configurações de privacidade do site.",
  },
  {
    id: 4,
    question: "Meus dados estão seguros?",
    answer:
      "Sim. Todos os dados são transmitidos de forma criptografada (HTTPS) e são completamente anônimos. Nenhum usuário individual pode ser identificado pelos dados coletados. Os dados são agregados e processados com os mais altos padrões de segurança.",
  },
  {
    id: 5,
    question: "O que é armazenado localmente no meu navegador?",
    answer:
      "O Decoda armazena seu progresso localmente no seu navegador (dados como quais atividades você completou, seu código blocos salvos). Esses dados são seus e permanecem no seu dispositivo. Nenhum desses dados pessoais de progresso é enviado para terceiros.",
  },
  {
    id: 6,
    question: "Como funciona o Decoda offline?",
    answer:
      "O Decoda pode funcionar completamente offline através da versão PWA (Progressive Web App) ou desktop (Electron). Quando offline, nenhum dado é coletado ou enviado. O rastreamento de uso só ocorre quando você está conectado à internet.",
  },
  {
    id: 7,
    question: "Como optar por não ser rastreado?",
    answer:
      "Você tem várias opções para optar por não ser rastreado:",
    list: [
      "Rejeitar cookies no aviso ao entrar no site",
      "Usar o navegador em modo incógnito/privado",
      "Desabilitar 'Do Not Track' (DNT) nas configurações do seu navegador",
      "Limpar cookies e dados do navegador regularmente",
    ],
  },
  {
    id: 8,
    question: "Há publicidade no Decoda?",
    answer:
      "Não. O Decoda não possui publicidade. A plataforma é financiada para servir educadores e estudantes de forma gratuita, sem modelos baseados em publicidade ou venda de dados.",
  },
  {
    id: 9,
    question: "É preciso criar uma conta?",
    answer:
      "Não é necessário. O Decoda funciona sem cadastro ou login. Todo seu progresso é salvo localmente no seu navegador, mantendo a máxima privacidade e simplicidade.",
  },
  {
    id: 10,
    question: "Com quanto tempo os dados são deletados?",
    answer:
      "Os dados agregados são mantidos por um período padrão para análise de tendências. Você pode limpar todos os dados em qualquer momento nas configurações de privacidade do seu navegador ou através do aviso de cookies no Decoda.",
  },
  {
    id: 11,
    question: "Posso compartilhar meus dados de atividade?",
    answer:
      "Seu progresso é mantido privado no seu dispositivo. Se você deseja compartilhar, você pode exportar ou descrever manualmente seus resultados. Nenhum dado é compartilhado automaticamente sem seu consentimento explícito.",
  },
  {
    id: 12,
    question: "Alterações nesta Política",
    answer:
      "Podemos atualizar esta Política de Privacidade ocasionalmente para refletir melhorias na plataforma ou mudanças legais. Recomendamos revisar esta página periodicamente para estar informado sobre qualquer mudança.",
  },
];

export function PrivacyPolicy() {
  return (
    <>
      {/* Navegação */}
      <Navbar />

      <section className="mt-32 lg:mt-[195px] bg-gray-100 px-10 md:px-0">
        {/* Container principal */}
        <div className="mx-auto max-w-7xl py-24 sm:py-32 lg:py-40">
          <div className="mx-auto max-w-4xl">
            <h2 className="font-bold text-gray-900 tracking-tight text-4xl sm:text-5xl">
              Política de Privacidade
            </h2>

            <p className="mt-6 text-gray-700 text-base leading-relaxed">
              O Decoda é compromissado com a privacidade e transparência. Esta página
              explica como coletamos e usamos dados, e como você pode controlar suas
              preferências de privacidade.
            </p>

            <dl className="mt-10 space-y-4 divide-y divide-gray-300">
              {privacyData.map((item, index) => (
                <div
                  key={item.id}
                  className={index === 0 ? "pt-3 pb-6" : "pt-4 pb-6"}
                >
                  <input
                    type="checkbox"
                    id={`privacy-toggle-${item.id}`}
                    className="peer hidden"
                  />
                  <label
                    htmlFor={`privacy-toggle-${item.id}`}
                    className="flex w-full items-start justify-between text-left cursor-pointer"
                  >
                    <span className="font-semibold text-gray-900 tracking-tight text-base">
                      {item.question}
                    </span>
                    <span className="ml-6 flex h-7 items-center text-blue-600">
                      <svg
                        className="size-6 peer-checked:hidden"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        aria-hidden="true"
                        width="16"
                        height="16"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M12 6v12m6-6H6"
                        />
                      </svg>
                      <svg
                        className="hidden size-6 peer-checked:block"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        aria-hidden="true"
                        width="16"
                        height="16"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M18 12H6"
                        />
                      </svg>
                    </span>
                  </label>
                  <dd className="pr-12 max-h-0 overflow-hidden peer-checked:max-h-[1000px] peer-checked:pt-6 transition-all duration-300">
                    <p className="font-normal text-gray-700 text-base">
                      {item.answer}
                    </p>
                    {item.list && (
                      <ul className="list-disc list-inside space-y-1 text-gray-700 text-base mt-2">
                        {item.list.map((listItem, idx) => (
                          <li key={idx}>{listItem}</li>
                        ))}
                      </ul>
                    )}
                  </dd>
                </div>
              ))}
            </dl>

            <div className="mt-12 pt-8 border-t border-gray-300">
              <p className="text-gray-600 text-sm">
                <strong>Última atualização:</strong> {new Date().toLocaleDateString('pt-BR')}
              </p>
              <p className="text-gray-600 text-sm mt-4">
                Se você tiver dúvidas sobre nossa Política de Privacidade, entre em contato conosco.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <Footer />
    </>
  );
}
