"use client";

import { motion, useScroll, useTransform } from "framer-motion";
import { Video, Shield, Clock, Users, Globe, Activity } from "lucide-react";
import { useRef } from "react";

export default function TelehealthSolutions() {
    const containerRef = useRef(null);
    const { scrollYProgress } = useScroll({
        target: containerRef,
        offset: ["start end", "end start"]
    });

    const scale = useTransform(scrollYProgress, [0, 0.5], [0.98, 1]);
    const rotateY = useTransform(scrollYProgress, [0, 0.5], [10, 0]);

    const services = [
        { icon: Video, title: "Clinical HD Video", desc: "Institutional-grade secure streaming for pediatric and adult care." },
        { icon: Clock, title: "Zero-Latency Triage", desc: "Automated routing based on real-time vital analysis." },
        { icon: Shield, title: "Military Encryption", desc: "End-to-end PHI security layers for absolute data integrity." },
        { icon: Globe, title: "Global Registry", desc: "Unified clinical records accessible across institutional borders." }
    ];

    return (
        <section ref={containerRef} id="solutions" className="py-24 relative overflow-hidden perspective-1000">
            <div className="container mx-auto px-6">
                <motion.div
                    style={{ scale, rotateY }}
                    initial={{ opacity: 0 }}
                    whileInView={{ opacity: 1 }}
                    transition={{ duration: 0.8 }}
                    className="glass rounded-[4rem] border-white/5 p-12 lg:p-24 overflow-hidden relative shadow-none min-h-[800px] flex flex-col justify-center bg-white/[0.01]"
                >
                    <div className="reflection" />

                    <div className="flex flex-col lg:flex-row gap-20 items-center relative z-10">
                        <div className="flex-1 space-y-12">
                            <div className="space-y-8 text-center lg:text-left">
                                <div className="inline-flex items-center gap-3 px-6 py-2 rounded-full glass border-white/5 text-zinc-400 text-[10px] font-black tracking-[0.4em] uppercase mx-auto lg:mx-0">
                                    <Activity className="w-4 h-4 text-white" />
                                    <span>Clinical Service Layer</span>
                                </div>
                                <h2 className="text-6xl md:text-8xl font-extrabold tracking-tighter leading-[0.9]">
                                    Connected <br /><span className="text-zinc-500 italic uppercase">Logistics</span>
                                </h2>
                                <p className="text-xl md:text-2xl text-zinc-500 leading-relaxed max-w-2xl font-medium tracking-tight mx-auto lg:mx-0">
                                    Institutional delivery systems for virtual care. Bridging the gap between the patient and the neural clinic with uncompromised operational speed.
                                </p>
                            </div>

                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 pt-4">
                                {services.map((item, i) => (
                                    <motion.div
                                        key={i}
                                        whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.02)" }}
                                        className="flex flex-col gap-6 p-10 glass rounded-[2rem] border-white/[0.03] transition-all shadow-none group"
                                    >
                                        <div className="w-14 h-14 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:border-white/30 transition-all">
                                            <item.icon className="w-6 h-6 text-white" />
                                        </div>
                                        <div>
                                            <h4 className="text-xl font-black tracking-tight uppercase italic mb-2">{item.title}</h4>
                                            <p className="text-base text-zinc-600 font-medium leading-relaxed">{item.desc}</p>
                                        </div>
                                    </motion.div>
                                ))}
                            </div>
                        </div>

                        <div className="flex-1 relative hidden lg:block">
                            <div className="aspect-square glass rounded-[3rem] p-4 border-white/5 relative flex items-center justify-center overflow-hidden bg-white/[0.01]">
                                <div className="absolute inset-x-8 inset-y-8 border-[0.5px] border-white/5 rounded-2xl" />
                                <motion.div
                                    animate={{
                                        scale: [1, 1.05, 1],
                                        opacity: [0.3, 0.6, 0.3]
                                    }}
                                    transition={{ repeat: Infinity, duration: 5 }}
                                >
                                    <Users className="w-64 h-64 text-white opacity-10" />
                                </motion.div>
                                <div className="absolute inset-0 flex items-center justify-center">
                                    <div className="w-32 h-32 rounded-full glass border-white/10 flex items-center justify-center animate-pulse">
                                        <Video className="w-12 h-12 text-white" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </motion.div>
            </div>
        </section>
    );
}