'use client'
import { useState } from 'react'
import { ChevronDown } from 'lucide-react'
import type { Dictionary } from '@/lib/i18n'

function FaqItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false)
  return (
    <div className="border border-slate-200 rounded-xl overflow-hidden">
      <button onClick={() => setOpen(!open)}
        className="w-full flex items-center justify-between px-6 py-4 text-left bg-white hover:bg-slate-50 transition-colors">
        <span className="font-semibold text-slate-800 pr-4">{q}</span>
        <ChevronDown size={18} className={`text-slate-400 flex-shrink-0 transition-transform duration-200 ${open ? 'rotate-180' : ''}`} />
      </button>
      {open && (
        <div className="px-6 py-4 bg-slate-50 border-t border-slate-200 text-slate-600 text-sm leading-relaxed">{a}</div>
      )}
    </div>
  )
}

export default function FaqSection({ d, standalone }: { d: Dictionary; standalone?: boolean }) {
  return (
    <section id="faq" className={`${standalone ? 'py-24' : 'py-24 border-t border-slate-100'} bg-white`}>
      <div className="max-w-3xl mx-auto px-4 sm:px-6">
        <div className="text-center mb-12">
          {standalone
            ? <h1 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">{d.faq.title}</h1>
            : <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">{d.faq.title}</h2>
          }
          <p className="text-slate-500 text-lg">{d.faq.subtitle}</p>
        </div>
        <div className="flex flex-col gap-3">
          {d.faq.items.map((item, i) => (
            <FaqItem key={i} q={item.q} a={item.a} />
          ))}
        </div>
      </div>
    </section>
  )
}