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

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

  const reminders = [
    {
      icon: "📅",
      title: t.healthcareReminder48h,
      desc: t.healthcareReminder48hDesc,
    },
    {
      icon: "⏰",
      title: t.healthcareReminder24h,
      desc: t.healthcareReminder24hDesc,
    },
    {
      icon: "⏱️",
      title: t.healthcareReminder2h,
      desc: t.healthcareReminder2hDesc,
    },
  ];

  const postVisitItems = [
    { icon: "💊", text: t.healthcarePostVisitCare },
    { icon: "⭐", text: t.healthcarePostVisitReview },
    { icon: "📋", text: t.healthcarePostVisitWaitlist },
  ];

  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.healthcareRemindersTitle}
          </h2>
          <p className="text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
            {t.healthcareRemindersSubtitle}
          </p>
        </motion.div>

        <div className="grid md:grid-cols-3 gap-6 mb-12">
          {reminders.map((reminder, index) => (
            <IconCard
              key={reminder.title}
              icon={reminder.icon}
              title={reminder.title}
              description={reminder.desc}
              delay={index * 0.1}
            />
          ))}
        </div>

        {/* Post-Visit Follow-up */}
        <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-gradient-to-br from-purple-50 to-pink-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.healthcarePostVisitTitle}
          </h3>
          <div className="grid md:grid-cols-3 gap-6">
            {postVisitItems.map((item, index) => (
              <motion.div
                key={item.text}
                initial={{ opacity: 0, scale: 0.95 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.3, delay: index * 0.1 }}
                className="flex items-start gap-3 bg-white dark:bg-slate-800 rounded-xl p-4 hover:shadow-md transition-shadow"
              >
                <span className="text-2xl">{item.icon}</span>
                <span className="text-slate-700 dark:text-slate-300">
                  {item.text}
                </span>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
}
