"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import {
  Shield,
  MessageSquareLock,
  FileSignature,
  Wallet,
  ArrowRight,
  Check,
  Layers,
  Zap,
  Globe,
  Lock,
  Smartphone,
  Cloud,
} from "lucide-react";
import { GlassCard } from "@/components/GlassCard";
import { GlowingButton } from "@/components/GlowingButton";
import { SectionWrapper, itemVariants } from "@/components/SectionWrapper";
import { ParticleBackground } from "@/components/ParticleBackground";

const principles = [
  {
    icon: Lock,
    title: "Identity-First Architecture",
    description: "Every action starts with verified identity. No exceptions.",
  },
  {
    icon: Layers,
    title: "Unified Platform",
    description:
      "One platform replaces dozens of point solutions. Simpler, safer, stronger.",
  },
  {
    icon: Zap,
    title: "Real-Time Trust",
    description: "Continuous verification, not one-time checks. Trust is live.",
  },
  {
    icon: Globe,
    title: "Global Compliance",
    description: "eIDAS, PSD2, GDPR, HIPAA — built in, not bolted on.",
  },
];

const identityFeatures = [
  "Multi-factor authentication (MFA)",
  "Biometric verification (face, fingerprint, voice)",
  "Digital identity wallets",
  "Identity lifecycle management",
  "Zero-trust access control",
  "Real-time risk scoring",
];

const communicationFeatures = [
  "End-to-end encrypted messaging",
  "Secure video conferencing",
  "Verified sender identity",
  "Tamper-proof message delivery",
  "Encrypted file sharing",
  "Audit trail for all communications",
];

const signatureFeatures = [
  "Qualified electronic signatures (QES)",
  "Advanced electronic signatures (AES)",
  "eIDAS-compliant & court-admissible",
  "Bulk signing workflows",
  "Timestamp authority integration",
  "Complete audit trails",
];

const paymentFeatures = [
  "Strong customer authentication (SCA)",
  "PSD2-compliant authorization",
  "Transaction signing & verification",
  "Multi-channel payment security",
  "Real-time fraud detection",
  "Secure mobile payments",
];

