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

export function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Metadata {
  return buildPageMetadata({
    lang: params.lang,
    title:
      params.lang === "ar"
        ? "برنامج الشركاء | اكسب 20% عمولة | موعدي"
        : "Partner Program | Earn 20% Commission | Mawidi",
    description:
      params.lang === "ar"
        ? "انضم لبرنامج شركاء موعدي واكسب 20% عمولة لمدة 12 شهرًا على كل إحالة. مثالي لمستشاري الأعمال ومزودي تكنولوجيا المعلومات وموزعي المعدات الطبية."
        : "Join the Mawidi Partner Program and earn 20% recurring commission for 12 months on every referral. Ideal for business consultants, IT providers, and medical equipment distributors.",
    path: "/partners",
    keywords: [
      "partner program",
      "referral commission",
      "mawidi partners",
      "reseller program",
      "برنامج شركاء",
      "عمولة إحالة",
      "شركاء موعدي",
    ],
  });
}

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

  return (
    <div dir={isAr ? "rtl" : "ltr"} className="bg-white dark:bg-slate-950">
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-b from-slate-50 to-white px-6 pb-16 pt-24 dark:from-slate-900 dark:to-slate-950 md:pb-24 md:pt-32">
        <div className="mx-auto max-w-4xl text-center">
          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-brand-green/30 bg-brand-green/10 px-4 py-2 text-sm font-medium text-brand-green">
            <span className="inline-block h-2 w-2 rounded-full bg-brand-green animate-pulse" />
            {isAr ? "برنامج الشركاء" : "Partner Program"}
          </div>

          <h1 className="text-4xl font-bold tracking-tight text-slate-900 dark:text-white md:text-6xl">
            {isAr
              ? "اكسب 20% عمولة على كل إحالة"
              : "Earn 20% Commission on Every Referral"}
          </h1>

          <p className="mx-auto mt-6 max-w-2xl text-lg text-slate-600 dark:text-slate-300 md:text-xl">
            {isAr
              ? "انضم لبرنامج شركاء موعدي واكسب عمولة متكررة لمدة 12 شهرًا على كل عميل تحيله إلينا."
              : "Join the Mawidi Partner Program and earn recurring commission for 12 months on every client you refer to us."}
          </p>

          <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
            <a
              href="#apply"
              className="inline-flex w-full items-center justify-center rounded-xl bg-brand-green px-8 py-4 text-lg font-semibold text-white transition-colors hover:bg-brand-greenHover sm:w-auto"
            >
              {isAr ? "سجّل كشريك الآن" : "Become a Partner"}
            </a>
            <a
              href="#how-it-works"
              className="inline-flex w-full items-center justify-center rounded-xl border border-slate-300 bg-white px-8 py-4 text-lg font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700 sm:w-auto"
            >
              {isAr ? "كيف يعمل البرنامج؟" : "How It Works"}
            </a>
          </div>
        </div>
      </section>

      {/* Who Is This For */}
      <section className="bg-white px-6 py-16 dark:bg-slate-950 md:py-24">
        <div className="mx-auto max-w-5xl">
          <h2 className="mb-4 text-center text-3xl font-bold text-slate-900 dark:text-white md:text-4xl">
            {isAr ? "لمن هذا البرنامج؟" : "Who Is This For?"}
          </h2>
          <p className="mx-auto mb-12 max-w-2xl text-center text-lg text-slate-600 dark:text-slate-300">
            {isAr
              ? "إذا كنت تعمل مع شركات تحتاج إلى إدارة المواعيد، فهذا البرنامج لك."
              : "If you work with businesses that need appointment management, this program is for you."}
          </p>

          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
            {[
              {
                titleEn: "Business Setup Consultants",
                titleAr: "مستشارو تأسيس الأعمال",
                descEn:
                  "Recommend Mawidi to new businesses setting up in the GCC. Earn on every client you onboard.",
                descAr:
                  "أوصِ بموعدي للشركات الجديدة في دول الخليج. اكسب عمولة على كل عميل تسجّله.",
                icon: "M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 0h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z",
              },
              {
                titleEn: "IT Providers & System Integrators",
                titleAr: "مزودو تكنولوجيا المعلومات",
                descEn:
                  "Bundle Mawidi with your IT solutions. Add AI appointment management to your service offering.",
                descAr:
                  "أضف موعدي لحزمة حلولك التقنية. وفّر إدارة مواعيد بالذكاء الاصطناعي لعملائك.",
                icon: "M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z",
              },
              {
                titleEn: "Medical Equipment Distributors",
                titleAr: "موزعو المعدات الطبية",
                descEn:
                  "Already selling to clinics? Add Mawidi as a software upsell and earn recurring revenue.",
                descAr:
                  "تبيع للعيادات بالفعل؟ أضف موعدي كبرنامج مكمل واكسب إيرادات متكررة.",
                icon: "M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z",
              },
            ].map((item) => (
              <div
                key={item.titleEn}
                className="rounded-2xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-700 dark:bg-slate-900"
              >
                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-brand-green/10">
                  <svg
                    className="h-6 w-6 text-brand-green"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={1.5}
                      d={item.icon}
                    />
                  </svg>
                </div>
                <h3 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
                  {isAr ? item.titleAr : item.titleEn}
                </h3>
                <p className="text-sm text-slate-600 dark:text-slate-400">
                  {isAr ? item.descAr : item.descEn}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section
        id="how-it-works"
        className="bg-slate-50 px-6 py-16 dark:bg-slate-900 md:py-24"
      >
        <div className="mx-auto max-w-5xl">
          <h2 className="mb-12 text-center text-3xl font-bold text-slate-900 dark:text-white md:text-4xl">
            {isAr ? "كيف يعمل البرنامج؟" : "How It Works"}
          </h2>

          <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
            {[
              {
                step: 1,
                titleEn: "Apply & Get Your Code",
                titleAr: "سجّل واحصل على رمزك",
                descEn:
                  "Fill out the form below. We review your application and send you a unique referral code within 48 hours.",
                descAr:
                  "أكمل النموذج أدناه. نراجع طلبك ونرسل لك رمز إحالة فريد خلال 48 ساعة.",
                icon: "M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z",
              },
              {
                step: 2,
                titleEn: "Refer Businesses",
                titleAr: "أحِل الشركات",
                descEn:
                  "Share your referral link with businesses that need appointment management. We handle the sales and onboarding.",
                descAr:
                  "شارك رابط الإحالة مع الشركات التي تحتاج إدارة مواعيد. نحن نتولى المبيعات والإعداد.",
                icon: "M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z",
              },
              {
                step: 3,
                titleEn: "Earn Every Month",
                titleAr: "اكسب كل شهر",
                descEn:
                  "Receive 20% of your referral's subscription fee every month for 12 months. Paid directly to your account.",
                descAr:
                  "احصل على 20% من رسوم اشتراك كل عميل أحلته شهريًا لمدة 12 شهرًا. تُدفع مباشرة لحسابك.",
                icon: "M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z",
              },
            ].map(({ step, titleEn, titleAr, descEn, descAr, icon }) => (
              <div
                key={step}
                className="relative rounded-2xl border border-slate-200 bg-white p-8 text-center shadow-sm dark:border-slate-700 dark:bg-slate-800"
              >
                <div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-brand-green px-3 py-1 text-sm font-bold text-white">
                  {step}
                </div>
                <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-brand-green/10 text-brand-green">
                  <svg
                    className="h-7 w-7"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={1.5}
                      d={icon}
                    />
                  </svg>
                </div>
                <h3 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
                  {isAr ? titleAr : titleEn}
                </h3>
                <p className="text-sm text-slate-600 dark:text-slate-400">
                  {isAr ? descAr : descEn}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Commission Structure / Earnings Calculator */}
      <section className="bg-white px-6 py-16 dark:bg-slate-950 md:py-24">
        <div className="mx-auto max-w-5xl">
          <h2 className="mb-4 text-center text-3xl font-bold text-slate-900 dark:text-white md:text-4xl">
            {isAr ? "هيكل العمولة" : "Commission Structure"}
          </h2>
          <p className="mx-auto mb-12 max-w-2xl text-center text-lg text-slate-600 dark:text-slate-300">
            {isAr
              ? "عمولة بسيطة وشفافة — 20% من قيمة الاشتراك الشهري لمدة 12 شهرًا."
              : "Simple and transparent — 20% of the monthly subscription fee for 12 months."}
          </p>

          <div className="overflow-hidden rounded-2xl border border-slate-200 shadow-lg dark:border-slate-800">
            <table className="w-full border-collapse bg-white text-left text-sm dark:bg-slate-900">
              <thead>
                <tr className="bg-slate-50 dark:bg-slate-800">
                  <th className="px-6 py-4 font-bold text-slate-900 dark:text-white">
                    {isAr ? "عدد الإحالات" : "Referrals"}
                  </th>
                  <th className="px-6 py-4 font-bold text-slate-900 dark:text-white">
                    {isAr ? "متوسط الاشتراك" : "Avg. Plan"}
                  </th>
                  <th className="px-6 py-4 font-bold text-slate-900 dark:text-white">
                    {isAr ? "العمولة الشهرية" : "Monthly Earnings"}
                  </th>
                  <th className="bg-brand-green/10 px-6 py-4 font-bold text-brand-green">
                    {isAr ? "الأرباح السنوية" : "12-Month Total"}
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
                {[
                  { refs: 5, plan: "$149", monthly: "$149", annual: "$1,788" },
                  { refs: 10, plan: "$149", monthly: "$298", annual: "$3,576" },
                  { refs: 25, plan: "$149", monthly: "$745", annual: "$8,940" },
                  {
                    refs: 50,
                    plan: "$149",
                    monthly: "$1,490",
                    annual: "$17,880",
                  },
                ].map((row) => (
                  <tr key={row.refs}>
                    <td className="px-6 py-4 font-medium text-slate-900 dark:text-slate-200">
                      {row.refs}
                    </td>
                    <td className="px-6 py-4 text-slate-600 dark:text-slate-400">
                      {row.plan}/{isAr ? "شهر" : "mo"}
                    </td>
                    <td className="px-6 py-4 font-medium text-slate-900 dark:text-slate-200">
                      {row.monthly}
                    </td>
                    <td className="bg-brand-green/5 px-6 py-4 font-bold text-brand-green">
                      {row.annual}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <p className="mt-4 text-center text-sm text-slate-500 dark:text-slate-400">
            {isAr
              ? "* بناءً على خطة Pro بسعر $149/شهر. الأرباح الفعلية تعتمد على الخطة المختارة من قبل العميل."
              : "* Based on the Pro plan at $149/mo. Actual earnings depend on the plan chosen by your referral."}
          </p>
        </div>
      </section>

      {/* Partner Benefits */}
      <section className="bg-slate-50 px-6 py-16 dark:bg-slate-900 md:py-24">
        <div className="mx-auto max-w-5xl">
          <h2 className="mb-12 text-center text-3xl font-bold text-slate-900 dark:text-white md:text-4xl">
            {isAr ? "مزايا الشريك" : "Partner Benefits"}
          </h2>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            {[
              {
                en: "20% recurring commission for 12 months",
                ar: "عمولة متكررة 20% لمدة 12 شهرًا",
              },
              {
                en: "Dedicated partner dashboard to track referrals",
                ar: "لوحة تحكم مخصصة لتتبع الإحالات",
              },
              {
                en: "Co-branded marketing materials",
                ar: "مواد تسويقية مشتركة",
              },
              {
                en: "Priority support for your referred clients",
                ar: "دعم أولوي للعملاء المُحالين",
              },
              {
                en: "No cap on earnings — refer unlimited businesses",
                ar: "لا حد أقصى للأرباح — أحِل عددًا غير محدود من الشركات",
              },
              {
                en: "Monthly payouts via bank transfer",
                ar: "دفعات شهرية عبر التحويل البنكي",
              },
            ].map((benefit) => (
              <div
                key={benefit.en}
                className="flex items-start gap-3 rounded-xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-800"
              >
                <div className="mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-brand-green/10">
                  <svg
                    className="h-4 w-4 text-brand-green"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2.5}
                      d="M4.5 12.75l6 6 9-13.5"
                    />
                  </svg>
                </div>
                <span className="text-sm font-medium text-slate-700 dark:text-slate-200">
                  {isAr ? benefit.ar : benefit.en}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Application Form */}
      <section
        id="apply"
        className="bg-white px-6 py-16 dark:bg-slate-950 md:py-24"
      >
        <div className="mx-auto max-w-2xl">
          <h2 className="mb-4 text-center text-3xl font-bold text-slate-900 dark:text-white md:text-4xl">
            {isAr ? "سجّل كشريك" : "Apply to Become a Partner"}
          </h2>
          <p className="mx-auto mb-10 max-w-xl text-center text-lg text-slate-600 dark:text-slate-300">
            {isAr
              ? "أكمل النموذج أدناه وسنتواصل معك خلال 48 ساعة."
              : "Fill out the form below and we'll get back to you within 48 hours."}
          </p>

          <div className="rounded-2xl border border-slate-200 bg-slate-50 p-6 dark:border-slate-700 dark:bg-slate-900 md:p-8">
            <PartnerSignupForm isAr={isAr} />
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="bg-slate-50 px-6 py-16 dark:bg-slate-900 md:py-24">
        <div className="mx-auto max-w-3xl">
          <h2 className="mb-12 text-center text-3xl font-bold text-slate-900 dark:text-white md:text-4xl">
            {isAr ? "أسئلة شائعة" : "Frequently Asked Questions"}
          </h2>

          <div className="space-y-6">
            {[
              {
                q: isAr ? "كم يمكنني أن أكسب؟" : "How much can I earn?",
                a: isAr
                  ? "تكسب 20% من رسوم الاشتراك الشهري لكل عميل تحيله، لمدة 12 شهرًا. مثلاً: إحالة 10 عملاء على خطة Pro ($149/شهر) = $298/شهر = $3,576/سنة."
                  : "You earn 20% of the monthly subscription fee for each client you refer, for 12 months. Example: refer 10 clients on the Pro plan ($149/mo) = $298/mo = $3,576/year.",
              },
              {
                q: isAr
                  ? "هل أحتاج خبرة تقنية؟"
                  : "Do I need technical expertise?",
                a: isAr
                  ? "لا، نحن نتولى كل شيء — من العرض التجريبي إلى الإعداد والدعم الفني. كل ما تحتاجه هو تعريف عملائك بموعدي."
                  : "No. We handle everything — from the demo to setup and technical support. All you need to do is introduce your clients to Mawidi.",
              },
              {
                q: isAr
                  ? "كيف أتتبع إحالاتي وأرباحي؟"
                  : "How do I track my referrals and earnings?",
                a: isAr
                  ? "ستحصل على لوحة تحكم شركاء مخصصة تعرض جميع الإحالات، حالة التحويل، والأرباح المستحقة في الوقت الفعلي."
                  : "You'll get a dedicated partner dashboard showing all referrals, conversion status, and pending earnings in real-time.",
              },
              {
                q: isAr ? "متى أحصل على أرباحي؟" : "When do I get paid?",
                a: isAr
                  ? "تُدفع العمولات شهريًا عبر التحويل البنكي، بعد 30 يومًا من دفع العميل لاشتراكه."
                  : "Commissions are paid monthly via bank transfer, 30 days after the client pays their subscription.",
              },
              {
                q: isAr
                  ? "هل هناك حد أدنى للإحالات؟"
                  : "Is there a minimum number of referrals?",
                a: isAr
                  ? "لا، لا يوجد حد أدنى. اكسب عمولة حتى على إحالة واحدة."
                  : "No minimum. You earn commission on every single referral, even just one.",
              },
            ].map(({ q, a }) => (
              <details
                key={q}
                className="group rounded-xl border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800"
              >
                <summary className="flex cursor-pointer items-center justify-between p-6 text-left font-semibold text-slate-900 dark:text-white">
                  {q}
                  <svg
                    className="h-5 w-5 flex-shrink-0 text-slate-400 transition-transform group-open:rotate-180"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M19 9l-7 7-7-7"
                    />
                  </svg>
                </summary>
                <p className="px-6 pb-6 text-slate-600 dark:text-slate-400">
                  {a}
                </p>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="bg-gradient-to-b from-white to-slate-50 px-6 py-16 dark:from-slate-950 dark:to-slate-900 md:py-24">
        <div className="mx-auto max-w-3xl text-center">
          <h2 className="text-3xl font-bold text-slate-900 dark:text-white md:text-4xl">
            {isAr ? "جاهز لبدء الكسب؟" : "Ready to Start Earning?"}
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-lg text-slate-600 dark:text-slate-300">
            {isAr
              ? "انضم لشبكة شركاء موعدي اليوم وابدأ بكسب عمولة متكررة."
              : "Join the Mawidi partner network today and start earning recurring commission."}
          </p>

          <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
            <a
              href="#apply"
              className="inline-flex w-full items-center justify-center rounded-xl bg-brand-green px-8 py-4 text-lg font-semibold text-white transition-colors hover:bg-brand-greenHover sm:w-auto"
            >
              {isAr ? "سجّل كشريك الآن" : "Apply Now"}
            </a>
            <Link
              href={`/${lang}/contact`}
              className="inline-flex w-full items-center justify-center rounded-xl border border-slate-300 bg-white px-8 py-4 text-lg font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700 sm:w-auto"
            >
              {isAr ? "تواصل معنا" : "Contact Us"}
            </Link>
          </div>
        </div>
      </section>

      {/* JSON-LD FAQPage */}
      <JsonLd
        type="FAQPage"
        data={{
          mainEntity: [
            {
              "@type": "Question",
              name: "How much can I earn as a Mawidi partner?",
              acceptedAnswer: {
                "@type": "Answer",
                text: "You earn 20% of the monthly subscription fee for each client you refer, for 12 months. For example, referring 10 clients on the Pro plan ($149/mo) earns you $298/month or $3,576/year.",
              },
            },
            {
              "@type": "Question",
              name: "Do I need technical expertise to become a partner?",
              acceptedAnswer: {
                "@type": "Answer",
                text: "No. Mawidi handles everything from demos to setup and technical support. All you need to do is introduce your clients to the platform.",
              },
            },
            {
              "@type": "Question",
              name: "How do I track my referrals and earnings?",
              acceptedAnswer: {
                "@type": "Answer",
                text: "You get a dedicated partner dashboard showing all referrals, conversion status, and pending earnings in real-time.",
              },
            },
            {
              "@type": "Question",
              name: "When do I get paid?",
              acceptedAnswer: {
                "@type": "Answer",
                text: "Commissions are paid monthly via bank transfer, 30 days after the client pays their subscription.",
              },
            },
            {
              "@type": "Question",
              name: "Is there a minimum number of referrals?",
              acceptedAnswer: {
                "@type": "Answer",
                text: "No minimum. You earn commission on every single referral, even just one.",
              },
            },
          ],
        }}
      />
    </div>
  );
}