---
interface Props {
	node: {
		_key?: string;
		headline?: string;
		items: Array<{
			question: string;
			answer: string;
		}>;
	};
}

const { node } = Astro.props;
const { _key, headline, items } = node;
---

<section class="faq section" id={_key}>
	<div class="container">
		{headline && (
			<header class="faq-header">
				<h2 class="faq-headline">{headline}</h2>
			</header>
		)}
		<div class="faq-list">
			{items.map((item) => (
				<details class="faq-item" name="faq">
					<summary class="faq-question">
						<span>{item.question}</span>
						<svg class="faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
							<path d="M6 9l6 6 6-6" />
						</svg>
					</summary>
					<div class="faq-answer">
						<p>{item.answer}</p>
					</div>
				</details>
			))}
		</div>
	</div>
</section>

<style>
	.faq-header {
		text-align: center;
		margin-bottom: var(--spacing-4xl);
	}

	.faq-headline {
		font-size: var(--font-size-3xl);
		font-weight: 800;
	}

	.faq-list {
		max-width: var(--max-width);
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-md);
	}

	.faq-item {
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		overflow: hidden;
		transition: border-color var(--transition-fast);
	}

	.faq-item:hover {
		border-color: var(--color-muted);
	}

	.faq-item[open] {
		border-color: var(--color-primary-light);
	}

	.faq-question {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--spacing-md);
		padding: var(--spacing-lg);
		font-size: var(--font-size-base);
		font-weight: 600;
		cursor: pointer;
		list-style: none;
	}

	.faq-question::-webkit-details-marker {
		display: none;
	}

	.faq-icon {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		color: var(--color-muted);
		transition: transform var(--transition-base);
	}

	.faq-item[open] .faq-icon {
		transform: rotate(180deg);
	}

	.faq-answer {
		padding: 0 var(--spacing-lg) var(--spacing-lg);
	}

	.faq-answer p {
		font-size: var(--font-size-sm);
		color: var(--color-muted);
		line-height: 1.7;
	}
</style>
