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

const Hero: React.FC = () => {
  return (
    // Background: Removed harsh pink, added subtle gradient seen in image
    <section className="relative overflow-hidden min-h-[90vh] flex items-center bg-[#FDF4FF] font-sans tracking-tight">

      {/* --- BACKGROUND DECORATIONS (BASED ON IMAGE) --- */}
      {/* 1. Large Top-Left Eclipse blur */}
      <div
        className="absolute pointer-events-none z-0 rounded-full"
        style={{
          width: '120vw',
          height: '120vw',
          background: 'radial-gradient(50% 50% at 50% 50%, rgba(127, 0, 255, 0.05) 0%, rgba(253, 244, 255, 0) 100%)',
          filter: 'blur(150px)',
          top: '-50vw',
          left: '-20vw',
          opacity: 0.8
        }}
      />

      {/* 2. Smaller Right-Side Cloud-like effect (subtle) */}
      <div
        className="absolute pointer-events-none z-0 hidden lg:block rounded-full"
        style={{
          width: '600px',
          height: '600px',
          background: 'rgba(232, 210, 255, 0.3)',
          filter: 'blur(100px)',
          top: '20%',
          right: '5%',
          opacity: 0.5
        }}
      />
      {/* ------------------------------------------------ */}

      {/* Main Content Container: Adjusted alignment to match image */}
      <div className="w-full px-6 lg:px-[100px] xl:px-[100px] relative z-10 py-40">
        {/* Switched order to Image Right, Content Left for desktop, adjusted gap */}
        <div className="flex flex-col-reverse lg:flex-row items-center justify-between gap-12 lg:gap-8 xl:gap-0 w-full">

          {/* Left Content Column: Made narrower to match image structure */}
          <div className="flex flex-col gap-4 w-full max-w-[580px] text-left items-start z-10 shrink-0">
            
            {/* Title: Changed from 'text-hero-heading' to specific size and bold weight */}
            <h1 className="text-4xl sm:text-[52px] md:text-[60px] font-medium text-[#0F172A] leading-[1.1] tracking-tight">
              Where We Host <br /> Your Dreams!
            </h1>

            <div className="flex flex-col gap-6">
              {/* Subheading: Reduced size, set to medium weight, lighter text */}
              <h2 className="text-[17px] font-bold text-[#1E293B] tracking-normal leading-[1.6]">
                Zero Tolerance Best Web Hosting, Most Reliable And Secured
              </h2>

              {/* Description: Lightened text color to medium gray, added 'Join now...' line from image */}
              <p className="text-[15px] font-normal text-[#475569] leading-[1.7] max-w-[590px]">
                Unleash the power of web hosting with ZtHosting. Enjoy dedicated CPU cores and RAM <br className="hidden sm:block" />
                in our shared and cloud hosting packages, perfect for WordPress, eCommerce, and
                bloggers alike. Join now for reliable and speedy web hosting solutions.
              </p>
            </div>

            {/* Price section: Changed base text size and weight */}
            <div className="flex items-baseline gap-2 ">
              <span className="text-[19px] text-[#0F172A] font-medium">From</span>
              <span className="text-[48px] text-[#0F172A] tracking-tighter">$1.25</span>
              <span className="text-[19px] text-[#0F172A] font-medium">/mo</span>
            </div>

            {/* Button: Complete redesign to match simple yellow oval with trailing icon */}
            <div className="pt-4 md:pt-6">
              <button className="w-fit bg-[#FFCE1A] hover:bg-[#FACC15] text-[#0F172A] rounded-full px-6 py-4 text-[17px] font-bold flex items-center gap-3 transition-all duration-300 group shadow-md hover:shadow-lg">
                Get Started Now
                {/* Simple arrow icon in trailing position as seen in image */}
                <div className="bg-[#0F172A] w-7 h-7 rounded-full flex items-center justify-center">
                  <svg
                    width="12"
                    height="12"
                    viewBox="0 0 14 14"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path d="M5.25 10.5L8.75 7L5.25 3.5" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </div>
              </button>
            </div>
          </div>

          {/* Right Image Column: Adjusted positioning and scale to match image prominence */}
          <div className="relative w-full max-w-[620px] lg:max-w-none lg:w-[50vw] xl:w-[45vw] aspect-[1.1] z-10 flex items-center justify-center">
            {/* Cloud Illustration - Kept as background but lightened */}
            <div 
              className="absolute pointer-events-none z-[1]"
              style={{ 
                left: '0%', 
                top: '0%', 
                width: '100%', 
                height: '100%',
                opacity: 0.15 // Very subtle cloud effect from image
              }}
            >
              <Image src="/Illustration.png" alt="Background shapes" fill className="object-contain" priority />
            </div>

            {/* Main Cat Illustration - Center and make it prominent */}
            <div 
              className="relative pointer-events-none z-[2] w-full h-full"
            >
              <Image src="/Zt 3.png" alt="Zt Hosting Illustration" fill className="object-contain" priority />
            </div>
          </div>

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

export default Hero;