/* global React, Ico, Ph */
// Orae — 核心能力 四个图形化小演示

// 商品图 → 成片
function CapV1() {
  return (
    <div className="capv v1">
      <div className="v1-imgs">
        <div className="v1-img"><Ph label="" /></div>
        <div className="v1-img"><Ph label="" /></div>
        <div className="v1-img"><Ph label="" /></div>
        <span className="v1-count num">×9</span>
      </div>
      <div className="v1-arrow">
        <Ico.spark style={{ width: 16, height: 16 }} />
        <Ico.arrow style={{ width: 18, height: 18 }} />
      </div>
      <div className="mreel v1-reel">
        <Ph label="" />
        <span className="mchip">9:16</span>
        <span className="mplay"><Ico.play style={{ width: 9, height: 9, color: "#1a1a1a" }} /></span>
        <span className="mcta" />
      </div>
    </div>
  );
}

// 参考视频 → 复刻结构 → 你的商品
function CapV2() {
  const Bars = () => (
    <span className="mbars"><i style={{ width: "30%" }} /><i style={{ width: "45%" }} /><i style={{ width: "25%" }} /></span>
  );
  return (
    <div className="capv v2">
      <div className="v2-col">
        <div className="mreel"><Ph label="" /><span className="mchip dark">参考</span><Bars /></div>
        <span className="v2-lbl">看到的好视频</span>
      </div>
      <div className="v2-link">
        <span className="v2-chip"><Ico.film style={{ width: 12, height: 12 }} /> 结构复刻</span>
        <Ico.arrow style={{ width: 18, height: 18 }} />
      </div>
      <div className="v2-col">
        <div className="mreel"><Ph label="" /><span className="mchip">你的商品</span><Bars /></div>
        <span className="v2-lbl">换成你的款</span>
      </div>
    </div>
  );
}

// 多市场语言 — 字幕动态切换
const LANGS = [
  { tab: "英语", sub: "Whiter in 7 days" },
  { tab: "日语", sub: "7日で白い歯に" },
  { tab: "泰语", sub: "ฟันขาวใน 7 วัน" },
  { tab: "西班牙语", sub: "Más blanco" },
];
function CapV3() {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI((v) => (v + 1) % LANGS.length), 1900);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="capv v3">
      <div className="v3-tabs">
        {LANGS.map((l, k) => (
          <span className={"v3-tab" + (k === i ? " on" : "")} key={k}>{l.tab}</span>
        ))}
      </div>
      <div className="mreel v3-reel">
        <Ph label="" />
        <span className="mplay"><Ico.play style={{ width: 9, height: 9, color: "#1a1a1a" }} /></span>
        <span className="msub">{LANGS[i].sub}</span>
        <span className="mcta" />
      </div>
    </div>
  );
}

// 素材库复用 + 变体
function CapV4() {
  return (
    <div className="capv v4">
      <div className="v4-grid">
        {Array.from({ length: 6 }).map((_, k) => (
          <div className={"mreel" + (k === 1 ? " on" : "")} key={k}>
            <Ph label="" />
            {k === 1 && <span className="v4-badge">变体 ×3</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { CapV1, CapV2, CapV3, CapV4 });