Skyheal/app/devices/page.tsx

"use client";

import Navbar from "../components/layout/Navbar";
import Footer from "../components/layout/Footer";
import { motion } from "framer-motion";
import {
  Activity,
  Droplet,
  Baby,
  Scale,
  Bluetooth,
  ShieldCheck,
  Cpu,
  Zap,
  CheckCircle2,
  ArrowUpRight,
} 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: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, delay: index * 0.1, ease: "easeOut" }}
      viewport={{ once: true, margin: "-50px" }}
      className="group relative h-full"
    >
      {/* Card Container */}
      <div className="
        relative h-full flex flex-col
        bg-zinc-950/40 backdrop-blur-md
        border border-white/5 rounded-3xl
        overflow-hidden
        transition-all duration-500
        hover:border-cyan-500/30 hover:bg-zinc-900/60
        hover:shadow-[0_0_40px_-10px_rgba(6,182,212,0.15)]
      ">
        
        {/* Hover Gradient Overlay */}
        <div className="absolute inset-0 bg-gradient-to-b from-cyan-500/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />

        {/* Content Wrapper */}
        <div className="p-6 sm:p-8 flex flex-col h-full relative z-10">
          
          {/* Header Section */}
          <div className="flex items-start justify-between mb-6">
            <div className="
              w-12 h-12 sm:w-14 sm:h-14 rounded-2xl
              bg-zinc-900/80 border border-white/10
              flex items-center justify-center
              group-hover:scale-110 group-hover:border-cyan-500/30 group-hover:bg-cyan-950/30
              transition-all duration-500
            ">
              <item.icon className="w-6 h-6 sm:w-7 sm:h-7 text-zinc-400 group-hover:text-cyan-400 transition-colors duration-300" />
            </div>
            
            {/* Corner Action Icon */}
            <div className="opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
               <ArrowUpRight className="w-5 h-5 text-zinc-500 group-hover:text-cyan-400" />
            </div>
          </div>

          <div className="mb-4">
            <h3 className="text-xl sm:text-2xl font-bold text-white tracking-tight mb-1 group-hover:text-cyan-100 transition-colors">
              {item.title}
            </h3>
            <p className="text-xs sm:text-sm font-medium text-cyan-600/80 uppercase tracking-wider">
              {item.subtitle}
            </p>
          </div>

          <p className="text-sm sm:text-base text-zinc-400 leading-relaxed mb-6 flex-grow">
            {item.description}
          </p>

          {/* Divider */}
          <div className="h-px w-full bg-white/5 mb-6 group-hover:bg-cyan-500/20 transition-colors duration-500" />

          {/* Specs Grid (Compact) */}
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-3">
               {item.highlights.slice(0, 4).map((highlight, i) => ( // Show first 4
                 <div key={i} className="flex items-start gap-2">
                    <CheckCircle2 className="w-3.5 h-3.5 text-cyan-500/70 mt-0.5 shrink-0" />
                    <span className="text-xs text-zinc-300 font-medium">{highlight}</span>
                 </div>
               ))}
            </div>

            {/* Technical Chips */}
            <div className="flex flex-wrap gap-2 pt-2">
              {item.specs.slice(0, 3).map((spec, i) => (
                <span key={i} className="
                  px-2.5 py-1 rounded-md text-[10px] uppercase tracking-wide font-bold
                  bg-white/5 border border-white/5 text-zinc-500
                  group-hover:border-cyan-500/20 group-hover:text-cyan-400/80 group-hover:bg-cyan-950/20
                  transition-all duration-300
                ">
                  {spec}
                </span>
              ))}
            </div>
          </div>

        </div>
      </div>
    </motion.div>
  );
}

