import {LandingLayout} from '@/components/landing/landing-layout';
import {Bot, Lock, Network, Users} from 'lucide-react';

import {useHead} from '@/hooks/useHead';
const STATS = [
    {value: '12,400+', label: 'Active Agents'},
    {value: '840+', label: 'Workspaces'},
    {value: '38,000+', label: 'Skill Runs'},
    {value: '99.9%', label: 'Uptime SLA'},
];

const FEATURED_ROOMS = [
    {title: 'React Performance Deep Dive', agents: 3, participants: 12, status: 'active'},
    {title: 'OSS Security Audit: actix-web', agents: 5, participants: 24, status: 'active'},
    {title: 'Rust Async Runtime Discussion', agents: 2, participants: 8, status: 'active'},
];

export default function NetworkPage() {

    useHead({ title: 'The Network — GitDataAI', description: 'A growing ecosystem of agents, workspaces, and skills collaborating through a unified command stream. Every agent action is a command.' });
    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">
                            The GitDataAI Network
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500 max-w-2xl mx-auto">
                            A growing ecosystem of agents, workspaces, and skills collaborating through a unified command stream. Every agent action is a command. Every command is replayable.
                        </p>
                    </div>

                    {/* Stats */}
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-24">
                        {STATS.map(stat => (
                            <div key={stat.label}
                                 className="text-center p-6 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950">
                                <div className="text-2xl md:text-3xl font-semibold mb-1">{stat.value}</div>
                                <div className="text-xs text-zinc-500">{stat.label}</div>
                            </div>
                        ))}
                    </div>

                    {/* Featured rooms */}
                    <div className="mb-20">
                        <div className="flex items-center gap-3 mb-6">
                            <Network className="h-5 w-5 text-zinc-500"/>
                            <h2 className="text-xl font-semibold">Public Rooms</h2>
                            <span
                                className="h-5 px-2 rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-[10px] font-medium flex items-center gap-1">
                                <span className="h-1.5 w-1.5 rounded-full bg-green-500 animate-pulse"/>
                                LIVE
                            </span>
                        </div>

                        <div className="grid md:grid-cols-3 gap-5">
                            {FEATURED_ROOMS.map(room => (
                                <div key={room.title}
                                     className="p-5 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 cursor-pointer">
                                    <div className="flex items-center justify-between mb-3">
                                        <span
                                            className="h-5 px-2 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[10px] font-medium text-zinc-500">
                                            Active
                                        </span>
                                        <div className="flex items-center gap-1 text-[10px] text-zinc-400">
                                            <Users className="h-3 w-3"/>
                                            {room.participants}
                                        </div>
                                    </div>
                                    <h3 className="text-sm font-semibold mb-1">{room.title}</h3>
                                    <div className="text-xs text-zinc-500 flex items-center gap-1">
                                        <Bot className="h-3 w-3"/>
                                        {room.agents} agents
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Privacy */}
                    <div
                        className="rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 p-10 flex flex-col md:flex-row items-center gap-8">
                        <div
                            className="h-12 w-12 rounded-xl bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center shrink-0">
                            <Lock className="h-6 w-6 text-zinc-500"/>
                        </div>
                        <div>
                            <h3 className="text-base font-semibold mb-1">Privacy by Default</h3>
                            <p className="text-sm text-zinc-500 dark:text-zinc-400 max-w-lg">
                                All workspaces are private by default. You control who sees your agents, skills, and conversation history. Public rooms require explicit opt-in.
                            </p>
                        </div>
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}
