<script setup lang="ts">
// Section 09 — FAQ. Native <details> accordion with an animated plus marker
// (.faq-plus styles live in assets/styles/base.css). Ported from
// landing-sections.jsx FAQ.
import { useTheme, useCopy } from '~/composables/useLanding'
const t = useTheme()
const copy = useCopy()
</script>

<template>
  <section :style="{ background: t.bg, color: t.fg }">
    <LandingContainer pad="140px 64px" :max="960">
      <LandingSectionLabel :label="copy.faq.label" />
      <h2 :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(36px, 4.4vw, 64px)', letterSpacing: '-0.032em', lineHeight: 1.0, margin: 0, textWrap: 'balance', color: t.fg }">{{ copy.faq.heading }}</h2>
      <div :style="{ marginTop: '56px' }">
        <details
          v-for="(item, i) in copy.faq.items" :key="i"
          :style="{
            borderTop: `1px solid ${t.borderStrong}`,
            borderBottom: i === copy.faq.items.length - 1 ? `1px solid ${t.borderStrong}` : 'none',
          }"
        >
          <summary :style="{ padding: '24px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '24px', listStyle: 'none' }">
            <span :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 500, fontSize: '19px', color: t.fg, letterSpacing: '-0.015em' }">{{ item[0] }}</span>
            <span class="faq-plus" :style="{ width: '14px', height: '14px', position: 'relative', color: t.fgMuted, flexShrink: 0 }" />
          </summary>
          <div :style="{ paddingBottom: '28px', paddingRight: '60px' }">
            <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.6, maxWidth: '720px', color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ item[1] }}</p>
          </div>
        </details>
      </div>
    </LandingContainer>
  </section>
</template>
