Two Column FAQ Accordion

const columns = [
  [
    {
      q: "What is included in the free tier?",
      a: "A single workspace, core features and enough storage to run a small project comfortably. There is no time limit and no card needed to begin.",
    },
    {
      q: "Can I invite people outside my company?",
      a: "Yes. Guests can be added to any shared space with view or comment access, and you decide exactly what each guest is allowed to see.",
    },
    {
      q: "How is my monthly bill calculated?",
      a: "You pay for the number of active seats in your workspace. Seats that stay unused for a full cycle are credited back automatically.",
    },
  ],
  [
    {
      q: "Do you have a mobile app?",
      a: "We offer apps for both major mobile platforms alongside the web version, and your work syncs across every device the moment you make a change.",
    },
    {
      q: "What happens to my data if I leave?",
      a: "You can export everything to open formats at any time. After you close an account we remove your data from live systems within thirty days.",
    },
    {
      q: "Is there a discount for non-profits?",
      a: "Registered charities and educational bodies receive a generous reduction on every paid plan. Reach out with proof of status and we will apply it.",
    },
  ],
];

export default function FaqTwoColumn() {
  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-5xl">
        <div className="max-w-2xl">
          <h2 className="text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
            Good to know
          </h2>
          <p className="mt-4 text-lg text-zinc-600 dark:text-zinc-400">
            A quick run through the things people ask most often, sorted so you can scan both columns at a glance.
          </p>
        </div>

        <div className="mt-12 grid gap-x-10 gap-y-4 md:grid-cols-2">
          {columns.map((group, col) => (
            <div key={col} className="space-y-4">
              {group.map((item) => (
                <details
                  key={item.q}
                  className="group rounded-xl border border-zinc-200 bg-zinc-50/60 p-5 transition open:border-emerald-500/40 open:bg-white open:shadow-sm dark:border-zinc-800 dark:bg-zinc-900/40 dark:open:border-emerald-500/40 dark:open:bg-zinc-900"
                >
                  <summary className="flex cursor-pointer list-none items-start justify-between gap-4 text-left text-base font-semibold text-zinc-900 marker:content-none dark:text-white">
                    <span>{item.q}</span>
                    <svg
                      aria-hidden
                      className="mt-1 h-5 w-5 shrink-0 text-emerald-600 transition duration-200 group-open:rotate-180 dark:text-emerald-400"
                      viewBox="0 0 20 20"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" d="M5 8l5 5 5-5" />
                    </svg>
                  </summary>
                  <p className="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
                    {item.a}
                  </p>
                </details>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}