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

export const revalidate = SITE.revalidateSeconds;

export default function ProductPage({ params }: { params: { lang: Lang } }) {
  const isAr = params.lang === "ar";
  const dir = isAr ? "rtl" : "ltr";
  const text = (en: string, ar: string) => (isAr ? ar : en);
  const whatsappNumber = SITE.contact.whatsapp.replace(/[^0-9+]/g, "");

  const heroStats = [
    text(
      "85% fewer no-shows with proactive reminders",
      "انخفاض عدم الحضور بنسبة 85% بفضل التذكيرات الاستباقية",
    ),
    text(
      "3× faster response time vs legacy call centres",
      "سرعة استجابة أعلى بثلاث مرات مقارنة بمراكز الاتصال التقليدية",
    ),
    text(
      "Ready for Arabic + English teams across every branch",
      "جاهز للفرق العربية والإنجليزية في كل الفروع",
    ),
  ];

  const heroBullets = [
    text(
      "WhatsApp-first booking, voice agents, and web journeys that convert.",
      "حجوزات عبر واتساب، ووكلاء صوتيون، ورحلات ويب تحول العملاء.",
    ),
    text(
      "Revenue operations from quote to invoice with deposits, taxes, and payouts.",
      "تشغيل الإيرادات من العرض حتى الفاتورة مع العربونات والضرائب والتحويلات.",
    ),
    text(
      "Dashboards and owner digests that keep leadership aligned daily.",
      "لوحات وتحليلات وملخصات يومية تُطلع الإدارة على المستجدات.",
    ),
  ];

  const pillars = [
    {
      icon: "💬",
      title: text("Conversations that convert", "محادثات تحوِّل فوراً"),
      bullets: [
        text(
          "24/7 WhatsApp, SMS, email, and voice agents trained on Gulf scripts.",
          "وكلاء واتساب وSMS وبريد وصوت على مدار الساعة بلهجة خليجية.",
        ),
        text(
          "Templates for reminders, upsell campaigns, and deposit requests.",
          "قوالب للتذكيرات وحملات الترقية وطلبات العربون.",
        ),
        text(
          "Inbox escalation with full transcripts for human follow-up.",
          "تصعيد لصندوق وارد بشري مع سجل المحادثة الكامل.",
        ),
      ],
    },
    {
      icon: "📅",
      title: text("Bookings & scheduling", "الحجوزات والجدولة"),
      bullets: [
        text(
          "Live availability from calendars, PMS, and custom forms.",
          "إتاحة فورية من التقاويم وأنظمة الحجز والنماذج المخصصة.",
        ),
        text(
          "Slot suggestions, waitlists, and group bookings in one view.",
          "اقتراح المواعيد وقوائم الانتظار وحجوزات المجموعات في شاشة واحدة.",
        ),
        text(
          "Automated confirmations with editing links for customers.",
          "تأكيدات آلية مع روابط تعديل مخصصة للعملاء.",
        ),
      ],
    },
    {
      icon: "🚚",
      title: text("Operations & dispatch", "التشغيل والتوزيع"),
      bullets: [
        text(
          "Assign jobs by skill, availability, depot, or vehicle class.",
          "تعيين المهام حسب المهارة والتوفر والمستودع أو نوع المركبة.",
        ),
        text(
          "Status tracking from on-my-way to completed with proof.",
          'تتبع الحالة من "في الطريق" إلى "اكتملت" مع إثبات كامل.',
        ),
        text(
          "Safety checklists, approvals, and attachments on every job card.",
          "قوائم سلامة وموافقات ومرفقات في كل بطاقة مهمة.",
        ),
      ],
    },
    {
      icon: "💳",
      title: text("Payments & finance", "المدفوعات والمالية"),
      bullets: [
        text(
          "Deposits, partial payments, and milestone billing.",
          "عربونات ومدفوعات جزئية وفوترة حسب المراحل.",
        ),
        text(
          "Multi-VAT invoices, credit notes, and automated receipts.",
          "فواتير بضريبة متعددة وإشعارات دائن وإيصالات تلقائية.",
        ),
        text(
          "Owner digests with revenue, margin, and SLA alerts.",
          "ملخصات يومية للمالك تعرض الإيرادات والهامش وتنبيهات SLA.",
        ),
      ],
    },
  ];

  const featureSuites = [
    {
      badge: text("Suite 01", "الحزمة 01"),
      title: text("Messages & campaigns", "الرسائل والحملات"),
      description: text(
        "Unified inbox, broadcast engine, and AI replies—covered in Arabic and English with compliance controls.",
        "صندوق موحد، وبث مستهدف، وردود ذكية بالعربية والإنجليزية مع ضوابط امتثال.",
      ),
      highlights: [
        text("Reminder orchestration", "تنسيق التذكيرات"),
        text("Two-way chat & escalation", "محادثات ثنائية وتصعيد"),
        text("Campaign analytics", "تحليلات الحملات"),
      ],
      href: `/${params.lang}/features/messages`,
    },
    {
      badge: text("Suite 02", "الحزمة 02"),
      title: text("Growth automation", "أتمتة النمو"),
      description: text(
        "Journeys that nurture leads, re-engage lapsed clients, and upsell premium services without manual follow-up.",
        "رحلات ترعى العملاء المحتملين، وتعيد تنشيط العملاء المتوقفين، وتروّج للخدمات المميزة دون متابعة يدوية.",
      ),
      highlights: [
        text("Lead capture playbooks", "سيناريوهات التقاط العملاء"),
        text("Cross-sell triggers", "محفزات البيع الإضافي"),
        text("Owner digest automation", "أتمتة ملخص المالك"),
      ],
      href: `/${params.lang}/features/growth`,
    },
    {
      badge: text("Suite 03", "الحزمة 03"),
      title: text("Dashboards & analytics", "لوحات وتحليلات"),
      description: text(
        "Real-time KPIs across branches, sectors, and staff—exportable insights for finance, ops, and leadership.",
        "مؤشرات لحظية عبر الفروع والقطاعات والموظفين مع رؤى قابلة للتصدير للمالية والعمليات والإدارة.",
      ),
      highlights: [
        text(
          "Conversion, prepaid, and SLA KPIs",
          "مؤشرات التحويل والمدفوع مسبقاً وSLA",
        ),
        text("Branch and sector heatmaps", "خرائط حرارية للفروع والقطاعات"),
        text("CSV/PDF exports", "تصدير CSV/PDF"),
      ],
      href: `/${params.lang}/features/dashboard`,
    },
    {
      badge: text("Suite 04", "الحزمة 04"),
      title: text("Integrations & platform", "التكامل والمنصة"),
      description: text(
        "Open APIs, PMS, accounting, and routing integrations keep Mawidi connected to your stack.",
        "واجهات وبرمجيات مفتوحة، وتكامل مع أنظمة الحجز والمحاسبة والتوجيه لربط مويدي بمنظومتك.",
      ),
      highlights: [
        text("Calendars & PMS", "التقاويم وأنظمة الحجز"),
        text("Payments & accounting", "الدفع والمحاسبة"),
        text("Maps & telematics", "الخرائط والتليماتيك"),
      ],
      href: `/${params.lang}/features/integrations`,
    },
  ];

  const workflow = [
    {
      title: text("1. Capture & qualify", "١. التقاط وتأهيل"),
      description: text(
        "WhatsApp agent gathers service, VIN, photos, and preferred slot while scoring urgency.",
        "وكيل واتساب يجمع الخدمة ورقم الهيكل والصور والموعد المفضل مع تقييم درجة الأهمية.",
      ),
    },
    {
      title: text("2. Schedule & confirm", "٢. الجدولة والتأكيد"),
      description: text(
        "System suggests slots, books across branches, and sends bilingual confirmation with edit link.",
        "النظام يقترح المواعيد، ويحجز عبر الفروع، ويرسل تأكيداً ثنائياً مع رابط تعديل.",
      ),
    },
    {
      title: text("3. Deliver & document", "٣. التنفيذ والتوثيق"),
      description: text(
        "Dispatch board assigns teams, tracks status, and stores photos, signatures, and checklists.",
        "لوحة التوزيع تعيّن الفرق، وتتابع الحالة، وتحفظ الصور والتوقيعات وقوائم الفحص.",
      ),
    },
    {
      title: text("4. Invoice & analyse", "٤. الفوترة والتحليل"),
      description: text(
        "Convert job cards to invoices, collect deposits, reconcile payouts, and feed owner digest.",
        "تحويل بطاقات المهام إلى فواتير، تحصيل العربونات، تسوية التحويلات، وتغذية ملخص المالك.",
      ),
    },
  ];

  const industries = [
    {
      icon: "🚗",
      title: text("Mobility & Industry", "النقل والصناعة"),
      description: text(
        "Fleets, recovery, manufacturing, and distribution operations.",
        "الأساطيل والإنقاذ والتصنيع والتوزيع.",
      ),
      href: `/${params.lang}/industries/mobility-industry`,
    },
    {
      icon: "💆",
      title: text("Beauty & Wellness", "الجمال والعافية"),
      description: text(
        "Salons, clinics, and spas with membership and VIP flows.",
        "الصالونات والعيادات والمنتجعات بخطط العضوية والضيوف المميزين.",
      ),
      href: `/${params.lang}/industries/beauty-wellness`,
    },
    {
      icon: "🏥",
      title: text("Healthcare & Clinics", "الرعاية الصحية والعيادات"),
      description: text(
        "Multispecialty clinics with compliance-ready scripts.",
        "عيادات متعددة التخصصات مع نصوص متوافقة وجاهزة.",
      ),
      href: `/${params.lang}/industries/health-care`,
    },
    {
      icon: "🍽️",
      title: text("Food, Leisure & Retail", "الأغذية والترفيه والتجزئة"),
      description: text(
        "F&B, dark kitchens, and experiences needing prepayment.",
        "مطاعم ومطابخ سحابية وتجارب تتطلب الدفع المسبق.",
      ),
      href: `/${params.lang}/industries/food-leisure`,
    },
  ];

  const metrics = [
    {
      label: text("Bookings captured", "الحجوزات المحفوظة"),
      value: text("1.2M+", "١٫٢ مليون+"),
    },
    {
      label: text("Arabic templates approved", "قوالب عربية معتمدة"),
      value: text("350+", "٣٥٠+"),
    },
    {
      label: text("Avg. launch time", "متوسط وقت الإطلاق"),
      value: text("14 days", "١٤ يوماً"),
    },
  ];

  return (
    <main
      dir={dir}
      className="min-h-screen bg-slate-50 dark:bg-slate-950 text-brand-ink dark:text-white"
    >
      {/* Hero */}
      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-brand-ink text-white">
        <div className="absolute inset-0 bg-grid-white/5 bg-[size:24px_24px]" />
        <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28 space-y-10">
          <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">
            <span className="text-2xl">✨</span>
            <span>{text("The Mawidi platform", "منصة موعدي")}</span>
          </div>
          <div className="max-w-4xl space-y-6">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight">
              {text(
                "One Mawidi platform for every booking, job, and payment",
                "منصة موعدي واحدة لكل حجز ومهمة ودفع",
              )}
            </h1>
            <p className="text-xl md:text-2xl text-slate-200 leading-relaxed">
              {text(
                "WhatsApp-first automation, dispatch, and finance tools built for GCC teams that operate across clinics, fleets, and venues.",
                "أدوات أتمتة وتوزيع ومالية تعتمد واتساب أولاً للفرق الخليجية العاملة في العيادات والأساطيل والمواقع.",
              )}
            </p>
            <ul className="space-y-2 text-slate-100 text-sm md:text-base">
              {heroBullets.map((item) => (
                <li key={item} className="flex gap-3">
                  <span className="text-brand-green">▹</span>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
            <div className="flex flex-wrap gap-3">
              <Link
                href={`/${params.lang}/demo`}
                className="inline-flex items-center justify-center px-6 py-3 rounded-xl bg-brand-green text-white font-semibold text-sm md:text-base shadow-lg hover:shadow-xl transition-all"
              >
                {text("Book a demo", "احجز عرضاً توضيحياً")}
              </Link>
              <Link
                href={`/${params.lang}/signup`}
                className="inline-flex items-center justify-center px-6 py-3 rounded-xl bg-white/10 border border-white/20 text-white font-semibold text-sm md:text-base hover:bg-white/15 transition-all"
              >
                {text("Start free trial", "ابدأ تجربة مجانية")}
              </Link>
              <a
                href={`https://wa.me/${whatsappNumber}`}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center justify-center px-6 py-3 rounded-xl bg-emerald-500 text-white font-semibold text-sm md:text-base hover:bg-emerald-400 transition-all"
              >
                {text("Chat on WhatsApp", "تحدث عبر واتساب")}
              </a>
              <Link
                href={`/${params.lang}/contact`}
                className="inline-flex items-center justify-center px-6 py-3 rounded-xl border border-white/40 text-white font-semibold text-sm md:text-base hover:bg-white/10 transition-all"
              >
                {text("Talk to sales", "تحدث إلى المبيعات")}
              </Link>
            </div>
            <div className="grid gap-4 sm:grid-cols-3">
              {heroStats.map((stat) => (
                <div
                  key={stat}
                  className="rounded-2xl border border-white/10 bg-white/10 backdrop-blur-sm px-5 py-4 text-sm font-semibold text-slate-100"
                >
                  {stat}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Pillars */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="text-center space-y-4 mb-12">
          <h2 className="text-3xl md:text-4xl font-extrabold">
            {text(
              "Everything in one WhatsApp-first operations cloud",
              "كل شيء في سحابة تشغيل تعتمد واتساب أولاً",
            )}
          </h2>
          <p className="text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
            {text(
              "Combine conversational AI, booking orchestration, field execution, and finance automation so every location performs like your best branch.",
              "اجمع بين الذكاء المحادثي وأتمتة الحجز وتنفيذ المهام الميدانية والمالية لتعمل كل فروعك بمستوى الفرع الأفضل.",
            )}
          </p>
        </div>
        <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
          {pillars.map((pillar) => (
            <div
              key={pillar.title}
              className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-6 shadow-sm hover:shadow-lg transition-shadow"
            >
              <div className="text-3xl mb-3">{pillar.icon}</div>
              <h3 className="text-xl font-semibold mb-3">{pillar.title}</h3>
              <ul className="space-y-2 text-sm text-slate-600 dark:text-slate-300">
                {pillar.bullets.map((bullet) => (
                  <li key={bullet} className="flex gap-2">
                    <span className="text-brand-green">•</span>
                    <span>{bullet}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      {/* Feature suites */}
      <section className="bg-white dark:bg-slate-900/40 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-10">
          <div className="text-center space-y-3">
            <h2 className="text-3xl md:text-4xl font-extrabold">
              {text(
                "Product suites to fit every team",
                "حزم المنتج التي تناسب كل فريق",
              )}
            </h2>
            <p className="text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
              {text(
                "Dive deeper into messages, growth, dashboards, and integrations—each suite comes ready with playbooks, metrics, and onboarding.",
                "تعمّق في الرسائل والنمو ولوحات التحكم والتكاملات—كل حزمة جاهزة بالسيناريوهات والمحاور وملفات الإعداد.",
              )}
            </p>
          </div>
          <div className="grid gap-6 md:grid-cols-2">
            {featureSuites.map((suite) => (
              <div
                key={suite.title}
                className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/60 p-6 space-y-4"
              >
                <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-brand-green">
                  <span>◆</span>
                  {suite.badge}
                </span>
                <h3 className="text-2xl font-bold">{suite.title}</h3>
                <p className="text-sm text-slate-600 dark:text-slate-300">
                  {suite.description}
                </p>
                <div className="flex flex-wrap gap-2">
                  {suite.highlights.map((highlight) => (
                    <span
                      key={highlight}
                      className="inline-flex items-center rounded-full bg-white dark:bg-slate-800 px-3 py-1 text-xs text-slate-700 dark:text-slate-200 border border-slate-200 dark:border-slate-700"
                    >
                      {highlight}
                    </span>
                  ))}
                </div>
                <Link
                  href={suite.href}
                  className="inline-flex items-center gap-2 text-sm font-semibold text-brand-green hover:text-brand-green/80"
                >
                  {text("Explore this suite", "استكشف هذه الحزمة")}
                  <span aria-hidden>→</span>
                </Link>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Workflow */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid gap-10 lg:grid-cols-[1.2fr,1fr] items-start">
          <div className="space-y-4">
            <h2 className="text-3xl md:text-4xl font-extrabold">
              {text(
                "Lead to revenue in four connected steps",
                "من العميل المحتمل إلى الإيراد في أربع خطوات مترابطة",
              )}
            </h2>
            <p className="text-lg text-slate-600 dark:text-slate-300">
              {text(
                "Every Mawidi workflow connects channels, people, and finance so you never lose context between teams.",
                "كل سير عمل في موعدي يربط القنوات والفرق والمالية لتبقى الصورة واضحة لدى الجميع.",
              )}
            </p>
            <div className="space-y-4">
              {workflow.map((item, index) => (
                <div
                  key={item.title}
                  className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-5"
                >
                  <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-brand-green/10 text-brand-green font-semibold mb-3">
                    {index + 1}
                  </div>
                  <h3 className="text-xl font-semibold mb-2">{item.title}</h3>
                  <p className="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">
                    {item.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
          <div className="rounded-2xl border border-brand-green/20 bg-brand-green/5 dark:bg-emerald-900/30 p-6 space-y-4">
            <h3 className="text-xl font-semibold">
              {text("What your customer sees", "ما يراه عميلك")}
            </h3>
            <ul className="space-y-3 text-sm text-slate-700 dark:text-slate-200">
              <li className="flex gap-3">
                <span className="text-brand-green">▹</span>
                <span>
                  {text(
                    "“Hi Marwa, the Prado brake inspection is booked for 12 Oct. Need to reschedule? Tap here.”",
                    "«مرحباً مروى، تم حجز فحص فرامل البرادو بتاريخ 12 أكتوبر. تحتاجين لتغيير الموعد؟ اضغطي هنا.»",
                  )}
                </span>
              </li>
              <li className="flex gap-3">
                <span className="text-brand-green">▹</span>
                <span>
                  {text(
                    "“Approve Brembo brake-lining kit (+QAR 650) and we will proceed immediately.”",
                    "«الموافقة على طقم فرامل بريمبو (+650 ر.ق) وسنواصل التنفيذ فوراً.»",
                  )}
                </span>
              </li>
              <li className="flex gap-3">
                <span className="text-brand-green">▹</span>
                <span>
                  {text(
                    "“Your driver is 12 minutes away. Live location and invoice link attached.”",
                    "«سائقك يبعد 12 دقيقة. موقع مباشر ورابط الفاتورة مرفق.»",
                  )}
                </span>
              </li>
            </ul>
            <p className="text-xs text-slate-500 dark:text-slate-300">
              {text(
                "All messages stay in one thread with audit trails, templates, and AI recommendations.",
                "جميع الرسائل تبقى في محادثة واحدة مع سجل تدقيق وقوالب وتوصيات ذكية.",
              )}
            </p>
          </div>
        </div>
      </section>

      {/* Industries */}
      <section className="bg-white dark:bg-slate-900/40 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-10">
          <div className="text-center space-y-4">
            <h2 className="text-3xl md:text-4xl font-extrabold">
              {text(
                "Built for the sectors that move the region",
                "مصمم للقطاعات التي تحرك المنطقة",
              )}
            </h2>
            <p className="text-lg text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
              {text(
                "From clinics to fleets, Mawidi adapts language, compliance, payments, and analytics for every industry.",
                "من العيادات إلى الأساطيل، يضبط موعدي اللغة والامتثال والمدفوعات والتحليلات لكل قطاع.",
              )}
            </p>
          </div>
          <div className="grid gap-6 md:grid-cols-2">
            {industries.map((industry) => (
              <div
                key={industry.title}
                className="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900/60 p-6 space-y-3 hover:shadow-lg transition-shadow"
              >
                <div className="text-3xl">{industry.icon}</div>
                <h3 className="text-xl font-semibold">{industry.title}</h3>
                <p className="text-sm text-slate-600 dark:text-slate-300">
                  {industry.description}
                </p>
                <Link
                  href={industry.href}
                  className="inline-flex items-center gap-2 text-sm font-semibold text-brand-green hover:text-brand-green/80"
                >
                  {text("See industry solution", "اطلع على حل القطاع")}
                  <span aria-hidden>→</span>
                </Link>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Metrics */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-8 md:p-12">
          <div className="grid gap-8 md:grid-cols-2">
            <div className="space-y-4">
              <h2 className="text-3xl font-extrabold">
                {text("Proof from the Mawidi network", "أرقام من شبكة موعدي")}
              </h2>
              <p className="text-lg text-slate-600 dark:text-slate-300">
                {text(
                  "We operate thousands of bilingual templates, verified journeys, and automation playbooks backed by 24/7 support.",
                  "ندير آلاف القوالب الثنائية ورحلات الأتمتة المدعومة بدعم على مدار الساعة.",
                )}
              </p>
              <ul className="space-y-2 text-sm text-slate-600 dark:text-slate-300">
                <li className="flex gap-2">
                  <span className="text-brand-green">•</span>
                  <span>
                    {text(
                      "Dedicated success squads per sector (clinic, fleet, retail).",
                      "فرق نجاح مخصصة لكل قطاع (عيادات، أساطيل، تجزئة).",
                    )}
                  </span>
                </li>
                <li className="flex gap-2">
                  <span className="text-brand-green">•</span>
                  <span>
                    {text(
                      "Security posture with audit trails, RBAC, and data residency options.",
                      "أمن متقدم مع سجلات تدقيق وصلاحيات حسب الدور وخيارات استضافة البيانات.",
                    )}
                  </span>
                </li>
                <li className="flex gap-2">
                  <span className="text-brand-green">•</span>
                  <span>
                    {text(
                      "White-glove onboarding covering templates, integrations, and training.",
                      "إطلاق موجه يغطي القوالب والتكاملات والتدريب الكامل.",
                    )}
                  </span>
                </li>
              </ul>
            </div>
            <div className="grid gap-4 sm:grid-cols-3">
              {metrics.map((metric) => (
                <div
                  key={metric.label}
                  className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/60 p-6 text-center shadow-sm"
                >
                  <div className="text-3xl font-bold text-brand-green mb-2">
                    {metric.value}
                  </div>
                  <p className="text-xs font-semibold uppercase tracking-wide text-slate-600 dark:text-slate-300">
                    {metric.label}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="bg-gradient-to-br from-slate-900 via-slate-800 to-brand-ink text-white py-16">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6">
          <h2 className="text-3xl md:text-4xl font-extrabold">
            {text(
              "Ready to launch Mawidi across your locations?",
              "جاهز لإطلاق موعدي في كل فروعك؟",
            )}
          </h2>
          <p className="text-lg text-slate-200 max-w-3xl mx-auto">
            {text(
              "We help your teams go live with WhatsApp agents, booking flows, finance automation, and dashboards in under two weeks.",
              "نساعد فرقك على الإطلاق خلال أقل من أسبوعين مع وكلاء واتساب وتدفقات الحجز والأتمتة المالية واللوحات.",
            )}
          </p>
          <div className="flex flex-wrap justify-center gap-3">
            <Link
              href={`/${params.lang}/demo`}
              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"
            >
              {text("Book a demo", "احجز عرضاً توضيحياً")}
            </Link>
            <Link
              href={`/${params.lang}/signup`}
              className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-xl bg-white/10 text-white border border-white/20 hover:bg-white/20 transition-all"
            >
              {text("Start free trial", "ابدأ تجربة مجانية")}
            </Link>
            <a
              href={`https://wa.me/${whatsappNumber}`}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-xl bg-emerald-500 text-white hover:bg-emerald-400 transition-all"
            >
              {text("Chat on WhatsApp", "تحدث عبر واتساب")}
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}