// ─────────────────────────────────────────────────────────────
// Landing Page — Hero + Features showcase
// ─────────────────────────────────────────────────────────────

'use client';

import Link from 'next/link';
import { Code2, Users, Zap, Shield, Video, Bot, Terminal, Globe } from 'lucide-react';

const features = [
  { icon: Users, title: 'Real-Time Collaboration', desc: 'Multiple users editing simultaneously with CRDT-based sync' },
  { icon: Zap, title: 'Low Latency', desc: 'WebSocket-powered updates with optimistic UI rendering' },
  { icon: Terminal, title: 'Code Execution', desc: 'Run code in isolated Docker containers with streaming output' },
  { icon: Bot, title: 'AI Assistant', desc: 'Integrated AI for debugging, optimization, and code explanation' },
  { icon: Video, title: 'Video Calls', desc: 'WebRTC peer-to-peer video/audio with screen sharing' },
  { icon: Shield, title: 'Secure Sandbox', desc: 'Isolated execution with resource limits and network isolation' },
  { icon: Code2, title: 'Monaco Editor', desc: 'VS Code-grade editing with IntelliSense and multi-language support' },
  { icon: Globe, title: 'Scalable', desc: 'Redis pub/sub for horizontal scaling across multiple instances' },
];

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-editor-bg via-editor-surface to-editor-bg">
      {/* Nav */}
      <nav className="flex items-center justify-between px-6 py-4 max-w-7xl mx-auto">
        <div className="flex items-center gap-2">
          <Code2 className="h-6 w-6 text-editor-accent" />
          <span className="text-lg font-bold">CodeSync</span>
        </div>
        <div className="flex items-center gap-4">
          <Link href="/login" className="text-sm text-editor-text-muted hover:text-editor-text transition-colors">
            Sign In
          </Link>
          <Link href="/register" className="btn-primary text-sm">
            Get Started
          </Link>
        </div>
      </nav>

      {/* Hero */}
      <section className="flex flex-col items-center justify-center px-6 py-24 text-center max-w-4xl mx-auto">
        <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-editor-border px-4 py-1.5 text-xs text-editor-text-muted">
          <span className="h-2 w-2 rounded-full bg-editor-success animate-pulse" />
          Real-time collaborative coding platform
        </div>
        
        <h1 className="text-5xl font-bold leading-tight tracking-tight md:text-6xl">
          Code Together,{' '}
          <span className="bg-gradient-to-r from-editor-accent to-editor-success bg-clip-text text-transparent">
            Build Faster
          </span>
        </h1>
        
        <p className="mt-6 max-w-2xl text-lg text-editor-text-muted leading-relaxed">
          A production-grade collaborative IDE with real-time editing, AI-powered debugging,
          video collaboration, and secure sandboxed code execution. Like VS Code, but multiplayer.
        </p>

        <div className="mt-10 flex items-center gap-4">
          <Link href="/register" className="btn-primary px-6 py-3 text-base">
            Start Coding Free →
          </Link>
          <Link href="/login" className="btn-secondary px-6 py-3 text-base">
            View Demo
          </Link>
        </div>

        {/* Code preview mockup */}
        <div className="mt-16 w-full max-w-3xl rounded-xl border border-editor-border bg-editor-surface shadow-2xl overflow-hidden">
          <div className="flex items-center gap-2 border-b border-editor-border px-4 py-2">
            <span className="h-3 w-3 rounded-full bg-red-500" />
            <span className="h-3 w-3 rounded-full bg-yellow-500" />
            <span className="h-3 w-3 rounded-full bg-green-500" />
            <span className="ml-4 text-xs text-editor-text-muted">main.ts — CodeSync</span>
          </div>
          <div className="p-4 font-mono text-sm text-left">
            <pre className="text-editor-text-muted">
{`  1 │ `}<span className="text-purple-400">import</span>{` { collaborate } `}<span className="text-purple-400">from</span>{` `}<span className="text-green-400">'codesync'</span>{`;
  2 │
  3 │ `}<span className="text-purple-400">const</span>{` room = `}<span className="text-purple-400">await</span>{` collaborate.`}<span className="text-yellow-300">createRoom</span>{`({
  4 │   name: `}<span className="text-green-400">'Project Alpha'</span>{`,
  5 │   language: `}<span className="text-green-400">'typescript'</span>{`,
  6 │   members: [`}<span className="text-green-400">'alice'</span>{`, `}<span className="text-green-400">'bob'</span>{`],
  7 │ });
  8 │
  9 │ room.`}<span className="text-yellow-300">on</span>{`(`}<span className="text-green-400">'update'</span>{`, (delta) => {
 10 │   `}<span className="text-editor-text-muted">// CRDT ensures conflict-free merging</span>{`
 11 │   editor.`}<span className="text-yellow-300">applyDelta</span>{`(delta);
 12 │ });`}
            </pre>
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <section className="max-w-6xl mx-auto px-6 py-24">
        <h2 className="text-center text-3xl font-bold mb-4">Everything You Need</h2>
        <p className="text-center text-editor-text-muted mb-12 max-w-2xl mx-auto">
          Built with production-grade architecture, real-time synchronization, and modern developer tooling.
        </p>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {features.map((feature) => (
            <div
              key={feature.title}
              className="rounded-lg border border-editor-border bg-editor-surface p-5 hover:border-editor-accent/50 transition-colors group"
            >
              <feature.icon className="h-8 w-8 text-editor-accent mb-3 group-hover:scale-110 transition-transform" />
              <h3 className="font-semibold text-sm mb-1">{feature.title}</h3>
              <p className="text-xs text-editor-text-muted leading-relaxed">{feature.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-editor-border py-8 text-center text-xs text-editor-text-muted">
        <p>© 2024 CodeSync. Built with Next.js, Socket.io, Yjs, and WebRTC.</p>
      </footer>
    </div>
  );
}