"use client";

import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
import { Bluetooth, BrainCircuit, Cloud, Zap, Shield, Radio, CheckCircle2, ArrowRight } from "lucide-react";
import { useState } from "react";

const technologies = [
  {
    title: "Bluetooth Devices",
    description: "Seamlessly connect medical-grade IoT devices with enterprise-level security and real-time data synchronization.",
    icon: Bluetooth,
    id: "bluetooth",
    features: [
      { label: "Auto-Pairing", icon: Zap },
      { label: "AES-256 Security", icon: Shield },
      { label: "Low Energy Mode", icon: Radio }
    ],
    metrics: [
      { value: "50+", label: "Connected Devices" },
      { value: "99.9%", label: "Reliability" }
    ]
  },
  {
    title: "AI Agents",
    description: "Intelligent automation powered by advanced machine learning models for predictive analytics and clinical decision support.",
    icon: BrainCircuit,
    id: "ai-agents",
    features: [
      { label: "Pattern Recognition", icon: BrainCircuit },
      { label: "Predictive Analytics", icon: Zap },
      { label: "Auto-Learning", icon: Radio }
    ],
    metrics: [
      { value: "98.5%", label: "Accuracy Rate" },
      { value: "<100ms", label: "Response Time" }
    ]
  },
  {
    title: "Cloud Management",
    description: "Enterprise cloud infrastructure with multi-region redundancy, automated scaling, and comprehensive data governance.",
    icon: Cloud,
    id: "cloud",
    features: [
      { label: "Multi-Region", icon: Cloud },
      { label: "Auto-Scaling", icon: Zap },
      { label: "HIPAA Compliant", icon: Shield }
    ],
    metrics: [
      { value: "99.99%", label: "Uptime SLA" },
      { value: "Global", label: "Coverage" }
    ]
  }
];

interface Technology {
  title: string;
  description: string;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  id: string;
  features: Array<{ label: string; icon: React.ComponentType<React.SVGProps<SVGSVGElement>> }>;
  metrics: Array<{ value: string; label: string }>;
}

