/**
 * @fileoverview React component for Features.jsx
 * 
 * @module pages.HomePage.Features
 */

import { Check, Sparkles, ArrowRight } from "lucide-react";

export default function Features() {
  return (
    <section
      id="features-section"
      className="relative min-h-screen overflow-hidden flex items-center"
    >
      {/* Background com gradiente escuro */}
      <div
        className="absolute inset-0 h-full w-full -z-10"
        style={{
          background: "linear-gradient(135deg, #1f2937 0%, #111827 100%)",
        }}
      ></div>

      {/* Container principal */}
      <div className="mx-auto max-w-7xl px-6 py-12 lg:py-16 lg:px-8 w-full">
        <div className="container mx-auto">
          {/* Header da seção */}
          <div className="flex max-w-3xl flex-col gap-4 mb-6">
            <h2 className="mb-1 font-bold text-white tracking-tight text-3xl sm:text-4xl lg:text-5xl">
              Tudo que você precisa para ensinar e aprender programação
            </h2>
            <p className="font-normal text-gray-300 text-base lg:text-lg">
              Nossa plataforma oferece uma abordagem completa para educadores e
              alunos, combinando programação visual (usando blocos) e jogos
              educativos contextualizados.
            </p>
          </div>

          {/* Container das features */}
          <div className="flex flex-col items-center justify-center">
            {/* SEÇÃO 1: Para Alunos */}
            <div className="w-full max-w-96 lg:max-w-none">
              <div role="none" className="my-6 border-t border-gray-700"></div>
              <div className="mx-auto w-full gap-x-10 lg:grid lg:grid-cols-4">
                <h3 className="mb-3 font-semibold text-white tracking-tight text-xl lg:text-2xl">
                  Para Alunos
                </h3>

                <ul className="col-span-3 grid gap-x-8 gap-y-4 lg:grid-cols-3">
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Programação visual com blocos intuitivos
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Jogos educativos contextualizados
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Feedback imediato e visual
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Sem erros de sintaxe ou barreiras técnicas
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Aprendizado por tentativa e experimentação
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Desenvolvimento da criatividade e autonomia
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Interface amigável e responsiva
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Progressão natural de dificuldade
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Facilidade de uso por meio de Blocos
                  </li>
                </ul>
              </div>
            </div>

            {/* SEÇÃO 2: Para Educadores */}
            <div className="w-full max-w-96 lg:max-w-none">
              <div role="none" className="my-4 border-t border-gray-700"></div>
              <div className="mx-auto w-full gap-x-10 lg:grid lg:grid-cols-4">
                <h3 className="mb-3 font-semibold text-white tracking-tight text-xl lg:text-2xl">
                  Para Educadores
                </h3>

                <ul className="col-span-3 grid gap-x-8 gap-y-4 lg:grid-cols-3">
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Guias pedagógicos completos e práticos
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Estratégias de ensino para sala de aula
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Atividades de computação desplugada
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Planos de aula e preparação facilitada
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Ferramentas de avaliação de aprendizado
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Gestão e organização da sala de aula
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Resolução de problemas e desafios comuns
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Desenvolvimento do pensamento crítico
                  </li>
                  <li className="flex gap-2 font-normal text-gray-300 text-base">
                    <Check
                      className="text-green-400 mr-2 w-5 h-5 flex-shrink-0 mt-0.5"
                      aria-hidden="true"
                    />
                    Aprendizagem colaborativa e inclusiva
                  </li>
                </ul>
              </div>
            </div>
          </div>

          {/* Divider */}
          <div role="none" className="my-6 border-t border-gray-700"></div>

          {/* FAQ Call to Action */}
          <div className="flex flex-col items-center justify-center text-center gap-4">
            <p className="font-normal text-gray-300 text-lg lg:text-xl">
              Ficou com alguma dúvida?
            </p>
            <a
              href="/faq"
              className="inline-flex items-center justify-center gap-x-3 px-6 py-3 text-base md:text-lg font-bold text-white bg-gradient-to-r from-red-600 via-pink-600 to-purple-600 hover:from-red-700 hover:via-pink-700 hover:to-purple-700 rounded-full transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105"
            >
              Consulte nossa FAQ
              <ArrowRight className="w-5 h-5" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}
