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

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

  const faqs = [
    {
      q: "How to install WordPress?",
      a: "First, you need to have the account to have access to customer control panel from there click WordPress and the setup will begin and instructions will be provided during the installation."
    },
    { q: "What is WHM?", a: "WHM (Web Host Manager) is a powerful program that allows administrative access to the back end of cPanel." },
    { q: "Does Linux Reseller hosting comes with any client billing solutions?", a: "Yes, our reseller plans often include billing software like WHMCS to help you manage your clients." },
    { q: "How is technical support handled for my clients when I use Reseller Hosting for my Web Hosting business?", a: "We provide support to you, the reseller. You then provide support to your own clients, maintaining your own brand identity." },
    { q: "Is there a brandable control panel?", a: "Absolutely. You can brand the cPanel with your own logo and custom styles." },
    { q: "How do I migrate my Reseller Hosting to ZtHosting from my existing web host?", a: "We offer free migration services. Our team will handle the transfer of all your accounts and data seamlessly." }
  ];

  const trustCards = [
  {
    title: "30 Day Money Back Guarantee",
    icon: (
      <div className="flex items-center justify-center w-[64px] h-[64px] rounded-full bg-[#7B00FF]/5">
        <div className="flex items-center justify-center w-[48px] h-[48px] rounded-full bg-[#7B00FF]/15">
          <div className="flex items-center justify-center w-[34px] h-[34px] rounded-full bg-[#7B00FF] text-white">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-[18px] h-[18px]">
              <path d="M3 18v-6a9 9 0 0 1 18 0v6" />
              <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" />
              <circle cx="12" cy="13" r="1" fill="currentColor" />
              <path d="M10 13h4" />
            </svg>
          </div>
        </div>
      </div>
    )
  },
  {
    title: "99.99% Uptime Guarantee",
    icon: (
      <div className="flex items-center justify-center w-[64px] h-[64px] rounded-full bg-white/10">
        <div className="flex items-center justify-center w-[48px] h-[48px] rounded-full bg-white/20">
          <div className="flex items-center justify-center w-[34px] h-[34px] rounded-full bg-[#7B00FF] text-white">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-[18px] h-[18px]">
              <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
              <path d="M3 3v5h5" />
              <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
              <path d="M16 21v-5h5" />
              <circle cx="12" cy="12" r="1.5" fill="currentColor" />
            </svg>
          </div>
        </div>
      </div>
    )
  },
  {
    title: "24/7 Support Guarantee",
    icon: (
      <div className="flex items-center justify-center w-[64px] h-[64px] rounded-full bg-[#7B00FF]/5">
        <div className="flex items-center justify-center w-[48px] h-[48px] rounded-full bg-[#7B00FF]/15">
          <div className="flex items-center justify-center w-[34px] h-[34px] rounded-full bg-[#7B00FF] text-white">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-[18px] h-[18px]">
              <circle cx="12" cy="13" r="7" />
              <polyline points="12 9 12 13 14 15" />
              <path d="M10 2h4" />
            </svg>
          </div>
        </div>
      </div>
    )
  },
  {
    title: "Daily/Weekly Backup Guarantee",
    icon: (
      <div className="flex items-center justify-center w-[64px] h-[64px] rounded-full bg-[#7B00FF]/5">
        <div className="flex items-center justify-center w-[48px] h-[48px] rounded-full bg-[#7B00FF]/15">
          <div className="flex items-center justify-center w-[34px] h-[34px] rounded-full bg-[#7B00FF] text-white">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-[18px] h-[18px]">
              <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
              <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
            </svg>
          </div>
        </div>
      </div>
    )
  }
];

  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]">

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

          <div className="flex lg:grid lg:grid-cols-4 gap-3 md:gap-8 items-stretch max-w-7xl mx-auto overflow-x-auto pb-4 lg:pb-0 lg:overflow-x-visible snap-x snap-mandatory scrollbar-hide">
            {trustCards.map((card, idx) => (
              <div
                key={idx}
                className="rounded-[16px] md:rounded-[32px] p-4 md:p-10 flex flex-col gap-3 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-[140px] md:w-auto min-w-[140px] md:min-w-0 snap-start flex-shrink-0 md:flex-shrink"
              >
                <div className="w-10 h-10 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-xs md: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 Section */}
        <div>
          <h2 className="text-4xl md:text-6xl lg:text-[80px] font-black text-[#1E1B4B] text-center mb-16 tracking-tight">
            Why Should We Be Trusted?
          </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-6 text-left flex items-center justify-between transition-colors ${openIndex === idx ? 'bg-[#7F00FF08]' : 'bg-white hover:bg-gray-50'
                    }`}
                >
                  <span className={`text-sm md:text-base font-bold ${openIndex === idx ? 'text-[#141414]' : '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" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </button>
                {openIndex === idx && (
                  <div className="p-6 pt-0 bg-[#7F00FF08] text-gray-500 text-sm md:text-base font-medium leading-relaxed animate-in fade-in slide-in-from-top-2 duration-300">
                    {faq.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

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

export default WordPressTrust;