FAQ

import { LuMessageCircle } from "react-icons/lu";
import { Accordion, AccordionItem } from "@nexera-ui/react";

const GROUPS = [
  {
    id: "leave",
    title: "Leave and time off",
    items: [
      {
        q: "How many days of annual leave do I get?",
        a: "25 days a year plus public holidays, rising by one day for every two years at Northwind, up to 30 days. Part-time colleagues get the same pro rata.",
      },
      {
        q: "Can I carry unused leave into next year?",
        a: "Up to 5 days, which you need to use by 31 March. Anything above that is lost unless your manager and People Ops agree an exception in writing.",
      },
      {
        q: "What happens if I am ill during my holiday?",
        a: "Tell your manager on the first day you are ill and send a fit note within 7 days. We turn those days back into annual leave.",
      },
    ],
  },
  {
    id: "pay",
    title: "Pay and benefits",
    items: [
      {
        q: "When is payday?",
        a: "The last working day of each month. Payslips appear in Northwind HR two days before.",
      },
      {
        q: "How do I change my bank details?",
        a: "Go to Profile, then Pay. Changes made before the 20th apply to that month's pay; later changes apply the month after.",
      },
      {
        q: "Does Northwind match pension contributions?",
        a: "Yes. We match up to 6% of your salary when you pay at least 4% yourself. You can change your rate once a quarter.",
      },
    ],
  },
];

/** FAQ: grouped questions that expand into answers, with a way to contact People Ops. */
export default function Faq() {
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-3xl gap-8">
        <header className="grid gap-2 text-center">
          <h2 className="text-heading-h2 text-primary">Frequently asked questions</h2>
          <p className="text-body-large text-secondary">
            Answers from the Northwind People Ops handbook.
          </p>
        </header>
        {GROUPS.map((group) => (
          <section key={group.id} aria-labelledby={`faq-${group.id}`} className="grid gap-3">
            <h3 id={`faq-${group.id}`} className="text-heading-h4 text-primary">
              {group.title}
            </h3>
            <Accordion variant="card" allowsMultipleExpanded>
              {group.items.map((item) => (
                <AccordionItem key={item.q} title={item.q} level={4}>
                  {item.a}
                </AccordionItem>
              ))}
            </Accordion>
          </section>
        ))}
        <aside className="flex flex-wrap items-center gap-4 rounded-xl border border-default bg-surface p-5">
          <span className="grid size-10 shrink-0 place-items-center rounded-full bg-brand-subtle text-brand-text">
            <LuMessageCircle aria-hidden />
          </span>
          <div className="grid min-w-0 flex-1 gap-0.5">
            <p className="text-body-strong text-primary">Still have a question?</p>
            <p className="text-body-small text-secondary">
              People Ops replies within one working day.
            </p>
          </div>
          <a
            href="#contact-people-ops"
            className="text-body-strong text-brand-text underline underline-offset-4"
          >
            Contact People Ops
          </a>
        </aside>
      </div>
    </div>
  );
}