// app/faq/page.tsx

'use client';

import * as React from 'react';

import { Navbar } from '@workspace/ui/components/layout';
import { Footer } from '@workspace/ui/components/layout';
import { Container } from '@workspace/ui/components/layout';
import { AnimatedSection } from '@workspace/ui/components/animate-ui/section';
import { FAQAccordion } from '@workspace/ui/components/interactive';

export default function FAQPage() {
  return (
    <div className="flex flex-col min-h-screen">
      <Navbar />
      
      {/* Hero Section */}
      <AnimatedSection className="border-b border-muted">
        <Container maxWidth="10xl">
          <div className="py-20 md:py-28">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">Frequently Asked Questions</h1>
            <p className="mt-6 text-xl text-muted-foreground max-w-3xl">
              Answers to common questions about our approach, process, and services.
            </p>
          </div>
        </Container>
      </AnimatedSection>
      
      {/* FAQ Section */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <FAQAccordion />
        </Container>
      </AnimatedSection>
      
      <Footer />
    </div>
  );
}