"use client";
import { motion } from "framer-motion";
import SectionContainer from "../shared/SectionContainer";
import IconCard from "../shared/IconCard";
import { UI, type Lang } from "@/lib/config";

export default function PatientDataSection({ lang }: { lang: Lang }) {
  const t = UI[lang].t;

  const tools = [
    {
      icon: "📋",
      title: t.healthcareSecureIntakeTitle,
      desc: t.healthcareSecureIntakeDesc,
    },
    {
      icon: "📎",
      title: t.healthcareFileUploadTitle,
      desc: t.healthcareFileUploadDesc,
    },
    {
      icon: "👨‍⚕️",
      title: t.healthcareDoctorDashTitle,
      desc: t.healthcareDoctorDashDesc,
    },
  ];

  const privacyMicros = [
    t.healthcarePrivacyMicro1,
    t.healthcarePrivacyMicro2,
    t.healthcarePrivacyMicro3,
  ];

  return (
    <SectionContainer
      title={t.healthcarePatientDataTitle}
      subtitle={t.healthcarePatientDataSubtitle}
      background="gray"
    >
      <div className="grid md:grid-cols-3 gap-6 mb-8">
        {tools.map((tool, index) => (
          <IconCard
            key={tool.title}
            icon={tool.icon}
            title={tool.title}
            description={tool.desc}
            delay={index * 0.1}
          />
        ))}
      </div>

      {/* Privacy Microcopy */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
        className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-8"
      >
        <h3 className="text-2xl font-bold text-brand-ink dark:text-white mb-6">
          {t.healthcarePrivacyMicroTitle}
        </h3>
        <div className="grid md:grid-cols-3 gap-4">
          {privacyMicros.map((micro, index) => (
            <motion.div
              key={micro}
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.3, delay: index * 0.1 }}
              className="bg-slate-50 dark:bg-slate-700 rounded-lg p-4 text-sm text-slate-600 dark:text-slate-300 italic"
            >
              &ldquo;{micro}&rdquo;
            </motion.div>
          ))}
        </div>
      </motion.div>
    </SectionContainer>
  );
}
