"use client";

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

const FAQS = [
  {
    q: "Is Use 2 PDF really free?",
    a: "Yes — every tool is completely free with no page limits, watermarks or daily caps. The site is supported by ads instead of subscriptions.",
  },
  {
    q: "Are my files private?",
    a: "Your files belong to you alone. They are stored scoped to your account, downloads require your login, and you can delete anything permanently at any time.",
  },
  {
    q: "What formats are supported?",
    a: "PDF, PNG, JPG and TXT today — including PDF↔image conversion, TXT↔PDF, OCR text extraction, and 15+ PDF editing tools. Office formats (Word, Excel, PowerPoint) are on the roadmap.",
  },
  {
    q: "Is there a file-size limit?",
    a: "Files up to 50 MB each are supported, with up to 10 files per upload.",
  },
  {
    q: "Do I need to install anything?",
    a: "No. Everything runs in your browser and on our servers — nothing to download or install.",
  },
];

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

  return (
    <div className="mx-auto max-w-2xl divide-y divide-slate-200 rounded-lg border border-slate-200 bg-white dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800">
      {FAQS.map((faq, i) => (
        <div key={faq.q}>
          <button
            type="button"
            className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left"
            aria-expanded={open === i}
            onClick={() => setOpen(open === i ? null : i)}
          >
            <span className="font-medium text-slate-900 dark:text-slate-100">{faq.q}</span>
            <ChevronDown
              className={`h-5 w-5 shrink-0 text-slate-400 transition-transform ${open === i ? "rotate-180" : ""}`}
            />
          </button>
          {open === i && (
            <p className="px-5 pb-4 text-sm text-slate-600 dark:text-slate-300">{faq.a}</p>
          )}
        </div>
      ))}
    </div>
  );
}