"use client";

import { motion } from "framer-motion";
import { Smartphone, ShieldCheck, HeartPulse, Fingerprint } from "lucide-react";

export default function AppEcosystem() {
    return (
        <section className="py-24 relative overflow-hidden">
            <div className="container mx-auto px-6">
                <div className="flex flex-col md:flex-row-reverse items-center gap-20">
                    <motion.div
                        initial={{ opacity: 0, x: 50 }}
                        whileInView={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.8 }}
                        className="flex-1 space-y-10"
                    >
                        <div className="space-y-4">
                            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-accent text-sm font-semibold">
                                <Smartphone className="w-4 h-4" />
                                <span>Mobile Intelligence</span>
                            </div>
                            <h2 className="text-4xl md:text-6xl font-black tracking-tighter">
                                Health in your <span className="text-gradient">Pocket</span>
                            </h2>
                            <p className="text-xl text-foreground/60 leading-relaxed max-w-2xl">
                                Experience end-to-end healthcare with our companion mobile apps. Real-time data sync, encrypted messaging, and emergency alerts at your fingertips.
                            </p>
                        </div>

                        <div className="space-y-6">
                            {[
                                { icon: Fingerprint, title: "Biometric Security", text: "Secure access with FaceID and Fingerprint authentication." },
                                { icon: ShieldCheck, title: "HIPAA Certified", text: "Multi-layered encryption for all personal health information (PHI)." },
                                { icon: HeartPulse, title: "Live Streaming", text: "Instant vital data visualization from connected Bluetooth devices." }
                            ].map((item, i) => (
                                <div key={i} className="flex gap-6 group">
                                    <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:bg-primary/20 transition-colors">
                                        <item.icon className="w-6 h-6 text-primary" />
                                    </div>
                                    <div>
                                        <h4 className="font-extrabold text-lg">{item.title}</h4>
                                        <p className="text-foreground/50">{item.text}</p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </motion.div>

                    <motion.div
                        initial={{ opacity: 0, y: 50 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8 }}
                        className="flex-1"
                    >
                        <div className="relative mx-auto max-w-[300px]">
                            {/* Phone Frame Mockup */}
                            <div className="relative w-full aspect-[1/2] glass rounded-[3rem] p-4 border-white/20 shadow-[0_0_80px_rgba(59,130,246,0.2)] overflow-hidden">
                                <div className="absolute top-0 inset-x-0 h-8 flex justify-center items-center">
                                    <div className="w-20 h-4 bg-black rounded-full" />
                                </div>
                                <div className="h-full w-full bg-zinc-900 rounded-[2.5rem] p-6 space-y-8 relative">
                                    <div className="flex justify-between items-center">
                                        <div className="space-y-1">
                                            <div className="h-2 w-16 bg-white/10 rounded-full" />
                                            <div className="h-3 w-24 bg-white/20 rounded-full" />
                                        </div>
                                        <div className="w-10 h-10 rounded-full bg-primary/20" />
                                    </div>

                                    <div className="aspect-square glass rounded-2xl p-6 flex items-center justify-center">
                                        <HeartPulse className="w-20 h-20 text-primary animate-pulse" />
                                    </div>

                                    <div className="space-y-4">
                                        {[1, 2, 3].map((_, i) => (
                                            <div key={i} className="h-12 bg-white/5 rounded-xl border border-white/5" />
                                        ))}
                                    </div>
                                </div>
                            </div>

                            {/* Decorative Elements */}
                            <div className="absolute -z-10 -bottom-10 -right-10 w-40 h-40 bg-accent/20 blur-[60px] rounded-full" />
                            <div className="absolute -z-10 top-20 -left-20 w-48 h-48 bg-primary/20 blur-[60px] rounded-full" />
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}