const { EyebrowLabel, DisplayHeadline, FeatureCard, Divider, Icon, Button, Reveal, Tag } = window.YUANJIEDesignSystem_590ef9;

const JOURNEY_COPY = {
  en: {
    eyebrow: 'FROM LAYOUT TO LIVE', title: 'A rollout built around production.',
    body: 'Start with the traffic your floor already has. Each stage produces a practical decision point before the next one begins.',
    steps: [['01', 'Map the flow', 'Review routes, fleet rules and the hand-offs between MES, stocker and equipment.'], ['02', 'Simulate the change', 'Replay representative transport demand on your layout to surface conflicts before cutover.'], ['03', 'Commission with confidence', 'Bring areas online in agreed phases, with a rollback path and an audit trail from day one.']],
    scenarios: 'COMMON STARTING POINTS', scenarioTitle: 'Meet the problem where it is.',
    useCases: [['Peak-hour congestion', 'Prioritise urgent lots while actively spreading traffic away from crowded crossings.', 'FLOW CONTROL'], ['Mixed vehicle fleets', 'Bring OHT, AGV and stocker behaviour into one dispatch policy without changing upper systems.', 'ONE CONTROL LAYER'], ['Traceability gaps', 'Give operations and engineering a shared transport record for every carrier and exception.', 'SHARED CONTEXT']],
    faqTitle: 'Questions teams ask before a site survey.',
    faqs: [['What should we prepare for a first session?', 'A current layout, a typical day of transport orders and a high-level equipment list are enough to start the conversation.'], ['Can MCS be introduced in phases?', 'Yes. The rollout can be scoped by building, line or equipment group so teams can validate each phase before expanding.'], ['Does the system require replacing existing controllers?', 'No. MCS is designed to sit between MES and floor equipment, preserving the controllers and protocols already in use.']], cta: 'Book a planning session'
  },
  zhHant: {
    eyebrow: 'FROM LAYOUT TO LIVE', title: '以生產現場為核心的導入節奏。',
    body: '從廠內既有的搬送流量開始。每個階段都先產出能協助決策的成果，再進入下一步。',
    steps: [['01', '盤點搬送流程', '確認路徑、車隊規則，以及 MES、Stocker 與機台之間的交接方式。'], ['02', '模擬導入影響', '以實際佈局重播代表性的搬送需求，在切換前找出衝突點。'], ['03', '分階段上線', '依共識逐區上線，保有回復路徑，並從第一天就建立完整履歷。']],
    scenarios: 'COMMON STARTING POINTS', scenarioTitle: '從最需要改善的地方開始。',
    useCases: [['尖峰時段壅塞', '讓急件優先，同時主動把車流從壅塞的交會點分散出去。', 'FLOW CONTROL'], ['混合車隊管理', '把 OHT、AGV 與 Stocker 的行為收斂在同一套派車策略，不必修改上層系統。', 'ONE CONTROL LAYER'], ['搬送追溯斷點', '讓現場與工程人員共同查看每個卡匣與異常事件的搬送履歷。', 'SHARED CONTEXT']],
    faqTitle: '現場評估前，團隊最常詢問的問題。',
    faqs: [['第一次討論需要準備什麼？', '準備現有佈局、一天典型的搬送指令量與設備清單，就足以開始評估。'], ['MCS 可以分階段導入嗎？', '可以。可依廠房、產線或設備群組規劃上線範圍，每階段驗證後再擴大。'], ['需要更換既有控制器嗎？', '不需要。MCS 位於 MES 與現場設備之間，可保留既有控制器與通訊協定。']], cta: '預約導入規劃諮詢'
  },
  zhHans: {
    eyebrow: 'FROM LAYOUT TO LIVE', title: '以生产现场为核心的导入节奏。',
    body: '从厂内既有的搬运流量开始。每个阶段都先产出能协助决策的成果，再进入下一步。',
    steps: [['01', '盘点搬运流程', '确认路径、车队规则，以及 MES、Stocker 与机台之间的交接方式。'], ['02', '模拟导入影响', '以实际布局重播代表性的搬运需求，在切换前找出冲突点。'], ['03', '分阶段上线', '依共识逐区上线，保有回退路径，并从第一天就建立完整履历。']],
    scenarios: 'COMMON STARTING POINTS', scenarioTitle: '从最需要改善的地方开始。',
    useCases: [['尖峰时段拥塞', '让急件优先，同时主动把车流从拥塞的交会点分散出去。', 'FLOW CONTROL'], ['混合车队管理', '把 OHT、AGV 与 Stocker 的行为收敛在同一套派车策略，不必修改上层系统。', 'ONE CONTROL LAYER'], ['搬运追溯断点', '让现场与工程人员共同查看每个卡匣与异常事件的搬运履历。', 'SHARED CONTEXT']],
    faqTitle: '现场评估前，团队最常询问的问题。',
    faqs: [['第一次讨论需要准备什么？', '准备现有布局、一天典型的搬运指令量与设备清单，就足以开始评估。'], ['MCS 可以分阶段导入吗？', '可以。可依厂房、产线或设备群组规划上线范围，每阶段验证后再扩大。'], ['需要更换既有控制器吗？', '不需要。MCS 位于 MES 与现场设备之间，可保留既有控制器与通信协议。']], cta: '预约导入规划咨询'
  }
};

