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

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

  const coreIntegrations = [
    t.healthcareIntegrationCalendars,
    t.healthcareIntegrationPayments,
    t.healthcareIntegrationMessaging,
    t.healthcareIntegrationAccounting,
  ];

  const optionalIntegrations = [
    t.healthcareIntegrationLabs,
    t.healthcareIntegrationPharmacy,
    t.healthcareIntegrationTelehealth,
  ];

  return (
    <section className="py-16 bg-white dark:bg-slate-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-12"
        >
          <h2 className="text-3xl md:text-4xl font-extrabold text-brand-ink dark:text-white mb-4">
            {t.healthcareIntegrationsTitle}
          </h2>
          <p className="text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
            {t.healthcareIntegrationsSubtitle}
          </p>
        </motion.div>

        <div className="grid lg:grid-cols-2 gap-8">
          {/* Core Integrations */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 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.healthcareIntegrationCore}
            </h3>
            <ul className="space-y-3">
              {coreIntegrations.map((integration, index) => (
                <motion.li
                  key={integration}
                  initial={{ opacity: 0, x: -10 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.3, delay: index * 0.1 }}
                  className="flex items-start gap-3"
                >
                  <span className="text-brand-green text-xl mt-1">✓</span>
                  <span className="text-slate-700 dark:text-slate-300">
                    {integration}
                  </span>
                </motion.li>
              ))}
            </ul>
          </motion.div>

          {/* Optional Integrations */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-slate-800 dark:to-slate-700 p-8"
          >
            <h3 className="text-2xl font-bold text-brand-ink dark:text-white mb-6">
              {t.healthcareIntegrationOptional}
            </h3>
            <ul className="space-y-3">
              {optionalIntegrations.map((integration, index) => (
                <motion.li
                  key={integration}
                  initial={{ opacity: 0, x: 10 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.3, delay: index * 0.1 }}
                  className="flex items-start gap-3"
                >
                  <span className="text-blue-600 dark:text-blue-400 text-xl mt-1">
                    +
                  </span>
                  <span className="text-slate-700 dark:text-slate-300">
                    {integration}
                  </span>
                </motion.li>
              ))}
            </ul>
          </motion.div>
        </div>
      </div>
    </section>
  );
}
