/* global React, Ico, Ph, Reel, ResultReel */
// Orae Team — Nav + Hero (转化优先首屏) + 申请入口

function openApply() { window.dispatchEvent(new CustomEvent("orae-apply")); }

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", f); f();
    return () => window.removeEventListener("scroll", f);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <a className="brand" href="#top">
          <span className="mark" />
          Orae<span className="en">Team</span>
        </a>
        <div className="nav-links">
          <a href="#results">能得到什么</a>
          <a href="#viral">爆款裂变</a>
          <a href="#markets">多市场</a>
          <a href="#beta">付费内测</a>
        </div>
        <div className="nav-right">
          <a className="login" href="登录页面.html">已有开通码</a>
          <button className="btn btn-primary btn-sm" onClick={openApply}>申请付费内测 <Ico.arrow className="arrow" style={{ width: 15, height: 15 }} /></button>
        </div>
      </div>
    </nav>
  );
}

// 「不用扩招」顶下的岗位（强调顶团队，而非工具操作）
const REPLACES = ["剪辑", "运营", "本地化", "测款"];

// 首屏右侧：四类成片预览
const HERO_REELS = [
  { tone: 0, type: "产品展示", flag: "🇺🇸", market: "美国 · 英语", hook: "7 天告别黄牙，牙医都推荐。", badge: "可发布" },
  { tone: 1, type: "达人口播", flag: "🇬🇧", market: "英国 · 英语", hook: "用了三周，我回购了第二支。", comment: "where to buy?? 😍" },
  { tone: 2, type: "剧情带货", flag: "🇯🇵", market: "日本 · 日语", hook: "出门前 30 秒，笑得更自信。" },
];

function HeroConvert() {
  return (
    <section className="hero convert" id="top">
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <span className="eyebrow"><span className="dot" />AI 素材员工 · 付费内测中</span>
          <h1 style={{ marginTop: 18 }}>
            一个 Orae，<br /><span className="accent">顶一个带货视频团队。</span>
          </h1>
          <p className="hero-lede">
            招剪辑、招运营、招本地化，又贵又慢；想多做几个市场，人力成本又翻倍。Orae 是你的 <strong>AI 素材员工</strong>——给一次素材，持续替你批量产出多角度、多市场、多语言的带货视频。
          </p>
          <p className="hero-aud">无论你做 <b>TikTok Shop</b> 日常铺量，还是做 <b>独立站 / 在 TikTok 投放引流</b>，都能把测款速度提上来。</p>

          <div className="hero-cta">
            <button className="btn btn-primary btn-lg" onClick={openApply}>申请付费内测 <Ico.arrow className="arrow" /></button>
            <a className="btn btn-ghost btn-lg" href="登录页面.html">已有开通码，进入工作台</a>
          </div>

          <div className="hero-replace">
            <span className="hr-label">不用扩招一个团队</span>
            <div className="hr-chips">
              {REPLACES.map((t) => <span className="hr-chip" key={t}>{t}</span>)}
              <span className="hr-arrow">{Ico.arrow({ width: 15, height: 15 })}</span>
              <span className="hr-chip orae">{Ico.spark({ width: 13, height: 13 })} 交给 Orae</span>
            </div>
          </div>
        </div>

        <div className="hero-stage">
          <div className="hero-reels">
            {HERO_REELS.map((r, i) => (
              <div className={"hr-slot s" + i} key={i}><ResultReel {...r} id={"hero-reel-" + i} /></div>
            ))}
            <div className="hero-float">
              <span className="pulse" />
              <div className="txt"><div className="t">一次产出 12 条</div><div className="s">多角度 · 多市场 · 可发布</div></div>
            </div>
          </div>
        </div>
      </div>
      <HeroReelWall />
    </section>
  );
}

// 底部满铺「正在播放」的带货视频墙
const WALL_REELS = [
  { id: "hw1", type: "前后对比", flag: "🇺🇸", cap: "7 天告别黄牙，牙医都推荐。" },
  { id: "hw2", type: "达人口播", flag: "🇬🇧", cap: "我用了三周，回购第二支。", comment: "can you do a video on this pls 😍" },
  { id: "hw3", type: "产品展示", flag: "🇯🇵", cap: "在家 5 分钟，肩颈松一整天。" },
  { id: "hw4", type: "剧情带货", flag: "🇩🇪", cap: "实测三周，真有效。" },
  { id: "hw5", type: "痛点开场", flag: "🇮🇩", cap: "总觉得牙黄不敢笑？看这条。" },
  { id: "hw6", type: "使用场景", flag: "🇹🇭", cap: "出门前 30 秒，亮白一整天。", comment: "link pls!! where to buy 🛒" },
  { id: "hw7", type: "前后对比", flag: "🇧🇷", cap: "Antes e depois: 7 dias." },
  { id: "hw8", type: "达人口播", flag: "🇰🇷", cap: "벌써 세 번째 재구매예요." },
  { id: "hw9", type: "产品展示", flag: "🇫🇷", cap: "Un geste, des dents plus blanches." },
];

function HeroReelWall() {
  return (
    <div className="reelwall">
      <div className="reelwall-head wrap">
        <span className="reelwall-eyebrow"><span className="rw-liv" />正在各市场跑的成片</span>
        <span className="reelwall-hint">同一组商品素材,持续产出多市场、多语言的带货视频</span>
      </div>
      <div className="reelwall-clip">
      <div className="reelwall-track">
        {WALL_REELS.map((r, i) => (
          <div className={"rw-reel s" + (i % 3)} key={r.id} style={{ animationDelay: (i * 0.45) + "s" }}>
            <image-slot id={r.id} className="rw-img" shape="rounded" radius="18" placeholder="拖入爆款帧"></image-slot>
            <div className="rw-shade" />
            <div className="rw-top">
              <span className="rw-chip"><span className="rw-eq"><i /><i /><i /></span>{r.type}</span>
              <span className="rw-flag">{r.flag}</span>
            </div>
            {!r.comment && <span className="rw-playbtn" aria-hidden="true"><Ico.play style={{ width: 16, height: 16, color: "#1a1a1a", marginLeft: 2 }} /></span>}
            <span className="rw-prog" style={{ animationDelay: (i * 0.7) + "s" }}><i /></span>
            {r.comment && <div className="rw-comment"><span className="rw-ava" /><span className="rw-bubble">{r.comment}</span></div>}
            {r.cap && <div className="rw-cap">{r.cap}</div>}
          </div>
        ))}
      </div>
      </div>
    </div>
  );
}

function Hero() { return <HeroConvert />; }

Object.assign(window, { Nav, Hero, openApply });