"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import {
  Bot,
  ArrowRight,
  Fingerprint,
  Link2,
  ShieldCheck,
  FileKey,
  Eye,
  Scale,
  Network,
  BrainCircuit,
  CreditCard,
  FileText,
  Database,
} 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 problems = [
  {
    title: "No Verifiable Identity",
    description:
      "AI agents operate without credentials. You can't verify who sent an agent, what it's authorized to do, or if it's been compromised.",
  },
  {
    title: "No Accountability Chain",
    description:
      "When an agent acts on behalf of a human or organization, there's no cryptographic proof linking the action back to its principal.",
  },
  {
    title: "No Trust Framework",
    description:
      "Existing security infrastructure was built for humans clicking buttons — not for autonomous agents making API calls at machine speed.",
  },
];

const features = [
  {
    icon: Fingerprint,
    title: "Agent Identity",
    description:
      "Cryptographically verifiable identities for AI agents. Every agent gets a unique, tamper-proof digital identity tied to its principal.",
  },
  {
    icon: Link2,
    title: "Principal Chain",
    description:
      "Unbreakable chain of accountability from agent to human to organization. Every action traceable back to a verified principal.",
  },
  {
    icon: ShieldCheck,
    title: "Scoped Authorization",
    description:
      "Fine-grained permission boundaries. Define exactly what each agent can do, for how long, and on whose behalf.",
  },
  {
    icon: FileKey,
    title: "Agent Signatures",
    description:
      "AI agents can sign documents and approve transactions with legally attributable digital signatures.",
  },
  {
    icon: Eye,
    title: "Real-Time Monitoring",
    description:
      "Continuous behavioral analysis of agent actions. Detect anomalies, enforce policies, and revoke access instantly.",
  },
  {
    icon: Scale,
    title: "Compliance Framework",
    description:
      "Built-in compliance for regulated industries. Audit trails, data residency controls, and regulatory reporting.",
  },
  {
    icon: Network,
    title: "Agent-to-Agent Trust",
    description:
      "Secure, authenticated communication between AI agents. Mutual verification before any data exchange or collaboration.",
  },
];

const useCases = [
  {
    icon: CreditCard,
    title: "Autonomous Payments",
    description:
      "AI agents authorized to make purchases, process refunds, and manage subscriptions — with verified identity and spending limits.",
    scenario: "E-commerce & FinTech",
  },
  {
    icon: FileText,
    title: "Document Processing",
    description:
      "Agents that review, sign, and route legal documents with full audit trails and legally binding signatures.",
    scenario: "Legal & Enterprise",
  },
  {
    icon: Database,
    title: "Data Access & Analysis",
    description:
      "Trusted agents that access sensitive databases, run analyses, and share results — all within verified permission boundaries.",
    scenario: "Healthcare & Government",
  },
  {
    icon: BrainCircuit,
    title: "Multi-Agent Orchestration",
    description:
      "Coordinate fleets of specialized agents with verified identities, scoped permissions, and real-time monitoring.",
    scenario: "AI-First Companies",
  },
];

