"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import {
  Shield,
  MessageSquareLock,
  FileSignature,
  Wallet,
  Building2,
  Landmark,
  HeartPulse,
  ShieldCheck,
  Factory,
  Bot,
  ArrowRight,
  ChevronRight,
} from "lucide-react";
import { GlassCard } from "@/components/GlassCard";
import { GlowingButton } from "@/components/GlowingButton";
import { SectionWrapper, itemVariants } from "@/components/SectionWrapper";
import { AnimatedCounter } from "@/components/AnimatedCounter";
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 platformPillars = [
  {
    icon: Shield,
    title: "Identity",
    description:
      "Verify anyone, anywhere, in real time. Multi-factor authentication, biometric verification, and digital identity management at scale.",
    image: "/images/section-identity.jpg",
    accent: "from-accent to-accent-blue",
  },
  {
    icon: MessageSquareLock,
    title: "Communication",
    description:
      "End-to-end encrypted messaging, video, and data exchange. Every conversation verified, every participant authenticated.",
    image: "/images/section-communication.jpg",
    accent: "from-accent-blue to-accent-violet",
  },
  {
    icon: FileSignature,
    title: "Signatures",
    description:
      "Legally binding digital signatures with full audit trails. eIDAS-compliant, court-admissible, and instantly verifiable.",
    image: "/images/section-signatures.jpg",
    accent: "from-accent-violet to-accent",
  },
  {
    icon: Wallet,
    title: "Payments",
    description:
      "Secure transaction authorization and payment verification. PSD2-compliant strong customer authentication built in.",
    image: "/images/section-payments.jpg",
    accent: "from-accent to-accent-violet",
  },
];

const painPoints = [
  {
    stat: "80%",
    title: "of breaches involve identity",
    description:
      "Stolen credentials remain the #1 attack vector. Passwords alone are not enough.",
  },
  {
    stat: "$4.5M",
    title: "average cost of a data breach",
    description:
      "Organizations without unified trust infrastructure pay the highest price.",
  },
  {
    stat: "67%",
    title: "of enterprises use 10+ security tools",
    description:
      "Fragmented security stacks create gaps, complexity, and integration nightmares.",
  },
];

const industries = [
  { icon: Landmark, name: "Banking & Finance" },
  { icon: Building2, name: "Government" },
  { icon: HeartPulse, name: "Healthcare" },
  { icon: ShieldCheck, name: "Insurance" },
  { icon: Factory, name: "Enterprise" },
  { icon: Bot, name: "AI-First Companies" },
];

