/* XHealth — "Marketing strategy" Q&A page (adapted from MOLTS nice-to-meet-you, bilingual) */
const MKD = {
  hero: {
    eyebrow: { en: "QUESTIONS", zh: "QUESTIONS" },
    title: { en: "Before we begin, beyond the work", zh: "開展之前，合作之外 " },
    lead: { en: "Hello — we are XHealth Solution. This Q&A manual exists so you know exactly who we are and how we operate before we start.", zh: "你好，我們是 XHealth Solution。這份問答說明書幫你在合作前先看清楚我們是誰、如何工作——所有合作，都從對話開始。" },
  },
  nav: [
    { id: "q1", en: "What do you provide?", zh: "你們提供什麼？" },
    { id: "q2", en: "What services do you offer?", zh: "你們有哪些服務？" },
    { id: "q5", en: "What makes you different?", zh: "你們有什麼特點？" },
    { id: "q3", en: "Who is this for?", zh: "適合哪些企業？" },
    { id: "q4", en: "Who have you worked with?", zh: "哪些客戶找過你們？" },
    { id: "q7", en: "Can results be expected?", zh: "委託後能期待成果嗎？" },
    { id: "q8", en: "How do we start?", zh: "如何開始合作？" },
  ],
  q1: {
    n: "01",
    q: { en: "What do you provide?", zh: "你們提供什麼？" },
    a: { en: "One deliverable: business growth. We do this through two interlocked disciplines — branding that builds desire, and sales-operations that converts desire into real cashflow.", zh: "只提供一件事：客戶的事業成長。做法是雙軌並行——行銷，讓品牌走入消費者心中；營銷，讓市場需求轉化為真實的現金流。" },
    statsLabel: { en: "Cumulative results, 2019 – 2026", zh: "2019 – 2026 年累計概算成果" },
    stats: [
      { num: "50+", label: { en: "Brands served", zh: "累計服務品牌" } },
      { num: "200+", label: { en: "Projects delivered", zh: "累計完成專案" } },
      { num: "8+", label: { en: "Industries", zh: "深耕產業" } },
    ],
  },
  q2: {
    n: "02",
    q: { en: "What services do you offer?", zh: "你們有哪些服務？" },
    a: { en: "We provide a complete system for turning products into cashflow — covering the full business chain from strategic brain to execution muscle.", zh: "我們提供一整套【把產品變成現金】的品牌與銷售機制，完整覆蓋從「大腦戰略」到「肌肉執行」的商業全鏈路。" },
    groups: [
      {
        tag: { zh: "引擎一：品牌行銷", en: "Engine 1 · Branding" },
        sub: { zh: "建立靈魂、信任與溢價能力", en: "Build soul, trust and pricing power" },
        cls: "",
        areas: [
          { n: "01", t: { zh: "品牌策略與重組", en: "Brand Strategy & Repositioning" }, d: { zh: "大腦的核心。將「產品定價邏輯與商業格局」納入品牌策略——展現高階諮詢的視野，而不只是寫感性的品牌故事。", en: "The strategic brain. We factor pricing logic and business architecture into brand strategy — far beyond a feel-good brand story." } },
          { n: "03", t: { zh: "品牌命名與架構", en: "Naming & Architecture" }, d: { zh: "骨架。為多產品、多品牌梳理架構，確保企業在擴張過程中不致混亂、資源不重疊。", en: "The skeleton. Multi-brand architecture that keeps expanding businesses coherent and resource-efficient." } },
          { n: "04", t: { zh: "品牌識別與視覺設計", en: "Identity & Visual Design" }, d: { zh: "外貌。將無形的戰略轉化為一致的視覺語言，建立第一眼的高級感與絕對信任。", en: "The face. Translating intangible strategy into coherent visual language that earns trust at first glance." } },
        ]
      },
      {
        tag: { zh: "引擎二：營銷諮詢", en: "Engine 2 · Marketing Consulting" },
        sub: { zh: "打造漏斗、數據驅動與變現機器", en: "Build funnels, drive data, create revenue" },
        cls: "",
        areas: [
          { n: "02", t: { zh: "市場調查與商業洞察", en: "Market Research & Intelligence" }, d: { zh: "營銷的雷達。「數據支撐決策」讓商業判斷不再憑老闆直覺——這是諮詢顧問與純創意設計公司最大的分水嶺。", en: "The radar. Data-backed decisions, not gut feel — the defining line between consultants and pure creative agencies." } },
          { n: "06", t: { zh: "營銷策略及內容", en: "Marketing Strategy & Content" }, d: { zh: "漏斗的血肉。精準對應客戶旅程每一個觸點，確保內容能實際推動潛在客戶往下一個階段前進，而不是自嗨。", en: "The funnel's flesh. Content mapped to every touchpoint — designed to move prospects forward, not just fill a feed." } },
          { n: "07", t: { zh: "搜索引擎優化｜廣告成效分析", en: "Search, Social & Media" }, d: { zh: "變現的收銀台。GEO + SEM 機制，將「曝光轉化為實際業務增長」，直接對客戶的投資回報率負責。", en: "The cash register. GEO + SEM turns exposure into real business growth — we're accountable for your ROI." } },
        ]
      },
      {
        tag: { zh: "雙引擎樞紐", en: "Dual-Engine Hub" },
        sub: { zh: "承載與轉換的核心戰場", en: "Where brand meets conversion" },
        cls: "hub",
        areas: [
          { n: "05", t: { zh: "網站設計與改版", en: "Website Design & Revamp" }, d: { zh: "從策略出發的品牌門面，同時也是獲客漏斗的關鍵戰場。美感提升用戶體驗，商業目標驅動設計決策——二者缺一不可。", en: "The brand front door built from strategy — also the key conversion battlefield. Aesthetics serve UX; business goals drive design decisions." } },
        ]
      },
    ],
  },
  q3: {
    n: "03",
    q: { en: "Who is this for?", zh: "適合哪些企業？" },
    a: { en: "We work best with founders and business leaders who want a thinking partner, not just another vendor to manage.", zh: "最適合需要「思考夥伴」而不只是「供應商」的創辦人與業務負責人。" },
    fit: [
      {
        type: "yes",
        label: { zh: "適合你，如果…", en: "This fits you if…" },
        items: [
          { zh: "你想要戰略與執行一體，不再在多個供應商之間做翻譯官", en: "You want strategy and execution under one roof — no more translating between vendors" },
          { zh: "你知道品牌有問題，但說不清楚問題在哪", en: "You know your brand has a problem but can't quite articulate where" },
          { zh: "你在乎的是 ROI，而不只是「做得漂亮」", en: "You care about ROI, not just looking good" },
          { zh: "你願意讓數據說話，而不是憑直覺決策", en: "You're ready to let data lead, not gut feel" },
        ]
      },
      {
        type: "no",
        label: { zh: "可能不適合，如果…", en: "Probably not a fit if…" },
        items: [
          { zh: "你在找固定套餐、最低報價", en: "You're looking for fixed packages at the lowest price" },
          { zh: "你只想要一個執行指令的設計師或廣告投手", en: "You just need someone to execute instructions, not challenge them" },
          { zh: "你不打算投入時間參與策略對話", en: "You're not willing to invest time in strategic conversation" },
        ]
      }
    ],
  },
  q4: {
    n: "04",
    q: { en: "Who do you support?", zh: "什麼樣的企業需要支援？" },
    a: { en: "No constraint on size, stage or audience. Mostly founders and business leaders who are watching for results.", zh: "不受企業規模、參與階段、業務對象限制；主要是重視成果的經營者與業務負責人。" },
    bars: [
      { label: { en: "SME / growth-stage brands", zh: "中小企／成長期品牌" }, pct: 64 },
      { label: { en: "Healthcare & wellness", zh: "健康與療癒產業" }, pct: 38 },
      { label: { en: "B2C consumer & lifestyle", zh: "B2C 消費與生活" }, pct: 46 },
      { label: { en: "B2B & professional services", zh: "B2B 與專業服務" }, pct: 42 },
    ],
    note: { en: "Around 15+ projects run concurrently at any time.", zh: "任何時候都有 15+ 個專案同時進行。" },
  },
  q5: {
    n: "05",
    q: { en: "What makes you different?", zh: "你們有什麼特點？" },
    a: { en: "Three structural shifts in the market created a specific opening — and we were built exactly for it.", zh: "市場的三個結構性轉變，留下了一個極具精準度的空白——我們正是為此而生。" },
    items: [
      {
        t: { zh: "決策者的「整合疲勞」已達極限", en: "Decision-makers have hit Integration Fatigue" },
        d: { zh: "過去，企業老闆必須扮演「翻譯官」：先找品牌顧問談願景，再找設計公司做視覺，最後找數位代理商投廣告。設計師不懂商業模式，廣告投手不在乎品牌靈魂，結果是花了三筆錢，得到互相矛盾的結果。現在的市場極度渴望一個像我們一樣的角色：「統一戰略大腦」，將敘事引導的感性力量與商業變現的理性邏輯無縫對接，確保從品牌命名到最後一哩路的 GEO 變現都精準咬合。", en: "Founders used to need three separate vendors — a brand consultant, a design firm, an ad agency — that never talked to each other. The result: three invoices, three contradictory outputs. The market now desperately wants a role like ours: a unified strategic brain that connects narrative-led emotion to commercial monetisation seamlessly." }
      },
      {
        t: { zh: "AI 帶來的「執行端商品化」", en: "AI has commoditised the execution layer" },
        d: { zh: "隨著 AI 技術普及，產出基礎文案、生成圖片或架設套版網站的成本正趨近於零。未來沒有客戶會為純粹的「產出物」支付高溢價。市場願意付高價買的，是「戰略架構與商業判斷」。因此，我們的服務之所以有價值，不是因為我們會做這些事，而是因為我們知道這 7 件事在什麼商業格局下該怎麼組合——這種底層商業洞察，是 AI 無法取代的護城河。", en: "As AI pushes basic copy, image generation and template websites towards zero cost, no client will pay a premium for pure deliverables. What the market pays top dollar for is strategic architecture and business judgement. Our services are valuable not because we can execute them, but because we know how to combine these 7 things for any given business context — a moat AI cannot replicate." }
      },
      {
        t: { zh: "精品諮詢的黃金交叉點", en: "The boutique consulting sweet spot" },
        d: { zh: "傳統大型管理顧問公司（麥肯錫、BCG）收費昂貴且缺乏落地執行彈性；傳統行銷公司又缺乏頂層商業視野。這在市場中留下了一大塊空白。我們正在填補這個缺口——專注頂層戰略導航與企業主決策支持，透過跨國網絡靈活調度執行資源，這正是中小企業乃至中大型企業轉型時能買單的高效模式。", en: "Legacy management consultancies (McKinsey, BCG) are expensive and inflexible; traditional marketing agencies lack strategic depth. This leaves a wide-open gap. We are filling it — focused on top-level strategy and founder decision support, deploying execution through global networks. This is the model SMEs and mid-to-large enterprises can readily pay for." }
      },
    ],
    closing: {
      title: { zh: "你們的最大價值？", en: "What is your greatest value?" },
      body: { zh: "並不是賣「一個網站」或「一個 LOGO」的供應商——而是賣「企業增長與轉型系統」的戰略夥伴。請不要在意「做這個網站要花多少工時」，而是「這套雙引擎系統能為我的公司帶來多大的商業回報」。", en: "We are not a vendor selling a website or a logo — we are a strategic partner selling a business growth and transformation system. Don't ask how many hours the website takes; ask what commercial return this dual-engine system will generate for your business." }
    },
  },
  q6: {
    n: "06",
    q: { en: "Is there variance between people?", zh: "不同負責人會有差異嗎？" },
    a: { en: "Yes — because we value the kind of individuality that creates value. But the recommendation rate stays high.", zh: "會。因為我們重視能創造價值的「屬人性」。但客戶的推薦率始終很高。" },
    points: [
      { t: { en: "Flexible pricing", zh: "彈性的定價" }, d: { en: "We don't fix prices — each project is quoted for what it actually needs.", zh: "我們不固定價格——每個專案依實際所需報價。" } },
      { t: { en: "Individual value is encouraged", zh: "鼓勵屬人式的價值提供" }, d: { en: "Fixing the support to a template can't face results flexibly; we respect individual judgement to maximise each project.", zh: "把支援內容固定化就無法靈活面對成果；我們尊重個人判斷，把每個專案做到最大。" } },
      { t: { en: "Right people, not idle resource", zh: "對的人，而非閒置資源" }, d: { en: "We assign the best-fit people to a project, never simply 'who happens to be free'.", zh: "我們指派最適合的人，而非「剛好有空」的人。" } },
    ],
    metrics: [
      { num: "≈ 90%", label: { en: "Clients who felt real results", zh: "客戶成果實感度" } },
      { num: "≈ 89%", label: { en: "Client recommendation rate", zh: "客戶推薦率" } },
    ],
  },
  q7: {
    n: "07",
    q: { en: "Can results be expected if we engage you?", zh: "委託後能期待成果嗎？" },
    a: { en: "Honestly, we can't guarantee it. But here are past results and client voices, for reference.", zh: "老實說，我們無法斷定。但這裡有過往實績與客戶的聲音，供你參考。" },
    quotes: [
      { text: { en: "They didn't stop at advice — they went deep into the project, faced the painful problems with us, and the inquiry numbers grew beyond what anyone expected.", zh: "他們不止於給建議，而是深入專案、與我們一起正視棘手的課題，諮詢量成長到所有人都驚訝的程度。" }, who: { en: "Healthcare clinic · Founder", zh: "痛症中心 · 創辦人" } },
      { text: { en: "When we challenged an area we knew little about, having a diverse set of professionals to consult freely was a huge support.", zh: "當我們挑戰不熟悉的領域，能自由諮詢多元專業的團隊，是很大的支撐。" }, who: { en: "F&B brand · Marketing lead", zh: "餐飲品牌 · 行銷負責人" } },
      { text: { en: "Not a consultant or agency — they stood on the business side, chasing the same goal as a partner. Our own team grew a lot too.", zh: "不是顧問也不是代理商——他們站在事業這一側，作為夥伴追同一個目標。我們的團隊也成長了很多。" }, who: { en: "Lifestyle platform · Director", zh: "生活平台 · 總監" } },
      { text: { en: "Beyond SEO technique, they designed content around our brand direction and built a site with real differentiation. Data-driven improvements, always alongside us.", zh: "不只是 SEO 技巧，他們依品牌方向設計內容、建立有獨特性的網站，並以數據驅動改善，始終與我們同行。" }, who: { en: "Real-estate group · Digital lead", zh: "地產集團 · 數位負責人" } },
    ],
  },
  q8: {
    n: "08",
    q: { en: "The steps to start support", zh: "開始支援的步驟" },
    a: { en: "From first inquiry to project kick-off, here is how an engagement begins.", zh: "從初次詢問到專案啟動，以下是合作如何展開。" },
    steps: [
      { t: { en: "First conversation", zh: "初次諮詢" }, d: { en: "Tell us the business problem you're staring at. No polished brief needed — a clear question is enough.", zh: "告訴我們你正在面對的商業課題。不需要準備完整的簡報，一個清楚的問題就夠了。" } },
      { t: { en: "Proposal", zh: "提案撰寫" }, d: { en: "Based on your brief and any necessary competitor and market research, we build a proposal made specifically for your situation.", zh: "基於初次對話，結合必要的市場與競品研究，我們為你的具體情況量身打造方案。" } },
      { t: { en: "Proposal review", zh: "提案討論" }, d: { en: "We walk through it together, explain every decision, and adjust where needed.", zh: "一起過一遍方案，說清楚每個決策背後的邏輯，有需要就調整方向。" } },
      { t: { en: "Contract", zh: "合約簽署" }, d: { en: "Direction agreed — we formalise it. NDAs can be signed at the first meeting if preferred.", zh: "方向確認，正式簽約。如有需要，保密協議可在初次見面時一併處理。" } },
      { t: { en: "Kick-off", zh: "專案啟動" }, d: { en: "The same team. From this day forward — all the way to delivered results.", zh: "同一個團隊。從啟動的這一天起，全程陪跑——直到成果落地。" } },
    ],
  },
  cta: {
    title: { en: "Have a marketing challenge worth solving?", zh: "有值得一起解決的行銷課題嗎？" },
    lead: { en: "From an abstract business problem to a specific tactic — tell us where you are. The first conversation is free.", zh: "從模糊的事業課題到具體的執行需求——告訴我們你的處境。第一次諮詢免費。" },
    btn: { en: "Talk to us", zh: "與我們會面" },
  },
};

