import { CtaBand } from '@/components/marketing/CtaBand';
import { FaqList } from '@/components/marketing/FaqList';
import { JsonLd } from '@/components/marketing/JsonLd';
import { PageHero } from '@/components/marketing/PageHero';
import { Heading } from '@/components/ui/Heading';
import { Section } from '@/components/ui/Section';
import { allFaqItems, faqGroups } from '@/content/faq';
import { pageMetadata } from '@/lib/site';

export const metadata = pageMetadata({
  title: 'FAQ',
  description:
    'Answers about PintRush: joining without an app, player privacy, legality and wagering, original trivia and music rights, hardware, internet, cost, setup and moderation.',
  path: '/faq',
});

const structuredData = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: allFaqItems.map((item) => ({
    '@type': 'Question',
    name: item.question,
    acceptedAnswer: { '@type': 'Answer', text: item.answer.join(' ') },
  })),
};

export default function FaqPage() {
  return (
    <>
      <JsonLd data={structuredData} />
      <PageHero
        kicker="FAQ"
        title="Questions, answered"
        lead="Everything guests and venue owners usually ask — from “do I need an app?” to “is this legal in my bar?”"
      >
        <nav aria-label="FAQ sections" className="flex flex-wrap justify-center gap-2">
          {faqGroups.map((group) => (
            <a
              key={group.id}
              href={`#${group.id}`}
              className="inline-flex min-h-11 items-center rounded-full border border-line-strong/70 bg-raised/70 px-4 text-sm font-semibold text-muted transition-colors hover:border-violet-soft hover:text-fg"
            >
              {group.title}
            </a>
          ))}
        </nav>
      </PageHero>

      <Section spacing="lg">
        <div className="mx-auto flex max-w-3xl flex-col gap-14">
          {faqGroups.map((group) => (
            <section key={group.id} id={group.id} aria-labelledby={`${group.id}-title`} className="flex scroll-mt-28 flex-col gap-5">
              <Heading id={`${group.id}-title`} size="lg">
                {group.title}
              </Heading>
              <FaqList items={group.items} />
            </section>
          ))}
        </div>
      </Section>

      <CtaBand title="Still have a question?" lead="Apply for the pilot and ask us anything in the message box — or try the demo and see for yourself." />
    </>
  );
}