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

export default function BookingMethodsSection({ lang }: { lang: Lang }) {
  const t = UI[lang].t;
  const isRTL = lang === "ar";

  const methods = [
    {
      num: "01",
      icon: "💬",
      title: t.healthcareBookingWhatsApp,
      description: t.healthcareBookingWhatsAppFlow,
    },
    {
      num: "02",
      icon: "🌐",
      title: t.healthcareBookingWebsite,
      description: t.healthcareBookingWebsiteFlow,
    },
    {
      num: "03",
      icon: "🎙️",
      title: t.healthcareBookingVoice,
      description: t.healthcareBookingVoiceFlow,
    },
    {
      num: "04",
      icon: "🖥️",
      title: t.healthcareBookingDesk,
      description: t.healthcareBookingDeskFlow,
    },
  ];

  return (
    <section className="py-24 px-6 bg-slate-50 dark:bg-slate-900">
      <div className="max-w-7xl mx-auto">
        <div className={`mb-16 ${isRTL ? "text-right" : ""}`}>
          <div
            className={`flex items-center gap-4 mb-6 ${isRTL ? "flex-row-reverse" : ""}`}
          >
            <span className="text-brand-green font-mono text-sm">02</span>
            <div className="w-8 h-px bg-brand-green" />
            <span className="text-slate-500 dark:text-slate-400 text-sm uppercase tracking-widest">
              {isRTL ? "طرق الحجز" : "Booking Methods"}
            </span>
          </div>
          <h2 className="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-4">
            {t.healthcareBookingMethodsTitle}
          </h2>
          <p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl">
            {t.healthcareBookingMethodsSubtitle}
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200 dark:bg-slate-800">
          {methods.map((method) => (
            <div
              key={method.title}
              className="group bg-white dark:bg-slate-950 p-8 hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors"
            >
              <span className="text-brand-green font-mono text-sm">
                {method.num}
              </span>
              <div className="text-4xl mt-4 mb-4">{method.icon}</div>
              <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2 group-hover:text-brand-green transition-colors">
                {method.title}
              </h3>
              <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
                {method.description}
              </p>
              <div className="w-0 group-hover:w-12 h-0.5 bg-brand-green mt-6 transition-all duration-300" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
