'use client';

import Image from 'next/image';
import { motion } from 'framer-motion';
import { Flame, ArrowDown, ArrowRight, ArrowLeft } from 'lucide-react';

export default function BannerSection() {
  const handleApplyClick = () => {
    const formSection = document.getElementById('application-form');
    if (formSection) {
      formSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <section className="relative overflow-hidden rounded-3xl mb-10 min-h-[340px] sm:min-h-[420px] lg:min-h-[380px] z-0">
      {/* Background banner image */}
      <motion.div
        className="absolute inset-0"
        initial={{ scale: 1.08, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ duration: 1, ease: 'easeOut' }}
      >
        <Image
          src="/girl-smiling.jpg"
          alt="TechTan Ignite-100 Banner"
          fill
          className="object-cover object-[60%_20%] sm:object-[65%_15%] lg:object-[70%_10%]"
          priority
          sizes="(max-width: 768px) 100vw, 1152px"
        />
        {/* Overlay gradient — stronger on left, fades right */}
        <div className="absolute inset-0 bg-gradient-to-r from-gray-900/92 via-gray-900/70 to-gray-900/70 lg:to-gray-900/40" />
      </motion.div>

      {/* Content */}
      <div className="relative z-10 flex items-center h-full min-h-[340px] sm:min-h-[420px] lg:min-h-[380px] px-6 sm:px-10">
        <div className="flex-1 max-w-lg">
          {/* Badge */}
          <motion.div
            className="inline-flex items-center gap-2 text-white text-xs font-bold px-4 py-2 rounded-full tracking-widest uppercase mb-5"
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.3, duration: 0.6 }}
          >
            <Flame className="w-3.5 h-3.5 text-orange-400" />
            TechTan Presents
          </motion.div>

          {/* Headline */}
          <motion.h1
            className="text-4xl sm:text-5xl lg:text-6xl font-black text-white leading-[1.05] tracking-tight mb-4"
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.45, duration: 0.7 }}
          >
            Ignite
            <span className="text-orange-400">-100</span>
          </motion.h1>

          <motion.p
            className="text-base sm:text-lg text-gray-200 leading-relaxed max-w-md"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.6, duration: 0.6 }}
          >
            A 3-month intensive tech training program designed to transform beginners and
            intermediates into industry-ready professionals.
          </motion.p>

          {/* CTA Row */}
          <motion.div
            className="mt-6 flex flex-col sm:flex-row items-start sm:items-center gap-4"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.85, duration: 0.5 }}
          >
            {/* Apply Button */}
            <button
              onClick={handleApplyClick}
              className="inline-flex items-center gap-2 bg-orange-500 hover:bg-orange-600 active:scale-95 text-white text-sm font-bold px-6 py-3 rounded-xl transition-all duration-200 shadow-lg shadow-orange-500/30 group"
            >
              Apply Here
              <ArrowLeft className="w-4 h-4 group-hover:translate-y-0.5 transition-transform duration-200" />
            </button>

            {/* Spots hint */}
            <div className="flex items-center gap-2">
              <span className="w-2 h-2 bg-orange-400 rounded-full animate-pulse" />
              <p className="text-xs text-gray-300 font-medium">Limited spots available</p>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}