"use client";

import { motion } from "framer-motion";
import { Mic, CheckCircle2 } from "lucide-react";

export default function AIVoiceSoap() {
    return (
        <section id="voice-soap" className="py-24 relative overflow-hidden">
            <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-primary/10 border border-primary/20 text-primary text-sm font-semibold">
                            <Mic className="w-4 h-4" />
                            <span>AI Voice Intelligence</span>
                        </div>

                        <h2 className="text-4xl md:text-5xl font-bold leading-tight">
                            From <span className="text-gradient">Voice</span> to Professional <span className="text-gradient">SOAP</span> Notes Instantly
                        </h2>

                        <p className="text-lg text-foreground/60 leading-relaxed max-w-xl">
                            Focus on your patients, not your paperwork. Our advanced AI listens to your clinical conversations and generates structured, accurate SOAP notes in real-time.
                        </p>

                        <div className="space-y-4">
                            {[
                                "Real-time clinical voice transcription",
                                "Automated SOAP structure generation",
                                "Medical terminology specialization",
                                "HIPAA-compliant data processing"
                            ].map((item, i) => (
                                <div key={i} className="flex items-center gap-3">
                                    <CheckCircle2 className="w-5 h-5 text-accent" />
                                    <span className="text-foreground/80">{item}</span>
                                </div>
                            ))}
                        </div>
                    </motion.div>

                    <motion.div
                        initial={{ opacity: 0, scale: 0.8 }}
                        whileInView={{ opacity: 1, scale: 1 }}
                        transition={{ duration: 0.8 }}
                        className="flex-1 relative"
                    >
                        <div className="glass aspect-square rounded-3xl p-8 flex flex-col justify-center items-center relative group">
                            <div className="absolute inset-0 bg-primary/5 rounded-3xl blur-3xl group-hover:bg-primary/10 transition-colors" />

                            <div className="relative z-10 space-y-8 w-full">
                                <div className="flex justify-center">
                                    <div className="w-24 h-24 rounded-full bg-primary/20 flex items-center justify-center animate-pulse-slow">
                                        <Mic className="w-12 h-12 text-primary" />
                                    </div>
                                </div>

                                <div className="flex justify-center gap-1">
                                    {Array.from({ length: 20 }).map((_, i) => (
                                        <motion.div
                                            key={i}
                                            animate={{ height: [10, 20 + (i % 5) * 10, 10] }}
                                            transition={{
                                                repeat: Infinity,
                                                duration: 1 + (i % 3) * 0.5,
                                                ease: "easeInOut"
                                            }}
                                            className="w-1 bg-gradient-to-t from-primary to-secondary rounded-full"
                                        />
                                    ))}
                                </div>

                                <div className="glass-dense rounded-xl p-4 space-y-2 border border-white/10">
                                    <div className="h-2 w-3/4 bg-white/10 rounded-full animate-pulse" />
                                    <div className="h-2 w-full bg-white/10 rounded-full animate-pulse" />
                                    <div className="h-2 w-1/2 bg-white/10 rounded-full animate-pulse" />
                                </div>
                            </div>
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}