Skyheal/app/components/sections/AppEcosystem.tsx

"use client";

import { motion, useScroll, useTransform, type Variants } from "framer-motion";
import { Mic, CheckCircle2, ShieldCheck, Zap, Activity } from "lucide-react";
import { useRef } from "react";

export default function AIVoiceSoap() {
  const containerRef = useRef<HTMLDivElement>(null);

  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"],
  });

  const y = useTransform(scrollYProgress, [0, 0.4], [50, 0]);
  const opacity = useTransform(scrollYProgress, [0, 0.25], [0, 1]);

  const cardVariants: Variants = {
    hidden: { opacity: 0, y: 30 },
    visible: (custom: number) => ({
      opacity: 1,
      y: 0,
      transition: {
        delay: 0.12 + custom * 0.14,
        duration: 0.65,
        ease: "easeOut",
      },
    }),
  };

  const features = [
    {
      icon: Mic,
      title: "Natural Voice Capture",
      desc: "Speak freely — AI transcribes SOAP notes in real time with clinical accuracy.",
      color: "text-emerald-400",
      bg: "from-emerald-600/15 to-emerald-800/5",
    },
    {
      icon: Activity,
      title: "Context-Aware Intelligence",
      desc: "Understands medical terminology, patient history context & follow-up questions.",
      color: "text-blue-400",
      bg: "from-blue-600/15 to-blue-800/5",
    },
    {
      icon: Zap,
      title: "Instant Structuring",
      desc: "Converts conversation to structured Subjective, Objective, Assessment, Plan format.",
      color: "text-indigo-400",
      bg: "from-indigo-600/15 to-indigo-800/5",
    },
    {
      icon: ShieldCheck,
      title: "Secure & Compliant",
      desc: "End-to-end encryption, HIPAA/GDPR compliant voice processing & storage.",
      color: "text-cyan-400",
      bg: "from-cyan-600/15 to-cyan-800/5",
    },
  ];

  return (
    <section
      ref={containerRef}
      className="relative py-20 md:py-28 lg:py-36 overflow-hidden"
    >
      {/* Subtle ambient glows */}
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute top-20 left-10 w-96 h-96 bg-emerald-600/5 rounded-full blur-3xl" />
        <div className="absolute bottom-10 right-10 w-80 h-80 bg-blue-600/5 rounded-full blur-3xl" />
      </div>

      <div className="container relative z-10 mx-auto px-5 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-12 xl:gap-16 items-center">
          {/* Left – Text + Trust */}
          <motion.div
            style={{ y, opacity }}
            className="space-y-10 lg:space-y-12 order-2 lg:order-1"
          >
            <div className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-slate-800/40 backdrop-blur-lg border border-slate-700/50">
              <Mic className="w-5 h-5 text-emerald-400" />
              <span className="text-xs font-semibold tracking-wider uppercase text-slate-300">
                AI-Powered Voice Notes
              </span>
            </div>

            <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-white tracking-tight">
              Document Care
              <br />
              <span className="bg-gradient-to-r from-emerald-400 via-blue-400 to-indigo-400 bg-clip-text text-transparent">
                With Your Voice
              </span>
            </h2>

            <p className="text-lg md:text-xl text-slate-300 leading-relaxed max-w-2xl">
              Speak naturally during consultations. Our AI instantly transcribes, structures, and organizes SOAP notes — saving hours while maintaining clinical precision and full compliance.
            </p>

            {/* Metrics */}
            <div className="grid grid-cols-3 gap-6 md:gap-10">
              {[
                { value: "98.7%", label: "Transcription Accuracy", icon: CheckCircle2 },
                { value: "<1s", label: "Real-Time Processing", icon: Zap },
                { value: "HIPAA", label: "Compliant", icon: ShieldCheck },
              ].map((item, i) => (
                <div key={i} className="text-center space-y-2">
                  <item.icon className="w-6 h-6 mx-auto text-emerald-400" />
                  <p className="text-2xl md:text-3xl font-bold text-white">{item.value}</p>
                  <p className="text-xs uppercase tracking-wider text-slate-500 font-medium">
                    {item.label}
                  </p>
                </div>
              ))}
            </div>

            {/* Badges */}
            <div className="flex flex-wrap gap-3">
              {["HIPAA Compliant", "GDPR Ready", "Encrypted Voice", "Audit Logs"].map((badge, i) => (
                <div
                  key={i}
                  className="flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800/30 border border-slate-700/50 backdrop-blur-sm"
                >
                  <CheckCircle2 className="w-4 h-4 text-emerald-400" />
                  <span className="text-sm text-slate-300 font-medium">{badge}</span>
                </div>
              ))}
            </div>
          </motion.div>

          {/* Right – Feature Cards */}
          <div className="grid sm:grid-cols-2 gap-5 md:gap-6 order-1 lg:order-2">
            {features.map((feature, i) => (
              <motion.div
                key={i}
                custom={i}
                variants={cardVariants}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true, margin: "-100px" }}
                whileHover={{ y: -6, scale: 1.03, transition: { duration: 0.3 } }}
                className="group relative p-6 md:p-8 rounded-2xl bg-gradient-to-br from-slate-900/50 to-slate-950/50 border border-slate-700/50 backdrop-blur-lg shadow-xl hover:border-slate-600/70 transition-all duration-300 flex flex-col"
              >
                <div className="flex items-start gap-4">
                  <div
                    className={`p-3.5 rounded-xl bg-gradient-to-br ${feature.bg} border border-slate-600/50 group-hover:border-slate-500/70 transition-colors`}
                  >
                    <feature.icon className={`w-7 h-7 ${feature.color}`} />
                  </div>

                  <div className="flex-1 space-y-3">
                    <h3 className="text-lg font-semibold text-white group-hover:text-slate-100 transition-colors">
                      {feature.title}
                    </h3>
                    {/* Uncomment if you want descriptions back */}
                    {/* <p className="text-sm text-slate-400 leading-relaxed">{feature.desc}</p> */}
                  </div>
                </div>

                <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-emerald-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}