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

import {useHead} from '@/hooks/useHead';
const LIMITS = [
    {tier: 'Free', tokens: '100K', compute: '1x', agents: '3'},
    {tier: 'Pro', tokens: '10M', compute: '4x', agents: 'Unlimited'},
    {tier: 'Enterprise', tokens: 'Custom', compute: 'Dedicated', agents: 'Unlimited'},
];

export default function SolutionsGovernancePage() {

    useHead({ title: 'Compute Governance — GitDataAI', description: 'Unified management of LLM tokens and compute resources. Every AI command has a cost — full visibility into your command stream spend.' });
    const navigate = useNavigate();
    return (
        <LandingLayout>
            <section className="pt-24 pb-32">
                <div className="mx-auto max-w-5xl px-6">
                    <div className="text-xs text-zinc-400 mb-6">
                        <button onClick={() => navigate('/solutions')} className="hover:text-zinc-600">Solutions</button>
                        <span className="mx-2">/</span> Compute Governance
                    </div>

                    <div className="mb-20">
                        <div
                            className="h-12 w-12 rounded-xl bg-zinc-100 dark:bg-zinc-800/50 flex items-center justify-center mb-6">
                            <Cpu className="h-6 w-6 text-zinc-600 dark:text-zinc-400"/>
                        </div>
                        <h1 className="text-4xl md:text-5xl font-semibold tracking-tight mb-4">
                            Compute Governance
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500 max-w-2xl">
                            Unified management of LLM tokens and compute resources across your agent fleet. Every AI command has a cost — set budgets, enforce limits, and get full visibility into your command stream spend.
                        </p>
                    </div>

                    {/* Live usage */}
                    <div
                        className="rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 p-6 mb-16">
                        <div className="flex items-center justify-between mb-4">
                            <span className="text-xs font-semibold">Monthly Compute Budget</span>
                            <span
                                className="text-xs px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400">75% used</span>
                        </div>
                        <div className="h-2 rounded-full bg-zinc-200 dark:bg-zinc-800 mb-4">
                            <div className="h-2 rounded-full bg-zinc-900 dark:bg-white w-[75%]"/>
                        </div>
                        <div className="grid grid-cols-3 gap-4 text-center">
                            <div>
                                <div className="text-lg font-semibold">7.5M</div>
                                <div className="text-[10px] text-zinc-500">tokens used</div>
                            </div>
                            <div>
                                <div className="text-lg font-semibold">$23.40</div>
                                <div className="text-[10px] text-zinc-500">total cost</div>
                            </div>
                            <div>
                                <div className="text-lg font-semibold">2.5M</div>
                                <div className="text-[10px] text-zinc-500">tokens remaining</div>
                            </div>
                        </div>
                    </div>

                    {/* Limits */}
                    <div className="mb-16">
                        <h2 className="text-2xl font-semibold mb-8">Limits by Tier</h2>
                        <div className="grid md:grid-cols-3 gap-5">
                            {LIMITS.map(l => (
                                <div key={l.tier}
                                     className="p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950">
                                    <h3 className="text-sm font-semibold mb-4">{l.tier}</h3>
                                    <div className="space-y-3">
                                        <div className="flex justify-between text-xs">
                                            <span className="text-zinc-500">Monthly tokens</span>
                                            <span className="font-medium">{l.tokens}</span>
                                        </div>
                                        <div className="flex justify-between text-xs">
                                            <span className="text-zinc-500">Compute multiplier</span>
                                            <span className="font-medium">{l.compute}</span>
                                        </div>
                                        <div className="flex justify-between text-xs">
                                            <span className="text-zinc-500">Max agents</span>
                                            <span className="font-medium">{l.agents}</span>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    <div className="text-center">
                        <button onClick={() => navigate('/auth/register')}
                                className="h-11 px-8 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">
                            Set Up Compute Governance
                        </button>
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}