export default function DeviceShowcase() {
  const devices: DeviceItem[] = [
    {
      title: "Multi-Vital Monitor",
      subtitle: "Hemodynamics",
      description: "Clinical-grade core vital signs measurement with validated algorithms and secure wireless pairing.",
      highlights: ["±0.1°C accuracy", "±2% SpO₂", "±3 mmHg NIBP", "Resp. Rate"],
      specs: ["BT 5.2 LE", "IEC 60601", "IP54"],
      icon: Activity,
    },
    {
      title: "Metabolic Analyzer",
      subtitle: "Blood Chemistry",
      description: "Fast point-of-care testing from a single micro-sample with temperature compensation.",
      highlights: ["5s Result", "±5 mg/dL Glu", "HCT Corrected", "Ketone Check"],
      specs: ["Micro-fluidic", "NFC Sync", "Auto-Cal"],
      icon: Droplet,
    },
    {
      title: "Fetal Doppler",
      subtitle: "Maternity Care",
      description: "High-sensitivity fetal heart rate detection with audio output and waveform recording.",
      highlights: ["50–240 BPM", "3 MHz Probe", "Auto-Record", "Noise Cancel"],
      specs: ["Ultrasonic", "FDA Cleared", "Type-C"],
      icon: Baby,
    },
    {
      title: "Precision Scale",
      subtitle: "Biometrics",
      description: "High-accuracy weighing platform with body composition analysis for clinical follow-up.",
      highlights: ["50g Resolution", "Bio-Impedance", "Muscle/Fat %", "Water Mass"],
      specs: ["Tempered Glass", "Strain Gauge", "WiFi"],
      icon: Scale,
    },
    {
        title: "Digital Otoscope",
        subtitle: "ENT Imaging",
        description: "HD video capture of the ear canal and tympanic membrane with AI diagnostic support.",
        highlights: ["1080p Video", "100x Zoom", "Auto-Focus", "LED Ring"],
        specs: ["WiFi Direct", "Macro Lens", "IP67"],
        icon: Zap, // Using Zap as placeholder for Otoscope/Light
      },
      {
        title: "ECG Patch",
        subtitle: "Cardiology",
        description: "Wearable continuous heart monitoring with arrhythmia detection and cloud sync.",
        highlights: ["7-Day Battery", "Lead II", "Afib Alert", "Waterproof"],
        specs: ["Bluetooth 5.0", "Medical Adhesive", "24/7"],
        icon: Cpu,
      },
  ];

  return (
    <div className="min-h-screen text-zinc-100 relative bg-[#05080f] font-sans selection:bg-cyan-500/30">
      
      {/* ====================== Animated Background Layers ====================== */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
        {/* Base Gradient */}
        <div className="absolute inset-0 bg-gradient-to-b from-[#05080f] via-[#090c15] to-[#05080f]" />
        
        {/* Radial Center Glow */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[800px] bg-[radial-gradient(circle_at_center,rgba(6,182,212,0.08),transparent_60%)]" />

        {/* Animated Rings (Responsive Sizes) */}
        <div className="absolute inset-0 flex items-center justify-center opacity-30">
             <motion.div 
                animate={{ rotate: 360 }}
                transition={{ duration: 120, repeat: Infinity, ease: "linear" }}
                className="w-[800px] h-[800px] border border-cyan-900/20 rounded-full border-dashed"
             />
             <motion.div 
                animate={{ rotate: -360 }}
                transition={{ duration: 80, repeat: Infinity, ease: "linear" }}
                className="absolute w-[600px] h-[600px] border border-cyan-500/5 rounded-full"
             />
             <motion.div 
                 animate={{ scale: [1, 1.1, 1], opacity: [0.1, 0.3, 0.1] }}
                 transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
                 className="absolute w-[400px] h-[400px] bg-cyan-500/5 rounded-full blur-3xl"
             />
        </div>

        {/* Floating Particles */}
        <div className="absolute inset-0">
             {[...Array(12)].map((_, i) => (
                <motion.div
                    key={i}
                    className="absolute w-1 h-1 bg-cyan-400/40 rounded-full"
                    style={{
                        top: `${Math.random() * 100}%`,
                        left: `${Math.random() * 100}%`,
                    }}
                    animate={{
                        y: [0, -100],
                        opacity: [0, 1, 0],
                        scale: [0, 1.5, 0]
                    }}
                    transition={{
                        duration: Math.random() * 5 + 5,
                        repeat: Infinity,
                        delay: Math.random() * 5,
                        ease: "linear"
                    }}
                />
             ))}
        </div>
      </div>

      {/* ====================== Main Content ====================== */}
      <div className="relative z-10 flex flex-col min-h-screen">
        <Navbar />

        <main className="flex-grow pt-32 pb-32 sm:pt-40 sm:pb-40">
          {/* Container limits width, scales for 4K */}
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl 2xl:max-w-[1800px]">
            
            {/* --- Hero Header --- */}
            <div className="flex flex-col items-center text-center max-w-4xl 2xl:max-w-5xl mx-auto mb-20 lg:mb-28">
              
              {/* Badge */}
              <motion.div 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-cyan-500/20 bg-cyan-950/10 backdrop-blur-md text-cyan-400 text-xs font-bold tracking-wider uppercase mb-8 shadow-[0_0_20px_-5px_rgba(6,182,212,0.3)]"
              >
                <Bluetooth className="w-4 h-4" />
                <span>IoT Ecosystem</span>
              </motion.div>

              {/* Title */}
              <motion.h1 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: 0.1 }}
                className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-bold tracking-tight text-white leading-[1.1] mb-6"
              >
                Clinical <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-600">Hardware</span> Suite
              </motion.h1>

              {/* Subtitle */}
              <motion.p 
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: 0.2 }}
                className="text-lg sm:text-xl 2xl:text-2xl text-zinc-400 max-w-2xl 2xl:max-w-3xl leading-relaxed"
              >
                Seamlessly connected diagnostic devices designed for accuracy, speed, and institutional interoperability.
              </motion.p>
            </div>

            {/* --- Devices Grid --- */}
            {/* 1 col mobile, 2 col tablet, 3 col laptop, 4 col ultra-wide */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 lg:gap-8 2xl:gap-10">
              {devices.map((device, i) => (
                <DeviceCard key={device.title} item={device} index={i} />
              ))}
            </div>

            {/* --- Bottom Feature: Security --- */}
            <motion.div
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              viewport={{ once: true }}
              className="mt-32 2xl:mt-48"
            >
              <div className="
                relative overflow-hidden rounded-3xl
                bg-gradient-to-br from-zinc-900/80 to-zinc-950/80 backdrop-blur-xl
                border border-white/5
                p-8 md:p-12 lg:p-16
                flex flex-col lg:flex-row items-center gap-10 lg:gap-16
              ">
                {/* Decoration */}
                <div className="absolute top-0 right-0 w-64 h-64 bg-cyan-500/10 blur-[100px] pointer-events-none" />

                <div className="
                  shrink-0 w-20 h-20 sm:w-24 sm:h-24 rounded-3xl
                  bg-gradient-to-br from-cyan-500/10 to-blue-500/10
                  border border-cyan-500/20
                  flex items-center justify-center
                  shadow-[0_0_40px_-10px_rgba(6,182,212,0.2)]
                ">
                  <ShieldCheck className="w-10 h-10 sm:w-12 sm:h-12 text-cyan-400" />
                </div>

                <div className="text-center lg:text-left space-y-4 max-w-4xl">
                  <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white tracking-tight">
                    Enterprise-Grade Compliance
                  </h2>
                  <p className="text-base sm:text-lg text-zinc-400 leading-relaxed">
                    Built for the modern hospital. Our devices comply with <span className="text-cyan-200">IEC 60601</span> and <span className="text-cyan-200">HIPAA</span> standards. 
                    End-to-end encryption ensures patient data remains secure from the sensor to the cloud.
                  </p>
                </div>
              </div>
            </motion.div>

          </div>
        </main>

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