/* XHealth website — screens (single-language; lang prop drives copy via tr()) */
const D2 = window.XH_DATA;
const T = window.tr;

/* Corporate Philosophy pyramid (recreated in brand palette) + Founding Spirit */
function SvcPyramid({ lang }) {
  const [active, setActive] = React.useState(0);
  const zones = [
    {
      tag: { zh: '場域一', en: 'Zone 01' },
      title: { zh: '大腦與共識', en: 'Direction & Alignment' },
      sub: '「The SOUL」',
      desc: { zh: '解決 Why 與 What 的問題，確立商業模式與靈魂，讓所有行動都有一個值得信賴的北極星。', en: 'Solve the Why & What — establish your business model and brand soul so every move has a north star.' },
      steps: [
        { n: '01', name: { zh: '企業戰略研究', en: 'Business Strategy Research' }, icon: 'telescope' },
        { n: '02', name: { zh: '品牌諮詢', en: 'Brand Consulting' }, icon: 'lightbulb' },
      ],
    },
    {
      tag: { zh: '場域二', en: 'Zone 02' },
      title: { zh: '建構與落地', en: 'Execution & Launch' },
      sub: '「The MUSCLE」',
      desc: { zh: '解決 How 的問題，確保紀律交付與高標準視覺，把戰略從文件變成市場上看得見、感受得到的品牌力。', en: 'Solve the How — disciplined delivery and high-standard visual execution that makes strategy visible in the market.' },
      steps: [
        { n: '03', name: { zh: '專案管理', en: 'Project Management' }, icon: 'kanban' },
        { n: '04', name: { zh: '讓設計說話', en: 'Design Language' }, icon: 'pen-tool' },
        { n: '05', name: { zh: '推出市場', en: 'Market Launch' }, icon: 'rocket' },
      ],
    },
    {
      tag: { zh: '場域三', en: 'Zone 03' },
      title: { zh: '驗證與迭代', en: 'Optimization & Retainer' },
      sub: '「The LOOP」',
      desc: { zh: '解決增長與永續的問題，利用數據反饋驅動商業優化，讓品牌不只活下去，而是持續進化。', en: 'Solve Growth & Sustainability — data-driven optimization that keeps the brand not just alive, but evolving.' },
      steps: [
        { n: '06', name: { zh: '產品和服務結構', en: 'Product & Service Structure' }, icon: 'layers' },
        { n: '07', name: { zh: '復盤', en: 'Review & Reflection' }, icon: 'rotate-ccw' },
        { n: '08', name: { zh: 'Keep Going 服務', en: 'Keep Going Retainer' }, icon: 'trending-up' },
      ],
    },
  ];
  const z = zones[active];
  // Band fills: Zone 1 = brightest cyan (crown), Zone 2 = mid, Zone 3 = lightest wash
  const fills = ['rgba(53,209,224,.90)', 'rgba(53,209,224,.52)', 'rgba(53,209,224,.22)'];
  // SVG pyramid viewBox 600x520, 3 bands with small gaps
  // Band 0 top triangle: (300,4) (118,178) (482,178)
  // Band 1 mid trapezoid: (118,192) (482,192) (548,372) (52,372)
  // Band 2 bot trapezoid: (52,386) (548,386) (600,520) (0,520)
  return (
    <section className="section spyrsec" id="sec-svcpyr" style={{ position: 'relative' }}>
      {window.FloatingShapes && <window.FloatingShapes set="b" />}
      <div className="wrap" style={{ position: 'relative', zIndex: 1, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, marginBottom: 'clamp(2rem,1.5rem + 2vw,3rem)' }}>
        <p className="eyebrow on-dark">{lang === 'zh' ? '三大場域框架' : 'Three-Zone Framework'}</p>
        <h2 className="display h-2 on-dark" style={{ maxWidth: 720 }}>{lang === 'zh' ? '從戰略到增長，一氣呵成' : 'From Thinking to Growth — End to End'}</h2>
        <p className="lead" style={{ maxWidth: 620, color: 'rgba(255,255,255,.7)' }}>{lang === 'zh' ? '8 個步驟收納進三大場域，層次分明地回答「為什麼、如何做、持續做」。' : '8 steps across three zones — answering Why, How, and Keep Going.'}</p>
      </div>
      <div className="wrap wrap--wide" style={{ position: 'relative', zIndex: 1 }}>
        <div className="spyr">
          <div className="spyr__diagram">
            <svg className="spyr__svg" viewBox="0 0 600 520" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
              {/* Band 0 — Strategy (top) */}
              <polygon className={'spyr__band' + (active===0?' on':'')} points="300,4 118,178 482,178" fill={fills[0]} onClick={()=>setActive(0)} onMouseEnter={()=>setActive(0)} />
              {/* Band 1 — Execution (middle) */}
              <polygon className={'spyr__band' + (active===1?' on':'')} points="118,192 482,192 548,372 52,372" fill={fills[1]} onClick={()=>setActive(1)} onMouseEnter={()=>setActive(1)} />
              {/* Band 2 — Optimization (bottom) */}
              <polygon className={'spyr__band' + (active===2?' on':'')} points="52,386 548,386 600,520 0,520" fill={fills[2]} onClick={()=>setActive(2)} onMouseEnter={()=>setActive(2)} />
              {/* Zone labels */}
              <text x="300" y="92" textAnchor="middle" fill="rgba(20,27,77,.92)" fontFamily="inherit" fontWeight="800" fontSize="20">{lang==='zh'?'大腦與共識':'Direction & Alignment'}</text>
              <text x="300" y="284" textAnchor="middle" fill="rgba(255,255,255,.95)" fontFamily="inherit" fontWeight="800" fontSize="20">{lang==='zh'?'建構與落地':'Execution & Launch'}</text>
              <text x="300" y="459" textAnchor="middle" fill="rgba(255,255,255,.95)" fontFamily="inherit" fontWeight="800" fontSize="20">{lang==='zh'?'驗證與迭代':'Optimization & Retainer'}</text>
            </svg>
          </div>
          <div className="spyr__detail">
            <span className="spyr__dtag">{T(z.tag, lang)}</span>
            <h3 className="spyr__dtitle">{T(z.title, lang)}</h3>
            <span className="spyr__dsub">{z.sub}</span>
            <p className="spyr__ddesc">{T(z.desc, lang)}</p>
            <div className="spyr__steps">
              {z.steps.map(s => (
                <div className="spyr__step" key={s.n}>
                  <span className="spyr__stepn">{s.n}</span>
                  <span className="spyr__stepico"><Icon name={s.icon} /></span>
                  <span className="spyr__stepname">{T(s.name, lang)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PhilosophyPyramid({ lang }) {
  const p = D2.philosophy;
  const [active, setActive] = useState(-1);
  return (
    <section className="section">
      <div className="wrap" style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, marginBottom: 'clamp(2.5rem,2rem + 2vw,3.5rem)' }}>
        <p className="eyebrow" style={{ justifyContent: 'center' }}>{T(p.eyebrow, lang)}</p>
        <h2 className="display h-2" style={{ maxWidth: 640 }}>{T(p.title, lang)}</h2>
        <p className="lead" style={{ maxWidth: 660 }}>{T(p.lead, lang)}</p>
      </div>
      <div className="wrap wrap--wide">
        <div className="pyr">
          <div className="pyr__diagram">
            <svg className="pyr__svg" viewBox="0 0 600 712" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
              <defs>
                <linearGradient id="pyrA" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stopColor="var(--cyan-400)" /><stop offset="1" stopColor="var(--cyan-300)" />
                </linearGradient>
              </defs>
              <polygon className={'pyr__band' + (active === 0 ? ' on' : '')} points="180,0 420,0 300,196" fill="var(--cyan-400)" />
              <polygon className={'pyr__band' + (active === 1 || active === 2 ? ' on' : '')} points="300,224 199,430 401,430" fill="url(#pyrA)" />
              <polygon className={'pyr__band' + (active === 3 ? ' on' : '')} points="199,430 401,430 473,575 127,575" fill="var(--cyan-200)" />
              <polygon className={'pyr__band' + (active === 4 ? ' on' : '')} points="127,575 473,575 540,712 60,712" fill="var(--cyan-100)" />
            </svg>
            <div className="pyr__labels">
              {p.tiers.map((t, i) => (
                <div key={i} className={'ptier ptier--' + i + (active === i ? ' on' : '')}
                  onMouseEnter={() => setActive(i)} onMouseLeave={() => setActive(-1)}>
                  <span className="ptier__label">{T(t.label, lang)}</span>
                  <span className="ptier__content">{T(t.content, lang)}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="pyr__msg">
            <Icon name="arrow-right" className="pyr__arrow" />
            <div className="pyr__msgcard">
              <span className="pyr__msglabel">{T(p.messageLabel, lang)}</span>
              <h3 className="pyr__msgtext">{T(p.message, lang)}</h3>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FoundingSpirit({ lang }) {
  const f = D2.founding;
  return (
    <section className="section founding">
      <div className="wrap wrap--narrow">
        <div className="founding__head reveal">
          <p className="eyebrow" style={{ justifyContent: 'center' }}>{T(f.eyebrow, lang)}</p>
          <h2 className="display h-1">{T(f.title, lang)}</h2>
        </div>
        <p className="founding__lead reveal">{T(f.lead, lang)}</p>
        <div className="founding__body">
          {f.paras.map((para, i) => <p key={i} className="founding__para reveal">{T(para, lang)}</p>)}
        </div>
        <blockquote className="founding__closing reveal">{T(f.closing, lang)}</blockquote>
      </div>
    </section>
  );
}
function TonePoster({ lang, attr }) {
  const data = D2.brandTone;
  const a = attr || data.attrs[0];
  return (
    <div className="poster">
      <img className="poster__motif" src={window.R('../../assets/motif-grid.png')} alt="" />
      <div className="poster__mesh" />
      <BlobCanvas variant="hero" />
      <div className="poster__inner">
        <p className="poster__tag">{T(data.heroTag, lang)}</p>
        <div className="poster__keywords">
          {T(data.keywords, lang).map((k, i) => <span key={i}>{k}</span>)}
        </div>
        <Icon name="chevron-down" className="poster__chev" />
        <p className="poster__label">{T(data.eyebrow, lang)}</p>
        <h2 className="poster__word">{a.word}</h2>
        <p className="poster__zh">{a.zh}</p>
      </div>
    </div>
  );
}

/* Interactive Tone & Manner showcase — auto-cycles brand attributes */
function ToneShowcase({ lang, bare }) {
  const data = D2.brandTone;
  const attrs = data.attrs;
  const [idx, setIdx] = useState(0);
  const [paused, setPaused] = useState(false);
  useEffect(() => {
    if (paused) return undefined;
    const t = setInterval(() => setIdx((i) => (i + 1) % attrs.length), 3600);
    return () => clearInterval(t);
  }, [paused, idx, attrs.length]);
  const a = attrs[idx];
  const stage = (
    <div className="wrap wrap--wide">
      <div className="tonestage" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
        <img className="tonestage__motif" src={window.R('../../assets/motif-band.png')} alt="" />
        <div className="tonestage__mesh" />
        <div className="tonestage__body">
          <div className="tonestage__words">
            {attrs.map((x, i) => (
              <div key={i} className={'tonestage__word' + (i === idx ? ' on' : (i === (idx - 1 + attrs.length) % attrs.length ? ' prev' : ''))} aria-hidden={i !== idx}>
                <h3>{x.word}</h3>
                <span className="tonestage__zh">{x.zh}</span>
              </div>
            ))}
          </div>
          <p className="tonestage__blurb">{T(a.blurb, lang)}</p>
        </div>
        <div className="tonestage__tabs">
          {attrs.map((x, i) => (
            <button key={i} className={'tonetab' + (i === idx ? ' active' : '')} onClick={() => setIdx(i)}>
              <Icon name={x.icon} />
              <span className="tonetab__label">{x.word}</span>
              <span className="tonetab__track"><span className="tonetab__fill" key={idx + '-' + paused} style={{ animationPlayState: paused ? 'paused' : 'running' }} /></span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
  if (bare) return stage;
  return (
    <section className="section toneshow">
      <div className="wrap" style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, marginBottom: 'clamp(4rem,3rem + 4vw,6.5rem)' }}>
        <p className="eyebrow" style={{ justifyContent: 'center' }}>{T(data.sectionEyebrow, lang)}</p>
        <h2 className="display h-2" style={{ maxWidth: 640 }}>{T(data.sectionTitle, lang)}</h2>
        <p className="lead" style={{ maxWidth: 660 }}>{T(data.sectionLead, lang)}</p>
      </div>
      {stage}
    </section>
  );
}

function Hero({ go, lang }) {
  const h = D2.hero;
  return (
    <header className="hero hero--home">
      <Decor />
      <div className="wrap wrap--wide hero__grid hero__grid--solo">
        <div>
          <p className="eyebrow hero__eyebrow">{T(h.eyebrow, lang)}</p>
          <h1 className="display h-hero">{T(h.titlePre, lang)}<span className="grad">{T(h.titleAccent, lang)}</span></h1>
          <p className="lead hero__sub">{T(h.sub, lang)}</p>
          <div className="hero__cta">
            <a className="btn btn--primary btn--lg" onClick={() => go('work')}>{T(h.ctaPrimary, lang)} <Icon name="arrow-right" /></a>
            <a className="btn btn--secondary btn--lg" onClick={() => go('contact')}>{T(D2.ui.talk, lang)}</a>
          </div>
          <div className="hero__trust">
            <Icon name="check-circle-2" style={{ width: 17, height: 17, color: 'var(--jade-500)' }} />
            <span>{T(h.trust, lang)}</span>
          </div>
        </div>
      </div>
      <div className="wrap wrap--wide hero__stagewrap">
        <ToneShowcase lang={lang} bare />
      </div>
      <div className="wrap wrap--wide">
        <div className="stats">
          {D2.stats.map((s, i) => (
            <div key={i}>
              <div className="stat__num">{s.num}<span className="u">{s.unit}</span></div>
              <div className="stat__label">{T(s.label, lang)}</div>
            </div>
          ))}
        </div>
      </div>
    </header>
  );
}

function ServicePanels({ go, lang }) {
  const slugs = ['brand-strategy', 'website-design', 'search-media'];
  const imgs = {
    'brand-strategy': 'assets/svc-strategy/fubon.png',
    'website-design': 'assets/svc-web/tobetter.jpeg',
    'search-media': 'assets/svc-search/wonderland.png',
  };
  const items = slugs.map((sl) => D2.services.find((x) => x.slug === sl)).filter(Boolean);
  const [active, setActive] = React.useState(0);
  return (
    <div className="svcpanels">
      {items.map((s, i) => (
        <div
          key={s.slug}
          className={'svcpanel' + (active === i ? ' on' : '')}
          onMouseEnter={() => setActive(i)}
          onClick={() => (active === i ? go('services:' + s.slug) : setActive(i))}
        >
          <div className="svcpanel__bg" style={{ backgroundImage: `url(${window.R(imgs[s.slug])})` }} />
          <div className="svcpanel__veil" />
          <div className="svcpanel__body">
            <div className="svcpanel__top">
              <span className="svcpanel__num">{s.n}</span>
              <div className="svcpanel__icon"><Icon name={s.icon} /></div>
            </div>
            <div className="svcpanel__foot">
              <h3 className="svcpanel__title">{T(s.name, lang)}</h3>
              <p className="svcpanel__desc">{T(s.desc, lang)}</p>
              <span className="svcpanel__cta">{T(D2.ui.explore, lang)} <Icon name="arrow-right" /></span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function ServiceBento({ go, lang }) {
  // image preview per service (real client work samples)
  const imgs = {
    'brand-strategy': 'assets/svc-strategy/fubon.png',
    'market-research': 'assets/svc-research/fubon-survey.png',
    'naming-architecture': 'assets/svc-strategy/jooove.png',
    'brand-identity': 'assets/svc-content/archangel.png',
    'website-design': 'assets/svc-web/tobetter.jpeg',
    'content-communication': 'assets/svc-strategy/spotless.png',
    'search-media': 'assets/svc-search/wonderland.png',
  };
  // layout: row1 01(wide)+05, row2 06+07(wide)
  const layout = [
    { idx: 0, wide: true, feat: true },
    { idx: 4, wide: false, feat: false },
    { idx: 5, wide: false, feat: false },
    { idx: 6, wide: true, feat: false },
  ];
  return (
    <div className="svcbento">
      {layout.map(({ idx, wide, feat }) => {
        const s = D2.services[idx];
        return (
          <div
            key={s.slug}
            className={'svcbtile' + (wide ? ' svcbtile--wide' : '') + (feat ? ' svcbtile--feat' : '')}
            onClick={() => go('services:' + s.slug)}
          >
            <div className="svcbtile__media">
              <img src={window.R(imgs[s.slug])} alt={T(s.name, lang)} loading="lazy" />
            </div>
            <div className="svcbtile__content">
              <div className="svcbtile__top">
                <span className="svcbtile__num">{s.n}</span>
                <span className="svcbtile__icon"><Icon name={s.icon} /></span>
              </div>
              <h3 className="svcbtile__title">{T(s.name, lang)}</h3>
              <p className="svcbtile__desc">{T(s.desc, lang)}</p>
              <span className="svcbtile__arrow">{T(D2.ui.explore, lang)} <Icon name="arrow-right" /></span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function ServiceTabs({ go, lang }) {
  const [active, setActive] = React.useState(0);
  const s = D2.services[active];
  return (
    <div className="svctabs">
      <div className="svctabs__list">
        {D2.services.map((svc, i) => (
          <button key={svc.slug} className={'svctab' + (active === i ? ' on' : '')} onClick={() => setActive(i)}>
            <span className="svctab__num">{svc.n}</span>
            <span className="svctab__icon"><Icon name={svc.icon} /></span>
            <span className="svctab__name">{T(svc.name, lang)}</span>
          </button>
        ))}
      </div>
      <div className="svctabs__detail" key={active} data-num={s.n}>
        <div className="svctabs__di"><Icon name={s.icon} /></div>
        <h3 className="svctabs__dt">{T(s.name, lang)}</h3>
        <p className="svctabs__dd">{T(s.desc, lang)}</p>
        <button className="svctabs__cta" onClick={() => go('services:' + s.slug)}>
          {T(D2.ui.explore, lang)} <Icon name="arrow-right" />
        </button>
      </div>
    </div>
  );
}

function ServiceStrip({ go, lang }) {
  return (
    <div className="svcstrip">
      {D2.services.map((s) => (
        <button key={s.slug} className="svcstrip__item" onClick={() => go('services:' + s.slug)}>
          <span className="svcstrip__num">{s.n}</span>
          <span className="svcstrip__name">{T(s.name, lang)}</span>
        </button>
      ))}
    </div>
  );
}

function ServiceCard({ s, go, lang }) {
  return (
    <div className="card card--hover svc reveal" onClick={() => go('services:' + s.slug)}>
      <div className="svc__head">
        <div className="svc__icon"><Icon name={s.icon} /></div>
        <span className="svc__num">{s.n}</span>
      </div>
      <div>
        <h3 className="svc__title">{T(s.name, lang)}</h3>
      </div>
      <p className="svc__desc">{T(s.desc, lang)}</p>
      <span className="svc__arrow">{T(D2.ui.explore, lang)} <Icon name="arrow-right" /></span>
    </div>
  );
}

function ProjectCard({ p, go, lang }) {
  return (
    <div className="proj reveal" onClick={() => go(p.caseLink ? 'case:' + p.caseLink : 'work')}>
      <div className="proj__logo">
        <span className="badge badge--navy proj__badge">{T(D2.sectors[p.sector], lang)}</span>
        <img src={window.R('../../assets/case-logos/' + p.logo)} alt={T(p.client, lang)} />
      </div>
      <div className="proj__body">
        <div className="proj__client"><b>{T(p.client, lang)}</b>{p.caseLink && <span className="proj__readcase">{T(D2.ui.readCase, lang)} →</span>}</div>
        <h4 className="proj__title">{T(p.title, lang)}</h4>
        <p className="proj__summary">{T(p.summary, lang)}</p>
        <div className="proj__result"><b>{p.stat}</b><span>{T(p.statLabel, lang)}</span></div>
        <div className="proj__tags">{T(p.tags, lang).map((t) => <span key={t} className="tag">{t}</span>)}</div>
      </div>
    </div>
  );
}

function InsightList({ go, lang }) {
  const P = D2.pages.aboutPage;
  return (
    <section className="section">
      <div className="wrap wrap--wide">
        <div className="rowhead">
          <div>
            <p className="eyebrow" style={{ marginBottom: 14 }}>{T(P.insightEyebrow, lang)}</p>
            <h2 className="display h-2">{T(P.insightTitle, lang)}</h2>
          </div>
          <a className="btn btn--secondary" onClick={() => go('insights')}>{T(D2.ui.allInsights, lang)} <Icon name="arrow-right" /></a>
        </div>
        <div className="insightlist">
          {D2.insights.map((it, i) => (
            <div className="insightrow reveal" key={it.date} onClick={() => go(it.slug ? 'insight:' + it.slug : 'about')}>
              <span className="insightrow__index">{String(i + 1).padStart(2, '0')}</span>
              <div className="insightrow__meta">
                <span className="badge badge--accent">{T(it.cat, lang)}</span>
                <span className="insightrow__date">{it.date} · {T(it.read, lang)}</span>
              </div>
              <div className="insightrow__body">
                <h3 className="insightrow__title">{T(it.title, lang)}</h3>
                <p className="insightrow__excerpt">{T(it.excerpt, lang)}</p>
              </div>
              <span className="insightrow__arrow"><Icon name="arrow-up-right" /></span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ArticleScreen({ go, lang, slug }) {
  const ref = useReveal();
  const A = (window.XH_ARTICLES || {})[slug] || (window.XH_ARTICLES || {})['strategy-execution'];
  if (!A) return <div style={{ minHeight: '60vh' }} />;
  const related = D2.insights.filter((it) => it.slug !== slug).slice(0, 3);
  return (
    <div ref={ref} className="article">
      <div className="article__top">
        <div className="wrap wrap--narrow">
          <button className="backlink backlink--dark" onClick={() => go('insights')}><Icon name="arrow-left" /> {T(D2.pages.insightsPage.eyebrow, lang)}</button>
          <p className="article__cat">{T(A.cat, lang)}</p>
          <h1 className="display article__title">{T(A.title, lang)}</h1>
          <p className="article__deck">{T(A.deck, lang)}</p>
          <div className="article__meta">
            <span>{A.date}</span><span className="dot" /><span>{T(A.read, lang)}</span>
          </div>
        </div>
      </div>

      <div className="wrap wrap--wide">
        <div className="article__feature">
          <img className="article__feature-motif" src={window.R('../../assets/motif-grid.png')} alt="" />
          <div className="article__feature-mesh" />
          <img className="article__feature-logo" src={window.R('../../assets/logo-xhealth-white.png')} alt="XHealth" />
        </div>
      </div>

      <article className="article__bodywrap">
        <div className="wrap wrap--narrow">
          <div className="tl">
            {A.sections.map((sec, si) => (
              <section className="tl-node reveal" key={si}>
                <div className="tl-node__rail">
                  <span className="tl-node__num">{String(si + 1).padStart(2, '0')}</span>
                </div>
                <div className="tl-node__content">
                  {sec.h && <h2 className="article__h">{T(sec.h, lang)}</h2>}
                  {sec.blocks.map((b, bi) => {
                    if (b.t === 'quote') return <blockquote className="article__quote" key={bi}>{T(b.x, lang)}</blockquote>;
                    if (b.t === 'list') return (
                      <ul className="article__list" key={bi}>
                        {b.items.map((it, ii) => <li key={ii}><Icon name="check" />{T(it, lang)}</li>)}
                      </ul>
                    );
                    return <p className="article__p" key={bi}>{T(b.x, lang)}</p>;
                  })}
                </div>
              </section>
            ))}
          </div>
        </div>
      </article>

      <div className="section wrap wrap--wide">
        <div className="ctaband">
          <img className="ctaband-motif" src={window.R('../../assets/motif-band.png')} alt="" />
          <div className="ctaband-mesh" />
          <div className="ctaband__inner">
            <h2 className="display h-1 on-dark" style={{ maxWidth: 680 }}>{T(A.ctaTitle, lang)}</h2>
            <div style={{ display: 'flex', gap: 14, marginTop: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
              <a className="btn btn--accent btn--lg" onClick={() => go('contact')}>{T(A.cta1, lang)} <Icon name="arrow-right" /></a>
              <a className="btn btn--ghost-dark btn--lg" onClick={() => go(A.cta2route || 'services:brand-strategy')}>{T(A.cta2, lang)}</a>
            </div>
          </div>
        </div>
      </div>

      {related.length > 0 && (
        <section className="section--tight" style={{ paddingBottom: 'clamp(4rem,2rem + 6vw,7rem)' }}>
          <div className="wrap wrap--wide">
            <p className="eyebrow" style={{ marginBottom: 30 }}>{T(D2.ui.readInsight, lang)}</p>
            <div className="grid-3">
              {related.map((it) => (
                <div className="card card--hover insight reveal" key={it.date} onClick={() => go(it.slug ? 'insight:' + it.slug : 'about')}>
                  <div className="insight__meta">
                    <span className="badge badge--accent">{T(it.cat, lang)}</span>
                    <span>{it.date}</span>
                  </div>
                  <h3 className="insight__title">{T(it.title, lang)}</h3>
                  <p className="insight__excerpt">{T(it.excerpt, lang)}</p>
                  <span className="insight__more">{T(D2.ui.readInsight, lang)} <Icon name="arrow-up-right" /></span>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      <Footer go={go} lang={lang} />
    </div>
  );
}

const ACCENTS = {
  navy:  { bg: 'var(--gradient-ink)', chip: 'var(--navy-50)', chipText: 'var(--navy-700)' },
  cyan:  { bg: 'linear-gradient(150deg, #1a749c 0%, #0e1f3a 70%)', chip: 'var(--cyan-50)', chipText: 'var(--cyan-600)' },
  sky:   { bg: 'linear-gradient(150deg, #2a6f93 0%, #122a47 72%)', chip: '#e8f1f7', chipText: '#2a6f93' },
  pink:  { bg: 'linear-gradient(150deg, #5b3a5a 0%, #16172e 72%)', chip: 'var(--motif-pink)', chipText: '#8a4a6a' },
};

function InsightCover({ it, lang, large }) {
  const a = ACCENTS[it.accent] || ACCENTS.navy;
  return (
    <div className={'icover' + (large ? ' icover--lg' : '')} style={{ background: a.bg }}>
      <img className="icover__motif" src={window.R('../../assets/motif-grid.png')} alt="" />
      <div className="icover__mesh" />
      <span className="icover__cat">{T(it.cat, lang)}</span>
      <Icon name={it.icon || 'file-text'} className="icover__icon" />
      <span className="icover__mark">XHEALTH · INSIGHT</span>
    </div>
  );
}

function InsightsScreen({ go, lang }) {
  const ref = useReveal();
  const P = D2.pages.insightsPage;
  const cats = ['__all', ...Array.from(new Set(D2.insights.map((it) => T(it.cat, 'en'))))];
  const [filter, setFilter] = useState('__all');
  const list = filter === '__all' ? D2.insights : D2.insights.filter((it) => T(it.cat, 'en') === filter);
  const featured = list[0];
  const rest = list.slice(1);
  const open = (it) => go(it.slug ? 'insight:' + it.slug : 'about');
  return (
    <div ref={ref}>
      <header className="hero" style={{ paddingBottom: 0 }}>
        <Decor />
        <div className="wrap wrap--narrow" style={{ textAlign: 'center', margin: '0 auto' }}>
          <p className="eyebrow" style={{ marginBottom: 18, justifyContent: 'center' }}>{T(P.eyebrow, lang)}</p>
          <h1 className="display h-1">{T(P.title, lang)}</h1>
          <p className="lead" style={{ marginTop: 20 }}>{T(P.lead, lang)}</p>
        </div>
      </header>

      <section className="section" style={{ position: 'relative' }}>
        {window.FloatingShapes && <window.FloatingShapes set="b" />}
        <div className="wrap wrap--wide" style={{ position: 'relative', zIndex: 1 }}>
          <div className="chips" style={{ justifyContent: 'center', marginBottom: 'clamp(3.5rem,2.5rem + 4vw,6rem)' }}>
            {cats.map((c) => (
              <button key={c} className={'chip' + (filter === c ? ' active' : '')} onClick={() => setFilter(c)}>
                {c === '__all' ? T(P.filterAll, lang) : T((D2.insights.find((it) => T(it.cat, 'en') === c) || {}).cat, lang)}
              </button>
            ))}
          </div>

          {featured && (
            <div className="ifeature reveal" style={{ marginTop: 'clamp(2rem,1.5rem + 2vw,3.5rem)' }} onClick={() => open(featured)}>
              <InsightCover it={featured} lang={lang} large />
              <div className="ifeature__body">
                <span className="ifeature__tag">{T(D2.ui.featuredRead, lang)}</span>
                <h2 className="ifeature__title">{T(featured.title, lang)}</h2>
                <p className="ifeature__excerpt">{T(featured.excerpt, lang)}</p>
                <div className="ifeature__meta">
                  <span>{featured.date}</span><span className="dot" /><span>{T(featured.read, lang)} {T(D2.ui.minRead, lang)}</span>
                </div>
                <span className="btn btn--primary" style={{ marginTop: 8, alignSelf: 'flex-start' }}>{T(D2.ui.readArticle, lang)} <Icon name="arrow-right" /></span>
              </div>
            </div>
          )}

          {rest.length > 0 && (
            <React.Fragment>
              <div className="imag__divider"><span>{T(D2.ui.latestReads, lang)}</span></div>
              <div className="imag__grid">
                {rest.map((it) => (
                  <article className="icard reveal" key={it.slug} onClick={() => open(it)}>
                    <InsightCover it={it} lang={lang} />
                    <div className="icard__body">
                      <div className="icard__meta">
                        <span className="badge badge--accent">{T(it.cat, lang)}</span>
                        <span>{it.date}</span>
                      </div>
                      <h3 className="icard__title">{T(it.title, lang)}</h3>
                      <p className="icard__excerpt">{T(it.excerpt, lang)}</p>
                      <span className="icard__more">{T(D2.ui.readInsight, lang)} <Icon name="arrow-up-right" /></span>
                    </div>
                  </article>
                ))}
              </div>
            </React.Fragment>
          )}
        </div>
      </section>

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

function HomeScreen({ go, lang }) {
  const ref = useReveal();
  const featuredProjects = React.useMemo(() => {
    const arr = D2.projects.slice();
    for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr.slice(0, 3);
  }, []);
  const P = D2.pages;
  return (
    <div ref={ref}>
      {window.SectionRail && <window.SectionRail lang={lang} />}
      <Hero go={go} lang={lang} />

      {/* Services + how we work — merged into one continuous section */}
      <section className="section--tight" id="sec-services" style={{ position: 'relative' }}>
        {window.FloatingShapes && <window.FloatingShapes set="a" />}
        <div className="wrap wrap--wide" style={{ position: 'relative', zIndex: 1 }}>
          <div className="rowhead">
            <div>
              <p className="eyebrow" style={{ marginBottom: 14 }}>{T(P.servicesHome.eyebrow, lang)}</p>
              <h2 className="display h-2">{T(P.servicesHome.title, lang)}</h2>
            </div>
            <a className="btn btn--secondary" onClick={() => go('services')}>{T(D2.ui.allServices, lang)} <Icon name="arrow-right" /></a>
          </div>
          <ServiceBento go={go} lang={lang} />
        </div>
      </section>

      {/* Who we are */}
      <section className="section" id="sec-who">
        <div className="wrap wrap--wide">
          <div className="whorow">
            <div className="whorow__intro">
              <p className="eyebrow">{T(P.whoWe.eyebrow, lang)}</p>
              <h2 className="display h-1">{T(P.whoWe.title, lang)}</h2>
              <p className="lead" style={{ marginTop: 2 }}>{T(P.whoWe.body, lang)}</p>
              <a className="btn btn--primary" style={{ marginTop: 6 }} onClick={() => go('about')}>{T(D2.ui.brandStory, lang)} <Icon name="arrow-right" /></a>
            </div>
            <div className="wholist">
              {D2.why.map((w, i) => (
                <div className="wholist__item reveal" key={w.icon}>
                  <span className="wholist__num">{String(i + 1).padStart(2, '0')}</span>
                  <h3 className="wholist__title"><Icon name={w.icon} />{T(w.title, lang)}</h3>
                  <p className="wholist__desc">{T(w.desc, lang)}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Why we're different — positioning band */}
      <section className="section section--dark posband" style={{ position: 'relative' }}>
        {window.FloatingShapes && <window.FloatingShapes set="b" />}
        <div className="wrap wrap--wide" style={{ position: 'relative', zIndex: 1 }}>
          <div className="posband__head">
            <p className="eyebrow on-dark">{lang === 'zh' ? '我們的不同' : 'Why we\'re different'}</p>
            <h2 className="display h-2">{lang === 'zh' ? '不只把品牌做漂亮，更讓它能賺錢' : 'Not just beautiful brands — brands that make money'}</h2>
            <p className="posband__lead">{lang === 'zh' ? '我們不是只會畫 LOGO 的設計工作室，也不是只會盲目投廣告的代操公司。我們是有能力從商業出發、一路做到變現的' : 'Not a studio that only draws logos, nor an agency that only buys ads. We are your '}<b>{lang === 'zh' ? '全鏈路諮詢夥伴' : 'full-chain consulting partner'}</b>{lang === 'zh' ? '。' : '.'}</p>
            <div className="posband__not">
              <span className="posnot"><Icon name="x" /><s>{lang === 'zh' ? '只會畫 LOGO 的設計工作室' : 'Logo-only design studio'}</s></span>
              <span className="posnot"><Icon name="x" /><s>{lang === 'zh' ? '只會盲目投廣告的代操公司' : 'Blind ad-buying agency'}</s></span>
            </div>
          </div>
          <div className="posvs">
            <div className="poscol poscol--them reveal">
              <span className="poscol__tag">{lang === 'zh' ? '一般做法' : 'The usual'}</span>
              <h3 className="poscol__title">{lang === 'zh' ? '設計工作室 / 廣告代操' : 'Studios & ad agencies'}</h3>
              <ul className="poscol__list">
                <li className="poscol__item"><Icon name="x" />{lang === 'zh' ? '從美感出發，憑感覺畫 LOGO' : 'Start from aesthetics — design on gut feel'}</li>
                <li className="poscol__item"><Icon name="x" />{lang === 'zh' ? '品牌與行銷各做各的，無法串接' : 'Brand and marketing run in silos'}</li>
                <li className="poscol__item"><Icon name="x" />{lang === 'zh' ? '盲目投放，只看曝光與點擊' : 'Buy ads blindly — chase clicks, not revenue'}</li>
                <li className="poscol__item"><Icon name="x" />{lang === 'zh' ? '交付物完成即結案，不對結果負責' : 'Job ends at delivery — no accountability for results'}</li>
              </ul>
            </div>
            <div className="poscol poscol--us reveal">
              <span className="poscol__tag">{lang === 'zh' ? 'XHealth' : 'XHealth'}</span>
              <h3 className="poscol__title">{lang === 'zh' ? '全鏈路諮詢夥伴' : 'Full-chain consulting partner'}</h3>
              <ul className="poscol__list">
                <li className="poscol__item"><Icon name="check" />{lang === 'zh' ? '從商業數據出發，決策不憑直覺' : 'Start from business data — decisions, not guesses'}</li>
                <li className="poscol__item"><Icon name="check" />{lang === 'zh' ? '戰略、品牌、行銷一條線打通' : 'Strategy, brand and marketing on one through-line'}</li>
                <li className="poscol__item"><Icon name="check" />{lang === 'zh' ? '把曝光轉化為實際業務增長' : 'Turn exposure into real business growth'}</li>
                <li className="poscol__item"><Icon name="check" />{lang === 'zh' ? '對投資回報率負責，幫你變現' : 'Accountable for ROI — built to monetise'}</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Client wall (獲…信賴) — with "view all work" CTA */}
      <section className="section--tight" id="sec-work">
        <div className="wrap wrap--wide">
          <div className="trustband__head">
            <div className="trustband__lead">
              <p className="eyebrow" style={{ marginBottom: 18 }}>{lang === 'zh' ? '跨產業視野' : 'Cross-industry perspective'}</p>
              <h2 className="display h-2 trustband__title">{lang === 'zh' ? '理性數據，驗證感性的品牌策略' : "We're adaptive outside experts with cross-industry insight a single sector can't give you."}</h2>
            </div>
            <p className="trustband__note">{T(P.clientWallLabel, lang)}</p>
          </div>
          <IndustryShowcase lang={lang} go={go} />
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 'clamp(2rem,1.5rem + 2vw,3.25rem)' }}>
            <a className="btn btn--secondary btn--lg" onClick={() => go('work')}>{T(D2.ui.viewAllWork, lang)} <Icon name="arrow-right" /></a>
          </div>
        </div>
      </section>

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

function IndustryShowcase({ lang, go }) {
  const inds = D2.industries;
  const [active, setActive] = React.useState(0);
  const cur = inds[active];
  const byLogo = React.useMemo(() => {
    const m = {};
    D2.projects.forEach((p) => { m[p.logo] = p; });
    return m;
  }, []);
  return (
    <div className="indshow">
      <div className="indshow__list">
        {inds.map((ind, i) => (
          <button
            key={ind.icon}
            className={'indshow__tab' + (active === i ? ' on' : '')}
            onMouseEnter={() => setActive(i)}
            onClick={() => setActive(i)}
          >
            <span className="indshow__tabicon"><Icon name={ind.icon} /></span>
            <span className="indshow__tabname">{T(ind.name, lang)}</span>
            <span className="indshow__tabcount">{ind.cases.length}</span>
          </button>
        ))}
      </div>
      <div className="indshow__panel" key={active}>
        <div className="indshow__panelhead">
          <span className="indshow__panelicon"><img src={window.R('../../assets/ind-icon.png')} alt="" style={{ objectPosition: (18 + active * 16) + '% center' }} /></span>
          <h3 className="indshow__paneltitle">{T(cur.name, lang)}</h3>
        </div>
        <p className="indshow__paneldesc">{T(cur.detail, lang)}</p>
        <div className="indshow__logos">
          {cur.cases.map((logo) => {
            const proj = byLogo[logo];
            const name = proj ? T(proj.client, lang) : '';
            return (
              <button
                className="indshow__brand"
                key={logo}
                onClick={() => (proj && proj.caseLink ? go('case:' + proj.caseLink) : go('work'))}
                title={name}
              >
                <span className="indshow__brandimg"><img src={window.R('../../assets/case-logos/' + logo)} alt={name} loading="lazy" /></span>
                <span className="indshow__brandname">{name}</span>
              </button>
            );
          })}
        </div>
        <a className="indshow__more" onClick={() => go('work')}>
          {T(D2.ui.seeAllWork, lang)} <Icon name="arrow-right" />
        </a>
      </div>
    </div>
  );
}

function ServicesScreen({ go, lang }) {
  const ref = useReveal();
  const P = D2.pages.servicesPage;
  return (
    <div ref={ref}>
      <section className="section" style={{ position: 'relative' }}>
        <div className="wrap wrap--wide" style={{ textAlign: 'center', maxWidth: 860, margin: '0 auto clamp(2.5rem,2rem + 3vw,4.5rem)' }}>
          <p className="eyebrow" style={{ justifyContent: 'center', marginBottom: 16 }}>{lang === 'zh' ? '成功始於策略' : 'Success begins with strategy'}</p>
          <h2 className="display h-2" style={{ marginBottom: 22 }}>{lang === 'zh' ? '從商業角度重新設計營銷策略，打造創造商機的品牌' : 'Branding rebuilt from a commercial lens — built to create real opportunities'}</h2>
          <p className="lead" style={{ color: 'var(--text-muted)', maxWidth: 640, margin: '0 auto' }}>{lang === 'zh' ? '市面上的行銷公司往往缺乏底層的商業營運思維，而傳統的管理顧問公司又太過死板，缺乏品牌敘事的美感與溫度。因此才有我們這樣的一家 「品牌行銷的營銷諮詢公司」，確保公司的「品牌故事」與「賺錢機制」完美對齊，互為表裡。 ' : 'Most agencies lack commercial depth. Most consultancies lack creative warmth. We sit at that intersection — ensuring your brand story and your revenue model are perfectly aligned.'}</p>
        </div>
        <div className="wrap wrap--wide">
          <div className="nestband">
            {(() => {
              const rows = [
                { t: { zh: '品牌行銷的戰略與重組', en: 'Branding Strategy & Restructuring' }, d: { zh: '解決企業的「定位與認知」問題，確保公司的航向正確且具備高級感。', en: 'Solving the positioning and perception problem — so your company moves in the right direction and commands the right premium.' } },
                { t: { zh: '數據分析及市場調查', en: 'Data Analysis & Market Research' }, d: { zh: '解決「為什麼你要買我們？」讓商業決策不再憑直覺，由外向內佈局戰略，這也是諮詢顧問與純創意設計公司最大的分水嶺。', en: 'Answering "why should anyone buy from us?" — decisions backed by evidence, not instinct. This is the sharpest divide between a consultancy and a pure creative agency.' } },
                { t: { zh: '品牌定位及視覺識別設計', en: 'Brand Positioning & Visual Identity Design' }, d: { zh: '透過網站重塑企業外在形象，將無形的戰略轉化為一致的視覺語言，建立第一眼的絕對信任，讓品牌真正長出靈魂。', en: 'Translating invisible strategy into a consistent visual language — building absolute trust at first glance.' } },
                { t: { zh: '營銷策略及內容', en: 'Marketing Strategy & Content' }, d: { zh: '精準對應「客戶旅程的每一個觸點」，確保內容的產出不是自嗨，而是能實際推動潛在客戶往下一個階段前進的動力。', en: 'Map content to every touchpoint in the customer journey — not self-congratulatory output, but momentum that moves prospects forward.' } },
                { t: { zh: '搜索引擎優化｜廣告成效分析', en: 'SEO | Ad Performance & Analysis' }, d: { zh: '利用SEM、GEO及社交媒體營銷機制，將「曝光轉化為實際的業務增長」，直接對客戶的投資回報率負責。', en: 'SEM, GEO and social — converting exposure into real business growth, with direct accountability for your return on investment.' } },
              ];
              const build = (i) => (
                <div className={'nestrow nestrow--' + i + ' reveal'}>
                  <h3 className="nestrow__t">{rows[i].t[lang]}</h3>
                  <p className="nestrow__d">{rows[i].d[lang]}</p>
                  {i < rows.length - 1 && build(i + 1)}
                </div>
              );
              return build(0);
            })()}
          </div>
        </div>
      </section>
      <header className="hero" style={{ paddingBottom: 0 }}>
        <Decor />
        <div className="wrap wrap--narrow" style={{ textAlign: 'center', margin: '0 auto' }}>
          <p className="eyebrow" style={{ marginBottom: 18, justifyContent: 'center' }}>{T(P.eyebrow, lang)}</p>
          <h1 className="display h-1">{T(P.title, lang)}</h1>
          <p className="lead" style={{ marginTop: 20 }}>{T(P.lead, lang)}</p>
          <div className="svchero__stats">
            {D2.stats.map((s, i) => (
              <div className="svchero__stat" key={i}>
                <div className="svchero__statnum">{s.num}<span className="svchero__statunit">{s.unit}</span></div>
                <div className="svchero__statlabel">{T(s.label, lang)}</div>
              </div>
            ))}
          </div>
        </div>
      </header>
      <section className="section" style={{ position: 'relative' }}>
        {window.FloatingShapes && <window.FloatingShapes set="a" />}
        <div className="wrap wrap--wide grid-3" style={{ position: 'relative', zIndex: 1 }}>
          {D2.services.map((s) => <ServiceCard key={s.n} s={s} go={go} lang={lang} />)}
        </div>
      </section>

      {/* Industries — social proof, before framework sections */}
      <section className="section section--tight" style={{ background: 'var(--bg-subtle)' }}>
        <div className="wrap">
          <p className="eyebrow" style={{ marginBottom: 14 }}>{T(P.indEyebrow, lang)}</p>
          <h2 className="display h-2" style={{ marginBottom: 14 }}>{T(P.indTitle, lang)}</h2>
          <p className="lead muted" style={{ maxWidth: 640, marginBottom: 'clamp(2rem,1.5rem + 2vw,3rem)' }}>{T(P.indLead, lang)}</p>
          <div className="logomarquee">
            <div className="logomarquee__track">
              {D2.clientWall.concat(D2.clientWall).map((c, i) => {
                const proj = D2.projects.find((p) => p.logo === c.logo);
                const link = proj && proj.caseLink;
                return (
                  <button className="logomarquee__item" key={c.name + i} onClick={() => (link ? go('case:' + link) : go('work'))} title={c.name}>
                    <img src={window.R('../../assets/case-logos/' + c.logo)} alt={c.name} />
                  </button>
                );
              })}
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 'clamp(2rem,1.5rem + 2vw,3.25rem)' }}>
            <a className="btn btn--secondary btn--lg" onClick={() => go('work')}>{T(D2.ui.viewAllWork, lang)} <Icon name="arrow-right" /></a>
          </div>
        </div>
      </section>

      {/* Three-zone services pyramid */}
      <SvcPyramid lang={lang} />

      {/* Solution wheel — the full engagement map */}
      {window.SolutionSection && <window.SolutionSection lang={lang} go={go} />}

      {/* How we work — staggered editorial with photos (4-step rhythm) */}
      <section className="section approachsec">
        <div className="wrap wrap--wide">
          <div style={{ textAlign: 'center', marginBottom: 'clamp(2.5rem,2rem + 3vw,4.5rem)' }}>
            <p className="eyebrow" style={{ justifyContent: 'center', marginBottom: 16 }}>{lang === 'zh' ? '我們的工作方式｜懂思考的策略，能交付的執行' : 'How we work'}</p>
            <h2 className="display h-2" style={{ maxWidth: 680, marginInline: 'auto' }}>{T(D2.pages.aboutPage.howTitle, lang)}</h2>
          </div>
          <div className="apflow">
            {D2.approach.map((a, i) => (
              <div className={'aprow aprow--' + (i % 2 === 0 ? 'l' : 'r') + ' reveal'} key={a.n}>
                <div className="aprow__media">
                  {(a.img || []).map((src, k) => (
                    <div className={'apimg apimg--' + k} key={k}>
                      <img src={window.R('../../assets/approach/' + src)} alt={T(a.title, lang)} />
                    </div>
                  ))}
                </div>
                <div className="aprow__text">
                  <span className="aprow__n">{a.n}</span>
                  <span className="aprow__tag">{T(a.title, lang)}</span>
                  <p className="aprow__desc">{T(a.desc, lang)}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

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

function WhyAccordion({ lang, go }) {
  const ref = useReveal();
  const P = D2.pages.aboutPage;
  const items = D2.why;
  const [open, setOpen] = useState(0);
  const [paused, setPaused] = useState(false);
  useEffect(() => {
    if (paused) return undefined;
    const t = setInterval(() => setOpen((i) => (i + 1) % items.length), 5000);
    return () => clearInterval(t);
  }, [paused, open, items.length]);
  return (
    <section className="section whyacc-sec" ref={ref}>
      <div className="wrap wrap--wide">
        <div className="rowhead">
          <div>
            <p className="eyebrow" style={{ marginBottom: 14 }}>{T(P.whyEyebrow, lang)}</p>
            <h2 className="display h-2" style={{ maxWidth: 560 }}>{T(P.whyTitle, lang)}</h2>
          </div>
        </div>
        <div className="whyacc" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
          {items.map((w, i) => (
            <div className={'whyrow' + (open === i ? ' open' : '')} key={w.icon} onClick={() => setOpen(i)}>
              <div className="whyrow__head">
                <span className="whyrow__num">{String(i + 1).padStart(2, '0')}</span>
                <span className="whyrow__icon"><Icon name={w.icon} /></span>
                <h3 className="whyrow__title">{T(w.title, lang)}</h3>
                <span className="whyrow__toggle"><Icon name="plus" /></span>
              </div>
              <div className="whyrow__body">
                <div className="whyrow__inner">
                  <p className="whyrow__desc">{T(w.desc, lang)}</p>
                  <span className="whyrow__track"><span className="whyrow__fill" key={open + '-' + paused} style={{ animationPlayState: paused ? 'paused' : 'running' }} /></span>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="whyacc__cta">
          <a className="btn btn--primary btn--lg" onClick={() => (go ? go('contact') : (window.location.hash = '#contact'))}>{T(D2.ui.talk, lang)} <Icon name="arrow-right" /></a>
        </div>
      </div>
    </section>
  );
}

function ServiceDetailScreen({ go, lang, slug }) {
  const ref = useReveal();
  const s = D2.services.find((x) => x.slug === slug) || D2.services[0];
  const d = D2.serviceDetails[s.slug];
  const related = (d.related || []).map((name) => D2.projects.find((p) => T(p.client, 'en') === name)).filter(Boolean);
  return (
    <div ref={ref}>
      <header className="section--dark svcmag__hero">
        <img className="ctaband-motif" src={window.R('../../assets/motif-band.png')} alt="" style={{ opacity: .1 }} />
        <div className="wrap wrap--narrow" style={{ position: 'relative', zIndex: 1 }}>
          <button className="backlink" onClick={() => go('services')}><Icon name="arrow-left" /> {T(D2.ui.backServices, lang)}</button>
          <p className="svcmag__kicker">{lang === 'zh' ? '服務' : 'Service'} · {s.n}</p>
          <h1 className="svcmag__title">{T(s.name, lang)}</h1>
          <p className="svcmag__deck">{T(d.tagline, lang)}</p>
          <div className="svcmag__meta">
            <span className="svcmag__metaicon"><Icon name={s.icon} /></span>
            <span>{T(d.deliver, lang).length} {lang === 'zh' ? '項交付' : 'deliverables'}</span>
            <span className="dot"></span>
            <span>{related.length} {lang === 'zh' ? '個相關案例' : 'related cases'}</span>
          </div>
          <a className="btn btn--accent btn--lg" style={{ marginTop: 32 }} href={window.XH_WA} target="_blank" rel="noopener noreferrer">{T(D2.ui.consult, lang)} <Icon name="arrow-right" /></a>
        </div>
      </header>

      <section className="section">
        <div className="wrap wrap--narrow">
          <p className="svcmag__lede reveal">{T(d.lede, lang)}</p>
          <div className="tl svcmag__tl">
            <section className="tl-node reveal">
              <div className="tl-node__rail"><span className="tl-node__num">01</span></div>
              <div className="tl-node__content">
                <p className="article__cat">{T(D2.ui.theProblem, lang)}</p>
                <h2 className="article__h">{T(d.problemTitle, lang)}</h2>
                <p className="article__p">{T(d.problemBody, lang)}</p>
              </div>
            </section>
            <section className="tl-node reveal">
              <div className="tl-node__rail"><span className="tl-node__num">02</span></div>
              <div className="tl-node__content">
                <p className="article__cat">{T(D2.ui.ourApproach, lang)}</p>
                <p className="article__p">{T(d.approachBody, lang)}</p>
              </div>
            </section>
            <section className="tl-node reveal">
              <div className="tl-node__rail"><span className="tl-node__num">03</span></div>
              <div className="tl-node__content">
                <p className="article__cat">{T(D2.ui.whatWeDeliver, lang)}</p>
                <ul className="article__list svcmag__deliver">
                  {T(d.deliver, lang).map((it, i) => <li key={i}><Icon name="check" />{it}</li>)}
                </ul>
              </div>
            </section>
            <section className="tl-node reveal">
              <div className="tl-node__rail"><span className="tl-node__num">04</span></div>
              <div className="tl-node__content">
                <p className="article__cat">{T(D2.ui.whoFor, lang)}</p>
                <ul className="article__list svcmag__whofor">
                  {T(d.whoFor, lang).map((it, i) => <li key={i}><Icon name="arrow-right" />{it}</li>)}
                </ul>
              </div>
            </section>
          </div>
        </div>
      </section>

      {d.ipGallery && (
        <section className="section svcip">
          <div className="wrap wrap--wide">
            <div className="svcip__head reveal">
              <p className="eyebrow">{T(d.ipGallery.eyebrow, lang)}</p>
              <h2 className="display h-2">{T(d.ipGallery.title, lang)}</h2>
              <p className="lead muted svcip__intro">{T(d.ipGallery.intro, lang)}</p>
            </div>
            <div className="svcip__grid">
              {d.ipGallery.items.map((it, i) => (
                <figure className="svcip__item reveal" key={i}>
                  <div className="svcip__panel" style={{ background: it.tint }}>
                    <img src={window.R(it.img)} alt={T(it.name, lang)} loading="lazy" />
                  </div>
                  <figcaption className="svcip__cap">
                    <p className="svcip__name">{T(it.name, lang)}</p>
                    <p className="svcip__text">{T(it.caption, lang)}</p>
                  </figcaption>
                </figure>
              ))}
            </div>
          </div>
        </section>
      )}

      {related.length > 0 && (
        <section className="section--tight" style={{ background: 'var(--bg-subtle)', paddingBottom: 'clamp(4rem,2rem + 6vw,7rem)' }}>
          <div className="wrap wrap--wide">
            <p className="eyebrow" style={{ marginBottom: 30 }}>{T(D2.ui.featuredWork, lang)}</p>
            <div className="grid-3">
              {related.map((p) => <ProjectCard key={p.logo} p={p} go={go} lang={lang} />)}
            </div>
            <div style={{ marginTop: 40 }}>
              <a className="btn btn--secondary btn--lg" onClick={() => go('work:' + s.slug)}>{T(D2.ui.seeAllWork, lang)} <Icon name="arrow-right" /></a>
            </div>
          </div>
        </section>
      )}

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

function WorkScreen({ go, lang, initialService }) {
  const ref = useReveal();
  const P = D2.pages.workPage;
  const [mode, setMode] = useState(initialService ? 'service' : 'sector');
  const [filter, setFilter] = useState('All');
  const [svcFilter, setSvcFilter] = useState(initialService || 'All');
  const sectorKeys = Array.from(new Set(D2.projects.map((p) => p.sector)));
  const svcTags = (p) => (D2.serviceTags && D2.serviceTags[p.caseLink]) || [];
  const shown = mode === 'sector'
    ? (filter === 'All' ? D2.projects : D2.projects.filter((p) => p.sector === filter))
    : (svcFilter === 'All' ? D2.projects : D2.projects.filter((p) => svcTags(p).includes(svcFilter)));
  return (
    <div ref={ref}>
      <header className="hero" style={{ paddingBottom: 0 }}>
        <Decor />
        <div className="wrap wrap--narrow" style={{ textAlign: 'center', margin: '0 auto' }}>
          <p className="eyebrow" style={{ marginBottom: 18, justifyContent: 'center' }}>{T(P.eyebrow, lang)}</p>
          <h1 className="display h-1">{T(P.title, lang)}</h1>
          <p className="lead" style={{ marginTop: 20 }}>{T(P.lead, lang)}</p>
        </div>
      </header>
      <section className="section">
        <div className="wrap wrap--wide">
          <div className="workfilter__toggle">
            <button className={'workfilter__seg' + (mode === 'sector' ? ' active' : '')} onClick={() => setMode('sector')}>{T(D2.ui.byIndustry, lang)}</button>
            <button className={'workfilter__seg' + (mode === 'service' ? ' active' : '')} onClick={() => setMode('service')}>{T(D2.ui.byService, lang)}</button>
          </div>
          <div className="chips" style={{ justifyContent: 'center', marginBottom: 44 }}>
            {mode === 'sector'
              ? ['All', ...sectorKeys].map((s) => (
                  <button key={s} className={'chip' + (filter === s ? ' active' : '')} onClick={() => setFilter(s)}>
                    {s === 'All' ? T(D2.allLabel, lang) : T(D2.sectors[s], lang)}
                  </button>))
              : ['All', ...D2.services.map((x) => x.slug)].map((sl) => {
                  const svc = D2.services.find((x) => x.slug === sl);
                  return (
                    <button key={sl} className={'chip' + (svcFilter === sl ? ' active' : '')} onClick={() => setSvcFilter(sl)}>
                      {sl === 'All' ? T(D2.allLabel, lang) : T(svc.name, lang)}
                    </button>);
                })}
          </div>
          <div className="grid-3">
            {shown.map((p) => <ProjectCard key={p.logo} p={p} go={go} lang={lang} />)}
          </div>
        </div>
      </section>
      <CTABand go={go} lang={lang} />
      <Footer go={go} lang={lang} />
    </div>
  );
}

function AboutScreen({ go, lang }) {
  const ref = useReveal();
  const P = D2.pages.aboutPage;
  return (
    <div ref={ref}>
      <header className="hero" style={{ paddingBottom: 0 }}>
        <Decor />
        <div className="wrap wrap--narrow" style={{ textAlign: 'center', margin: '0 auto' }}>
          <p className="eyebrow" style={{ marginBottom: 18, justifyContent: 'center' }}>{T(P.eyebrow, lang)}</p>
          <h1 className="display h-1">{T(P.titlePre, lang)}<span className="grad">{T(P.titleAccent, lang)}</span></h1>
          <p className="lead" style={{ marginTop: 20 }}>{T(P.lead, lang)}</p>
        </div>
      </header>

      {/* Our story — text + image */}
      <section className="section storysec" style={{ position: 'relative' }}>
        {window.FloatingShapes && <window.FloatingShapes set="a" />}
        <div className="wrap wrap--wide storysec__grid" style={{ position: 'relative', zIndex: 1 }}>
          <div className="storysec__text">
            <p className="eyebrow" style={{ marginBottom: 18 }}>{T(P.storyEyebrow, lang)}</p>
            <p className="storysec__p">{T(P.storyP1, lang)}</p>
            <p className="storysec__p">{T(P.storyP2, lang)}</p>
            <div className="storysec__badge"><span className="storysec__dot" />{T(P.storyTag, lang)}</div>
          </div>
          <div className="storysec__media reveal">
            <img src={window.R('../../assets/about-team.webp')} alt="XHealth team" />
          </div>
        </div>
      </section>

      {/* Corporate philosophy + founding spirit — before "How we work" */}
      <PhilosophyPyramid lang={lang} />
      <FoundingSpirit lang={lang} />

      {/* Why XHealth — interactive accordion (swapped in from Services) */}
      {/* Founder's message (merged in from the former Message page) */}
      <section className="section msgsec">
        <div className="wrap wrap--narrow" style={{ textAlign: 'center', margin: '0 auto' }}>
          <p className="eyebrow" style={{ marginBottom: 18, justifyContent: 'center' }}>{T(D2.message.eyebrow, lang)}</p>
          <h2 className="display h-2">{T(D2.message.title, lang)}</h2>
          <p className="lead" style={{ marginTop: 20 }}>{T(D2.message.lead, lang)}</p>
        </div>
        <div className="wrap wrap--wide msgsec__figwrap reveal">
          <figure className="msgsec__fig">
            <img src={window.R('../../assets/founder-message.webp')} alt={T(D2.message.title, lang)} loading="lazy" />
          </figure>
        </div>
        <div className="wrap" style={{ marginTop: 'clamp(2.5rem,2rem + 2vw,3.5rem)', position: 'relative' }}>
          {window.FloatingShapes && <window.FloatingShapes set="a" />}
          <div className="msg-body" style={{ position: 'relative', zIndex: 1 }}>
            {D2.message.body.map((p, i) => (
              <React.Fragment key={i}>
                <p className="msg-p reveal">{T(p, lang)}</p>
                {i === 2 && <blockquote className="msg-quote reveal">{T(D2.message.quote, lang)}</blockquote>}
              </React.Fragment>
            ))}
            <div className="msg-sign reveal">
              <span className="msg-sign__mark">XHealth</span>
              <span className="msg-sign__name">{T(D2.message.signName, lang)}</span>
            </div>
          </div>
        </div>
      </section>
      <CTABand go={go} lang={lang} />
      <Footer go={go} lang={lang} />
    </div>
  );
}

function ContactScreen({ go, lang }) {
  const P = D2.pages.contactPage;
  const sits = D2.situations[lang];
  const [situation, setSituation] = useState(0);
  const [sent, setSent] = useState(false);
  return (
    <div>
      <header className="hero" style={{ paddingBottom: 'clamp(2rem,2rem + 2vw,3rem)' }}>
        <Decor />
        <div className="wrap wrap--narrow" style={{ textAlign: 'center', margin: '0 auto' }}>
          <p className="eyebrow" style={{ marginBottom: 18, justifyContent: 'center' }}>{T(P.eyebrow, lang)}</p>
          <h1 className="display h-1">{T(P.title, lang)}</h1>
          <p className="lead" style={{ marginTop: 20 }}>{T(P.lead, lang)}</p>
        </div>
      </header>
      <section className="section" style={{ paddingTop: 'clamp(2rem,1rem + 3vw,4rem)', position: 'relative' }}>
        {window.FloatingShapes && <window.FloatingShapes set="b" />}
        <div className="wrap wrap--wide contact-grid" style={{ position: 'relative', zIndex: 1 }}>
          <div className="cinfo">
            <div className="cinfo__item">
              <div className="cinfo__icon"><Icon name="mail" /></div>
              <div><b>{T(P.emailLabel, lang)}</b><a href={`mailto:${D2.brand.email}`} style={{ color: 'inherit', textDecoration: 'none' }}>{D2.brand.email}</a></div>
            </div>
            <div className="cinfo__item">
              <div className="cinfo__icon"><Icon name="message-circle" /></div>
              <div><b>{T(P.whatsappLabel, lang)}</b><a href={window.XH_WA} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>{D2.brand.whatsapp}</a></div>
            </div>
            <div className="cinfo__item">
              <div className="cinfo__icon"><Icon name="map-pin" /></div>
              <div><b>{T(P.locLabel, lang)}</b><span>{T(P.locText, lang)}</span></div>
            </div>
            <div className="cinfo__item">
              <div className="cinfo__icon"><Icon name="clock" /></div>
              <div><b>{T(P.hoursLabel, lang)}</b><span>{lang === 'zh' ? D2.brand.hours_zh : D2.brand.hours_en}</span></div>
            </div>
          </div>

          <div className="card" style={{ padding: 'clamp(24px,2vw,38px)', boxShadow: 'var(--shadow-md)' }}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '40px 10px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
                <div className="cinfo__icon" style={{ width: 56, height: 56, background: 'var(--jade-50)', color: 'var(--jade-500)' }}><Icon name="check" style={{ width: 26, height: 26 }} /></div>
                <h3 className="display h-3">{T(P.sentTitle, lang)}</h3>
                <p className="muted" style={{ maxWidth: 360 }}>{T(P.sentBody, lang)}</p>
                <a className="btn btn--secondary" onClick={() => setSent(false)}>{T(P.sendAnother, lang)}</a>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div className="grid-2" style={{ gap: 18 }}>
                  <div className="field"><label>{T(P.fName, lang)}</label><input type="text" required /></div>
                  <div className="field"><label>{T(P.fCompany, lang)}</label><input type="text" /></div>
                  <div className="field"><label>{T(P.fEmail, lang)}</label><input type="email" required /></div>
                  <div className="field"><label>{T(P.fPhone, lang)}</label><input type="tel" /></div>
                </div>
                <div className="field">
                  <label>{T(P.situationQ, lang)}</label>
                  <div className="chips">
                    {sits.map((s, i) => (
                      <button type="button" key={i} className={'chip' + (situation === i ? ' active' : '')} onClick={() => setSituation(i)}>{s}</button>
                    ))}
                  </div>
                </div>
                <div className="field"><label>{T(P.fMessage, lang)}</label><textarea rows={4} placeholder={T(P.msgPlaceholder, lang)}></textarea></div>
                <div className="confid"><Icon name="lock" /><span>{T(P.confid, lang)}</span></div>
                <button type="submit" className="btn btn--accent btn--lg" style={{ alignSelf: 'flex-start' }}>{T(P.send, lang)} <Icon name="send" /></button>
              </form>
            )}
          </div>
        </div>
      </section>
      <Footer go={go} lang={lang} />
    </div>
  );
}

Object.assign(window, { TonePoster, ToneShowcase, PhilosophyPyramid, FoundingSpirit, InsightList, InsightCover, InsightsScreen, WhyAccordion, ArticleScreen, HomeScreen, ServicesScreen, ServiceDetailScreen, WorkScreen, AboutScreen, ContactScreen });