import {LandingLayout} from '@/components/landing/landing-layout';
import {useNavigate} from 'react-router-dom';
import {ChevronDown} from 'lucide-react';
import {useState} from 'react';

import {useHead} from '@/hooks/useHead';
const FAQS = [
    ['How does billing work?', 'You are billed monthly based on your active tier. Upgrades take effect immediately; downgrades apply at the next billing cycle.'],
    ['What counts as a token?', 'Tokens are the sum of all input and output tokens consumed by your agents executing commands across all models. Memory storage is billed separately.'],
    ['Can I get a refund?', 'Monthly plans are non-refundable. Annual plans can be refunded pro-rata within the first 30 days.'],
    ['What happens if I exceed my limit?', 'Your agents will be throttled until you upgrade or the cycle resets. You can also set hard caps to prevent overages.'],
    ['Do you offer annual discounts?', 'Yes — annual plans are discounted 20% compared to monthly billing.'],
    ['What models are supported?', 'All major models via OpenRouter: OpenAI GPT-4o, Anthropic Claude, Google Gemini, Mistral, and more. Enterprise users can add custom endpoints.'],
    ['Can I export my data?', 'Yes. All your agents, skills, rooms, and audit logs can be exported at any time. Enterprise users get automated S3 backup.'],
    ['Is there a free trial for Pro?', 'The Free tier is always free. Pro features can be evaluated during a 14-day trial when you upgrade from Free.'],
];

export default function PricingFaqPage() {

    useHead({ title: 'Billing FAQ — GitDataAI', description: 'Answers to common questions about pricing, billing, and command stream usage on GitDataAI.' });
    const navigate = useNavigate();
    const [open, setOpen] = useState<number | null>(0);

    return (
        <LandingLayout>
            <section className="pt-24 pb-32">
                <div className="mx-auto max-w-3xl px-6">
                    <div className="text-xs text-zinc-400 mb-6">
                        <button onClick={() => navigate('/pricing')} className="hover:text-zinc-600">Pricing</button>
                        <span className="mx-2">/</span> Billing FAQ
                    </div>

                    <div className="mb-12">
                        <h1 className="text-4xl md:text-5xl font-semibold tracking-tight mb-4">
                            Billing FAQ
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500">
                            Answers to common questions about pricing, billing, and usage.
                        </p>
                    </div>

                    <div className="space-y-3">
                        {FAQS.map(([q, a], i) => (
                            <div key={i}
                                 className="rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden">
                                <button
                                    onClick={() => setOpen(open === i ? null : i)}
                                    className="w-full flex items-center justify-between px-5 py-4 text-left">
                                    <span className="text-sm font-medium">{q}</span>
                                    <ChevronDown
                                        className={`h-4 w-4 text-zinc-400 shrink-0 transition-transform ${open === i ? 'rotate-180' : ''}`}/>
                                </button>
                                {open === i && (
                                    <div className="px-5 pb-4 text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed border-t border-zinc-100 dark:border-zinc-800 pt-3">
                                        {a}
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>

                    <div className="mt-12 text-center p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800">
                        <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-3">Still have questions?</p>
                        <button
                            className="h-10 px-6 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-full text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors">
                            Contact Support
                        </button>
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}