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

import { ArrowRight, Users, Heart, Lightbulb, Globe } from "lucide-react";
import Navbar from "../../components/Navbar";
import Footer from "../HomePage/Footer";
import Baner from "../../assets/baner_quemsomos.png"
import BanerMobile from "../../assets/banner_quemsomos_mobile.png"
import { BookOpen } from 'lucide-react'
import iconlivro from "../../assets/icon_livro.svg"
import iconmao from "../../assets/icon_mao.svg"
import iconcabeca from "../../assets/icon_cabeca.svg"
import iconelo from "../../assets/icon_elo.svg"
import iconpasta from "../../assets/icon_pasta.svg"
import iconcirculo from "../../assets/icon_circulo.svg"

export default function About() {
  return (
    <>
      {/* Navegação */}
      <Navbar />
     
      
     
      
      <section className="relative mt-32 lg:mt-[195px] font-['Barlow_Semi_Condensed']">
        {/* Container principal */}
       
          <div className="bg-[#FFFFFF] flex flex-col-reverse gap-12 xl:gap-16 xl:flex-row p-5 xl:p-[106px]">
            {/* Conteúdo textual */}

            <div className="xl:w-[70%]">

            <img src={Baner} className="hidden xl:block"/>
            <img src={BanerMobile} className="block xl:hidden"/>
          
            </div>

           
            <div className=" w-full xl:w-[30%] justify-center flex flex-col xl:self-stretch">
              <div>
                <div className="text-[18px] xl:text-[32px] text-[#201D1E]">
                  Quem somos
                </div>
                <h2 className="font-bold leading-tight text-gray-900 tracking-tight xl:text-[64px] text-[40px]">
                  Educadores do Núcleo de Tecnologia do MTST
                </h2>
               
              </div>
            </div>
            
          </div>

            <div className="w-full bg-gradient-to-r from-[#E70B2A] to-[#EA0E50] flex flex-col py-[32px] xl:py-[64px] px-[24px] xl:px-[120px]">
              <div className="font-bold text-[32px] xl:text-[40px] text-[#FFFFFF] ">
                Por uma educação tecnológica para todos
              </div>

               
            <div className="flex flex-col xl:flex-row gap-10 justify-between mt-10">

              {/*CARD 1*/}
            <div className="flex flex-col items-start w-full xl:w-1/3">
            <div className="bg-[#AF1F16] flex items-center justify-center p-4  rounded-2xl "> 
              <img src={iconlivro}/>

            </div>

              <div className="text-[#FFFFFF] font-bold text-2xl xl:text-[32px] flex flex-col items-start mt-3">
                  Educação popular
            </div>
               <p className="text-[#FFFFFF] tezt-[18px] xl:text-2xl  mt-1 leading-relaxed">
                  Criamos métodos de ensino contextualizados, críticos e adaptados à realidade brasileira.
                </p>
              </div>

              {/*CARD 2*/}
            <div className="flex flex-col items-start w-full xl:w-1/3">
            <div className="bg-[#AF1F16] flex items-center justify-center p-4  rounded-2xl "> 
              <img src={iconmao}/>
            </div>

             <div className="text-[#FFFFFF] font-bold text-2xl xl:text-[32px] flex flex-col items-start mt-3 ">
                  Compromisso social
              </div>
                <p className="text-[#FFFFFF] tezt-[18px] xl:text-2xl  mt-1 leading-relaxed">
                  Lutamos por uma tecnologia inclusiva que reduza desigualdades e promova justiça social.
                </p>
              </div>

              {/*CARD 3*/}
            <div className="flex flex-col items-start w-full xl:w-1/3">
            <div className="bg-[#AF1F16] flex items-center justify-center p-4 rounded-2xl "> 
              <img src={iconcabeca}/>
            </div>

             <div className="text-[#FFFFFF] font-bold text-2xl xl:text-[32px] flex flex-col items-start mt-3 ">
                Pedagogia crítica
             </div>
                <p className="text-[#FFFFFF] tezt-[18px] xl:text-2xl  mt-1 leading-relaxed ">
                 Criamos métodos de ensino contextualizados, críticos e adaptados à realidade brasileira.
                </p>
              </div>

            </div>
              
            </div>
                 
            <div className="w-full bg-[#FFFFFF]  xl:py-[72px] xl:px-[120px] py-[32px] px-[24px]">
           

              <div className="font-bold text-[30px] text-[#201D1E] mb-2">
               Nosso trabalho
              </div> 

                {/*linha*/}
                <div className="w-20 h-[6px] bg-[#F90527] rounded "></div> 
                
                
                <div className="mt-6">
                <p className="text-[#201D1E] text-[18px] xl:text-2xl text-left w-full ">
                 Somos parte do Núcleo de Tecnologia do MTST, e somos comprometidos com a democratização do ensino de programação e tecnologia. Acreditamos que a educação digital deve ser acessível, gratuita e transformadora para todas as pessoas.
                </p>
                      <br/>
                  <p className="text-[#201D1E] text-[18px] xl:text-2xl text-left w-full " >
                  Nossa missão é empoderar estudantes e professores através de ferramentas pedagógicas abertas, baseadas em metodologias críticas e participativas. Trabalhamos para que a tecnologia seja um instrumento de inclusão social e desenvolvimento comunitário.
                  </p>
                      <br/>

                    <p className="text-[#201D1E] text-[18px] xl:text-2xl text-left w-full ">
                    O Decoda nasceu dessa visão: uma plataforma educacional que valoriza o pensamento computacional como ferramenta de transformação social, respeitando a diversidade de saberes e promovendo a autonomia pedagógica.
                    </p>
                    </div>

                   {/*card nosso trabalho*/}
                  <div className="grid grid-cols-2 xl:grid-cols-5 gap-4 mt-10">

                   <div className="flex flex-col items-start">
                   <div className="bg-[#FFB550] flex items-center justify-center w-12 h-11 rounded">
                   <img src={iconlivro}/>
                  </div>

                   <div className="text-[#201D1E] font-bold text-[18px] xl:text-2xl  mt-2">
                   Educação Popular
                   </div>

                  <p className="text-[#454041] text-[18px] xl:text-[20px] mt-1 ">
                   Construção coletiva do saber
                  </p>
                </div>
             
                 
                   <div className="flex flex-col items-start">
                   <div className="bg-[#BD2A21] flex items-center justify-center w-12 h-11 rounded">
                   <img src={iconelo}/>
                  </div>

                   <div className="text-[#201D1E] font-bold text-[18px] xl:text-2xl mt-2">
                   Inclusão Digital
                   </div>

                  <p className="text-[#454041] text-[18px] xl:text-[20px] mt-1">
                   Tecnologia para todos
                  </p>
                    </div>


                   <div className="flex flex-col items-start">
                   <div className="bg-[#009247] flex items-center justify-center w-12 h-11 rounded">
                   <img src={iconcabeca}/>
                  </div>

                   <div className="text-[#201D1E] font-bold text-[18px] xl:text-2xl mt-2 ">
                   Pensamento Crítico
                   </div>

                  <p className="text-[#454041] text-[18px] xl:text-[20px] mt-1">
                   Autonomia e reflexão
                  </p>
                    </div>

                    
                   <div className="flex flex-col items-start">
                   <div className="bg-[#D5DF50] flex items-center justify-center w-12 h-11 rounded">
                   <img src={iconpasta}/>
                  </div>

                   <div className="text-[#201D1E] font-bold text-[18px] xl:text-2xl mt-2">
                   Programação Visual
                   </div>

                  <p className="text-[#454041] text-[18px] xl:text-[20px] mt-1">
                   Aprender fazendo
                  </p>
                  
             </div>

             <div className="flex flex-col items-start">
                   <div className="bg-[#BD2A21] flex items-center justify-center w-12 h-11 rounded">
                    <img src={iconcirculo}/>
                  </div>

                   <div className="text-[#201D1E] font-bold text-[18px] xl:text-2xl mt-2">
                   Transformação Social
                   </div>

                  <p className="text-[#454041] text-[18px] xl:text-[20px] mt-1">
                   Tecnologia para mudar
                  </p> 
             </div>


              </div>


               {/* botao conheca nossa historia */}
              <div className=" flex justify-center mt-8 ">
                <a
                  href="https://www.nucleodetecnologia.com.br/sobrenos"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center cursor-pointer justify-center bg-brand-500 text-white gap-x-3 px-6 py-3 text-base md:text-lg rounded-[16px] transition-all duration-300 shadow-lg hover:shadow-xl font-bold transform hover:scale-105"
                >
                  <span className="whitespace-nowrap">
                    Conheça a nossa história
                  </span>
                </a>
              </div>
               </div>
              

          
        </section>

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