function TechCard({ tech, i }: { tech: Technology; i: number }) {
  const [isHovered, setIsHovered] = useState(false);
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  const mouseXSpring = useSpring(x, { stiffness: 300, damping: 30 });
  const mouseYSpring = useSpring(y, { stiffness: 300, damping: 30 });

  const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], ["8deg", "-8deg"]);
  const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], ["-8deg", "8deg"]);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const width = rect.width;
    const height = rect.height;
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;
    const xPct = mouseX / width - 0.5;
    const yPct = mouseY / height - 0.5;
    x.set(xPct);
    y.set(yPct);
  };

  const handleMouseLeave = () => {
    x.set(0);
    y.set(0);
    setIsHovered(false);
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.7, delay: i * 0.15, ease: "easeOut" }}
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={handleMouseLeave}
      style={{
        rotateX,
        rotateY,
        transformStyle: "preserve-3d",
      }}
      className="relative group cursor-pointer"
    >
      {/* Subtle Glow */}
      <motion.div
        animate={{
          opacity: isHovered ? 0.15 : 0.05,
          scale: isHovered ? 1.05 : 1
        }}
        transition={{ duration: 0.4 }}
        className="absolute -inset-4 bg-white/10 rounded-[3rem] blur-3xl"
      />

      {/* Card Container */}
      <div className="relative rounded-[2.5rem] bg-zinc-950/50 backdrop-blur-xl border border-white/10 overflow-hidden hover:border-white/20 transition-all duration-500">
        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
        
        <div className="absolute inset-0 opacity-[0.015]" style={{
          backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
                            linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
          backgroundSize: '30px 30px'
        }} />

        <div className="relative p-8 lg:p-10" style={{ transform: "translateZ(50px)" }}>
          {/* Icon Section */}
          <motion.div
            animate={{ y: isHovered ? -5 : 0 }}
            transition={{ duration: 0.4 }}
            className="relative mb-8"
          >
            <div className="relative inline-flex items-center gap-4">
              <motion.div
                animate={{ scale: isHovered ? 1.1 : 1 }}
                transition={{ duration: 0.3 }}
                className="w-16 h-16 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center backdrop-blur-sm group-hover:bg-white/10 group-hover:border-white/20 transition-all"
              >
                <tech.icon className="w-8 h-8 text-white" />
              </motion.div>

              {/* <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-green-500/10 border border-green-500/20">
                <div className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
                <span className="text-[10px] text-green-400 font-bold uppercase tracking-wider">Active</span>
              </div> */}
            </div>
          </motion.div>

          {/* Content */}
          <div className="space-y-4 mb-8">
            <h3 className="text-2xl sm:text-3xl font-black tracking-tight text-white">
              {tech.title}
            </h3>
            <p className="text-zinc-400 leading-relaxed text-sm font-light">
              {tech.description}
            </p>
          </div>

          {/* Features */}
          <div className="space-y-3 mb-8">
            {tech.features.map((feature, idx) => (
              <motion.div
                key={idx}
                initial={{ opacity: 0, x: -10 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.15 + idx * 0.1 }}
                className="flex items-center gap-3"
              >
                <div className="p-1.5 rounded-md bg-white/5 border border-white/10">
                  <feature.icon className="w-3.5 h-3.5 text-zinc-400" />
                </div>
                <span className="text-xs text-zinc-500 font-semibold tracking-wide">
                  {feature.label}
                </span>
              </motion.div>
            ))}
          </div>

          {/* Metrics */}
          <div className="grid grid-cols-2 gap-4 mb-6 p-4 rounded-2xl bg-white/[0.02] border border-white/5">
            {tech.metrics.map((metric, idx) => (
              <div key={idx} className="text-center">
                <p className="text-xl font-black text-white mb-1">{metric.value}</p>
                <p className="text-[10px] text-zinc-500 font-semibold uppercase tracking-wider">{metric.label}</p>
              </div>
            ))}
          </div>

    
                    {/* Bottom Action */}
                    <div className="flex items-center justify-between pt-6 border-t border-white/5 group-hover:border-white/10 transition-colors">
                        <div className="flex items-center gap-2">
                            <CheckCircle2 className="w-4 h-4 text-zinc-600" />
                            <span className="text-xs text-zinc-600 font-semibold uppercase tracking-wider">
                                Integrated
                            </span>
                        </div>
                        
                        <motion.div
                            animate={{
                                x: isHovered ? 5 : 0
                            }}
                            transition={{ duration: 0.3 }}
                            className="flex items-center gap-2 text-zinc-500 group-hover:text-white transition-colors"
                        >
                            <span className="text-sm font-semibold">Learn More</span>
                            <ArrowRight className="w-4 h-4" />
                        </motion.div>
                    </div>
                </div>

                {/* Bottom Subtle Accent */}
                <motion.div
                    animate={{
                        scaleX: isHovered ? 1 : 0,
                    }}
                    transition={{ duration: 0.5 }}
                    className="absolute bottom-0 left-0 right-0 h-px bg-white/20 origin-left"
                />
            </div>
        </motion.div>
    );
}

