"use client";

import Navbar from "../components/layout/Navbar";
import DNAHeroBackground from "../components/canvas/DNAHeroBackground";
import { motion } from "framer-motion";
import { Lock, Globe, MessageSquare, Bell, HeartPulse, ShieldCheck } from "lucide-react";
import Footer from "../components/layout/Footer";

export default function AppsPage() {
    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">
                    <div className="flex flex-col lg:flex-row gap-20 items-center">
                        <motion.div
                            initial={{ opacity: 0, x: -30 }}
                            animate={{ opacity: 1, x: 0 }}
                            className="flex-1 space-y-8"
                        >
                            <h1 className="text-5xl md:text-8xl font-black tracking-tighter">
                                Connected <span className="text-gradient">Care</span>
                            </h1>
                            <p className="text-xl text-foreground/60 leading-relaxed max-w-xl">
                                Our mobile applications are the command center for your health. Real-time monitoring, AI-driven insights, and instant doctor access—securely in your pocket.
                            </p>

                            <div className="flex flex-wrap gap-4 pt-4">
                                <button className="bg-white text-black px-8 py-4 rounded-full font-bold flex items-center gap-3">
                                    App Store
                                </button>
                                <button className="glass px-8 py-4 rounded-full font-bold flex items-center gap-3">
                                    Play Store
                                </button>
                            </div>
                        </motion.div>

                        <motion.div
                            initial={{ opacity: 0, scale: 0.8 }}
                            animate={{ opacity: 1, scale: 1 }}
                            className="flex-1 relative lg:block hidden"
                        >
                            <div className="relative w-80 h-[600px] glass rounded-[3.5rem] p-4 border-white/10 shadow-2xl mx-auto">
                                <div className="w-full h-full bg-zinc-950 rounded-[3rem] overflow-hidden p-6 space-y-10">
                                    <div className="flex items-center gap-3">
                                        <div className="w-10 h-10 rounded-full bg-primary" />
                                        <div className="space-y-1">
                                            <div className="h-2 w-20 bg-white/20 rounded-full" />
                                            <div className="h-2 w-12 bg-white/10 rounded-full" />
                                        </div>
                                    </div>

                                    <div className="space-y-4">
                                        <h4 className="text-sm font-bold uppercase tracking-widest text-primary">Live Vitals</h4>
                                        <div className="aspect-video bg-white/5 rounded-2xl flex items-center justify-center">
                                            <HeartPulse className="w-12 h-12 text-primary animate-pulse" />
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-2 gap-4">
                                        <div className="h-24 glass rounded-2xl" />
                                        <div className="h-24 glass rounded-2xl" />
                                    </div>
                                </div>
                            </div>
                        </motion.div>
                    </div>

                    {/* Features Grid */}
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-40">
                        {[
                            { icon: Lock, title: "End-to-End Encryption", desc: "Military-grade AES-256 encryption for all data sync and communication." },
                            { icon: MessageSquare, title: "AI Chat Assistant", desc: "Instant clinical insights and symptom tracking powered by our healthcare LLM." },
                            { icon: Bell, title: "Emergency SOS", desc: "Automatic alerts to emergency contacts when vitals drop outside safe thresholds." },
                            { icon: Globe, title: "Teleconsult Sync", desc: "Seamlessly transition from monitoring to a live video call with your physician." },
                            { icon: ShieldCheck, title: "HIPAA Cloud", desc: "Secure cloud infrastructure designed specifically for healthcare data storage." }
                        ].map((feature, i) => (
                            <motion.div
                                key={i}
                                initial={{ opacity: 0, y: 20 }}
                                whileInView={{ opacity: 1, y: 0 }}
                                transition={{ delay: i * 0.1 }}
                                className="glass p-8 rounded-3xl border-white/5 space-y-4 hover:border-primary/30 transition-colors"
                            >
                                <div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
                                    <feature.icon className="w-6 h-6 text-primary" />
                                </div>
                                <h3 className="text-xl font-bold">{feature.title}</h3>
                                <p className="text-foreground/50 text-sm leading-relaxed">{feature.desc}</p>
                            </motion.div>
                        ))}
                    </div>
                </div>
                <Footer />
            </main>
        </div>
    );
}