// mobile-landing.jsx — Pain-led, bilingual mobile-first landing page
// Sections: Hero → Pain Hook → Core Edu → 5 Stories → +Accordion →
// Solution → Mechanism → Before/After → Diagnostic → Who-this-is-for → Final CTA
const { useState: useStateMFL, useEffect: useEffectMFL, useRef: useRefMFL } = React;
/* ─────────────────── COPY (AR / EN) ─────────────────── */
const COPY = {
ar: {
dir: "rtl",
nav: { brand: "Clinic Growth Ops", cta: "احجز تشخيصًا", ctaShort: "احجز تشخيصًا مجانيًا" },
hero: {
eyebrow: "لعيادات زراعة الشعر",
h1Pre: "عيادتك لا تحتاج",
h1Bold: "استفسارات أكثر",
h1Post: "فقط — تحتاج نظامًا يحوّل الاهتمام إلى",
h1Accent: "حجوزات جدية",
lede: "نساعد عيادات زراعة الشعر على بناء رحلة واضحة من الإعلان إلى الحجز: استهداف أدق، صفحة هبوط مقنعة، Lead Magnet ذكي، تأهيل، متابعة، مراجعات، وتتبع للنتائج.",
cta: "احجز تشخيصًا مجانيًا لعيادتك",
micro: "في المكالمة نراجع أين تضيع الفرص اليوم: الاستهداف، الصفحة، التأهيل، المتابعة، الحجز، أو الإغلاق.",
},
pain: {
sid: "01 · PAIN HOOK",
h2Pre: "هل هذا يحدث",
h2Accent: "داخل عيادتك؟",
items: [
["تصرف على الإعلانات، لكن أغلب الرسائل تسأل:", "“بقداش؟”"],
["تحصل على أرقام، لكن", "لا تعرف من الجاد ومن الفضولي"],
["أشخاص يحجزون", "ثم لا يحضرون"],
["فرص ساخنة تضيع لأن", "المتابعة تأخرت"],
["الفريق يدخل المحادثة", "بدون معرفة كافية"],
["لا توجد رحلة واضحة", "من الإعلان إلى الحجز"],
["لا تعرف أين تخسر المال:", "الإعلان؟ التأهيل؟ المتابعة؟ الإغلاق؟"],
],
transitionEyebrow: "الخلاصة",
transition: "زيادة الميزانية ليست الحل دائمًا. الحل هو بناء نظام تحويل.",
},
edu: {
sid: "02 · CORE EDUCATION",
h2Pre: "إعلان جيد بدون نظام تحويل =",
h2Accent: "مال يُحرق بهدوء",
body: "الإعلان يستطيع جذب الانتباه. لكن الانتباه وحده لا يعني حجزًا. راغب زراعة الشعر يحتاج رحلة منطقية:",
journey: ["يرى الإعلان", "يفهم الخدمة", "يثق", "يحصل على قيمة", "يُؤهَّل", "يحجز", "تتم متابعته", "يصل للفريق بمعلومات واضحة", "تُتتبع النتيجة"],
key: "إذا انكسرت أي مرحلة من هذه الرحلة، تبدأ الخسارة.",
},
storiesTitle: { sid: "03 · WHERE MONEY LEAKS", h2: "خمس قصص ألم تختبئ في كل عيادة" },
stories: [
{
n: "STORY 01 · TARGETING",
h: "حين تستهدف \u201Cكل من يعاني من تساقط الشعر\u201D… تحصل على فضول أكثر من الجدية.",
viz: "broad-targeting",
body: <>عيادة تطلق حملة عامة: “زراعة الشعر بأحدث التقنيات.” رسائل كثيرة، أسئلة كثيرة عن السعر — لكن القليل فقط مناسب فعلًا للحجز. المشكلة ليست أن الإعلان لم يجذب اهتمامًا، بل أنه جذب اهتمامًا واسعًا وغير مصفّى.,
lesson: "الاستهداف لا يبحث عن “من يهتم”، بل عن الشخص الأقرب للقرار: مشكلة واضحة، دافع قوي، توقع منطقي، وقدرة على الخطوة التالية.",
},
{
n: "STORY 02 · LEAD MAGNET",
h: "\u201Cاترك رقمك وسنتصل بك\u201D لم يعد كافيًا.",
viz: "weak-form",
body: <>شخص مهتم يضغط على الإعلان، يجد فورمًا: اسم، هاتف، مدينة. لا يشعر أنه حصل على شيء. لا يعرف هل حالته مناسبة، ولا نطاق التكلفة، ولا الخطوة التالية — وقد ينسى أصلًا لماذا ترك رقمه.,
lesson: "Lead Magnet قوي لا يأخذ المعلومات فقط — يعطي قيمة أولًا. تقدير مبدئي للتكلفة أو تقييم أولي للحالة يجعل الشخص أكثر استعدادًا لإكمال الرحلة.",
},
{
n: "STORY 03 · EDUCATION",
h: "الشخص غير المتعلّم يقارن بالسعر فقط.",
viz: "price-cloud",
body: <>حين لا تشرح العيادة الفرق بين التقنية، عدد البصيلات، جودة التشخيص، الخبرة، والنتائج الواقعية، يبقى سؤال واحد فقط في ذهن المهتم: “كم السعر؟” وهنا تدخل العيادة في مقارنة خطيرة مع أي عرض أرخص.,
lesson: "التثقيف ليس محتوى جميلًا فقط — هو أداة تحويل. كلما فهم الشخص أكثر، أصبح قراره أقل سطحية وأكثر ارتباطًا بالقيمة والثقة.",
},
{
n: "STORY 04 · FOLLOW-UP",
h: "ليس كل من لم يحجز غير مهتم.",
viz: "followup",
body: <>أحيانًا هو مهتم لكنه مشغول، أحيانًا يحتاج تذكيرًا، أحيانًا يريد رؤية تجربة شخص آخر، وأحيانًا ينتظر أن يشعر بالثقة. إذا توقفت المتابعة بعد أول رسالة، فأنت تترك المال على الطاولة.,
lesson: "المتابعة ليست إزعاجًا إذا كانت مبنية على قيمة. المتابعة الصحيحة تعلّم، تطمئن، وتدفع للخطوة التالية.",
},
{
n: "STORY 05 · REVIEWS",
h: "إذا كان عملاؤك السعداء لا يتركون مراجعات… منافسوك يبدون أقوى.",
viz: "reviews",
body: <>راغب زراعة الشعر سيبحث عنك قبل الحجز. سيرى Google، سيرى Facebook، سيقارن، وسيسأل نفسه: “هل أثق بهذه العيادة؟” إذا لم تتحول التجارب الجيدة إلى Reviews، تبقى الثقة ناقصة على الإنترنت — حتى لو كانت الخدمة جيدة في الواقع.,
lesson: "Google Reviews وFacebook Reviews ليست رفاهية — هي جزء من قرار الحجز.",
},
],
accordion: {
title: "مشاكل أخرى نراجعها في التشخيص",
items: [
"ضعف كشف الاعتراضات الحقيقية قبل الاستشارة",
"غياب التأهيل بين الفضولي والجاد والجاهز",
"غياب رحلة عميل واضحة من الإعلان إلى النتيجة",
"عدم تتبع ما يحدث بعد الحجز والحضور والإغلاق",
"عدم تحويل التجارب الناجحة إلى قصص ثقة",
"ضعف المتابعة بعد العملية",
"صرف إعلاني بدون نظام إغلاق مستدام",
],
},
solution: {
sid: "04 · WHAT WE BUILD",
h2: "نبني نظام تحويل، لا حملة عابرة.",
lede: "نظام يساعد عيادتك على:",
items: [
"جذب المهتمين المناسبين، لا الجمهور العام",
"صفحة هبوط تقود لخطوة واحدة واضحة",
"Lead Magnet ذكي يعطي قيمة أولية",
"تأهيل الفرص حسب الجدية والاستعداد",
"كشف الاعتراضات الحقيقية مبكرًا",
"متابعة منظمة حسب مرحلة كل فرصة",
"تسهيل الحجز وتسليم الفريق سياقًا أوضح",
"تتبع ما يحدث بعد الحجز حتى الإغلاق",
"تقوية الثقة عبر Google + Facebook Reviews",
"رؤية واضحة لأين تضيع الفرص بالأرقام",
],
},
mechanism: {
sid: "05 · HOW IT WORKS",
h2: "كيف يعمل النظام",
steps: [
["جذب موجّه", "نستهدف الأشخاص الأقرب للاهتمام الجاد بزراعة الشعر، لا جمهورًا عشوائيًا."],
["صفحة هبوط للتحويل", "صفحة لا تشرح فقط — بل تقود الزائر إلى خطوة واحدة واضحة."],
["Lead Magnet ذكي", "تجربة تفاعلية تساعد المهتم على فهم نطاق التكلفة أو ملاءمة حالته."],
["تأهيل وتقييم", "نفرّق بين الفضولي، المتردد، الجاد، والجاهز للحجز فورًا."],
["متابعة منظمة", "رسائل تذكير وتثقيف وتحفيز حسب مرحلة كل فرصة."],
["حجز وتتبع", "كل فرصة في مسار واضح: حجزت؟ حضرت؟ ماذا بعد الاستشارة؟"],
["مراجعات وثقة", "نظام منظّم لجمع Google + Facebook Reviews وتقوية السمعة."],
],
},
beforeAfter: {
sid: "06 · BEFORE / AFTER",
h2: "الفرق ليس في الإعلان — في النظام كله.",
before: ["حملات بدون وضوح كافٍ", "استفسارات كثيرة بجودة غير معروفة", "متابعة عشوائية", "لا يوجد Lead Magnet قوي", "ضعف في كشف الاعتراضات", "فرص تضيع بسبب التأخير", "لا توجد رحلة واضحة", "مراجعات غير مستغلة", "ميزانية تضيع بدون رؤية"],
after: ["استهداف أدق وأنضج", "صفحة تقود للقرار", "تجربة ذكية تعطي قيمة أولًا", "تأهيل للفرص", "متابعة مبنية على المرحلة", "حجز أكثر تنظيمًا", "معلومات أوضح قبل الاستشارة", "تتبع من الإعلان إلى النتيجة", "قرارات مبنية على أرقام"],
},
diagnostic: {
sid: "07 · DIAGNOSIS CALL",
h2: "مكالمة التشخيص المجانية",
sub: "لا نبيع لك \u201Cباقة إعلانات\u201D. نراجع معك:",
qs: [
"هل الاستهداف الحالي يجذب الجادين؟",
"هل الصفحة الحالية تقنع؟",
"هل يوجد Lead Magnet فعلي؟",
"هل يتم تأهيل الفرص؟",
"هل توجد متابعة كافية؟",
"هل يعرف الفريق الاعتراضات قبل الاستشارة؟",
"هل يتم تتبع الحجز والحضور والإغلاق؟",
"هل تستفيد العيادة من Google + Facebook Reviews؟",
"أين أكبر خسارة مخفية اليوم؟",
],
micro: "مناسب لعيادات زراعة الشعر التي تريد نموًا أوضح، جودة فرص أعلى، وتتبعًا أفضل للعائد.",
},
fit: {
sid: "08 · IS THIS FOR YOU?",
h2: "هل هذا مناسب لعيادتك؟",
yes: { tag: "نعم", title: "هذا مناسب لك إذا…", items: [
"عندك عيادة تقدم خدمة زراعة الشعر",
"تصرف على الإعلانات بدون رؤية واضحة للعائد",
"تحصل على استفسارات بجودة متفاوتة",
"تريد حجوزات أكثر جدية",
"تريد تقليل الفرص الضائعة",
"تريد متابعة منظمة",
"تريد تقوية الثقة عبر المراجعات",
"تريد نظامًا يمكن تحسينه بالأرقام",
]},
no: { tag: "لا", title: "هذا ليس لك إذا…", items: [
"تبحث فقط عن أرخص إعلانات",
"تريد أكبر عدد رسائل بغض النظر عن الجودة",
"لا تريد تتبع ما يحدث بعد الحجز",
"لا تريد تنظيم رحلة العميل المحتمل",
"لا تريد مشاركة بيانات النتائج لتحسين النظام",
]},
},
final: {
sid: "09 · BOOK NOW",
h2Pre: "هل تعرف أين",
h2Accent: "تضيع فرص زراعة الشعر",
h2Post: "داخل عيادتك؟",
sub: "في مكالمة التشخيص، نحدد أين يبدأ التسريب.",
leaks: ["الاستهداف", "الصفحة", "التثقيف", "التأهيل", "المتابعة", "الاعتراضات", "المراجعات", "الرحلة"],
cta: "احجز مكالمة تشخيص مجانية",
micro: "لا تحتاج إلى المزيد من التخمين. ابدأ بفهم أين تضيع الفرص.",
},
foot: "CLINIC GROWTH OPS · HAIR-TX SYSTEMS",
},
en: {
dir: "ltr",
nav: { brand: "Clinic Growth Ops", cta: "Book diagnosis", ctaShort: "Book free diagnosis" },
hero: {
eyebrow: "FOR HAIR TRANSPLANT CLINICS",
h1Pre: "Your clinic may not need",
h1Bold: "more inquiries.",
h1Post: " It needs a system that turns interest into",
h1Accent: "serious bookings",
lede: "We help hair transplant clinics build a clear journey from ad click to booking: sharper targeting, conversion-focused landing page, smart lead magnet, qualification, follow-up, reviews, and outcome tracking.",
cta: "Book a Free Clinic Growth Diagnosis",
micro: "In this call, we review where opportunities may be leaking today: targeting, landing page, qualification, follow-up, booking, reviews, or closing process.",
},
pain: {
sid: "01 · PAIN HOOK",
h2Pre: "Does this happen",
h2Accent: "inside your clinic?",
items: [
["You spend money on ads — but most messages just ask:", "“How much does it cost?”"],
["You get contact details, but", "you don’t know who is serious"],
["People book consultations", "and never show up"],
["Hot opportunities disappear because", "follow-up is late or inconsistent"],
["Your team enters conversations", "without enough context"],
["There is no clear journey", "from ad click to booking"],
["You can’t clearly see where money is lost:", "the ad? qualification? follow-up? close?"],
],
transitionEyebrow: "Bottom line",
transition: "Increasing ad budget is not always the answer. The answer is usually a better conversion system.",
},
edu: {
sid: "02 · CORE EDUCATION",
h2Pre: "A good ad without a conversion system =",
h2Accent: "money quietly burning.",
body: "Ads create attention. Attention alone does not create bookings. A person considering a hair transplant needs a logical journey:",
journey: ["Sees the ad", "Understands the offer", "Trusts the clinic", "Receives initial value", "Gets qualified", "Books", "Is followed up with", "Team gets context", "Result is tracked"],
key: "If one part of this journey breaks, money starts leaking.",
},
storiesTitle: { sid: "03 · WHERE MONEY LEAKS", h2: "Five pain stories hiding inside every clinic" },
stories: [
{
n: "STORY 01 · TARGETING",
h: "When you target “everyone with hair loss”, you attract curiosity, not commitment.",
viz: "broad-targeting",
body: <>A clinic launches a general campaign: “Advanced hair transplant techniques available now.” Messages flow in. People ask about price. But only a small slice are actually close to booking. The ad didn’t fail to create interest — it attracted interest that was too broad and unfiltered.,
lesson: "Targeting should not only ask “who is interested” — it should ask who is closest to action: a clear problem, strong motivation, realistic expectations, and readiness to take the next step.",
},
{
n: "STORY 02 · LEAD MAGNET",
h: "“Leave your phone number and we will contact you” is no longer enough.",
viz: "weak-form",
body: <>Someone clicks the ad and lands on a simple form: name, phone, city. They don’t feel they received anything. They don’t know if their case is suitable, the cost range, or what comes next — and minutes later they may forget why they submitted at all.,
lesson: "A strong lead magnet doesn’t only collect information — it gives value first. An initial cost range or a suitability pre-check makes the prospect more likely to continue the journey.",
},
{
n: "STORY 03 · EDUCATION",
h: "An uneducated prospect compares only by price.",
viz: "price-cloud",
body: <>When you don’t explain technique, graft count, diagnosis quality, doctor experience, and realistic outcomes, the prospect is left with one question: “How much?” And once the decision becomes price-only, your clinic is compared against the cheapest offer in the market.,
lesson: "Education is not just content — it’s a conversion asset. The more a person understands, the more their decision shifts from price to value and trust.",
},
{
n: "STORY 04 · FOLLOW-UP",
h: "Not everyone who doesn’t book is uninterested.",
viz: "followup",
body: <>Sometimes they’re interested but busy. Sometimes they need a reminder. Sometimes they want to see another person’s journey. Sometimes they’re waiting to feel more trust. If follow-up stops after the first message, you leave money on the table.,
lesson: "Follow-up is not annoying when it’s valuable. Good follow-up educates, reassures, reminds, and moves the person to the next logical step.",
},
{
n: "STORY 05 · REVIEWS",
h: "If happy clients don’t leave reviews, your competitors look stronger online.",
viz: "reviews",
body: <>A person considering a hair transplant will search you up before booking. They check Google. They check Facebook. They compare. They ask themselves: “Can I trust this clinic?” If good experiences don’t turn into reviews, online trust stays weaker than your real service.,
lesson: "Google + Facebook reviews are not decoration — they’re part of the booking decision.",
},
],
accordion: {
title: "Other leaks we check in the diagnosis",
items: [
"Weak discovery of real objections before consultation",
"No qualification between curious, serious, and ready",
"No clear customer journey from ad to outcome",
"No tracking of booking, attendance, or close",
"Successful journeys never turned into trust assets",
"Weak post-operation follow-up",
"Ad spend without sustainable closing process",
],
},
solution: {
sid: "04 · WHAT WE BUILD",
h2: "We build a conversion system, not a temporary campaign.",
lede: "A system that helps your clinic:",
items: [
"Attract better-fit prospects, not a broad audience",
"Send them to a conversion-focused landing page",
"Give them initial value via a smart lead magnet",
"Qualify opportunities by seriousness and readiness",
"Reveal real objections earlier",
"Follow up consistently, by stage",
"Make booking easier and hand the team better context",
"Track what happens after the booking",
"Strengthen trust via Google + Facebook reviews",
"See clearly where opportunities are leaking",
],
},
mechanism: {
sid: "05 · HOW IT WORKS",
h2: "How the system works",
steps: [
["Focused attraction", "We target people more likely to be serious about hair transplant — not a broad, generally-curious audience."],
["Conversion landing page", "A page that doesn’t only explain — it guides the visitor toward one clear next step."],
["Smart lead magnet", "An interactive experience that gives initial value: cost range or suitability pre-check."],
["Qualification", "We separate the curious, the hesitant, the serious, and the booking-ready."],
["Structured follow-up", "Educational and reminder-based follow-up tuned to the prospect’s stage."],
["Booking & tracking", "Every opportunity enters a visible journey: booked, attended, closed, lost, or nurturing."],
["Reviews & trust", "We help collect and grow Google + Facebook reviews in a structured way."],
],
},
beforeAfter: {
sid: "06 · BEFORE / AFTER",
h2: "The difference isn’t the ad — it’s the whole system.",
before: ["Campaigns run without enough clarity", "Inquiries arrive, quality is uncertain", "Random, ad-hoc follow-up", "No real lead magnet", "Hidden objections", "Hot opportunities disappear", "No clear customer journey", "Reviews underused", "Budget lost without visibility"],
after: ["Sharper, more mature targeting", "Landing page supports the decision", "Lead magnet gives value first", "Prospects are qualified", "Stage-based follow-up", "Booking becomes manageable", "Better context before consultation", "Full journey is trackable", "Decisions based on numbers"],
},
diagnostic: {
sid: "07 · DIAGNOSIS CALL",
h2: "The free diagnosis call",
sub: "This is not a call to sell you “more ads.” We review:",
qs: [
"Is your targeting attracting serious prospects?",
"Does your landing page convert or lose visitors?",
"Do you have a real lead magnet?",
"Are prospects being qualified?",
"Is follow-up strong enough?",
"Does the team know objections before the consultation?",
"Are booking, attendance, and close being tracked?",
"Are you collecting enough Google + Facebook reviews?",
"Where is the biggest hidden leak today?",
],
micro: "For hair transplant clinics that want clearer growth, better-quality opportunities, and better visibility on return on ad spend.",
},
fit: {
sid: "08 · IS THIS FOR YOU?",
h2: "Is this for your clinic?",
yes: { tag: "YES", title: "This is for you if…", items: [
"You run or manage a hair transplant clinic",
"You spend on ads without clearly seeing the return",
"You receive inquiries of inconsistent quality",
"You want more serious bookings",
"You want fewer lost opportunities",
"You want better, structured follow-up",
"You want stronger trust through reviews",
"You want a system that improves with data",
]},
no: { tag: "NO", title: "This is not for you if…", items: [
"You only want the cheapest possible ads",
"You only care about message volume, not quality",
"You don’t want to track what happens after booking",
"You don’t want to organize the customer journey",
"You don’t want to share outcome data",
]},
},
final: {
sid: "09 · BOOK NOW",
h2Pre: "Do you know where",
h2Accent: "hair transplant opportunities leak",
h2Post: "inside your clinic?",
sub: "In the diagnosis call, we identify where the leak starts.",
leaks: ["Targeting", "Landing page", "Education", "Qualification", "Follow-up", "Objections", "Reviews", "Journey"],
cta: "Book a Free Clinic Growth Diagnosis",
micro: "You don’t need more guessing. Start by finding where opportunities are being lost.",
},
foot: "CLINIC GROWTH OPS · HAIR-TX SYSTEMS",
},
};
/* ─────────────────── SHARED PRIMITIVES ─────────────────── */
function ArrowGlyph({ dir }) {
// Always visually points to the start of the call (toward CTA destination)
return (
);
}
function SectionId({ children }) {
return
{children}
;
}
/* ─────────────────── TOP BAR ─────────────────── */
function TopBar({ lang, setLang, theme, setTheme, copy }) {
return (