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

import {useHead} from '@/hooks/useHead';
const FEATURES = [
    'Unlimited agents and memory',
    'Dedicated compute infrastructure',
    'Custom model routing (OpenAI, Anthropic, local)',
    'SSO / SAML 2.0 authentication',
    '99.99% uptime SLA',
    'Custom rate limits and quotas',
    'Audit logs and compliance exports',
    'Dedicated customer success manager',
    'On-premise deployment option',
    'Custom contract and invoicing',
];

export default function PricingEnterprisePage() {

    useHead({ title: 'Enterprise — GitDataAI', description: 'Command as Service at enterprise scale. Custom deployment, granular command-stream governance, and dedicated SLA for your agent fleet.' });
    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('/pricing')} className="hover:text-zinc-600">Pricing</button>
                        <span className="mx-2">/</span> Enterprise
                    </div>

                    <div className="mb-20">
                        <h1 className="text-4xl md:text-5xl font-semibold tracking-tight mb-4">
                            Enterprise
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500 max-w-2xl">
                            Command as Service at enterprise scale. Custom deployment, dedicated infrastructure, and granular command-stream governance for organizations that need full control of their agent fleet.
                        </p>
                    </div>

                    <div
                        className="rounded-3xl border-2 border-zinc-900 dark:border-zinc-100 bg-zinc-50 dark:bg-zinc-900/50 p-10 mb-16">
                        <div className="grid md:grid-cols-2 gap-16">
                            <div>
                                <h2 className="text-xl font-semibold mb-2">Everything in Pro, plus:</h2>
                                <ul className="space-y-3 mt-6">
                                    {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>
                            </div>

                            <div className="flex flex-col justify-center">
                                <div className="text-3xl font-semibold mb-2">Custom Pricing</div>
                                <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-8 leading-relaxed">
                                    Volume-based pricing tailored to your organization. Annual contracts available. No surprises on your invoice.
                                </p>
                                <div className="space-y-3">
                                    <button
                                        className="w-full h-11 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 flex items-center justify-center gap-2">
                                        Talk to Sales <ArrowRight className="h-4 w-4"/>
                                    </button>
                                    <button
                                        className="w-full h-11 rounded-full border border-zinc-200 dark:border-zinc-800 text-sm font-medium hover:bg-zinc-100 dark:hover:bg-zinc-900/50 transition-colors">
                                        Download Info Sheet
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Compliance */}
                    <div className="grid md:grid-cols-3 gap-5 mb-16">
                        {['SOC 2 Type II', 'GDPR Compliant', 'HIPAA Ready'].map(label => (
                            <div key={label}
                                 className="p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-center">
                                <div
                                    className="h-10 w-10 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center mx-auto mb-2">
                                    <Check className="h-4 w-4 text-zinc-500"/>
                                </div>
                                <span className="text-sm font-medium">{label}</span>
                            </div>
                        ))}
                    </div>

                    <div className="text-center">
                        <button onClick={() => navigate('/pricing')}
                                className="h-10 px-6 text-sm font-medium text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200 transition-colors">
                            ← Back to Pricing
                        </button>
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}
