import { useState } from "react";
import { ChevronDown } from "lucide-react";

export default function FAQ() {
  const [openIndex, setOpenIndex] = useState(null);

  const faqs = [
    {
      question: "What services does Digitro Solution offer?",
      answer:
        "Digitro Solution provides a full suite of digital services including Website Development, SEO, Social Media Marketing, Paid Ads (PPC), Graphic Design, and Mobile App Development to help businesses grow online.",
    },
    {
      question: "Can you help improve my website's Google ranking?",
      answer:
        "Yes! Our expert SEO team uses proven strategies such as keyword optimization, technical SEO, backlink building, and content marketing to boost your website's visibility on search engines.",
    },
    {
      question: "Do you offer custom website designs?",
      answer:
        "Absolutely. We design custom, responsive, and user-friendly websites tailored to your brand identity, goals, and customer experience.",
    },
    {
      question: "What is included in your mobile app development service?",
      answer:
        "Our mobile app development includes UI/UX design, native and cross-platform development, testing, deployment, and maintenance for both Android and iOS platforms.",
    },
    {
      question: "How do Paid Ads (PPC) help my business?",
      answer:
        "Paid Ads like Google Ads and Facebook Ads drive targeted traffic to your website instantly. We manage everything from campaign setup and keyword bidding to analytics and optimization.",
    },
    {
      question: "How do I get started with Digitro Solution?",
      answer:
        "Getting started is easy! Contact us through our website or email, and our team will schedule a discovery call to understand your needs and create a personalized strategy.",
    },
    {
      question: "Do you provide ongoing support after project delivery?",
      answer:
        "Yes, we offer post-launch support including technical assistance, maintenance, content updates, and performance tracking to ensure your digital assets continue to thrive.",
    },
    {
      question: "Can you manage my social media accounts?",
      answer:
        "Yes! We offer full-service social media management—from content creation and posting to engagement tracking and paid promotions—to grow your online community and brand visibility.",
    },
  ];

  const toggleAccordion = (index) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  const leftColumnFaqs = faqs.slice(0, Math.ceil(faqs.length / 2));
  const rightColumnFaqs = faqs.slice(Math.ceil(faqs.length / 2));

  const renderFAQ = (faq, index) => (
    <div key={index} className="border-b border-gray-200 pb-4">
      <div
        className="flex items-start gap-3 cursor-pointer"
        onClick={() => toggleAccordion(index)}
      >
        <div className="flex items-center justify-center w-8 h-8 mt-1 rounded-full bg-blue-900 text-white flex-shrink-0 transition-transform">
          <ChevronDown
            className={`w-5 h-5 transition-transform duration-300 ${
              openIndex === index ? "rotate-180" : ""
            }`}
          />
        </div>
        <h2 className="text-xl font-medium text-blue-900">{faq.question}</h2>
      </div>

      {openIndex === index && (
        <div className="mt-3 ml-11 text-gray-600 animate-fadeIn">
          <p>{faq.answer}</p>
        </div>
      )}
    </div>
  );

  return (
    <div className="max-w-7xl mx-auto px-8 py-16 ">
      <div className="max-w-7xl mx-auto px-8 text-center mb-12">
        <h2 className="text-4xl font-bold text-blue-900 mb-4">
          Frequently Asked Questions
        </h2>
        <p className="text-gray-600 text-lg">
          Explore the wide range of digital solutions we offer to help your
          business grow.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div className="space-y-6">
          {leftColumnFaqs.map((faq, index) => renderFAQ(faq, index))}
        </div>
        <div className="space-y-6">
          {rightColumnFaqs.map((faq, index) =>
            renderFAQ(faq, index + leftColumnFaqs.length)
          )}
        </div>
      </div>
    </div>
  );
}
