"use client";
import React, { useState, useEffect } from 'react';

// Pricing Card Component
const PricingCard = ({
  title,
  price,
  description,
  features,
  isFeatured = false,
  tag
}: {
  title: string;
  price: string;
  description: string;
  features: string[];
  isFeatured?: boolean;
  tag?: string;
}) => {
  return (
    <div
      className={`relative flex flex-col p-8 rounded-[32px] transition-all duration-500 overflow-hidden ${isFeatured
        ? 'bg-[#7F00FF] text-white shadow-[0_20px_50px_rgba(127,0,255,0.3)] lg:scale-110 z-10'
        : 'bg-[#F8F9FF] text-[#0F172A] border border-gray-100 h-fit my-auto'
        }`}
      style={isFeatured ? {
        backgroundImage: "url('/Group 1000001577.png')",
        backgroundSize: 'auto 100%',
        backgroundPosition: '0% center',
        backgroundRepeat: 'no-repeat'
      } : {}}
    >
      {tag && (
        <div className="absolute top-6 right-6 bg-[#4C0099] text-white text-[10px] px-8 py-3 rounded-xl uppercase tracking-widest">
          {tag}
        </div>
      )}

      <div className="flex items-baseline gap-1 mb-6">
        <span className="text-4xl font-bold">${price}</span>
        <span className={`text-sm ${isFeatured ? 'text-white/70' : 'text-gray-400'}`}>/month</span>
      </div>

      <h3 className="text-2xl font-bold mb-2">{title}</h3>
      <div 
  className={`text-sm mb-8 leading-relaxed list-inside ${isFeatured ? 'text-white/80' : 'text-gray-500'}`}
  dangerouslySetInnerHTML={{ __html: description }}
/>

      <div className="flex flex-col gap-4 mb-10 border-t pt-8 pb-4 border-white/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 flex items-center justify-center ${isFeatured ? 'bg-white/20' : 'bg-[#EBE5FF]'
              }`}>
              <svg
                width="12"
                height="10"
                viewBox="0 0 12 10"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className={isFeatured ? 'text-white' : 'text-[#7F00FF]'}
              >
                <path d="M1 5L4.5 8.5L11 1.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <span className="text-[15px] font-medium">{feature}</span>
          </div>
        ))}
      </div>

      <button className={`w-full py-4 rounded-full font-bold text-lg transition-all duration-300 ${isFeatured
        ? 'bg-[#FFCE1A] hover:bg-[#f7c617] text-black shadow-lg hover:shadow-xl'
        : 'bg-[#EBE5FF] hover:bg-[#e2dbff] text-[#7F00FF]'
        }`}>
        Choose plan
      </button>
    </div>
  );
};

interface Plan {
  id: number;
  title: string;
  price: string;
  description: string;
  features: string[];
  isFeatured: boolean;
  tag: string;
}

const PricingSection: React.FC = () => {
  const [plans, setPlans] = useState<Plan[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPackages = async () => {
      try {
        const response = await fetch('/api/zt-hosting');
        const data = await response.json();

        if (data.packages) {
          const formattedPlans = data.packages.slice(0, 3).map((pkg: any, index: number) => ({
            id: index,
            title: pkg.name,
            price: pkg.price,
            // Agar API se features nahi aa rahay to default list
            description: pkg.description || "Behtareen hosting plans aap ke liye.",
            features: pkg.features && pkg.features.length > 0 
                      ? pkg.features 
                      : ["Free SSL ", "Easy Control Panel", "24/7 Expert Support"],
            isFeatured: index === 1,
            tag: index === 1 ? "Most Popular" : ""
          }));

          setPlans(formattedPlans);
        }
      } catch (error) {
        console.error("Data fetch Problem:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchPackages();
  }, []);

  if (loading) {
    return (
      <div className="py-24 text-center">
        <div className="animate-pulse text-xl font-bold text-[#7F00FF]">Loading Best Plans...</div>
      </div>
    );
  }

  return (
    <section className="bg-white py-24 relative overflow-hidden px-4 sm:px-6 lg:px-[100px]">
      <div className="container mx-auto max-w-[1280px]">
        <div className="text-center max-w-[1050px] mx-auto mb-16">
          <h2 className="text-[36px] md:text-[48px] lg:text-[60px] text-[#0B1D33] font-bold">
            Web Hosting In Pakistan
          </h2>
          <p className="text-[#4B5563] mt-4">
            ZtHosting offers affordable industry-leading services with 100% uptime.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-4 items-center">
          {plans.map((plan) => (
            <PricingCard
              key={plan.id}
              title={plan.title}
              price={plan.price}
              description={plan.description}
              features={plan.features}
              isFeatured={plan.isFeatured}
              tag={plan.tag}
            />
          ))}
        </div>

        <div className="text-center mt-16">
          <a href="#" className="inline-flex items-center gap-2 text-[#7F00FF] font-bold text-lg hover:underline">
            View all features
            <svg width="14" height="14" viewBox="0 0 14 14">
              <path d="M5.25 10.5L8.75 7L5.25 3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>
      </div>
    </section>
  );
};

export default PricingSection;