import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { 
  Monitor, 
  Shield, 
  Zap, 
  Users, 
  Download, 
  ArrowRight,
  Keyboard,
  Globe,
  Clock
} from 'lucide-react'

export default function HomePage() {
  const features = [
    {
      icon: Zap,
      title: 'Low Latency',
      description: 'WebRTC-powered connections for real-time screen sharing and control with minimal delay.',
    },
    {
      icon: Shield,
      title: 'Secure by Design',
      description: 'End-to-end encryption with session codes that expire. Your data never touches our servers.',
    },
    {
      icon: Keyboard,
      title: 'Full Control',
      description: 'Complete mouse and keyboard control. Multiple monitor support and file transfer.',
    },
    {
      icon: Globe,
      title: 'Works Everywhere',
      description: 'Connect from any browser. The agent runs on Windows, macOS, and Linux.',
    },
    {
      icon: Users,
      title: 'Team Ready',
      description: 'Manage multiple machines, track session history, and collaborate with your team.',
    },
    {
      icon: Clock,
      title: 'Session History',
      description: 'Complete audit trail of all remote sessions with timestamps and duration.',
    },
  ]

  return (
    <div className="min-h-svh bg-background">
      {/* Navigation */}
      <nav className="border-b border-border/50">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex h-16 items-center justify-between">
            <div className="flex items-center gap-2">
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary">
                <Monitor className="h-5 w-5 text-primary-foreground" />
              </div>
              <span className="text-xl font-bold">RemoteLink</span>
            </div>
            <div className="flex items-center gap-3">
              <Button asChild>
                <Link href="/auth/login">Sign in</Link>
              </Button>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative overflow-hidden">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 md:py-32">
          <div className="text-center max-w-3xl mx-auto">
            <div className="inline-flex items-center gap-2 rounded-full bg-primary/10 px-4 py-1.5 text-sm text-primary mb-6">
              <Shield className="h-4 w-4" />
              <span>Secure Remote Access</span>
            </div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance mb-6">
              Remote Desktop
              <span className="text-primary"> Made Simple</span>
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-8 text-balance">
              Connect to and control remote machines securely. Perfect for IT support, 
              system administration, and helping friends and family.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Button size="lg" asChild>
                <Link href="/auth/login">
                  Sign in
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
              <Button size="lg" variant="outline" asChild>
                <Link href="/download">
                  <Download className="mr-2 h-4 w-4" />
                  Download Agent
                </Link>
              </Button>
            </div>
          </div>
        </div>

        {/* Background decoration */}
        <div className="absolute inset-0 -z-10 overflow-hidden">
          <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[600px] rounded-full bg-primary/5 blur-3xl" />
        </div>
      </section>

      {/* How it works */}
      <section className="border-t border-border/50 bg-card/50">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4">How It Works</h2>
            <p className="text-muted-foreground max-w-xl mx-auto text-balance">
              Get connected in three simple steps
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground text-xl font-bold mb-4">
                1
              </div>
              <h3 className="font-semibold mb-2">Install the Agent</h3>
              <p className="text-sm text-muted-foreground text-balance">
                Download and run our lightweight agent on the remote machine
              </p>
            </div>
            <div className="text-center">
              <div className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground text-xl font-bold mb-4">
                2
              </div>
              <h3 className="font-semibold mb-2">Get a Session Code</h3>
              <p className="text-sm text-muted-foreground text-balance">
                The agent generates a 6-digit code that expires in 10 minutes
              </p>
            </div>
            <div className="text-center">
              <div className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground text-xl font-bold mb-4">
                3
              </div>
              <h3 className="font-semibold mb-2">Connect & Control</h3>
              <p className="text-sm text-muted-foreground text-balance">
                Enter the code in your dashboard and take full control
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <section className="border-t border-border/50">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4">Built for IT Professionals</h2>
            <p className="text-muted-foreground max-w-xl mx-auto text-balance">
              Everything you need for efficient remote support
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {features.map((feature, index) => (
              <div 
                key={index}
                className="rounded-xl border border-border/50 bg-card p-6 hover:border-primary/30 transition-colors"
              >
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 mb-4">
                  <feature.icon className="h-5 w-5 text-primary" />
                </div>
                <h3 className="font-semibold mb-2">{feature.title}</h3>
                <p className="text-sm text-muted-foreground text-balance">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="border-t border-border/50 bg-primary/5">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
          <div className="text-center">
            <h2 className="text-3xl font-bold mb-4">Ready to connect?</h2>
            <p className="text-muted-foreground max-w-xl mx-auto mb-8 text-balance">
              Sign in to your account or contact your administrator for an invite.
            </p>
            <Button size="lg" asChild>
              <Link href="/auth/login">
                Sign in
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-border/50">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="flex items-center gap-2">
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
                <Monitor className="h-4 w-4 text-primary-foreground" />
              </div>
              <span className="font-semibold">RemoteLink</span>
            </div>
            <p className="text-sm text-muted-foreground">
              Built with WebRTC. End-to-end encrypted.
            </p>
          </div>
        </div>
      </footer>
    </div>
  )
}