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

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

  const capabilities = [
    t.healthcareVoiceCapability1,
    t.healthcareVoiceCapability2,
    t.healthcareVoiceCapability3,
    t.healthcareVoiceCapability4,
  ];

  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">04</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 ? "الوكيل الصوتي" : "Voice Agent"}
            </span>
          </div>
          <h2 className="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-4">
            {t.healthcareVoiceAgentTitle}
          </h2>
          <p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl">
            {t.healthcareVoiceAgentSubtitle}
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-8">
          {/* Capabilities */}
          <div className="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 p-8">
            <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-6">
              {t.healthcareVoiceCapabilities}
            </h3>
            <ul className="space-y-4">
              {capabilities.map((cap) => (
                <li
                  key={cap}
                  className={`flex items-start gap-3 ${isRTL ? "flex-row-reverse text-right" : ""}`}
                >
                  <span className="text-brand-green font-bold">✓</span>
                  <span className="text-slate-700 dark:text-slate-300">
                    {cap}
                  </span>
                </li>
              ))}
            </ul>
          </div>

          {/* Sample Scripts */}
          <div className="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 p-8">
            <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-6">
              {t.healthcareVoiceGreetingTitle}
            </h3>
            <div className="space-y-4">
              <div className="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-5">
                <div className="text-sm font-semibold text-brand-green mb-2">
                  العربية
                </div>
                <p className="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
                  {t.healthcareVoiceGreetingAr}
                </p>
              </div>
              <div className="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-5">
                <div className="text-sm font-semibold text-brand-green mb-2">
                  English
                </div>
                <p className="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
                  {t.healthcareVoiceGreetingEn}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}