"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import {
  Shield,
  ArrowRight,
  Lock,
  Eye,
  Server,
  AlertTriangle,
  Fingerprint,
  ShieldAlert,
  KeyRound,
  Bug,
  Wifi,
  Smartphone,
  Award,
  Check,
} from "lucide-react";
import { GlassCard } from "@/components/GlassCard";
import { GlowingButton } from "@/components/GlowingButton";
import { SectionWrapper, itemVariants } from "@/components/SectionWrapper";
import { ParticleBackground } from "@/components/ParticleBackground";

/* ── Stagger helpers ── */
const heroStagger = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.12, delayChildren: 0.2 },
  },
};
const heroChild = {
  hidden: { opacity: 0, y: 50, filter: "blur(4px)" },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const },
  },
};

const securityLayers = [
  {
    icon: Fingerprint,
    title: "Identity Layer",
    description:
      "Multi-factor authentication, biometric verification, and continuous identity assurance.",
  },
  {
    icon: Lock,
    title: "Encryption Layer",
    description:
      "End-to-end encryption for data at rest and in transit. AES-256 and TLS 1.3 standards.",
  },
  {
    icon: Eye,
    title: "Monitoring Layer",
    description:
      "Real-time threat detection, behavioral analytics, and anomaly detection across all channels.",
  },
  {
    icon: Server,
    title: "Infrastructure Layer",
    description:
      "Hardened cloud infrastructure with HSM-backed key management and geo-redundant deployment.",
  },
  {
    icon: ShieldAlert,
    title: "Policy Layer",
    description:
      "Dynamic security policies, risk-based access control, and automated compliance enforcement.",
  },
  {
    icon: AlertTriangle,
    title: "Response Layer",
    description:
      "Automated incident response, instant revocation, and forensic audit capabilities.",
  },
];

const threats = [
  { icon: KeyRound, name: "Credential Theft", status: "Mitigated" },
  { icon: Bug, name: "Malware & Ransomware", status: "Detected & Blocked" },
  { icon: Wifi, name: "Man-in-the-Middle", status: "Prevented" },
  { icon: Smartphone, name: "SIM Swapping", status: "Mitigated" },
  { icon: ShieldAlert, name: "Phishing Attacks", status: "Detected" },
  { icon: AlertTriangle, name: "Session Hijacking", status: "Prevented" },
  { icon: Eye, name: "Insider Threats", status: "Monitored" },
  { icon: Lock, name: "Data Exfiltration", status: "Blocked" },
  { icon: Server, name: "API Abuse", status: "Rate-Limited & Blocked" },
];

const certifications = [
  {
    name: "ISO 27001",
    description: "Information Security Management",
  },
  {
    name: "eIDAS",
    description: "EU Electronic Identification & Trust Services",
  },
  {
    name: "PSD2",
    description: "Payment Services Directive 2 Compliance",
  },
  {
    name: "GDPR",
    description: "General Data Protection Regulation",
  },
  {
    name: "SOC 2 Type II",
    description: "Service Organization Control",
  },
  {
    name: "Common Criteria",
    description: "EAL4+ Certified Components",
  },
];