export default function TechShowcase() {
    return (
        <section id="technologies" className="relative py-20 md:py-32 lg:py-40 overflow-hidden">
            {/* Ambient Effects - More Subtle */}
            <div className="absolute top-1/3 left-0 w-[500px] h-[500px] bg-cyan-500/5 rounded-full blur-[120px]" />
            <div className="absolute bottom-1/3 right-0 w-[500px] h-[500px] bg-purple-500/5 rounded-full blur-[120px]" />
            
            {/* Dot Grid Pattern */}
            <div className="absolute inset-0 opacity-[0.02]" style={{
                backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1px)`,
                backgroundSize: '40px 40px'
            }} />

            <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
                {/* Header Section */}
                <div className="max-w-5xl mb-16 md:mb-24 space-y-8">
                    <motion.div
                        initial={{ opacity: 0, y: 30 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.8 }}
                        className="space-y-6"
                    >
                        {/* Badge */}
                        <div className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-white/5 backdrop-blur-xl border border-white/10 shadow-lg">
                            <div className="relative">
                                <Zap className="w-4 h-4 text-white" />
                                <div className="absolute inset-0 bg-white/20 blur-md animate-pulse" />
                            </div>
                            <span className="text-[11px] font-bold tracking-[0.3em] uppercase text-zinc-300">
                                Technology Infrastructure
                            </span>
                        </div>

                        {/* Title */}
                        <h2 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black leading-[0.9] tracking-tighter text-white">
                            Enterprise
                            <br />
                            <span className="text-zinc-600">Technology Stack</span>
                        </h2>

                        {/* Description */}
                        <p className="text-lg sm:text-xl lg:text-2xl text-zinc-400 leading-relaxed max-w-3xl font-light">
                            Cutting-edge infrastructure powering{" "}
                            <span className="text-white font-medium">intelligent healthcare delivery</span> through{" "}
                            <span className="text-white font-medium">seamless device integration</span> and{" "}
                            <span className="text-white font-medium">autonomous AI systems</span>.
                        </p>

                        {/* Stats */}
                        <div className="flex flex-wrap gap-8 pt-4">
                            {[
                                { icon: Zap, label: "Processing Speed", value: "Real-time" },
                                { icon: Shield, label: "Security", value: "Enterprise" },
                                { icon: Cloud, label: "Infrastructure", value: "Global" }
                            ].map((stat, i) => (
                                <motion.div
                                    key={i}
                                    initial={{ opacity: 0, x: -20 }}
                                    whileInView={{ opacity: 1, x: 0 }}
                                    viewport={{ once: true }}
                                    transition={{ duration: 0.6, delay: 0.2 + i * 0.1 }}
                                    className="flex items-center gap-3"
                                >
                                    <div className="p-2.5 rounded-lg bg-white/5 border border-white/10">
                                        <stat.icon className="w-5 h-5 text-white" />
                                    </div>
                                    <div>
                                        <p className="text-xl font-black text-white">{stat.value}</p>
                                        <p className="text-xs text-zinc-500 font-semibold uppercase tracking-wider">{stat.label}</p>
                                    </div>
                                </motion.div>
                            ))}
                        </div>
                    </motion.div>
                </div>

                {/* Technology Cards Grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
                    {technologies.map((tech, i) => (
                        <TechCard key={tech.id} tech={tech} i={i} />
                    ))}
                </div>

                {/* Bottom CTA */}
                <motion.div
                    initial={{ opacity: 0, y: 30 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.8, delay: 0.4 }}
                    className="mt-16 md:mt-24 text-center space-y-6"
                >
                    <div className="space-y-3">
                        <p className="text-zinc-400 text-base font-medium">
                            Ready to integrate our technology stack?
                        </p>
                        <p className="text-zinc-600 text-sm max-w-2xl mx-auto">
                            Our engineering team will work with you to customize and deploy the perfect solution for your healthcare infrastructure.
                        </p>
                    </div>
                    
                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                        <motion.button
                            whileHover={{ scale: 1.02 }}
                            whileTap={{ scale: 0.98 }}
                            className="px-8 py-4 rounded-full bg-white text-black font-bold text-sm tracking-wide uppercase shadow-[0_0_30px_rgba(255,255,255,0.1)] hover:shadow-[0_0_40px_rgba(255,255,255,0.2)] transition-all"
                        >
                            Schedule Demo
                        </motion.button>
                        
                        <motion.button
                            whileHover={{ scale: 1.02 }}
                            whileTap={{ scale: 0.98 }}
                            className="px-8 py-4 rounded-full bg-white/5 border border-white/10 text-white font-bold text-sm tracking-wide uppercase hover:bg-white/10 hover:border-white/20 transition-all"
                        >
                            View Documentation
                        </motion.button>
                    </div>
                </motion.div>
            </div>
        </section>
    );
}