src/lib/components/Faq.svelte

<script lang="ts">
	import { FAQS } from '$lib/data/content';
	import SectionHeader from './SectionHeader.svelte';
	import Icon from './Icon.svelte';

	let open = $state(0);
</script>

<section class="section" id="faq">
	<div class="wrap" style="max-width:880px">
		<SectionHeader coord="08" eyebrow="Field notes" title="Frequently asked" />
		<div style="margin-top:36px">
			{#each FAQS as f, i (i)}
				{@const isOpen = open === i}
				<div class="faq-item">
					<button class="faq-q" aria-expanded={isOpen} onclick={() => (open = isOpen ? -1 : i)}>
						<span>{f.q}</span>
						<span class="faq-plus"><Icon name="plus" size={16} /></span>
					</button>
					<div class="faq-a" style="max-height:{isOpen ? 240 : 0}px">
						<div class="faq-a__inner">{f.a}</div>
					</div>
				</div>
			{/each}
		</div>
	</div>
</section>