/* global React, Ico, Ph */
// Orae — 爆款基因裂变（首页王牌板块）：确定性 + 裂变测款效率 + 参考爆款→你的商品复刻 前后对照

// 裂变扇出：参考爆款 → 你的商品复刻成片 ×N
const FISSION_OUT = [
  { hook: "你的牙真的白吗？", flag: "🇺🇸" },
  { hook: "用了三周回购第二支", flag: "🇬🇧" },
  { hook: "出门前 30 秒亮白", flag: "🇯🇵" },
  { hook: "牙黄不敢笑？看这条", flag: "🇩🇪" },
  { hook: "7 天前后对比", flag: "🇧🇷" },
  { hook: "在家 5 分钟搞定", flag: "🇰🇷" },
];

function ViralFission() {
  return (
    <section className="band alt" id="viral">
      <div className="wrap">
        <div className="band-head">
          <span className="section-tag">02 / 爆款基因裂变 · 王牌能力</span>
          <h2>站在验证过的爆款上，裂变出你的几十条测款素材。</h2>
          <p>站在验证过的爆款结构上做素材，一个结构裂变出几十条你的商品视频，快速测出能爆的点 —— 不靠赌。</p>
        </div>

        {/* 前后对照 + 裂变扇出 */}
        <div className="vfis">
          <div className="vfis-ref">
            <div className="viral-reel ref">
              <Ph label="" />
              <span className="vr-grad" />
              <span className="vr-chip hot">{Ico.bolt({ width: 11, height: 11 })} 已验证爆款</span>
              <span className="vr-play"><Ico.play style={{ width: 12, height: 12, color: "#1a1a1a" }} /></span>
              <span className="vr-stat"><span className="num">1,820 万</span> 播放</span>
            </div>
            <div className="vfis-ref-cap">参考爆款视频</div>
          </div>

          <div className="vfis-gene">
            <span className="vfis-gene-ic">{Ico.layers ? Ico.layers({ width: 22, height: 22 }) : null}</span>
            <span className="vfis-gene-t">提取爆款基因</span>
            <span className="vfis-gene-s">结构 · 钩子 · 节奏</span>
            <span className="vfis-gene-arrow">{Ico.arrow({ width: 20, height: 20 })}</span>
          </div>

          <div className="vfis-out">
            <div className="vfis-out-head"><span>换成你的商品 · 裂变</span><span className="vfis-out-n">×{FISSION_OUT.length}</span></div>
            <div className="vfis-fan">
              {FISSION_OUT.map((o, i) => (
                <div className={"vfis-cell" + (i === 0 ? " lead" : "")} key={i}>
                  <Ph label="" />
                  <span className="vfis-cell-grad" />
                  <span className="vfis-cell-flag">{o.flag}</span>
                  <span className="vfis-cell-hook">{o.hook}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* 确定性 + 裂变测款效率 */}
        <div className="vfis-pillars">
          <div className="vfis-pillar">
            <span className="vfis-p-ic">{Ico.shield({ width: 20, height: 20 })}</span>
            <div className="vfis-p-h">确定性 · 不靠赌</div>
            <p className="vfis-p-d">爆款已经替你验证过市场。复用它的结构，等于站在一个验证过的成功上做素材 —— 比从零猜更稳。</p>
          </div>
          <div className="vfis-pillar">
            <span className="vfis-p-ic">{Ico.bolt({ width: 20, height: 20 })}</span>
            <div className="vfis-p-h">裂变测款效率</div>
            <p className="vfis-p-d">把一个验证过的爆款结构，快速裂变出大量你的商品视频。对品牌方 / 企业主，这是生产效率的质变。</p>
            <div className="vfis-metrics">
              <div className="vfis-metric"><span className="k">测款周期</span><span className="v"><b>周</b>{Ico.arrow({ width: 13, height: 13 })}<b className="hot">天</b></span></div>
              <div className="vfis-metric"><span className="k">测试覆盖</span><span className="v"><b>几个点</b>{Ico.arrow({ width: 13, height: 13 })}<b className="hot">几十个点</b></span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ViralFission });