import React from 'react';

const SharedFeatures: React.FC = () => {
  const cards = [
    {
      title: "One Click Installer",
      desc: "Softaculous 1-Click Script Installer facilitates you with many of the best scripts in just one click."
    },
    {
      title: "NVME SSD Storage",
      desc: "We employ SSD-based servers to ensure extreme smoothness for websites with huge traffic."
    },
    {
      title: "Weekly Backups",
      desc: "To help you keep your website data safe, we make Weekly incremental backups on all servers."
    },
    {
      title: "AntiSpam & AntiVirus",
      desc: "This Feature Allows you to receive and send spam-free Emails to your customers."
    },
    {
      title: "CloudLinux & CageFs",
      desc: "These Technologies provide a more secure and stable hosting environment for websites"
    },
    {
      title: "Cloud Based Servers",
      desc: "With CloudServers we assure 100% uptime with Unlimited Bandwidth and Traffic."
    }
  ];

  return (
    <div className="flex flex-col w-full font-sans tracking-tight bg-white">
      
      {/* Intro Banner Section */}
      <section className="py-10 md:py-24 px-4 sm:px-6 lg:px-[100px]">
        <div className="w-full">
          <div className="bg-[#7F00FF08] rounded-[32px] md:rounded-[40px] p-10 md:p-16 lg:p-20 text-center flex flex-col items-center justify-center border border-[#7F00FF]/10 shadow-sm w-full">
            <h2 className="section-heading mb-6">
              CPanel Shared Web Hosting In Pakistan <br className="hidden md:block" /> CPanel Best Web Hosting
            </h2>
            <p className="text-supporting-text max-w-[750px] text-brand-dark/70">
              We are the best web hosting for small businesses in Pakistan. We have designed our cPanel Shared Web Hosting 
              package at a meager price, but it does not lack quality. The Shared Hosting package comes with a 30-day money-back 
              guarantee. Buy your desired Web hosting packages here, or go for a <a href="#" className="text-brand-dark font-bold underline hover:text-[#7F00FF] transition-colors">business hosting package</a>.
            </p>
          </div>
        </div>
      </section>

      {/* Grid Features Section */}
      <section className="py-10 md:py-24 bg-white px-4 sm:px-6 lg:px-[100px]">
        <div className="container mx-auto max-w-[1280px]">
          
          <div className="text-center max-w-[1000px] mx-auto mb-8 md:mb-20">
            <h2 className="section-heading mb-4 max-w-[900px] mx-auto">
              Reliable, Affordable & Flexible <br className="hidden md:block" /> Web Hosting Services
            </h2>
            <p className="text-supporting-text max-w-[900px] mx-auto text-brand-dark/70">
              ZtHosting Provide the <a href="#" className="font-bold text-brand-dark underline hover:text-[#7F00FF] transition-colors">best web hosting in Pakistan</a> for small business and corporate clients. <br className="hidden md:block" /> Our shared web hosting service is blazing-fast and will never cause you loss of your valued traffic.
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-6 lg:gap-8 max-w-[1000px] mx-auto">
            {cards.map((card, idx) => (
              <div 
                key={idx}
                className="bg-[#7F00FF08] border border-[#7F00FF]/10 p-4 md:p-10 rounded-2xl md:rounded-[32px] flex flex-col gap-2 md:gap-4 hover:shadow-md hover:border-[#7F00FF]/30 transition-all duration-300"
              >
                <h3 className="text-sm md:text-xl font-bold text-[#1E1B4B] tracking-tight leading-tight">{card.title}</h3>
                <p className="text-[11px] md:text-sm text-gray-600 font-medium leading-snug md:leading-relaxed">
                  {card.desc}
                </p>
              </div>
            ))}
          </div>

        </div>
      </section>

    </div>
  );
};

export default SharedFeatures;