import {motion} from 'framer-motion';
import {Bot, Brain, Code2, GitBranch, History, Layers, Network, Workflow} from 'lucide-react';

const FEATURES = [
    {
        icon: Workflow,
        title: 'Command as Service',
        description: 'Every action — a repo create, a PR review, an agent deploy — is a versioned command. Audit, replay, and compose them. Your CLI is your API.',
    },
    {
        icon: Network,
        title: 'Collaborative Rooms',
        description: 'Command-first rooms where humans and AI agents work together via shared command streams. Issue commands, review results, and build consensus — all in one thread.',
    },
    {
        icon: Bot,
        title: 'AI Agents',
        description: 'Deploy agents that listen to room commands, execute tasks, and report back. Agents run skills, query repos, and call your own services.',
    },
    {
        icon: Code2,
        title: 'Git Repositories',
        description: 'Full Git operations — branches, commits, merges, and diffs. HTTP and SSH access. Built-in branch protection and access control.',
    },
    {
        icon: GitBranch,
        title: 'Issues & Pull Requests',
        description: 'Track issues, review code, and manage pull requests. Agents can listen to PR events and automatically run review commands.',
    },
    {
        icon: Layers,
        title: 'Skill Registry',
        description: 'Package agent behaviors as reusable Skills. Publish to a registry, pull into any room, and invoke via command. Your workflows become shared services.',
    },
    {
        icon: History,
        title: 'Command Audit Trail',
        description: 'Every command is logged with its intent, result, and caller. Trace every AI decision back to the human who issued it.',
    },
    {
        icon: Brain,
        title: 'Agent Memory',
        description: 'Agents have persistent, git-native memory. Branch, commit, and roll back context just like source code. No more stateless agents.',
    },
];

const stagger = {
    hidden: {},
    visible: {transition: {staggerChildren: 0.08}},
};

const fadeUp = {
    hidden: {opacity: 0, y: 16},
    visible: {
        opacity: 1,
        y: 0,
        transition: {duration: 0.5, ease: [0.25, 0.1, 0.25, 1]},
    },
};

const fadeIn = {
    hidden: {opacity: 0, y: 8},
    visible: {
        opacity: 1,
        y: 0,
        transition: {duration: 0.4, ease: [0.25, 0.1, 0.25, 1]},
    },
};