function Journey({ onDemo }) {
  const lang = React.useContext(LangCtx);
  const c = JOURNEY_COPY[lang] || JOURNEY_COPY.en;
  return (
    <section id="support" style={{ maxWidth: 'var(--page-max-width)', margin: '0 auto', padding: '0 var(--page-gutter)' }}>
      <Divider />
      <div style={{ padding: '80px 0', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-40)' }}>
        <Reveal style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-16)', maxWidth: '43em' }}>
          <EyebrowLabel>{c.eyebrow}</EyebrowLabel>
          <DisplayHeadline size="sm">{c.title}</DisplayHeadline>
          <p style={{ margin: 0, fontSize: '16px', lineHeight: 1.8, color: 'var(--color-graphite)' }}>{c.body}</p>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--spacing-24)' }}>
          {c.steps.map(([number, title, body], i) => <Reveal key={number} delay={i * 80} style={{ display: 'flex' }}><FeatureCard icon={<Tag accent={i === 0 ? 'var(--color-ember-orange)' : i === 1 ? 'var(--color-iris-blue)' : 'var(--color-signal-green)'}>{number}</Tag>} title={title} style={{ flex: 1 }}>{body}</FeatureCard></Reveal>)}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-20)', paddingTop: 'var(--spacing-24)' }}>
          <EyebrowLabel>{c.scenarios}</EyebrowLabel>
          <DisplayHeadline size="sm">{c.scenarioTitle}</DisplayHeadline>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--spacing-24)' }}>
            {c.useCases.map(([title, body, meta], i) => <Reveal key={meta} delay={i * 80} style={{ display: 'flex' }}><FeatureCard icon={<Icon name={['activity', 'layers', 'chart'][i]} size={22} color={['var(--color-coral)', 'var(--color-iris-blue)', 'var(--color-ember-orange)'][i]} />} title={title} meta={meta} style={{ flex: 1 }}>{body}</FeatureCard></Reveal>)}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 'var(--spacing-40)', alignItems: 'start', paddingTop: 'var(--spacing-24)' }}>
          <Reveal><DisplayHeadline size="xs">{c.faqTitle}</DisplayHeadline></Reveal>
          <Reveal delay={80} style={{ display: 'flex', flexDirection: 'column', borderTop: '1px solid var(--color-ash-gray)' }}>
            {c.faqs.map(([question, answer]) => <details key={question} style={{ borderBottom: '1px solid var(--color-ash-gray)', padding: '18px 0' }}><summary style={{ cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: '17px', fontWeight: 500, color: 'var(--color-ink-black)' }}>{question}</summary><p style={{ margin: '12px 24px 0 0', fontSize: '15px', lineHeight: 1.75, color: 'var(--color-graphite)' }}>{answer}</p></details>)}
          </Reveal>
        </div>
        <Reveal delay={120}><Button variant="ghost" size="lg" onClick={onDemo} trailing={<Icon name="arrowRight" size={15} />}>{c.cta}</Button></Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Journey });