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

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

const StudentsMaterials = () => {
  return (
    <div className="bg-gray-100 px-10 lg:px-[120px] py-10 py-[72px]">
      <SectionTitle title="Nossos materiais" squaresColor="brand-300" />
      <h3 className="text-[32px] mt-1 ml-6 font-title">PARA ESTUDANTES</h3>

      <div className="flex flex-col lg:flex-row gap-8 lg:mt-[86px] mt-8">
        <div className="w-full lg:w-[45%] ">
          <h4 className="lg:text-[28px] text-[24px] font-bold">
            Está iniciando em programação e quer entender melhor?
          </h4>
          <p className="mt-3">
            Acesse nossas atividades e dê os primeiros passos no mundo da
            programação! Começe a programar de forma divertida e interativa com
            nossos materiais feitos especialmente para iniciantes.
          </p>
          <div className="hidden lg:block mt-10">
            <Link to="/atividades">
              <button className="bg-brand-500 py-4 px-6 text-white text-5 lg:text-[24px] font-bold rounded-[16px] hover:scale-110">
                Acesse nossas Atividades
              </button>
            </Link>
          </div>
        </div>
        <div className="w-full lg:w-[55%]">
          <CtaVideoPreview />
          <div className="mt-6 lg:hidden">
            <Link to="/atividades">
              <button className="w-full bg-brand-500 py-4 px-6 text-white text-5 lg:text-[24px] font-bold rounded-[16px] hover:scale-110">
                Acesse nossas Atividades
              </button>
            </Link>
          </div>
        </div>
      </div>
      <div className="flex flex-col lg:flex-row gap-8 mt-10 lg:mt-[158px]">
        <div className="hidden lg:block lg:w-[55%]">
          <CtaPlayground />
        </div>
        <div className="w-full lg:w-[45%] ">
          <h4 className="lg:text-[28px] text-[24px] font-bold">
            Já tem a base de programação e busca algo mais avançado?
          </h4>
          <p className="mt-3">
            Acesse nosso Laboratório e comece a criar seus próprios programas
            usando blocos visuais. Converta para JavaScript ou Python e aprenda
            programação de verdade enquanto se diverte.
          </p>
          <div className=" lg:hidden lg:w-[55%] mt-6">
            <CtaPlayground />
          </div>
          <div className="mt-10">
            <Link to="/playground">
              <button className="bg-brand-500 py-4 px-8 flex flex-row justify-between lg:gap-1 items-center text-white text-5 lg:text-[24px] font-bold rounded-[16px] hover:scale-110">
                Acesse nosso Laboratório
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default StudentsMaterials;
