"use client";

import Navbar from "../components/layout/Navbar";
import Footer from "../components/layout/Footer";
import { motion } from "framer-motion";
import {
  Thermometer,
  Activity,
  HeartPulse,
  Droplet,
  Baby,
  Scale,
  Bluetooth,
  ShieldCheck,
  FileText,
} from "lucide-react";

interface DeviceItem {
  title: string;
  subtitle: string;
  description: string;
  highlights: string[];
  specs: string[];
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
}

function DeviceCard({ item, index }: { item: DeviceItem; index: number }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 40 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.7, delay: index * 0.12, ease: "easeOut" }}
      viewport={{ once: true, margin: "-100px" }}
      whileHover={{ y: -8, scale: 1.015 }}
      className={`
        group relative
        bg-neutral-950/70 backdrop-blur-xl
        border border-neutral-800/60
        rounded-2xl overflow-hidden
        shadow-[0_8px_32px_rgba(0,0,0,0.4)]
        hover:border-blue-900/50 hover:shadow-[0_16px_48px_rgba(37,99,235,0.12)]
        transition-all duration-500
      `}
    >
      {/* Subtle internal gradient glow */}
      <div className="absolute inset-0 bg-gradient-to-br from-blue-950/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />

      <div className="relative px-7 pt-7 pb-6 border-b border-neutral-800/50 bg-gradient-to-b from-neutral-900/40 to-transparent">
        <div className="flex items-center gap-5">
          <div className="
            p-4 rounded-xl
            bg-neutral-900/80 border border-neutral-800/70
            group-hover:border-blue-800/50 group-hover:bg-blue-950/20
            transition-all duration-300
          ">
            <item.icon className="
              w-8 h-8 text-neutral-400
              group-hover:text-blue-400/90
              transition-colors duration-300
            " />
          </div>

          <div>
            <h3 className="text-2xl font-semibold text-white tracking-tight leading-tight">
              {item.title}
            </h3>
            <p className="text-sm text-neutral-500 mt-1 font-medium">
              {item.subtitle}
            </p>
          </div>
        </div>
      </div>

      {/* Uncomment this block if you want to bring back the card details */}
      {/* 
      <div className="p-7 space-y-7">
        <p className="text-neutral-300 leading-relaxed text-[15px] font-light">
          {item.description}
        </p>

        <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 text-sm">
          {item.highlights.map((highlight, i) => (
            <div key={i} className="flex items-center gap-2.5">
              <div className="
                w-1.5 h-1.5 rounded-full
                bg-neutral-600 group-hover:bg-blue-500/70
                transition-colors duration-300
              " />
              <span className="text-neutral-200 font-medium">{highlight}</span>
            </div>
          ))}
        </div>

        <div className="flex flex-wrap gap-2.5">
          {item.specs.map((spec, i) => (
            <span
              key={i}
              className="
                px-4 py-1.5 text-xs font-medium
                rounded-lg bg-neutral-900/60 border border-neutral-800/60
                text-neutral-400 group-hover:text-neutral-200
                transition-colors duration-300
              "
            >
              {spec}
            </span>
          ))}
        </div>

        <button
          className="
            w-full mt-4 py-4
            text-sm font-semibold tracking-wide
            text-neutral-200 bg-neutral-900/70 border border-neutral-800/70
            rounded-xl hover:bg-neutral-800/90 hover:border-neutral-700/70
            hover:text-white active:scale-[0.98]
            transition-all duration-300
            flex items-center justify-center gap-2.5
          "
        >
          <FileText className="w-4 h-4" />
          View Technical Documentation
        </button>
      </div>
      */}
    </motion.div>
  );
}

