// Part 3: 存货发出计价方法 (4 methods)

const P3 = { C: () => theme.colors, F: () => theme.fonts };

function P3Opening() {
  const { localTime } = useSprite();
  return <OpeningShell
    partNumber="03"
    title={<>存货发出<br/>计价方法</>}
    subtitle="不同批次的成本，到底该按哪个价发出？"
    chips={['移动加权','全月加权','个别指定','毛利率']}
    localTime={localTime}
  />;
}

// ── 12. 移动加权平均法 ─────────────────────────────────────────────────────
function M12() {
  const { localTime } = useSprite();
  const orient = useOrientation();
  const C = P3.C(), F = P3.F();
  return <Scene
    chapter="第三篇 · 存货发出计价" section="12 / 15" color={C.teal}
    title={<MethodTitleBlock number="12" chinese={<>移动加权<br/>平均法</>} english="Moving Weighted Avg" color={C.teal} localTime={localTime}/>}
    sub="移动加权平均法 = 每进一次货就重新洗牌。成本永远跟着最新进货价走。"
    main={
      <LocalSprite start={1} end={28}>
        {({ localTime: lt }) => (
          <div style={{ opacity: clamp(lt/0.4, 0, 1) }}>
            <div style={{
              padding: 18, background: C.paper, border: `3px solid ${C.ink}`, borderRadius: 14,
              marginBottom: 14, opacity: clamp((lt-0.5)/0.5, 0, 1),
            }}>
              <div style={{ fontFamily: F.body, fontSize: 20, color: C.pencil }}>第1周进货</div>
              <div style={{ fontFamily: F.mono, fontSize: 24, color: C.ink, fontWeight: 700 }}>100kg × 80元 = 8,000</div>
              <div style={{ fontFamily: F.mono, fontSize: 22, color: C.teal, marginTop: 4, fontWeight: 800 }}>→ 单价 80 元/kg</div>
            </div>
            <div style={{
              padding: 18, background: C.paper, border: `3px solid ${C.ink}`, borderRadius: 14,
              marginBottom: 14, opacity: clamp((lt-3)/0.5, 0, 1),
            }}>
              <div style={{ fontFamily: F.body, fontSize: 20, color: C.pencil }}>第2周进货</div>
              <div style={{ fontFamily: F.mono, fontSize: 24, color: C.ink, fontWeight: 700 }}>+ 50kg × 90元</div>
              <div style={{ fontFamily: F.mono, fontSize: 22, color: C.teal, marginTop: 4 }}>总：150kg · 12,500元</div>
            </div>
            <LocalSprite start={6} end={28}>
              <div style={{ padding: 20, background: C.ink, color: C.cream, borderRadius: 14 }}>
                <div style={{ fontFamily: F.body, fontSize: 20, color: C.mustard }}>新单价 = 12,500 ÷ 150</div>
                <div style={{ fontFamily: F.mono, fontSize: orient==='landscape'?36:42, fontWeight: 900, color: C.mustard, marginTop: 6 }}>= ¥ 83.33 / kg</div>
                <div style={{ fontFamily: F.body, fontSize: 16, color: C.rule, marginTop: 6 }}>此后发出均按此价，直到下次进货</div>
              </div>
            </LocalSprite>
          </div>
        )}
      </LocalSprite>
    }
  />;
}

