"use client";

import { motion, useScroll, useTransform } from "framer-motion";
import { Pill, ShieldCheck, Zap, ArrowRight, Building2, Truck } from "lucide-react";
import { useRef } from "react";

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

    const rotateX = useTransform(scrollYProgress, [0, 1], [-10, 10]);
    const y = useTransform(scrollYProgress, [0, 1], [40, -40]);

    return (
        <section ref={containerRef} id="prescription" className="py-20 sm:py-32 lg:py-40 relative overflow-hidden bg-black">
            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex flex-col lg:flex-row items-center gap-12 sm:gap-16 lg:gap-20 xl:gap-32">
                    <motion.div
                        style={{ y }}
                        initial={{ opacity: 0, x: -30 }}
                        whileInView={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.8 }}
                        className="flex-1 space-y-10 sm:space-y-12 lg:space-y-16"
                    >
                        <div className="space-y-6">
                            <div className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-white/5 border border-white/10 text-zinc-300 text-xs font-semibold tracking-wide">
                                <Zap className="w-4 h-4 text-emerald-400" />
                                <span>Clinical Fulfillment Engine</span>
                            </div>
                            <h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.1] text-white">
                                Automated Order <br />
                                <span className="text-zinc-400">Lifecycle Management</span>
                            </h2>
                            <p className="text-lg md:text-xl text-zinc-400 leading-relaxed max-w-xl">
                                Enterprise-grade pharmaceutical orchestration with AI-powered drug interaction screening, real-time compliance monitoring, and seamless clinical workflow integration.
                            </p>
                            
                            {/* Key Metrics */}
                            <div className="grid grid-cols-3 gap-3 sm:gap-4 pt-4">
                                <div className="p-3 sm:p-4 rounded-xl bg-white/[0.03] border border-white/10">
                                    <div className="text-xl sm:text-2xl md:text-3xl font-bold text-white">99.8%</div>
                                    <div className="text-[10px] sm:text-xs text-zinc-500 mt-1">Accuracy Rate</div>
                                </div>
                                <div className="p-3 sm:p-4 rounded-xl bg-white/[0.03] border border-white/10">
                                    <div className="text-xl sm:text-2xl md:text-3xl font-bold text-white">&lt;2s</div>
                                    <div className="text-[10px] sm:text-xs text-zinc-500 mt-1">Avg Response</div>
                                </div>
                                <div className="p-3 sm:p-4 rounded-xl bg-white/[0.03] border border-white/10">
                                    <div className="text-xl sm:text-2xl md:text-3xl font-bold text-white">24/7</div>
                                    <div className="text-[10px] sm:text-xs text-zinc-500 mt-1">Monitoring</div>
                                </div>
                            </div>
                        </div>

                        <div className="space-y-4 sm:space-y-6">
                            {[
                                { 
                                    icon: Pill, 
                                    title: "Drug Interaction Screening", 
                                    desc: "Advanced AI cross-references patient medications against 500,000+ drug interaction databases in real-time.",
                                    stat: "250K+ checks/day"
                                },
                                { 
                                    icon: ShieldCheck, 
                                    title: "Regulatory Compliance", 
                                    desc: "Automated verification against FDA, DEA, and state regulations with instant flagging of non-compliant orders.",
                                    stat: "100% compliant"
                                }
                            ].map((item, i) => (
                                <motion.div
                                    key={i}
                                    initial={{ opacity: 0, x: -20 }}
                                    whileInView={{ opacity: 1, x: 0 }}
                                    transition={{ delay: i * 0.2 }}
                                    className="flex gap-4 sm:gap-6 group p-4 sm:p-6 rounded-2xl bg-white/[0.02] border border-white/5 hover:border-white/10 hover:bg-white/[0.04] transition-all"
                                >
                                    <div className="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-gradient-to-br from-white/10 to-white/5 flex items-center justify-center border border-white/10 shrink-0">
                                        <item.icon className="w-6 h-6 sm:w-7 sm:h-7 text-white" />
                                    </div>
                                    <div className="space-y-2 flex-1 min-w-0">
                                        <div className="flex items-start sm:items-center justify-between gap-2 sm:gap-4 flex-col sm:flex-row">
                                            <h4 className="text-base sm:text-lg font-bold text-white">{item.title}</h4>
                                            <span className="text-[10px] sm:text-xs font-semibold text-emerald-400 bg-emerald-400/10 px-2.5 sm:px-3 py-1 rounded-full whitespace-nowrap">
                                                {item.stat}
                                            </span>
                                        </div>
                                        <p className="text-xs sm:text-sm text-zinc-400 leading-relaxed">{item.desc}</p>
                                    </div>
                                </motion.div>
                            ))}
                        </div>
                    </motion.div>

                    <motion.div
                        style={{ rotateX }}
                        initial={{ opacity: 0, scale: 0.9 }}
                        whileInView={{ opacity: 1, scale: 1 }}
                        transition={{ duration: 1 }}
                        className="flex-1 relative w-full max-w-lg mx-auto lg:mx-0"
                    >
                        <div className="rounded-3xl p-px border border-white/10 shadow-2xl bg-gradient-to-br from-white/[0.05] to-transparent backdrop-blur-sm">
                            <div className="relative aspect-[4/5] rounded-[calc(1.5rem-1px)] overflow-hidden bg-gradient-to-br from-zinc-900 to-black p-6 sm:p-8 lg:p-10 xl:p-12 space-y-6 sm:space-y-8">
                                {/* Header with Status */}
                                <div className="relative z-10 flex items-center justify-between">
                                    <div>
                                        <h3 className="text-xs sm:text-sm font-semibold text-zinc-400">Order Processing</h3>
                                        <p className="text-xl sm:text-2xl font-bold text-white mt-1">RX-2847392</p>
                                    </div>
                                    <div className="px-2.5 sm:px-3 py-1 sm:py-1.5 bg-emerald-500/20 border border-emerald-500/30 rounded-full">
                                        <span className="text-[10px] sm:text-xs font-semibold text-emerald-400">Active</span>
                                    </div>
                                </div>

                                {/* Workflow Steps */}
                                <div className="flex justify-between items-center relative gap-2 sm:gap-3">
                                    <div className="w-12 h-12 sm:w-14 sm:h-14 rounded-xl border-white/20 border flex items-center justify-center relative shadow-lg bg-white/5 backdrop-blur-sm">
                                        <Building2 className="text-white w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7" />
                                        <div className="absolute -bottom-5 sm:-bottom-6 text-[9px] sm:text-[10px] font-semibold text-zinc-400 whitespace-nowrap">Pharmacy</div>
                                    </div>

                                    <div className="flex-1 h-px bg-white/10 relative overflow-hidden">
                                        <motion.div
                                            animate={{ x: ["-100%", "300%"] }}
                                            transition={{ repeat: Infinity, duration: 3, ease: "linear" }}
                                            className="absolute top-0 w-16 sm:w-20 h-full bg-gradient-to-r from-transparent via-emerald-400/50 to-transparent"
                                        />
                                    </div>

                                    <div className="w-12 h-12 sm:w-14 sm:h-14 rounded-xl border-white/20 border flex items-center justify-center relative shadow-lg bg-white/5 backdrop-blur-sm">
                                        <Truck className="text-white w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7" />
                                        <div className="absolute -bottom-5 sm:-bottom-6 text-[9px] sm:text-[10px] font-semibold text-zinc-400 whitespace-nowrap">Delivery</div>
                                    </div>
                                </div>

                                {/* Processing Details */}
                                <div className="space-y-3 sm:space-y-4 pt-6 sm:pt-8">
                                    {/* Patient Info Card */}
                                    <div className="p-4 sm:p-5 rounded-xl border border-white/10 space-y-2.5 sm:space-y-3 shadow-lg bg-white/[0.03] backdrop-blur-sm">
                                        <div className="flex items-center justify-between">
                                            <span className="text-[10px] sm:text-xs font-semibold text-zinc-400">Patient ID</span>
                                            <span className="text-[10px] sm:text-xs font-bold text-white">PT-8492</span>
                                        </div>
                                        <div className="flex items-center justify-between">
                                            <span className="text-[10px] sm:text-xs font-semibold text-zinc-400">Medication</span>
                                            <span className="text-[10px] sm:text-xs font-bold text-white">Lisinopril 10mg</span>
                                        </div>
                                        <div className="flex items-center justify-between">
                                            <span className="text-[10px] sm:text-xs font-semibold text-zinc-400">Quantity</span>
                                            <span className="text-[10px] sm:text-xs font-bold text-white">30 tablets</span>
                                        </div>
                                    </div>

                                    {/* Verification Status */}
                                    <motion.div className="p-5 sm:p-6 bg-gradient-to-br from-emerald-500/10 to-emerald-500/5 rounded-xl border border-emerald-500/20 space-y-3 sm:space-y-4 relative group overflow-hidden">
                                        <div className="absolute inset-0 bg-gradient-to-r from-emerald-500/0 via-emerald-500/5 to-emerald-500/0 opacity-0 group-hover:opacity-100 transition-opacity" />
                                        
                                        <div className="flex justify-between items-start relative z-10">
                                            <div className="space-y-1">
                                                <h4 className="text-sm sm:text-base font-bold text-white flex items-center gap-2">
                                                    <ShieldCheck className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-emerald-400" />
                                                    Verified & Approved
                                                </h4>
                                                <p className="text-[10px] sm:text-xs font-medium text-zinc-400">Completed at 12:44 PM EST</p>
                                            </div>
                                            <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
                                        </div>

                                        {/* Checks List */}
                                        <div className="space-y-2 relative z-10">
                                            {[
                                                "Drug interaction check",
                                                "Dosage verification",
                                                "Insurance validation"
                                            ].map((check, idx) => (
                                                <div key={idx} className="flex items-center gap-2 text-[10px] sm:text-xs text-zinc-300">
                                                    <div className="w-3.5 h-3.5 sm:w-4 sm:h-4 rounded-full bg-emerald-400/20 border border-emerald-400/40 flex items-center justify-center shrink-0">
                                                        <div className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
                                                    </div>
                                                    <span>{check}</span>
                                                </div>
                                            ))}
                                        </div>

                                        <button className="relative z-10 w-full bg-white text-black py-3 sm:py-3.5 rounded-lg font-bold text-xs sm:text-sm flex items-center justify-center gap-2 hover:bg-zinc-100 active:scale-[0.98] transition-all shadow-lg">
                                            View Full Report
                                            <ArrowRight className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
                                        </button>
                                    </motion.div>
                                </div>
                            </div>
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}