FAQ — boxed accordion with topics

"use client";
import { useState } from "react";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";

const topics = {
  Bookings: [
    { q: "How do clients book with me?", a: "Share your booking link or add the button to your website. Clients see only the times you are free and pick one in a few taps." },
    { q: "What if a client needs to reschedule?", a: "Every confirmation has a reschedule link. You choose how late they can change, and anything later comes to you to approve." },
    { q: "Will it sync with my calendar?", a: "Slotwise syncs both ways with the calendar on your phone, so personal plans block out booking times too." },
  ],
  Payments: [
    { q: "Can I take a deposit when someone books?", a: "Yes. Ask for a fixed amount or a percentage at booking, and it comes off the final bill automatically." },
  ],
  Teams: [
    { q: "Does it work for a team?", a: "Each person gets their own calendar and hours, and clients can book a specific person or whoever is free first." },
  ],
};

type Topic = keyof typeof topics;

export function FaqBoxedAccordion() {
  const [topic, setTopic] = useState<Topic>("Bookings");
  return (
    <section aria-labelledby="faq-boxed-title" className="bg-surface px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto max-w-3xl">
        <div className="text-center">
          <h2 id="faq-boxed-title" className="text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Frequently asked questions</h2>
          <p className="mt-4 text-base text-fg-muted sm:text-lg">Everything about booking, deposits and reminders with Slotwise.</p>
        </div>

        <div role="tablist" aria-label="Question topics" className="mx-auto mt-8 flex w-fit gap-0.5 rounded-lg bg-surface-2 p-[3px]">
          {(Object.keys(topics) as Topic[]).map((t) => (
            <button key={t} type="button" role="tab" aria-selected={topic === t} onClick={() => setTopic(t)}
              className="h-[30px] rounded px-3 text-[13px] font-medium text-fg-muted transition aria-selected:bg-bg aria-selected:text-fg aria-selected:shadow-sm">
              {t}
            </button>
          ))}
        </div>

        <div className="mt-7 grid gap-2.5" role="tabpanel">
          {topics[topic].map((f, i) => (
            <details key={f.q} open={i === 0} name="faq-boxed"
              className="group rounded-lg border border-border bg-bg transition-colors open:border-border-strong open:bg-surface">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-[18px] text-[15px] font-medium text-fg [&::-webkit-details-marker]:hidden">
                {f.q}
                <span className={cn("grid size-7 shrink-0 place-items-center rounded-full bg-surface-2 text-fg-muted transition",
                  "group-open:rotate-180 group-open:bg-primary group-open:text-primary-fg")} aria-hidden>
                  <ChevronDown className="size-4" />
                </span>
              </summary>
              <p className="px-5 pb-5 pr-16 text-sm leading-relaxed text-fg-muted">{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}