"use client";

import React, { useState } from 'react';
import pricingData from '../app/data/pricingData.json';

// Types for better development
type TabType = "Startup" | "Professional" | "Enterprise";

const VPSStartupSection: React.FC = () => {
  const [activeTab, setActiveTab] = useState<TabType>("Startup");

  // Data extraction exactly as per your JSON
  const vpsData = (pricingData as any).vpsHosting;
  const currentData = vpsData ? vpsData[activeTab] : null;
  
  const tabs: TabType[] = ["Startup", "Professional", "Enterprise"];

  if (!currentData) return null;

  return (
    <section className="py-10 md:py-24 bg-white font-sans overflow-hidden px-4 sm:px-6 lg:px-20">
      <div className="container mx-auto max-w-7xl">
        <div className="bg-[#7F00FF08] rounded-[40px] p-8 md:p-10 lg:p-16 relative flex flex-col min-h-fit">
          
          <div className="max-w-2xl mb-8 shrink-0">
            <h2 className="text-3xl md:text-5xl lg:text-[64px] font-bold text-[#1E1B4B] mb-4 leading-tight tracking-tight">
              VPS Hosting {activeTab}
            </h2>
            <p className="text-gray-500 text-sm md:text-base font-medium leading-relaxed max-w-lg">
              Best cPanel Managed VPS hosting in Pakistan, better than any competitors in resources and quality.
            </p>
          </div>

          {/* Tabs Switcher */}
          <div className="flex bg-white rounded-full p-1.5 shadow-sm border border-gray-100 w-fit mb-10 shrink-0 overflow-x-auto scrollbar-hide">
            {tabs.map((tab) => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={`px-6 md:px-10 py-3 rounded-full text-xs md:text-base font-bold transition-all whitespace-nowrap cursor-pointer ${
                  activeTab === tab
                    ? 'bg-[#7F00FF] text-white shadow-lg'
                    : 'text-gray-400 hover:text-[#7F00FF]'
                }`}
              >
                {tab}
              </button>
            ))}
          </div>

          <div className="flex flex-col lg:flex-row gap-8 items-stretch flex-1">
            {/* Resources Area - Updated for Label/Value structure */}
            <div className="flex-1 bg-[#7F00FF05] rounded-[40px] p-8 md:p-10 border border-[#7F00FF]/30 shadow-sm flex flex-col">
              <div className="flex items-center justify-between mb-8">
                <span className="text-gray-400 text-sm font-bold tracking-widest uppercase">Resources</span>
                <span className="bg-[#7F00FF15] text-[#7F00FF] text-[10px] font-black px-4 py-1.5 rounded-md">NEW</span>
              </div>

              <div className="grid grid-cols-1 gap-4">
                {currentData.resources.map((item: any, idx: number) => (
                  <div key={idx} className="flex items-center gap-4">
                    {/* Count/Value */}
                    <span className="font-black text-[#1E1B4B] text-xl min-w-[50px]">
                      {item.value}
                    </span>
                    {/* Label */}
                    <span className="text-gray-600 font-medium text-sm md:text-base">
                      {item.label}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* Pricing Card - Updated for your .card structure */}
            <div className="lg:w-[420px] flex-shrink-0">
              <div className="bg-[#7F00FF] h-full rounded-[40px] p-8 md:p-10 text-white shadow-[0_30px_60px_rgba(127,0,255,0.2)] flex flex-col relative overflow-hidden">
                
                <div className="flex justify-end mb-6">
                  <span className="bg-white/20 text-white text-[10px] font-black px-5 py-2 rounded-full uppercase tracking-widest backdrop-blur-md">
                    Most Popular
                  </span>
                </div>

                <div className="flex items-baseline gap-2 mb-4">
                  <span className="text-5xl md:text-6xl font-black tracking-tight">${currentData.card.price}</span>
                  <span className="text-lg font-medium opacity-70">/month</span>
                </div>

                <h3 className="text-2xl md:text-3xl font-bold mb-3 tracking-tight">{currentData.card.title}</h3>
                <p className="text-sm text-white/70 mb-8 font-medium">Professional performance for growing projects.</p>
                
                <div className="flex flex-col gap-4 mb-10">
                  {currentData.card.features.map((feature: string, idx: number) => (
                    <div key={idx} className="flex items-center gap-3">
                      <div className="flex-shrink-0 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center">
                        <svg width="12" height="10" viewBox="0 0 12 10" fill="none">
                          <path d="M1 5L4.5 8.5L11 1.5" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                      </div>
                      <span className="text-base font-bold">{feature}</span>
                    </div>
                  ))}
                </div>

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

export default VPSStartupSection;