// ── 13. 全月一次加权平均法 ─────────────────────────────────────────────────
function M13() {
  const { localTime } = useSprite();
  const orient = useOrientation();
  const C = P3.C(), F = P3.F();
  return <Scene
    chapter="第三篇 · 存货发出计价" section="13 / 15" color={C.sage}
    title={<MethodTitleBlock number="13" chinese={<>全月一次<br/>加权平均</>} english="Monthly Weighted Avg" color={C.sage} localTime={localTime}/>}
    sub="全月一次加权平均法 = 月底算总账。一个月只洗一次牌，省力但信息滞后。"
    main={
      <LocalSprite start={1} end={28}>
        {({ localTime: lt }) => (
          <div style={{ opacity: clamp(lt/0.4, 0, 1) }}>
            <div style={{ fontFamily: F.body, fontSize: 22, color: C.inkSoft, marginBottom: 14 }}>📅 整月不计算，月底统一算</div>
            <div style={{ padding: 18, background: C.paper, border: `3px solid ${C.ink}`, borderRadius: 14, marginBottom: 14 }}>
              {[
                { label: '月初', val: '200kg × 75 = 15,000' },
                { label: '15日进货', val: '+ 300kg × 80 = 24,000' },
                { label: '25日进货', val: '+ 500kg × 85 = 42,500' },
              ].map((r, i) => (
                <div key={i} style={{
                  display:'flex', gap: 14, padding: '8px 0',
                  borderBottom: i < 2 ? `1px dashed ${C.rule}` : 'none',
                  opacity: clamp((lt - 0.5 - i*0.4)/0.4, 0, 1),
                }}>
                  <div style={{ width: 100, fontFamily: F.body, fontSize: 18, color: C.pencil }}>{r.label}</div>
                  <div style={{ flex: 1, fontFamily: F.mono, fontSize: 20, color: C.ink }}>{r.val}</div>
                </div>
              ))}
            </div>
            <LocalSprite start={4} end={28}>
              <div style={{ padding: 20, background: C.sage, color: C.ink, borderRadius: 14, border: `3px solid ${C.ink}` }}>
                <div style={{ fontFamily: F.body, fontSize: 18 }}>月末加权单价</div>
                <div style={{ fontFamily: F.mono, fontSize: orient==='landscape'?26:30, fontWeight: 900, marginTop: 6 }}>
                  81,500 ÷ 1,000 = ¥ 81.5 / kg
                </div>
                <div style={{ fontFamily: F.body, fontSize: 16, marginTop: 8, color: C.ink, opacity: 0.75 }}>月内所有发出都用这个单价结转</div>
              </div>
            </LocalSprite>
          </div>
        )}
      </LocalSprite>
    }
  />;
}

// ── 14. 个别指定法 ──────────────────────────────────────────────────────────
function M14() {
  const { localTime } = useSprite();
  const orient = useOrientation();
  const C = P3.C(), F = P3.F();
  return <Scene
    chapter="第三篇 · 存货发出计价" section="14 / 15" color={C.rose}
    title={<MethodTitleBlock number="14" chinese="个别指定法" english="Specific Identification" color={C.rose} localTime={localTime}/>}
    sub="个别指定法 = 一物一价。最精确也最笨拙，专为贵重物品而生。"
    main={
      <LocalSprite start={1} end={28}>
        {({ localTime: lt }) => (
          <div style={{ opacity: clamp(lt/0.4, 0, 1) }}>
            <div style={{ fontFamily: F.body, fontSize: 22, color: C.inkSoft, marginBottom: 14 }}>💎 珠宝柜里的钻戒 · 每件独立身份</div>
            {[
              { id:'#A001', desc:'0.8克拉 · 南非', price:'¥ 50,000', color: C.tomato },
              { id:'#A002', desc:'0.8克拉 · 比利时', price:'¥ 80,000', color: C.teal },
              { id:'#A003', desc:'1.0克拉 · 俄罗斯', price:'¥ 120,000', color: C.mustard },
            ].map((r, i) => (
              <div key={i} style={{
                marginBottom: 14, padding: 18,
                background: C.paper, border: `3px solid ${r.color}`, borderRadius: 12,
                display: 'flex', alignItems: 'center', gap: 18,
                opacity: clamp((lt - 0.8 - i*0.6)/0.4, 0, 1),
              }}>
                <div style={{ fontSize: 36 }}>💎</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: F.mono, fontSize: 18, color: r.color, fontWeight: 700 }}>{r.id}</div>
                  <div style={{ fontFamily: F.body, fontSize: 18, color: C.inkSoft }}>{r.desc}</div>
                </div>
                <div style={{ fontFamily: F.mono, fontSize: orient==='landscape'?22:26, fontWeight: 800, color: C.ink }}>{r.price}</div>
              </div>
            ))}
            <LocalSprite start={5} end={28}>
              <div style={{ marginTop: 8, padding: 18, background: C.ink, color: C.cream, borderRadius: 12, fontFamily: F.body, fontSize: 20, lineHeight: 1.5 }}>
                卖出 A002 → 直接按 <span style={{ color: C.mustard, fontWeight: 700 }}>¥80,000</span> 结转 · 毫无偏差
              </div>
            </LocalSprite>
          </div>
        )}
      </LocalSprite>
    }
  />;
}

