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

const ResellerTrust: React.FC = () => {
    const [openIndex, setOpenIndex] = useState<number | null>(0);

    const trustCards = [
        {
            title: "30 Day Money Back Guarantee",
            icon: (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    <path d="M12 8V12L14 14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
            )
        },
        {
            title: "99.99% Uptime Guarantee",
            highlight: true,
            icon: (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    <path d="M12 18V12L15 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
            )
        },
        {
            title: "24/7 Support Guarantee",
            icon: (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M11 12H13M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
            )
        },
        {
            title: "Daily/Weekly Backup Guarantee",
            icon: (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    <path d="M8 12L11 15L16 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
            )
        }
    ];

    const faqs = [
        {
            q: "What is Reseller Hosting",
            a: "Reseller hosting is a set of resources that may be distributed to multiple users independently. With Reseller Hosting you have the power of providing hosting solutions without having the servers and data centers at all, with it you can create custom hosting plans, hosting infrastructure and you can use your own branding name in order to provide shared hosting to your customers."
        },
        { q: "What is WHM?", a: "WHM (Web Host Manager) is a dashboard used by Resellers to manage dozens or hundreds of cPanel accounts effortlessly." },
        { q: "Does Linux Reseller hosting comes with any client billing solutions?", a: "Yes, our plans include premium billing systems like WHMCS to automate your hosting business." },
        { q: "How is technical support handled for my clients when I use Reseller Hosting for my Web Hosting business?", a: "We provide 24/7 support to you. You are responsible for supporting your own clients, which helps you maintain your brand's authority." },
        { q: "Is there a brandable control panel?", a: "Yes, you can fully brand cPanel/WHM with your own logo, color scheme, and company details." },
        { q: "How do I migrate my Reseller Hosting to ZtHosting from my existing web host?", a: "Our dedicated migration team handles the entire process for free, ensuring zero downtime for your customers." }
    ];

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

                {/* Why Trust Us? Cards */}
                <div className="mb-32">
                    <h2 className="text-3xl md:text-7xl lg:text-[88px] font-black text-[#1E1B4B] text-center mb-12 md:mb-24 tracking-tight">
                        Why Trust Us?
                    </h2>

                    <div className="flex lg:grid lg:grid-cols-4 gap-6 md:gap-8 items-stretch max-w-7xl mx-auto overflow-x-auto no-scrollbar pb-8 lg:pb-0 snap-x">
                        {trustCards.map((card, idx) => (
                            <div
                                key={idx}
                                className="rounded-[24px] md:rounded-[32px] p-6 md:p-10 flex flex-col gap-6 md:gap-10 transition-colors duration-300 items-center text-center bg-[#FAFAFA] hover:bg-[#7F00FF] border border-gray-100/50 hover:border-[#7F00FF] group cursor-pointer w-[240px] md:w-auto flex-shrink-0 snap-start"
                            >
                                <div className="w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center bg-[#7F00FF10] transition-colors duration-300 ring-4 md:ring-8 ring-[#7F00FF05] group-hover:bg-white/15 group-hover:ring-white/5">
                                    <div className="text-[#7F00FF] group-hover:text-white transition-colors duration-300">
                                        {card.icon}
                                    </div>
                                </div>

                                <h3 className="text-xl font-black tracking-tight leading-tight max-w-[200px] text-[#1E1B4B] group-hover:text-white transition-colors duration-300">
                                    {card.title}
                                </h3>
                            </div>
                        ))}
                    </div>
                </div>

                {/* FAQ's Section */}
                <div>
                    <h2 className="text-3xl md:text-6xl lg:text-[96px] font-black text-[#1E1B4B] text-center mb-12 md:mb-20 tracking-tight">
                        FAQ's
                    </h2>

                    <div className="max-w-4xl mx-auto flex flex-col gap-4">
                        {faqs.map((faq, idx) => (
                            <div key={idx} className="rounded-2xl overflow-hidden border border-gray-100 shadow-sm transition-all duration-300">
                                <button
                                    onClick={() => setOpenIndex(openIndex === idx ? null : idx)}
                                    className={`w-full p-5 md:p-7 text-left flex items-center justify-between transition-colors ${openIndex === idx ? 'bg-[#7F00FF08]' : 'bg-white hover:bg-gray-50'
                                        }`}
                                >
                                    <span className={`text-[13px] md:text-base font-bold tracking-tight ${openIndex === idx ? 'text-[#7F00FF]' : 'text-[#1E1B4B]'}`}>
                                        {faq.q}
                                    </span>
                                    <svg
                                        width="14" height="8" viewBox="0 0 14 8" fill="none"
                                        className={`transform transition-transform duration-300 ${openIndex === idx ? 'rotate-180' : ''}`}
                                    >
                                        <path d="M1 1L7 7L13 1" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                                    </svg>
                                </button>
                                {openIndex === idx && (
                                    <div className="p-5 md:p-7 pt-0 bg-[#7F00FF08] text-gray-500 text-xs md:text-base font-medium leading-[1.8] animate-in fade-in slide-in-from-top-2 duration-300">
                                        <div className="max-w-[750px]">
                                            {faq.a}
                                        </div>
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                </div>

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

export default ResellerTrust;