Split-Row Spaceflight FAQ

import {
  FaqList,
  FaqListAnswer,
  FaqListItem,
  FaqListQuestion,
} from "@/components/editorial/faq-list"
import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionContent,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Before you fly",
} as const

const FAQS = [
  {
    id: "book",
    question: "How do I book a seat?",
    answer:
      "Pick a window on the manifest and hold the seat with a deposit. Flight dynamics confirms within a day, with the launch date and the delta-v it costs.",
  },
  {
    id: "training",
    question: "Do I need training first?",
    answer:
      "Six hours in the pool for every hour you will spend on the surface, and one afternoon in the centrifuge. Most people clear it in a fortnight.",
  },
  {
    id: "pack",
    question: "What can I bring?",
    answer:
      "Two kilograms in a soft bag. No glass, no aerosols, nothing that minds a vacuum. Cameras are welcome; the window seats are fought over.",
  },
  {
    id: "scrub",
    question: "What happens if the launch is scrubbed?",
    answer:
      "You move to the next window at no charge. Three scrubs in a row and the deposit comes back in full, with a tour of the firing room by way of apology.",
  },
  {
    id: "return",
    question: "Is the return flight included?",
    answer:
      "Every manifest lists the way home. Surface stays run from four hours to three days, and the capsule waits in orbit either way.",
  },
  {
    id: "group",
    question: "Can I book for a group?",
    answer:
      "Up to six seats on one booking, with one point of contact for the crew. Larger parties charter the whole capsule.",
  },
] as const

export default function SplitFaq01() {
  return (
    <Section>
      <SectionHeader>
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
      </SectionHeader>
      <SectionContent>
        <FaqList variant="split">
          {FAQS.map((faq) => (
            <FaqListItem key={faq.id}>
              <FaqListQuestion>{faq.question}</FaqListQuestion>
              <FaqListAnswer>{faq.answer}</FaqListAnswer>
            </FaqListItem>
          ))}
        </FaqList>
      </SectionContent>
    </Section>
  )
}

pnpm dlx shadcn add @01orbital/split-faq-01

npx shadcn add @01orbital/split-faq-01

yarn shadcn add @01orbital/split-faq-01

bunx --bun shadcn add @01orbital/split-faq-01