"use client";

import { useState } from "react";

const FAQS = [
  {
    q: "WHAT DO I ACTUALLY GET?",
    a: "All premium components, every visual system, the CLI, and source files. No drip-feed.",
  },
  {
    q: "REFUND POLICY?",
    a: "14 days, no questions, no forms. Reply to the receipt and it's done.",
  },
  {
    q: "TEAM LICENSES?",
    a: "One seat covers you. Team plans cover up to 25 developers under one org.",
  },
  {
    q: "DO YOU DO CUSTOM WORK?",
    a: "Not anymore. We pour that energy back into the kit instead.",
  },
];

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

  return (
    <section className="bg-[#FAFAF8] px-8 py-16 text-[#111111]">
      <div className="mx-auto max-w-2xl">
        <h2
          className="mb-8 text-[34px] font-bold uppercase leading-[0.92] tracking-[-0.02em] md:text-[46px]"
          style={{ fontFamily: "Arial, Helvetica, sans-serif" }}
        >
          QUESTIONS?
        </h2>

        <div className="flex flex-col gap-3">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div
                key={f.q}
                className={`border-2 border-[#111111] transition-colors ${
                  isOpen ? "bg-[#111111] text-[#FAFAF8]" : "bg-[#FAFAF8]"
                }`}
              >
                <button
                  type="button"
                  onClick={() => setOpen(isOpen ? null : i)}
                  aria-expanded={isOpen}
                  className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left"
                >
                  <span className="font-mono text-[13px] font-bold tracking-[0.02em]">
                    {f.q}
                  </span>
                  <span
                    className={`grid h-7 w-7 shrink-0 place-items-center border-2 text-[16px] font-bold leading-none ${
                      isOpen
                        ? "border-[#FAFAF8] bg-[#FAFAF8] text-[#111111]"
                        : "border-[#111111]"
                    }`}
                  >
                    {isOpen ? "–" : "+"}
                  </span>
                </button>
                {isOpen && (
                  <p className="border-t-2 border-[#FAFAF8]/30 px-5 pb-5 pt-3 text-[14px] leading-[1.55] text-[#FAFAF8]/90">
                    {f.a}
                  </p>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
Bordered FAQ Toggle

QUESTIONS?