export default function SecurityPage() {
  return (
    <>
      {/* Hero */}
      <section className="relative min-h-[70vh] flex items-center overflow-hidden">
        <ParticleBackground />

        {/* ── UNBOXED hero image — absolutely positioned background ── */}
        <motion.div
          className="absolute top-0 right-0 h-full w-[60%] hidden lg:block"
          initial={{ opacity: 0, scale: 1.02 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 1.4, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
          style={{
            maskImage: "linear-gradient(to left, black 40%, transparent 100%)",
            WebkitMaskImage: "linear-gradient(to left, black 40%, transparent 100%)",
          }}
        >
          <Image
            src="/images/hero-security.jpg"
            alt="Security Architecture"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-tr from-accent/[0.06] via-transparent to-accent-blue/[0.04] mix-blend-screen" />
        </motion.div>

        {/* Cinematic spotlights */}
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-0 right-0 w-[70%] h-[80%] bg-gradient-to-bl from-accent/[0.07] via-accent-blue/[0.03] to-transparent" />
          <div className="absolute bottom-0 left-0 w-[50%] h-[60%] bg-gradient-to-tr from-accent/[0.05] via-transparent to-transparent" />
        </div>

        {/* Glow orb behind headline */}
        <div className="absolute top-[-20%] left-[-10%] w-[500px] h-[500px] bg-cyan-500/20 blur-[120px] rounded-full pointer-events-none" />

        {/* Bottom fade */}
        <div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-navy to-transparent z-[5]" />

        <div className="relative z-10 mx-auto max-w-7xl px-6 pt-32 pb-20">
          <motion.div
            variants={heroStagger}
            initial="hidden"
            animate="visible"
            className="max-w-2xl"
          >
            <motion.div variants={heroChild}>
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-accent/[0.06] border border-accent/[0.12] backdrop-blur-sm text-accent text-[13px] font-medium tracking-wide mb-8">
                <Shield className="h-4 w-4" />
                Enterprise-Grade Security
              </div>
            </motion.div>

            <motion.div variants={heroChild}>
              <p className="text-xs tracking-[0.25em] uppercase text-accent mb-6 font-medium">
                Security Architecture
              </p>
            </motion.div>

            <motion.h1
              variants={heroChild}
              className="text-5xl md:text-6xl lg:text-7xl font-bold font-display leading-[1.05] tracking-[-0.02em]"
            >
              Security
              <br />
              <span className="bg-gradient-to-r from-accent via-accent-blue to-accent-violet bg-clip-text text-transparent">
                That Thinks
              </span>
            </motion.h1>

            <motion.p
              variants={heroChild}
              className="mt-6 text-lg md:text-xl text-slate-300 max-w-lg leading-relaxed"
            >
              Multi-layered, AI-enhanced security architecture built on 25+
              years of protecting the world&apos;s most sensitive digital
              interactions.
            </motion.p>

            <motion.div variants={heroChild} className="mt-10">
              <GlowingButton href="/contact">
                Book a Demo <ArrowRight className="ml-2 h-4 w-4" />
              </GlowingButton>
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* Security Architecture */}
      <SectionWrapper className="bg-navy-mid/50">
        <motion.div className="text-center mb-16" variants={itemVariants}>
          <p className="text-xs tracking-[0.25em] uppercase text-accent mb-4 font-medium">
            Defense-in-Depth
          </p>
          <h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
            Six Layers of{" "}
            <span className="text-accent">Defense</span>
          </h2>
          <p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
            Security isn&apos;t a feature — it&apos;s the architecture. Every
            layer works together to create an impenetrable trust boundary.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {securityLayers.map((layer) => (
            <motion.div key={layer.title} variants={itemVariants}>
              <GlassCard className="p-6 h-full">
                <layer.icon className="h-8 w-8 text-accent mb-4 opacity-80" />
                <h3 className="text-lg font-semibold mb-2 tracking-tight">{layer.title}</h3>
                <p className="text-slate-400 text-sm leading-relaxed">
                  {layer.description}
                </p>
              </GlassCard>
            </motion.div>
          ))}
        </div>
      </SectionWrapper>

      {/* Threat Detection */}
      <SectionWrapper>
        <motion.div className="text-center mb-16" variants={itemVariants}>
          <p className="text-xs tracking-[0.25em] uppercase text-accent-blue mb-4 font-medium">
            Threat Intelligence
          </p>
          <h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
            Threats We{" "}
            <span className="text-accent">Neutralize</span>
          </h2>
          <p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
            Real-time protection against the full spectrum of modern cyber
            threats.
          </p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {threats.map((threat) => (
            <motion.div key={threat.name} variants={itemVariants}>
              <GlassCard className="p-5 h-full" hover={false}>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <threat.icon className="h-5 w-5 text-accent" />
                    <span className="font-medium text-sm">{threat.name}</span>
                  </div>
                  <span className="text-xs font-medium text-green-400 bg-green-400/[0.06] border border-green-400/[0.12] backdrop-blur-sm px-2 py-1 rounded-lg">
                    {threat.status}
                  </span>
                </div>
              </GlassCard>
            </motion.div>
          ))}
        </div>
      </SectionWrapper>

      {/* Certifications */}
      <SectionWrapper className="bg-navy-mid/50">
        <motion.div className="text-center mb-16" variants={itemVariants}>
          <p className="text-xs tracking-[0.25em] uppercase text-accent-violet mb-4 font-medium">
            Compliance
          </p>
          <h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
            Certified &{" "}
            <span className="text-accent">Compliant</span>
          </h2>
          <p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
            Meeting the highest security and compliance standards globally.
          </p>
        </motion.div>

        <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
          {certifications.map((cert) => (
            <motion.div key={cert.name} variants={itemVariants}>
              <GlassCard className="p-6 text-center h-full">
                <Award className="h-10 w-10 text-accent mx-auto mb-3 opacity-80" />
                <h3 className="text-lg font-bold font-display tracking-tight">{cert.name}</h3>
                <p className="text-slate-400 text-sm mt-1 leading-relaxed">
                  {cert.description}
                </p>
              </GlassCard>
            </motion.div>
          ))}
        </div>
      </SectionWrapper>

      {/* CTA */}
      <section className="relative py-32 md:py-40 overflow-hidden">
        {/* Ambient glow */}
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-gradient-to-r from-accent/[0.04] via-accent-blue/[0.06] to-accent-violet/[0.04] rounded-full blur-[100px]" />
        </div>
        <div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
          <motion.div
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
          >
            <h2 className="text-3xl md:text-5xl lg:text-6xl font-bold font-display tracking-tight">
              Security Questions?{" "}
              <span className="text-accent">Let&apos;s Talk.</span>
            </h2>
            <p className="mt-6 text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
              Our security team is ready to walk you through our architecture,
              certifications, and how we protect your most critical assets.
            </p>
            <div className="mt-10">
              <GlowingButton href="/contact">
                Book a Security Review{" "}
                <ArrowRight className="ml-2 h-4 w-4" />
              </GlowingButton>
            </div>
          </motion.div>
        </div>
      </section>
    </>
  );
}