// ── 15. 毛利率法 ────────────────────────────────────────────────────────────
function M15() {
  const { localTime } = useSprite();
  const orient = useOrientation();
  const C = P3.C(), F = P3.F();
  return <Scene
    chapter="第三篇 · 存货发出计价" section="15 / 15" color={C.mustard}
    title={<MethodTitleBlock number="15" chinese="毛利率法" english="Gross Profit Method" color={C.mustard} localTime={localTime}/>}
    sub="毛利率法 = 从收入端倒推成本。快速估算的利器，精度取决于毛利率假设。"
    main={
      <LocalSprite start={1} end={28}>
        {({ localTime: lt }) => (
          <div style={{ opacity: clamp(lt/0.4, 0, 1) }}>
            <div style={{ fontFamily: F.body, fontSize: 22, color: C.inkSoft, marginBottom: 14 }}>🏪 超市老板想知道月中利润</div>
            <div style={{ padding: 18, background: C.paper, border: `3px solid ${C.ink}`, borderRadius: 14, marginBottom: 12 }}>
              <div style={{ fontFamily: F.body, fontSize: 18, color: C.pencil }}>已知：销售收入 100 万 · 历史毛利率 35%</div>
            </div>
            <div style={{ textAlign:'center', fontSize: 28, color: C.pencil, margin: '4px 0' }}>↓</div>
            <div style={{
              padding: 18, background: 'rgba(224,164,58,0.18)', border: `3px solid ${C.mustard}`, borderRadius: 14, marginBottom: 12,
              opacity: clamp((lt-2.5)/0.5, 0, 1),
            }}>
              <div style={{ fontFamily: F.body, fontSize: 18, color: C.ink }}>估算销售成本</div>
              <div style={{ fontFamily: F.mono, fontSize: orient==='landscape'?26:30, fontWeight: 800, color: C.ink, marginTop: 4 }}>
                = 100 × (1 − 35%) = <span style={{ background: C.mustard, padding: '2px 8px' }}>65万</span>
              </div>
            </div>
            <LocalSprite start={6} end={28}>
              <div style={{ padding: 18, background: C.ink, color: C.cream, borderRadius: 14, fontFamily: F.body, fontSize: 20, lineHeight: 1.5 }}>
                <div style={{ color: C.mustard, fontWeight: 700, marginBottom: 4 }}>典型应用</div>
                零售业月中估算 · 火灾水灾存货损失理赔
              </div>
            </LocalSprite>
          </div>
        )}
      </LocalSprite>
    }
  />;
}

function P3Comparison() {
  const { localTime } = useSprite();
  const C = P3.C();
  return <ChapterComparison
    heading={<>四种存货计价</>}
    items={[
      { name: '移动加权平均', use: '实时核算 — 现代ERP标配', color: C.teal },
      { name: '全月一次加权', use: '月末一算 — 简化实务', color: C.sage },
      { name: '个别指定',     use: '一物一价 — 珠宝/汽车', color: C.rose },
      { name: '毛利率法',     use: '快速估算 — 零售/理赔', color: C.mustard },
    ]}
    footer="💡 看业务量、单价、核算精度需求"
    localTime={localTime}
  />;
}

function Part3() {
  const t = useTime();
  React.useEffect(() => {
    const el = document.querySelector('[data-video-root]');
    if (el) el.setAttribute('data-screen-label', `t=${Math.floor(t)}s`);
  }, [Math.floor(t)]);
  const O=5, M=28, CM=12;
  let c = 0; const s = (d) => { const a = c; c+=d; return { start:a, end:c }; };
  const s_o = s(O);
  const s1=s(M), s2=s(M), s3=s(M), s4=s(M);
  const s_c = s(CM);
  return (
    <div data-video-root style={{ width:'100%', height:'100%', position:'relative' }}>
      <Sprite {...s_o}><P3Opening/></Sprite>
      <Sprite {...s1}><M12/></Sprite>
      <Sprite {...s2}><M13/></Sprite>
      <Sprite {...s3}><M14/></Sprite>
      <Sprite {...s4}><M15/></Sprite>
      <Sprite {...s_c}><P3Comparison/></Sprite>
    </div>
  );
}

Object.assign(window, { Part3 });