import React from 'react';

const EmailPricing: React.FC = () => {
  const plans = [
    { size: "8gb", price: "3.99", pkr: "655" },
    { size: "8gb", price: "3.99", pkr: "655" },
    { size: "8gb", price: "3.99", pkr: "655" },
    { size: "8gb", price: "3.99", pkr: "655" }
  ];

  const features = [
    { name: "Outgoing Email Guarantee", values: ["99% Inbox Delivery", "99% Inbox Delivery", "99% Inbox Delivery", "99% Inbox Delivery"] },
    {
      name: "Storage & RAID",
      tooltip: "Storage is based on the latest SSD and set up in a redundant RAID 10 configuration. With this set up you will never have to worry about failed hard drives and data loss.",
      values: ["8 GB", "8 GB", "8 GB", "8 GB"]
    },
    { name: "Email Accounts", values: ["50 Emails", "50 Emails", "50 Emails", "50 Emails"] },
    { name: "Hourly Sending Limit", values: ["8 GB", "8 GB", "8 GB", "8 GB"] }, // Matches image although weird
    { name: "Outgoing Email Guarantee", values: [true, true, true, true] }
  ];

  return (
    <section className="py-10 md:py-24 bg-white font-sans overflow-hidden px-4 sm:px-6 lg:px-[100px]">
      <div className="container mx-auto max-w-[1280px]">

        <h2 className="text-2xl md:text-[64px] font-bold text-[#1E1B4B] text-center mb-8 md:mb-16 tracking-tight">
          Select Your Plan
        </h2>

        {/* Pricing Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6 mb-10 md:mb-16">
          {plans.map((plan, idx) => (
            <div key={idx} className="group bg-white border border-gray-100 rounded-[16px] md:rounded-[24px] p-4 md:p-8 hover:bg-[#7F00FF] transition-colors duration-300 flex flex-col items-start gap-2 md:gap-4">
              <div className="flex flex-col">
                <span className="text-2xl font-bold text-[#1E1B4B] group-hover:text-white transition-colors duration-300">
                  {plan.size} <span className="font-medium text-gray-500 group-hover:text-white/80 text-lg transition-colors duration-300">inbox</span>
                </span>
                <span className="text-gray-900 group-hover:text-white font-bold text-lg transition-colors duration-300 mt-1">
                  ${plan.price} <span className="text-sm font-medium text-gray-400 group-hover:text-white/70 transition-colors duration-300">/monthly</span>
                </span>
                <span className="text-gray-500 group-hover:text-white/80 text-xs font-semibold transition-colors duration-300 mt-0.5">
                  PKR {plan.pkr}/monthly
                </span>
              </div>
              <button className="bg-[#FFCE1A] hover:bg-[#FACC15] text-black px-6 py-2 rounded-lg text-sm font-bold transition-all active:scale-95 ml-auto mt-2">
                Buy Now
              </button>
            </div>
          ))}
        </div>

        {/* Feature Table */}
        <div className="bg-[#7F00FF05] rounded-[24px] md:rounded-[32px] overflow-x-auto border border-purple-50">
          <div className="min-w-[600px] md:min-w-0">
            <div className="p-4 md:p-10 border-b border-purple-100 flex items-center justify-between">
              <h3 className="text-xl md:text-2xl font-bold text-[#1E1B4B]">Business Email Feature</h3>
              <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 10L10 2L18 10" stroke="#1E1B4B" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>

            <div className="p-4 md:p-10 flex flex-col gap-0">
              {features.map((feature, idx) => (
                <div key={idx} className={`grid grid-cols-5 py-3 md:py-6 items-center gap-4 ${idx !== features.length - 1 ? 'border-b border-gray-200' : ''}`}>
                <div className="col-span-1 flex items-center gap-2 relative group">
                  <span className="text-[11px] md:text-base font-bold text-[#1E1B4B] underline decoration-dotted decoration-purple-300 cursor-help">
                    {feature.name}
                  </span>
                  {feature.tooltip && (
                    <div className="absolute bottom-full left-0 mb-3 w-[250px] bg-[#7F00FF] text-white p-4 rounded-xl text-xs font-medium shadow-xl opacity-0 translate-y-2 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 transition-all z-20">
                      {feature.tooltip}
                      <div className="absolute top-full left-6 w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-[#7F00FF]" />
                    </div>
                  )}
                </div>
                {feature.values.map((val, vIdx) => (
                  <div key={vIdx} className="text-center">
                    {typeof val === 'boolean' ? (
                      <div className="flex justify-center">
                        <svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1 5.5L5.5 10L14 1" stroke="#1E1B4B" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                      </div>
                    ) : (
                      <span className="text-[10px] md:text-sm font-bold text-[#1E1B4B]">{val}</span>
                    )}
                  </div>
                ))}
                </div>
              ))}
            </div>
          </div>
        </div>

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

export default EmailPricing;