/* global React, Ico, Ph, Reel, ResultReel, openApply */
// Orae Team — landing sections（结果展示 / 投入产出 / 使用场景 / 付费内测 / 申请面板）

/* ============================================================
   1 · 顶一个团队（总纲）—— 过去要养人 → 现在 Orae 替你做
   ============================================================ */
const TEAM_ROWS = [
  { role: "剪辑", past: "过去要招剪辑出片，排期、对版、等交付", now: "现在 Orae 每天批量出片，稳定产能不断档", ico: Ico.film },
  { role: "运营", past: "过去要招运营想方向，拆爆款、写脚本、猜角度", now: "现在 Orae 按爆款结构自动配方向，不靠猜", ico: Ico.spark },
  { role: "本地化", past: "过去要招本地化做多市场，多一个国家人力成本就翻倍", now: "现在 Orae 一次产出多语言、多市场版本，不堆人力就能覆盖更多市场", ico: Ico.globe },
  { role: "测款", past: "过去一条条慢慢测，一条几百块，测款慢", now: "现在批量产出，测得起、跑得快", ico: Ico.layers },
];

function TopTeam() {
  return (
    <section className="band" id="results">
      <div className="wrap">
        <div className="band-head">
          <span className="section-tag">01 / 你能得到什么</span>
          <h2>不用养一个团队，这些事 Orae 替你扛。</h2>
          <p>不用扩招剪辑、运营、本地化。一个 AI 素材员工团队，把出片这件事从「养人」变成「交给 Orae」。</p>
        </div>
        <div className="team-rows">
          {TEAM_ROWS.map((r, i) => (
            <div className="team-row" key={i}>
              <div className="tr-past">
                <span className="tr-x">×</span>
                <div className="tr-txt"><span className="tr-role">招{r.role}</span><span className="tr-line">{r.past}</span></div>
              </div>
              <span className="tr-arrow">{Ico.arrow({ width: 20, height: 20 })}</span>
              <div className="tr-now">
                <span className="tr-ico">{r.ico({ width: 20, height: 20 })}</span>
                <div className="tr-txt"><span className="tr-role now">Orae · {r.role}素材员</span><span className="tr-line now">{r.now}</span></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   3 · 多市场（差异化）—— 从素材产能 / 成本角度
   ============================================================ */
const MARKET_FLAGS = [
  { flag: "🇺🇸", m: "美国", l: "英语" }, { flag: "🇬🇧", m: "英国", l: "英语" }, { flag: "🇯🇵", m: "日本", l: "日语" },
  { flag: "🇩🇪", m: "德国", l: "德语" }, { flag: "🇫🇷", m: "法国", l: "法语" }, { flag: "🇰🇷", m: "韩国", l: "韩语" },
  { flag: "🇧🇷", m: "巴西", l: "葡语" }, { flag: "🇹🇭", m: "泰国", l: "泰语" }, { flag: "🇮🇩", m: "印尼", l: "印尼语" },
];

function MultiMarket() {
  return (
    <section className="band" id="markets">
      <div className="wrap">
        <div className="band-head">
          <span className="section-tag">03 / 多市场</span>
          <h2>多市场不是真人做不到，是太贵。</h2>
          <p>要人工铺满多个市场，每个国家都要准备对应语言、本地化的大量素材，要堆很多人。有了 Orae，不用堆人力就能做到同样规模的市场覆盖。</p>
        </div>
        <div className="mk-wrap">
          <div className="mk-flow">
            <div className="mk-src">
              <span className="mk-src-ic">{Ico.image({ width: 20, height: 20 })}</span>
              <span className="mk-src-t">一套商品素材</span>
              <span className="mk-src-s">上传一次</span>
            </div>
            <span className="mk-fan">{Ico.arrow({ width: 22, height: 22 })}</span>
            <div className="mk-grid">
              {MARKET_FLAGS.map((x, i) => (
                <div className="mk-cell" key={i}>
                  <span className="mk-flag">{x.flag}</span>
                  <span className="mk-mk">{x.m}</span>
                  <span className="mk-l">{x.l}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="mk-note">
            <div className="mk-pt"><span className="mk-pt-k">人工做法</span><span className="mk-pt-v">每多一个市场，就多一批本地化人力与成本</span></div>
            <div className="mk-pt now"><span className="mk-pt-k">用 Orae</span><span className="mk-pt-v">一次设好市场，口播与字幕换语种，不用堆人就铺多国</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   4 · 使用场景
   ============================================================ */
const SCENES = [
  { ico: Ico.box, t: "上新测素材", d: "新品上架先批量出片，快速测哪种素材有反馈。" },
  { ico: Ico.film, t: "TikTok Shop 日常发布", d: "每天有新素材可发，账号持续保持更新节奏。" },
  { ico: Ico.globe, t: "独立站广告素材测试", d: "一个产品多角度出片，喂给投放快速找跑量素材。" },
  { ico: Ico.layers, t: "参考爆款复刻", d: "放一条跑通的参考视频，复刻同款结构到你的商品。" },
  { ico: Ico.spark, t: "多语言 / 多市场内容生产", d: "一次设好市场，口播与字幕换语种，铺多国不返工。" },
];

function Scenarios() {
  return (
    <section className="band alt" id="scenes">
      <div className="wrap">
        <div className="band-head">
          <span className="section-tag">04 / 使用场景</span>
          <h2>哪里要带货视频，Orae 就在哪里替你出片。</h2>
        </div>
        <div className="scene-grid">
          {SCENES.map((s, i) => (
            <div className="scene-card" key={i}>
              <span className="scene-ico">{s.ico({ width: 22, height: 22 })}</span>
              <div className="scene-t">{s.t}</div>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   5 · 付费内测说明 + CTA
   ============================================================ */
const FIT = ["真实想测试产品视频素材的 TikTok / 独立站卖家", "有持续上新、需要稳定出素材的店铺", "想用更低门槛多测几个市场的出海团队"];

function BetaCTA() {
  return (
    <section className="band" id="beta">
      <div className="wrap">
        <div className="beta-card">
          <div className="beta-main">
            <span className="beta-flag"><span className="d" />限量付费内测 · 需申请开通</span>
            <h2>开通后，获得一个 AI 素材员工的产能。</h2>
            <p className="beta-lede">
              当前为付费内测,开通后获得 AI 素材员工产能。<strong>生成不免费,额度可控</strong>,适合真实想测试产品视频素材的商家。
            </p>
            <div className="beta-fit">
              <div className="bf-label">适合人群</div>
              <ul>{FIT.map((t) => <li key={t}><Ico.check style={{ width: 15, height: 15 }} />{t}</li>)}</ul>
            </div>
            <div className="beta-cta">
              <button className="btn btn-primary btn-lg" onClick={openApply}>申请付费内测 <Ico.arrow className="arrow" /></button>
              <a className="btn btn-soft btn-lg" href="登录页面.html">已有开通码,进入工作台</a>
            </div>
          </div>
          <div className="beta-side">
            <div className="beta-hook"><span className="bh-ico">{Ico.spark({ width: 18, height: 18 })}</span><div><div className="bh-t">加微信领样片</div><div className="bh-s">领取你所在品类的爆款结构样片</div></div></div>
            <div className="beta-hook"><span className="bh-ico">{Ico.shield({ width: 18, height: 18 })}</span><div><div className="bh-t">一对一跑通第一批</div><div className="bh-s">陪你跑通第一批可发布素材</div></div></div>
            <div className="beta-qr">
              <div className="qr-box"><img src="assets/wechat-contact-qr.png" alt="微信加好友二维码" style={{ width: "100%", height: "100%", objectFit: "contain", borderRadius: 12 }} /></div>
              <div className="qr-side"><div className="qr-t">扫码 / 加微信</div><div className="qr-id">微信扫一扫,添加客服</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   申请付费内测面板（事件触发的浮层）
   ============================================================ */
function ApplyPanel() {
  const [open, setOpen] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [contact, setContact] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [failed, setFailed] = React.useState(false);
  // 真提交:写进后端开通申请列表(人工私聊跟进),不再是纯前端假提交
  const submitApply = async () => {
    const value = contact.trim();
    if (!value || busy) return;
    setBusy(true); setFailed(false);
    const body = { source: "homepage_apply_panel" };
    if (/^1\d{10}$/.test(value)) body.phone = value;
    else if (value.includes("@")) body.email = value;
    else body.wechatId = value;
    try {
      const res = await fetch("/api/capacity-account-applications", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body)
      });
      if (!res.ok) throw new Error("apply failed");
      setSent(true);
    } catch (err) {
      setFailed(true);
    } finally {
      setBusy(false);
    }
  };
  React.useEffect(() => {
    const f = () => { setOpen(true); setSent(false); setFailed(false); setContact(""); };
    window.addEventListener("orae-apply", f);
    const esc = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", esc);
    return () => { window.removeEventListener("orae-apply", f); window.removeEventListener("keydown", esc); };
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  if (!open) return null;
  return (
    <div className="apply-mask" onClick={() => setOpen(false)}>
      <div className="apply-panel" onClick={(e) => e.stopPropagation()}>
        <button className="apply-close" onClick={() => setOpen(false)} aria-label="关闭">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
        </button>
        <div className="apply-grid">
          <div className="apply-left">
            <span className="apply-flag"><span className="d" />限量付费内测</span>
            <h3>申请付费内测</h3>
            <p className="apply-lede">加微信 / 企业微信申请开通码。开通后获得一个 <strong>AI 素材员工</strong>的产能,每天替你产出可发布的带货视频素材。</p>
            <ul className="apply-points">
              <li><Ico.check style={{ width: 15, height: 15 }} /><span><b>生成不免费,额度可控</b> —— 适合真实想测素材的商家</span></li>
              <li><Ico.check style={{ width: 15, height: 15 }} /><span>开通后获得 AI 素材员工产能,持续批量产出</span></li>
              <li><Ico.check style={{ width: 15, height: 15 }} /><span>加微信领取你所在品类的爆款结构样片</span></li>
              <li><Ico.check style={{ width: 15, height: 15 }} /><span>一对一帮你跑通第一批素材</span></li>
            </ul>
            <a className="apply-have" href="登录页面.html">已有开通码？进入工作台 {Ico.arrow({ style: { width: 14, height: 14 } })}</a>
          </div>
          <div className="apply-right">
            <div className="apply-qr"><img src="assets/wechat-contact-qr.png" alt="微信加好友二维码" style={{ width: "100%", height: "100%", objectFit: "contain", borderRadius: 12 }} /></div>
            <div className="apply-wx">微信扫一扫,添加客服</div>
            <div className="apply-or">或留下联系方式</div>
            {sent ? (
              <div className="apply-done">{Ico.check({ width: 16, height: 16 })} 已收到,我们会尽快联系你</div>
            ) : (
              <React.Fragment>
                <input className="apply-input" placeholder="微信号 / 手机号" value={contact}
                  onChange={(e) => setContact(e.target.value)}
                  onKeyDown={(e) => { if (e.key === "Enter") submitApply(); }} />
                <button className="btn btn-primary" style={{ width: "100%" }} disabled={busy} onClick={submitApply}>
                  {busy ? "提交中…" : "提交申请"}
                </button>
                {failed && <div className="apply-note" style={{ color: "#c0392b" }}>提交失败,请扫上方二维码加微信联系我们</div>}
              </React.Fragment>
            )}
            <div className="apply-note">企业微信同号 · 我们只用于内测沟通</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Footer
   ============================================================ */
const FOOT = [
  { h: "产品", links: ["能得到什么", "爆款基因裂变", "多市场", "付费内测"] },
  { h: "素材类型", links: ["产品展示", "达人口播", "剧情带货", "参考视频复刻"] },
  { h: "支持", links: ["帮助中心", "上手指南", "加微信申请", "联系我们"] },
];

function Footer() {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <a className="brand" href="#top"><span className="mark" />Orae<span className="en">Team</span></a>
            <p className="foot-note">你的 AI 带货视频编导。给一组商品图,持续产出可发布、可测试、可复用的带货短视频素材。</p>
            <div className="disclaim"><Ico.info /> 当前为付费内测,需申请开通码后使用。</div>
          </div>
          {FOOT.map((col) => (
            <div key={col.h}>
              <h5>{col.h}</h5>
              {col.links.map((l) => <a href="#" key={l}>{l}</a>)}
            </div>
          ))}
        </div>
        <div className="foot-bottom">
          <span>© 2026 Orae Team</span>
          <span>面向跨境电商 · TikTok Shop · 电商内容团队</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { TopTeam, MultiMarket, Scenarios, BetaCTA, ApplyPanel, Footer });