"use client";

import { motion } from "framer-motion";
import {
  Landmark,
  Building2,
  HeartPulse,
  ShieldCheck,
  Factory,
  Bot,
  ArrowRight,
  Check,
  type LucideIcon,
} from "lucide-react";
import { GlassCard } from "@/components/GlassCard";
import { GlowingButton } from "@/components/GlowingButton";
import { SectionWrapper, itemVariants } from "@/components/SectionWrapper";
import { ParticleBackground } from "@/components/ParticleBackground";

interface Industry {
  icon: LucideIcon;
  name: string;
  badgeClass: string;
  checkClass: string;
  valueProp: string;
  useCases: string[];
}

const industries: Industry[] = [
  {
    icon: Landmark,
    name: "Banking & Finance",
    badgeClass:
      "bg-accent/[0.06] border-accent/[0.12] text-accent",
    checkClass: "text-accent",
    valueProp:
      "Protect every transaction. Verify every customer. Meet every regulation — without friction.",
    useCases: [
      "PSD2-compliant strong customer authentication",
      "Mobile banking security & transaction signing",
      "KYC/AML identity verification at onboarding",
      "Secure customer communication channels",
      "Digital contract & document signing",
    ],
  },
  {
    icon: Building2,
    name: "Government & Public Sector",
    badgeClass:
      "bg-accent-blue/[0.06] border-accent-blue/[0.12] text-accent-blue",
    checkClass: "text-accent-blue",
    valueProp:
      "Deliver citizen-grade digital services with sovereign security and full regulatory compliance.",
    useCases: [
      "National digital identity programs",
      "Secure citizen-government communication",
      "eGovernment document signing",
      "Cross-border identity verification (eIDAS)",
      "Classified information access control",
    ],
  },
  {
    icon: HeartPulse,
    name: "Healthcare",
    badgeClass:
      "bg-accent-violet/[0.06] border-accent-violet/[0.12] text-accent-violet",
    checkClass: "text-accent-violet",
    valueProp:
      "Protect patient data. Secure provider access. Enable trusted telemedicine at scale.",
    useCases: [
      "HIPAA-compliant patient authentication",
      "Electronic health record access control",
      "Telemedicine identity verification",
      "Digital prescription signing",
      "Secure provider-to-provider messaging",
    ],
  },
  {
    icon: ShieldCheck,
    name: "Insurance",
    badgeClass:
      "bg-accent/[0.06] border-accent/[0.12] text-accent",
    checkClass: "text-accent",
    valueProp:
      "Accelerate claims, reduce fraud, and deliver seamless digital experiences — securely.",
    useCases: [
      "Digital policy signing & renewal",
      "Claims authentication & fraud prevention",
      "Secure agent-customer communication",
      "Identity verification for underwriting",
      "Mobile-first customer engagement",
    ],
  },
  {
    icon: Factory,
    name: "Enterprise",
    badgeClass:
      "bg-accent-blue/[0.06] border-accent-blue/[0.12] text-accent-blue",
    checkClass: "text-accent-blue",
    valueProp:
      "Unify identity, access, and communication security across your entire organization.",
    useCases: [
      "Zero-trust workforce authentication",
      "Secure internal communications",
      "Digital contract & procurement signing",
      "Partner & vendor identity verification",
      "Privileged access management",
    ],
  },
  {
    icon: Bot,
    name: "AI-First Companies",
    badgeClass:
      "bg-accent-violet/[0.06] border-accent-violet/[0.12] text-accent-violet",
    checkClass: "text-accent-violet",
    valueProp:
      "Build trust into your AI products from day one. Give your agents verifiable identities and accountability.",
    useCases: [
      "AI agent identity & credential management",
      "Autonomous action authorization",
      "Human-in-the-loop verification workflows",
      "Agent-to-agent trust protocols",
      "Compliance & audit trail automation",
    ],
  },
];

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

        {/* Cinematic spotlights */}
        <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-accent-blue/[0.03] to-transparent" />
          <div className="absolute bottom-0 left-0 w-[40%] h-[50%] bg-gradient-to-tr from-accent-violet/[0.04] via-transparent to-transparent" />
          <div className="absolute top-1/3 left-1/2 w-[500px] h-[500px] rounded-full bg-accent-blue/[0.03] blur-[100px]" />
        </div>

        {/* 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 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">
              Industries
            </p>
            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold font-display leading-[1.05] tracking-[-0.02em]">
              Trusted Across
              <br />
              <span className="bg-gradient-to-r from-accent via-accent-blue to-accent-violet bg-clip-text text-transparent">
                Every Industry
              </span>
            </h1>
            <p className="mt-6 text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed">
              From highly regulated financial services to cutting-edge AI
              companies, KOBIL delivers digital trust infrastructure that meets
              the unique demands of every sector.
            </p>
          </motion.div>
        </div>
      </section>

      {/* Industries */}
      {industries.map((industry, index) => (
        <SectionWrapper
          key={industry.name}
          className={index % 2 === 0 ? "bg-navy-mid/50" : ""}
        >
          <div className="grid lg:grid-cols-2 gap-12 items-start">
            <motion.div variants={itemVariants}>
              <div
                className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg border backdrop-blur-sm text-[13px] font-medium tracking-wide mb-6 ${industry.badgeClass}`}
              >
                <industry.icon className="h-4 w-4" />
                {industry.name}
              </div>
              <h2 className="text-3xl md:text-4xl font-bold font-display mb-4 tracking-tight">
                {industry.name}
              </h2>
              <p className="text-slate-300 text-lg leading-relaxed">
                {industry.valueProp}
              </p>
            </motion.div>

            <motion.div variants={itemVariants}>
              <GlassCard className="p-8">
                <h3 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-6">
                  Key Use Cases
                </h3>
                <ul className="space-y-4">
                  {industry.useCases.map((uc) => (
                    <li key={uc} className="flex items-start gap-3">
                      <Check
                        className={`h-5 w-5 flex-shrink-0 mt-0.5 ${industry.checkClass}`}
                      />
                      <span className="text-slate-300">{uc}</span>
                    </li>
                  ))}
                </ul>
              </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">
              Don&apos;t See Your Industry?
            </h2>
            <p className="mt-6 text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
              KOBIL&apos;s trust platform is adaptable to any sector that
              requires verified identity, secure communication, or digital
              signatures. Let&apos;s talk about your specific needs.
            </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>
    </>
  );
}
