"use client";

import { motion } from "framer-motion";
import { Video, ShoppingCart, ShieldCheck, Globe } from "lucide-react";

export default function TelehealthSolutions() {
    return (
        <section className="py-24 relative overflow-hidden bg-primary/5">
            <div className="container mx-auto px-6">
                <div className="flex flex-col lg:flex-row 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">
                            <h2 className="text-4xl md:text-6xl font-black tracking-tighter">
                                Clinic without <span className="text-gradient">Boundaries</span>
                            </h2>
                            <p className="text-xl text-foreground/60 leading-relaxed max-w-2xl">
                                Advanced tele-consultation and integrated cart solutions designed for modern healthcare infrastructure. High-fidelity, low-latency, and fully secure.
                            </p>
                        </div>

                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
                            <div className="space-y-4">
                                <div className="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
                                    <Video className="w-6 h-6 text-blue-500" />
                                </div>
                                <h3 className="text-xl font-bold">Teleconsult</h3>
                                <p className="text-sm text-foreground/50">HD video consultation with integrated EHR and vital streaming capabilities.</p>
                            </div>
                            <div className="space-y-4">
                                <div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center">
                                    <ShoppingCart className="w-6 h-6 text-purple-500" />
                                </div>
                                <h3 className="text-xl font-bold">Telecart</h3>
                                <p className="text-sm text-foreground/50">Managed healthcare shopping experience for devices and medication.</p>
                            </div>
                        </div>

                        <div className="flex items-center gap-6 p-6 glass rounded-2xl border-primary/20 bg-primary/5">
                            <ShieldCheck className="w-10 h-10 text-primary flex-shrink-0" />
                            <div>
                                <h4 className="font-bold">Enterprise-Grade Security</h4>
                                <p className="text-sm text-foreground/60">All consultations are end-to-end encrypted and HIPAA-compliant.</p>
                            </div>
                        </div>
                    </motion.div>

                    <motion.div
                        initial={{ opacity: 0, scale: 0.9 }}
                        whileInView={{ opacity: 1, scale: 1 }}
                        transition={{ duration: 0.8 }}
                        className="flex-1"
                    >
                        <div className="relative">
                            <div className="absolute inset-0 bg-primary/10 rounded-3xl blur-3xl transform rotate-3" />
                            <div className="relative glass aspect-video rounded-3xl overflow-hidden border-white/5 shadow-2xl">
                                <div className="bg-background/80 p-2 border-b border-white/5 flex items-center gap-2">
                                    <div className="w-3 h-3 rounded-full bg-red-400" />
                                    <div className="w-3 h-3 rounded-full bg-yellow-400" />
                                    <div className="w-3 h-3 rounded-full bg-green-400" />
                                    <div className="ml-4 h-5 w-1/3 bg-white/5 rounded-full" />
                                </div>
                                <div className="h-full w-full bg-gradient-to-br from-zinc-900 to-black p-8 flex items-center justify-center relative">
                                    <div className="absolute inset-0 opacity-10">
                                        <Globe className="w-full h-full text-white" />
                                    </div>
                                    <div className="text-center space-y-4">
                                        <div className="w-20 h-20 rounded-full glass mx-auto flex items-center justify-center border-primary/30">
                                            <Video className="w-8 h-8 text-primary animate-pulse" />
                                        </div>
                                        <div className="space-y-2">
                                            <div className="h-2 w-32 bg-white/20 rounded-full mx-auto" />
                                            <div className="h-2 w-24 bg-white/10 rounded-full mx-auto" />
                                        </div>
                                    </div>
                                    {/* Floating HUD Elements */}
                                    <div className="absolute top-12 right-12 glass p-4 rounded-xl border-accent/20">
                                        <div className="flex items-center gap-3">
                                            <div className="w-2 h-2 rounded-full bg-accent animate-ping" />
                                            <span className="text-[10px] font-bold uppercase tracking-widest text-accent">Active Sync</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}