// mobile-landing-extra.jsx — Strategic sections inserted into the pain-led landing.
// Sections: WhatWeDo, PositioningRevolution, LeadQualityKPI, HowWeWork (8 steps),
//           ProofOfCompetence, LeadMagnetPrimary, LeadMagnetSecondary.
// Components are attached to window so the main file's render can use them.

const { useState: useStateMFE } = React;

/* ─────────────────── COPY ─────────────────── */

const EXTRA_COPY = {
  ar: {
    whatWeDo: {
      sid: "04 · WHAT WE DO",
      h2: "نساعد عيادات زراعة الشعر على التوقف عن مطاردة الاستفسارات العشوائية وبناء نظام اكتساب يخلق فرصًا ذات قيمة إيرادية",
      intro:
        "Clinic Growth Ops تساعد عيادات زراعة الشعر على إعادة تموضع عرضها، جذب الشريحة المناسبة، تأهيل الفرص حسب قيمتها التجارية، وبناء مسار اكتساب قابل للقياس من أول اهتمام إلى الحجز والاستشارة والقرار.",
      notLabel: "نحن لا نبدأ بالسؤال",
      notText: "«كم Lead تريد؟»",
      butLabel: "نبدأ بسؤال أهم",
      butText: "«أي نوع من العملاء يجب أن تجذبه عيادتك حتى يتحول النمو إلى إيراد حقيقي؟»",
      segments:
        "لأن سوق زراعة الشعر ليس سوقًا واحدًا. العميل المحلي الحساس للسعر ليس مثل عميل تجربة Premium. والشخص الذي يقارنك بتركيا ليس مثل من يقارنك بدبي. وعميل الجالية في فرنسا أو ألمانيا أو الخليج لديه مخاوف وتوقعات وإشارات ثقة مختلفة.",
      flowLabel: "نربط العمل كاملًا في مسار واحد",
      flow: [
        "التموضع",
        "الاستهداف",
        "صفحة الهبوط",
        "Lead Magnet ذكي",
        "التأهيل",
        "المتابعة",
        "الحجز",
        "تتبع الاستشارة",
        "المراجعات",
        "KPIs",
        "التحسين المستمر",
      ],
      cta: "اطلب تحليلًا مجانيًا لعيادتك",
    },

    positioning: {
      sid: "05 · POSITIONING",
      h2a: "عيادتك لا تنافس فقط العيادة المجاورة",
      bodyA: "في ذهن العميل، قد تكون عيادتك في مقارنة مع:",
      competitors: [
        ["TR", "تركيا — تجربة «السفر + الفندق + العملية»"],
        ["AE", "دبي — الرفاهية والمكانة"],
        ["EU", "أوروبا — صورة الأمان الطبي"],
        ["WoM", "توصيات الأصدقاء والعائلة"],
        ["$$", "عيادات محلية أرخص"],
        ["★", "عيادات لديها مراجعات أقوى"],
        ["⏱", "منافسون يردّون أسرع ويتابعون أفضل"],
      ],
      qaWeak: { label: "السؤال السطحي", text: "«كيف نحصل على Leads أكثر؟»" },
      qaStrong: {
        label: "السؤال الأفضل",
        text: "«كيف يجب أن تتموضع العيادة حتى تفهم الشريحة الصحيحة لماذا هي الاختيار المناسب؟»",
      },
      h2b: "نساعدك على اختيار الشريحة التي يجب أن تفوز بها",
      segs: [
        ["الثقة المحلية", "بعض العيادات يجب أن تتموضع حول الثقة المحلية وعلاقة الطبيب بالمنطقة."],
        ["Premium", "بعض العيادات يجب أن تتموضع حول تجربة Premium يقودها الطبيب."],
        ["الجالية", "بعضها يستهدف الجالية التي تبحث عن تجربة مألوفة لكن احترافية."],
        ["مواجهة تركيا", "بعضها ينافس تركيا بالوضوح، الشفافية، والمتابعة الشخصية."],
        ["High value", "بعضها يركّز على العملاء الأعلى قيمة الذين يحتاجون طمأنة، لا خصومات."],
      ],
      punchWarn: "التموضع الخاطئ يجذب الاستفسارات الخاطئة.",
      punchGood: "التموضع الصحيح يجذب فرصًا أكثر ملاءمة — أسهل في التثقيف، التأهيل، الحجز، والتحويل.",
      cta: "افحص هل عيادتك متموضعة للفوز بالشريحة الصحيحة",
    },

    leadQuality: {
      sid: "06 · LEAD QUALITY KPI",
      h2: "نقيس جودة الـ Leads من منظور إيراد العيادة",
      body: "ليس كل استفسار له نفس القيمة.",
      weak: {
        tag: "استفسار سطحي",
        quote: "«بقداش؟»",
        desc: "بدون توقيت واضح، بدون ثقة، وبدون قدرة مالية معروفة.",
      },
      strong: {
        tag: "فرصة ذات قيمة إيرادية",
        items: [
          "يفهم مبدئيًا ما هي زراعة الشعر",
          "لديه مشكلة واضحة",
          "لديه دافع قوي",
          "توقعات واقعية",
          "قدرة مالية مناسبة",
          "يريد استشارة قريبًا",
          "يناسب الشريحة المستهدفة",
          "احتمال أعلى للحضور والتحول",
        ],
      },
      kpiLabel: "ننظر إلى",
      kpis: [
        "ملاءمة الشريحة",
        "القدرة المالية",
        "الدافع",
        "التوقيت",
        "الجاهزية",
        "احتمال الحجز",
        "احتمال الحضور",
        "احتمال الإغلاق",
        "القيمة الإيرادية",
        "أسباب الخسارة",
      ],
      punch1: "الهدف ليس المزيد من الاستفسارات العشوائية.",
      punch2: "الهدف هو المزيد من الفرص التي يمكن أن تتحول إلى إيراد حقيقي.",
      cta: "حلّل جودة الـ Leads في عيادتك",
    },

    howWeWork: {
      sid: "07 · HOW WE WORK",
      h2: "كيف نعمل: نحدد التموضع، نشخّص، نرتب الأولويات، نبني، نقيس، ونحسّن",
      steps: [
        {
          h: "استشارة نمو للعيادة",
          body:
            "نبدأ بفهم الوضع الحالي للعيادة: التموضع، الأهداف، الطاقة الاستيعابية، الأسعار، نوع العملاء المطلوبين، عدد الاستفسارات، طريقة الحجز، طريقة المتابعة، وأهداف النمو قصيرة ومتوسطة المدى.",
        },
        {
          h: "تحليل التموضع والشريحة المستهدفة",
          body:
            "نحدّد أي شريحة يجب أن تركز عليها العيادة، وهل الرسالة الحالية تجذب هذه الشريحة فعلًا أم تجذب استفسارات غير مناسبة.",
        },
        {
          h: "تحليل مسار الاكتساب الحالي",
          body:
            "نرسم الرحلة كاملة: إعلان → صفحة هبوط → Lead Magnet → واتساب أو فورم → تأهيل → حجز → تذكير → استشارة → متابعة → قرار → مراجعة. ثم نبحث عن أماكن التسريب في كل مرحلة.",
        },
        {
          h: "SWOT وتحليل الاختناقات",
          body:
            "نحلل نقاط القوة، نقاط الضعف، الفرص، والتهديدات حول نظام الاكتساب الحالي، حتى نعرف ما يمكن استثماره وما يجب إصلاحه.",
        },
        {
          h: "تحديد أعلى الأولويات",
          body: "لا نصلح كل شيء دفعة واحدة. نحدّد أكبر التسريبات تأثيرًا على الإيراد:",
          items: [
            "إذا كانت العيادة تجذب الشريحة الخطأ → التموضع والاستهداف",
            "إذا كانت جودة الاستفسارات ضعيفة → Lead Magnet والتأهيل",
            "إذا كان الجميع يسأل عن السعر فقط → التثقيف والثقة",
            "إذا كانت الفرص الجادة تختفي → المتابعة",
            "إذا كانت الاستشارات لا تتحول → تسليم المعلومات، الاعتراضات، وتتبع النتائج",
            "إذا كان السعداء لا يتركون مراجعات → نظام جمع المراجعات",
          ],
        },
        {
          h: "نصائح مجانية واتجاه تنفيذي واضح",
          body:
            "قبل اقتراح أي نظام كامل، نعطي العيادة رؤية واضحة حول أين التسريب الأكبر، ما يجب إصلاحه أولًا، الـ KPIs التي يجب تتبعها، والخطوات العملية الأقرب للتنفيذ.",
        },
        {
          h: "نظام Growth أو Scaling مناسب",
          body: "بناءً على التشخيص، نقترح المسار المناسب:",
          systems: [
            {
              label: "Clinic Growth System",
              body:
                "للعيادات التي تحتاج بناء أو إصلاح أساس الاكتساب: التموضع، صفحة الهبوط، Lead Magnet، التأهيل، المتابعة، الحجز، المراجعات، وKPIs أساسية.",
            },
            {
              label: "Clinic Scaling System",
              body:
                "للعيادات التي لديها طلب موجود وتحتاج تحكمًا وتوسعًا أقوى: رفع جودة الفرص، رؤية أوضح للـ Pipeline، KPIs متقدمة، Forecasting، تخطيط الطاقة الاستيعابية، وتحسين مستمر.",
            },
          ],
        },
        {
          h: "القياس والتحسين المستمر",
          body:
            "نقيس جودة الـ Leads، الحجوزات، الحضور، نتائج الاستشارات، القيمة الإيرادية المحتملة، نمو المراجعات، أسباب الخسارة، وأداء النظام كاملًا مع الوقت.",
        },
      ],
      cta: "ابدأ بتحليل مجاني لمسار الاكتساب",
    },

    proof: {
      sid: "08 · WHY THIS APPROACH",
      h2: "لماذا هذا الأسلوب مختلف؟",
      cards: [
        ["نشخّص قبل أن نقترح", "لا نبدأ ببيع إدارة إعلانات. نبدأ بفهم تموضع العيادة، مسار الاكتساب، جودة الفرص، وأماكن التسريب في الإيراد."],
        ["ننظر إلى الرحلة كاملة", "كثير من التسريبات لا تحدث داخل الحساب الإعلاني فقط — بل بين الإعلان والقرار النهائي: الصفحة، التثقيف، التأهيل، المتابعة، الحجز، والمراجعات."],
        ["نقيس جودة الفرص من منظور الإيراد", "لا نتعامل مع كل استفسار بنفس الطريقة. ننظر إلى ملاءمة الشريحة، الجاهزية، نية الحجز، واحتمال التحول إلى إيراد."],
        ["نبني أنظمة، لا حملات عشوائية", "الحملة قد تخلق اهتمامًا. النظام يحوّل الاهتمام إلى مسار نمو قابل للإدارة والقياس والتحسين."],
        ["نحسّن بالبيانات", "كل مرحلة تصبح قابلة للتتبع: الاستهداف، الصفحة، Lead Magnet، التأهيل، الحجز، المتابعة، المراجعات، ونتائج الاستشارات."],
      ],
    },

    leadMagnetPrimary: {
      sid: "09 · FREE ANALYSIS",
      tag: "العرض الرئيسي · مجاني · ساعة واحدة",
      h: "اكتشف أين تخسر عيادتك فرصًا إيرادية في زراعة الشعر خلال ساعة واحدة",
      body:
        "نراجع تموضع العيادة، الشريحة المستهدفة، مسار الاكتساب، جودة الـ Leads، التأهيل، المتابعة، المراجعات، والـ KPIs لنحدّد أين تضيع الفرص الجادة.",
      getLabel: "ما تحصل عليه",
      get: [
        "مراجعة التموضع الحالي",
        "مراجعة الشريحة المستهدفة",
        "مراجعة مسار الاكتساب",
        "مراجعة صفحة الهبوط أو الموقع",
        "مراجعة قوة الـ Lead Magnet",
        "مراجعة جودة الـ Leads من منظور الإيراد",
        "مراجعة عملية التأهيل",
        "مراجعة عملية المتابعة",
        "مراجعة مسار الحجز",
        "مراجعة طريقة جمع المراجعات",
        "تحديد أهم التسريبات",
        "تحديد أعلى أولويات الإصلاح",
        "اقتراح KPIs مناسبة",
        "خطوات عملية مقترحة",
      ],
      cta: "إحجز جلسة تحليل مجاني للتموضع ومسار الاكتساب",
      micro: "تحليل مجاني · ساعة واحدة · لعيادات زراعة الشعر فقط · لا التزام بعد التحليل.",
    },

    leadMagnetSecondary: {
      sid: "10 · OTHER OPTIONS",
      h2: "تفضّل خيارًا آخر؟",
      intro: "خياران ثانويان لمن يريد بداية أخف قبل التحليل الكامل.",
      options: [
        {
          tag: "استشارة استراتيجية",
          h: "تفضّل نبدأ بنقاش استراتيجي حول نمو العيادة؟",
          body:
            "احجز استشارة مجانية نراجع فيها أهداف النمو، وضع الاكتساب الحالي، وهل أكبر عائق هو التموضع، جودة الفرص، المتابعة، أو التحويل.",
          cta: "احجز استشارة نمو مجانية",
          bookingSlug: "free-consultation",
        },
        {
          tag: "فحص سريع · 30 دقيقة",
          h: "تريد فحصًا أسرع قبل التحليل الكامل؟",
          body:
            "في 30 دقيقة، نراجع هل التسويق الحالي يجذب فرصًا ذات قيمة تجارية أم مجرد استفسارات سطحية.",
          cta: "افحص كفاءة التسويق خلال 30 دقيقة",
          bookingSlug: "marketing-efficiency-check",
        },
      ],
    },
  },

  en: {
    whatWeDo: {
      sid: "04 · WHAT WE DO",
      h2: "We help hair transplant clinics stop chasing random inquiries and build an acquisition system that creates revenue-quality opportunities.",
      intro:
        "Clinic Growth Ops helps hair transplant clinics reposition their offer, attract the right segment, qualify opportunities by commercial value, and build a measurable acquisition path — from first interest to booking, consultation, and decision.",
      notLabel: "We don't start with the question",
      notText: "“How many leads do you want?”",
      butLabel: "We start with a more important one",
      butText: "“What kind of customer should your clinic attract so that growth becomes real revenue?”",
      segments:
        "The hair-transplant market is not one market. A price-sensitive local customer is not the same as a Premium-experience seeker. Someone comparing you with Turkey is not the same as someone comparing you with Dubai. A diaspora client from France, Germany, or the Gulf carries different concerns, expectations, and trust signals.",
      flowLabel: "We connect the full work into a single path",
      flow: [
        "Positioning",
        "Targeting",
        "Landing page",
        "Smart lead magnet",
        "Qualification",
        "Follow-up",
        "Booking",
        "Consultation tracking",
        "Reviews",
        "KPIs",
        "Continuous improvement",
      ],
      cta: "Request a free analysis for your clinic",
    },

    positioning: {
      sid: "05 · POSITIONING",
      h2a: "Your clinic doesn't only compete with the clinic next door.",
      bodyA: "In the customer's mind, your clinic may be compared against:",
      competitors: [
        ["TR", "Turkey — the travel + hotel + procedure experience"],
        ["AE", "Dubai — luxury and status"],
        ["EU", "Europe — perception of medical safety"],
        ["WoM", "Friends and family recommendations"],
        ["$$", "Cheaper local clinics"],
        ["★", "Clinics with stronger reviews"],
        ["⏱", "Competitors that reply faster and follow up better"],
      ],
      qaWeak: { label: "Surface question", text: "“How do we get more leads?”" },
      qaStrong: {
        label: "Better question",
        text: "“How should the clinic be positioned so the right segment understands why it's the right choice?”",
      },
      h2b: "We help you choose the segment you should win",
      segs: [
        ["Local trust", "Some clinics should be positioned around local trust and doctor reputation."],
        ["Premium", "Some should be positioned around a doctor-led Premium experience."],
        ["Diaspora", "Some target diaspora looking for a familiar yet professional experience."],
        ["Vs. Turkey", "Some compete with Turkey through clarity, transparency, and personal follow-up."],
        ["High value", "Some focus on higher-value cases that need reassurance, not discounts."],
      ],
      punchWarn: "The wrong positioning attracts the wrong inquiries.",
      punchGood: "The right positioning attracts better-fit opportunities — easier to educate, qualify, book, and convert.",
      cta: "Check if your clinic is positioned to win the right segment",
    },

    leadQuality: {
      sid: "06 · LEAD QUALITY KPI",
      h2: "We measure lead quality from a clinic-revenue perspective",
      body: "Not every inquiry has the same value.",
      weak: {
        tag: "Surface inquiry",
        quote: "“How much?”",
        desc: "No clear timing, no trust, no known ability to pay.",
      },
      strong: {
        tag: "Revenue-quality opportunity",
        items: [
          "Understands what a hair transplant is",
          "Has a clear problem",
          "Strong motivation",
          "Realistic expectations",
          "Suitable financial capacity",
          "Wants a consultation soon",
          "Fits the target segment",
          "Higher chance of showing up and converting",
        ],
      },
      kpiLabel: "We look at",
      kpis: [
        "Segment fit",
        "Financial capacity",
        "Motivation",
        "Timing",
        "Readiness",
        "Booking probability",
        "Show-up probability",
        "Close probability",
        "Potential revenue value",
        "Loss reasons",
      ],
      punch1: "The goal is not more random inquiries.",
      punch2: "The goal is more opportunities that can convert into real revenue.",
      cta: "Analyze lead quality in your clinic",
    },

    howWeWork: {
      sid: "07 · HOW WE WORK",
      h2: "How we work: position, diagnose, prioritize, build, measure, improve",
      steps: [
        { h: "Clinic growth consultation", body: "We start by understanding the clinic's current state: positioning, goals, capacity, pricing, the customers you want, inquiry volume, booking flow, follow-up, and short-to-mid-term growth targets." },
        { h: "Positioning & target segment analysis", body: "We determine which segment the clinic should focus on, and whether the current message actually attracts that segment — or pulls in mismatched inquiries." },
        { h: "Acquisition flow audit", body: "We map the full journey: ad → landing page → lead magnet → WhatsApp/form → qualification → booking → reminder → consultation → follow-up → decision → review. Then we hunt for leaks at every stage." },
        { h: "SWOT & bottleneck analysis", body: "We analyze strengths, weaknesses, opportunities, and threats around the current acquisition system — so we know what to leverage and what to fix." },
        {
          h: "Highest-priority leaks",
          body: "We don't fix everything at once. We identify the leaks with the biggest revenue impact:",
          items: [
            "Wrong segment → fix positioning and targeting",
            "Weak inquiry quality → fix lead magnet and qualification",
            "Everyone asks about price only → fix education and trust",
            "Hot opportunities disappear → fix follow-up",
            "Consultations don't convert → fix handoff, objections, outcome tracking",
            "Happy clients don't leave reviews → fix review-collection system",
          ],
        },
        { h: "Free direction & action plan", body: "Before proposing any full system, we give the clinic a clear view: where the biggest leak is, what to fix first, which KPIs to track, and the most actionable next steps." },
        {
          h: "Growth or Scaling system",
          body: "Based on the diagnosis, we propose the right path:",
          systems: [
            { label: "Clinic Growth System", body: "For clinics that need to build or fix the acquisition foundation: positioning, landing page, lead magnet, qualification, follow-up, booking, reviews, and core KPIs." },
            { label: "Clinic Scaling System", body: "For clinics with existing demand that need stronger control and scale: higher opportunity quality, pipeline visibility, advanced KPIs, forecasting, capacity planning, and continuous improvement." },
          ],
        },
        { h: "Measurement & continuous improvement", body: "We measure lead quality, bookings, attendance, consultation outcomes, potential revenue value, review growth, loss reasons, and overall system performance over time." },
      ],
      cta: "Start with a free acquisition-flow analysis",
    },

    proof: {
      sid: "08 · WHY THIS APPROACH",
      h2: "Why this approach is different",
      cards: [
        ["We diagnose before we propose", "We don't start by selling ad management. We start by understanding clinic positioning, acquisition flow, opportunity quality, and where revenue is leaking."],
        ["We look at the full journey", "Many leaks don't happen inside the ad account — they happen between the ad and the final decision: page, education, qualification, follow-up, booking, reviews."],
        ["We measure quality, not just volume", "We don't treat every inquiry the same. We look at segment fit, readiness, booking intent, and revenue probability."],
        ["We build systems, not random campaigns", "A campaign creates attention. A system turns attention into a manageable, measurable, improvable growth path."],
        ["We improve with data", "Every stage becomes trackable: targeting, page, lead magnet, qualification, booking, follow-up, reviews, and consultation outcomes."],
      ],
    },

    leadMagnetPrimary: {
      sid: "09 · FREE ANALYSIS",
      tag: "Primary offer · Free · 1 hour",
      h: "Find where your clinic is losing revenue-quality opportunities — in one hour.",
      body: "We review clinic positioning, target segment, acquisition flow, lead quality, qualification, follow-up, reviews, and KPIs — to pinpoint where serious opportunities are leaking.",
      getLabel: "What you get",
      get: [
        "Current positioning review",
        "Target segment review",
        "Acquisition flow review",
        "Landing page / website review",
        "Lead magnet strength review",
        "Lead quality review (revenue lens)",
        "Qualification process review",
        "Follow-up process review",
        "Booking flow review",
        "Review-collection review",
        "Top leaks identified",
        "Highest-priority fixes",
        "Suggested KPIs",
        "Suggested next actions",
      ],
      cta: "Book a free positioning & acquisition flow analysis session",
      micro: "Free · 1 hour · hair transplant clinics only · no obligation after the analysis.",
    },

    leadMagnetSecondary: {
      sid: "10 · OTHER OPTIONS",
      h2: "Prefer another option?",
      intro: "Two lighter starting points before the full analysis.",
      options: [
        {
          tag: "Strategic consultation",
          h: "Want to start with a strategic growth conversation?",
          body: "Book a free consultation. We review growth goals, current acquisition status, and whether the biggest barrier is positioning, opportunity quality, follow-up, or conversion.",
          cta: "Book a free growth consultation",
          bookingSlug: "free-consultation",
        },
        {
          tag: "Quick check · 30 min",
          h: "Want a faster check before the full analysis?",
          body: "In 30 minutes, we review whether current marketing attracts commercially valuable opportunities — or just surface inquiries.",
          cta: "Run a 30-min marketing check",
          bookingSlug: "marketing-efficiency-check",
        },
      ],
    },
  },
};

