"use client";
import React from "react";
import { motion } from "framer-motion";
import Link from "next/link";
import { ChevronRight, ArrowRight, CheckCircle2, ShieldCheck, Cpu, Sliders, Activity, Zap } from "lucide-react";
import { SpotlightCard } from "../SpotlightCard";

export interface IndustryStat {
  value: string;
  label: string;
}

export interface IndustryChallenge {
  title: string;
  desc: string;
  solution: string;
}

export interface IndustryCapability {
  title: string;
  desc: string;
  icon: React.ComponentType<any>;
}

export interface CaseStudy {
  clientName: string;
  sector: string;
  location: string;
  result: string;
  testimonial: string;
  author: string;
}

interface IndustryLayoutProps {
  title: string;
  tagline: string;
  breadcrumb: string;
  oee: number;
  availability: number;
  performance: number;
  quality: number;
  stats: IndustryStat[];
  challenges: IndustryChallenge[];
  capabilities: IndustryCapability[];
  caseStudy: CaseStudy;
}

export default function IndustryLayout({
  title,
  tagline,
  breadcrumb,
  oee,
  availability,
  performance,
  quality,
  stats,
  challenges,
  capabilities,
  caseStudy,
}: IndustryLayoutProps) {
  return (
    <div className="relative min-h-screen overflow-hidden bg-orbit-bg-deep orbit-grid-mesh">
      {/* Glow Orbs */}
      <div className="absolute top-[-10%] left-[-10%] h-[500px] w-[500px] rounded-full bg-orbit-blue/10 blur-[120px] will-change-transform" />
      <div className="absolute bottom-[10%] right-[-10%] h-[600px] w-[600px] rounded-full bg-orbit-purple/8 blur-[130px] will-change-transform" />

      {/* Main Container */}
      <main className="mx-auto max-w-7xl px-4 py-8 md:px-8">
        
        {/* Breadcrumb */}
        <div className="mb-6 flex items-center gap-2 text-xs font-mono text-slate-500">
          <Link href="/" className="hover:text-orbit-cyan">Home</Link>
          <ChevronRight className="h-3 w-3" />
          <Link href="/industries" className="hover:text-orbit-cyan">Industries</Link>
          <ChevronRight className="h-3 w-3" />
          <span className="text-slate-600 dark:text-slate-300">{breadcrumb}</span>
        </div>

        {/* Hero Section */}
        <section className="mb-16 grid gap-8 lg:grid-cols-12 lg:items-center">
          <div className="lg:col-span-7">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="space-y-4"
            >
              <div className="inline-flex rounded-full border border-orbit-cyan/20 bg-orbit-cyan/5 px-3 py-1 font-mono text-[10px] font-bold uppercase tracking-widest text-orbit-cyan">
                Sector Spotlight
              </div>
              <h1 className="text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white sm:text-5xl md:text-6xl">
                {title} <span className="bg-gradient-to-r from-orbit-cyan to-orbit-purple bg-clip-text text-transparent">{tagline}</span>
              </h1>
              <p className="max-w-xl text-sm leading-relaxed text-slate-600 dark:text-slate-400 sm:text-base">
                Deploying high-speed multivariate AI baselines and IIoT gateways to translate complex physical factory variables into structured operational intelligence.
              </p>
              
              <div className="flex flex-wrap gap-4 pt-4">
                <Link
                  href="/get-quote"
                  className="flex h-11 items-center justify-center rounded-full bg-gradient-to-r from-orbit-cyan to-orbit-purple px-6 text-xs font-bold font-mono text-white shadow-lg shadow-orbit-cyan/10 active:scale-95 transition-transform"
                >
                  Request Industrial Audit
                </Link>
                <Link
                  href="/demo"
                  className="flex h-11 items-center justify-center rounded-full border border-orbit-border bg-orbit-bg-primary/50 px-6 text-xs font-bold font-mono text-slate-700 dark:text-slate-300 hover:text-slate-950 dark:hover:text-white transition-colors"
                >
                  Book Live Demo
                </Link>
              </div>
            </motion.div>
          </div>

          {/* OEE Live Diagnostic Twin Mockup Card */}
          <div className="lg:col-span-5">
            <motion.div
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.7, delay: 0.2 }}
              className="relative overflow-hidden rounded-3xl border border-orbit-cyan/20 bg-orbit-bg-primary/80 p-6 shadow-2xl backdrop-blur-md"
            >
              <div className="mb-4 flex items-center justify-between border-b border-orbit-border pb-3">
                <div className="flex items-center gap-2">
                  <div className="h-2 w-2 rounded-full bg-orbit-green animate-ping" />
                  <span className="font-mono text-xs font-bold text-slate-700 dark:text-slate-300">IIOT_LIVE_STATISTICS_STREAM</span>
                </div>
                <div className="rounded-full bg-orbit-green/10 px-2 py-0.5 font-mono text-[9px] font-bold text-orbit-green">
                  ONLINE
                </div>
              </div>

              {/* OEE Radial dial */}
              <div className="flex flex-col items-center py-4">
                <div className="relative flex h-32 w-32 items-center justify-center">
                  {/* SVG background circle & progress ring */}
                  <svg className="absolute h-full w-full -rotate-90">
                    <circle cx="64" cy="64" r="56" fill="transparent" stroke="rgba(255,255,255,0.03)" strokeWidth="6" />
                    <circle 
                      cx="64" cy="64" r="56" 
                      fill="transparent" 
                      stroke="url(#radialGradient)" 
                      strokeWidth="6" 
                      strokeDasharray="351.8"
                      strokeDashoffset={351.8 - (351.8 * oee) / 100}
                      strokeLinecap="round"
                    />
                    <defs>
                      <linearGradient id="radialGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" stopColor="#00d4ff" />
                        <stop offset="100%" stopColor="#a855f7" />
                      </linearGradient>
                    </defs>
                  </svg>
                  <div className="flex flex-col items-center">
                    <span className="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">{oee}%</span>
                    <span className="font-mono text-[9px] font-bold text-slate-500 uppercase tracking-widest">Active OEE</span>
                  </div>
                </div>
              </div>

              {/* Dashboard Waterfall KPIs */}
              <div className="mt-4 grid grid-cols-3 gap-2 border-t border-orbit-border pt-4 text-center">
                <div className="rounded-xl bg-orbit-bg-deep p-2 border border-slate-200 dark:border-slate-800/50">
                  <div className="text-[10px] font-bold font-mono text-slate-500 uppercase">Availability</div>
                  <div className="text-sm font-extrabold text-slate-800 dark:text-slate-200">{availability}%</div>
                </div>
                <div className="rounded-xl bg-orbit-bg-deep p-2 border border-slate-200 dark:border-slate-800/50">
                  <div className="text-[10px] font-bold font-mono text-slate-500 uppercase">Performance</div>
                  <div className="text-sm font-extrabold text-slate-800 dark:text-slate-200">{performance}%</div>
                </div>
                <div className="rounded-xl bg-orbit-bg-deep p-2 border border-slate-200 dark:border-slate-800/50">
                  <div className="text-[10px] font-bold font-mono text-slate-500 uppercase">Quality</div>
                  <div className="text-sm font-extrabold text-slate-800 dark:text-slate-200">{quality}%</div>
                </div>
              </div>
            </motion.div>
          </div>
        </section>

        {/* Dynamic Metric Tiles */}
        <section className="mb-16 grid grid-cols-2 gap-4 md:grid-cols-4">
          {stats.map((stat, idx) => (
            <motion.div
              key={stat.label}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: idx * 0.1 }}
            >
              <SpotlightCard className="flex flex-col justify-center rounded-2xl p-6 text-center">
                <span className="text-3xl font-black text-orbit-cyan tracking-tight">{stat.value}</span>
                <span className="mt-1 font-mono text-xs text-slate-500 dark:text-slate-400 font-semibold">{stat.label}</span>
              </SpotlightCard>
            </motion.div>
          ))}
        </section>

        {/* Section Divider */}
        <div className="orbit-speed-line my-12 h-[1px] bg-gradient-to-r from-transparent via-orbit-cyan/20 to-transparent" />

        {/* Key Challenges We Solve */}
        <section className="mb-16">
          <div className="mb-8 text-center">
            <h2 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white md:text-3xl">
              Sector Challenges <span className="bg-gradient-to-r from-orbit-cyan to-orbit-purple bg-clip-text text-transparent">& Solutions</span>
            </h2>
            <p className="mx-auto mt-2 max-w-xl text-xs text-slate-500">
              How traditional operations bleed efficiency vs. Orbit&apos;s digital feedback loops.
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {challenges.map((c, i) => (
              <motion.div
                key={c.title}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: i * 0.1 }}
                className="flex flex-col justify-between rounded-3xl border border-orbit-border bg-orbit-bg-secondary/40 p-6 backdrop-blur-sm"
              >
                <div>
                  <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-2">{c.title}</h3>
                  <p className="text-xs leading-relaxed text-slate-500 mb-4">{c.desc}</p>
                </div>
                <div className="rounded-2xl border border-orbit-cyan/10 bg-orbit-cyan/5 p-4">
                  <div className="flex items-center gap-1.5 font-mono text-[10px] font-bold text-orbit-cyan uppercase tracking-wider mb-1">
                    <CheckCircle2 className="h-3.5 w-3.5" />
                    Orbit Resolution
                  </div>
                  <p className="text-xs text-slate-700 dark:text-slate-300">{c.solution}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </section>

        {/* Segment Capabilities */}
        <section className="mb-16">
          <div className="mb-8 text-center">
            <h2 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white md:text-3xl">
              Operational <span className="bg-gradient-to-r from-orbit-cyan to-orbit-purple bg-clip-text text-transparent">Capabilities</span>
            </h2>
            <p className="mx-auto mt-2 max-w-xl text-xs text-slate-500">
              Custom edge sensors and predictive algorithms built for specialized processes.
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {capabilities.map((cap, i) => {
              const Icon = cap.icon;
              return (
                <motion.div
                  key={cap.title}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: i * 0.1 }}
                >
                  <SpotlightCard className="rounded-3xl p-6 h-full flex flex-col justify-between">
                    <div>
                      <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-orbit-cyan/10 border border-orbit-cyan/20">
                        <Icon className="h-5 w-5 text-orbit-cyan" />
                      </div>
                      <h3 className="text-base font-bold text-slate-900 dark:text-white mb-2">{cap.title}</h3>
                      <p className="text-xs leading-relaxed text-slate-600 dark:text-slate-400">{cap.desc}</p>
                    </div>
                  </SpotlightCard>
                </motion.div>
              );
            })}
          </div>
        </section>

        {/* Tunisian Case Study Showcase */}
        <section className="mb-16">
          <div className="rounded-3xl border border-orbit-border bg-gradient-to-br from-orbit-bg-primary to-orbit-bg-secondary p-8 md:p-12 relative overflow-hidden shadow-2xl">
            <div className="absolute top-0 right-0 w-32 h-32 bg-orbit-purple/10 blur-2xl rounded-full" />
            
            <div className="grid gap-8 md:grid-cols-2 items-center">
              <div className="space-y-4">
                <div className="inline-flex rounded-full border border-orbit-green/20 bg-orbit-green/5 px-3 py-1 font-mono text-[9px] font-bold uppercase tracking-widest text-orbit-green">
                  Operational Success Story
                </div>
                <h3 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white md:text-3xl">
                  {caseStudy.clientName}
                </h3>
                <div className="flex gap-4 font-mono text-xs text-slate-500 dark:text-slate-400">
                  <span>Sector: {caseStudy.sector}</span>
                  <span>·</span>
                  <span>{caseStudy.location}</span>
                </div>
                <p className="text-xs leading-relaxed text-slate-600 dark:text-slate-400">
                  &ldquo;{caseStudy.testimonial}&rdquo;
                </p>
                <div className="font-mono text-xs font-bold text-slate-700 dark:text-slate-300">
                  — {caseStudy.author}
                </div>
              </div>

              {/* Stat callout */}
              <div className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-orbit-bg-deep/80 p-6 text-center space-y-4">
                <div className="text-xs font-mono font-bold text-orbit-cyan uppercase tracking-wider">Verified Audited Impact</div>
                <div className="text-4xl md:text-5xl font-black text-slate-900 dark:text-white">{caseStudy.result}</div>
                <p className="text-xs text-slate-500 max-w-[280px] mx-auto leading-relaxed">
                  Realized within 60 days of gateway integration without secondary hardware investments.
                </p>
                <div className="pt-2">
                  <Link
                    href="/case-studies"
                    className="inline-flex items-center gap-1.5 font-mono text-xs text-orbit-cyan hover:underline"
                  >
                    View Full Case Study Repository <ArrowRight className="h-3.5 w-3.5" />
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </section>

      </main>
    </div>
  );
}