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

import { ArrowRight } from "lucide-react";
import { Link } from "react-router-dom";
import CtaPlayground from "./CtaPlayground";
import SectionTitle from "./SectionTitle";

const TeachersMaterials = () => {
  return (
    <div className="bg-gray-900 px-10 lg:px-[120px] py-10 lg:py-[72px]">
      <SectionTitle
        title="Nossos materiais"
        squaresColor="green-500"
        titleColor="white"
        textShadowColor="black"
      />
      <h3 className="text-[32px] mt-1 ml-6 text-white font-title">
        PARA EDUCADORES
      </h3>

      <div className="flex flex-col lg:flex-row lg:mt-[86px] mt-8">
        <div className="w-full lg:w-[45%]">
          <h4 className="text-white font-bold lg:text-[28px] text-[24px]">
            Quer entender como você pode usar nossa plataforma para ensinar?
          </h4>
          <p className="text-white  text-[18px] mt-4">
            Acesse nosso material de documentação e comece a usar o Decoda para
            potencializar suas aulas e engajar seus alunos com atividades
            interativas.
          </p>
          <div className="block lg:hidden lg:w-[55%] mt-6">
            <CtaPlayground />
          </div>
          <div className="mt-10">
            <Link to="/educadores">
              <button className="w-full lg:w-auto bg-brand-500 py-4 px-6 text-white text-5 lg:text-[24px] font-bold rounded-[16px] hover:scale-110">
                Acesse o material para Educadores
              </button>
            </Link>
          </div>
        </div>
        <div className="hidden lg:block lg:w-[55%]">
          <CtaPlayground />
        </div>
      </div>
    </div>
  );
};

export default TeachersMaterials;
