"use client";

import Link from "next/link";
import { motion, Variants } from "framer-motion";
import { Globe, Smartphone, Server, Gamepad2, Hammer } from "lucide-react";
import { useState } from "react";
import MonitorCard from "@/components/MonitorCard";
import PageLayout from "@/components/PageLayout";
import { CategoryCardProps } from "@/types/index";

const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2,
    },
  },
};

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease: "easeOut" },
  },
};

export default function Home() {
  const [isHoveringMonitors, setIsHoveringMonitors] = useState(false);

  return (
    <PageLayout maxWidth="7xl">
      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="flex flex-col gap-12"
      >
        {/* Header Section */}
        <motion.header variants={itemVariants}>
          <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>
          <div className="flex gap-6 text-[10px] font-mono tracking-[0.2em] uppercase mt-4">
            <a
              href="https://git.georgew.dev/georgew"
              className="text-neutral-500 hover:text-white transition-colors"
            >
              Git
            </a>
            <a
              href="https://www.linkedin.com/in/george-webberley/"
              className="text-neutral-500 hover:text-white transition-colors"
            >
              LinkedIn
            </a>
            <Link
              href="/cv"
              className="text-neutral-500 hover:text-white transition-colors"
            >
              CV
            </Link>
          </div>
        </motion.header>

        {/* Main Bento Grid */}
        <div className="grid grid-cols-1 md:grid-cols-6 gap-6">
          {/* Top Row Left: Technical Focus */}
          <motion.div
            variants={itemVariants}
            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-[300px] overflow-hidden relative"
          >
            <div className="flex-[1.5] flex flex-col justify-between relative z-10">
              <div>
                <h2 className="text-3xl font-bold mb-4 tracking-tight">
                  Technical Focus
                </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>

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

            <div className="flex-1 flex flex-col justify-around py-2 relative z-10">
              <div className="space-y-6">
                <TechnicalFocus
                  label="Leadership"
                  color="text-blue-500"
                  text="Tech Lead & Scrum Master. Orchestrating sprint cycles and system design."
                />
                <TechnicalFocus
                  label="Integrity"
                  color="text-purple-500"
                  text="Medical/Regulatory environments, QMS, and Cyber Essentials."
                />
                <TechnicalFocus
                  label="Infrastructure"
                  color="text-green-500"
                  text="Kubernetes, GCP, and automated CI/CD pipelines."
                />
              </div>
            </div>
          </motion.div>

          {/* Top Row Right: The Service Registry */}
          <Link href="/lab" className="md:col-span-2 flex flex-col group">
            <motion.div
              variants={itemVariants}
              whileHover={{ y: -5 }}
              onMouseEnter={() => setIsHoveringMonitors(true)}
              onMouseLeave={() => setIsHoveringMonitors(false)}
              className="flex-1 p-6 rounded-3xl bg-neutral-900 border border-neutral-800 flex flex-col justify-center relative overflow-hidden min-h-[180px] hover:border-blue-500/30"
            >
              <MonitorCard isHovered={isHoveringMonitors} />
            </motion.div>
          </Link>

          {/* Project Category Cards */}
          <CategoryCard
            href="/projects/web"
            icon={<Globe className="text-blue-400 w-6 h-6 mb-4" />}
            title="Web Systems"
            description="Architecting distributed platforms with a focus on high-availability."
            tech={["Next.js", "Python", "Node.js", "Caddy", "PostgreSQL"]}
            hoverColor="hover:border-blue-500/30"
            activeTechColor="group-hover:text-blue-400"
          />

          <CategoryCard
            href="/projects/mobile"
            icon={<Smartphone className="text-purple-400 w-6 h-6 mb-4" />}
            title="Mobile Apps"
            description="Building fluid, cross-platform experiences using reactive state."
            tech={["Android", "iOS", "Flutter", "Riverpod", "Stores"]}
            hoverColor="hover:border-purple-500/30"
            activeTechColor="group-hover:text-purple-400"
          />

          <CategoryCard
            href="/infrastructure"
            icon={<Server className="text-green-400 w-6 h-6 mb-4" />}
            title="Infrastructure"
            description="Resilient cloud environments with automated IaC and multi-region orchestration."
            tech={["Kubernetes", "Terraform", "GCP", "CI/CD", "Security"]}
            hoverColor="hover:border-green-500/30"
            activeTechColor="group-hover:text-green-400"
          />

          {/* Bottom Row: The Forge */}
          <Link href="/forge" className="md:col-span-6">
            <motion.div
              variants={itemVariants}
              className="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">
                <Hammer className="text-orange-500 w-8 h-8 group-hover:rotate-12 transition-transform" />
              </div>
              <div>
                <div className="flex items-center gap-2 mb-0.5">
                  <h3 className="font-bold text-xl tracking-tight">
                    The Forge
                  </h3>
                  <span className="w-1.5 h-1.5 rounded-full bg-orange-500 animate-pulse" />
                </div>
                <p className="text-sm text-neutral-500 leading-tight">
                  A space where I demonstrate what I am currently working on and
                  any future projects.
                </p>
              </div>
            </motion.div>
          </Link>
        </div>
      </motion.div>
    </PageLayout>
  );
}

function TechnicalFocus({
  label,
  color,
  text,
}: {
  label: string;
  color: string;
  text: string;
}) {
  return (
    <section>
      <h4
        className={`text-[12px] font-mono ${color} uppercase tracking-[0.2em] mb-2`}
      >
        {label}
      </h4>
      <p className="text-xs text-neutral-300 leading-tight">{text}</p>
    </section>
  );
}

function CategoryCard({
  href,
  icon,
  title,
  description,
  tech,
  hoverColor,
  activeTechColor,
}: CategoryCardProps) {
  return (
    <Link href={href} className="group md:col-span-2">
      <motion.div
        variants={itemVariants}
        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 ${hoverColor}`}
      >
        <div>
          {icon}
          <h3 className="font-bold text-xl mb-2">{title}</h3>
          <p className="text-sm text-neutral-500 leading-relaxed">
            {description}
          </p>
        </div>
        <div className="flex flex-wrap gap-2 mt-6">
          {tech.map((t: string) => (
            <span
              key={t}
              className={`text-[9px] font-mono text-neutral-600 border border-neutral-800 px-2 py-1 rounded-md uppercase ${activeTechColor} group-hover:border-current/20 transition-all`}
            >
              {t}
            </span>
          ))}
        </div>
      </motion.div>
    </Link>
  );
}