export default function Home() {
  return (
    <>
      {/* ════════════════════════════════════════════
          HERO — Full-viewport cinematic entrance
          ════════════════════════════════════════════ */}
      <section className="relative min-h-screen flex items-center overflow-hidden">
        {/* Particle grid */}
        <ParticleBackground />

        {/* ── UNBOXED hero image — 120% scale, bleeds off screen ── */}
        <motion.div
          className="absolute top-[-10%] right-[-10%] h-[120%] w-[70%] hidden lg:block"
          initial={{ opacity: 0, scale: 1.05 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 1.6, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
          style={{
            maskImage: "linear-gradient(to left, black 50%, transparent 100%)",
            WebkitMaskImage: "linear-gradient(to left, black 50%, transparent 100%)",
          }}
        >
          <Image
            src="/images/hero-home.jpg"
            alt="Digital trust ecosystem"
            fill
            className="object-cover"
            priority
          />
          {/* Cyan tint overlay */}
          <div className="absolute inset-0 bg-gradient-to-br from-accent/[0.06] via-transparent to-accent-violet/[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-violet/[0.05] via-transparent to-transparent" />
        </div>

        {/* Atmospheric glow orbs */}
        <div className="absolute top-[-20%] right-[-10%] w-[800px] h-[800px] bg-cyan-500/10 blur-[150px] rounded-full pointer-events-none" />
        <div className="absolute bottom-0 left-[-10%] w-[600px] h-[600px] bg-purple-600/10 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]" />

        {/* Content — text floats OVER the image */}
        <div className="relative z-10 mx-auto max-w-7xl px-6 pt-32 pb-20 w-full">
          <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-white/[0.04] border border-white/[0.06] backdrop-blur-sm text-[13px] font-medium tracking-wide text-slate-300 mb-8">
                <span className="w-1.5 h-1.5 rounded-full bg-accent animate-glow-pulse" />
                Trusted by 100M+ identities worldwide
              </div>
            </motion.div>

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

            <motion.p
              variants={heroChild}
              className="mt-6 text-lg md:text-xl text-slate-300 max-w-lg leading-relaxed"
            >
              Identity. Communication. Signatures. Payments. Everything your
              organization needs to build, verify, and maintain digital trust
              — in one platform.
            </motion.p>

            <motion.div
              variants={heroChild}
              className="mt-10 flex flex-wrap gap-4"
            >
              <GlowingButton href="/contact">
                Book a Demo <ArrowRight className="ml-2 h-4 w-4" />
              </GlowingButton>
              <GlowingButton href="/platform" variant="ghost">
                Explore the Platform <ChevronRight className="ml-1 h-4 w-4" />
              </GlowingButton>
            </motion.div>
          </motion.div>

          {/* ── Trust bar ── */}
          <motion.div
            className="mt-24 pt-10 border-t border-white/[0.04]"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 1.2, duration: 0.8 }}
          >
            <p className="text-center text-xs text-slate-500 tracking-widest uppercase mb-8">
              Trusted by leading enterprises and governments worldwide
            </p>
            <div className="flex flex-wrap justify-center gap-x-16 gap-y-4 items-center">
              {[
                "Deutsche Bank",
                "Bundesdruckerei",
                "T-Systems",
                "Allianz",
                "Commerzbank",
              ].map((name) => (
                <span
                  key={name}
                  className="text-[11px] font-semibold text-slate-600 tracking-[0.2em] uppercase"
                >
                  {name}
                </span>
              ))}
            </div>
          </motion.div>
        </div>
      </section>

      {/* ════════════════════════════════════════════
          PROBLEM — "Digital Trust Is Broken"
          ════════════════════════════════════════════ */}
      <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">
            The Problem
          </p>
          <h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
            Digital Trust Is{" "}
            <span className="bg-gradient-to-r from-accent to-accent-blue bg-clip-text text-transparent">
              Broken
            </span>
          </h2>
          <p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
            Organizations cobble together dozens of point solutions, creating
            security gaps, compliance nightmares, and terrible user experiences.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-3 gap-6">
          {painPoints.map((point) => (
            <motion.div key={point.title} variants={itemVariants}>
              <GlassCard className="p-8 h-full">
                <div className="text-4xl md:text-5xl font-bold font-display tracking-tight bg-gradient-to-b from-white to-slate-400 bg-clip-text text-transparent mb-3">
                  {point.stat}
                </div>
                <h3 className="text-base font-semibold text-slate-200 mb-3">
                  {point.title}
                </h3>
                <p className="text-slate-400 text-sm leading-relaxed">
                  {point.description}
                </p>
              </GlassCard>
            </motion.div>
          ))}
        </div>
      </SectionWrapper>

      {/* ════════════════════════════════════════════
          PLATFORM — Four Pillars
          ════════════════════════════════════════════ */}
      <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">
            The Platform
          </p>
          <h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
            Four Pillars of{" "}
            <span className="bg-gradient-to-r from-accent to-accent-blue bg-clip-text text-transparent">
              Digital Trust
            </span>
          </h2>
          <p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
            One unified platform. Four essential capabilities. Zero
            fragmentation.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 gap-6">
          {platformPillars.map((pillar) => (
            <motion.div key={pillar.title} variants={itemVariants}>
              <div className="relative h-80 md:h-96 rounded-xl overflow-hidden group border border-white/[0.06] hover:border-white/[0.12] transition-colors duration-500">
                {/* Image fills entire card background */}
                <Image
                  src={pillar.image}
                  alt={pillar.title}
                  fill
                  className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                />
                {/* Strong gradient overlay for readability */}
                <div className="absolute inset-0 bg-gradient-to-t from-[#0A0F2E] via-[#0A0F2E]/90 to-transparent" />
                {/* Text pinned to bottom */}
                <div className="relative z-20 flex flex-col justify-end h-full p-8">
                  <div className="flex items-center gap-3 mb-3">
                    <div className="p-2 rounded-lg bg-white/[0.06] border border-white/[0.08] backdrop-blur-sm">
                      <pillar.icon className="h-5 w-5 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold font-display tracking-tight">
                      {pillar.title}
                    </h3>
                  </div>
                  <p className="text-slate-300 text-sm leading-relaxed">
                    {pillar.description}
                  </p>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </SectionWrapper>

      {/* ════════════════════════════════════════════
          AI AGENT TEASER
          ════════════════════════════════════════════ */}
      <SectionWrapper className="bg-navy-mid/50">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <motion.div variants={itemVariants}>
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-accent-violet/[0.06] border border-accent-violet/[0.12] backdrop-blur-sm text-accent-violet text-[13px] font-medium tracking-wide mb-6">
              <Bot className="h-4 w-4" />
              New: AI Agent Infrastructure
            </div>
            <h2 className="text-3xl md:text-5xl font-bold font-display leading-tight tracking-tight">
              Built for Humans.
              <br />
              <span className="bg-gradient-to-r from-accent-violet to-accent bg-clip-text text-transparent">
                Ready for AI Agents.
              </span>
            </h2>
            <p className="mt-6 text-slate-300 text-lg max-w-lg leading-relaxed">
              As AI agents begin to act autonomously — signing documents, making
              payments, accessing systems — they need verifiable identities and
              trust infrastructure. KOBIL is ready.
            </p>
            <div className="mt-8">
              <GlowingButton href="/ai-agents">
                Explore AI Agent Trust <ArrowRight className="ml-2 h-4 w-4" />
              </GlowingButton>
            </div>
          </motion.div>

          <motion.div
            variants={itemVariants}
            className="relative aspect-video overflow-hidden"
          >
            <div
              className="relative w-full h-full animate-float"
              style={{
                maskImage:
                  "linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 100%)",
                WebkitMaskImage:
                  "linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 100%)",
              }}
            >
              <Image
                src="/images/hero-ai-agents.jpg"
                alt="AI Agents"
                fill
                className="object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-r from-navy-mid/40 to-transparent mix-blend-multiply" />
            </div>
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] bg-accent-violet/[0.06] rounded-full blur-[80px] -z-10" />
          </motion.div>
        </div>
      </SectionWrapper>

      {/* ════════════════════════════════════════════
          NUMBERS
          ════════════════════════════════════════════ */}
      <SectionWrapper>
        <motion.div className="text-center mb-16" variants={itemVariants}>
          <p className="text-xs tracking-[0.25em] uppercase text-accent mb-4 font-medium">
            Proven at Scale
          </p>
          <h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
            Trust at{" "}
            <span className="bg-gradient-to-r from-accent to-accent-blue bg-clip-text text-transparent">
              Scale
            </span>
          </h2>
        </motion.div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          <AnimatedCounter target={25} suffix="+" label="Years of Innovation" />
          <AnimatedCounter
            target={100}
            suffix="M+"
            label="Identities Secured"
          />
          <AnimatedCounter target={50} suffix="+" label="Countries Served" />
          <AnimatedCounter target={99} suffix=".99%" label="Uptime SLA" />
        </div>

        {/* Divider line */}
        <div className="mt-16 h-px bg-gradient-to-r from-transparent via-white/[0.06] to-transparent" />
      </SectionWrapper>

      {/* ════════════════════════════════════════════
          INDUSTRY PREVIEW
          ════════════════════════════════════════════ */}
      <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">
            Industries
          </p>
          <h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
            Trusted Across{" "}
            <span className="bg-gradient-to-r from-accent via-accent-blue to-accent-violet bg-clip-text text-transparent">
              Every Industry
            </span>
          </h2>
          <p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
            From regulated financial services to cutting-edge AI companies.
          </p>
        </motion.div>

        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
          {industries.map((industry) => (
            <motion.div key={industry.name} variants={itemVariants}>
              <GlassCard className="p-6 text-center">
                <industry.icon className="h-7 w-7 text-accent mx-auto mb-3 opacity-80" />
                <p className="font-medium text-sm text-slate-200">
                  {industry.name}
                </p>
              </GlassCard>
            </motion.div>
          ))}
        </div>

        <motion.div className="mt-12 text-center" variants={itemVariants}>
          <GlowingButton href="/industries" variant="ghost">
            See All Industries <ChevronRight className="ml-1 h-4 w-4" />
          </GlowingButton>
        </motion.div>
      </SectionWrapper>

      {/* ════════════════════════════════════════════
          FINAL 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">
              Ready to Build{" "}
              <span className="bg-gradient-to-r from-accent to-accent-violet bg-clip-text text-transparent">
                Digital Trust
              </span>
              ?
            </h2>
            <p className="mt-6 text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
              Join the organizations that trust KOBIL to secure their most
              critical digital interactions. Book a demo and see the platform in
              action.
            </p>
            <div className="mt-10 flex flex-wrap justify-center gap-4">
              <GlowingButton href="/contact">
                Book a Demo <ArrowRight className="ml-2 h-4 w-4" />
              </GlowingButton>
              <GlowingButton href="/platform" variant="ghost">
                Learn More
              </GlowingButton>
            </div>
          </motion.div>
        </div>
      </section>
    </>
  );
}