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

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

  return (
    <section className="relative min-h-[90vh] flex items-center overflow-hidden">
      {/* Atmospheric Background */}
      <div className="absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-slate-100 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950" />
      <div
        className="absolute inset-0 opacity-[0.03]"
        style={{
          backgroundImage:
            "linear-gradient(#0F9972 1px, transparent 1px), linear-gradient(90deg, #0F9972 1px, transparent 1px)",
          backgroundSize: "60px 60px",
        }}
      />

      <div className="relative z-10 max-w-7xl mx-auto px-6 py-24 w-full">
        <div className="grid lg:grid-cols-[1.3fr_1fr] gap-16 items-center">
          {/* Left Content */}
          <div className={isRTL ? "text-right lg:order-2" : ""}>
            <div
              className={`inline-flex items-center gap-3 mb-8 ${isRTL ? "flex-row-reverse" : ""}`}
            >
              <span className="text-brand-green font-mono text-sm tracking-wider">
                01
              </span>
              <div className="w-12 h-px bg-brand-green" />
              <span className="text-slate-500 dark:text-slate-400 text-sm uppercase tracking-widest">
                {t.healthcareTitle}
              </span>
            </div>

            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white leading-[1.1] mb-8">
              {isRTL ? (
                <>
                  أتمتة ذكية
                  <br />
                  <span className="text-brand-green">للرعاية الصحية</span>
                </>
              ) : (
                <>
                  Smart Healthcare
                  <br />
                  <span className="text-brand-green">Automation</span>
                </>
              )}
            </h1>

            <p className="text-xl text-slate-600 dark:text-slate-400 leading-relaxed mb-10 max-w-xl">
              {t.healthcareHeroSubline}
            </p>

            <div
              className={`flex flex-wrap gap-4 ${isRTL ? "flex-row-reverse" : ""}`}
            >
              <Link
                href={`/${lang}/signup`}
                className="group relative px-8 py-4 bg-brand-green text-white font-semibold overflow-hidden"
              >
                <span className="relative z-10 flex items-center gap-2">
                  {t.healthcareStartFree}
                  <span className="transition-transform group-hover:translate-x-1">
                    {isRTL ? "←" : "→"}
                  </span>
                </span>
                <div className="absolute inset-0 bg-[#0D8761] translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
              </Link>
              <Link
                href={`/${lang}/demo`}
                className="group px-8 py-4 border-2 border-slate-900 dark:border-white text-slate-900 dark:text-white font-semibold hover:bg-slate-900 hover:text-white dark:hover:bg-white dark:hover:text-slate-900 transition-colors"
              >
                {t.healthcareBookDemo}
              </Link>
            </div>

            {/* Trust badges */}
            <div
              className={`flex flex-wrap items-center gap-6 mt-10 text-sm ${isRTL ? "flex-row-reverse" : ""}`}
            >
              {[
                { icon: "🔒", text: "HIPAA Compliant" },
                { icon: "🛡️", text: "SOC 2 Type II" },
                { icon: "🔐", text: "End-to-End Encrypted" },
              ].map((item, idx) => (
                <span
                  key={idx}
                  className={`flex items-center gap-2 text-slate-500 dark:text-slate-400 ${isRTL ? "flex-row-reverse" : ""}`}
                >
                  <span className="text-base">{item.icon}</span>
                  {item.text}
                </span>
              ))}
            </div>
          </div>

          {/* Right Stats */}
          <div
            className={`grid grid-cols-2 gap-6 ${isRTL ? "lg:order-1" : ""}`}
          >
            {[
              {
                value: "50K+",
                label: isRTL ? "موعد محجوز" : "Appointments Booked",
                sub: isRTL ? "شهرياً" : "Monthly",
              },
              {
                value: "98%",
                label: isRTL ? "رضا المرضى" : "Patient Satisfaction",
                sub: isRTL ? "تقييم إيجابي" : "Positive rating",
              },
              {
                value: "45%",
                label: isRTL ? "أقل غياب" : "Fewer No-Shows",
                sub: isRTL ? "مع التذكيرات" : "With reminders",
              },
              {
                value: "24/7",
                label: isRTL ? "متاح دائماً" : "Always Available",
                sub: isRTL ? "بدون توقف" : "Never offline",
              },
            ].map((stat, i) => (
              <div
                key={i}
                className="group p-6 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 hover:border-brand-green transition-colors"
              >
                <div className="text-4xl md:text-5xl font-bold text-brand-green mb-2">
                  {stat.value}
                </div>
                <div className="text-slate-900 dark:text-white font-medium mb-1">
                  {stat.label}
                </div>
                <div className="text-sm text-slate-500 dark:text-slate-500">
                  {stat.sub}
                </div>
                <div className="w-0 group-hover:w-full h-0.5 bg-brand-green mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}