export default function DevicesPage() {
  const devices: DeviceItem[] = [
    {
      title: "Multi-Vital Monitor",
      subtitle: "Temperature • SpO₂ • Blood Pressure",
      description:
        "Simultaneous clinical-grade measurement of core vital signs with validated algorithms and secure wireless pairing.",
      highlights: ["±0.1 °C accuracy", "±2% SpO₂", "±3 mmHg NIBP"],
      specs: ["Bluetooth 5.2 LE", "IEC 60601", "24 h operation", "IP54"],
      icon: Activity,
    },
    {
      title: "3-in-1 Metabolic Analyzer",
      subtitle: "Glucose • Hemoglobin • Hematocrit",
      description:
        "Fast point-of-care testing from a single micro-sample with temperature compensation and result validation.",
      highlights: ["5–10 sec result", "±5 mg/dL glucose", "Lab-comparable Hb/HCT"],
      specs: ["Micro-volume sample", "Strip detection", "EHR integration", "Auto calibration"],
      icon: Droplet,
    },
    {
      title: "Digital Urine Analyzer",
      subtitle: "Multi-parameter Urinalysis",
      description:
        "Automated reading and standardized interpretation of urine test strips with digital result storage.",
      highlights: ["10–14 parameters", "< 60 seconds", "Trend tracking", "PDF export"],
      specs: ["High-resolution optics", "AI strip analysis", "Bluetooth sync", "Batch processing"],
      icon: Droplet,
    },
    {
      title: "Fetal Heart Doppler",
      subtitle: "Professional Maternity Monitoring",
      description:
        "High-sensitivity fetal heart rate detection with audio output, waveform display and event recording.",
      highlights: ["50–240 bpm range", "3 MHz probe", "Water-resistant", "Extended battery"],
      specs: ["Clinical validation", "Bluetooth audio", "Waveform visualization", "Event marking"],
      icon: Baby,
    },
    {
      title: "Clinical Precision Scale",
      subtitle: "Weight & Body Composition",
      description:
        "High-accuracy weighing platform with body composition analysis suitable for clinical follow-up.",
      highlights: ["200 kg capacity", "50 g resolution", "Fat / Muscle / Water", "Multi-user support"],
      specs: ["Bioelectrical impedance", "Tempered glass", "Bluetooth LE", "Stable base"],
      icon: Scale,
    },
  ];

  return (
    <div className="min-h-screen text-neutral-100 relative overflow-hidden bg-[#0a0e17]">
      {/* ====================== Bluetooth Animated Background ====================== */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        {/* Dark moody base gradient */}
        <div className="absolute inset-0 bg-gradient-to-br from-[#0a0e17] via-[#0d1525] to-[#0a0e1a]" />

        {/* Pulsing Bluetooth radar-style rings */}
        <div className="absolute inset-0 flex items-center justify-center">
          {/* Largest – slowest */}
          <motion.div
            className="absolute rounded-full border border-blue-500/8"
            style={{ width: "min(140vmin, 1800px)", height: "min(140vmin, 1800px)" }}
            animate={{
              scale: [0.65, 1.1, 0.65],
              opacity: [0.02, 0.09, 0.02],
            }}
            transition={{
              duration: 18,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />

          {/* Medium */}
          <motion.div
            className="absolute rounded-full border border-blue-500/10"
            style={{ width: "min(100vmin, 1300px)", height: "min(100vmin, 1300px)" }}
            animate={{
              scale: [0.7, 1.15, 0.7],
              opacity: [0.03, 0.13, 0.03],
            }}
            transition={{
              duration: 14,
              repeat: Infinity,
              ease: "easeInOut",
              delay: 3,
            }}
          />

          {/* Smallest + sharper */}
          <motion.div
            className="absolute rounded-full border-2 border-blue-400/20"
            style={{ width: "min(60vmin, 800px)", height: "min(60vmin, 800px)" }}
            animate={{
              scale: [0.85, 1.4, 0.85],
              opacity: [0.06, 0.22, 0.06],
            }}
            transition={{
              duration: 9,
              repeat: Infinity,
              ease: "easeOut",
              delay: 1.5,
            }}
          />

          {/* Very faint core glow */}
          <motion.div
            className="absolute rounded-full bg-blue-600/5 blur-xl"
            style={{ width: "min(20vmin, 260px)", height: "min(20vmin, 260px)" }}
            animate={{ scale: [1, 1.4, 1], opacity: [0.15, 0.35, 0.15] }}
            transition={{ duration: 7, repeat: Infinity, ease: "easeInOut" }}
          />
        </div>

        {/* Subtle rotating signal arcs */}
        <motion.div
          className="absolute inset-0 flex items-center justify-center"
          animate={{ rotate: 360 }}
          transition={{ duration: 90, repeat: Infinity, ease: "linear" }}
        >
          <div className="relative w-[min(80vmin,1000px)] h-[min(80vmin,1000px)]">
            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-400/8 to-transparent rotate-12 blur-md opacity-60" />
            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-500/6 to-transparent -rotate-18 blur-lg opacity-50" />
          </div>
        </motion.div>

        {/* Floating particles */}
        <div className="absolute inset-0">
          {[...Array(16)].map((_, i) => (
            <motion.div
              key={i}
              className="absolute w-1.5 h-1.5 md:w-2 md:h-2 bg-blue-400/40 rounded-full blur-[1px]"
              initial={{ opacity: 0 }}
              animate={{
                y: [0, -180 - Math.random() * 140, -360],
                opacity: [0, 0.7, 0],
                x: Math.sin(i * 0.9) * 60 + Math.cos(i * 1.4) * 30,
              }}
              transition={{
                duration: 12 + Math.random() * 10,
                repeat: Infinity,
                delay: i * 0.6 + Math.random() * 2,
                ease: "easeOut",
              }}
              style={{
                left: `${8 + ((i * 7.3) % 84)}%`,
                top: "85%",
              }}
            />
          ))}
        </div>
      </div>

      {/* ====================== Main Content ====================== */}
      <div className="relative z-10">
        <Navbar />

        <main className="pt-28 md:pt-40 pb-28 md:pb-40">
          <div className="max-w-7xl mx-auto px-5 sm:px-7 lg:px-10">
            {/* Header */}
            <div className="text-center max-w-4xl mx-auto mb-20 md:mb-28">
              <div className="
                inline-flex items-center gap-3 px-6 py-3
                rounded-full border border-neutral-800/70
                bg-neutral-950/50 backdrop-blur-lg
                text-neutral-300 text-sm font-medium mb-8
              ">
                <Bluetooth className="w-5 h-5 text-blue-400/80" />
                Connected Clinical Peripherals
              </div>

              <h1 className="
                text-4xl sm:text-5xl md:text-6xl lg:text-7xl
                font-semibold tracking-tight leading-[1.05]
                text-white
              ">
                Diagnostic Hardware Suite
              </h1>

              <p className="mt-6 text-lg md:text-xl text-neutral-400 leading-relaxed max-w-3xl mx-auto">
                Reliable, standards-compliant devices designed for hospitals, clinics, telehealth and institutional care environments.
              </p>
            </div>

            {/* Device cards grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 lg:gap-9">
              {devices.map((device, i) => (
                <DeviceCard key={device.title} item={device} index={i} />
              ))}
            </div>

            {/* Compliance & security block */}
            <motion.div
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              viewport={{ once: true }}
              className="
                mt-24 md:mt-32 p-8 md:p-12
                bg-neutral-950/60 backdrop-blur-xl
                border border-neutral-800/60 rounded-2xl
                text-center md:text-left
                shadow-[0_16px_48px_rgba(0,0,0,0.4)]
              "
            >
              <div className="flex flex-col md:flex-row items-center gap-10 md:gap-14">
                <div className="
                  p-6 md:p-8 rounded-2xl
                  bg-neutral-900/70 border border-neutral-800/70
                ">
                  <ShieldCheck className="w-12 h-12 md:w-14 md:h-14 text-neutral-400" />
                </div>

                <div className="space-y-4">
                  <h2 className="text-3xl md:text-4xl font-semibold text-white tracking-tight">
                    Medical Standards & Data Security
                  </h2>
                  <p className="text-neutral-300 leading-relaxed text-lg max-w-3xl">
                    Devices comply with IEC 60601, IEC 62304 and relevant regional regulations. All data transmission uses end-to-end encryption, device authentication, secure pairing and full audit logging.
                  </p>
                </div>
              </div>
            </motion.div>
          </div>
        </main>

        <Footer />
      </div>
    </div>
  );
}