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

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

  const capabilities = [
    { icon: "💬", text: t.healthcareWACapability1 },
    { icon: "📅", text: t.healthcareWACapability2 },
    { icon: "🔄", text: t.healthcareWACapability3 },
    { icon: "📋", text: t.healthcareWACapability4 },
  ];

  const conversation = [
    {
      isPatient: true,
      text: t.healthcareWAConversationPatient1,
      time: "9:41 AM",
    },
    { isPatient: false, text: t.healthcareWAConversationBot1, time: "9:41 AM" },
    {
      isPatient: true,
      text: t.healthcareWAConversationPatient2,
      time: "9:42 AM",
    },
    { isPatient: false, text: t.healthcareWAConversationBot2, time: "9:42 AM" },
    {
      isPatient: true,
      text: t.healthcareWAConversationPatient3,
      time: "9:43 AM",
    },
    { isPatient: false, text: t.healthcareWAConversationBot3, time: "9:43 AM" },
  ];

  const upsellExamples = [
    { icon: "🦷", text: t.healthcareWAUpsellExample1 },
    { icon: "💪", text: t.healthcareWAUpsellExample2 },
    { icon: "⭐", text: t.healthcareWAUpsellExample3 },
  ];

  return (
    <section className="py-24 px-6 bg-white dark:bg-slate-950">
      <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">03</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 ? "وكيل واتساب" : "WhatsApp Agent"}
            </span>
          </div>
          <h2 className="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-4">
            {t.healthcareWhatsAppAgentTitle}
          </h2>
          <p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl">
            {t.healthcareWhatsAppAgentSubtitle}
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-12 items-start">
          {/* Phone mockup */}
          <div className={`${isRTL ? "lg:order-2" : ""}`}>
            <div className="bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl p-4 max-w-sm mx-auto">
              {/* Phone header */}
              <div className="bg-brand-green rounded-t-2xl px-4 py-3">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
                    <span className="text-xl">🏥</span>
                  </div>
                  <div className="flex-1">
                    <div className="text-white font-semibold text-sm">
                      Al Noor Clinic
                    </div>
                    <div className="text-white/70 text-xs">Online</div>
                  </div>
                </div>
              </div>

              {/* Chat area */}
              <div className="bg-[#ECE5DD] dark:bg-slate-800 p-4 space-y-3 min-h-[400px] rounded-b-2xl">
                <div className="flex justify-center">
                  <span className="bg-white/80 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-xs px-3 py-1 rounded-full">
                    Today
                  </span>
                </div>
                {conversation.map((msg, index) => (
                  <div
                    key={index}
                    className={`flex ${msg.isPatient ? "justify-end" : "justify-start"}`}
                  >
                    <div
                      className={`max-w-[80%] px-3 py-2 rounded-xl text-sm ${
                        msg.isPatient
                          ? "bg-[#DCF8C6] dark:bg-green-900/50 text-slate-800 dark:text-slate-200"
                          : "bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-200"
                      }`}
                    >
                      <p className="leading-relaxed">{msg.text}</p>
                      <div
                        className={`text-[10px] mt-1 text-slate-500 dark:text-slate-400 flex items-center gap-1 justify-end`}
                      >
                        {msg.time}
                        {msg.isPatient && (
                          <span className="text-blue-500">✓✓</span>
                        )}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Features */}
          <div className={`space-y-6 ${isRTL ? "lg:order-1" : ""}`}>
            {/* Capabilities */}
            <div className="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6">
              <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4">
                {t.healthcareWACapabilities}
              </h3>
              <div className="grid grid-cols-2 gap-3">
                {capabilities.map((cap) => (
                  <div
                    key={cap.text}
                    className="flex items-start gap-2 p-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700"
                  >
                    <span className="text-xl flex-shrink-0">{cap.icon}</span>
                    <span className="text-sm text-slate-700 dark:text-slate-300">
                      {cap.text}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* Security & Language */}
            <div className="grid grid-cols-2 gap-4">
              <div className="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5">
                <div className="flex items-center gap-2 mb-2">
                  <span className="text-xl">🔒</span>
                  <h4 className="font-bold text-slate-900 dark:text-white text-sm">
                    {t.healthcareWASecurity}
                  </h4>
                </div>
                <p className="text-sm text-slate-600 dark:text-slate-400">
                  {t.healthcareWASecurityDesc}
                </p>
              </div>

              <div className="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5">
                <div className="flex items-center gap-2 mb-2">
                  <span className="text-xl">🌍</span>
                  <h4 className="font-bold text-slate-900 dark:text-white text-sm">
                    {t.healthcareWALanguages}
                  </h4>
                </div>
                <p className="text-sm text-slate-600 dark:text-slate-400">
                  {t.healthcareWALanguagesDesc}
                </p>
              </div>
            </div>

            {/* Upsell opportunities */}
            <div className="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6">
              <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-4">
                {t.healthcareWAUpsellTitle}
              </h3>
              <div className="space-y-3">
                {upsellExamples.map((example) => (
                  <div
                    key={example.text}
                    className="flex items-center gap-3 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-3"
                  >
                    <span className="text-xl">{example.icon}</span>
                    <p className="text-sm text-slate-700 dark:text-slate-300">
                      {example.text}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
