import { type Lang } from "@/lib/config";
import JsonLd from "@/components/JsonLd";
import type { Metadata } from "next";
import { buildPageMetadata } from "@/lib/seo";
import Link from "next/link";

export function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Metadata {
  return buildPageMetadata({
    lang: params.lang,
    title:
      params.lang === "ar"
        ? "أدلة أتمتة العيادات وحجز المواعيد | موعدي"
        : "Clinic Automation & Booking Guides | Mawidi",
    description:
      params.lang === "ar"
        ? "أدلة شاملة لأتمتة العيادات وحجز المواعيد وتقليل عدم الحضور عبر واتساب في منطقة الخليج"
        : "Comprehensive guides on clinic automation, appointment booking, and no-show reduction via WhatsApp in the GCC",
    path: "/guides",
    keywords: [
      "GCC business guides",
      "appointment booking guides",
      "clinic automation resources",
      "WhatsApp booking guide",
      "reduce no-shows guide",
      "أدلة حجز المواعيد",
      "أتمتة العيادات",
    ],
  });
}

const guides = [
  {
    slug: "reduce-no-shows",
    titleEn: "The Complete Guide to Reducing No-Shows in GCC Clinics (2026)",
    titleAr: "الدليل الشامل لتقليل حالات عدم الحضور في عيادات الخليج (2026)",
    descEn:
      "GCC clinics lose an estimated SAR 1.2 billion annually to no-shows. Learn 10 proven strategies — from WhatsApp reminders to AI risk scoring — that reduce rates from 30-40% to under 6%.",
    descAr:
      "تخسر عيادات الخليج ما يقدر بـ 1.2 مليار ريال سنوياً بسبب عدم الحضور. تعرّف على 10 استراتيجيات مُثبتة — من تذكيرات واتساب إلى التقييم الذكي — تخفض المعدل من 30-40% إلى أقل من 6%.",
    readTimeEn: "15 min read",
    readTimeAr: "15 دقيقة قراءة",
    keyTakeawayEn:
      "Up to 85% no-show reduction is achievable with the right automation stack",
    keyTakeawayAr:
      "يمكن تحقيق تخفيض يصل إلى 85% في عدم الحضور مع نظام الأتمتة المناسب",
    icon: "📉",
  },
  {
    slug: "whatsapp-appointment-booking",
    titleEn:
      "How to Set Up WhatsApp Appointment Booking for Your Business (2026 Guide)",
    titleAr: "كيفية إعداد حجز المواعيد عبر واتساب لعملك (دليل 2026)",
    descEn:
      "Over 94% of GCC residents use WhatsApp daily. This step-by-step guide covers everything from API setup and business verification to automated booking flows and Arabic dialect support.",
    descAr:
      "يستخدم أكثر من 94% من سكان الخليج واتساب يومياً. يغطي هذا الدليل خطوة بخطوة كل شيء من إعداد API والتحقق من الأعمال إلى تدفقات الحجز الآلي ودعم اللهجات العربية.",
    readTimeEn: "18 min read",
    readTimeAr: "18 دقيقة قراءة",
    keyTakeawayEn:
      "WhatsApp booking achieves 3x higher conversion than phone or email",
    keyTakeawayAr:
      "حجز واتساب يحقق معدل تحويل أعلى 3 أضعاف من الهاتف أو البريد",
    icon: "💬",
  },
];

