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

import { Link } from "react-router-dom";
import { ArrowRight, Gamepad2, Trophy } from "lucide-react";
import heroImage from "./assets/puzzled-image.png";

const Hero = () => {
  const scrollToFeatures = (e) => {
    e.preventDefault();
    const featuresSection = document.getElementById("features-section");
    if (featuresSection) {
      featuresSection.scrollIntoView({ behavior: "smooth" });
    }
  };

  return (
    <section className="relative overflow-hidden mt-10 lg:mt-32 lg:mt-[195px] py-20">
      {/* Background Gradient */}
      <div
        className="isolate -z-10 absolute h-full w-full top-0 left-0 primary-gradient"
      ></div>
      {/* Container Principal */}
      <div className="w-full px-6 lg:px-[120px] lg:py-[106px] h-full flex flex-col lg:items-center lg:flex-row justify-between gap-8">
        {/* Coluna Esquerda - Texto */}
        <div className="w-full lg:w-[40%] flex flex-col justify-center ">
          {/* Título Principal */}
          <h1 className="font-bold text-white tracking-tight text-[42px] sm:text-[50px] lg:text-[70px] md:text-[86px] leading-tight font-title w-full lg:w-[90%]">
            Programe <br /> com desafios
            <span className="block text-black">em contexto</span>
          </h1>

          {/* Subtítulo */}
          <p className="font-normal text-white text-lg sm:text-2xl leading-relaxed mt-4 lg:mt-0">
            Descubra o mundo da programação através de atividades interativas.
            <br className="hidden sm:block" />
            Desenvolva habilidades lógicas enquanto se diverte!
          </p>

          {/* Botões de Ação */}
          <div className="hidden lg:block mt-8 hover:scale-110">
            <Link
              to="/atividades"
              className="bg-green-100 py-4 px-8 rounded-[16px] shadow-md  w-full flex md:inline items-center "
            >
              <span className="text-xl font-bold w-full text-center">
                Comece as atividades
              </span>
            </Link>
          </div>
        </div>

        {/* Coluna Direita - 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"
            />
            <div className="block lg:hidden mt-8 hover:scale-110">
              <Link
                to="/atividades"
                className="bg-green-100 py-4 px-8 rounded-[16px] shadow-md  w-full flex md:inline items-center "
              >
                <span className="text-xl font-bold w-full text-center">
                  Comece as atividades
                </span>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;
