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

import Navbar from "../../components/Navbar";
import Footer from "../HomePage/Footer";
import educadoresImg from "./assets/educadores.png";
import { Workflow, BookOpen, Gift, Users } from "lucide-react";

const stepsData = [
  {
    id: 1,
    title: "Explore a Plataforma",
    description:
      "Navegue pelas atividades. Teste você mesmo para entender a experiência dos alunos.",
  },
  {
    id: 2,
    title: "Acesse a Documentação",
    description:
      "Consulte nossos guias pedagógicos completos com planos de aula, estratégias de ensino e atividades desplugadas.",
  },
  {
    id: 3,
    title: "Prepare sua Aula",
    description:
      "Escolha as atividades adequadas ao nível da turma e planeje a sequência didática usando nossos recursos.",
  },
  {
    id: 4,
    title: "Ensine e Inspire",
    description:
      "Aplique em sala de aula, acompanhe o progresso dos alunos e ajuste conforme necessário. Sua turma vai adorar!",
  },
];

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

      <section className="relative mt-32 lg:mt-[195px] bg-gray-100">
        <div className="max-w-6xl mx-auto px-4 sm:px-6">
          <div className="py-12 md:py-20">
            {/* Título Principal */}
            <div className="max-w-3xl mx-auto text-center pb-12 md:pb-16 pt-8 md:pt-12">
              <h2 className="font-bold text-gray-900 tracking-tight text-4xl sm:text-5xl">
                Seja um Educador Popular de Tecnologia
              </h2>
              <p className="mt-6 text-lg text-gray-700">
                Saiba como utilizar o Decoda para transformar suas aulas de
                programação em experiências envolventes e eficazes.
              </p>
            </div>

            <div className="flex justify-center pb-12 md:pb-16">
              <div className="relative flex-1 overflow-hidden justify-center items-center max-w-4xl">
                <div className="w-full h-[400px] md:h-[500px]">
                  <img
                    src={educadoresImg}
                    alt="Educadores ensinando programação"
                    className="w-full h-full object-cover rounded-lg shadow-2xl"
                  />
                </div>
              </div>
            </div>

            <div className="relative pb-12">
              <div
                className="hidden lg:block absolute top-4 left-32 right-32 mt-px h-0.5 bg-gradient-to-r from-red-300 via-pink-300 to-purple-300 -z-10"
                aria-hidden="true"
              ></div>

              <div className="max-w-sm mx-auto grid gap-12 sm:grid-cols-2 sm:max-w-3xl lg:grid-cols-4 lg:max-w-none items-start">
                {stepsData.map((step) => (
                  <div key={step.id} className="text-center">
                    <div className="w-9 h-9 bg-brand-500 text-white text-[15px] font-bold rounded-full inline-flex items-center justify-center mb-3 shadow-lg">
                      {step.id}
                    </div>
                    <h3 className="font-semibold text-gray-900 tracking-tight text-lg mt-3">
                      {step.title}
                    </h3>
                    <div className="font-normal text-gray-700 text-base mt-3">
                      {step.description}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* CTA Button */}
            <div className="flex justify-center">
              <a
                href="/docs/"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center bg-brand-500 text-white gap-x-3 px-6 py-3 text-lg rounded-[16px] transition-all duration-300 shadow-lg hover:shadow-xl font-bold transform hover:scale-105"
              >
                Acesse o material para Educadores
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="w-5 h-5"
                  viewBox="0 0 24 24"
                >
                  <path
                    fill="currentColor"
                    d="M17.079 12.5H5.5q-.213 0-.357-.143T5 12t.143-.357t.357-.143h11.579L11.64 6.062q-.147-.146-.153-.345t.158-.363q.165-.16.354-.163q.189-.002.354.163l6.08 6.08q.131.132.184.268q.053.137.053.298t-.053.298q-.052.137-.183.268l-6.081 6.08q-.14.14-.341.15q-.202.01-.367-.15q-.165-.165-.165-.356q0-.192.165-.357z"
                  />
                </svg>
              </a>
            </div>

            {/* Seção de Benefícios Extras */}
            <div className="max-w-3xl mx-auto mt-20">
              <h3 className="font-bold text-brand-500 tracking-tight text-3xl text-center mb-8">
                Por que escolher o Decoda?
              </h3>
              <div className="grid gap-6 sm:grid-cols-2">
                <div className="bg-white/70 backdrop-blur-sm p-6 rounded-lg shadow-md border border-pink-100 hover:shadow-xl transition-shadow duration-300">
                  <div className="flex items-center gap-3 mb-2">
                    <div className="p-2 rounded-lg bg-gradient-to-r from-red-100 to-pink-100">
                      <Workflow className="w-6 h-6 text-red-600" />
                    </div>
                    <h4 className="font-semibold text-gray-900 text-lg">
                      Atividades pensadas para o Contexto
                    </h4>
                  </div>
                  <p className="text-gray-700 text-base">
                    Aprenda programação através de desafios divertidos e
                    contextualizados que mantêm os alunos motivados.
                  </p>
                </div>
                <div className="bg-white/70 backdrop-blur-sm p-6 rounded-lg shadow-md border border-pink-100 hover:shadow-xl transition-shadow duration-300">
                  <div className="flex items-center gap-3 mb-2">
                    <div className="p-2 rounded-lg bg-gradient-to-r from-pink-100 to-purple-100">
                      <BookOpen className="w-6 h-6 text-pink-600" />
                    </div>
                    <h4 className="font-semibold text-gray-900 text-lg">
                      Material Pedagógico Completo
                    </h4>
                  </div>
                  <p className="text-gray-700 text-base">
                    Guias detalhados, planos de aula prontos e atividades
                    desplugadas para complementar suas aulas.
                  </p>
                </div>
                <div className="bg-white/70 backdrop-blur-sm p-6 rounded-lg shadow-md border border-pink-100 hover:shadow-xl transition-shadow duration-300">
                  <div className="flex items-center gap-3 mb-2">
                    <div className="p-2 rounded-lg bg-gradient-to-r from-purple-100 to-pink-100">
                      <Gift className="w-6 h-6 text-purple-600" />
                    </div>
                    <h4 className="font-semibold text-gray-900 text-lg">
                      100% Gratuito
                    </h4>
                  </div>
                  <p className="text-gray-700 text-base">
                    Sem cadastro, sem instalação, sem custos. Acesse direto do
                    navegador e comece a ensinar hoje mesmo.
                  </p>
                </div>
                <div className="bg-white/70 backdrop-blur-sm p-6 rounded-lg shadow-md border border-pink-100 hover:shadow-xl transition-shadow duration-300">
                  <div className="flex items-center gap-3 mb-2">
                    <div className="p-2 rounded-lg bg-gradient-to-r from-red-100 to-purple-100">
                      <Users className="w-6 h-6 text-purple-700" />
                    </div>
                    <h4 className="font-semibold text-gray-900 text-lg">
                      Aprendizagem Colaborativa
                    </h4>
                  </div>
                  <p className="text-gray-700 text-base">
                    Promova discussões em grupo e desenvolvimento do pensamento
                    crítico através de desafios compartilhados.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

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