import { useTranslations } from 'next-intl'
import { Container } from './Container'

const faqs = [
	[
		{
			question: 'faq.q1',
			answer: 'faq.a2',
		},
		{
			question: 'faq.q2',
			answer: 'faq.a2',
		},
		{
			question: 'faq.q3',
			answer: 'faq.a3',
		},
		{
			question: 'faq.q4',
			answer: 'faq.a4',
		},
	],
	[
		{
			question: 'faq.q5',
			answer: 'faq.a5',
		},
		{
			question: 'faq.q6',
			answer: 'faq.a6',
		},
		{
			question: 'faq.q7',
			answer: "faq.a7",
		},
	],
	[
		{
			question:
				'faq.q8',
			answer: 'faq.a8',
		},
		{
			question: 'faq.q9',
			answer: 'faq.a9',
		},
		{
			question: 'faq.q10',
			answer: 'faq.a10',
		},
	],
]

export function Faqs() {
	const t = useTranslations('HomePage')
	return (
		<section
			id="faqs"
			aria-labelledby="faq-title"
			className="relative overflow-hidden bg-black py-20 sm:py-32"
		>
			<Container className="relative">
				<div className="mx-auto max-w-2xl lg:mx-0">
					<h2
						id="faq-title"
						className="font-display text-3xl tracking-tight text-primary sm:text-4xl"
					>
						{t('faq.title')}
					</h2>
					<p className="mt-4 text-lg tracking-tight text-muted-foreground">
						{t('faq.des')}
					</p>
				</div>
				<ul className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 lg:max-w-none lg:grid-cols-3">
					{faqs.map((column, columnIndex) => (
						<li key={columnIndex}>
							<ul className="flex flex-col gap-y-8">
								{column.map((faq, faqIndex) => (
									<li key={faqIndex}>
										<h3 className="font-display text-lg leading-7 text-primary">
											{t(faq.question)}
										</h3>
										<p className="mt-4 text-sm text-muted-foreground">
											{t(faq.answer)}
										</p>
									</li>
								))}
							</ul>
						</li>
					))}
				</ul>
			</Container>
		</section>
	)
}