"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">
      <div className="max-w-7xl mx-auto">
        
        <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="grid grid-cols-1 md:grid-cols-6 gap-6">
          
          {/* Top Row Left: The Architect */}
          <div className="md:col-span-4 p-8 rounded-3xl bg-neutral-900/50 border border-neutral-800 flex flex-col md:flex-row gap-8 min-h-[350px] overflow-hidden relative">
  {/* Background Decoration: Subtle Grid or Blueprint */}
  <div className="absolute top-0 right-0 w-1/2 h-full opacity-[0.03] pointer-events-none">
    {/* You could place a subtle SVG circuit or architectural grid here */}
  </div>

  {/* Left: Bio & Tags */}
  <div className="flex-[1.5] flex flex-col justify-between relative z-10">
    <div>
      <h2 className="text-3xl font-bold mb-4 tracking-tight">The Architect</h2>
      <p className="text-base text-neutral-400 leading-relaxed max-w-lg">
        Bridging the gap between rigid regulatory requirements and fluid user experiences. 
        I specialize in designing <span className="text-white">distributed systems</span> and 
        <span className="text-white"> cross-platform mobile apps</span> with a focus on 
        automated delivery and high-integrity code.
      </p>
    </div>
    
    <div className="flex flex-wrap gap-2 mt-8">
      {['#Architecture', '#Regulatory Compliance', '#Agile Leadership', '#DevOps'].map(tag => (
        <span key={tag} className="text-[10px] font-mono text-neutral-500 border border-neutral-800 px-2 py-1 rounded">
          {tag}
        </span>
      ))}
    </div>
  </div>

  {/* Vertical Divider */}
  <div className="hidden md:block w-px bg-neutral-800/50 self-stretch" />

  {/* Right: Seniority Specs */}
  <div className="flex-1 flex flex-col justify-around py-2 relative z-10">
    <div className="space-y-6">
      <section>
        <h4 className="text-[10px] font-mono text-blue-500 uppercase tracking-[0.2em] mb-2">Leadership</h4>
        <p className="text-xs text-neutral-300 leading-tight">
          Tech Lead & Scrum Master. Orchestrating sprint cycles, system design, and cross-functional team growth.
        </p>
      </section>

      <section>
        <h4 className="text-[10px] font-mono text-purple-500 uppercase tracking-[0.2em] mb-2">Integrity</h4>
        <p className="text-xs text-neutral-300 leading-tight">
          Experienced in <span className="italic">High-Stakes Environments</span> (Medical/Regulatory), QMS, and Cyber Essentials.
        </p>
      </section>

      <section>
        <h4 className="text-[10px] font-mono text-green-500 uppercase tracking-[0.2em] mb-2">Infrastructure</h4>
        <p className="text-xs text-neutral-300 leading-tight">
          Kubernetes, GCP, and automated CI/CD pipelines. 
        </p>
      </section>
    </div>
  </div>
