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

const FEATURES = [
    {
        icon: Network,
        title: 'Collaborative Rooms',
        description: 'Multi-modal workspaces where humans and AI Agents solve complex engineering tasks together in real-time.',
    },
    {
        icon: Brain,
        title: 'Agent Memory (Git-Native)',
        description: 'Version-controlled long-term memory for Agents. Branch, commit, and revert AI context just like code.',
    },
    {
        icon: Workflow,
        title: 'Skill Registry',
        description: 'Package successful Agent behaviors into reusable "Skills". The new npm for the AI-native era.',
    },
    {
        icon: Layers,
        title: 'Prompt Engineering Ops',
        description: 'Manage, test, and deploy prompts with the same rigor as production source code.',
    },
    {
        icon: History,
        title: 'Traceable Autonomy',
        description: 'Every decision made by an Agent is logged, versioned, and auditable. Human-in-the-loop by design.',
    },
    {
        icon: Cpu,
        title: 'Compute Governance',
        description: 'Unified management of LLM tokens and compute resources across your entire Agent fleet.',
    },
];

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>
                            The OS for Human-Agent Collaboration
                        </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">
                        GitDataAI is the unified infrastructure for the Agentic era.
                        Version control your Agent's memory, deploy collaborative rooms, and scale your AI workforce
                        with engineering rigor.
                    </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">
                            Deploy your first Agent
                            <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">
                            Read Whitepaper
                        </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">Human-Agent Protocol v1.0</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">agent create</span> --template senior-react-dev
                                    </span>
                                </div>
                                <div className="text-zinc-400 mb-3 ml-6 leading-6">
                                    [12:05:01] <Bot className="inline h-3 w-3 mr-1 text-zinc-500"/> Initializing Agent 'Nexus-7'...<br/>
                                    [12:05:02] <Brain className="inline h-3 w-3 mr-1 text-zinc-500"/> Injecting Long-term Memory from 'workspace-ctx-v4.2'<br/>
                                    [12:05:03] <ShieldCheck className="inline h-3 w-3 mr-1 text-zinc-500"/> Compliance policy 'SOX-2' verified.
                                </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">commit</span> -m "Tuned Agent memory for better RAG performance"
                                    </span>
                                </div>
                                <div className="ml-6 text-zinc-500 dark:text-zinc-400">
                                    ✓ Memory branch 'main' updated. [commit_hash: 7a2f9b1]<br/>
                                    ✓ AI Skill 'Code-Optimizer' published to Registry.
                                </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">
                        Built for the next generation of software.
                    </h2>
                    <p className="text-zinc-500 dark:text-zinc-500">
                        Stop building black-box AI. Start engineering transparent Agent systems.
                    </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-3 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: 'Multi-Agent Orchestration', d: 'Let different Agents specialize in different tasks.'},
    {t: 'Semantic Versioning', d: 'Roll back Agent logic to any point in the discussion.'},
    {t: 'Human-in-the-Loop', d: 'Approve critical Agent actions with one click.'},
];

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">
                            Interaction is the{" "}
                            <span className="text-zinc-400">New Code</span>.
                        </h2>
                        <p className="text-zinc-500 dark:text-zinc-500 mb-8 leading-relaxed">
                            In GitDataAI, conversations aren't just chats—they are executable streams of intent.
                            Our Collaborative Rooms capture context, version it, and allow Agents to take
                            autonomous actions within a governed environment.
                        </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 (Dev)</span>
                                    </div>
                                    <p className="text-xs text-zinc-700 dark:text-zinc-300">
                                        @Agent-Reviewer, please audit the memory leaks in our skill-store module.
                                    </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">Agent-Reviewer</span>
                                    </div>
                                    <p className="text-xs text-zinc-600 dark:text-zinc-400 mb-3">
                                        Audit complete. Found 2 leaks in `useMemory.ts`. Suggesting fix via Git PR...
                                    </p>
                                    <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 Fix
                                        </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>
    );
}