import {LandingLayout} from '@/components/landing/landing-layout';
import {useNavigate} from 'react-router-dom';
import {BookOpen, Code2, Terminal} from 'lucide-react';

import {useHead} from '@/hooks/useHead';
const SECTIONS = [
    {icon: BookOpen, title: 'Skill Manifest', desc: 'Define skill metadata, tools, prompts, and trigger conditions.'},
    {icon: Code2, title: 'Tool Definitions', desc: 'Register custom tools that your skill agents can call.'},
    {icon: Terminal, title: 'Local Testing', desc: 'Run `gitdata skill test` to validate skill behavior in a sandbox.'},
];

export default function SkillsDocsPage() {

    useHead({ title: 'Building Skills — GitDataAI', description: 'A skill is a versioned package of prompts, tools, and behavior patterns — invoked by command, composable into any workflow.' });
    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('/skills')} className="hover:text-zinc-600">Skills</button>
                        <span className="mx-2">/</span> Skill Documentation
                    </div>

                    <div className="mb-20">
                        <h1 className="text-4xl md:text-5xl font-semibold tracking-tight mb-4">
                            Building Skills
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500 max-w-2xl">
                            A skill is a versioned package of prompts, tools, and behavior patterns that define how an agent operates — invoked by command, composable into any workflow. Learn how to build, test, and publish them.
                        </p>
                    </div>

                    <div
                        className="rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-zinc-950 dark:bg-zinc-900 p-6 font-mono text-xs mb-8 overflow-x-auto">
                        <div className="text-zinc-500 mb-3 text-[10px] uppercase tracking-widest">Quick Start</div>
                        <div className="space-y-1 text-zinc-300">
                            <div>gitdata skill init --name my-skill</div>
                            <div>cd my-skill</div>
                            <div>gitdata skill test --watch</div>
                        </div>
                    </div>

                    <div className="grid md:grid-cols-3 gap-6 mb-16">
                        {SECTIONS.map(s => (
                            <div key={s.title}
                                 className="p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950">
                                <s.icon className="h-5 w-5 text-zinc-500 mb-3"/>
                                <h3 className="text-sm font-semibold mb-1">{s.title}</h3>
                                <p className="text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">{s.desc}</p>
                            </div>
                        ))}
                    </div>

                    <div className="text-center">
                        <button onClick={() => navigate('/docs')}
                                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">
                            Full Documentation
                        </button>
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}
