/**
 * @fileoverview React component for Faq.jsx
 * 
 * @module pages.Faq.Faq
 */

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

const faqData = [
  {
    id: 1,
    question: "O que é o Decoda?",
    answer:
      "O Decoda é uma plataforma educacional de programação visual desenvolvida especialmente para o ensino de lógica de programação. Utilizamos blocos visuais arrastar-e-soltar baseados no Google Blockly, eliminando a barreira da sintaxe complexa e focando no raciocínio lógico através de jogos educativos contextualizados.",
  },
  {
    id: 2,
    question: "Por que usar programação com blocos ao invés de código texto?",
    answer:
      'Os blocos visuais eliminam erros de sintaxe (não há como "escrever errado"), permitem foco total na lógica de programação, são intuitivos e acessíveis para todas as idades, e oferecem feedback visual imediato. Os blocos só encaixam onde fazem sentido logicamente, permitindo que estudantes se concentrem em resolver problemas ao invés de decorar sintaxe.',
  },
  {
    id: 3,
    question: "A plataforma é gratuita?",
    answer:
      "Sim! O Decoda é 100% gratuito. Não requer cadastro, instalação ou pagamento. Todos as atividades, recursos pedagógicos e documentação estão disponíveis gratuitamente para educadores e alunos. Acreditamos que a educação em programação deve ser acessível a todos.",
  },
  {
    id: 4,
    question: "O que é Computação Desplugada?",
    answer:
      "É uma metodologia que ensina conceitos de programação e pensamento computacional sem usar computadores, através de atividades práticas, jogos e brincadeiras. Nossa documentação oferece diversas atividades desplugadas que educadores podem aplicar antes de usar a plataforma digital, facilitando o entendimento dos conceitos e reduzindo a ansiedade tecnológica.",
  },
  {
    id: 5,
    question: "Quais conceitos de programação são ensinados?",
    answer:
      "Baseamos nosso ensino nos 4 fundamentos da programação e nos pilares do pensamento computacional:",
    list: [
      { title: "Sequências", description: "Ordem lógica de comandos" },
      { title: "Condicionais", description: "Decisões SE/ENTÃO" },
      { title: "Repetição", description: "Estruturas de repetição" },
      { title: "Funções", description: "Agrupamento e reutilização" },
      { title: "Variáveis", description: "Armazenamento de dados" },
      { title: "Eventos", description: "Interações do usuário" },
    ],
  },
  {
    id: 6,
    question: "Preciso instalar algum programa?",
    answer:
      "Não! O Decoda é uma plataforma web que funciona diretamente no navegador. Basta acessar o site e começar a programar. Não requer instalação, downloads ou configurações complexas. Funciona em computadores, tablets e smartphones com qualquer navegador moderno.",
  },
  {
    id: 7,
    question: "A plataforma oferece recursos para educadores?",
    answer: "Sim! Oferecemos documentação completa para educadores com:",
    list: [
      "Guias pedagógicos detalhados",
      "Estratégias de ensino para sala de aula",
      "Planos de aula prontos",
      "Atividades de computação desplugada",
      "Ferramentas de avaliação de aprendizado",
      "Dicas de gestão e organização da sala",
      "Resolução de problemas comuns",
    ],
  },
  {
    id: 8,
    question: "Meu progresso é salvo automaticamente?",
    answer:
      "Sim! O Decoda salva automaticamente seu progresso no navegador. Você pode fechar a aba e voltar depois que seu trabalho estará preservado. Isso funciona sem necessidade de cadastro ou login, mantendo a privacidade e simplicidade da plataforma.",
  },
  {
    id: 9,
    question: "Posso usar o Decoda em sala de aula?",
    answer:
      "Absolutamente! O Decoda foi desenvolvido especificamente para uso educacional em sala de aula. A plataforma promove aprendizagem colaborativa, discussão coletiva de estratégias e desenvolvimento do pensamento crítico. Não requer cadastro de alunos, facilitando a adoção em ambientes escolares.",
  },
  {
    id: 10,
    question: "A plataforma funciona em dispositivos móveis?",
    answer:
      "Sim! O Decoda possui design responsivo e funciona em tablets e smartphones. A interface se adapta automaticamente ao tamanho da tela, permitindo programação por toque em dispositivos móveis. Recomendamos tablets para uma experiência mais confortável, mas smartphones também são suportados.",
  },
];

export default function Faq() {
  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">
              Perguntas Frequentes
            </h2>

            <dl className="mt-10 space-y-4 divide-y divide-gray-300">
              {faqData.map((faq, index) => (
                <div
                  key={faq.id}
                  className={index === 0 ? "pt-3 pb-6" : "pt-4 pb-6"}
                >
                  <input
                    type="checkbox"
                    id={`faq-toggle-${faq.id}`}
                    className="peer hidden"
                  />
                  <label
                    htmlFor={`faq-toggle-${faq.id}`}
                    className="flex w-full items-start justify-between text-left cursor-pointer"
                  >
                    <span className="font-semibold text-gray-900 tracking-tight text-base">
                      {faq.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">
                      {faq.answer}
                    </p>
                    {faq.list && (
                      <ul className="list-disc list-inside space-y-1 text-gray-700 text-base mt-2">
                        {faq.list.map((item, idx) => (
                          <li key={idx}>
                            {typeof item === "string" ? (
                              item
                            ) : (
                              <>
                                <strong>{item.title}:</strong>{" "}
                                {item.description}
                              </>
                            )}
                          </li>
                        ))}
                      </ul>
                    )}
                  </dd>
                </div>
              ))}
            </dl>

            <div className="mt-12 pt-8 border-t border-gray-300">
              <p className="text-gray-600 text-sm">
                Dúvidas sobre privacidade e como coletamos dados?
                {" "}
                <a
                  href="#/privacy-policy"
                  className="text-blue-600 hover:text-blue-700 font-semibold"
                >
                  Leia nossa Política de Privacidade
                </a>
              </p>
            </div>
          </div>
        </div>
      </section>

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