"use client";

import Navbar from "../components/layout/Navbar";
import DNAHeroBackground from "../components/canvas/DNAHeroBackground";
import { motion } from "framer-motion";
import { Activity, Bluetooth, ShieldCheck, Zap } from "lucide-react";
import Footer from "../components/layout/Footer";

export default function DevicesPage() {
    return (
        <div className="relative min-h-screen">
            <DNAHeroBackground />
            <Navbar />

            <main className="relative z-10 pt-40 pb-24">
                <div className="container mx-auto px-6">
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="max-w-4xl"
                    >
                        <h1 className="text-5xl md:text-8xl font-black tracking-tighter mb-8">
                            Medical <span className="text-gradient">Hardware</span>
                        </h1>
                        <p className="text-xl text-foreground/60 leading-relaxed mb-12 max-w-2xl">
                            Precision-engineered Bluetooth vitals monitors and maternity care tools. Designed for reliability, accuracy, and absolute security.
                        </p>
                    </motion.div>

                    {/* Device Detailed Grid */}
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mt-20">
                        {[
                            {
                                title: "Vitals Hub X1",
                                feature: "Multi-Parameter Monitoring",
                                desc: "Measures Blood Pressure, Heart Rate, SpO2, and Body Temperature in one sleek device.",
                                specs: ["Bluetooth 5.2", "48h Battery", "Cloud Sync"]
                            },
                            {
                                title: "Fetal Doppler Pro",
                                feature: "Maternity Care",
                                desc: "High-sensitivity fetal heart rate detection with ultra-sound noise reduction technology.",
                                specs: ["OLED Display", "Built-in Speaker", "App Integration"]
                            }
                        ].map((item, i) => (
                            <motion.div
                                key={i}
                                initial={{ opacity: 0, scale: 0.95 }}
                                whileInView={{ opacity: 1, scale: 1 }}
                                className="glass p-12 rounded-[3rem] border-white/5 space-y-8"
                            >
                                <div className="flex justify-between items-start">
                                    <div className="space-y-2">
                                        <span className="text-primary font-bold tracking-widest uppercase text-xs">{item.feature}</span>
                                        <h2 className="text-4xl font-bold">{item.title}</h2>
                                    </div>
                                    <div className="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center">
                                        <Activity className="w-8 h-8 text-primary" />
                                    </div>
                                </div>
                                <p className="text-lg text-foreground/60">{item.desc}</p>

                                <div className="flex flex-wrap gap-4">
                                    {item.specs.map((spec, j) => (
                                        <span key={j} className="px-4 py-2 rounded-full bg-white/5 border border-white/5 text-sm">
                                            {spec}
                                        </span>
                                    ))}
                                </div>

                                <button className="w-full bg-white text-black py-4 rounded-2xl font-bold hover:bg-zinc-200 transition-colors">
                                    View Specifications
                                </button>
                            </motion.div>
                        ))}
                    </div>

                    {/* Compliance Banner */}
                    <motion.div
                        initial={{ opacity: 0 }}
                        whileInView={{ opacity: 1 }}
                        className="mt-32 p-12 glass rounded-[3rem] border-accent/20 flex flex-col md:flex-row items-center justify-between gap-12"
                    >
                        <div className="space-y-4">
                            <div className="flex items-center gap-3">
                                <ShieldCheck className="w-8 h-8 text-accent" />
                                <h3 className="text-3xl font-bold italic">HIPAA Verified Hardware</h3>
                            </div>
                            <p className="text-foreground/60 max-w-xl">
                                Every device in our ecosystem undergoes rigorous security audits. Data transmission is encrypted from the sensor to the cloud.
                            </p>
                        </div>
                        <div className="flex gap-4">
                            <div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center">
                                <Bluetooth className="w-8 h-8 text-primary" />
                            </div>
                            <div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center">
                                <Zap className="w-8 h-8 text-yellow-500" />
                            </div>
                        </div>
                    </motion.div>
                </div>
            </main>

            <Footer />
        </div>
    );
}