"use client";

import { useState } from "react";

const DATA: Record<string, { q: string; a: string }[]> = {
  Billing: [
    { q: "When am I charged?", a: "Once, at checkout. Lifetime access, no renewals." },
    { q: "Can I expense it?", a: "Yes — every purchase comes with a proper VAT invoice." },
  ],
  License: [
    { q: "Commercial use?", a: "Unlimited client and commercial projects are included." },
    { q: "Can I open-source a build?", a: "Yes, as long as the kit isn't the product being sold." },
  ],
  Support: [
    { q: "How do I get help?", a: "Discord for chat, email for anything account-related." },
    { q: "Response time?", a: "Usually within a day, often much faster." },
  ],
};

export function CategoryFaq() {
  const tabs = Object.keys(DATA);
  const [tab, setTab] = useState(tabs[0]);

  return (
    <section className="bg-[#F4F3EF] px-8 py-16 text-[#111111]">
      <div className="mx-auto max-w-2xl">
        <h2
          className="mb-6 text-center leading-[1] tracking-[-0.01em]"
          style={{
            fontFamily: "'Instrument Serif', Georgia, serif",
            fontSize: "clamp(30px, 4vw, 44px)",
          }}
        >
          How can we help?
        </h2>

        <div className="mb-8 flex flex-wrap justify-center gap-2">
          {tabs.map((t) => (
            <button
              key={t}
              type="button"
              onClick={() => setTab(t)}
              className={`rounded-full px-4 py-2 text-[13px] transition-colors ${
                tab === t
                  ? "bg-[#111111] text-[#FAFAF8]"
                  : "border border-[#1111111A] bg-[#FAFAF8] text-[#6B6B66] hover:text-[#111111]"
              }`}
            >
              {t}
            </button>
          ))}
        </div>

        <div className="space-y-3">
          {DATA[tab].map((f) => (
            <div
              key={f.q}
              className="rounded-2xl border border-[#1111111A] bg-[#FAFAF8] p-5"
            >
              <h3 className="text-[15px] font-medium">{f.q}</h3>
              <p className="mt-1.5 text-[13.5px] leading-[1.55] text-[#6B6B66]">
                {f.a}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Category FAQ

How can we help?

When am I charged?

Can I expense it?
