import {LandingLayout} from '@/components/landing/landing-layout';
import {useNavigate} from 'react-router-dom';
import {Brain, GitBranch, RotateCcw} from 'lucide-react';

export default function SolutionsMemoryPage() {
    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> Agent Memory
                    </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">
                            <Brain 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">
                            Agent Memory
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500 max-w-2xl">
                            Git-native long-term memory for AI agents. Branch, commit, merge, and rollback AI context the same way you manage source code.
                        </p>
                    </div>

                    {/* Git-like interface demo */}
                    <div
                        className="rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 p-6 font-mono text-xs mb-16 overflow-x-auto">
                        <div className="mb-4 text-zinc-400 text-[10px] uppercase tracking-widest">Agent Memory — workspace: acme-agent-ctx</div>
                        <div className="space-y-2 text-zinc-700 dark:text-zinc-300">
                            <div className="flex gap-3">
                                <span className="text-zinc-400 shrink-0">$</span>
                                <span>gitdata memory branch -c "tune-for-rag-v3"</span>
                            </div>
                            <div className="text-zinc-500 pl-6">✓ Branched from 'main'. Switched to 'tune-for-rag-v3'.</div>
                            <div className="flex gap-3">
                                <span className="text-zinc-400 shrink-0">$</span>
                                <span>gitdata memory commit -m "Retrain embeddings on Q3 data"</span>
                            </div>
                            <div className="text-zinc-500 pl-6">[abc1234] Retrain embeddings on Q3 data — 2.4k tokens updated.</div>
                            <div className="flex gap-3">
                                <span className="text-zinc-400 shrink-0">$</span>
                                <span>gitdata memory log --oneline</span>
                            </div>
                            {['abc1240 HEAD', '7b3c9a1 Tune retrieval threshold', 'def4567 Initial RAG setup'].map((h, i) => (
                                <div key={i} className="pl-6 text-zinc-500">{h}</div>
                            ))}
                        </div>
                    </div>

                    {/* Git operations */}
                    <div className="grid md:grid-cols-3 gap-6 mb-16">
                        {[
                            {icon: GitBranch, title: 'Branch & Merge', desc: 'Experiment with different memory contexts. Merge when proven.'},
                            {icon: RotateCcw, title: 'Rollback', desc: 'Revert to any previous memory state instantly.'},
                            {icon: Brain, title: 'Semantic Search', desc: 'Find any past context by natural language query.'},
                        ].map(item => (
                            <div key={item.title}
                                 className="p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950">
                                <item.icon className="h-5 w-5 text-zinc-500 mb-3"/>
                                <h3 className="text-sm font-semibold mb-1">{item.title}</h3>
                                <p className="text-xs text-zinc-500 dark:text-zinc-400">{item.desc}</p>
                            </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">
                            Try Agent Memory Free
                        </button>
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}