FAQs

"use client";

import { Accordion, AccordionItem } from "@waveinno/ui";

const FAQ = [
  ["Do I need new gates or cameras?", "No. It works with the barriers most car parks already have. Plate reading needs a camera; we can supply one or use yours."],
  ["What happens when the internet goes down?", "Gates and the attendant app keep working offline and sync when the connection comes back. Nothing is lost."],
  ["Which payments can drivers use?", "bKash, Nagad, Visa and Mastercard, and cash. Every payment lands in one report."],
  ["Can my attendants use it in Bangla?", "Yes. The attendant app and the dashboard both switch between Bangla and English."],
  ["How long does setup take?", "Most sites are live the same afternoon. We visit sites in Dhaka for free."],
];

export default function FaqSimple() {
  return (
    <section className="px-4 py-20 sm:px-6">
      <div className="mx-auto max-w-2xl">
        <h2 className="disp text-center text-[32px] font-bold leading-[1.12] tracking-[-0.03em] text-text sm:text-[38px]">Frequently asked</h2>
        <Accordion type="single" collapsible defaultValue="q0" className="mt-10">
          {FAQ.map(([q, a], i) => (
            <AccordionItem key={q} value={`q${i}`} title={q}>
              {a}
            </AccordionItem>
          ))}
        </Accordion>
        <p className="mt-8 text-center text-[14px] text-muted">
          Something else?{" "}
          <a href="#" className="font-semibold text-primary hover:underline">
            Ask us on WhatsApp
          </a>
        </p>
      </div>
    </section>
  );
}

const FAQ = [
  ["Is there a contract?", "No. Pay monthly and stop any time; your data stays yours to export."],
  ["Do I need new hardware?", "It works with the barriers you have. Plate reading needs a camera, which we can supply."],
  ["Does it work offline?", "Yes. Gates and the attendant app keep working and sync when the internet is back."],
  ["Which payments are supported?", "bKash, Nagad, Visa, Mastercard and cash, all in one report."],
  ["Is it in Bangla?", "The attendant app and the dashboard both switch between Bangla and English."],
  ["Who can see the money?", "You choose: roles decide who sees revenue, who can refund and who can open a gate."],
];

export default function FaqGrid() {
  return (
    <section className="px-4 py-20 sm:px-6">
      <div className="mx-auto max-w-6xl">
        <div className="max-w-xl">
          <h2 className="disp text-[32px] font-bold leading-[1.12] tracking-[-0.03em] text-text sm:text-[38px]">Questions, answered</h2>
          <p className="mt-3 text-[15.5px] text-body">
            The ones owners ask in the first call. More in the{" "}
            <a href="#" className="font-semibold text-primary hover:underline">
              help centre
            </a>
            .
          </p>
        </div>
        <dl className="mt-12 grid gap-x-12 gap-y-10 md:grid-cols-2 lg:grid-cols-3">
          {FAQ.map(([q, a]) => (
            <div key={q}>
              <dt className="text-[16px] font-semibold leading-6 text-text">{q}</dt>
              <dd className="mt-2 text-[14.5px] leading-[1.65] text-muted">{a}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}