export default function AIAgentsPage() {
  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-ai-agents.jpg"
            alt="AI Agents Trust Infrastructure"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-tr from-accent-violet/[0.06] via-transparent to-accent/[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-violet/[0.07] via-accent/[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>

        {/* Glow orb behind headline */}
        <div className="absolute top-[-20%] left-[-10%] w-[500px] h-[500px] bg-violet-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-violet/[0.06] border border-accent-violet/[0.12] backdrop-blur-sm text-accent-violet text-[13px] font-medium tracking-wide mb-8">
                <Bot className="h-4 w-4" />
                The Future of Trust
              </div>
            </motion.div>

            <motion.div variants={heroChild}>
              <p className="text-xs tracking-[0.25em] uppercase text-accent mb-6 font-medium">
                AI Agent Infrastructure
              </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]"
            >
              Trust Infrastructure
              <br />
              <span className="bg-gradient-to-r from-accent-violet via-accent to-accent-blue bg-clip-text text-transparent">
                for AI Agents
              </span>
            </motion.h1>

            <motion.p
              variants={heroChild}
              className="mt-6 text-lg md:text-xl text-slate-300 max-w-lg leading-relaxed"
            >
              AI agents are the next users of the internet. They need
              identities, permissions, and accountability — just like humans.
              KOBIL provides the trust layer.
            </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">
                See the Platform
              </GlowingButton>
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* Problem */}
      <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">
            The Problem
          </p>
          <h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
            AI Agents Are Here.{" "}
            <span className="text-accent-violet">Trust Isn&apos;t.</span>
          </h2>
          <p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
            The AI agent economy is emerging fast — but the trust infrastructure
            hasn&apos;t kept up. Here&apos;s the gap.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-3 gap-8">
          {problems.map((problem) => (
            <motion.div key={problem.title} variants={itemVariants}>
              <GlassCard className="p-8 h-full border-accent-violet/20">
                <div className="w-12 h-12 rounded-lg bg-accent-violet/[0.06] border border-accent-violet/[0.12] backdrop-blur-sm flex items-center justify-center mb-4">
                  <Bot className="h-6 w-6 text-accent-violet" />
                </div>
                <h3 className="text-lg font-semibold mb-3">{problem.title}</h3>
                <p className="text-slate-400 text-sm leading-relaxed">
                  {problem.description}
                </p>
              </GlassCard>
            </motion.div>
          ))}
        </div>
      </SectionWrapper>

      {/* Solution Features */}
      <SectionWrapper>
        <motion.div className="text-center mb-16" variants={itemVariants}>
          <p className="text-xs tracking-[0.25em] uppercase text-accent mb-4 font-medium">
            The Solution
          </p>
          <h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
            The KOBIL{" "}
            <span className="bg-gradient-to-r from-accent-violet to-accent bg-clip-text text-transparent">
              Agent Trust Layer
            </span>
          </h2>
          <p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
            Seven capabilities that make AI agents trustworthy, accountable, and
            enterprise-ready.
          </p>
        </motion.div>

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

      {/* Use Cases */}
      <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">
            Applications
          </p>
          <h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
            Real-World{" "}
            <span className="text-accent">Use Cases</span>
          </h2>
          <p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
            How trusted AI agents transform industries.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 gap-8">
          {useCases.map((uc) => (
            <motion.div key={uc.title} variants={itemVariants}>
              <GlassCard className="p-8 h-full">
                <div className="flex items-center justify-between mb-4">
                  <uc.icon className="h-8 w-8 text-accent opacity-80" />
                  <span className="text-xs font-medium text-accent-violet bg-accent-violet/[0.06] border border-accent-violet/[0.12] backdrop-blur-sm px-3 py-1 rounded-lg">
                    {uc.scenario}
                  </span>
                </div>
                <h3 className="text-xl font-semibold mb-3 tracking-tight">{uc.title}</h3>
                <p className="text-slate-300 leading-relaxed">{uc.description}</p>
              </GlassCard>
            </motion.div>
          ))}
        </div>
      </SectionWrapper>

      {/* Vision */}
      <SectionWrapper>
        <div className="max-w-4xl mx-auto text-center">
          <motion.div variants={itemVariants}>
            <p className="text-xs tracking-[0.25em] uppercase text-accent-violet mb-4 font-medium">
              Our Vision
            </p>
            <h2 className="text-3xl md:text-5xl font-bold font-display leading-tight tracking-tight">
              The future isn&apos;t human{" "}
              <span className="italic">or</span> AI.
              <br />
              <span className="bg-gradient-to-r from-accent-violet to-accent bg-clip-text text-transparent">
                It&apos;s both — working together, with trust.
              </span>
            </h2>
            <p className="mt-8 text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
              KOBIL is building the trust infrastructure that allows humans and
              AI agents to collaborate securely, with verifiable identities,
              scoped permissions, and complete accountability. The AI agent
              economy starts with trust.
            </p>
          </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-violet/[0.04] via-accent/[0.06] to-accent-blue/[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 for the{" "}
              <span className="text-accent-violet">Agent Economy</span>?
            </h2>
            <p className="mt-6 text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
              Be among the first to deploy trusted AI agent infrastructure.
              Talk to our team about your use case.
            </p>
            <div className="mt-10">
              <GlowingButton href="/contact">
                Book a Demo <ArrowRight className="ml-2 h-4 w-4" />
              </GlowingButton>
            </div>
          </motion.div>
        </div>
      </section>
    </>
  );
}
