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" ? "الرعاية الصحية عن بعد" : "Telehealth";
  const description =
    params.lang === "ar"
      ? "حلول مواويد للاستشارات الطبية عن بعد، الرعاية الافتراضية، والصحة الرقمية"
      : "Mawidi solutions for telemedicine consultations, virtual care, and digital health";

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

export default function TelehealthPage({ 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 ? "الرعاية الصحية عن بعد" : "Telehealth"}</span>
            </div>

            <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mb-6">
              {isAr
                ? "إدارة الاستشارات الطبية عن بعد عبر واتساب"
                : "Manage Telemedicine Consultations via WhatsApp"}
            </h1>

            <p className="text-xl md:text-2xl text-slate-200 mb-8 leading-relaxed">
              {isAr
                ? "أتمتة حجز الاستشارات الافتراضية، المتابعة عن بعد، ووصفات الأدوية الإلكترونية"
                : "Automate virtual consultation booking, remote follow-up, and e-prescriptions"}
            </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 ? "خدمات الرعاية عن بعد" : "Remote Care Services"}
          </h2>
          <p className="text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
            {isAr
              ? "رعاية صحية شاملة من منزلك"
              : "Comprehensive healthcare from your home"}
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[
            {
              icon: "👨‍⚕️",
              title: isAr ? "الاستشارات الافتراضية" : "Virtual Consultations",
              desc: isAr
                ? "استشارات طبية عبر الفيديو والصوت"
                : "Medical consultations via video and audio",
            },
            {
              icon: "💊",
              title: isAr ? "الوصفات الإلكترونية" : "E-Prescriptions",
              desc: isAr
                ? "إصدار وإرسال الوصفات رقمياً"
                : "Issue and send prescriptions digitally",
            },
            {
              icon: "📱",
              title: isAr ? "المتابعة عن بعد" : "Remote Monitoring",
              desc: isAr
                ? "متابعة الحالات المزمنة"
                : "Follow chronic conditions",
            },
            {
              icon: "🩺",
              title: isAr ? "الاستشارات الطارئة" : "Urgent Consultations",
              desc: isAr
                ? "استشارات فورية للحالات العاجلة"
                : "Immediate consultations for urgent cases",
            },
            {
              icon: "🧠",
              title: isAr ? "الصحة النفسية" : "Mental Health",
              desc: isAr
                ? "علاج نفسي واستشارات عن بعد"
                : "Therapy and counseling remotely",
            },
            {
              icon: "📋",
              title: isAr ? "المراجعة الطبية" : "Medical Reviews",
              desc: isAr
                ? "مراجعة نتائج التحاليل عن بعد"
                : "Review test results remotely",
            },
          ].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 ? "الاستشارات الافتراضية" : "Virtual Consultations"}
              </h3>
              <ul className="space-y-4">
                {[
                  isAr ? "حجز فوري للاستشارات" : "Instant consultation booking",
                  isAr ? "مكالمات فيديو آمنة" : "Secure video calls",
                  isAr ? "مشاركة الملفات الطبية" : "Share medical files",
                  isAr
                    ? "تسجيل الجلسات للمراجعة"
                    : "Session recording for review",
                ].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 ? "المتابعة والوصفات" : "Follow-up & Prescriptions"}
              </h3>
              <ul className="space-y-4">
                {[
                  isAr
                    ? "وصفات طبية إلكترونية"
                    : "Electronic medical prescriptions",
                  isAr ? "تذكيرات الأدوية" : "Medication reminders",
                  isAr
                    ? "متابعة دورية للحالات المزمنة"
                    : "Regular follow-up for chronic cases",
                  isAr
                    ? "معالجة المدفوعات الآمنة"
                    : "Secure payment processing",
                ].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 Telehealth Works"}
          </h2>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[
            {
              icon: "📅",
              title: isAr ? "حجز الاستشارة" : "Book Consultation",
              desc: isAr
                ? "اختر الطبيب واحجز موعداً"
                : "Choose doctor and book appointment",
            },
            {
              icon: "💬",
              title: isAr ? "التواصل الفوري" : "Instant Communication",
              desc: isAr
                ? "تواصل عبر واتساب قبل الموعد"
                : "Communicate via WhatsApp before appointment",
            },
            {
              icon: "🎥",
              title: isAr ? "الاستشارة الافتراضية" : "Virtual Consultation",
              desc: isAr
                ? "مكالمة فيديو آمنة مع الطبيب"
                : "Secure video call with doctor",
            },
            {
              icon: "💊",
              title: isAr ? "الوصفة الطبية" : "Prescription",
              desc: isAr
                ? "استلم وصفة طبية رقمية"
                : "Receive digital prescription",
            },
            {
              icon: "🔔",
              title: isAr ? "التذكيرات" : "Reminders",
              desc: isAr
                ? "تذكير بمواعيد الأدوية والمتابعة"
                : "Medication and follow-up reminders",
            },
            {
              icon: "📊",
              title: isAr ? "السجل الطبي" : "Medical Records",
              desc: isAr
                ? "وصول دائم لسجلك الطبي"
                : "Permanent access to medical records",
            },
          ].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
              ? "ابدأ خدمة الرعاية عن بعد"
              : "Start Your Telehealth Service"}
          </h2>
          <p className="text-xl mb-8 text-white/90">
            {isAr
              ? "انضم إلى مقدمي الرعاية الصحية عن بعد الذين يستخدمون مواويد"
              : "Join telehealth providers 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>
  );
}