import {LandingLayout} from '@/components/landing/landing-layout';
import {useNavigate} from 'react-router-dom';
import {Bot, ShieldCheck, Users} from 'lucide-react';

import {useHead} from '@/hooks/useHead';
const FEATURES = [
    {title: 'Command-first Multi-modal', desc: 'Text, code, and structured command data shared simultaneously in a single room.'},
    {title: 'Human-in-the-Loop', desc: 'Approve, reject, or modify any agent action before it executes.'},
    {title: 'Persistent Context', desc: 'Room state is versioned and resumable. Pick up where you left off.'},
    {title: 'Access Control', desc: 'Invite-only rooms with fine-grained permission per agent and user.'},
    {title: 'Audit Trail', desc: 'Every action, decision, and message is logged with timestamps.'},
    {title: 'Multi-Agent Support', desc: 'Run multiple specialized agents in parallel within a single room.'},
];

export default function SolutionsRoomsPage() {

    useHead({ title: 'Collaborative Rooms — GitDataAI', description: 'Command-first rooms where humans and AI agents execute engineering tasks together via shared command streams.' });
    const navigate = useNavigate();
    return (
        <LandingLayout>
            <section className="pt-24 pb-32">
                <div className="mx-auto max-w-5xl px-6">
                    {/* Breadcrumb */}
                    <div className="text-xs text-zinc-400 mb-6">
                        <button onClick={() => navigate('/solutions')} className="hover:text-zinc-600">Solutions</button>
                        <span className="mx-2">/</span> Collaborative Rooms
                    </div>

                    {/* Hero */}
                    <div className="mb-20">
                        <div
                            className="h-12 w-12 rounded-xl bg-zinc-100 dark:bg-zinc-800/50 flex items-center justify-center mb-6">
                            <Users className="h-6 w-6 text-zinc-600 dark:text-zinc-400"/>
                        </div>
                        <h1 className="text-4xl md:text-5xl font-semibold tracking-tight mb-4">
                            Collaborative Rooms
                        </h1>
                        <p className="text-lg text-zinc-500 dark:text-zinc-500 max-w-2xl">
                            Command-first workspaces where humans and AI agents execute engineering tasks together via shared command streams. No more copy-pasting context between tools.
                        </p>
                    </div>

                    {/* Demo */}
                    <div
                        className="rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50 p-6 mb-16">
                        <div className="flex items-center gap-2 mb-4">
                            <div className="h-2 w-2 rounded-full bg-red-400"/>
                            <div className="h-2 w-2 rounded-full bg-amber-400"/>
                            <div className="h-2 w-2 rounded-full bg-green-400"/>
                            <span className="ml-2 text-[10px] uppercase tracking-widest text-zinc-400">Room: feature-auth-audit</span>
                        </div>
                        <div className="space-y-3 font-mono text-xs">
                            <div className="flex gap-3">
                                <span className="text-zinc-400 shrink-0">12:04:01</span>
                                <span className="text-zinc-800 dark:text-zinc-200">// John assigns Agent-Reviewer to audit auth module</span>
                            </div>
                            <div className="flex gap-3 text-zinc-500">
                                <span className="shrink-0">12:04:02</span>
                                <span><Bot className="inline h-3 w-3 mr-1"/> Agent-Reviewer: Scanning 47 files in auth/...</span>
                            </div>
                            <div className="flex gap-3 text-zinc-500">
                                <span className="shrink-0">12:04:15</span>
                                <span><ShieldCheck className="inline h-3 w-3 mr-1 text-green-500"/> Agent-Reviewer: Flagged 3 issues. Awaiting approval.</span>
                            </div>
                            <div className="flex gap-3 text-zinc-500">
                                <span className="shrink-0">12:04:16</span>
                                <span className="text-amber-600 dark:text-amber-400">⚠ Human approval required: Create fix PR?</span>
                            </div>
                        </div>
                    </div>

                    {/* Features */}
                    <div className="mb-16">
                        <h2 className="text-2xl font-semibold mb-8">Key Capabilities</h2>
                        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
                            {FEATURES.map(f => (
                                <div key={f.title}
                                     className="p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950">
                                    <h3 className="text-sm font-semibold mb-1">{f.title}</h3>
                                    <p className="text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">{f.desc}</p>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* CTA */}
                    <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">
                            Start with Collaborative Rooms
                        </button>
                    </div>
                </div>
            </section>
        </LandingLayout>
    );
}
