"use client";

import { motion } from "framer-motion";
import { Brain, Activity, Search, ShieldCheck } from "lucide-react";

const features = [
    {
        title: "Precision Analysis",
        description: "Deep learning models trained on millions of clinical cases.",
        icon: Search
    },
    {
        title: "Real-time Insight",
        description: "Instantaneous diagnostic suggestions based on symptoms.",
        icon: Activity
    },
    {
        title: "Validated Models",
        description: "Clinically validated AI ensuring high accuracy rates.",
        icon: ShieldCheck
    }
];

export default function AIDiagnosis() {
    return (
        <section id="diagnosis" className="py-24 bg-primary/5 relative">
            <div className="container mx-auto px-6">
                <div className="flex flex-col md:flex-row-reverse 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-secondary/10 border border-secondary/20 text-secondary text-sm font-semibold">
                            <Brain className="w-4 h-4" />
                            <span>Advanced Analytics</span>
                        </div>

                        <h2 className="text-4xl md:text-5xl font-bold leading-tight">
                            AI-Powered <span className="text-gradient">Diagnosis</span> with Unmatched Precision
                        </h2>

                        <p className="text-lg text-foreground/60 leading-relaxed max-w-xl">
                            Elevate your diagnostic accuracy with Skyheal&apos;s clinical brain. Our AI analyzes patient data, medical history, and current symptoms to provide actionable insights.
                        </p>

                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            {features.map((f, i) => (
                                <div key={i} className="glass p-6 rounded-2xl group hover:border-primary/50 transition-colors">
                                    <f.icon className="w-8 h-8 text-primary mb-4 group-hover:scale-110 transition-transform" />
                                    <h3 className="font-bold text-lg mb-2">{f.title}</h3>
                                    <p className="text-sm text-foreground/60">{f.description}</p>
                                </div>
                            ))}
                        </div>
                    </motion.div>

                    <motion.div
                        initial={{ opacity: 0, scale: 0.8 }}
                        whileInView={{ opacity: 1, scale: 1 }}
                        transition={{ duration: 0.8 }}
                        className="flex-1"
                    >
                        <div className="relative group">
                            <div className="absolute inset-0 bg-secondary/10 rounded-full blur-[100px] animate-pulse-slow" />
                            <div className="relative glass aspect-square rounded-[3rem] overflow-hidden flex items-center justify-center p-12 border-white/5">
                                <div className="absolute inset-0 opacity-20 pointer-events-none">
                                    <div className="h-full w-full bg-[radial-gradient(#3b82f6_1px,transparent_1px)] [background-size:20px_20px]" />
                                </div>
                                <motion.div
                                    animate={{
                                        scale: [1, 1.05, 1],
                                        rotate: [0, 5, -5, 0]
                                    }}
                                    transition={{ repeat: Infinity, duration: 8 }}
                                >
                                    <Brain className="w-48 h-48 text-primary drop-shadow-[0_0_80px_rgba(59,130,246,0.5)]" />
                                </motion.div>

                                {/* Orbital Elements */}
                                {[...Array(3)].map((_, i) => (
                                    <motion.div
                                        key={i}
                                        animate={{ rotate: 360 }}
                                        transition={{ repeat: Infinity, duration: 10 + i * 5, ease: "linear" }}
                                        className="absolute border border-white/5 rounded-full"
                                        style={{
                                            width: `${200 + i * 80}px`,
                                            height: `${200 + i * 80}px`
                                        }}
                                    />
                                ))}
                            </div>
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}