import { Accordion, SectionHeader, Text } from "denjs-ui";
import { getFaqItems } from "#/entities/landing";
import { useMessages } from "#/shared/lib/i18n";

export function FaqSection() {
	const m = useMessages();

	return (
		<section id="faq" className="mt-10 sm:mt-14">
			<SectionHeader
				eyebrow={m.faq_eyebrow()}
				title={m.faq_title()}
				align="left"
				className="max-w-3xl"
			/>

			<Accordion
				className="mt-5 rounded-2xl border border-[var(--line)] bg-[var(--glass-surface)]"
				items={getFaqItems(m).map((item) => ({
					value: item.value,
					title: item.title,
					content: (
						<Text
							as="p"
							tone="muted"
							className="m-0 text-sm leading-6 text-[var(--sea-ink-soft)]"
						>
							{item.content}
						</Text>
					),
				}))}
				type="single"
				collapsible
			/>
		</section>
	);
}