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

const HeroSection = () => {
  return (
    <div className="relative h-80 md:h-96 lg:h-[380px] min-h-80 md:min-h-96 lg:min-h-[500px] overflow-hidden">
      {/* Background Image */}
      <Image 
        src="/images/heronew.png"
        alt="CMC Vellore 125 years celebration"
        fill
        className="object-cover"
      />
      
      {/* Main Content */}
      <div className="relative z-10 flex items-center h-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-24">
        <div className="max-w-2xl lg:max-w-3xl">
          {/* Glass Card */}
          <div className="bg-white/20 backdrop-blur-[2px] rounded-2xl p-8 sm:p-10 md:p-12 lg:p-4 shadow-2xl border border-white/30">
            {/* Main Heading */}
            <h1 className="mb-6 sm:mb-8 md:mb-10" style={{ color: '#012068' }}>
              <div className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-semibold leading-tight mb-1 sm:mb-2 md:mb-3 lg:mb-4">
                This year, we celebrate <span className='text-5xl text-bold'>125 years</span>
              </div>
              <div className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-semibold leading-tight mb-1 sm:mb-2 md:mb-3 lg:mb-4">
                 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" style={{ color: '#012068' }}>
                1900 - 2025
              </div>
            </h1>
            
            {/* CTA Button */}
            <a 
              href="https://www.cmch-vellore.edu/" 
              target="_blank" 
              rel="noopener noreferrer"
            >
              <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-lg transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-red-300"
                style={{ backgroundColor: '#e64838' }}
              >
                Discover
              </button>
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HeroSection;