export default function GuidesHub({ params }: { params: { lang: Lang } }) {
  const { lang } = params;
  const isAr = lang === "ar";

  return (
    <div
      className="bg-white py-20 dark:bg-slate-950"
      dir={isAr ? "rtl" : "ltr"}
    >
      <div className="mx-auto max-w-5xl px-6">
        {/* Hero */}
        <header className="mb-16 text-center">
          <p className="mb-3 text-sm font-semibold uppercase tracking-widest text-brand-green">
            {isAr ? "مركز المعرفة" : "Knowledge Hub"}
          </p>
          <h1 className="text-4xl font-bold text-slate-900 dark:text-white md:text-5xl">
            {isAr ? "الأدلة والموارد" : "Guides & Resources"}
          </h1>
          <p className="mx-auto mt-5 max-w-2xl text-lg text-slate-600 dark:text-slate-300">
            {isAr
              ? "أدلة معمّقة وقابلة للتنفيذ لمساعدة عيادات ومؤسسات الخليج على أتمتة الحجوزات وتقليل عدم الحضور وتنمية الأعمال."
              : "In-depth, actionable guides to help GCC clinics and businesses automate bookings, reduce no-shows, and grow revenue."}
          </p>
        </header>

        {/* Guide Cards */}
        <div className="grid gap-8 md:grid-cols-2">
          {guides.map((guide) => (
            <Link
              key={guide.slug}
              href={`/${lang}/guides/${guide.slug}`}
              className="group flex flex-col rounded-2xl border border-slate-100 bg-white p-8 shadow-sm transition-all hover:border-brand-green/30 hover:shadow-lg dark:border-slate-800 dark:bg-slate-900 dark:hover:border-brand-green/40"
            >
              <span className="text-4xl">{guide.icon}</span>
              <h2 className="mt-4 text-xl font-bold text-slate-900 group-hover:text-brand-green dark:text-white dark:group-hover:text-brand-green">
                {isAr ? guide.titleAr : guide.titleEn}
              </h2>
              <p className="mt-3 flex-1 text-slate-600 dark:text-slate-300">
                {isAr ? guide.descAr : guide.descEn}
              </p>

              {/* Meta row */}
              <div className="mt-6 flex items-center gap-4 border-t border-slate-100 pt-4 dark:border-slate-800">
                <span className="rounded-full bg-brand-green/10 px-3 py-1 text-xs font-medium text-brand-green">
                  {isAr ? guide.readTimeAr : guide.readTimeEn}
                </span>
              </div>

              {/* Key Takeaway */}
              <div className="mt-4 rounded-xl bg-slate-50 p-4 dark:bg-slate-800/50">
                <p className="text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500">
                  {isAr ? "أهم خلاصة" : "Key Takeaway"}
                </p>
                <p className="mt-1 text-sm font-medium text-slate-700 dark:text-slate-200">
                  {isAr ? guide.keyTakeawayAr : guide.keyTakeawayEn}
                </p>
              </div>
            </Link>
          ))}
        </div>

        {/* CTA */}
        <div className="mt-20 rounded-2xl bg-gradient-to-br from-brand-green/10 to-brand-green/5 p-10 text-center dark:from-brand-green/20 dark:to-brand-green/10">
          <h2 className="text-2xl font-bold text-slate-900 dark:text-white">
            {isAr
              ? "هل أنت مستعد لتطبيق هذه الاستراتيجيات؟"
              : "Ready to Put These Strategies Into Action?"}
          </h2>
          <p className="mx-auto mt-3 max-w-xl text-slate-600 dark:text-slate-300">
            {isAr
              ? "موعدي يطبّق جميع الاستراتيجيات المذكورة في أدلتنا تلقائياً — من تذكيرات واتساب إلى تحصيل العربون."
              : "Mawidi implements every strategy covered in our guides automatically — from WhatsApp reminders to deposit collection."}
          </p>
          <div className="mt-6 flex flex-col items-center justify-center gap-4 sm:flex-row">
            <Link
              href={`/${lang}/pricing`}
              className="rounded-full bg-brand-green px-8 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-green/90"
            >
              {isAr ? "عرض الأسعار" : "View Pricing"}
            </Link>
            <Link
              href={`/${lang}/demo`}
              className="rounded-full border border-brand-green px-8 py-3 text-sm font-semibold text-brand-green transition-colors hover:bg-brand-green/5"
            >
              {isAr ? "احجز عرضاً تجريبياً" : "Book a Demo"}
            </Link>
          </div>
        </div>
      </div>

      <JsonLd
        override
        data={{
          "@context": "https://schema.org",
          "@type": "CollectionPage",
          name: isAr
            ? "الأدلة والموارد — موعدي"
            : "Guides & Resources — Mawidi",
          description: isAr
            ? "أدلة شاملة لأتمتة العيادات وحجز المواعيد في الخليج"
            : "Comprehensive guides on clinic automation and appointment booking in the GCC",
          url: `https://mawidi.com/${lang}/guides`,
          publisher: {
            "@type": "Organization",
            name: "Mawidi",
            url: "https://mawidi.com",
          },
        }}
      />
    </div>
  );
}