<script lang="ts">
	const faqs = [
		{
			question: 'How do I place an order?',
			answer:
				'You can place an order directly through our website by selecting your desired products and proceeding to checkout.'
		},
		{
			question: 'What payment methods do you accept?',
			answer: 'We accept all major credit cards, PayPal, and Apple Pay.'
		},
		{
			question: 'Do you offer international shipping?',
			answer: 'Currently, we only ship within the United States.'
		},
		{
			question: 'Can I cancel or change my order?',
			answer:
				'You can cancel or change your order within 1 hour of placing it. Please contact us immediately for assistance.'
		}
	];
</script>

<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-20">
	<div class="container mx-auto px-4 text-center">
		<h1 class="mb-4 text-5xl font-bold text-gray-900">Frequently Asked Questions</h1>
		<p class="mb-8 text-xl text-gray-600">
			Find answers to common questions about our products and services.
		</p>
	</div>
</section>

<section class="py-16">
	<div class="container mx-auto max-w-2xl px-4">
		<div class="space-y-6">
			{#each faqs as faq}
				<div class="rounded-lg bg-white p-6 shadow-lg">
					<h3 class="mb-2 text-xl font-bold text-gray-900">{faq.question}</h3>
					<p class="text-gray-600">{faq.answer}</p>
				</div>
			{/each}
		</div>
	</div>
</section>