</div>
          {/* <div className="md:col-span-4 p-8 rounded-3xl bg-neutral-900/50 border border-neutral-800 flex flex-col justify-between min-h-[320px]">
            <div>
              <h2 className="text-2xl font-bold mb-4">The Architect</h2>
              <p className="text-sm text-neutral-400 leading-relaxed">
                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 focus on performance and automated delivery.
              </p>
            </div>
            <div className="flex flex-wrap gap-2 mt-8 text-[9px] font-mono text-neutral-600 uppercase tracking-tighter">
              {['#Architecture', '#Regulatory', '#SystemDesign', '#Automation', '#FullStack', '#ProductOwner'].map(tag => (
                <span key={tag}>{tag}</span>
              ))}
            </div>
          </div> */}

          {/* Top Row Right: The Service Registry (Restored) */}
       <motion.div 
          whileHover={{ y: -5 }}
          className="group md:col-span-2 p-6 rounded-3xl bg-neutral-900 border border-neutral-800 flex flex-col justify-center relative overflow-hidden transition-all duration-300 min-h-[180px]"
        >
          {/* The Monitor Map (Easily editable) */}
          {(() => {
            const monitors = [
              { id: 2, name: "Datasaur" },
              { id: 6, name: "Audiobookshelf" },
              { id: 7, name: "Woodpecker CI" },
              { id: 8, name: "Forgejo Git" },
              { id: 9, name: "Server dashboard" },
              { id: 10, name: "Ratoong" },
            ];

            return (
              <>
                {/* Default View */}
                <div className="flex items-center justify-between w-full group-hover:opacity-0 group-hover:pointer-events-none transition-opacity duration-300">
                  <div>
                    <div className="flex items-center gap-2 mb-1">
                      <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
                      <span className="font-medium text-white">Hetzner Node-01</span>
                    </div>
                    <div className="flex gap-2 items-center">
                      <p className="text-sm text-neutral-500">System Status:</p>
                      <img 
                        src="https://status.georgew.dev/api/status-page/dashboard/badge" 
                        alt="Overall Status"
                        className="h-5"
                      />
                    </div>
                  </div>
                  <Activity className="text-neutral-700 w-8 h-8" />
                </div>

                {/* Hover View: Friendly Names */}
                <div className="absolute inset-0 p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-center bg-neutral-900/95 backdrop-blur-sm">
                  <h4 className="text-[12px] font-mono text-neutral-500 mb-3 uppercase tracking-[0.2em]">Service Registry</h4>
                  <div className="grid grid-cols-1 sm:grid-cols-1 gap-2">
                    {monitors.map((m) => (
                      <div key={m.id} className="flex items-center justify-between bg-neutral-800/40 p-2 rounded-lg border border-neutral-700/30">
                        <span className="text-[11px] font-medium text-neutral-300 truncate mr-2">{m.name}</span>
                        <div className="flex gap-1 shrink-0">
                          <img src={`https://status.georgew.dev/api/badge/${m.id}/status`} className="h-4" alt="up" />
                          <img src={`https://status.georgew.dev/api/badge/${m.id}/avg-response/24`} className="h-4 opacity-60" alt="ms" />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </>
            );
          })()}
        </motion.div>

          {/* Middle Row: Web Systems */}
          <Link href="/projects/web" className="group md:col-span-2">
            <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 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 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 transition-all">
                    {tech}
                  </span>
                ))}
              </div>
            </motion.div>
          </Link>

          {/* Middle Row: Mobile Apps */}
          <Link href="/projects/mobile" className="group md:col-span-2">
            <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 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 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 transition-all">
                    {tech}
                  </span>
                ))}
              </div>
            </motion.div>
          </Link>

          {/* Middle Row: DevOps */}
          <Link href="/projects/infrastructure" className="group md:col-span-2">
            <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 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 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 transition-all">
                    {tech}
                  </span>
                ))}
              </div>
            </motion.div>
          </Link>

          {/* Bottom Row: The Forge */}
          <div className="md:col-span-6 p-8 rounded-3xl bg-neutral-900/50 border border-neutral-800 flex items-center gap-6 group hover:border-orange-500/30 transition-colors cursor-pointer">
            <div className="p-4 bg-orange-500/10 rounded-2xl border border-orange-500/20 group-hover:border-orange-500/40 transition-colors">
              <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>
              <footer className="mt-12 pt-8 border-t border-neutral-900 flex flex-col md:flex-row justify-between items-center gap-4 text-[10px] text-neutral-600 font-mono tracking-wider uppercase">
        <div className="flex items-center gap-6">
          <div className="flex items-center gap-2">
            <p>Pipeline Status</p>
            <img 
              src="https://ci.georgew.dev/api/badges/11/status.svg" 
              alt="Build Status" 
              className="h-3 grayscale opacity-50 hover:opacity-100 hover:grayscale-0 transition-all"
            />
          </div>
          <div className="hidden md:block w-[1px] h-3 bg-neutral-800" />
          <p>Engine: Next.js 15 (Standalone)</p>
        </div>
        
        <div className="flex items-center gap-4 bg-neutral-900/50 px-3 py-1 rounded-full border border-neutral-800/50">
          <div className="w-1 h-1 rounded-full bg-blue-500" />
          <p className="text-neutral-400">
            Deploy: {process.env.NEXT_PUBLIC_APP_VERSION || 'v1.0.0-dev'}
          </p>
        </div>
      </footer>
      </div>

    </main>
  );
}