import { useState } from 'react';
import { ChevronDown } from 'lucide-react';
import { cn } from '@/lib/cn';
// FAQ content lives in routes-meta so the FAQPage JSON-LD stays in lockstep with the UI.
import { FAQ_ITEMS as ITEMS } from '@/seo/routes-meta';

export function Faq() {
  const [open, setOpen] = useState<number | null>(0);

  return (
    <section id="faq" className="section">
      <div className="container">
        <div className="mx-auto max-w-2xl text-center">
          <span className="eyebrow">FAQ</span>
          <h2 className="mt-4 text-3xl md:text-5xl font-bold text-ink-950">
            Frequently asked questions
          </h2>
          <p className="mt-4 text-lg text-ink-600">Everything you need to know about eLegal Software.</p>
        </div>

        <div className="mx-auto mt-12 max-w-3xl divide-y divide-ink-100 rounded-2xl border border-ink-100 bg-white">
          {ITEMS.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={item.q}>
                <button
                  type="button"
                  className="flex w-full items-center justify-between gap-4 px-6 py-5 text-left"
                  onClick={() => setOpen(isOpen ? null : i)}
                  aria-expanded={isOpen}
                >
                  <span className="text-sm md:text-base font-semibold text-ink-900">{item.q}</span>
                  <ChevronDown
                    className={cn(
                      'h-4 w-4 flex-none text-ink-500 transition-transform',
                      isOpen && 'rotate-180 text-brand-500',
                    )}
                  />
                </button>
                <div
                  className={cn(
                    'grid overflow-hidden transition-all duration-300 ease-out',
                    isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
                  )}
                >
                  <div className="min-h-0">
                    <p className="px-6 pb-5 text-sm text-ink-600 leading-relaxed">{item.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}