"use client";
import Link from 'next/link';
import { motion } from 'framer-motion';
import { Globe, Smartphone, Server, Gamepad2, Activity } from 'lucide-react';

export default function Home() {
  return (
    <main className="min-h-screen bg-[#0a0a0a] text-white p-6 md:p-12 lg:p-24">
      <header className="mb-12">
        <h1 className="text-4xl font-bold tracking-tight">George W.</h1>
        <p className="text-neutral-400 mt-2">Senior Full Stack Engineer & Tech Lead</p>
      </header>

      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
        
        {/* Top Row: The Architect (Wide) */}
        <div className="md:col-span-2 p-8 rounded-3xl bg-neutral-900/50 border border-neutral-800 flex flex-col justify-between min-h-[320px]">
          <div>
            <h2 className="text-3xl font-bold mb-4">The Architect</h2>
            <p className="text-neutral-400 leading-relaxed max-w-2xl">
              Bridging the gap between complex system architecture and fluid user experiences. 
              I specialize in designing distributed web systems and cross-platform mobile apps 
              with a relentless focus on performance, self-sovereign infrastructure, and automated delivery pipelines.
            </p>
          </div>
          <div className="flex flex-wrap gap-3 mt-8 text-[10px] font-mono text-neutral-600">
            {['#Architecture', '#SystemDesign', '#Automation', '#FullStack', '#Scalability'].map(tag => (
              <span key={tag}>{tag}</span>
            ))}
          </div>
        </div>

        {/* Top Row: Hetzner Node (Narrow) */}
        <div className="p-8 rounded-3xl bg-neutral-900/50 border border-neutral-800 flex flex-col justify-between">
          <div className="flex items-center gap-3">
            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
            <span className="text-sm font-medium">Hetzner Node-01</span>
          </div>
          <div className="flex justify-between items-end">
             <span className="text-xs text-neutral-500 uppercase tracking-widest">Status: UP</span>
             <Activity className="text-neutral-800 w-12 h-12" />
          </div>
        </div>

        {/* Middle Row: Web Systems */}
        <Link href="/projects/web" className="group">
          <motion.div 
            whileHover={{ y: -5 }}
            className="p-6 rounded-3xl bg-neutral-900 border border-neutral-800 h-full flex flex-col justify-between min-h-[260px] relative overflow-hidden transition-colors hover:border-blue-500/30"
          >
            <div>
              <Globe className="text-blue-400 w-6 h-6 mb-4" />
              <h3 className="font-bold text-xl mb-2">Web Systems</h3>
              <p className="text-sm text-neutral-500 leading-relaxed">
                Architecting distributed platforms with a focus on high-availability, API design, and containerized deployment.
              </p>
            </div>
            <div className="flex flex-wrap gap-2 mt-6">
              {['Next.js', 'Python', 'Node.js', 'Caddy', 'PostgreSQL'].map(tech => (
                <span key={tech} className="text-[9px] font-mono text-neutral-600 border border-neutral-800 px-2 py-1 rounded-md uppercase group-hover:text-blue-400 group-hover:border-blue-500/20">
                  {tech}
                </span>
              ))}
            </div>
          </motion.div>
        </Link>

        {/* Middle Row: Mobile Apps */}
        <Link href="/projects/mobile" className="group">
          <motion.div 
            whileHover={{ y: -5 }}
            className="p-6 rounded-3xl bg-neutral-900 border border-neutral-800 h-full flex flex-col justify-between min-h-[260px] relative overflow-hidden transition-colors hover:border-purple-500/30"
          >
            <div>
              <Smartphone className="text-purple-400 w-6 h-6 mb-4" />
              <h3 className="font-bold text-xl mb-2">Mobile Apps</h3>
              <p className="text-sm text-neutral-500 leading-relaxed">
                Building fluid, cross-platform experiences using reactive state management and native hardware integration.
              </p>
            </div>
            <div className="flex flex-wrap gap-2 mt-6">
              {['Android', 'iOS', 'Flutter', 'Riverpod', 'Stores'].map(tech => (
                <span key={tech} className="text-[9px] font-mono text-neutral-600 border border-neutral-800 px-2 py-1 rounded-md uppercase group-hover:text-purple-400 group-hover:border-purple-500/20">
                  {tech}
                </span>
              ))}
            </div>
          </motion.div>
        </Link>

        {/* Middle Row: Infrastructure (The New Card) */}
        <Link href="/projects/infrastructure" className="group">
          <motion.div 
            whileHover={{ y: -5 }}
            className="p-6 rounded-3xl bg-neutral-900 border border-neutral-800 h-full flex flex-col justify-between min-h-[260px] relative overflow-hidden transition-colors hover:border-green-500/30"
          >
            <div>
              <Server className="text-green-400 w-6 h-6 mb-4" />
              <h3 className="font-bold text-xl mb-2">DevOps</h3>
              <p className="text-sm text-neutral-500 leading-relaxed">
                Managing self-hosted cloud nodes with automated CI/CD pipelines, secure proxying, and proactive monitoring.
              </p>
            </div>
            <div className="flex flex-wrap gap-2 mt-6">
              {['Docker', 'Woodpecker', 'Hetzner', 'Linux', 'Uptime'].map(tech => (
                <span key={tech} className="text-[9px] font-mono text-neutral-600 border border-neutral-800 px-2 py-1 rounded-md uppercase group-hover:text-green-400 group-hover:border-green-500/20">
                  {tech}
                </span>
              ))}
            </div>
          </motion.div>
        </Link>

        {/* Bottom Row: The Forge (Wide) */}
        <div className="md:col-span-3 p-8 rounded-3xl bg-neutral-900/50 border border-neutral-800 flex items-center gap-6">
          <div className="p-4 bg-orange-500/10 rounded-2xl border border-orange-500/20">
            <Gamepad2 className="text-orange-500 w-8 h-8" />
          </div>
          <div>
            <h3 className="font-bold text-xl">The Forge</h3>
            <p className="text-sm text-neutral-500">Indie Game Dev & Creative Prototypes</p>
          </div>
        </div>

      </div>
    </main>
  );
}