'use client';

import React, { useState } from 'react';
import Image from 'next/image';

const AccordionItem = ({ question, answer, isOpen, onClick }: {
  question: string;
  answer: string;
  isOpen: boolean;
  onClick: () => void
}) => (
  <div className={`mb-3 rounded-[4px] overflow-hidden transition-all duration-300 ${isOpen ? 'bg-[#F9F6FF]' : 'bg-white shadow-sm border border-gray-100'}`}>
    <button
      onClick={onClick}
      className="w-full p-5 md:p-6 flex justify-between items-center text-left gap-4"
    >
      <span className="text-[13px] md:text-[14px] font-semibold text-[#1E1B4B]">{question}</span>
      <div className={`transition-transform duration-300 text-gray-500 ${isOpen ? 'rotate-180' : ''}`}>
        <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 1L7 7L13 1" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
    </button>

    <div className={`overflow-hidden transition-all duration-500 ease-in-out ${isOpen ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'}`}>
      <div className="p-5 md:px-6 md:pb-6 pt-0 text-[#64748B] leading-[1.8] text-[12px] md:text-[13px] font-medium">
        {answer}
      </div>
    </div>
  </div>
);

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

  const faqs = [
    {
      question: "What is Reseller Hosting",
      answer: "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."
    },
    {
      question: "What is WHM?",
      answer: "WHM (Web Host Manager) is a powerful program that allows administrative access to the back end of cPanel. It is used to manage multiple cPanel-based websites, create hosting packages, and configure server-wide settings."
    },
    {
      question: "Does Linux Reseller hosting comes with any client billing solutions?",
      answer: "Yes, many of our reseller plans come with integrated billing solutions like WHMCS, which allows you to automate client billing, support, and account provisioning."
    }
  ];

  return (
    <section className="bg-[#F8F9FF] py-16 md:py-24 overflow-hidden font-sans tracking-tight px-4 sm:px-6 lg:px-[100px]">
      <div className="container mx-auto max-w-[1280px]">
        <h2 className="text-4xl md:text-5xl lg:text-[56px] xl:text-[60px] font-medium text-[#0F172A] tracking-tight text-center mb-12 md:mb-20">
          Frequently Ask Questions
        </h2>

        <div className="flex flex-col lg:flex-row gap-16 lg:gap-24">
          {/* FAQ Accordion List */}
          <div className="flex-1">
            {faqs.map((faq, idx) => (
              <AccordionItem
                key={idx}
                question={faq.question}
                answer={faq.answer}
                isOpen={openIndex === idx}
                onClick={() => setOpenIndex(openIndex === idx ? null : idx)}
              />
            ))}
          </div>

          {/* Any Question Box */}
          <div className="lg:w-[400px] flex flex-col items-center text-center pt-0 px-8 pb-8 md:pt-0 md:px-12 md:pb-12 lg:-mt-6">
            <div className="relative w-48 h-48 md:w-64 md:h-64 mb-8">
              <Image
                src="/faq.png"
                alt="Any Question"
                fill
                className="object-contain"
              />
            </div>

            <h3 className="text-xl md:text-[22px] font-bold text-[#1E1B4B] mb-2">Any Question?</h3>
            <p className="text-[#1e1e1e] text-[12px] md:text-[13px] font-medium mb-10">You can ask anything you want to know Feedback</p>

            <div className="w-full flex flex-col gap-1 items-start px-4">
              <span className="text-[10px] font-medium text-gray-400">Let me know</span>
              <div className="w-full relative">
                <input
                  type="text"
                  placeholder="Enter Here"
                  className="w-full bg-transparent border border-gray-300 rounded-[2px] py-2 px-3 text-[12px] font-medium focus:outline-none focus:border-[#7F00FF] transition-all pr-8"
                />
                <button className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                  <svg width="10" height="10" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 1L13 13M1 13L13 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default FAQ;