<section class="py-20 bg-white dark:bg-gray-900" x-data="{ inView: false }" x-init="setTimeout(() => inView = true, 500)">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center mb-16">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out">
<h2 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
Frequently Asked Questions
</h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Find answers to common questions about our services and how we can help your business succeed.
</p>
</div>
</div>
<!-- FAQ Accordion -->
<div class="space-y-4">
<div x-data="{ open: false }" :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-200">
<button @click="open = !open" class="w-full flex justify-between items-center bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-left hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">What services do you offer?</h3>
<svg :class="{ 'rotate-180': open }" class="w-6 h-6 text-gray-600 dark:text-gray-300 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open" x-transition class="bg-gray-50 dark:bg-gray-800 rounded-b-2xl p-6 text-gray-600 dark:text-gray-300">
<p>We offer a range of services including web development, mobile apps, cloud solutions, data analytics, digital marketing, and IT consulting. Each service is tailored to meet your specific business needs.</p>
</div>
</div>
<div x-data="{ open: false }" :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-400">
<button @click="open = !open" class="w-full flex justify-between items-center bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-left hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">How long does a typical project take?</h3>
<svg :class="{ 'rotate-180': open }" class="w-6 h-6 text-gray-600 dark:text-gray-300 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open" x-transition class="bg-gray-50 dark:bg-gray-800 rounded-b-2xl p-6 text-gray-600 dark:text-gray-300">
<p>Project timelines vary depending on complexity and scope. A standard website might take 4-8 weeks, while complex applications or cloud solutions could take 3-6 months. We provide detailed timelines during the consultation phase.</p>
</div>
</div>
<div x-data="{ open: false }" :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-600">
<button @click="open = !open" class="w-full flex justify-between items-center bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-left hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Do you provide ongoing support?</h3>
<svg :class="{ 'rotate-180': open }" class="w-6 h-6 text-gray-600 dark:text-gray-300 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open" x-transition class="bg-gray-50 dark:bg-gray-800 rounded-b-2xl p-6 text-gray-600 dark:text-gray-300">
<p>Yes, we offer ongoing support and maintenance for all our services, including regular updates, security patches, and performance optimization, depending on your plan.</p>
</div>
</div>
<div x-data="{ open: false }" :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-800">
<button @click="open = !open" class="w-full flex justify-between items-center bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-left hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Can you customize solutions for my business?</h3>
<svg :class="{ 'rotate-180': open }" class="w-6 h-6 text-gray-600 dark:text-gray-300 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open" x-transition class="bg-gray-50 dark:bg-gray-800 rounded-b-2xl p-6 text-gray-600 dark:text-gray-300">
<p>Absolutely! We specialize in creating tailored solutions to fit your unique business requirements, ensuring maximum efficiency and impact.</p>
</div>
</div>
</div>
</div>
</section>