/* ─────────────────── PRIMITIVES ─────────────────── */

function ExtraSectionId({ children }) {
  return <div className="mfl-sid">{children}</div>;
}

function ExtraArrow({ dir }) {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"
         style={{ transform: dir === "rtl" ? "scaleX(-1)" : "none" }}>
      <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function SectionCTA({ label, href = "#book", dir }) {
  // External-looking targets (other html files) skip the # behavior.
  return (
    <div className="mfl-sec-cta">
      <a href={href} className="mfl-btn mfl-btn-primary mfl-btn-block">
        {label} <ExtraArrow dir={dir} />
      </a>
    </div>
  );
}

// Diagnostics are Arabic-only content. When the landing page is in English,
// skip the Arabic diagnostic and route straight to the localized booking form.
function diagnosticHref(htmlFile, lang) {
  if (lang === "en") return "book.html?lang=en";
  return htmlFile;
}

/* ─────────────────── WHAT WE DO ─────────────────── */

function WhatWeDo({ copy, lang }) {
  const c = EXTRA_COPY[lang].whatWeDo;
  return (
    <section className="mfl-section">
      <ExtraSectionId>{c.sid}</ExtraSectionId>
      <h2 className="mfl-h2">{c.h2}</h2>
      <p className="mfl-lede" style={{ marginTop: 18 }}>{c.intro}</p>

      <div className="mfl-qa weak" style={{ marginTop: 22 }}>
        <span className="q-label crossed">{c.notLabel}</span>
        <span className="q-text">{c.notText}</span>
      </div>
      <div className="mfl-qa">
        <span className="q-label accent">{c.butLabel}</span>
        <span className="q-text">{c.butText}</span>
      </div>

      <p className="mfl-body" style={{ marginTop: 22 }}>{c.segments}</p>

      <div className="mfl-flow">
        <div className="flow-label">{c.flowLabel}</div>
        <div className="chips">
          {c.flow.map((f, i) => (
            <React.Fragment key={i}>
              <span className="chip">{f}</span>
              {i < c.flow.length - 1 && <span className="arrow" aria-hidden="true">{lang === "ar" ? "←" : "→"}</span>}
            </React.Fragment>
          ))}
        </div>
      </div>

      <SectionCTA label={c.cta} href={diagnosticHref("Clinic Growth Diagnostic.html", lang)} dir={copy.dir} />
    </section>
  );
}

/* ─────────────────── POSITIONING REVOLUTION ─────────────────── */

function PositioningRevolution({ copy, lang }) {
  const c = EXTRA_COPY[lang].positioning;
  return (
    <section className="mfl-section">
      <ExtraSectionId>{c.sid}</ExtraSectionId>

      <h2 className="mfl-h2">{c.h2a}</h2>
      <p className="mfl-body" style={{ marginTop: 16 }}>{c.bodyA}</p>

      <div className="mfl-competitors">
        {c.competitors.map(([ico, label], i) => (
          <div key={i} className="row">
            <span className="ico" aria-hidden="true">{ico}</span>
            <span className="label">{label}</span>
          </div>
        ))}
      </div>

      <div className="mfl-qa weak" style={{ marginTop: 22 }}>
        <span className="q-label crossed">{c.qaWeak.label}</span>
        <span className="q-text">{c.qaWeak.text}</span>
      </div>
      <div className="mfl-qa">
        <span className="q-label accent">{c.qaStrong.label}</span>
        <span className="q-text">{c.qaStrong.text}</span>
      </div>

      <h3 className="mfl-h3" style={{ marginTop: 36 }}>{c.h2b}</h3>
      <div className="mfl-segcards">
        {c.segs.map(([tag, body], i) => (
          <div key={i} className="card">
            <span className="tag">{tag}</span>
            <p>{body}</p>
          </div>
        ))}
      </div>

      <div className="mfl-punch" style={{ borderColor: "rgba(224,123,95,0.30)", background: "rgba(224,123,95,0.05)" }}>
        <p style={{ color: "var(--warn)" }}>{c.punchWarn}</p>
        <p>{c.punchGood}</p>
      </div>

      <SectionCTA label={c.cta} href={diagnosticHref("Positioning Diagnostic.html", lang)} dir={copy.dir} />
    </section>
  );
}

/* ─────────────────── LEAD QUALITY KPI ─────────────────── */

function LeadQualityKPI({ copy, lang }) {
  const c = EXTRA_COPY[lang].leadQuality;
  return (
    <section className="mfl-section">
      <ExtraSectionId>{c.sid}</ExtraSectionId>
      <h2 className="mfl-h2">{c.h2}</h2>
      <p className="mfl-lede" style={{ marginTop: 16 }}>{c.body}</p>

      <div className="mfl-compare">
        <div className="col weak">
          <div className="tag">{c.weak.tag}</div>
          <div className="quote">{c.weak.quote}</div>
          <div className="desc">{c.weak.desc}</div>
        </div>
        <div className="col strong">
          <div className="tag">{c.strong.tag}</div>
          <ul>
            {c.strong.items.map((it, i) => <li key={i}><span>{it}</span></li>)}
          </ul>
        </div>
      </div>

      <h3 className="mfl-h3" style={{ marginTop: 32 }}>{c.kpiLabel}</h3>
      <div className="mfl-kpis">
        {c.kpis.map((k, i) => (
          <div key={i} className="kpi">
            <span className="n">{String(i + 1).padStart(2, "0")}</span>
            <span>{k}</span>
          </div>
        ))}
      </div>

      <div className="mfl-punch">
        <p>{c.punch1}</p>
        <p>{c.punch2}</p>
      </div>

      <SectionCTA label={c.cta} href={diagnosticHref("Lead Quality Score.html", lang)} dir={copy.dir} />
    </section>
  );
}

/* ─────────────────── HOW WE WORK ─────────────────── */

function HowWeWork({ copy, lang }) {
  const c = EXTRA_COPY[lang].howWeWork;
  const [openIdx, setOpenIdx] = useStateMFE(0);
  return (
    <section className="mfl-section">
      <ExtraSectionId>{c.sid}</ExtraSectionId>
      <h2 className="mfl-h2">{c.h2}</h2>

      <div className="mfl-step-acc">
        {c.steps.map((st, i) => {
          const open = openIdx === i;
          return (
            <div key={i} className={`step ${open ? "is-open" : ""}`}>
              <button
                className="head"
                onClick={() => setOpenIdx(open ? -1 : i)}
                aria-expanded={open}
              >
                <span className="num">{String(i + 1).padStart(2, "0")}</span>
                <h4>{st.h}</h4>
                <span className="caret">{lang === "ar" ? "‹" : "›"}</span>
              </button>
              {open && (
                <div className="body">
                  <p>{st.body}</p>
                  {st.items && (
                    <ul>
                      {st.items.map((it, j) => <li key={j}><span>{it}</span></li>)}
                    </ul>
                  )}
                  {st.systems && (
                    <div className="mfl-systems">
                      {st.systems.map((s, j) => (
                        <div key={j} className="sys">
                          <div className="sys-label">{s.label}</div>
                          <p>{s.body}</p>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
          );
        })}
      </div>

      <SectionCTA label={c.cta} dir={copy.dir} />
    </section>
  );
}

/* ─────────────────── PROOF OF COMPETENCE ─────────────────── */

function ProofOfCompetence({ copy, lang }) {
  const c = EXTRA_COPY[lang].proof;
  return (
    <section className="mfl-section">
      <ExtraSectionId>{c.sid}</ExtraSectionId>
      <h2 className="mfl-h2">{c.h2}</h2>

      <div className="mfl-proof">
        {c.cards.map(([title, body], i) => (
          <div key={i} className="card">
            <span className="idx">{String(i + 1).padStart(2, "0")}</span>
            <div>
              <h4>{title}</h4>
              <p>{body}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ─────────────────── LEAD MAGNET — PRIMARY ─────────────────── */

function LeadMagnetPrimary({ copy, lang }) {
  const c = EXTRA_COPY[lang].leadMagnetPrimary;
  // The primary hero CTA now routes prospects straight to the free
  // consultation booking page — same Mon–Thu rule, 45-min slots,
  // auto-fill via query params when arriving from a diagnostic.
  // Falls back to the standalone Acquisition Flow Analysis HTML when
  // no booking host is configured (offline preview). `lang` is
  // propagated so the booking page renders in the visitor's language.
  const href = bookingHref("free-consultation", "book.html", lang);
  return (
    <section className="mfl-section" id="book">
      <ExtraSectionId>{c.sid}</ExtraSectionId>

      <div className="mfl-lmp">
        <span className="tag"><span className="pulse" aria-hidden="true" /> {c.tag}</span>
        <h3>{c.h}</h3>
        <p className="body">{c.body}</p>

        <div className="get-label">{c.getLabel}</div>
        <ul>
          {c.get.map((it, i) => <li key={i}><span>{it}</span></li>)}
        </ul>

        <a href={href} className="mfl-btn mfl-btn-primary mfl-btn-block">
          {c.cta} <ExtraArrow dir={copy.dir} />
        </a>
        <p className="micro">{c.micro}</p>
      </div>
    </section>
  );
}

/* ─────────────────── LEAD MAGNET — SECONDARY ─────────────────── */

function LeadMagnetSecondary({ copy, lang }) {
  const c = EXTRA_COPY[lang].leadMagnetSecondary;
  return (
    <section className="mfl-section">
      <ExtraSectionId>{c.sid}</ExtraSectionId>
      <h2 className="mfl-h2">{c.h2}</h2>
      <p className="mfl-lms-intro" style={{ marginTop: 12 }}>{c.intro}</p>

      <div className="mfl-lms">
        {c.options.map((o, i) => {
          // Each secondary option carries a `bookingSlug` that maps
          // to a public booking page. Falls back to the original
          // `#contact` scroll-target when none is set (so future
          // options can be added without forcing a booking page).
          // `lang` propagates so the booking page renders in the
          // visitor's current language.
          const href = o.bookingSlug
            ? bookingHref(o.bookingSlug, "#contact", lang)
            : "#contact";
          return (
            <div key={i} className="card">
              <span className="tag">{o.tag}</span>
              <h4>{o.h}</h4>
              <p className="body">{o.body}</p>
              <a href={href} className="mfl-btn mfl-btn-ghost">
                {o.cta} <ExtraArrow dir={copy.dir} />
              </a>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/**
 * Compute the URL for the consultation booking page. V0 (static
 * hosting) routes every booking CTA to the local `book.html` —
 * that page captures the request and delivers it to the agency via
 * the prospect's own email + WhatsApp (no backend required).
 *
 * When `window.MFL_CONFIG.bookingBaseUrl` is set, we instead route
 * to the full Next.js web app's slot-picker booking page at
 * `${base}/book/${slug}` — that's the upgrade path once the web app
 * is deployed.
 *
 * `slug` is preserved on the query string so the future web-app
 * routing can still tell which booking page the prospect intended.
 * `lang` is appended so the booking page renders in the visitor's
 * current language.
 */
function bookingHref(slug, fallback, lang) {
  const cfg = (typeof window !== "undefined" && window.MFL_CONFIG) || {};
  const base = (cfg.bookingBaseUrl || "").replace(/\/$/, "");
  const url = base
    ? `${base}/book/${slug}`
    : `book.html`;
  const params = new URLSearchParams();
  if (lang) params.set("lang", lang);
  if (!base && slug && slug !== "free-consultation") params.set("via", slug);
  const qs = params.toString();
  return qs ? `${url}?${qs}` : url;
}

/* ─────────────────── EXPOSE ─────────────────── */

Object.assign(window, {
  MFE_WhatWeDo: WhatWeDo,
  MFE_PositioningRevolution: PositioningRevolution,
  MFE_LeadQualityKPI: LeadQualityKPI,
  MFE_HowWeWork: HowWeWork,
  MFE_ProofOfCompetence: ProofOfCompetence,
  MFE_LeadMagnetPrimary: LeadMagnetPrimary,
  MFE_LeadMagnetSecondary: LeadMagnetSecondary,
});
