02 - Accordion with dividing lines

---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Container, Stack, Text, Inline, Heading } from 'lism-css/astro';
import { Accordion } from '@lism-css/ui/astro/Accordion';
---

<DemoLayout title="02 - Accordion with dividing lines">
  <Container isWrapper="m" bgc="base" py="50" hasGutter>
    <Stack g="50">
      {/* Section heading */}
      <Stack g="20" ai="center">
        <Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">Frequently Asked Questions</Heading>
        <Inline class="u--trim" fz="s" o="ppp" ta="center">FAQ</Inline>
      </Stack>
      {/* Collapsible Q&A list separated by dividing lines. Questions get a background color on hover */}
      <Accordion.Root layout="stack" bd-be>
        <Accordion.Item bd-bs>
          <Accordion.Heading>
            <Accordion.Button py="30" px="15" hov="-bgc">Can I try it for free?</Accordion.Button>
          </Accordion.Heading>
          <Accordion.Panel py="30" px="15" pbs="15">
            <Text>
              Every plan comes with a 14-day free trial. All features are available during the trial, and no credit card is required to get started.
            </Text>
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item bd-bs>
          <Accordion.Heading>
            <Accordion.Button py="30" px="15" hov="-bgc">Which payment methods can I use?</Accordion.Button>
          </Accordion.Heading>
          <Accordion.Panel py="30" px="15" pbs="15">
            <Text>
              We accept major credit cards and bank transfers. Choosing annual billing saves you the equivalent of two months compared to monthly
              billing.
            </Text>
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item bd-bs>
          <Accordion.Heading>
            <Accordion.Button py="30" px="15" hov="-bgc">Can I change my plan later?</Accordion.Button>
          </Accordion.Heading>
          <Accordion.Panel py="30" px="15" pbs="15">
            <Text>
              You can change it at any time. Upgrades take effect immediately and the difference is prorated, while downgrades apply from the next
              renewal date.
            </Text>
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item bd-bs>
          <Accordion.Heading>
            <Accordion.Button py="30" px="15" hov="-bgc">What happens to my data after I cancel?</Accordion.Button>
          </Accordion.Heading>
          <Accordion.Panel py="30" px="15" pbs="15">
            <Text>
              We keep your data for 90 days after cancellation. If you subscribe again within that period, you can pick up right where you left off.
            </Text>
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item bd-bs>
          <Accordion.Heading>
            <Accordion.Button py="30" px="15" hov="-bgc">How do I contact support?</Accordion.Button>
          </Accordion.Heading>
          <Accordion.Panel py="30" px="15" pbs="15">
            <Text>
              Support is available through in-app chat and email. We aim to reply the same day for messages received on weekdays between 10:00 and
              18:00.
            </Text>
          </Accordion.Panel>
        </Accordion.Item>
      </Accordion.Root>
    </Stack>
  </Container>
</DemoLayout>