import {LandingLayout} from '@/components/landing/landing-layout';
import {useNavigate} from 'react-router-dom';
import {Book, Code2, Command, FileText, Layers} from 'lucide-react';

import {useHead} from '@/hooks/useHead';
const DOCS_SECTIONS = [
    {
        icon: Book,
        title: 'Getting Started',
        links: ['Quick Start', 'Installation', 'Core Concepts', 'First Agent'],
    },
    {
        icon: Code2,
        title: 'API Reference',
        links: ['Authentication', 'Agents API', 'Rooms API', 'Skills API', 'Webhooks'],
    },
    {
        icon: Layers,
        title: 'Agent SDK',
        links: ['SDK Setup', 'Memory Management', 'Tool Calling', 'Skill Development'],
    },
    {
        icon: Command,
        title: 'CLI Reference',
        links: ['Installation', 'gitdata init', 'gitdata agent', 'gitdata room', 'gitdata skill'],
    },
    {
        icon: FileText,
        title: 'Guides',
        links: ['Deploying Agents', 'Building Skills', 'Network Integration', 'Enterprise Setup'],
    },
    {
        icon: Code2,
        title: 'Open Source',
        links: ['GitHub Repository', 'Contributing', 'Changelog', 'Roadmap'],
    },
];

export default function DocsPage() {

    useHead({ title: 'Documentation — GitDataAI', description: 'Everything you need to build, deploy, and scale agentic workflows via GitDataAI Command as Service.' });
    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">
                            Documentation
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500 max-w-2xl mx-auto">
                            Everything you need to build, deploy, and scale agentic workflows via GitDataAI's Command as Service platform.
                        </p>
                    </div>

                    {/* Search */}
                    <div className="max-w-xl mx-auto mb-16">
                        <div
                            className="flex items-center gap-3 h-11 px-4 rounded-full border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950">
                            <Book className="h-4 w-4 text-zinc-400"/>
                            <input
                                type="text"
                                placeholder="Search documentation..."
                                className="flex-1 bg-transparent text-sm text-zinc-900 dark:text-zinc-100 outline-none placeholder:text-zinc-400"
                            />
                        </div>
                    </div>

                    {/* Sections */}
                    <div className="grid md:grid-cols-2 gap-5 mb-16">
                        {DOCS_SECTIONS.map(section => (
                            <div key={section.title}
                                 className="p-6 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">
                                <div className="flex items-center gap-3 mb-4">
                                    <div
                                        className="h-9 w-9 rounded-lg bg-zinc-100 dark:bg-zinc-800/50 flex items-center justify-center">
                                        <section.icon className="h-4 w-4 text-zinc-600 dark:text-zinc-400"/>
                                    </div>
                                    <h3 className="text-sm font-semibold">{section.title}</h3>
                                </div>
                                <ul className="space-y-2">
                                    {section.links.map(link => (
                                        <li key={link}>
                                            <a href="#"
                                               className="text-xs text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors">
                                                {link}
                                            </a>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        ))}
                    </div>

                    {/* Quick start CTA */}
                    <div
                        className="rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 p-10 text-center">
                        <h2 className="text-xl font-semibold mb-2">Quick Start</h2>
                        <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-6">
                            Get your first agent running in under 5 minutes.
                        </p>
                        <div
                            className="inline-flex items-center gap-2 font-mono text-xs bg-zinc-900 dark:bg-zinc-800 text-zinc-100 dark:text-zinc-300 px-4 py-2 rounded-lg">
                            npx gitdata@latest init
                        </div>
                        <div className="mt-6">
                            <button onClick={() => navigate('/auth/register')}
                                    className="h-10 px-6 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">
                                Create Free Account
                            </button>
                        </div>
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}