export function LandingHero({onRegister}: { onRegister: () => void }) {
    return (
        <section className="relative pt-20 pb-36">
            <div className="relative mx-auto max-w-5xl px-6 text-center">
                <motion.div variants={stagger} initial="hidden" animate="visible">
                    {/* Badge */}
                    <motion.div variants={fadeUp} className="mb-10">
                        <span
                            className="inline-flex items-center gap-2 rounded-full border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 px-4 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-400 uppercase tracking-widest">
                            <span className="relative flex h-1.5 w-1.5">
                                <span
                                    className="animate-ping absolute inline-flex h-full w-full rounded-full bg-zinc-400 opacity-75"/>
                                <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-zinc-500"/>
                            </span>
                            Command as Service · Human + Agent Engineering
                        </span>
                    </motion.div>

                    {/* Heading */}
                    <motion.h1 variants={fadeUp}
                               className="text-5xl md:text-7xl font-semibold tracking-tight leading-[0.95] mb-8">
                        Where{" "}
                        <span className="text-zinc-900 dark:text-zinc-100">Humans</span>
                        {" "}&{" "}
                        <span className="text-zinc-900 dark:text-zinc-100">Agents</span>
                        <br/>
                        <span className="italic font-serif text-zinc-900 dark:text-zinc-100">Engineer</span> Together.
                    </motion.h1>

                    {/* Subtitle */}
                    <motion.p variants={fadeUp}
                              className="text-lg text-zinc-500 dark:text-zinc-500 mb-12 max-w-2xl mx-auto leading-relaxed">
                        Every action is a command. Every command is versioned, auditable, and composable.
                        Git repositories, rooms, and AI agents — all driven by a command stream you own.
                    </motion.p>

                    {/* CTAs */}
                    <motion.div variants={fadeUp}
                                className="flex flex-col sm:flex-row items-center justify-center gap-3">
                        <button onClick={onRegister}
                                className="h-11 px-8 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-all rounded-full font-medium text-sm flex items-center gap-2">
                            Start Building
                            <svg className="h-4 w-4" 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>
                        </button>
                        <button
                            className="h-11 px-8 rounded-full border border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-900/50 text-zinc-700 dark:text-zinc-300 font-medium text-sm transition-all">
                            View Documentation
                        </button>
                    </motion.div>

                    {/* Terminal */}
                    <motion.div variants={fadeIn} className="mt-16 max-w-3xl mx-auto">
                        <div
                            className="rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 shadow-xl overflow-hidden">
                            {/* Terminal header */}
                            <div
                                className="flex items-center justify-between px-5 py-3.5 border-b border-zinc-200 dark:border-zinc-800">
                                <div className="flex gap-1.5">
                                    <div className="w-2.5 h-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700"/>
                                    <div className="w-2.5 h-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700"/>
                                    <div className="w-2.5 h-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700"/>
                                </div>
                                <span className="text-[10px] uppercase tracking-widest text-zinc-400 font-medium">gitdata — every action is a command</span>
                            </div>

                            {/* Terminal content */}
                            <div className="p-6 font-mono text-xs leading-7 text-left">
                                <div className="flex gap-3 mb-3">
                                    <span className="text-zinc-400">›</span>
                                    <span className="text-zinc-800 dark:text-zinc-200">
                                        gitdata <span className="text-zinc-500">service deploy</span> --name api --repo ZhenYi/api
                                    </span>
                                </div>
                                <div className="text-zinc-400 mb-3 ml-6 leading-6">
                                    [12:05:01] <Code2 className="inline h-3 w-3 mr-1 text-zinc-500"/> Service 'api' registered via command.<br/>
                                    [12:05:02] <GitBranch className="inline h-3 w-3 mr-1 text-zinc-500"/> Default branch 'main' detected.<br/>
                                    [12:05:03] <Bot className="inline h-3 w-3 mr-1 text-zinc-500"/> @reviewer-agent is watching — /command/pr:review queued.
                                </div>
                                <div className="flex gap-3 mb-3">
                                    <span className="text-zinc-400">›</span>
                                    <span className="text-zinc-800 dark:text-zinc-200">
                                        gitdata <span className="text-zinc-500">skill run</span> CodeReviewer --pr 42 --room api-review
                                    </span>
                                </div>
                                <div className="ml-6 text-zinc-500 dark:text-zinc-400">
                                    ✓ Skill 'CodeReviewer' dispatched to room 'api-review'.<br/>
                                    ✓ Agent executing command. Result stream → /command/history/abc123<br/>
                                    ✓ All commands versioned. Replay anytime with <span className="text-zinc-600 dark:text-zinc-400">gitdata replay</span>
                                </div>
                            </div>
                        </div>
                    </motion.div>
                </motion.div>
            </div>
        </section>
    );
}

export function LandingFeatures() {
    return (
        <section className="relative py-24 border-t border-zinc-100 dark:border-zinc-900/50">
            <div className="mx-auto max-w-5xl px-6">
                {/* Section header */}
                <div className="text-center mb-16">
                    <h2 className="text-3xl md:text-4xl font-semibold tracking-tight mb-3">
                        Build. Review. Automate. All via Commands.
                    </h2>
                    <p className="text-zinc-500 dark:text-zinc-500">
                        Every capability is exposed as a command. Agents listen. Humans approve. Everything is logged and replayable.
                    </p>
                </div>

                {/* Features grid */}
                <motion.div variants={stagger} initial="hidden" whileInView="visible" viewport={{once: true}}
                            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
                    {FEATURES.map((f, i) => (
                        <motion.div
                            key={i}
                            variants={fadeUp}
                            className="p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800/50 bg-white dark:bg-zinc-900/30 hover:border-zinc-300 dark:hover:border-zinc-700/50 transition-all">
                            <div
                                className="h-10 w-10 rounded-xl bg-zinc-100 dark:bg-zinc-800/50 flex items-center justify-center mb-4">
                                <f.icon className="h-5 w-5 text-zinc-600 dark:text-zinc-400"/>
                            </div>
                            <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-2 tracking-tight">{f.title}</h3>
                            <p className="text-xs text-zinc-500 dark:text-zinc-500 leading-relaxed">{f.description}</p>
                        </motion.div>
                    ))}
                </motion.div>
            </div>
        </section>
    );
}

