"use client";

import { motion } from "framer-motion";
import { Pill, Zap, Users, ClipboardCheck } from "lucide-react";

export default function AIPrescription() {
    return (
        <section id="prescription" className="py-24 relative">
            <div className="container mx-auto px-6">
                <div className="flex flex-col md:flex-row items-center gap-16">
                    <motion.div
                        initial={{ opacity: 0, x: -50 }}
                        whileInView={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.8 }}
                        className="flex-1 space-y-8"
                    >
                        <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">
                            <Pill className="w-4 h-4" />
                            <span>Smart Fulfillment</span>
                        </div>

                        <h2 className="text-4xl md:text-5xl font-bold leading-tight">
                            End-to-End <span className="text-gradient">AI Prescription</span> Ecosystem
                        </h2>

                        <p className="text-lg text-foreground/60 leading-relaxed max-w-xl">
                            From the doctor&apos;s desk to the patient&apos;s door. Skyheal automates the entire prescription lifecycle, ensuring safety, compliance, and convenience.
                        </p>

                        <div className="space-y-6">
                            {[
                                { icon: Zap, text: "Instant Pharmacy Integration", label: "Smart Link" },
                                { icon: Users, text: "Patient Medication Management", label: "Care Portal" },
                                { icon: ClipboardCheck, text: "Automatic Drug Interaction Checks", label: "Safety First" }
                            ].map((item, i) => (
                                <div key={i} className="flex items-center gap-6 p-4 rounded-2xl bg-white/5 hover:bg-white/10 transition-colors border border-white/5">
                                    <div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
                                        <item.icon className="w-6 h-6 text-primary" />
                                    </div>
                                    <div>
                                        <span className="text-xs font-bold uppercase tracking-widest text-primary/60">{item.label}</span>
                                        <p className="text-base font-medium text-foreground/90">{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="glass rounded-[2.5rem] p-1 shadow-2xl overflow-hidden">
                            <div className="bg-background/40 p-8 rounded-[2.25rem] space-y-8">
                                <div className="flex items-center justify-between border-b border-white/5 pb-4">
                                    <div className="flex items-center gap-3">
                                        <div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center">
                                            <Pill className="w-5 h-5 text-accent" />
                                        </div>
                                        <div>
                                            <h4 className="font-bold text-sm">Prescription Portal</h4>
                                            <p className="text-xs text-foreground/50">Active Session</p>
                                        </div>
                                    </div>
                                    <div className="px-3 py-1 rounded-full bg-accent/10 text-accent text-[10px] font-bold uppercase">Verified</div>
                                </div>

                                <div className="space-y-4">
                                    {[1, 2].map((_, i) => (
                                        <div key={i} className="p-4 rounded-xl bg-white/5 border border-white/5 space-y-3">
                                            <div className="flex justify-between items-start">
                                                <div className="h-4 w-1/3 bg-white/10 rounded-md animate-pulse" />
                                                <div className="h-4 w-20 bg-primary/20 rounded-md" />
                                            </div>
                                            <div className="h-2 w-full bg-white/5 rounded-full" />
                                            <div className="h-2 w-2/3 bg-white/5 rounded-full" />
                                        </div>
                                    ))}
                                </div>

                                <button className="w-full bg-accent hover:bg-accent/80 text-white py-4 rounded-xl font-bold transition-all transform hover:translate-y-[-2px] shadow-lg shadow-accent/20">
                                    Authorize Digital Delivery
                                </button>
                            </div>
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}