'use client'

import { FAQ_ITEMS } from '@/app/data/content'
import { Accordion } from '@/app/components'

export function QuestionsSection() {
    return (
        <section id="questions" className="flex flex-col gap-8">
            <h2 className="font-display font-semibold text-3xl sm:text-4xl leading-tight tracking-tighter text-base-content">
                Questions
            </h2>

            <p className="text-base sm:text-xl leading-snug tracking-tight text-muted">
                Common questions about Standard.site, its governance, and
                implementation. If something is missing ask us on Bluesky.
            </p>

            <div className="flex flex-col gap-1 rounded-2xl border border-border bg-base-200 p-1 overflow-hidden">
                <Accordion items={ FAQ_ITEMS } />
            </div>
        </section>
    )
}