"use client";

import { motion } from "framer-motion";
import { ShieldCheck, Zap, Cpu, Terminal } from "lucide-react";
import Link from "next/link";
import PageLayout from "@/components/PageLayout";

const CAPABILITIES = [
  {
    title: "Cloud Orchestration",
    icon: <Cpu size={16} />,
    skills: ["Kubernetes", "Docker", "Cloud Run", "Multi-Region VPC"],
    description:
      "Managing containerized application lifecycles and software-defined networks to ensure high availability and regional data sovereignty.",
  },
  {
    title: "Provisioning & IaC",
    icon: <Terminal size={16} />,
    skills: ["Terraform", "Makefiles", "Shell Scripting", "Versioned State"],
    description:
      "Defining environment state through version-controlled configurations to ensure reproducible, predictable, and audit-ready cloud resources.",
  },
  {
    title: "Deployment Pipelines",
    icon: <Zap size={16} />,
    skills: [
      "GitHub Actions",
      "Woodpecker CI",
      "Fastlane",
      "Automated Testing",
    ],
    description:
      "Architecting CI/CD workflows that bridge the gap between local development and production environments with zero-downtime strategies.",
  },
  {
    title: "Governance & Security",
    icon: <ShieldCheck size={16} />,
    skills: ["NHS DSPT", "Cyber Essentials", "DPIA", "Secret Management"],
    description:
      "Hardening infrastructure and delivery pipelines to maintain alignment with UK health data standards and government security frameworks.",
  },
];

export default function InfrastructurePage() {
  return (
    <PageLayout backLink="/" maxWidth="6xl">
      {/* Header Section */}
      <header className="mb-16 font-mono">
        <div className="flex items-center gap-2 mb-3">
          <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse" />
          <h1 className="text-3xl font-bold tracking-tighter text-white uppercase">
            Infrastructure and Operations
          </h1>
        </div>
        <p className="text-neutral-500 max-w-xl leading-relaxed text-sm">
          Technical manifest of experiences in cloud orchestration, deployment
          pipelines, and security frameworks designed for resilient services in
          regulated environments.
        </p>
      </header>

      {/* Specification List */}
      <div className="space-y-6 mb-32 font-mono">
        {CAPABILITIES.map((cap, i) => (
          <motion.div
            key={cap.title}
            initial={{ opacity: 0, y: 10 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: i * 0.1, duration: 0.4 }}
            className="grid grid-cols-1 md:grid-cols-12 gap-6 border-t border-neutral-800/60 pt-10"
          >
            <div className="md:col-span-4">
              <div className="flex items-center gap-3 text-blue-500/90">
                {cap.icon}
                <h3 className="text-[10px] font-bold tracking-[0.25em] uppercase">
                  {cap.title}
                </h3>
              </div>
            </div>

            <div className="md:col-span-8">
              <p className="text-neutral-400 text-sm leading-relaxed mb-6">
                {cap.description}
              </p>
              <div className="flex flex-wrap gap-x-6 gap-y-2">
                {cap.skills.map((skill) => (
                  <span
                    key={skill}
                    className="text-[9px] font-mono text-neutral-600 uppercase tracking-widest"
                  >
                    {`// ${skill}`}
                  </span>
                ))}
              </div>
            </div>
          </motion.div>
        ))}
      </div>

      {/* Featured Case Study Section */}
      <section className="bg-neutral-900/40 border border-neutral-800 p-8 md:p-12 rounded-3xl font-mono">
        <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-10">
          <div className="flex-1">
            <h2 className="text-[10px] font-mono text-blue-500 uppercase tracking-[0.3em] mb-4 font-bold">
              Selected Case Study
            </h2>
            <h3 className="text-xl font-bold text-white mb-3 tracking-tight">
              Medical-Grade Architecture Analysis
            </h3>
            <p className="text-neutral-500 leading-relaxed text-sm max-w-2xl">
              An examination of a multi-cloud environment built to satisfy
              <span className="text-neutral-300"> UK Cyber Essentials</span> and
              <span className="text-neutral-300"> NHS DSPT</span> standards,
              focusing on data residency and infrastructure-level security.
            </p>
          </div>

          <div className="shrink-0">
            <Link href="/projects/infrastructure/ayla">
              <motion.div
                whileHover={{
                  scale: 1.02,
                  backgroundColor: "#3b82f6",
                  color: "#fff",
                }}
                whileTap={{ scale: 0.98 }}
                className="px-8 py-4 rounded-xl bg-white text-black font-bold text-[11px] uppercase tracking-[0.2em] flex items-center gap-3 transition-all duration-300"
              >
                View case
                <Zap size={14} />
              </motion.div>
            </Link>
          </div>
        </div>
      </section>
    </PageLayout>
  );
}