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

const DedicatedHero: React.FC = () => {
  const resources = [
    "10 Node.js web apps",
    "2 CPU cores",
    "4 GB RAM",
    "100 GB NVMe storage",
    "2 000 000 inodes (files and directories)",
    "100 PHP workers",
    "100 websites"
  ];

  const features = [
    "Free Domain",
    "Unlimited Websites",
    "Unlimited SSD Storage",
    "8GB Ram Dedicated",
    "Unmetered Bandwidth",
    "Free SSL Certificate",
    "Daily Backup Included"
  ];

  const tabs = ["Startup", "Professional", "Enterprise", "Enterprise", "Enterprise", "Enterprise"];

  return (
    <section className="relative pt-[120px] md:pt-[150px] pb-10 md:pb-20 bg-white font-sans overflow-hidden px-4 sm:px-6 lg:px-[100px]">
      
      {/* Background Decorative Element */}
      <div 
        className="absolute top-0 right-0 w-full h-[600px] pointer-events-none opacity-50"
        style={{
          background: 'radial-gradient(circle at top right, rgba(127, 0, 255, 0.08) 0%, transparent 70%)'
        }}
      />

      <div className="container mx-auto max-w-[1280px] relative z-10">
        
        {/* Top Header Text */}
        <div className="max-w-[800px] mb-12">
          <span className="text-gray-900 font-bold text-lg md:text-xl block mb-4">
            Dedicated Hosting
          </span>
          <h1 className="text-3xl md:text-6xl lg:text-[72px]  text-[#1E1B4B] leading-[1.1] mb-8 tracking-tight">
            Fully Managed <br />
            Dedicated Server <br />
            Hosting In Pakistan
          </h1>
          <p className="text-gray-500 text-sm md:text-base font-medium max-w-[520px] leading-relaxed">
            Discover the unbeatable performance and control of our managed dedicated server offers with cPanel, Plesk, LAMP, LEMP, and CyberPanel.
          </p>
        </div>

        {/* Main purple outer container */}
        <div className="bg-[#7F00FF08] rounded-[24px] md:rounded-[40px] p-6 md:p-12 lg:p-20 relative">
          
          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-[#1E1B4B] text-center mb-12 max-w-[800px] mx-auto leading-snug tracking-tight">
            Cheap Managed Dedicated Servers With FREE CPanel & 100% Uptime
          </h2>

          {/* Tabs */}
          <div className="flex items-center justify-center gap-2 mb-8 md:mb-12 overflow-x-auto pb-4 no-scrollbar">
             <button className="p-2 text-gray-400">
                <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg" className="rotate-180">
                  <path d="M1 1L5 5L1 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
             </button>
             <div className="flex bg-white rounded-full p-2 shadow-sm border border-gray-100">
                {tabs.map((tab, idx) => (
                  <button 
                    key={idx}
                    className={`px-4 md:px-6 py-2 rounded-full text-xs md:text-sm font-bold transition-all whitespace-nowrap ${
                      idx === 0 
                      ? 'bg-[#7F00FF] text-white' 
                      : 'text-gray-500 hover:text-[#7F00FF]'
                    }`}
                  >
                    {tab}
                  </button>
                ))}
             </div>
             <button className="p-2 text-gray-400">
                <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 1L5 5L1 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
             </button>
          </div>

          {/* White Content Card */}
          <div className="bg-white rounded-[24px] md:rounded-[32px] p-6 md:p-12 shadow-sm border border-white relative min-h-0 lg:min-h-[500px] flex flex-col lg:flex-row gap-8 lg:gap-12">
            
            {/* Left Column: Resources and Text */}
            <div className="flex-1 flex flex-col">
              <div className="flex items-center justify-between mb-8">
                <span className="text-gray-400 font-bold text-sm tracking-widest uppercase">Resources</span>
                <span className="bg-[#7F00FF15] text-[#7F00FF] text-[10px] font-black px-3 py-1 rounded-md">NEW</span>
              </div>

              <div className="flex flex-col gap-3 mb-12">
                {resources.map((res, idx) => {
                  const [count, ...rest] = res.split(' ');
                  return (
                    <div key={idx} className="flex items-center gap-2">
                      <span className="font-black text-[#1E1B4B] w-8">{count}</span>
                      <span className="text-gray-700 font-medium text-sm">{rest.join(' ')}</span>
                    </div>
                  );
                })}
              </div>

              <div className="mt-auto">
                <h3 className="text-xl md:text-3xl font-bold text-[#1E1B4B] mb-2 md:mb-4 tracking-tight">VPS Hosting Startup</h3>
                <p className="text-gray-500 text-sm font-medium leading-relaxed max-w-[400px]">
                  Best cPael Managed VPS hosting in Pakistan, you will find our VPS hosting plans better than any competitors in resources and quality.
                </p>
              </div>
            </div>

            {/* Right Column: Floating Pricing Card */}
            <div className="w-full lg:w-[380px] lg:absolute lg:-right-6 lg:-top-6 z-20 mt-4 lg:mt-0">
               <div className="bg-[#7F00FF] rounded-[24px] md:rounded-[32px] p-6 md:p-10 text-white shadow-[0_30px_60px_rgba(127,0,255,0.3)] flex flex-col">
                  
                  <div className="flex flex-col gap-1 mb-8">
                    <div className="flex justify-end">
                      <span className="bg-black/20 text-white text-[10px] font-black px-4 py-1.5 rounded-full uppercase tracking-widest">Most Popular</span>
                    </div>
                    <div className="flex items-baseline gap-2">
                       <span className="text-4xl md:text-5xl font-black tracking-tight">$9.95</span>
                       <span className="text-sm font-medium opacity-80">/month</span>
                    </div>
                  </div>

                  <h4 className="text-xl md:text-2xl font-bold mb-2 tracking-tight line-clamp-1">Managed Cloud Hosting</h4>
                  <p className="text-[10px] md:text-xs text-white/70 mb-8 font-medium">For most businesses that want to optimize web queries</p>

                  <div className="flex flex-col gap-4 mb-10">
                    {features.map((feature, idx) => (
                      <div key={idx} className="flex items-center gap-3">
                        <div className="flex-shrink-0 w-5 h-5 rounded-full bg-white/20 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="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                          </svg>
                        </div>
                        <span className="text-[13px] md:text-sm font-semibold whitespace-nowrap">{feature}</span>
                      </div>
                    ))}
                  </div>

                  <button className="mt-auto w-full bg-[#FFCE1A] hover:bg-white text-black rounded-full py-4 text-sm md:text-base font-black shadow-lg transition-all active:scale-95">
                    Choose plan
                  </button>
               </div>
            </div>

          </div>
        </div>

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

export default DedicatedHero;