export default function PlatformPage() {
  return (
    <>
      {/* Hero */}
      <section className="relative min-h-[70vh] flex items-center overflow-hidden">
        <ParticleBackground />
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-0 right-0 w-[60%] h-[70%] bg-gradient-to-bl from-accent/[0.06] via-transparent to-transparent" />
          <div className="absolute bottom-0 left-0 w-[40%] h-[50%] bg-gradient-to-tr from-accent-blue/[0.04] via-transparent to-transparent" />
        </div>
        <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 text-center">
          <motion.div
            initial={{ opacity: 0, y: 40, filter: "blur(4px)" }}
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
          >
            <p className="text-xs tracking-[0.25em] uppercase text-accent mb-6 font-medium">
              The Platform
            </p>
            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold font-display leading-[1.05] tracking-[-0.02em]">
              The Trust Platform
              <br />
              <span className="bg-gradient-to-r from-accent via-accent-blue to-accent-violet bg-clip-text text-transparent">
                That Does It All
              </span>
            </h1>
            <p className="mt-6 text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed">
              Identity, communication, signatures, and payments — unified in a
              single, identity-first platform trusted by enterprises and
              governments worldwide.
            </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>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Architecture Principles */}
      <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">
            Core Architecture
          </p>
          <h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
            Identity-First{" "}
            <span className="bg-gradient-to-r from-accent to-accent-blue bg-clip-text text-transparent">
              Architecture
            </span>
          </h2>
          <p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
            Every capability starts with a verified identity. This
            isn&apos;t just a feature — it&apos;s the foundation.
          </p>
        </motion.div>

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

      {/* Pillar 1: Identity */}
      <SectionWrapper id="identity">
        <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/[0.06] border border-accent/[0.12] backdrop-blur-sm text-accent text-[13px] font-medium tracking-wide mb-6">
              <Shield className="h-4 w-4" />
              Pillar 1
            </div>
            <h2 className="text-3xl md:text-4xl font-bold font-display tracking-tight">
              Digital Identity &{" "}
              <span className="text-accent">Authentication</span>
            </h2>
            <p className="mt-4 text-slate-300 text-lg leading-relaxed">
              Know exactly who you&apos;re dealing with — every time, every
              channel, every device. From onboarding to ongoing verification,
              KOBIL provides the identity layer your organization needs.
            </p>
            <ul className="mt-8 space-y-3">
              {identityFeatures.map((f) => (
                <li key={f} className="flex items-center gap-3 text-sm">
                  <Check className="h-4 w-4 text-accent flex-shrink-0" />
                  <span className="text-slate-300">{f}</span>
                </li>
              ))}
            </ul>
          </motion.div>
          <motion.div
            variants={itemVariants}
            className="relative aspect-video overflow-hidden"
          >
            <div
              className="relative w-full h-full"
              style={{
                maskImage: "linear-gradient(to left, transparent 0%, black 15%, black 85%, transparent 100%)",
                WebkitMaskImage: "linear-gradient(to left, transparent 0%, black 15%, black 85%, transparent 100%)",
              }}
            >
              <Image
                src="/images/section-identity.jpg"
                alt="Digital Identity"
                fill
                className="object-cover"
              />
            </div>
          </motion.div>
        </div>
      </SectionWrapper>

      {/* Pillar 2: Communication */}
      <SectionWrapper className="bg-navy-mid/50" id="communication">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <motion.div
            variants={itemVariants}
            className="relative aspect-video overflow-hidden order-2 lg:order-1"
          >
            <div
              className="relative w-full h-full"
              style={{
                maskImage: "linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)",
                WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)",
              }}
            >
              <Image
                src="/images/section-communication.jpg"
                alt="Secure Communication"
                fill
                className="object-cover"
              />
            </div>
          </motion.div>
          <motion.div variants={itemVariants} className="order-1 lg:order-2">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-accent-blue/[0.06] border border-accent-blue/[0.12] backdrop-blur-sm text-accent-blue text-[13px] font-medium tracking-wide mb-6">
              <MessageSquareLock className="h-4 w-4" />
              Pillar 2
            </div>
            <h2 className="text-3xl md:text-4xl font-bold font-display tracking-tight">
              Secure{" "}
              <span className="text-accent-blue">Communication</span>
            </h2>
            <p className="mt-4 text-slate-300 text-lg leading-relaxed">
              Every message verified. Every participant authenticated. From
              encrypted chat to secure video, KOBIL ensures your communications
              are truly private and tamper-proof.
            </p>
            <ul className="mt-8 space-y-3">
              {communicationFeatures.map((f) => (
                <li key={f} className="flex items-center gap-3 text-sm">
                  <Check className="h-4 w-4 text-accent-blue flex-shrink-0" />
                  <span className="text-slate-300">{f}</span>
                </li>
              ))}
            </ul>
          </motion.div>
        </div>
      </SectionWrapper>

      {/* Pillar 3: Signatures */}
      <SectionWrapper id="signatures">
        <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">
              <FileSignature className="h-4 w-4" />
              Pillar 3
            </div>
            <h2 className="text-3xl md:text-4xl font-bold font-display tracking-tight">
              Digital{" "}
              <span className="text-accent-violet">Signatures</span>
            </h2>
            <p className="mt-4 text-slate-300 text-lg leading-relaxed">
              Legally binding. Instantly verifiable. Court-admissible. KOBIL
              digital signatures meet the highest regulatory standards while
              delivering a seamless signing experience.
            </p>
            <ul className="mt-8 space-y-3">
              {signatureFeatures.map((f) => (
                <li key={f} className="flex items-center gap-3 text-sm">
                  <Check className="h-4 w-4 text-accent-violet flex-shrink-0" />
                  <span className="text-slate-300">{f}</span>
                </li>
              ))}
            </ul>
          </motion.div>
          <motion.div
            variants={itemVariants}
            className="relative aspect-video overflow-hidden"
          >
            <div
              className="relative w-full h-full"
              style={{
                maskImage: "linear-gradient(to left, transparent 0%, black 15%, black 85%, transparent 100%)",
                WebkitMaskImage: "linear-gradient(to left, transparent 0%, black 15%, black 85%, transparent 100%)",
              }}
            >
              <Image
                src="/images/section-signatures.jpg"
                alt="Digital Signatures"
                fill
                className="object-cover"
              />
            </div>
          </motion.div>
        </div>
      </SectionWrapper>

      {/* Pillar 4: Payments */}
      <SectionWrapper className="bg-navy-mid/50" id="payments">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <motion.div
            variants={itemVariants}
            className="relative aspect-video overflow-hidden order-2 lg:order-1"
          >
            <div
              className="relative w-full h-full"
              style={{
                maskImage: "linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)",
                WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)",
              }}
            >
              <Image
                src="/images/section-payments.jpg"
                alt="Secure Payments"
                fill
                className="object-cover"
              />
            </div>
          </motion.div>
          <motion.div variants={itemVariants} className="order-1 lg:order-2">
            <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-6">
              <Wallet className="h-4 w-4" />
              Pillar 4
            </div>
            <h2 className="text-3xl md:text-4xl font-bold font-display tracking-tight">
              Secure{" "}
              <span className="text-accent">Payments</span>
            </h2>
            <p className="mt-4 text-slate-300 text-lg leading-relaxed">
              Authorize every transaction with confidence. KOBIL delivers
              PSD2-compliant strong customer authentication with real-time fraud
              detection and multi-channel support.
            </p>
            <ul className="mt-8 space-y-3">
              {paymentFeatures.map((f) => (
                <li key={f} className="flex items-center gap-3 text-sm">
                  <Check className="h-4 w-4 text-accent flex-shrink-0" />
                  <span className="text-slate-300">{f}</span>
                </li>
              ))}
            </ul>
          </motion.div>
        </div>
      </SectionWrapper>

      {/* Integration */}
      <SectionWrapper>
        <motion.div className="text-center mb-16" variants={itemVariants}>
          <p className="text-xs tracking-[0.25em] uppercase text-accent mb-4 font-medium">
            Integration
          </p>
          <h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
            Two Paths to{" "}
            <span className="bg-gradient-to-r from-accent to-accent-blue bg-clip-text text-transparent">
              Trust
            </span>
          </h2>
          <p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
            Whether you need a full platform or modular APIs, KOBIL adapts to
            your architecture.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 gap-6">
          <motion.div variants={itemVariants}>
            <GlassCard className="p-8 h-full">
              <Smartphone className="h-8 w-8 text-accent mb-4 opacity-80" />
              <h3 className="text-xl font-semibold font-display tracking-tight mb-3">
                KOBIL SDK & App
              </h3>
              <p className="text-slate-400 mb-6 leading-relaxed">
                Deploy the full KOBIL experience with branded mobile apps and
                SDKs. Pre-built UI components, biometric integration, and
                offline capability out of the box.
              </p>
              <ul className="space-y-2">
                {["White-label mobile app", "iOS & Android SDKs", "Offline authentication", "Push notification triggers"].map((f) => (
                  <li key={f} className="flex items-center gap-2 text-sm text-slate-300">
                    <Check className="h-3 w-3 text-accent" />
                    {f}
                  </li>
                ))}
              </ul>
            </GlassCard>
          </motion.div>

          <motion.div variants={itemVariants}>
            <GlassCard className="p-8 h-full">
              <Cloud className="h-8 w-8 text-accent-blue mb-4 opacity-80" />
              <h3 className="text-xl font-semibold font-display tracking-tight mb-3">
                KOBIL API Platform
              </h3>
              <p className="text-slate-400 mb-6 leading-relaxed">
                Integrate KOBIL capabilities into your existing systems via
                RESTful APIs. Full flexibility with enterprise-grade
                reliability.
              </p>
              <ul className="space-y-2">
                {["RESTful API endpoints", "Webhooks & event streams", "SSO & federation support", "Custom workflow builder"].map((f) => (
                  <li key={f} className="flex items-center gap-2 text-sm text-slate-300">
                    <Check className="h-3 w-3 text-accent-blue" />
                    {f}
                  </li>
                ))}
              </ul>
            </GlassCard>
          </motion.div>
        </div>
      </SectionWrapper>

      {/* CTA */}
      <section className="relative py-32 overflow-hidden">
        <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-[600px] h-[300px] bg-gradient-to-r from-accent/[0.04] via-accent-blue/[0.05] 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 font-bold font-display tracking-tight">
              See the Platform in{" "}
              <span className="text-accent">Action</span>
            </h2>
            <p className="mt-6 text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
              Schedule a personalized demo and discover how KOBIL can simplify
              your trust infrastructure.
            </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>
    </>
  );
}
