import Link from "next/link";
import Image from "next/image";
import JsonLd from "@/components/JsonLd";
import WhatsAppButton from "@/components/contact/WhatsAppButton";
import ContactForm from "@/components/contact/SimpleContactForm";
import { SITE, type Lang } from "@/lib/config";
import {
  getContactCopy,
  getTicketRouting,
  getFormCopy,
  OFFICES,
  SOCIAL_LINKS,
} from "@/lib/contactCopy";

export const revalidate = SITE.revalidateSeconds;

const SUPPORT_PORTAL_URL = "https://support.mawidi.com";

type QuickAction = {
  label: string;
  description: string;
  href: string;
  isWhatsApp?: boolean;
  icon: string;
};

export default async function ContactPage({
  params,
}: {
  params: { lang: Lang };
}) {
  const isAr = params.lang === "ar";
  const copy = getContactCopy(params.lang, isAr);
  const ticketRouting = getTicketRouting(isAr);
  const formCopy = getFormCopy(params.lang, isAr);

  const phoneForTel = SITE.contact.phone.replace(/[^+\d]/g, "");

  const quickActions: QuickAction[] = isAr
    ? [
        {
          label: "واتساب",
          description: copy.quickActionDescriptions.whatsapp,
          href: "#",
          isWhatsApp: true,
          icon: "💬",
        },
        {
          label: "اتصال هاتفي",
          description: copy.quickActionDescriptions.call,
          href: `tel:${phoneForTel}`,
          icon: "📞",
        },
        {
          label: "بريد إلكتروني",
          description: copy.quickActionDescriptions.email,
          href: `mailto:${SITE.contact.email}`,
          icon: "✉️",
        },
        {
          label: "حجز عرض",
          description: copy.quickActionDescriptions.demo,
          href: `/${params.lang}/demo`,
          icon: "🎯",
        },
        {
          label: "فتح تذكرة دعم",
          description: copy.quickActionDescriptions.ticket,
          href: SUPPORT_PORTAL_URL,
          icon: "🎫",
        },
      ]
    : [
        {
          label: "WhatsApp",
          description: copy.quickActionDescriptions.whatsapp,
          href: "#",
          isWhatsApp: true,
          icon: "💬",
        },
        {
          label: "Call us",
          description: copy.quickActionDescriptions.call,
          href: `tel:${phoneForTel}`,
          icon: "📞",
        },
        {
          label: "Email",
          description: copy.quickActionDescriptions.email,
          href: `mailto:${SITE.contact.email}`,
          icon: "✉️",
        },
        {
          label: "Book a demo",
          description: copy.quickActionDescriptions.demo,
          href: `/${params.lang}/demo`,
          icon: "🎯",
        },
        {
          label: "Open a ticket",
          description: copy.quickActionDescriptions.ticket,
          href: SUPPORT_PORTAL_URL,
          icon: "🎫",
        },
      ];

  const schemaOrg = {
    "@context": "https://schema.org",
    "@type": "Organization",
    name: SITE.brand,
    url: `https://${SITE.domain}`,
    contactPoint: [
      {
        "@type": "ContactPoint",
        telephone: SITE.contact.phone,
        email: SITE.contact.email,
        contactType: "customer support",
        areaServed: ["QA", "SA", "AE", "BH", "OM", "KW"],
        availableLanguage: ["en", "ar"],
        hoursAvailable: {
          "@type": "OpeningHoursSpecification",
          dayOfWeek: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
          opens: "09:00",
          closes: "18:00",
        },
      },
      {
        "@type": "ContactPoint",
        telephone: SITE.contact.phone,
        email: "security@mawidi.com",
        contactType: "security",
        availableLanguage: ["en", "ar"],
      },
    ],
    sameAs: Object.values(SOCIAL_LINKS),
  };

  return (
    <main className="relative min-h-screen bg-[#FAFAFA]">
      {/* ═══════════════════════════════════════════════════════════════════════════
          HERO SECTION - Atmospheric Background with Asymmetric Layout
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="relative overflow-hidden pb-24 pt-16">
        {/* Atmospheric Mesh Gradient */}
        <div className="pointer-events-none absolute inset-0 -z-10">
          <div className="absolute left-0 top-0 h-[600px] w-[600px] -translate-x-1/2 -translate-y-1/4 rounded-full bg-[#10B981]/10 blur-[120px]" />
          <div className="absolute right-0 top-1/4 h-[500px] w-[500px] translate-x-1/3 rounded-full bg-[#10B981]/5 blur-[100px]" />
          <div
            className="absolute inset-0 opacity-[0.03]"
            style={{
              backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2310B981' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
            }}
          />
        </div>

        <div className="mx-auto max-w-7xl px-6">
          <div className="grid items-center gap-12 lg:grid-cols-[1.3fr,1fr]">
            {/* Left: Hero Content */}
            <div className="space-y-8">
              <div className="flex items-center gap-4">
                <span className="text-[#10B981] font-mono text-sm tracking-wider">
                  01
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
                <span className="text-[#64748B] text-sm uppercase tracking-widest">
                  {copy.statusPrefix}: {copy.statusValue}
                </span>
              </div>

              <div className="space-y-4">
                <h1 className="font-display text-5xl font-extrabold leading-[1.1] tracking-tight text-[#1E293B] md:text-6xl lg:text-7xl">
                  {isAr ? (
                    <>
                      <span className="block">
                        {copy.heroTitle.split(" ").slice(0, 2).join(" ")}
                      </span>
                      <span className="block bg-gradient-to-r from-[#10B981] to-[#059669] bg-clip-text text-transparent">
                        {copy.heroTitle.split(" ").slice(2).join(" ")}
                      </span>
                    </>
                  ) : (
                    <>
                      <span className="block">Get in</span>
                      <span className="block bg-gradient-to-r from-[#10B981] to-[#059669] bg-clip-text text-transparent">
                        Touch
                      </span>
                    </>
                  )}
                </h1>
                <p className="max-w-lg text-xl font-medium text-[#10B981]">
                  {copy.heroSubtitle}
                </p>
                <p className="max-w-lg text-lg text-[#64748B]">
                  {copy.heroNote}
                </p>
              </div>

              {/* Quick Stats */}
              <div className="flex flex-wrap gap-6">
                <div className="flex items-center gap-3">
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-[#10B981]/10">
                    <span className="text-xl">⚡</span>
                  </div>
                  <div>
                    <p className="text-2xl font-bold text-[#1E293B]">
                      {copy.metricsGoLive}
                    </p>
                    <p className="text-sm text-[#64748B]">
                      {isAr ? "للانطلاق" : "To go-live"}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-[#10B981]/10">
                    <span className="text-xl">⭐</span>
                  </div>
                  <div>
                    <p className="text-2xl font-bold text-[#1E293B]">
                      {copy.metricsSatisfaction}
                    </p>
                    <p className="text-sm text-[#64748B]">
                      {isAr ? "رضا العملاء" : "Satisfaction"}
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Right: Floating Quick Actions Card */}
            <div className="relative">
              {/* Decorative Element */}
              <div className="absolute -right-8 -top-8 h-32 w-32 rounded-full border-2 border-dashed border-[#10B981]/20" />
              <div className="absolute -bottom-4 -left-4 h-24 w-24 rounded-full bg-[#10B981]/10" />

              <div className="relative rounded-3xl border border-[#10B981]/20 bg-white/80 p-8 shadow-xl backdrop-blur-sm">
                <h2 className="mb-6 text-xl font-bold text-[#1E293B]">
                  {isAr ? "تواصل معنا الآن" : "Reach Us Now"}
                </h2>
                <div className="space-y-3">
                  {quickActions.slice(0, 3).map((action) => {
                    if (action.isWhatsApp) {
                      return (
                        <div
                          key={action.label}
                          className="group rounded-xl border border-[#10B981]/20 bg-[#FAFAFA] p-4 transition-all hover:border-[#10B981] hover:shadow-md"
                        >
                          <WhatsAppButton
                            label={action.label}
                            description={action.description}
                            className="text-left w-full"
                            lang={params.lang}
                          />
                        </div>
                      );
                    }
                    return (
                      <a
                        key={action.label}
                        href={action.href}
                        className="group flex items-center gap-4 rounded-xl border border-[#10B981]/20 bg-[#FAFAFA] p-4 transition-all hover:border-[#10B981] hover:shadow-md"
                        target={
                          action.href.startsWith("http") ? "_blank" : undefined
                        }
                        rel={
                          action.href.startsWith("http")
                            ? "noopener noreferrer"
                            : undefined
                        }
                      >
                        <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#10B981]/10 text-xl transition-colors group-hover:bg-[#10B981] group-hover:text-white">
                          {action.icon}
                        </span>
                        <div className="flex-1">
                          <span className="block font-semibold text-[#1E293B]">
                            {action.label}
                          </span>
                          <span className="text-sm text-[#64748B]">
                            {action.description}
                          </span>
                        </div>
                        <span className="text-[#10B981] opacity-0 transition-opacity group-hover:opacity-100">
                          →
                        </span>
                      </a>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════════
          OFFICE HOURS BANNER
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="relative -mt-8 mx-auto max-w-5xl px-6">
        <div className="rounded-2xl border border-[#10B981]/20 bg-gradient-to-r from-[#10B981] to-[#059669] p-6 text-white shadow-lg">
          <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
            <div className="flex items-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-white/20">
                <span className="text-2xl">🕐</span>
              </div>
              <div>
                <h3 className="text-sm font-medium uppercase tracking-wide opacity-80">
                  {copy.officeHoursLabel}
                </h3>
                <p className="text-lg font-bold">{copy.officeHoursValue}</p>
              </div>
            </div>
            <p className="text-sm opacity-90">{copy.afterHoursLine}</p>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════════
          FEATURES SECTION - Offset Cards
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="py-24">
        <div className="mx-auto max-w-7xl px-6">
          <div className="mb-12">
            <div className="flex items-center gap-4 mb-6">
              <span className="text-[#10B981] font-mono text-sm tracking-wider">
                02
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
              <span className="text-[#64748B] text-sm uppercase tracking-widest">
                {isAr ? "لماذا موعدي" : "Why Mawidi"}
              </span>
            </div>
            <h2 className="font-display text-4xl font-bold text-[#1E293B] md:text-5xl">
              {isAr ? "حلول متكاملة للعيادات" : "Complete Clinic Solutions"}
            </h2>
          </div>

          <div className="grid gap-6 md:grid-cols-3">
            {[
              {
                title: isAr ? "أتمتة واتساب" : "WhatsApp Automation",
                description: isAr
                  ? "ردود فورية وحجز تلقائي على مدار الساعة"
                  : "Instant replies and automated booking 24/7",
                icon: "💬",
                offset: "md:translate-y-0",
              },
              {
                title: isAr ? "صندوق وارد موحد" : "Unified Inbox",
                description: isAr
                  ? "كل الرسائل والطلبات في مكان واحد"
                  : "All messages and requests in one place",
                icon: "📥",
                offset: "md:translate-y-8",
              },
              {
                title: isAr ? "لوحة تحليلات" : "Analytics Dashboard",
                description: isAr
                  ? "رؤى فورية ومؤشرات أداء شاملة"
                  : "Real-time insights and comprehensive KPIs",
                icon: "📊",
                offset: "md:translate-y-0",
              },
            ].map((card, idx) => (
              <div
                key={idx}
                className={`group rounded-3xl border border-[#10B981]/10 bg-white p-8 shadow-sm transition-all duration-300 hover:-translate-y-2 hover:border-[#10B981]/30 hover:shadow-xl ${card.offset}`}
              >
                <div className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-[#10B981]/20 to-[#10B981]/5 text-3xl transition-transform group-hover:scale-110">
                  {card.icon}
                </div>
                <h3 className="mb-3 text-xl font-bold text-[#1E293B]">
                  {card.title}
                </h3>
                <p className="text-[#64748B]">{card.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════════
          ALL CONTACT OPTIONS - Light Editorial Section
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 bg-[#FAFAFA]">
        {/* Subtle Grid Background */}
        <div
          className="absolute inset-0 opacity-[0.02]"
          style={{
            backgroundImage:
              "linear-gradient(#10B981 1px, transparent 1px), linear-gradient(90deg, #10B981 1px, transparent 1px)",
            backgroundSize: "60px 60px",
          }}
        />

        <div className="relative mx-auto max-w-7xl px-6">
          <div className="mb-12">
            <div className="flex items-center gap-4 mb-6">
              <span className="text-[#10B981] font-mono text-sm tracking-wider">
                03
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
              <span className="text-[#64748B] text-sm uppercase tracking-widest">
                {isAr ? "طرق التواصل" : "Contact Options"}
              </span>
            </div>
            <h2 className="font-display text-4xl font-bold text-[#1E293B] md:text-5xl">
              {isAr ? "اختر طريقة التواصل المناسبة" : "Choose How to Reach Us"}
            </h2>
            <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
              {isAr
                ? "طرق متعددة سريعة للتواصل مع فريقنا"
                : "Multiple fast ways to connect with our team"}
            </p>
          </div>

          <div
            className="grid gap-px bg-slate-200 sm:grid-cols-2 lg:grid-cols-5"
            data-testid="quick-actions-grid"
          >
            {quickActions.map((action, idx) => {
              const numStr = String(idx + 1).padStart(2, "0");
              if (action.isWhatsApp) {
                return (
                  <div
                    key={action.label}
                    className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors"
                  >
                    <span className="text-[#10B981] font-mono text-xs mb-4 block">
                      {numStr}
                    </span>
                    <span className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-[#10B981]/10 text-2xl group-hover:bg-[#10B981]/20 transition-colors">
                      {action.icon}
                    </span>
                    <WhatsAppButton
                      label={action.label}
                      description={action.description}
                      className="text-left w-full"
                      lang={params.lang}
                    />
                    <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
                  </div>
                );
              }

              return (
                <a
                  key={action.label}
                  href={action.href}
                  className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors"
                  target={action.href.startsWith("http") ? "_blank" : undefined}
                  rel={
                    action.href.startsWith("http")
                      ? "noopener noreferrer"
                      : undefined
                  }
                >
                  <span className="text-[#10B981] font-mono text-xs mb-4 block">
                    {numStr}
                  </span>
                  <span className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-[#10B981]/10 text-2xl group-hover:bg-[#10B981]/20 transition-colors">
                    {action.icon}
                  </span>
                  <span className="block text-lg font-bold text-[#1E293B] mb-2 group-hover:text-[#10B981] transition-colors">
                    {action.label}
                  </span>
                  <span className="block text-sm text-[#64748B]">
                    {action.description}
                  </span>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════════
          WHAT HAPPENS NEXT
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="py-24">
        <div className="mx-auto max-w-7xl px-6">
          <div className="rounded-3xl border border-[#10B981]/20 bg-gradient-to-br from-[#10B981]/5 via-white to-[#10B981]/5 p-8 md:p-12">
            <div className="mb-10">
              <div className="flex items-center gap-4 mb-6 justify-center">
                <span className="text-[#10B981] font-mono text-sm tracking-wider">
                  04
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
                <span className="text-[#64748B] text-sm uppercase tracking-widest">
                  {isAr ? "الخطوات التالية" : "Next Steps"}
                </span>
              </div>
              <h2 className="font-display text-3xl font-bold text-[#1E293B] md:text-4xl text-center">
                {copy.whatHappensNextTitle}
              </h2>
            </div>
            <div className="grid gap-8 md:grid-cols-3">
              {copy.whatHappensNextSteps.map((step: string, idx: number) => (
                <div key={idx} className="relative flex items-start gap-4">
                  <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[#10B981] text-lg font-bold text-white shadow-lg shadow-[#10B981]/30">
                    {idx + 1}
                  </div>
                  {idx < 2 && (
                    <div className="absolute left-6 top-14 hidden h-full w-px bg-gradient-to-b from-[#10B981]/50 to-transparent md:block" />
                  )}
                  <p className="pt-3 text-[#64748B]">{step}</p>
                </div>
              ))}
            </div>
            <div className="mt-10 text-center">
              <Link
                href={`/${params.lang}/pricing`}
                className="inline-flex items-center gap-2 rounded-xl bg-[#10B981] px-8 py-4 font-semibold text-white shadow-lg shadow-[#10B981]/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-[#10B981]/30"
              >
                {copy.pricingCTA}
                <span>→</span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════════
          CONTACT FORM & ROUTING - Two Column Layout
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="py-24 bg-white">
        <div className="mx-auto max-w-7xl px-6">
          <div className="mb-12">
            <div className="flex items-center gap-4 mb-6">
              <span className="text-[#10B981] font-mono text-sm tracking-wider">
                05
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
              <span className="text-[#64748B] text-sm uppercase tracking-widest">
                {isAr ? "نموذج الاتصال" : "Contact Form"}
              </span>
            </div>
            <h2 className="font-display text-4xl font-bold text-[#1E293B] md:text-5xl">
              {copy.formTitle}
            </h2>
            <p className="mt-4 max-w-2xl text-lg text-[#64748B]">
              {copy.formSubtitle}
            </p>
          </div>

          <div className="grid gap-10 lg:grid-cols-[1.2fr,1fr]">
            {/* Contact Form */}
            <div className="rounded-3xl border border-[#10B981]/20 bg-[#FAFAFA] p-8 md:p-10">
              <ContactForm
                lang={params.lang}
                copy={formCopy}
                routingInfo={ticketRouting}
              />
            </div>

            {/* Ticket Routing Info */}
            <aside className="space-y-6">
              <div className="rounded-3xl border border-[#10B981]/20 bg-gradient-to-br from-[#10B981]/10 to-[#10B981]/5 p-8">
                <h3 className="text-xl font-bold text-[#1E293B] mb-2">
                  {copy.routingTitle}
                </h3>
                <p className="text-sm text-[#64748B] mb-6">
                  {copy.routingSubtitle}
                </p>

                <div className="space-y-3 max-h-[400px] overflow-y-auto pr-2">
                  {(isAr
                    ? [
                        { key: "sales", label: "المبيعات", icon: "💰" },
                        { key: "support", label: "الدعم", icon: "🎧" },
                        { key: "billing", label: "الفوترة", icon: "💳" },
                        { key: "partnerships", label: "الشراكات", icon: "🤝" },
                        { key: "security", label: "الأمن", icon: "🔐" },
                      ]
                    : [
                        { key: "sales", label: "Sales", icon: "💰" },
                        { key: "support", label: "Support", icon: "🎧" },
                        { key: "billing", label: "Billing", icon: "💳" },
                        {
                          key: "partnerships",
                          label: "Partnerships",
                          icon: "🤝",
                        },
                        { key: "security", label: "Security", icon: "🔐" },
                      ]
                  ).map((item) => (
                    <div
                      key={item.key}
                      className="rounded-xl bg-white/80 p-4 border border-[#10B981]/10"
                    >
                      <div className="flex items-center gap-3 mb-2">
                        <span className="text-lg">{item.icon}</span>
                        <span className="font-semibold text-[#1E293B]">
                          {item.label}
                        </span>
                      </div>
                      <p className="text-xs text-[#10B981]">
                        →{" "}
                        {
                          ticketRouting[item.key as keyof typeof ticketRouting]
                            .destination
                        }
                      </p>
                    </div>
                  ))}
                </div>
              </div>

              {/* Security Notice */}
              <div className="rounded-2xl border border-[#10B981]/30 bg-[#10B981]/5 p-6">
                <div className="flex items-start gap-3">
                  <span className="text-2xl">🛡️</span>
                  <div>
                    <h4 className="font-semibold text-[#1E293B]">
                      {isAr ? "الإبلاغ عن ثغرة أمنية" : "Security Disclosure"}
                    </h4>
                    <p className="mt-1 text-sm text-[#64748B]">
                      {isAr
                        ? "للإبلاغ عن ثغرة أمنية اختر موضوع الأمن في النموذج وستصلك رسالة تأكيد تلقائية."
                        : "Pick the Security topic in the form and you will receive an auto-acknowledgement."}
                    </p>
                  </div>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════════
          SERVICE SHORTCUTS & SOCIAL
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="mx-auto max-w-7xl px-6">
          <div className="mb-12">
            <div className="flex items-center gap-4 mb-6">
              <span className="text-[#10B981] font-mono text-sm tracking-wider">
                06
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
              <span className="text-[#64748B] text-sm uppercase tracking-widest">
                {isAr ? "روابط سريعة" : "Quick Links"}
              </span>
            </div>
          </div>
          <div className="grid gap-10 lg:grid-cols-[1.1fr,0.9fr]">
            {/* Service Shortcuts */}
            <div className="space-y-8 rounded-3xl border border-[#10B981]/20 bg-white p-8 md:p-10">
              <header>
                <h2 className="text-2xl font-bold text-[#1E293B] md:text-3xl">
                  {copy.serviceTitle}
                </h2>
                <p className="mt-2 text-[#64748B]">{copy.serviceSubtitle}</p>
              </header>

              {/* Book Demo */}
              <div className="rounded-2xl border border-[#10B981]/20 bg-gradient-to-br from-[#10B981]/5 to-transparent p-6">
                <h3 className="text-lg font-bold text-[#1E293B]">
                  {isAr ? "احجز عرضاً مباشراً" : "Book a live demo"}
                </h3>
                <p className="mt-2 text-sm text-[#64748B]">
                  {isAr
                    ? "حدد الوقت المناسب لك وسيتم ضبط المنطقة الزمنية تلقائياً."
                    : "Pick a time that suits you — timezone detection keeps calendars aligned."}
                </p>
                <Link
                  href={`/${params.lang}/demo`}
                  className="mt-4 inline-flex items-center gap-2 rounded-xl bg-[#10B981] px-6 py-3 font-semibold text-white transition-all hover:-translate-y-0.5 hover:shadow-lg hover:shadow-[#10B981]/25"
                >
                  {isAr ? "افتح صفحة العرض التوضيحي" : "Open Demo Page"}
                  <span>→</span>
                </Link>
              </div>

              {/* Existing Customers */}
              <div className="rounded-2xl border border-[#10B981]/30 bg-[#10B981]/5 p-6">
                <h3 className="text-lg font-bold text-[#1E293B]">
                  {isAr ? "عملاء موعدي الحاليون" : "Existing Mawidi customers"}
                </h3>
                <p className="mt-2 text-sm text-[#64748B]">
                  {isAr
                    ? "انتقل مباشرة إلى بوابة الدعم لفتح أو متابعة تذكرة."
                    : "Head straight to the support portal to open or follow a ticket."}
                </p>
                <div className="mt-4 flex flex-wrap gap-3">
                  <a
                    href={SUPPORT_PORTAL_URL}
                    className="inline-flex items-center gap-2 rounded-xl bg-[#1E293B] px-5 py-2.5 font-semibold text-white hover:bg-[#0F172A]"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    {isAr ? "فتح تذكرة دعم" : "Open support ticket"}
                  </a>
                  <Link
                    href={`/${params.lang}/support`}
                    className="inline-flex items-center gap-2 rounded-xl border-2 border-[#10B981] px-5 py-2.5 font-semibold text-[#10B981] hover:bg-[#10B981]/5"
                  >
                    {isAr ? "مركز المساعدة" : "Help center"}
                  </Link>
                </div>
              </div>

              {/* Quick Links */}
              <div>
                <h3 className="text-lg font-bold text-[#1E293B] mb-4">
                  {copy.quickLinksHeading}
                </h3>
                <div className="grid gap-2 sm:grid-cols-2">
                  {copy.quickLinks.map((link) => (
                    <a
                      key={link.href}
                      href={link.href}
                      className="group flex items-center justify-between rounded-xl border border-[#10B981]/10 bg-[#FAFAFA] px-4 py-3 text-sm text-[#64748B] transition-all hover:border-[#10B981]/30 hover:text-[#10B981]"
                      target={
                        link.href.startsWith("http") ? "_blank" : undefined
                      }
                      rel={
                        link.href.startsWith("http")
                          ? "noopener noreferrer"
                          : undefined
                      }
                    >
                      <span>{link.label}</span>
                      <span className="transition-transform group-hover:translate-x-1">
                        ↗
                      </span>
                    </a>
                  ))}
                </div>
              </div>
            </div>

            {/* Social & Trust */}
            <aside className="space-y-6">
              {/* Social Links */}
              <div className="rounded-3xl border border-[#10B981]/20 bg-white p-8">
                <h3 className="text-xl font-bold text-[#1E293B] mb-4">
                  {copy.socialTitle}
                </h3>
                <p className="text-sm text-[#64748B] mb-6">
                  {isAr
                    ? "للاستفسارات العامة تابعنا أو راسلنا عبر القنوات الاجتماعية:"
                    : "For light enquiries or updates, reach us on these channels:"}
                </p>
                <div className="grid grid-cols-2 gap-3">
                  {[
                    {
                      name: "Instagram",
                      icon: "📸",
                      href: SOCIAL_LINKS.instagram,
                    },
                    {
                      name: "Facebook",
                      icon: "👍",
                      href: SOCIAL_LINKS.facebook,
                    },
                    { name: "X (Twitter)", icon: "📰", href: SOCIAL_LINKS.x },
                    {
                      name: "LinkedIn",
                      icon: "💼",
                      href: SOCIAL_LINKS.linkedin,
                    },
                  ].map((social) => (
                    <a
                      key={social.name}
                      href={social.href}
                      className="flex items-center gap-3 rounded-xl border border-[#10B981]/10 bg-[#FAFAFA] p-4 text-[#64748B] transition-all hover:border-[#10B981]/30 hover:text-[#10B981]"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <span className="text-xl">{social.icon}</span>
                      <span className="text-sm font-medium">{social.name}</span>
                    </a>
                  ))}
                </div>
              </div>

              {/* Trust Badges */}
              <div className="rounded-3xl border border-[#10B981]/20 bg-white p-8">
                <h3 className="text-xl font-bold text-[#1E293B] mb-4">
                  {copy.trustTitle}
                </h3>
                <ul className="space-y-3 mb-6">
                  {copy.trustBullets.slice(0, 3).map((item) => (
                    <li
                      key={item}
                      className="flex items-start gap-3 text-sm text-[#64748B]"
                    >
                      <span className="text-[#10B981]">✓</span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
                <div className="flex flex-wrap gap-2">
                  {["ISO 27001", "PCI DSS Ready", "HIPAA-aware"].map(
                    (badge) => (
                      <span
                        key={badge}
                        className="inline-flex items-center rounded-full border border-[#10B981]/30 bg-[#10B981]/10 px-3 py-1.5 text-xs font-semibold text-[#10B981]"
                      >
                        {badge}
                      </span>
                    ),
                  )}
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════════
          OFFICE LOCATIONS
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="py-24 bg-white">
        <div className="mx-auto max-w-7xl px-6">
          <div className="mb-12">
            <div className="flex items-center gap-4 mb-6">
              <span className="text-[#10B981] font-mono text-sm tracking-wider">
                07
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
              <span className="text-[#64748B] text-sm uppercase tracking-widest">
                {isAr ? "مواقعنا" : "Our Locations"}
              </span>
            </div>
            <h2 className="font-display text-4xl font-bold text-[#1E293B] md:text-5xl">
              {copy.locationTitle}
            </h2>
            <p className="mt-4 text-lg text-[#64748B]">
              {copy.locationSubtitle}
            </p>
          </div>

          <div className="space-y-4">
            {OFFICES.map((office) => {
              const officeCopy = isAr ? office.data.ar : office.data.en;
              return (
                <details
                  key={office.id}
                  className="group overflow-hidden rounded-2xl border border-[#10B981]/20 bg-[#FAFAFA] transition-all open:bg-white open:shadow-lg"
                  open={office.id === "doha"}
                >
                  <summary className="flex cursor-pointer items-center justify-between gap-4 px-8 py-6 text-lg font-bold text-[#1E293B] transition-colors hover:text-[#10B981]">
                    <div className="flex items-center gap-4">
                      <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#10B981]/10 text-xl">
                        📍
                      </span>
                      <span>{officeCopy.name}</span>
                    </div>
                    <div className="flex items-center gap-4">
                      <span className="text-sm font-normal text-[#64748B]">
                        {officeCopy.address}
                      </span>
                      <span className="flex h-8 w-8 items-center justify-center rounded-full bg-[#10B981]/10 text-[#10B981] transition-transform group-open:rotate-180">
                        ↓
                      </span>
                    </div>
                  </summary>
                  <div className="grid gap-6 border-t border-[#10B981]/10 p-8 md:grid-cols-[1.2fr,0.8fr]">
                    <div className="space-y-4">
                      <p className="text-[#64748B]">{officeCopy.directions}</p>
                      <ul className="space-y-2">
                        {officeCopy.access.map((item) => (
                          <li
                            key={item}
                            className="flex items-start gap-2 text-sm text-[#64748B]"
                          >
                            <span className="text-[#10B981]">•</span>
                            <span>{item}</span>
                          </li>
                        ))}
                      </ul>
                      <a
                        href={`tel:${office.phone.replace(/[^+\d]/g, "")}`}
                        className="inline-flex items-center gap-2 text-[#10B981] font-semibold hover:underline"
                      >
                        <span>📞</span>
                        {office.phone}
                      </a>
                    </div>
                    <div className="overflow-hidden rounded-2xl border border-[#10B981]/20">
                      <iframe
                        src={office.mapSrc}
                        title={`${officeCopy.name} map`}
                        className="h-[260px] w-full"
                        loading="lazy"
                        allowFullScreen
                      />
                    </div>
                  </div>
                </details>
              );
            })}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════════
          HIGHLIGHTS & AFTER SUBMIT
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="mx-auto max-w-7xl px-6">
          {/* Highlights */}
          <div className="mb-16">
            <h2 className="sr-only">{copy.highlightsTitle}</h2>
            <div className="grid gap-4 md:grid-cols-3">
              {copy.highlights.map((highlight: string, idx: number) => (
                <div
                  key={idx}
                  className="rounded-2xl border border-[#10B981]/20 bg-white p-6 text-center shadow-sm"
                >
                  <p className="font-semibold text-[#1E293B]">{highlight}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Two Column: Trust & After Submit */}
          <div className="grid gap-8 lg:grid-cols-2">
            <div className="rounded-3xl border border-[#10B981]/20 bg-white p-8">
              <h2 className="text-2xl font-bold text-[#1E293B] mb-6">
                {copy.afterSubmitTitle}
              </h2>
              <ul className="space-y-4">
                {copy.afterSubmitBullets.map((item) => (
                  <li
                    key={item}
                    className="flex items-start gap-3 text-[#64748B]"
                  >
                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#10B981]/10 text-sm text-[#10B981]">
                      ✓
                    </span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="rounded-3xl border border-[#10B981]/20 bg-white p-8">
              <h2 className="text-2xl font-bold text-[#1E293B] mb-6">
                {copy.technicalTitle}
              </h2>
              <ul className="grid gap-3 md:grid-cols-2">
                {copy.technicalBullets.map((item) => (
                  <li
                    key={item}
                    className="flex items-start gap-2 text-sm text-[#64748B]"
                  >
                    <span className="text-[#10B981]">✔</span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════════
          PARTNER PROOF / CTA - Light Editorial Style
      ═══════════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 bg-white">
        {/* Subtle Grid Background */}
        <div
          className="absolute inset-0 opacity-[0.02]"
          style={{
            backgroundImage:
              "linear-gradient(#10B981 1px, transparent 1px), linear-gradient(90deg, #10B981 1px, transparent 1px)",
            backgroundSize: "40px 40px",
          }}
        />

        <div className="relative mx-auto max-w-7xl px-6">
          <div className="mb-12">
            <div className="flex items-center gap-4 mb-6">
              <span className="text-[#10B981] font-mono text-sm tracking-wider">
                08
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
              <span className="text-[#64748B] text-sm uppercase tracking-widest">
                {isAr ? "شركاؤنا" : "Our Partners"}
              </span>
            </div>
            <h2 className="font-display text-4xl font-bold text-[#1E293B] md:text-5xl">
              {copy.partnerProofTitle}
            </h2>
            <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
              {isAr
                ? "نخدم عيادات رائدة ومراكز طبية عبر دول الخليج بحلول موثوقة ومبتكرة."
                : "We serve leading clinics and medical centers across the GCC with reliable, innovative solutions."}
            </p>
          </div>

          {/* Partner Logos */}
          <div className="grid grid-cols-2 gap-px bg-slate-200 md:grid-cols-3 lg:grid-cols-6 mb-16">
            {[
              "CarePlus Group",
              "Doha Wellness",
              "Gulf Aesthetics",
              "Laser Collective",
              "Riyadh Glow",
              "Smile Bright",
            ].map((partner, idx) => (
              <div
                key={partner}
                className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors text-center"
              >
                <span className="text-sm font-medium text-[#64748B] group-hover:text-[#10B981] transition-colors">
                  {partner}
                </span>
                <div className="w-0 group-hover:w-8 h-0.5 bg-[#10B981] mt-3 mx-auto transition-all duration-300" />
              </div>
            ))}
          </div>

          {/* CTA Card */}
          <div className="rounded-3xl border border-[#10B981]/20 bg-gradient-to-br from-[#10B981]/5 via-white to-[#10B981]/5 p-10 md:p-16 text-center">
            <div className="flex items-center gap-3 justify-center mb-6">
              <span className="text-[#10B981] font-mono text-sm">09</span>
              <div className="w-8 h-px bg-[#10B981]" />
              <span className="text-[#64748B] text-sm uppercase tracking-widest">
                {isAr ? "ابدأ الآن" : "Get Started"}
              </span>
            </div>
            <h3 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
              {isAr
                ? "ابدأ رحلة التحول الرقمي"
                : "Start Your Digital Transformation"}
            </h3>
            <p className="text-lg text-[#64748B] mb-4">
              {isAr
                ? "انضم إلى 500+ شريك في الخليج"
                : "Join 500+ partners across GCC"}
            </p>
            <div className="inline-block px-6 py-3 bg-[#10B981]/10 text-[#10B981] font-semibold rounded-full mb-8">
              {isAr
                ? "تجربة مجانية 7 أيام + إعداد مجاني"
                : "7-Day Free Trial + Free Setup"}
            </div>
            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
              <Link
                href={`/${params.lang}/demo`}
                className="group relative px-10 py-5 bg-[#10B981] text-white font-bold overflow-hidden"
              >
                <span className="relative z-10 flex items-center gap-2">
                  {isAr ? "احجز عرضاً" : "Book a Demo"}
                  <span className="transition-transform group-hover:translate-x-1">
                    {isAr ? "←" : "→"}
                  </span>
                </span>
                <div className="absolute inset-0 bg-[#059669] translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
              </Link>
              <Link
                href={`/${params.lang}/signup`}
                className="px-10 py-5 border-2 border-[#1E293B] text-[#1E293B] font-bold hover:bg-[#1E293B] hover:text-white transition-colors"
              >
                {isAr ? "ابدأ مجاناً" : "Start Free"}
              </Link>
            </div>
            <div className="flex flex-wrap gap-8 justify-center text-sm text-[#64748B] mt-10">
              <div className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 bg-[#10B981]" />
                <span>
                  {isAr ? "بدون بطاقة ائتمان" : "No credit card required"}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 bg-[#10B981]" />
                <span>{isAr ? "إعداد في 48 ساعة" : "Setup in 48 hours"}</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 bg-[#10B981]" />
                <span>{isAr ? "دعم فني 24/7" : "24/7 technical support"}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <JsonLd data={schemaOrg} />
    </main>
  );
}