import { Link } from "react-router-dom";
import heroImage from "./assets/hero-image.png";
import bannerMobile from "../../assets/iniciativas-banner-mobile.png";

const Hero = () => {
    return (
        <section className="relative overflow-hidden mt-32 lg:mt-[195px] py-20">
      {/* background removed per request - no colored gradient */}
      {/* empty for now */}
      {/* Container Principal */}
      <div className="w-full px-6 lg:px-[120px] lg:py-[106px] h-full flex flex-col-reverse lg:items-center lg:flex-row justify-between gap-16">
        {/* Coluna Esquerda - Imagem Hero (oculta no mobile) */}
        <div className="flex flex-1 items-center justify-center">
          <div className="w-full max-w-2xl">
            <img
              src={heroImage}
              alt="Decoda - Programação Visual"
              className="w-full h-auto object-contain hidden lg:block"
            />
          <img
              src={bannerMobile}
              alt="Decoda - Programação Visual"
              className="w-full h-auto object-contain md:hidden"
            />
          </div>
        </div>
        {/* Coluna Direita - Texto */}
        <div className="w-full lg:w-[40%] flex flex-col justify-center ">
          {/* Título Principal */}
          <h1 className="font-bold tracking-tight text-[60px] md:text-[76px] leading-tight font-title w-[90%]">
            Iniciativas<br/>
            em educação<br/>
            do NT MTST
          </h1>

          {/* Subtítulo */}
          <p className="font-normal text-2xl">
            Conheça nossas iniciativas que colocam <br />
            o NT MTST como pioneiro em educação<br />
            popular tecnológica no Brasil
          </p>
        </div>
      </div>
    </section>   
    )
};

export default Hero;