import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import Link from "next/link";
import type { Metadata } from "next";

export const revalidate = SITE.revalidateSeconds;

export function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const title =
    params.lang === "ar" ? "المختبرات والتشخيص" : "Labs & Diagnostics";
  const description =
    params.lang === "ar"
      ? "حلول مواويد للمختبرات الطبية، مراكز التشخيص، والأشعة"
      : "Mawidi solutions for medical laboratories, diagnostic centers, and radiology";

  return {
    title: `${title} | ${SITE.brand}`,
    description,
    openGraph: {
      title: `${title} | ${SITE.brand}`,
      description,
      type: "website",
    },
  };
}

export default function LabsDiagnosticsPage({
  params,
}: {
  params: { lang: Lang };
}) {
  const t = UI[params.lang].t;
  const dir = UI[params.lang].dir;
  const isAr = params.lang === "ar";

  return (
    <main
      className="min-h-screen bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-800"
      dir={dir}
    >
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-br from-brand-ink via-slate-800 to-slate-900 text-white">
        <div className="absolute inset-0 bg-grid-white/5 bg-[size:20px_20px]" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
          <div className="max-w-4xl">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-sm font-medium mb-6">
              <span className="text-2xl">🔬</span>
              <span>{isAr ? "المختبرات والتشخيص" : "Labs & Diagnostics"}</span>
            </div>

            <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mb-6">
              {isAr
                ? "إدارة حجوزات المختبرات والتشخيص عبر واتساب"
                : "Manage Lab & Diagnostic Bookings via WhatsApp"}
            </h1>

            <p className="text-xl md:text-2xl text-slate-200 mb-8 leading-relaxed">
              {isAr
                ? "أتمتة حجز الفحوصات، إرسال النتائج، والتذكيرات للمختبرات ومراكز التشخيص"
                : "Automate test bookings, result delivery, and reminders for labs and diagnostic centers"}
            </p>

            <div className="flex flex-col sm:flex-row gap-4 mb-6">
              <Link
                href={`/${params.lang}/signup`}
                className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-xl bg-brand-green text-white hover:bg-brand-green/90 transition-all shadow-lg hover:shadow-xl hover:scale-105"
              >
                {t.getStarted}
              </Link>
              <Link
                href={`/${params.lang}/demo`}
                className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-xl bg-white/10 text-white border-2 border-white/20 hover:bg-white/20 transition-all"
              >
                {t.scheduleDemo}
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Service Types */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-extrabold text-brand-ink dark:text-white mb-4">
            {isAr ? "خدمات المختبرات المدعومة" : "Supported Lab Services"}
          </h2>
          <p className="text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
            {isAr
              ? "حلول متكاملة لجميع أنواع الفحوصات"
              : "Comprehensive solutions for all test types"}
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[
            {
              icon: "🔬",
              title: isAr ? "التحاليل الطبية" : "Medical Tests",
              desc: isAr
                ? "تحاليل الدم والبول والسوائل"
                : "Blood, urine and fluid tests",
            },
            {
              icon: "📊",
              title: isAr ? "التحاليل الشاملة" : "Comprehensive Panels",
              desc: isAr
                ? "الفحوصات الشاملة والدورية"
                : "Complete health checkups",
            },
            {
              icon: "🩻",
              title: isAr ? "الأشعة والتصوير" : "Radiology & Imaging",
              desc: isAr
                ? "أشعة سينية، موجات فوق صوتية، رنين"
                : "X-ray, ultrasound, MRI",
            },
            {
              icon: "🧬",
              title: isAr ? "الفحوصات الجينية" : "Genetic Testing",
              desc: isAr
                ? "فحوصات الحمض النووي والوراثة"
                : "DNA and hereditary tests",
            },
            {
              icon: "🦠",
              title: isAr ? "تحاليل الميكروبات" : "Microbiology Tests",
              desc: isAr
                ? "فحوصات البكتيريا والفيروسات"
                : "Bacterial and viral tests",
            },
            {
              icon: "💉",
              title: isAr ? "خدمات المنزل" : "Home Services",
              desc: isAr ? "سحب العينات من المنزل" : "Home sample collection",
            },
          ].map((service) => (
            <div
              key={service.title}
              className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6"
            >
              <div className="text-4xl mb-4">{service.icon}</div>
              <h3 className="text-xl font-semibold text-brand-ink dark:text-white mb-3">
                {service.title}
              </h3>
              <p className="text-slate-600 dark:text-slate-300">
                {service.desc}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Key Features */}
      <section className="bg-slate-50 dark:bg-slate-900/50 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-extrabold text-brand-ink dark:text-white mb-4">
              {isAr ? "المميزات الأساسية" : "Key Features"}
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-8">
              <h3 className="text-2xl font-bold text-brand-ink dark:text-white mb-6">
                {isAr ? "الحجز والجدولة" : "Booking & Scheduling"}
              </h3>
              <ul className="space-y-4">
                {[
                  isAr ? "حجز فوري للفحوصات" : "Instant test booking",
                  isAr
                    ? "جدولة مواعيد الأشعة"
                    : "Schedule radiology appointments",
                  isAr
                    ? "تذكيرات التحضير للفحوصات"
                    : "Test preparation reminders",
                  isAr ? "حجز خدمة المنزل" : "Book home service",
                ].map((feature) => (
                  <li key={feature} className="flex items-start gap-3">
                    <span className="text-brand-green text-xl mt-1">✓</span>
                    <span className="text-slate-700 dark:text-slate-300">
                      {feature}
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-8">
              <h3 className="text-2xl font-bold text-brand-ink dark:text-white mb-6">
                {isAr ? "النتائج والتقارير" : "Results & Reports"}
              </h3>
              <ul className="space-y-4">
                {[
                  isAr
                    ? "إرسال النتائج فور الجاهزية"
                    : "Send results when ready",
                  isAr ? "تقارير رقمية آمنة" : "Secure digital reports",
                  isAr ? "معالجة المدفوعات" : "Payment processing",
                  isAr ? "سجل كامل للفحوصات" : "Complete test history",
                ].map((feature) => (
                  <li key={feature} className="flex items-start gap-3">
                    <span className="text-brand-green text-xl mt-1">✓</span>
                    <span className="text-slate-700 dark:text-slate-300">
                      {feature}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Use Cases */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-extrabold text-brand-ink dark:text-white mb-4">
            {isAr ? "كيف نساعد مختبرك" : "How We Help Your Lab"}
          </h2>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[
            {
              icon: "📅",
              title: isAr ? "حجز الفحوصات" : "Test Booking",
              desc: isAr
                ? "حجز سريع لجميع أنواع الفحوصات"
                : "Quick booking for all test types",
            },
            {
              icon: "🏠",
              title: isAr ? "خدمات منزلية" : "Home Services",
              desc: isAr
                ? "جدولة سحب العينات من المنزل"
                : "Schedule home sample collection",
            },
            {
              icon: "📄",
              title: isAr ? "إرسال النتائج" : "Result Delivery",
              desc: isAr
                ? "إرسال آمن للنتائج عبر واتساب"
                : "Secure result delivery via WhatsApp",
            },
            {
              icon: "💰",
              title: isAr ? "المدفوعات" : "Payments",
              desc: isAr
                ? "معالجة فورية للمدفوعات"
                : "Instant payment processing",
            },
            {
              icon: "🔔",
              title: isAr ? "التذكيرات" : "Reminders",
              desc: isAr
                ? "تذكيرات بالتحضير والمواعيد"
                : "Preparation and appointment reminders",
            },
            {
              icon: "📊",
              title: isAr ? "التقارير" : "Analytics",
              desc: isAr
                ? "تتبع الفحوصات والإيرادات"
                : "Track tests and revenue",
            },
          ].map((useCase) => (
            <div
              key={useCase.title}
              className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6"
            >
              <div className="text-3xl mb-3">{useCase.icon}</div>
              <h3 className="text-lg font-semibold text-brand-ink dark:text-white mb-2">
                {useCase.title}
              </h3>
              <p className="text-sm text-slate-600 dark:text-slate-300">
                {useCase.desc}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-gradient-to-br from-brand-green to-emerald-600 text-white py-16">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-extrabold mb-6">
            {isAr ? "حدّث مختبرك اليوم" : "Modernize Your Lab Today"}
          </h2>
          <p className="text-xl mb-8 text-white/90">
            {isAr
              ? "انضم إلى المختبرات ومراكز التشخيص التي تستخدم مواويد"
              : "Join labs and diagnostic centers using Mawidi"}
          </p>
          <Link
            href={`/${params.lang}/signup`}
            className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-xl bg-white text-brand-green hover:bg-slate-50 transition-all shadow-lg hover:shadow-xl"
          >
            {t.getStarted}
          </Link>
        </div>
      </section>
    </main>
  );
}