import React from 'react';
import Image from 'next/image';

const HeroSection = () => {
  return (
    <div className="relative h-80 md:h-96 lg:h-[500px] min-h-80 md:min-h-96 lg:min-h-[450px] overflow-hidden">
      {/* Background Image using Next.js Image with fill */}
      <Image 
        src="/images/hero.png"
        alt="CMC Vellore 125 years celebration"
        fill
        className="object-cover"
      />
      
      {/* Main Content */}
      <div className="relative z-10 flex items-center justify-center text-left h-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20 py-8 sm:py-12 md:py-16">
        <div className="w-full max-w-5xl">
          {/* Main Heading */}
          <h1 className="text-white mb-6 sm:mb-8 md:mb-10 text-left">
            <div className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-bold leading-tight mb-1 sm:mb-2 md:mb-3 lg:mb-4">
              This year, we celebrate
            </div>
            <div className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-bold leading-tight mb-1 sm:mb-2 md:mb-3 lg:mb-4">
              125 years of CMC Vellore
            </div>
            <div className="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl font-semibold text-gray-200">
              1900 - 2025
            </div>
          </h1>
          
          {/* CTA Button */}
          <button 
            className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 sm:px-8 sm:py-4 md:px-10 md:py-4 text-sm sm:text-base md:text-lg font-semibold rounded-sm transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-red-300"
            style={{ backgroundColor: '#e64838' }}
          >
            Discover
          </button>
        </div>
      </div>
    </div>
  );
};

export default HeroSection;