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

const SingleEmailBanner: React.FC = () => {
  const categories = [
    { name: "Shared Hosting", active: false },
    { name: "Business Hosting", active: false },
    { name: "Managed Cloud Hosting", active: false },
    { name: "Managed WordPress hosting", active: false },
    { name: "Fully Managed VPS", active: false },
    { name: "Business Emails", active: false },
    { name: "Managed Dedicated Server", active: false }
  ];

  return (
    <section className="font-sans overflow-hidden bg-white">
      
      {/* Purple Hero Banner */}
      <div className="relative text-center text-white py-[100px] px-0 flex flex-col items-center justify-center border-b border-purple-500/10">
        {/* Background Image */}
        <div className="absolute inset-0 w-full h-full pointer-events-none">
          <Image 
            src="/Group 1000001597.png" 
            alt="Purple Background Pattern" 
            fill 
            className="object-cover object-center" 
            priority
          />
        </div>

        <div className="container mx-auto max-w-[1280px] relative z-10 px-4 md:px-0">
          <h2 className="text-4xl md:text-5xl lg:text-[72px] font-semibold mb-6 leading-tight tracking-normal">
            Single Email Account's
          </h2>
          <p className="text-sm md:text-base lg:text-[18px] text-white/90 font-medium max-w-[1000px] mx-auto leading-[1.6]">
            For individuals seeking a Single Email Account's, our Business Email Account delivers a spam-free inbox with proven 
            uptime, backed by our guaranteed inbox deliverability promise. You can trust that your outgoing emails will land in your 
            clients' inboxes, ensuring seamless communication and reliable business operations. Choose our Business Email 
            Account for a reliable, secure email solution tailored to your needs.
          </p>
        </div>
      </div>

      {/* All Hosting Plans section */}
      <div className="py-10 md:py-28 px-4 md:px-10 bg-[#F8F9FF]">
        <div className="container mx-auto max-w-[1280px] text-center">
            <h2 className="text-3xl md:text-4xl lg:text-[44px] font-medium text-[#111827] mb-12 md:mb-16 tracking-tight">
                Our All Hosting Plans And Packages
            </h2>

            <div className="flex flex-nowrap lg:flex-wrap justify-start lg:justify-center gap-3 md:gap-5 max-w-[1100px] mx-auto overflow-x-auto pb-4 lg:pb-0 lg:overflow-x-visible scrollbar-hide">
                {categories.map((cat, idx) => (
                    <button 
                        key={idx}
                        className={`
                          px-5 md:px-8 py-2.5 md:py-4 rounded-full text-xs md:text-[15px] font-semibold whitespace-nowrap flex-shrink-0 lg:flex-shrink
                          transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl
                          ${cat.active 
                            ? 'bg-[#7F00FF] text-white border-2 border-[#7F00FF] shadow-lg shadow-[#7F00FF]/30' 
                            : 'bg-[#FFCE1A]/10 border border-[#FFCE1A] text-[#374151] hover:bg-[#7F00FF] hover:text-white hover:border-[#7F00FF]'
                          }
                        `}
                    >
                        {cat.name}
                    </button>
                ))}
            </div>
        </div>
      </div>

    </section>
  );
};

export default SingleEmailBanner;