'use client'

import { useState } from 'react'
import { Plus, Minus } from 'lucide-react'

export function FAQSection() {
  const [openIndex, setOpenIndex] = useState<number | null>(0)

  const faqs = [
    {
      question: 'How do you approach market expansion strategy?',
      answer: 'We start with a comprehensive market assessment — analyzing market size, competitive landscape, regulatory environment, customer behavior, and entry barriers. Then we design a phased go-to-market plan with clear milestones, risk mitigation strategies, and KPIs. Our approach has helped 150+ businesses successfully enter new markets across 25+ industries.',
    },
    {
      question: 'How long does a typical engagement take?',
      answer: 'Engagement timelines vary by scope and complexity. A focused operational optimization project typically takes 8-12 weeks, market expansion strategies 12-16 weeks, and comprehensive brand repositioning 10-14 weeks. We provide detailed timelines during our proposal phase and maintain regular progress updates throughout.',
    },
    {
      question: 'How do you measure the success of your strategies?',
      answer: 'Every engagement begins with clearly defined KPIs tied to your business objectives — whether that\'s revenue growth, cost reduction, market share, customer retention, or brand metrics. We establish baseline measurements, set targets, and provide regular reporting dashboards so you can track impact in real-time.',
    },
    {
      question: 'Do you work with businesses of all sizes?',
      answer: 'We primarily serve mid-market to enterprise businesses with annual revenues of $10M+. However, we selectively work with high-growth startups that are preparing for rapid scaling. Our methodologies are designed for businesses that are serious about sustainable, measurable growth.',
    },
    {
      question: 'What industries do you specialize in?',
      answer: 'We have deep expertise across 25+ industries including FinTech, SaaS, Healthcare, Manufacturing, Retail, Logistics, Professional Services, and more. Our cross-industry perspective is a key differentiator — we bring best practices from diverse sectors to solve your unique challenges.',
    },
    {
      question: 'Do you offer ongoing support after the engagement?',
      answer: 'Yes. We offer retainer-based advisory services, quarterly strategy reviews, and on-demand consulting for our clients. Many of our clients maintain long-term partnerships with us as their strategic advisory board, benefiting from continuous optimization and market intelligence.',
    },
  ]

  return (
    <section className="py-24 bg-white">
      <div className="max-w-3xl mx-auto px-6 lg:px-8">
        <div className="text-center mb-16">
          <p className="text-sm font-semibold text-blue-600 uppercase tracking-wider mb-3">
            FAQs
          </p>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#081B33] mb-5">
            Questions?{' '}
            <span className="gradient-text">Answers.</span>
          </h2>
        </div>

        <div className="space-y-3">
          {faqs.map((faq, index) => (
            <div
              key={index}
              className="rounded-xl border border-slate-100 bg-white overflow-hidden hover:border-blue-100 transition-colors"
            >
              <button
                onClick={() => setOpenIndex(openIndex === index ? null : index)}
                className="w-full p-6 flex items-center justify-between text-left group"
              >
                <h3 className="text-base font-semibold text-[#081B33] group-hover:text-blue-600 transition-colors pr-4">
                  {faq.question}
                </h3>
                <div className={`flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-300 ${openIndex === index ? 'bg-blue-500 shadow-md shadow-blue-500/20' : 'bg-slate-50 group-hover:bg-blue-50'}`}>
                  {openIndex === index ? (
                    <Minus className="w-4 h-4 text-white" />
                  ) : (
                    <Plus className="w-4 h-4 text-slate-400 group-hover:text-blue-500 transition-colors" />
                  )}
                </div>
              </button>

              {openIndex === index && (
                <div className="px-6 pb-6">
                  <p className="text-sm text-slate-500 leading-relaxed">{faq.answer}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}