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

import {useHead} from '@/hooks/useHead';
const STEPS = [
    {icon: Code2, title: '1. Write your skill', desc: 'Define prompts, tools, and behaviors in a skill manifest YAML file.'},
    {icon: BookOpen, title: '2. Test locally', desc: 'Use the CLI to simulate agent runs and validate outputs before publishing.'},
    {icon: Star, title: '3. Publish to registry', desc: 'Push to the GitDataAI Skill Registry with version tags and metadata.'},
];

export default function SkillsPublishPage() {

    useHead({ title: 'Publish a Skill — GitDataAI', description: 'Turn your best agent behaviors into reusable, versioned skills — 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> Publish a Skill
                    </div>

                    <div className="mb-20">
                        <h1 className="text-4xl md:text-5xl font-semibold tracking-tight mb-4">
                            Publish a Skill
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500 max-w-2xl">
                            Turn your best agent behaviors into reusable, versioned skills — invoked by command, composable into any workflow. Share with the community or keep private to your workspace.
                        </p>
                    </div>

                    {/* Skill manifest demo */}
                    <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-16 overflow-x-auto">
                        <div className="text-zinc-500 mb-3 text-[10px] uppercase tracking-widest">skill.yaml</div>
                        <pre className="text-zinc-300 leading-6">
{`name: senior-react-dev
version: "1.2.0"
description: Build production React components
author: acme-team
tools:
  - read_file
  - write_file
  - run_tests
prompt: |
  You are a senior React developer...
trigger:
  keywords: ["react", "component", "frontend"]
rate_limit: 60  # runs per hour`}
                        </pre>
                    </div>

                    {/* Steps */}
                    <div className="mb-16">
                        <h2 className="text-2xl font-semibold mb-8">How It Works</h2>
                        <div className="grid md:grid-cols-3 gap-6">
                            {STEPS.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>

                    <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 inline-flex items-center gap-2">
                            Publish Your First Skill <ArrowRight className="h-4 w-4"/>
                        </button>
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}
