// Landing Page — localized through the shared i18n store.

function Landing({ go }) {
  const { lang } = window.useI18n ? window.useI18n() : { lang: "zh" };
  const t = COPY(lang);

  return (
    <div className="app-root" lang={lang === "zh" ? "zh-CN" : "en"}>
      {/* Top nav */}
      <header className="topnav">
        <Brand />
        <nav className="nav-links">
          <a onClick={() => go("landing")}>{t.navProduct}</a>
          <a onClick={() => go("special")}>{t.navSpecial}</a>
          <a>{t.navPricing}</a>
          <a>{t.navSample}</a>
          <a>{t.navAbout}</a>
        </nav>
        <div className="nav-cta">
          <LanguageToggle />
          <button className="btn btn-ghost btn-sm" onClick={() => go("login")}>{t.navLogin}</button>
          <button className="btn btn-primary btn-sm" onClick={() => go("register")}>{t.navStart}</button>
          <button className="mobile-menu-btn" onClick={() => go("login")} aria-label="menu"><Icon name="menu" size={18} /></button>
        </div>
      </header>

      {/* Hero */}
      <section className="hero">
        <div className="hero-inner">
          <div>
            <div className="hero-eyebrow">
              <span className="dot">BETA</span>
              <span>{t.heroBadge}</span>
            </div>
            <h1 dangerouslySetInnerHTML={{ __html: t.heroH1 }} />
            <div className="hero-en">{t.heroH1Alt}</div>
            <p className="hero-sub">{t.heroSub}</p>
            <div className="hero-ctas">
              <button className="btn btn-primary btn-lg" onClick={() => go("register")}>
                <Icon name="spark" size={16} /> {t.heroCta1}
              </button>
              <button className="btn btn-ghost btn-lg" onClick={() => go("report")}>
                <Icon name="file-text" size={16} /> {t.heroCta2}
              </button>
            </div>
            <div className="hero-trust">
              <span><Icon name="check" size={14} /> {t.trust1}</span>
              <span><Icon name="check" size={14} /> {t.trust2}</span>
              <span><Icon name="check" size={14} /> {t.trust3}</span>
            </div>
          </div>
          <HeroMockup t={t} />
        </div>
      </section>

      {/* Three step */}
      <section className="section">
        <div className="section-inner">
          <div className="section-eyebrow">{t.step.eyebrow}</div>
          <h2 dangerouslySetInnerHTML={{ __html: t.step.title }} />
          <div className="three-step">
            {t.step.items.map((s, i) => (
              <div key={i} className="step-card">
                <div className="step-num">{s.num}</div>
                <h3>{s.h}</h3>
                <p>{s.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="section section-alt">
        <div className="section-inner">
          <div className="section-eyebrow">{t.feat.eyebrow}</div>
          <h2 dangerouslySetInnerHTML={{ __html: t.feat.title }} />
          <p className="section-sub">{t.feat.sub}</p>
          <div className="feature-grid">
            {t.feat.items.map((f, i) => (
              <div key={i} className="feature-card">
                <div className="ico"><Icon name={f.icon} size={20} /></div>
                <h3>{f.title}</h3>
                <p>{f.desc}</p>
                <div className="meta"><Icon name="check" size={12} /> {f.meta}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* User segments */}
      <section className="section">
        <div className="section-inner">
          <div className="section-eyebrow">{t.seg.eyebrow}</div>
          <h2 dangerouslySetInnerHTML={{ __html: t.seg.title }} />
          <div className="userseg-grid">
            {t.seg.items.map((s, i) => (
              <div key={i} className="userseg">
                <div className="tag">{s.tag}</div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                <ul>{s.points.map((p, j) => <li key={j}>{p}</li>)}</ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Special reports preview */}
      <section className="section section-alt">
        <div className="section-inner">
          <div className="space-between" style={{ alignItems: "flex-end", flexWrap: "wrap", gap: 16 }}>
            <div>
              <div className="section-eyebrow">{t.special.eyebrow}</div>
              <h2 dangerouslySetInnerHTML={{ __html: t.special.title }} />
            </div>
            <button className="btn btn-ghost" onClick={() => go("special")}>{t.special.viewAll} <Icon name="arrow-right" size={14} /></button>
          </div>
          <div className="special-grid" style={{ marginTop: 36 }}>
            {t.special.items.map((s, i) => (
              <div key={i} className={"special-card tone-" + s.tone}>
                <div className="ico"><Icon name={s.icon} size={18} /></div>
                <h3>{s.title}</h3>
                <p className="desc">{s.desc}</p>
                <div className="meta">
                  <span>{s.time}</span>
                  <span>· {t.special.risk} {s.risk}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Compliance note */}
      <section className="section section-dark">
        <div className="section-inner">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }} className="compliance-grid">
            <div>
              <div className="section-eyebrow" style={{ color: "var(--teal)" }}>{t.comp.eyebrow}</div>
              <h2 dangerouslySetInnerHTML={{ __html: t.comp.title }} />
              <p style={{ color: "rgba(255,255,255,0.7)", marginTop: 12, lineHeight: 1.65, fontSize: 15 }}>{t.comp.desc}</p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {t.comp.items.map((c, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 18px", background: "rgba(255,255,255,0.04)", borderRadius: 12, border: "1px solid rgba(255,255,255,0.08)" }}>
                  <div style={{ width: 36, height: 36, borderRadius: 8, background: "rgba(22,166,166,0.18)", color: "var(--teal)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                    <Icon name={c.icon} size={16} />
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14, color: "white" }}>{c.title}</div>
                    <div style={{ fontSize: 12.5, color: "rgba(255,255,255,0.6)", marginTop: 2 }}>{c.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="section-inner">
          <div className="section-eyebrow">{t.faq.eyebrow}</div>
          <h2>{t.faq.title}</h2>
          <div className="faq">
            {t.faq.items.map((f, i) => (
              <div key={i} className="faq-item">
                <h4>{f.q}</h4>
                <p>{f.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section section-alt" style={{ paddingTop: 50, paddingBottom: 70 }}>
        <div className="section-inner" style={{ textAlign: "center" }}>
          <h2 style={{ margin: "0 auto" }} dangerouslySetInnerHTML={{ __html: t.cta.title }} />
          <p className="section-sub" style={{ margin: "12px auto 0" }}>{t.cta.sub}</p>
          <div style={{ marginTop: 28, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-primary btn-lg" onClick={() => go("register")}>{t.cta.btn1} <Icon name="arrow-right" size={14} /></button>
            <button className="btn btn-ghost btn-lg" onClick={() => go("report")}>{t.cta.btn2}</button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="footer">
        <div className="footer-inner">
          <div>
            <Brand dark />
            <p style={{ fontSize: 13, marginTop: 14, lineHeight: 1.6, maxWidth: 340 }}>{t.foot.tag}</p>
            <div style={{ marginTop: 18, display: "flex", gap: 8 }}>
              {t.foot.langs.map((label) => (
                <span key={label} className="badge" style={{ background: "rgba(255,255,255,0.06)", color: "rgba(255,255,255,0.7)", border: "1px solid rgba(255,255,255,0.1)" }}>{label}</span>
              ))}
            </div>
          </div>
          <div>
            <h5>{t.foot.colProduct}</h5>
            <ul>{t.foot.product.map((x, i) => <li key={i}><a>{x}</a></li>)}</ul>
          </div>
          <div>
            <h5>{t.foot.colRes}</h5>
            <ul>{t.foot.res.map((x, i) => <li key={i}><a>{x}</a></li>)}</ul>
          </div>
          <div>
            <h5>{t.foot.colCo}</h5>
            <ul>{t.foot.co.map((x, i) => <li key={i}><a>{x}</a></li>)}</ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>{t.foot.copyright}</div>
          <div>v0.1 · MVP · Beta</div>
        </div>
      </footer>
    </div>
  );
}

function HeroMockup({ t }) {
  return (
    <div className="hero-mockup">
      {/* Main report window */}
      <div className="mockup-window" style={{ inset: "12px 30px 30px 0", left: 0, right: 0 }}>
        <div className="mockup-bar">
          <span className="dot r" /><span className="dot y" /><span className="dot g" />
          <span style={{ marginLeft: 12 }}>{t.mock.windowTitle}</span>
          <span style={{ marginLeft: "auto", display: "inline-flex", gap: 6, alignItems: "center" }}>
            <span className="badge badge-green" style={{ padding: "1px 7px", fontSize: 10 }}><span className="badge-dot"></span>{t.mock.ready}</span>
          </span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "150px 1fr 130px", height: 444 }}>
          {/* TOC */}
          <div style={{ borderRight: "1px solid var(--line-2)", padding: "14px 12px", fontSize: 11.5 }}>
            <div style={{ fontSize: 9.5, fontWeight: 600, color: "var(--muted-2)", textTransform: "uppercase", letterSpacing: 0.08, padding: "0 4px 8px" }}>{t.mock.tocTitle}</div>
            {t.mock.toc.map((t2, i) => (
              <div key={i} style={{ padding: "5px 6px", borderRadius: 5, color: i === 4 ? "var(--ocean)" : "var(--ink-2)", background: i === 4 ? "var(--sky)" : "transparent", fontWeight: i === 4 ? 600 : 400, display: "flex", alignItems: "center" }}>
                <span style={{ width: 14, color: "var(--muted-2)", fontVariantNumeric: "tabular-nums" }}>{String(i+1).padStart(2,"0")}</span> {t2}
              </div>
            ))}
          </div>
          {/* Content */}
          <div style={{ padding: "18px 22px", overflow: "hidden" }}>
            <div style={{ fontSize: 10, color: "var(--teal-700)", fontWeight: 600, letterSpacing: 0.05, textTransform: "uppercase" }}>{t.mock.sectionLabel}</div>
            <div style={{ fontSize: 17, fontWeight: 600, marginTop: 4, color: "var(--ocean-900)" }}>{t.mock.contentH}</div>
            <div style={{ marginTop: 10, fontSize: 11.5, color: "var(--ink-2)", lineHeight: 1.55 }}>
              {t.mock.contentP}<sup style={{ color: "var(--teal)" }}>1</sup>
            </div>
            <div style={{ marginTop: 12, border: "1px solid var(--line-2)", borderRadius: 6, overflow: "hidden", fontSize: 11 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 0.8fr", padding: "7px 10px", background: "#FBFBFC", fontWeight: 600, color: "var(--muted)", fontSize: 10, textTransform: "uppercase" }}>
                <span>{t.mock.colBrand}</span><span>{t.mock.colPrice}</span><span>{t.mock.colChannel}</span><span>{t.mock.colRating}</span>
              </div>
              {[["IKEA","$30–60", t.mock.chOff,"4.5"],["Canadian Tire","$25–55", t.mock.chRetail,"4.2"],["Amazon Basics","$15–40", t.mock.chEcom,"4.0"],["KKLT (CN)","$18–35","Amazon FBA","3.8"]].map(([a,b,c,d], i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 0.8fr", padding: "7px 10px", borderTop: "1px solid var(--line-2)", color: "var(--ink-2)" }}>
                  <span style={{ fontWeight: 500 }}>{a}</span><span>{b}</span><span>{c}</span><span>{d}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 14, padding: "8px 10px", background: "var(--sand)", borderLeft: "2px solid var(--orange)", borderRadius: "0 5px 5px 0", fontSize: 10.5, color: "var(--ink-2)", lineHeight: 1.55 }}>
              <b style={{ fontSize: 9, textTransform: "uppercase", color: "#B47308", letterSpacing: 0.05 }}>{t.mock.recoLbl}</b><br />
              {t.mock.recoText}
            </div>
          </div>
          {/* AI panel */}
          <div style={{ borderLeft: "1px solid var(--line-2)", padding: "14px 12px", fontSize: 11, background: "#FAFBFC" }}>
            <div style={{ fontSize: 9.5, fontWeight: 600, color: "var(--teal-700)", textTransform: "uppercase", letterSpacing: 0.05, display: "flex", alignItems: "center", gap: 5 }}>
              <span style={{ width: 5, height: 5, borderRadius: 99, background: "var(--teal)" }} /> {t.mock.aiTitle}
            </div>
            <div style={{ marginTop: 10, padding: "8px 10px", background: "white", borderRadius: 6, fontSize: 10.5, lineHeight: 1.5, color: "var(--ink-2)" }}>
              {t.mock.aiMsg1}
            </div>
            <div style={{ marginTop: 8, padding: "8px 10px", background: "white", borderRadius: 6, fontSize: 10.5, lineHeight: 1.5, color: "var(--ink-2)" }}>
              {t.mock.aiMsg2}
            </div>
            <div style={{ marginTop: 12, fontSize: 9.5, fontWeight: 600, color: "var(--muted)", textTransform: "uppercase", letterSpacing: 0.05 }}>{t.mock.riskLbl}</div>
            <div style={{ marginTop: 6, display: "flex", flexDirection: "column", gap: 4 }}>
              {t.mock.risks.map(([k,v,tone], i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", fontSize: 10 }}>
                  <span>{k}</span>
                  <span style={{ color: tone === "high" ? "var(--red)" : tone === "med" ? "var(--orange)" : "var(--green)", fontWeight: 600 }}>● {v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      {/* Floating mini card */}
      <div className="mockup-window" style={{ right: "-10px", bottom: "-10px", width: 200, padding: 14, borderRadius: 12 }}>
        <div style={{ fontSize: 10, color: "var(--muted)", fontWeight: 600, letterSpacing: 0.05, textTransform: "uppercase" }}>{t.mock.miniLbl}</div>
        <div style={{ fontSize: 20, fontWeight: 600, marginTop: 4, color: "var(--ocean-900)" }}>CAD 1.2M</div>
        <div style={{ display: "flex", alignItems: "flex-end", gap: 5, height: 38, marginTop: 10 }}>
          {[18,32,45,55,68,80,92,100].map((h, i) => (
            <div key={i} style={{ flex: 1, height: `${h}%`, background: i === 7 ? "var(--teal)" : "var(--sky)", borderRadius: 2 }} />
          ))}
        </div>
      </div>
    </div>
  );
}

const COPY = (l) => l === "zh" ? COPY_ZH : COPY_EN;

const COPY_ZH = {
  navProduct: "产品", navSpecial: "专项报告", navPricing: "价格", navSample: "样例报告", navAbout: "关于",
  navLogin: "登录", navStart: "免费开始",

  heroBadge: "已支持 加拿大 · 美国 · 英国 · 阿联酋 · 新加坡",
  heroH1: "让企业出海前，<br/>先<em>看清市场</em>。",
  heroH1Alt: "AI 出海市场调研与决策平台",
  heroSub: "上传产品资料、选择目标市场和渠道计划，AI 自动生成市场调研、竞品分析、价格测算、合规风险，以及 1 年 / 3 年 / 5 年出海路线图。",
  heroCta1: "开始生成出海报告", heroCta2: "查看样例报告",
  trust1: "无需信用卡", trust2: "中英双语输出", trust3: "文件加密存储",

  step: {
    eyebrow: "三步生成调研报告",
    title: "从产品资料到 <em>可执行的进入计划</em>，无需 20 万咨询预算。",
    items: [
      { num: "01", h: "上传产品资料", p: "支持 Word / PDF / Excel / 图片，AI 自动识别 SKU、价格、规格、认证状态。" },
      { num: "02", h: "选择目标市场", p: "选择国家、城市、客群和渠道。AI 在缺失信息时自动追问，避免报告空泛。" },
      { num: "03", h: "生成完整报告", p: "市场分析、竞品、价格、物流、合规、品牌、路线图、行动清单，一次出齐。" },
    ],
  },

  feat: {
    eyebrow: "能力矩阵",
    title: "不只是 AI 聊天 — 是<em>出海项目工作台</em>",
    sub: "围绕真实企业出海流程设计，覆盖市场判断、成本测算、合规边界与落地执行。",
    items: [
      { icon: "package", title: "产品资料解析", desc: "上传 Word / PDF / Excel / 图片，AI 提取 SKU、价格、规格、卖点和缺失字段。", meta: "支持 OCR + 表格结构化" },
      { icon: "map", title: "目标市场分析", desc: "北美 · 欧洲 · 中东 · 东南亚的需求、消费习惯与进入难度。", meta: "MVP 聚焦加拿大" },
      { icon: "barchart", title: "竞品价格矩阵", desc: "搜索本地品牌、平台商品，输出价格区间、卖点对比和差异化建议。", meta: "Amazon · 本地零售 · DTC" },
      { icon: "scale", title: "成本与利润测算", desc: "海运、关税、仓储、平台费、销售税之后，AI 给出毛利率结构。", meta: "Stripe / Shopify 友好" },
      { icon: "shield", title: "合规风险地图", desc: "认证、标签、商标、税务、雇佣等高风险事项自动标注与提醒。", meta: "必备专家确认事项" },
      { icon: "rocket", title: "1 / 3 / 5 年路线图", desc: "结合资源现状，给出阶段性目标、动作清单和投入顺序。", meta: "可导出为行动计划" },
    ],
  },

  seg: {
    eyebrow: "谁在使用",
    title: "面向真实出海决策者，<em>不是技术人员</em>。",
    items: [
      { tag: "制造企业", title: "工厂老板", desc: "有产品和供应链，但缺少海外渠道与法规知识。", points: ["产品是否出口？", "价格 · 关税 · 利润", "进入渠道与认证清单"] },
      { tag: "跨境卖家", title: "跨境卖家", desc: "已在 Amazon / TikTok Shop 销售，希望拓展线下。", points: ["本地批发与零售", "海外仓与物流", "竞品广告投放策略"] },
      { tag: "品牌方", title: "品牌方", desc: "已有品牌线，希望做本地化与分销。", points: ["商标与包装本地化", "客群定位与渠道", "1/3/5 年路线"] },
      { tag: "服务机构", title: "出海服务机构", desc: "贸易、物流、律师、会计师等服务商。", points: ["客户初步诊断报告", "标准化咨询流程", "AI 报告转化为线索"] },
    ],
  },

  special: {
    eyebrow: "专项深度报告",
    title: "主报告之上，再生成<em>专项深度分析</em>。",
    viewAll: "查看全部专项报告",
    risk: "风险",
    items: [
      { tone: "teal", icon: "trend", title: "市场营销专项报告", desc: "目标客群细分、广告组合、KOL/红人渠道与预算分配。", time: "约 6 分钟", risk: "中" },
      { tone: "blue", icon: "truck", title: "物流报关专项报告", desc: "海运/空运、清关、海外仓比选、SKU 分仓策略。", time: "约 4 分钟", risk: "低" },
      { tone: "red", icon: "gavel", title: "法律风险专项报告", desc: "产品责任、合同模板要点、争议解决条款梳理。", time: "约 7 分钟", risk: "高" },
    ],
  },

  comp: {
    eyebrow: "合规边界",
    title: "AI 辅助调研，<em>不替代</em>专业人士。",
    desc: "好出海生成的报告用于市场调研与商业决策参考，不构成法律、税务、移民、投资、报关或认证方面的专业意见。所有高风险章节都会标注「需要专家确认事项」，并提供专家服务转介入口。",
    items: [
      { icon: "shield", title: "高风险章节自动免责", sub: "法律 · 税务 · 移民 · 认证" },
      { icon: "users", title: "专家确认事项标注", sub: "可一键转介持牌专业人士" },
      { icon: "lock", title: "文件加密存储", sub: "用户可随时删除资料，不用于训练" },
      { icon: "info", title: "数据来源可追溯", sub: "重要结论附引用与置信度" },
    ],
  },

  faq: {
    eyebrow: "常见问题",
    title: "用户在动手之前问的几个问题",
    items: [
      { q: "和直接使用 ChatGPT 有什么区别？", a: "好出海围绕「企业出海」流程设计了产品解析、市场调研、竞品分析、成本测算等多个专用 Agent，并基于您上传的真实资料生成报告，输出结构接近咨询报告而非聊天回复。" },
      { q: "报告内容会过期吗？", a: "市场、关税、法规会变化。AI 在重要结论附置信度和数据来源，并对法规、税率、认证类内容做更新检查；高风险条款明确标注「需要专家确认」。" },
      { q: "我的报价单和成本表会被用于训练吗？", a: "不会。用户上传的私有资料仅用于本人项目报告生成，不会用于模型训练。用户可随时删除资料和项目档案。" },
      { q: "MVP 阶段支持哪些市场？", a: "首先聚焦中国企业进入加拿大 / 北美市场，覆盖普通消费品、家居、轻工、餐饮用品和普通 B2B 工业用品。后续将逐步开放欧洲、中东、东南亚。" },
      { q: "可以做多市场对比吗？", a: "可以。在「创建项目」中可勾选多市场对比，系统会并列输出每个市场的机会、进入难度、合规复杂度和推荐渠道。" },
      { q: "报告可以导出为 PDF 吗？", a: "支持 Markdown / PDF / Word 三种格式。免费版导出 PDF 带水印，付费版可去除水印并支持「行动清单」与「执行摘要」单独导出。" },
    ],
  },

  cta: {
    title: "把「我想出海」转化为<em>可执行的下一步</em>。",
    sub: "免费创建第一个项目，5 分钟内生成报告大纲。",
    btn1: "免费开始", btn2: "查看样例报告",
  },

  foot: {
    tag: "AI 出海市场调研顾问 + 海外市场进入报告生成器 + 出海项目落地规划系统。",
    colProduct: "产品", colRes: "资源", colCo: "公司",
    product: ["功能", "专项报告", "样例报告", "价格", "更新日志"],
    res: ["出海指南", "市场数据", "API 文档"],
    co: ["关于我们", "联系", "服务条款", "隐私政策"],
    langs: ["中文", "英文", "法文"],
    copyright: "© 2026 好出海 Good Go Global。保留所有权利。",
  },

  mock: {
    windowTitle: "加拿大市场进入报告 · v2",
    ready: "已就绪",
    sectionLabel: "05 · 竞品分析",
    aiTitle: "AI 助手",
    tocTitle: "目录",
    toc: ["执行摘要","产品分析","目标市场","客群分析","竞品分析","价格区间","渠道策略","物流报关","合规风险","品牌商标","本地运营","三年路线","行动清单"],
    contentH: "本地主要竞品 (家居用品)",
    contentP: "在多伦多大众市场中，主要竞争对手包括 IKEA、Canadian Tire、Home Depot 自有品牌以及亚马逊上的中国卖家，价格区间集中在 CAD 25–80 之间",
    colBrand: "品牌", colPrice: "价格区间", colChannel: "主渠道", colRating: "评分",
    chOff: "线下/官网", chRetail: "连锁零售", chEcom: "电商",
    recoLbl: "建议",
    recoText: "进入价格区间 $22–45 较有竞争力，并通过更密集的本地化包装语言区分中国卖家形象。",
    aiMsg1: <>发现 <b>3</b> 处需要专家确认，是否生成「商标品牌」专项报告？</>,
    aiMsg2: <>基于您上传的报价表，AI 已估算出毛利 <b style={{ color: "var(--teal)" }}>34%</b>。</>,
    riskLbl: "风险等级",
    risks: [["商标注册", "High", "high"],["产品认证", "Medium", "med"],["进口关税", "Low", "low"]],
    miniLbl: "3年路线图 · 营收",
  },
};

const COPY_EN = {
  navProduct: "Product", navSpecial: "Special Reports", navPricing: "Pricing", navSample: "Sample Report", navAbout: "About",
  navLogin: "Sign in", navStart: "Get started",

  heroBadge: "Available for Canada · US · UK · UAE · Singapore",
  heroH1: "Know the market <br/><em>before you go global</em>.",
  heroH1Alt: "AI market entry research and decision platform.",
  heroSub: "Upload your product files, pick a target market and channel plan, and let AI generate market research, competitor analysis, pricing models, compliance risks and a 1 / 3 / 5-year expansion roadmap.",
  heroCta1: "Start Market Report", heroCta2: "View Sample Report",
  trust1: "No credit card", trust2: "Bilingual output", trust3: "Encrypted file storage",

  step: {
    eyebrow: "Three steps to your report",
    title: "From product files to an <em>executable entry plan</em> — without a USD 30K consultancy budget.",
    items: [
      { num: "01", h: "Upload product files", p: "Word / PDF / Excel / images. AI extracts SKUs, prices, specs, and certification status." },
      { num: "02", h: "Pick target market", p: "Country, city, customer segment, channel. AI follows up automatically when info is missing, avoiding generic output." },
      { num: "03", h: "Generate full report", p: "Market analysis, competitors, pricing, logistics, compliance, brand, roadmap and action checklist — all in one." },
    ],
  },

  feat: {
    eyebrow: "Capabilities",
    title: "Not just an AI chatbot — an <em>expansion workspace</em>.",
    sub: "Designed around real go-to-market workflows: market judgement, cost modelling, compliance boundaries and on-the-ground execution.",
    items: [
      { icon: "package", title: "Product file parsing", desc: "Upload Word / PDF / Excel / images. AI extracts SKUs, prices, specs, USPs and missing fields.", meta: "OCR + structured tables" },
      { icon: "map", title: "Target market analysis", desc: "Demand, consumer habits and entry difficulty for North America, Europe, MENA, SEA.", meta: "MVP focus: Canada" },
      { icon: "barchart", title: "Competitor & pricing matrix", desc: "Search local brands and marketplace listings. Output price ranges, USP comparisons and differentiation cues.", meta: "Amazon · retail · DTC" },
      { icon: "scale", title: "Cost & margin model", desc: "After ocean freight, duties, warehousing, marketplace fees and sales tax — AI gives you a gross margin structure.", meta: "Stripe / Shopify friendly" },
      { icon: "shield", title: "Compliance risk map", desc: "Certifications, labelling, trademark, tax and employment risks are automatically flagged.", meta: "Expert confirmation queued" },
      { icon: "rocket", title: "1 / 3 / 5-year roadmap", desc: "Reflects your current resources. Phased goals, action items and investment sequencing.", meta: "Exports to action plan" },
    ],
  },

  seg: {
    eyebrow: "Who's using it",
    title: "Built for real decision-makers, <em>not engineers</em>.",
    items: [
      { tag: "Manufacturer", title: "Factory Owner", desc: "Owns product and supply chain but lacks overseas channels and regulatory know-how.", points: ["Is the product exportable?", "Price · duty · profit", "Channels & certification checklist"] },
      { tag: "Cross-border Seller", title: "Cross-border Seller", desc: "Already selling on Amazon / TikTok Shop, wants to expand offline.", points: ["Local wholesale & retail", "Overseas warehouse & logistics", "Competitor ad strategy"] },
      { tag: "Brand Owner", title: "Brand Owner", desc: "Has a brand line, wants localisation and distribution.", points: ["Trademark & packaging", "Customer & channel fit", "1/3/5 yr roadmap"] },
      { tag: "Service Agency", title: "Expansion Agency", desc: "Trade, logistics, legal, accounting service providers.", points: ["Client diagnostic reports", "Standardised consulting", "Turn AI reports into leads"] },
    ],
  },

  special: {
    eyebrow: "Deep-dive Reports",
    title: "On top of the main report, generate <em>deep-dive analyses</em>.",
    viewAll: "View all special reports",
    risk: "Risk",
    items: [
      { tone: "teal", icon: "trend", title: "Marketing Special Report", desc: "Customer segments, ad mix, KOL channels and budget allocation.", time: "~6 min", risk: "Med" },
      { tone: "blue", icon: "truck", title: "Logistics & Customs Report", desc: "Sea/air freight, clearance, overseas warehouse comparison, SKU split.", time: "~4 min", risk: "Low" },
      { tone: "red", icon: "gavel", title: "Legal Risk Report", desc: "Product liability, contract template highlights, dispute resolution clauses.", time: "~7 min", risk: "High" },
    ],
  },

  comp: {
    eyebrow: "Compliance Boundary",
    title: "AI assists research, <em>not replaces</em> licensed professionals.",
    desc: "Good Go Global generates reports for market research and business decision support only. They do not constitute legal, tax, immigration, investment, customs or certification advice. Every high-risk section is flagged with an \"expert confirmation\" note and a path to professional referral.",
    items: [
      { icon: "shield", title: "High-risk auto-disclaimers", sub: "Legal · Tax · Immigration · Certification" },
      { icon: "users", title: "Expert confirmation flags", sub: "One-click referral to licensed pros" },
      { icon: "lock", title: "Encrypted file storage", sub: "Delete anytime · never used to train models" },
      { icon: "info", title: "Traceable data sources", sub: "Citations & confidence on key claims" },
    ],
  },

  faq: {
    eyebrow: "FAQ",
    title: "Questions users ask before they start",
    items: [
      { q: "How is this different from ChatGPT?", a: "Good Go Global wires up multiple purpose-built agents — product parsing, market research, competitor analysis, cost modelling — around your real files and inputs, producing consultancy-style report structures rather than chat replies." },
      { q: "Will the report content go stale?", a: "Markets, duties and regulations change. AI attaches confidence and sources to key claims, runs update checks on regulation/tax/certification content, and clearly flags high-risk clauses as \"requires expert confirmation\"." },
      { q: "Will my quotes and cost sheets be used for training?", a: "No. Private files you upload are used only for your own project reports. They are not used to train models. You may delete files and project archives at any time." },
      { q: "Which markets are supported in MVP?", a: "We're first focused on Chinese exporters entering Canada / North America — consumer goods, homewares, light industrial, food-service supplies and general B2B industrial supplies. Europe, MENA and SEA roll out next." },
      { q: "Can I compare multiple markets?", a: "Yes. \"Create project\" includes a multi-market comparison toggle. The system outputs opportunity, entry difficulty, compliance complexity and recommended channels side-by-side." },
      { q: "Can I export to PDF?", a: "Markdown / PDF / Word are supported. Free tier exports a watermarked PDF; paid tiers remove the watermark and allow standalone export of \"Action Checklist\" and \"Executive Summary\"." },
    ],
  },

  cta: {
    title: "Turn \"I want to go global\" into <em>a concrete next step</em>.",
    sub: "Create your first project free. Outline ready in 5 minutes.",
    btn1: "Get started", btn2: "View sample report",
  },

  foot: {
    tag: "AI market research advisor + entry report generator + expansion project workspace.",
    colProduct: "Product", colRes: "Resources", colCo: "Company",
    product: ["Features", "Special reports", "Sample report", "Pricing", "Changelog"],
    res: ["Expansion guide", "Market data", "Expert network", "API docs"],
    co: ["About", "Contact", "Terms of service", "Privacy policy"],
    langs: ["Chinese", "English", "French"],
    copyright: "© 2026 Good Go Global. All rights reserved.",
  },

  mock: {
    windowTitle: "Canada Market Entry Report · v2",
    ready: "Ready",
    sectionLabel: "05 · COMPETITOR ANALYSIS",
    aiTitle: "AI Assistant",
    tocTitle: "Contents",
    toc: ["Executive Summary","Product","Market","Customer","Competitors","Pricing","Channel","Logistics","Compliance","Brand","Operations","Roadmap","Actions"],
    contentH: "Main local competitors (Homewares)",
    contentP: "In the Toronto mass market, key competitors include IKEA, Canadian Tire, Home Depot's private label and Chinese sellers on Amazon. Price range concentrates at CAD 25–80",
    colBrand: "Brand", colPrice: "Price", colChannel: "Channel", colRating: "Rating",
    chOff: "Offline/Site", chRetail: "Retail Chain", chEcom: "Ecom",
    recoLbl: "Recommendation",
    recoText: "Enter the $22–45 range to stay competitive and differentiate from Chinese sellers via denser bilingual packaging.",
    aiMsg1: <>Found <b>3</b> items needing expert review. Generate the Trademark & Brand special report?</>,
    aiMsg2: <>Based on your price sheet, AI estimates a gross margin of <b style={{ color: "var(--teal)" }}>34%</b>.</>,
    riskLbl: "Risk levels",
    risks: [["Trademark", "High", "high"],["Certification", "Medium", "med"],["Import duty", "Low", "low"]],
    miniLbl: "3-yr Roadmap · Revenue",
  },
};

window.Landing = Landing;