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

const ResellerFeaturesTable: React.FC = () => {
    const [expanded, setExpanded] = useState<string | null>("Hosting Features");

    const categories = [
        "Hosting Features", "Domain Features", "Five Layers Of Caching & Speed Optimizations",
        "Security", "Support", "CPanel Features", "SSL Features", "Email Features",
        "Database Features", "Developer's Features", "Pricing"
    ];

    const hostingFeatures = [
        { name: "Hosted Websites", values: ["Unlimited", "Unlimited", "Unlimited", "Unlimited", "Unlimited", "Unlimited"] },
        {
            name: "SSD Storage",
            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: ["25 GB", "50 GB", "100 GB", "Unlimited", "Unlimited", "Unlimited"]
        },
        { name: "Bandwidth", values: ["100 GB", "500 GB", "1000 GB", "Unlimited", "Unlimited", "Unlimited"] },
        { name: "cPanel Accounts", values: ["10", "20", "25", "50", "100", "200"] },
        { name: "Custom/Private Name Servers", values: [true, true, true, true, true, true] }
    ];

    return (
        <section className="py-10 md:py-24 bg-[#FDF4FF]/30 font-sans overflow-hidden px-4 sm:px-6 lg:px-[150px]">
            <div className="w-full">
                <div className="w-full flex flex-col gap-0 border border-purple-100 rounded-[32px] overflow-hidden bg-white shadow-sm">
                    {categories.map((cat, idx) => (
                        <div key={idx} className={`${idx !== categories.length - 1 ? 'border-b border-purple-50' : ''}`}>
                            <button
                                onClick={() => setExpanded(expanded === cat ? null : cat)}
                                className={`w-full p-5 md:p-10 flex items-center justify-between transition-colors ${expanded === cat ? 'bg-[#7F00FF08]' : 'hover:bg-[#7F00FF03]'
                                    }`}
                            >
                                <span className={`text-base md:text-xl font-black ${expanded === cat ? 'text-[#7F00FF]' : 'text-[#1E1B4B]'}`}>
                                    {cat}
                                </span>
                                <svg
                                    width="14" height="8" viewBox="0 0 14 8" fill="none"
                                    className={`transform transition-transform duration-300 ${expanded === cat ? '' : 'rotate-180 opacity-50'}`}
                                >
                                    <path d="M1 7L7 1L13 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                                </svg>
                            </button>

                            {expanded === cat && cat === "Hosting Features" && (
                                <div className="px-5 md:px-10 pb-8 md:pb-12 pt-4 bg-[#7F00FF08] animate-in fade-in slide-in-from-top-2 duration-300 overflow-x-auto">
                                    <div className="min-w-[600px] md:min-w-0 flex flex-col gap-0">
                                        {hostingFeatures.map((feature, fIdx) => (
                                            <div key={fIdx} className={`grid grid-cols-7 py-4 md:py-6 items-center gap-4 ${fIdx !== hostingFeatures.length - 1 ? 'border-b border-purple-100/30' : ''}`}>
                                                <div className="col-span-1 flex items-center gap-2 relative group">
                                                    <span className={`text-[11px] md:text-base font-bold text-[#1E1B4B] ${feature.tooltip ? 'underline decoration-dotted decoration-[#7F00FF] cursor-help' : ''}`}>
                                                        {feature.name}
                                                    </span>
                                                    {feature.tooltip && (
                                                        <div className="absolute bottom-full left-0 mb-3 w-[280px] bg-[#7F00FF] text-white p-5 rounded-2xl text-xs font-medium shadow-2xl opacity-0 translate-y-2 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 transition-all z-20 leading-relaxed">
                                                            {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="18" height="14" viewBox="0 0 18 14" fill="none">
                                                                    <path d="M1 7L7 13L17 1" stroke="#1E1B4B" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                                                                </svg>
                                                            </div>
                                                        ) : (
                                                            <span className="text-[10px] md:text-sm font-bold text-gray-500">{val}</span>
                                                        )}
                                                    </div>
                                                ))}
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}

                            {expanded === cat && cat !== "Hosting Features" && (
                                <div className="px-10 pb-12 pt-4 bg-[#7F00FF08] text-gray-400 font-medium italic text-sm">
                                    Details coming soon...
                                </div>
                            )}
                        </div>
                    ))}
                </div>

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

export default ResellerFeaturesTable;