FAQ With Side Heading And CTA

const faqs = [
  {
    q: "How do you keep pricing so simple?",
    a: "One flat rate per seat covers every feature. There are no hidden add-ons, no usage meters and no surprise line items when your bill arrives.",
  },
  {
    q: "Can I try the paid features first?",
    a: "Every account starts with a fourteen day trial of the full plan. When it ends you simply choose whether to continue, with nothing charged unless you opt in.",
  },
  {
    q: "What sort of onboarding help do you offer?",
    a: "Smaller teams get guided tutorials and templates, while larger accounts are paired with a specialist who helps migrate data and train the team.",
  },
  {
    q: "How often do you ship improvements?",
    a: "We release small updates most weeks and share a public roadmap so you can see what is coming and vote on the ideas that matter to you.",
  },
];

export default function FaqSideHeadingCta() {
  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-[minmax(0,22rem)_1fr] lg:gap-16">
        <div className="lg:sticky lg:top-16 lg:self-start">
          <p className="text-sm font-semibold uppercase tracking-widest text-rose-600 dark:text-rose-400">
            Support
          </p>
          <h2 className="mt-3 text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
            Frequently asked questions
          </h2>
          <p className="mt-4 text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
            Cannot find what you are looking for? Our team reads every message and is happy to help you decide.
          </p>

          <div className="mt-8 rounded-2xl border border-zinc-200 bg-zinc-50 p-6 dark:border-zinc-800 dark:bg-zinc-900/50">
            <div className="flex items-center gap-3">
              <span className="grid h-10 w-10 place-items-center rounded-full bg-rose-600/10 text-rose-600 dark:text-rose-400">
                <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 5h16v12H7l-3 3V5z" />
                </svg>
              </span>
              <div>
                <p className="text-sm font-semibold text-zinc-900 dark:text-white">Still have questions?</p>
                <p className="text-sm text-zinc-500 dark:text-zinc-400">We usually reply within a few hours.</p>
              </div>
            </div>
            <a
              href="#"
              className="mt-5 flex w-full items-center justify-center rounded-lg bg-rose-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-rose-500"
            >
              Get in touch
            </a>
          </div>
        </div>

        <div className="divide-y divide-zinc-200 dark:divide-zinc-800">
          {faqs.map((item) => (
            <details key={item.q} className="group py-5 first:pt-0">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 text-left text-lg font-semibold text-zinc-900 marker:content-none dark:text-white">
                <span>{item.q}</span>
                <span
                  aria-hidden
                  className="grid h-7 w-7 shrink-0 place-items-center rounded-md bg-zinc-100 text-zinc-500 transition group-open:bg-rose-600 group-open:text-white group-open:rotate-45 dark:bg-zinc-800 dark:text-zinc-400"
                >
                  <svg className="h-4 w-4" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2">
                    <path strokeLinecap="round" d="M10 4v12M4 10h12" />
                  </svg>
                </span>
              </summary>
              <p className="mt-3 max-w-2xl text-[15px] leading-relaxed text-zinc-600 dark:text-zinc-400">
                {item.a}
              </p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}