import { useLang } from '../context/LanguageContext';

export default function Hero() {
  const { t } = useLang();

  return (
    <div
      id="hero"
      className="acaab-full-bleed bg-untan-navy text-white pt-6 md:pt-8 lg:pt-10 mb-8 border-t border-white/10 relative"
    >
      <div className="container mx-auto px-4 lg:px-8 relative z-10">

        <div className="grid lg:grid-cols-2 gap-6 lg:gap-10 items-center">

          {/* LEFT CONTENT */}
          <div className="max-w-3xl py-6 md:py-8 lg:py-10">
            <span className="inline-block bg-untan-yellow text-slate-900 text-[10px] md:text-xs font-bold uppercase tracking-widest px-2 py-0.5 mb-3">
              {t.hero.badge}
            </span>
            <h1 className="text-2xl md:text-3xl lg:text-[36px] font-bold font-serif leading-tight md:leading-snug tracking-tight mb-3">
              {t.hero.title}
            </h1>
            <p className="text-slate-300 max-w-2xl text-sm md:text-base leading-relaxed">
              {t.hero.desc}
            </p>
          </div>

          {/* RIGHT IMAGE */}
          <div className="relative flex justify-center lg:justify-end items-end">
            {/* Glow behind image */}
            <div className="absolute bottom-0 w-[300px] h-[300px] bg-cyan-300/10 rounded-full blur-3xl"></div>

            <div className="relative">
              <img
                src={new URL('../gambar/hero.png', import.meta.url).href}
                alt="Mahasiswa Informatika UNTAN"
                className="
                  relative z-10
                  w-full
                  max-w-[300px]
                  md:max-w-[420px]
                  lg:max-w-[450px]
                  h-auto
                  object-contain
                  opacity-95
                  drop-shadow-[0_15px_35px_rgba(0,0,0,0.25)]
                  hover:scale-[1.02]
                  transition-all
                  duration-500
                "
              />
              {/* Gradient fade bawah */}
              <div className="absolute bottom-0 left-0 w-full h-40 bg-gradient-to-t from-untan-navy to-transparent z-20" />
              {/* Gradient fade kiri */}
              <div className="absolute top-0 left-0 h-full w-20 bg-gradient-to-r from-untan-navy to-transparent z-20" />
            </div>
          </div>

        </div>
      </div>

      {/* Decorative Glow */}
      <div className="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-untan-yellow/10 rounded-full blur-3xl pointer-events-none"></div>
    </div>
  );
}