const HIGHLIGHTS = [
    {t: 'Commands All the Way Down', d: 'Every operation — repo create, agent deploy, skill run — is a command. Your workflow is a composable, queryable stream.'},
    {t: 'Agents Listen to Commands', d: 'Deploy an agent to a room and it subscribes to command events. Agents don\'t guess — they execute what you command.'},
    {t: 'Git-Native Audit', d: 'Command history is stored in Git. Branch your command log, diff a workflow, replay it anywhere. Full traceability without a separate log store.'},
];

export function LandingHighlight() {
    return (
        <section className="relative py-24 border-t border-zinc-100 dark:border-zinc-900/50">
            <div className="mx-auto max-w-5xl px-6">
                <div className="grid lg:grid-cols-2 gap-16 items-center">
                    {/* Text content */}
                    <div>
                        <div className="h-px w-12 bg-zinc-300 dark:bg-zinc-700 mb-8"/>
                        <h2 className="text-3xl md:text-4xl font-semibold tracking-tight leading-tight mb-6">
                            Your CLI is also your API.
                        </h2>
                        <p className="text-zinc-500 dark:text-zinc-500 mb-8 leading-relaxed">
                            Every GitDataAI action is a command with a name, parameters, and a result. Agents subscribe to command streams. Rooms execute commands. Your entire development workflow becomes a versioned, replayable, diffable stream — without a separate event bus.
                        </p>

                        {/* Feature list */}
                        <ul className="space-y-4">
                            {HIGHLIGHTS.map((item, i) => (
                                <li key={i} className="flex items-start gap-3">
                                    <div
                                        className="mt-0.5 h-4 w-4 rounded-full bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center shrink-0">
                                        <div className="h-1.5 w-1.5 rounded-full bg-zinc-400 dark:bg-zinc-600"/>
                                    </div>
                                    <div>
                                        <span
                                            className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{item.t}</span>
                                        <p className="text-xs text-zinc-500 mt-0.5">{item.d}</p>
                                    </div>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Chat preview */}
                    <div>
                        <div
                            className="rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 p-4 shadow-lg">
                            <div className="space-y-3">
                                {/* Human message */}
                                <div
                                    className="bg-white dark:bg-zinc-800/50 p-3.5 rounded-2xl border border-zinc-100 dark:border-zinc-800/50">
                                    <div className="flex items-center gap-2 mb-2">
                                        <div
                                            className="h-5 w-5 rounded-full bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center text-[9px] font-bold text-zinc-500">
                                            JD
                                        </div>
                                        <span className="text-xs font-medium text-zinc-600 dark:text-zinc-400">John Doe</span>
                                    </div>
                                    <p className="text-xs text-zinc-700 dark:text-zinc-300">
                                        <span className="text-zinc-400">/skill</span> CodeReviewer --branch feature/oauth --room api-review
                                    </p>
                                </div>

                                {/* Agent message */}
                                <div
                                    className="bg-zinc-100/50 dark:bg-zinc-800/30 p-3.5 rounded-2xl border border-zinc-200 dark:border-zinc-800/50 ml-6">
                                    <div className="flex items-center gap-2 mb-2">
                                        <Bot className="h-3.5 w-3.5 text-zinc-500"/>
                                        <span
                                            className="text-xs font-medium text-zinc-500">reviewer</span>
                                    </div>
                                    <p className="text-xs text-zinc-600 dark:text-zinc-400 mb-3">
                                        Command received. Running CodeReviewer on feature/oauth. Found 3 issues — 1 critical (token validation bypass). Proposing fix...
                                    </p>
                                    <div className="rounded-md border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-mono text-[10px] text-zinc-500 p-2 mb-3">
                                        gitdata pr create --title "fix: resolve token validation bypass" --from feature/oauth --command-id abc123
                                    </div>
                                    <div className="flex gap-2">
                                        <button
                                            className="h-6 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[10px] px-3 rounded-md font-medium transition-colors">
                                            Approve
                                        </button>
                                        <button
                                            className="h-6 border border-zinc-200 dark:border-zinc-700 text-zinc-600 dark:text-zinc-400 text-[10px] px-3 rounded-md font-medium transition-colors">
                                            View Diff
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
