FAQ — with contact sidebar

import { BookOpen, Mail, MessageCircle, Phone, Plus } from "lucide-react";

const faqs = [
  { q: "Is there really a free plan?", a: "Yes. Starter is free for as long as you like and includes ten invoices a month, card and bank payments and reminders." },
  { q: "Can my clients pay by card?", a: "They can pay by card, bank transfer or wallet straight from the invoice email. Money lands in your account in two working days." },
  { q: "What happens when an invoice is late?", a: "Tallybook sends polite reminders on the schedule you choose and can add a late fee automatically." },
  { q: "Do you work with my accounting software?", a: "Invoices and payments sync to the most popular accounting tools every hour." },
  { q: "Can I bring my existing clients and invoices?", a: "Upload a spreadsheet or connect your old tool and we import clients, items and open invoices in a few minutes." },
];

const contacts = [
  { icon: Mail, label: "help@tallybook.example", href: "mailto:help@tallybook.example" },
  { icon: Phone, label: "+1 555 0142 · weekdays 8–6", href: "tel:+15550142" },
  { icon: BookOpen, label: "Read the getting-started guide", href: "/help/getting-started" },
];

export function FaqWithContact({ onChat }: { onChat?: () => void }) {
  return (
    <section aria-labelledby="faq-side-title" className="bg-bg px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto max-w-6xl">
        <h2 id="faq-side-title" className="text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Before you sign up</h2>

        <div className="mt-10 grid items-start gap-9 lg:grid-cols-[1.7fr_1fr] lg:gap-16">
          <div className="divide-y divide-border border-y border-border">
            {faqs.map((f, i) => (
              <details key={f.q} open={i === 0} className="group">
                <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-[18px] text-[15px] font-medium text-fg [&::-webkit-details-marker]:hidden">
                  {f.q}
                  <Plus className="size-[18px] shrink-0 text-fg-subtle transition group-open:rotate-45 group-open:text-primary" aria-hidden />
                </summary>
                <p className="pb-[18px] pr-9 text-sm leading-relaxed text-fg-muted">{f.a}</p>
              </details>
            ))}
          </div>

          <aside aria-labelledby="faq-side-help" className="grid gap-[18px] rounded-xl border border-border bg-surface p-7 lg:sticky lg:top-6">
            <div className="flex items-center justify-between">
              <div className="flex [&>*]:-ml-2 [&>*]:border-2 [&>*]:border-surface [&>*:first-child]:ml-0" aria-hidden>
                {["SM", "JO", "RK"].map((i) => (
                  <span key={i} className="grid size-7 place-items-center rounded-full bg-primary-soft text-[11px] font-medium text-primary-soft-fg">{i}</span>
                ))}
              </div>
              <span className="inline-flex items-center gap-1.5 text-[12.5px] text-success-fg">
                <span className="size-[7px] rounded-full bg-success" aria-hidden />Online now
              </span>
            </div>
            <div>
              <h3 id="faq-side-help" className="text-base font-semibold text-fg">Still have a question?</h3>
              <p className="mt-1.5 text-sm leading-relaxed text-fg-muted">Our support team are real people in your time zone. Most chats get a reply in under five minutes.</p>
            </div>
            <button type="button" onClick={onChat} className="inline-flex h-9 items-center justify-center gap-1.5 rounded bg-primary text-sm font-medium text-primary-fg transition hover:bg-primary-hover">
              <MessageCircle className="size-4" aria-hidden />Start a chat
            </button>
            <ul className="grid gap-3 border-t border-border pt-4 text-[13.5px]">
              {contacts.map(({ icon: Icon, label, href }) => (
                <li key={label} className="flex items-center gap-2.5">
                  <Icon className="size-4 shrink-0 text-fg-subtle" aria-hidden />
                  <a href={href} className="text-fg hover:underline">{label}</a>
                </li>
              ))}
            </ul>
          </aside>
        </div>
      </div>
    </section>
  );
}