Accordion 02

---
/**
 * Accordion 02: A centred heading over six question cards that open one at a time.
 *
 * @block faq
 * @order 6
 */
import Section from '@/components/apogee/Section/Section.astro'
import SectionHeader from '@/components/apogee/SectionHeader/SectionHeader.astro'
import AccordionItem from '@/components/apogee/Accordion/AccordionItem.astro'

import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { FAQContent } from '@/components/apogee/sections/_shared/faq.ts'

/** @composable */
interface Props extends FAQContent {}

const {
  heading = 'Frequently asked questions',
  description = 'Everything you need to know about the product and billing.',
  items = [
    { question: 'Is there a free trial available?', answer: 'Yes, you can try us for free for 30 days. If you want, we will give you a free 30-minute onboarding call to get you up and running.' },
    { question: 'Can I change my plan later?', answer: 'Of course. Our pricing scales with your company. Chat to our friendly team to find a solution that works for you.' },
    { question: 'What is your cancellation policy?', answer: 'We understand that things change. You can cancel your plan at any time and we will refund you the difference already paid.' },
    { question: 'Can other info be added to an invoice?', answer: 'Yes. Add your company details, a purchase order number or a note in your billing settings, and every invoice carries them.' },
    { question: 'How does billing work?', answer: 'Plans are per workspace, not per account. You can upgrade one workspace and still have any number of free workspaces.' },
    { question: 'How do I change my account email?', answer: 'You can change the email address associated with your account by going to your account settings from a laptop or desktop.' },
  ],
} = Astro.props
---

<Section spacing="large" containerWidth="small">
  <SectionHeader heading={plain(heading)} description={description ? plain(description) : undefined} align="center" class="mb-16" />
  <div class="flex flex-col gap-2">
    {items.map((f, i) => (
      <AccordionItem title={f.question} open={i === 0} icon="plus" size="large" group="faq" variant="card" iconPosition="start">{f.answer}</AccordionItem>
    ))}
  </div>
</Section>