function MarketingScreen({ go, lang }) {
  const ref = window.useReveal();
  const T = window.tr;
  const I = window.Icon;
  const [activeQ, setActiveQ] = React.useState("q1");
  React.useEffect(() => {
    const ids = MKD.nav.map((n) => n.id);
    const onScroll = () => {
      let cur = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= 160) cur = id;
      }
      setActiveQ(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const jump = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: "smooth" });
  };
  const Qhead = (d) => (
    <div className="mkq__head">
      <span className="mkq__n">{d.n}</span>
      <div>
        <h2 className="mkq__q">{T(d.q, lang)}</h2>
        <p className="mkq__a">{T(d.a, lang)}</p>
      </div>
    </div>
  );
  return (
    <div ref={ref} className="mkpage">
      <header className="mkhero">
        <window.Decor />
        <div className="wrap wrap--narrow mkhero__inner">
          <p className="mkhero__eyebrow">{T(MKD.hero.eyebrow, lang)}</p>
          <h1 className="mkhero__title">{T(MKD.hero.title, lang)}</h1>
          <p className="mkhero__lead">{T(MKD.hero.lead, lang)}</p>
        </div>
      </header>

      <div className="wrap wrap--wide mklayout">
        <aside className="mkrail">
          <ul>
            {MKD.nav.map((n, ni) => (
              <li key={n.id}>
                <button className={"mkrail__btn" + (activeQ === n.id ? " on" : "")} onClick={() => jump(n.id)}>
                  <span className="mkrail__num">{String(ni + 1).padStart(2, "0")}</span>
                  <span>{T(n, lang)}</span>
                </button>
              </li>
            ))}
          </ul>
        </aside>

        <main className="mkmain">
          {/* Q1 */}
          <section id="q1" className="mkq reveal">
            {Qhead(MKD.q1)}
            <p className="mkq__statlab">{T(MKD.q1.statsLabel, lang)}</p>
            <div className="mkstats">
              {MKD.q1.stats.map((s, i) => (
                <div className="mkstat" key={i}>
                  <span className="mkstat__num">{s.num}</span>
                  <span className="mkstat__lab">{T(s.label, lang)}</span>
                </div>
              ))}
            </div>
          </section>

          {/* Q2 */}
          <section id="q2" className="mkq reveal">
            {Qhead(MKD.q2)}
            <div className="mkengines">
              {MKD.q2.groups.map((g, gi) => (
                <div className={'mkengine' + (g.cls ? ' mkengine--' + g.cls : '')} key={gi}>
                  <div className="mkengine__head">
                    <span className="mkengine__tag">{T(g.tag, lang)}</span>
                    <span className="mkengine__sub">{T(g.sub, lang)}</span>
                  </div>
                  <div className="mkareas">
                    {g.areas.map((a, i) => (
                      <div className="mkarea" key={i}>
                        <span className="mkarea__n">{a.n}</span>
                        <h3 className="mkarea__t">{T(a.t, lang)}</h3>
                        <p className="mkarea__d">{T(a.d, lang)}</p>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
            <a className="mklink" onClick={() => go("services")}>{lang === "zh" ? "查看服務一覽" : "See all services"} <I name="arrow-right" /></a>
          </section>

          {/* Q5 — 你們有什麼特點？ (position 3) */}
          <section id="q5" className="mkq reveal">
            {Qhead(MKD.q5)}
            <div className="mkfeatures">
              {MKD.q5.items.map((it, i) => (
                <div className="mkfeature" key={i}>
                  <span className="mkfeature__n">{i + 1}</span>
                  <div>
                    <h3 className="mkfeature__t">{T(it.t, lang)}</h3>
                    <p className="mkfeature__d">{T(it.d, lang)}</p>
                  </div>
                </div>
              ))}
            </div>
            <div className="mkfeature__closing">
              <h4>{T(MKD.q5.closing.title, lang)}</h4>
              <p>{T(MKD.q5.closing.body, lang)}</p>
            </div>
          </section>

          {/* Q3 — 適合哪些企業？ (position 4) */}
          <section id="q3" className="mkq reveal">
            {Qhead(MKD.q3)}
            <div className="mkfit">
              {MKD.q3.fit.map((f, fi) => (
                <div className={'mkfit__col mkfit__col--' + f.type} key={fi}>
                  <span className="mkfit__label">{T(f.label, lang)}</span>
                  <ul className="mkfit__list">
                    {f.items.map((it, k) => (
                      <li className="mkfit__item" key={k}>
                        <I name={f.type === 'yes' ? 'check' : 'x'} />
                        <span>{T(it, lang)}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </section>

          {/* Q4 */}
          <section id="q4" className="mkq reveal">
            {Qhead(MKD.q4)}
            <div className="mkbars">
              {MKD.q4.bars.map((b, i) => (
                <div className="mkbar" key={i}>
                  <div className="mkbar__top"><span>{T(b.label, lang)}</span><span className="mkbar__pct">{b.pct}%</span></div>
                  <div className="mkbar__track"><span className="mkbar__fill" style={{ width: b.pct + "%" }} /></div>
                </div>
              ))}
            </div>
            <p className="mkq__note">{T(MKD.q4.note, lang)}</p>
          </section>

          {/* Q7 */}
          <section id="q7" className="mkq reveal">
            {Qhead(MKD.q7)}
            <div className="mkquotes">
              {MKD.q7.quotes.map((q, i) => (
                <blockquote className="mkquote" key={i}>
                  <p>{T(q.text, lang)}</p>
                  <cite>{T(q.who, lang)}</cite>
                </blockquote>
              ))}
            </div>
          </section>

          {/* Q8 — steps to start */}
          <section id="q8" className="mkq reveal">
            {Qhead(MKD.q8)}
            <div className="mksteps">
              {MKD.q8.steps.map((s, i) => (
                <div className="mkstep" key={i}>
                  <div className="mkstep__marker">
                    <span className="mkstep__kicker">{lang === "zh" ? "步" : "STEP"}</span>
                    <span className="mkstep__num">{i + 1}</span>
                  </div>
                  <div className="mkstep__body">
                    <h3 className="mkstep__t">{T(s.t, lang)}</h3>
                    <p className="mkstep__d">{T(s.d, lang)}</p>
                  </div>
                </div>
              ))}
            </div>
          </section>

          <section className="mkcta reveal">
            <h2 className="mkcta__t">{T(MKD.cta.title, lang)}</h2>
            <p className="mkcta__lead">{T(MKD.cta.lead, lang)}</p>
            <a className="btn btn--accent btn--lg" onClick={() => go("contact")}>{T(MKD.cta.btn, lang)} <I name="arrow-right" /></a>
          </section>
        </main>
      </div>

      <window.CTABand go={go} lang={lang} />
      <window.Footer go={go} lang={lang} />
    </div>
  );
}
window.MarketingScreen = MarketingScreen;