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

const AffordableHosting: React.FC = () => {
  return (
    <section className="bg-[#F8F9FF] py-16 md:py-24 overflow-hidden font-sans tracking-tight px-4 sm:px-6 lg:px-[100px]">
      <div className="container mx-auto max-w-[1280px]">
        
        {/* Heading */}
        <div className="text-center mb-12 md:mb-16">
          <h2 className="text-3xl md:text-4xl lg:text-[40px] text-brand-dark leading-tight">
            Affordable Web Hosting <br className="hidden md:block" /> Solutions In Pakistan
          </h2>
        </div>

        {/* Cards Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 max-w-[1050px] mx-auto mb-10">
          
          {/* Card 1 */}
          <div className="relative bg-white p-8 lg:p-12 rounded-[32px] flex flex-col gap-4 shadow-[0_4px_20px_rgba(0,0,0,0.03)] border border-gray-100 overflow-hidden group hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] transition-all duration-500">
            {/* Background Decor */}
            <div className="absolute top-0 right-0 w-[70%] h-full pointer-events-none opacity-100 group-hover:opacity-60 transition-opacity duration-500">
              <Image 
                src="/Mask group copy.png" 
                alt="Background Decor" 
                fill
                className="object-contain object-right-top"
              />
            </div>
            
            <div className="relative z-10 flex flex-col gap-3 max-w-[90%]">
              <h3 className="text-[20px] lg:text-[20px] font-medium text-brand-dark">
                Cheapest Hosting Plans
              </h3>
              <p className="text-[#64748B] text-[13px] md:text-[14px] font-medium leading-[1.8]">
                ZtHosting provides the most cost-effective web hosting solutions in Pakistan. 
                Our web hosting plans cater to small businesses and come with a free domain and 99.9% uptime. 
                Our unlimited web hosting plans offer great value at a low cost. Explore our{' '}
                <a href="#" className="font-bold text-brand-dark underline decoration-1 underline-offset-4 hover:text-[#7F00FF] transition-colors">
                  Managed WordPress hosting plans
                </a>{' '}
                for the best options in Pakistan.
              </p>
            </div>
          </div>

          {/* Card 2 */}
          <div className="relative bg-white p-8 lg:p-12 rounded-[32px] flex flex-col gap-4 shadow-[0_4px_20px_rgba(0,0,0,0.03)] border border-gray-100 overflow-hidden group hover:shadow-[0_8px_30px_rgba(0,0,0,0.06)] transition-all duration-500">
            {/* Background Decor */}
            <div className="absolute top-0 right-0 w-[70%] h-100 pointer-events-none opacity-100 group-hover:opacity-60 transition-opacity duration-500">
              <Image 
                src="/Mask group copy.png" 
                alt="Background Decor" 
                fill
                className="object-contain object-right-top"
              />
            </div>

            <div className="relative z-10 flex flex-col gap-3 max-w-[90%]">
              <h3 className="text-[20px] lg:text-[20px] font-medium text-brand-dark">
                Reliable Web Hosting – Since 2013
              </h3>
              <p className="text-[#64748B] text-[13px] md:text-[14px] font-medium leading-[1.8]">
                With over years of experience, we are the pioneers of web hosting services in Pakistan. 
                As one of the country's top web and domain resellers, we offer affordable website hosting 
                packages with unbeatable value. Get more for less by choosing the original hosting 
                provider for your website.
              </p>
            </div>
          </div>

        </div>

        {/* Footer Link */}
        <div className="text-center">
          <a href="#" className="text-xs md:text-[13px] font-medium text-gray-500 hover:text-[#7F00FF] underline underline-offset-4 transition-all decoration-gray-300">
            Find more reasons to choose ZtHosting here:
          </a>
        </div>

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

export default AffordableHosting;