import React from "react";
import Image from "next/image";
import { heroData } from "@/data/siteData";

export const Hero: React.FC = () => {
  return (
    <section className="w-full pt-4 pb-8 sm:pt-6 sm:pb-10">
      {/* Container with EXACT same width and side padding as Header: max-w-[1800px] px-6 sm:px-10 lg:px-12 */}
      <div className="w-full max-w-[1800px] mx-auto px-6 sm:px-10 lg:px-12">
        
        {/* Banner Card Container with rounded corners matching the screenshot */}
        <div className="relative overflow-hidden rounded-2xl sm:rounded-3xl bg-gradient-to-r from-[#F0F7FD] via-[#EAF4FC] to-[#F3F9FE] border border-sky-100/90 shadow-2xs px-5 py-6 sm:px-10 sm:py-10 md:px-14 md:py-12 lg:px-18 lg:py-16">
          
          {/* Subtle background glow */}
          <div className="absolute top-0 right-1/4 w-96 h-96 bg-sky-200/25 rounded-full blur-3xl pointer-events-none" />

          <div className="relative grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 items-center">
            
            {/* Left Content (7 cols) */}
            <div className="lg:col-span-7 space-y-3 sm:space-y-4 md:space-y-5 text-center sm:text-left">
              <h1 
                style={{ fontFamily: 'var(--font-playfair), "Playfair Display", Georgia, serif' }}
                className="text-2xl xs:text-3xl sm:text-4xl md:text-5xl lg:text-[56px] font-regular text-slate-900 leading-[1.18] sm:leading-[1.15] tracking-tight"
              >
                Global leader in high-quality <br className="hidden sm:inline" />
                molecular life{" "}
                <span className="text-[#0077b6] font-normal">
                  science tools
                </span>
              </h1>

              <p 
                style={{ fontFamily: 'var(--font-poppins), "Poppins", sans-serif' }}
                className="text-xs sm:text-[15px] md:text-[16px] text-slate-600 leading-relaxed max-w-3xl font-normal pt-1 para-colour mx-auto sm:mx-0"
              >
                {heroData.description}
              </p>
            </div>

            {/* Right Visual Element with Concentric Circles (5 cols) - scaled down slightly */}
            <div className="lg:col-span-5 flex justify-center lg:justify-center lg:-translate-x-5 xl:-translate-x-8 items-center relative mt-2 sm:mt-0">
              <div className="relative w-[210px] h-[210px] xs:w-[240px] xs:h-[240px] sm:w-[310px] sm:h-[310px] md:w-[370px] md:h-[370px] lg:w-[420px] lg:h-[420px] xl:w-[450px] xl:h-[450px] flex items-center justify-center">
                
                {/* Concentric Ripple Waves with growAndFade 5s infinite ease-out */}
                <div 
                  className="absolute inset-0 rounded-full border border-sky-300/60 bg-sky-100/25 pointer-events-none" 
                  style={{ animation: "growAndFade 5s infinite ease-out" }}
                />

                <div 
                  className="absolute inset-0 rounded-full border border-sky-300/50 bg-sky-200/20 pointer-events-none" 
                  style={{ animation: "growAndFade 5s infinite ease-out 1.25s" }}
                />

                <div 
                  className="absolute inset-0 rounded-full border border-sky-400/50 bg-sky-300/20 pointer-events-none" 
                  style={{ animation: "growAndFade 5s infinite ease-out 2.5s" }}
                />

                <div 
                  className="absolute inset-0 rounded-full border border-sky-200/50 bg-sky-100/15 pointer-events-none" 
                  style={{ animation: "growAndFade 5s infinite ease-out 3.75s" }}
                />

                {/* Circular Microscopy Center Image - scaled down slightly */}
                <div className="relative z-10 w-[135px] h-[135px] xs:w-[155px] xs:h-[155px] sm:w-[220px] sm:h-[220px] md:w-[270px] md:h-[270px] lg:w-[310px] lg:h-[310px] xl:w-[335px] xl:h-[335px] rounded-full overflow-hidden shadow-2xl ring-4 sm:ring-5 ring-white/95">
                  <Image
                    src={heroData.image}
                    alt={heroData.altText}
                    fill
                    priority
                    unoptimized
                    sizes="(max-width: 640px) 155px, (max-width: 1024px) 270px, 335px"
                    className="object-cover object-center scale-105"
                  />
                </div>

              </div>
            </div>

          </div>
        </div>

      </div>
    </section>
  );
};