import {LandingLayout} from '@/components/landing/landing-layout';
import {useNavigate} from 'react-router-dom';
import {Bot, Code2, GitBranch, Network, Workflow} from 'lucide-react';

import {useHead} from '@/hooks/useHead';
const SOLUTIONS = [
    {
        icon: Workflow,
        title: 'Command as Service',
        href: '/solutions',
        desc: 'Every operation is a versioned command. Compose, audit, and replay your entire development workflow from a single CLI.',
        badge: 'Core Concept',
    },
    {
        icon: Code2,
        title: 'Git Repositories',
        href: '/solutions',
        desc: 'Full Git operations — branches, commits, merges, diffs, and blame. HTTP and SSH access with built-in branch protection.',
        badge: null,
    },
    {
        icon: GitBranch,
        title: 'Issues & Pull Requests',
        href: '/solutions',
        desc: 'Track issues, review code, and manage pull requests with inline comments, review threads, and configurable merge strategies.',
        badge: null,
    },
    {
        icon: Network,
        title: 'Collaborative Rooms',
        href: '/solutions/rooms',
        desc: 'Command-first rooms where humans and AI agents execute engineering tasks together. Persistent context, command audit trail, and shared command history.',
        badge: null,
    },
    {
        icon: Bot,
        title: 'AI Agents',
        href: '/solutions',
        desc: 'Deploy AI agents backed by persistent memory and a skill registry. Agents can read repos, run tools, and execute tasks autonomously.',
        badge: null,
    },
    {
        icon: Network,
        title: 'Full Audit Trail',
        href: '/solutions',
        desc: 'Every code change, AI decision, and room action — logged, versioned, and queryable. Human-in-the-loop by design.',
        badge: null,
    },
];

export default function SolutionsPage() {

    useHead({ title: 'Command as Service — GitDataAI', description: 'Every action is a versioned command. GitDataAI: where humans and AI agents engineer together via a unified command stream.' });
    const navigate = useNavigate();
    return (
        <LandingLayout>
            <section className="pt-24 pb-32">
                <div className="mx-auto max-w-5xl px-6">
                    {/* Hero */}
                    <div className="text-center mb-20">
                        <h1 className="text-4xl md:text-6xl font-semibold tracking-tight mb-4">
                            Command as Service
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500 max-w-2xl mx-auto">
                            In GitDataAI, every action is a first-class command. Commands are versioned, auditable, and composable — your development workflow is your API.
                        </p>
                    </div>

                    {/* Solutions grid */}
                    <div className="grid md:grid-cols-2 gap-5">
                        {SOLUTIONS.map(sol => (
                            <div key={sol.href}
                                 className="p-7 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 hover:border-zinc-300 dark:hover:border-zinc-700 transition-all cursor-pointer group"
                                 onClick={() => navigate(sol.href)}>
                                <div className="flex items-start gap-4">
                                    <div
                                        className="h-11 w-11 rounded-xl bg-zinc-100 dark:bg-zinc-800/50 flex items-center justify-center shrink-0">
                                        <sol.icon className="h-5 w-5 text-zinc-600 dark:text-zinc-400"/>
                                    </div>
                                    <div className="flex-1">
                                        <div className="flex items-center gap-2 mb-1">
                                            <h3 className="text-base font-semibold text-zinc-900 dark:text-zinc-100">{sol.title}</h3>
                                            {sol.badge && (
                                                <span
                                                    className="h-5 px-2 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[10px] font-medium">
                                                    {sol.badge}
                                                </span>
                                            )}
                                        </div>
                                        <p className="text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">{sol.desc}</p>
                                        <div
                                            className="mt-3 text-xs font-medium text-zinc-400 group-hover:text-zinc-600 dark:group-hover:text-zinc-300 transition-colors flex items-center gap-1">
                                            Learn more
                                            <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24"
                                                 stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                                                      d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}
