import React from 'react';

const ResellerPricing: React.FC = () => {
  const commonFeatures = [
    "Free Domain*",
    "Unlimited Websites",
    "10 cPanel Accounts",
    "25 GB SSD Storage",
    "100 GB Bandwidth",
    "WHMCS Discounted",
    "Unlimited Emails",
    "Free SSL Certificates",
    "Free Domain Reseller",
    "Whitelabel DNS",
    "Migration Free",
    "CloudFlare Enabled",
    "Datacenter USA & Europe"
  ];

  return (
    <>
      <section className="pt-12 md:pt-24 pb-8 md:pb-12 bg-white font-sans overflow-hidden px-4 sm:px-6 lg:px-[150px]">
        <div className="container mx-auto max-w-[1280px]">
        
        {/* Top Pricing Grid */}
        <div className="flex lg:grid lg:grid-cols-3 gap-6 md:gap-8 mb-16 md:mb-24 items-stretch max-w-6xl mx-auto overflow-x-auto no-scrollbar scroll-smooth snap-x">
          {[1, 2, 3].map((_, idx) => (
            <div 
              key={idx} 
              className="bg-white bg-cover bg-center bg-no-repeat border border-gray-100 rounded-[24px] md:rounded-[40px] p-6 md:p-12 shadow-sm relative flex flex-col transition-all duration-300 hover:shadow-xl hover:border-purple-200 w-[280px] sm:w-[300px] md:w-auto flex-shrink-0 snap-start"
              style={{ backgroundImage: "url('/Frame 290.png')" }}
            >
              
              <div className="absolute top-6 right-6 bg-[#FFCE1A] text-black text-[10px] font-black px-4 py-1.5 rounded-full uppercase tracking-widest">
                Save 33%
              </div>

              <div className="mb-8 md:mb-10">
                <div className="flex items-baseline gap-1 mb-1">
                  <span className="text-3xl md:text-5xl font-black text-[#1E1B4B] tracking-tight">$8.07</span>
                  <span className="text-xs md:text-sm font-medium text-gray-400">/month</span>
                </div>
                <div className="text-[10px] md:text-xs text-gray-400 font-medium">
                  was <span className="line-through">$4.13 /month</span>
                </div>
              </div>

              <h3 className="text-xl md:text-3xl font-black text-[#1E1B4B] mb-8 md:mb-10 tracking-tight leading-tight">Reseller Hosting 1</h3>

              <div className="flex flex-col gap-4 mb-12">
                {commonFeatures.map((feature, fIdx) => (
                  <div key={fIdx} className="flex items-center gap-3">
                    <div className="flex-shrink-0 w-4 h-4 rounded-full bg-[#7F00FF15] flex items-center justify-center">
                       <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M1 4L4 7L9 1" stroke="#7F00FF" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
                       </svg>
                    </div>
                    <span className="text-xs md:text-base text-[#1E1B4B] tracking-tight">{feature}</span>
                  </div>
                ))}
              </div>

              <button className="mt-auto w-full bg-[#F3E8FF] hover:bg-[#7F00FF] hover:text-white text-[#7F00FF] rounded-full py-4 text-sm md:text-base font-black transition-all duration-300 shadow-sm active:scale-95">
                Choose plan
              </button>
            </div>
          ))}
        </div>
        </div>
      </section>

      {/* Purple Middle Banner (Edge to Edge) */}
      <section className="w-full bg-white font-sans py-6 md:py-12">
        <div 
          className="w-full bg-cover bg-center bg-no-repeat text-white relative overflow-hidden flex flex-col py-16 md:py-24"
          style={{ backgroundImage: "url('/Group 1000001579.png')" }}
        >
          <div className="max-w-[800px] relative z-10 flex flex-col gap-6 text-center mx-auto px-6">
            <h2 className="text-2xl md:text-5xl lg:text-[56px] font-black leading-[1.1] tracking-tight">
              Best Reseller Hosting <br className="hidden md:block" />
              In Pakistan Cheap <br className="hidden md:block" />
              & Powerful Plans
            </h2>
            <p className="text-[13px] md:text-[15px] font-medium text-white/90 leading-relaxed max-w-[700px] mx-auto">
              ZtHosting Provide Best Reseller Hosting in Pakistan with extreme packages will simply be perfect to fulfill your needs a gift of cPanel and WHMCS to show our gratitude, by which create, modify as many hosting accounts as you want along with a professional billing software without spending a single dime.
            </p>
          </div>
        </div>
      </section>

    </>
  );
};

export default ResellerPricing;