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

import {useHead} from '@/hooks/useHead';
const TIERS = [
    {
        name: 'Free',
        price: '$0',
        period: 'forever',
        desc: 'Command as Service for individuals — versioned commands, agent memory, and skill registry included.',
        features: ['3 active agents', '5 GB agent memory', 'Community skill registry', 'Public rooms', '7-day history'],
        cta: 'Start Free',
        highlight: false,
    },
    {
        name: 'Pro',
        price: '$29',
        period: 'per month',
        desc: 'Command as Service for teams — unlimited agents, full command stream audit, and priority compute.',
        features: [
            'Unlimited agents',
            '50 GB agent memory',
            'Private skill registry',
            'Collaborative rooms',
            '90-day history',
            'Priority compute',
            'Email support',
        ],
        cta: 'Get Pro',
        highlight: true,
    },
    {
        name: 'Enterprise',
        price: 'Custom',
        period: '',
        desc: 'Command as Service at scale — custom deployment, granular command-stream governance, and dedicated SLA for your agent fleet.',
        features: [
            'Everything in Pro',
            'Unlimited memory',
            'SSO / SAML',
            'Custom model routing',
            'Dedicated compute',
            'SLA guarantee',
            'Dedicated support',
        ],
        cta: 'Contact Sales',
        highlight: false,
    },
];

export default function PricingPage() {

    useHead({ title: 'Pricing — GitDataAI', description: 'Simple, transparent pricing. Start free. Scale as your agent fleet grows. Command as Service for every team.' });
    const navigate = useNavigate();
    return (
        <LandingLayout>
            <section className="pt-24 pb-32">
                <div className="mx-auto max-w-5xl px-6">
                    {/* Header */}
                    <div className="text-center mb-20">
                        <h1 className="text-4xl md:text-6xl font-semibold tracking-tight mb-4">
                            Simple, transparent pricing.
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500">
                            Start free. Scale as your agent fleet grows.
                        </p>
                    </div>

                    {/* Tiers */}
                    <div className="grid md:grid-cols-3 gap-6">
                        {TIERS.map(tier => (
                            <div key={tier.name}
                                 className={`rounded-3xl p-8 flex flex-col ${
                                     tier.highlight
                                         ? 'border-2 border-zinc-900 dark:border-zinc-100 bg-zinc-50 dark:bg-zinc-900/50'
                                         : 'border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950'
                                 }`}>
                                <div className="mb-6">
                                    <h2 className="text-lg font-semibold mb-1">{tier.name}</h2>
                                    <div className="flex items-baseline gap-1 mb-2">
                                        <span
                                            className="text-3xl font-semibold tracking-tight">{tier.price}</span>
                                        {tier.period && (
                                            <span className="text-sm text-zinc-500">{tier.period}</span>
                                        )}
                                    </div>
                                    <p className="text-sm text-zinc-500 dark:text-zinc-400">{tier.desc}</p>
                                </div>

                                <ul className="space-y-3 flex-1 mb-8">
                                    {tier.features.map(f => (
                                        <li key={f} className="flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300">
                                            <Check className="h-4 w-4 mt-0.5 shrink-0 text-zinc-500"/>
                                            {f}
                                        </li>
                                    ))}
                                </ul>

                                <button
                                    onClick={() => tier.name === 'Enterprise' ? navigate('/pricing/enterprise') : navigate('/auth/register')}
                                    className={`w-full h-10 rounded-full text-sm font-medium transition-colors ${
                                        tier.highlight
                                            ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 hover:bg-zinc-800 dark:hover:bg-zinc-100'
                                            : 'border border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-900/50'
                                    }`}>
                                    {tier.cta}
                                </button>
                            </div>
                        ))}
                    </div>

                    {/* FAQ */}
                    <div className="mt-24 text-center">
                        <h2 className="text-2xl font-semibold mb-2">Frequently Asked</h2>
                        <p className="text-zinc-500 mb-8">Billing questions answered.</p>
                        <div className="grid md:grid-cols-2 gap-6 text-left max-w-2xl mx-auto">
                            {[
                                ['Can I switch plans at any time?', 'Yes. Upgrade or downgrade at any time. Changes take effect at the next billing cycle.'],
                                ['What counts as agent memory?', 'Agent memory is the total persistent context stored across all your agents, including conversation history and long-term memory.'],
                                ['Is there a free trial for Pro?', 'Yes — the Free tier lets you explore all Pro features for 14 days when you upgrade.'],
                            ].map(([q, a]) => (
                                <div key={q} className="p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800">
                                    <h3 className="text-sm font-semibold mb-2">{q}</h3>
                                    <p className="text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">{a}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}