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

const partners = [
  { name: "Al Noor Hospital", icon: "🏥" },
  { name: "Royal Medical", icon: "👑" },
  { name: "Care Plus Clinic", icon: "➕" },
  { name: "MedFirst Center", icon: "🩺" },
  { name: "Health Hub", icon: "💚" },
  { name: "Wellness Medical", icon: "🌿" },
];

const certifications = [
  { name: "Healthcare", desc: "Ready", icon: "🔒" },
  { name: "Enterprise", desc: "Security", icon: "🛡️" },
  { name: "Data", desc: "Encrypted", icon: "✅" },
  { name: "Privacy", desc: "Compliant", icon: "🇪🇺" },
];

const testimonials = [
  {
    quote:
      "Mawidi reduced our no-show rate by 40% in the first month. The WhatsApp integration is seamless.",
    author: "Dr. Ahmed Al-Hassan",
    role: "Medical Director",
    clinic: "Al Noor Medical Center",
  },
  {
    quote:
      "Our patients love being able to book appointments via WhatsApp. It feels natural and easy.",
    author: "Sarah Al-Mahmoud",
    role: "Operations Manager",
    clinic: "Care Plus Clinic",
  },
  {
    quote:
      "The voice agent handles 60% of our calls automatically. Our front desk can finally focus on patients.",
    author: "Dr. Fatima Al-Rashid",
    role: "Clinic Owner",
    clinic: "Wellness Medical Group",
  },
];

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

  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">05</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 ? "الثقة" : "Trust"}
            </span>
          </div>
          <h2 className="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-4">
            {isRTL
              ? "يثق بنا مقدمو الرعاية الصحية الرائدون"
              : "Trusted by Leading Healthcare Providers"}
          </h2>
        </div>

        {/* Certifications */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-slate-200 dark:bg-slate-800 mb-12">
          {certifications.map((cert) => (
            <div
              key={cert.name}
              className="group bg-white dark:bg-slate-950 p-6 hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors text-center"
            >
              <span className="text-3xl mb-3 block">{cert.icon}</span>
              <div className="font-bold text-slate-900 dark:text-white">
                {cert.name}
              </div>
              <div className="text-sm text-slate-500 dark:text-slate-400">
                {cert.desc}
              </div>
              <div className="w-0 group-hover:w-8 h-0.5 bg-brand-green mt-4 mx-auto transition-all duration-300" />
            </div>
          ))}
        </div>

        {/* Testimonials */}
        <div className="grid md:grid-cols-3 gap-px bg-slate-200 dark:bg-slate-800 mb-12">
          {testimonials.map((testimonial) => (
            <div
              key={testimonial.author}
              className="group bg-white dark:bg-slate-950 p-6 hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors"
            >
              <p className="text-slate-700 dark:text-slate-300 mb-6 leading-relaxed text-sm min-h-[80px]">
                &ldquo;{testimonial.quote}&rdquo;
              </p>
              <div className="pt-4 border-t border-slate-200 dark:border-slate-800">
                <div className="font-semibold text-slate-900 dark:text-white text-sm">
                  {testimonial.author}
                </div>
                <div className="text-xs text-slate-500 dark:text-slate-500 mt-1">
                  {testimonial.role}
                </div>
                <div className="text-xs text-brand-green mt-1">
                  {testimonial.clinic}
                </div>
              </div>
              <div className="w-0 group-hover:w-8 h-0.5 bg-brand-green mt-4 transition-all duration-300" />
            </div>
          ))}
        </div>

        {/* Stats */}
        <div className="grid md:grid-cols-4 gap-px bg-slate-200 dark:bg-slate-800">
          {[
            { value: "17+", label: isRTL ? "قطاع" : "Industries" },
            { value: "1M+", label: isRTL ? "موعد" : "Appointments" },
            { value: "99.9%", label: isRTL ? "وقت التشغيل" : "Uptime" },
            { value: "4.9/5", label: isRTL ? "التقييم" : "Rating" },
          ].map((stat) => (
            <div
              key={stat.label}
              className="bg-white dark:bg-slate-950 p-6 text-center"
            >
              <div className="text-3xl font-bold text-brand-green mb-1">
                {stat.value}
              </div>
              <div className="text-sm text-slate-600 dark:text-slate-400">
                {stat.label}
              </div>
            </div>
          ))}
        </div>

        {/* ROI Calculator CTA */}
        <div className="mt-12 text-center">
          <Link
            href={`/${lang}/tools/roi-calculator`}
            className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-green px-8 py-4 text-lg font-semibold text-white transition-colors hover:bg-brand-greenHover"
          >
            {isRTL
              ? "احسب كم توفر عيادتك مع موعدي"
              : "Calculate How Much Your Clinic Could Save"}
          </Link>
        </div>
      </div>
    </section>
  );
}
