"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 SecuritySection({ lang }: { lang: Lang }) {
  const t = UI[lang].t;

  const securityFeatures = [
    {
      icon: "🔐",
      title: t.healthcareEncryptionTitle,
      description: t.healthcareEncryptionDesc,
    },
    {
      icon: "👥",
      title: t.healthcareAccessControlTitle,
      description: t.healthcareAccessControlDesc,
    },
    {
      icon: "✅",
      title: t.healthcareConsentTitle,
      description: t.healthcareConsentDesc,
    },
    {
      icon: "📱",
      title: t.healthcareChannelPrivacyTitle,
      description: t.healthcareChannelPrivacyDesc,
    },
    {
      icon: "🗂️",
      title: t.healthcareDataRightsTitle,
      description: t.healthcareDataRightsDesc,
    },
  ];

  return (
    <SectionContainer
      title={t.healthcareSecurityTitle}
      subtitle={t.healthcareSecuritySubtitle}
      background="gray"
    >
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        {securityFeatures.map((feature, index) => (
          <IconCard
            key={feature.title}
            icon={feature.icon}
            title={feature.title}
            description={feature.description}
            delay={index * 0.1}
          />
        ))}
      </div>

      {/* Medical Disclaimer */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
        className="rounded-2xl border-2 border-amber-200 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20 p-8"
      >
        <div className="flex items-start gap-4">
          <motion.span
            initial={{ scale: 0 }}
            whileInView={{ scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.3, delay: 0.2 }}
            className="text-4xl"
          >
            ⚠️
          </motion.span>
          <div>
            <h3 className="text-xl font-bold text-amber-900 dark:text-amber-200 mb-3">
              {t.healthcareMedicalDisclaimerTitle}
            </h3>
            <p className="text-amber-800 dark:text-amber-300">
              {t.healthcareMedicalDisclaimerText}
            </p>
          </div>
        </div>
      </motion.div>
    </SectionContainer>
  );
}
