// Part 2: 低值易耗品摊销方法 (3 methods)

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

function P2Opening() {
  const { localTime } = useSprite();
  return <OpeningShell
    partNumber="02"
    title={<>低值易耗品<br/>摊销方法</>}
    subtitle="扫帚、铁锹、工装 — 这些钱该怎么算？"
    chips={['一次摊销','分次摊销','五五摊销']}
    localTime={localTime}
  />;
}

// ── 09. 一次摊销法 ──────────────────────────────────────────────────────────
function M09() {
  const { localTime } = useSprite();
  const orient = useOrientation();
  const C = P2.C(), F = P2.F();
  return <Scene
    chapter="第二篇 · 低值易耗品摊销" section="09 / 15" color={C.tomato}
    title={<MethodTitleBlock number="09" chinese="一次摊销法" english="One-Time Write-Off" color={C.tomato} localTime={localTime}/>}
    sub="一次摊销法 = 一锤子买卖。领用即摊销，简单到极致。"
    main={
      <LocalSprite start={1} end={28}>
        {({ localTime: lt }) => (
          <div style={{ opacity: clamp(lt/0.4, 0, 1) }}>
            <div style={{ display:'flex', gap: 18, alignItems:'center', marginBottom: 20 }}>
              <div style={{ fontSize: 72 }}>🧹</div>
              <div>
                <div style={{ fontFamily: F.body, fontSize: 22, color: C.pencil }}>一把扫帚</div>
                <div style={{ fontFamily: F.mono, fontSize: 32, fontWeight: 800, color: C.ink }}>¥ 30</div>
              </div>
            </div>
            <div style={{ fontFamily: F.body, fontSize: 22, color: C.inkSoft, textAlign:'center', margin: '14px 0' }}>↓ 领用当月 ↓</div>
            <div style={{
              padding: orient==='landscape'?26:32, background: C.tomato, color: C.cream, borderRadius: 18,
              boxShadow: `6px 6px 0 ${C.ink}`, border: `3px solid ${C.ink}`,
            }}>
              <div style={{ fontFamily: F.body, fontSize: 24, marginBottom: 6 }}>一次计入费用</div>
              <div style={{ fontFamily: F.mono, fontSize: orient==='landscape'?36:44, fontWeight: 900 }}>¥ 30 → 管理费用</div>
              <div style={{ fontFamily: F.body, fontSize: 18, color: C.mustard, marginTop: 10 }}>账上余额归零 · 不再追踪</div>
            </div>
            <LocalSprite start={6} end={28}>
              <div style={{ marginTop: 20, padding: 20, background: C.paper, border: `2px dashed ${C.pencil}`, borderRadius: 12, fontFamily: F.body, fontSize: 20, color: C.inkSoft, lineHeight: 1.5 }}>
                💡 适用：金额小、种类多的物品<br/>
                <span style={{ color: C.tomato }}>副作用：月度费用波动较大</span>
              </div>
            </LocalSprite>
          </div>
        )}
      </LocalSprite>
    }
  />;
}

// ── 10. 分次摊销法 ──────────────────────────────────────────────────────────
function M10() {
  const { localTime } = useSprite();
  const orient = useOrientation();
  const C = P2.C(), F = P2.F();
  return <Scene
    chapter="第二篇 · 低值易耗品摊销" section="10 / 15" color={C.teal}
    title={<MethodTitleBlock number="10" chinese="分次摊销法" english="Periodic Amortization" 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={{ display:'flex', gap: 18, alignItems:'center', marginBottom: 16 }}>
              <div style={{ fontSize: 64 }}>🦺</div>
              <div>
                <div style={{ fontFamily: F.body, fontSize: 22, color: C.pencil }}>专用工装 · 使用10月</div>
                <div style={{ fontFamily: F.mono, fontSize: 32, fontWeight: 800, color: C.ink }}>¥ 2,000</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {Array.from({length: 10}).map((_, i) => {
                const show = clamp((lt - 1 - i*0.3)/0.3, 0, 1);
                return (
                  <div key={i} style={{
                    flex: '1 1 80px', height: orient==='landscape'?90:120,
                    background: show > 0.5 ? C.teal : 'rgba(47,109,104,0.18)',
                    border: `2px solid ${C.ink}`, borderRadius: 8,
                    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                    opacity: 0.3 + show*0.7,
                  }}>
                    <div style={{ fontFamily: F.body, fontSize: 14, color: show>0.5?C.cream:C.ink, opacity: 0.7 }}>月{i+1}</div>
                    <div style={{ fontFamily: F.mono, fontSize: orient==='landscape'?20:24, fontWeight: 800, color: show>0.5?C.cream:C.ink, marginTop: 4 }}>200</div>
                  </div>
                );
              })}
            </div>
            <LocalSprite start={5} end={28}>
              <div style={{ marginTop: 22, padding: 20, background: C.ink, color: C.cream, borderRadius: 12, fontFamily: F.mono, fontSize: orient==='landscape'?22:26, textAlign:'center' }}>
                2,000 ÷ 10 = <span style={{ color: C.mustard }}>¥ 200 / 月</span>
              </div>
            </LocalSprite>
          </div>
        )}
      </LocalSprite>
    }
  />;
}

// ── 11. 五五摊销法 ──────────────────────────────────────────────────────────
function M11() {
  const { localTime } = useSprite();
  const orient = useOrientation();
  const C = P2.C(), F = P2.F();
  return <Scene
    chapter="第二篇 · 低值易耗品摊销" section="11 / 15" color={C.mustard}
    title={<MethodTitleBlock number="11" chinese="五五摊销法" english="50-50 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={{ display: 'flex', gap: 18, marginBottom: 20 }}>
              <div style={{
                flex: 1, padding: 22,
                background: clamp((lt-1)/0.5, 0, 1) > 0.5 ? C.mustard : 'rgba(224,164,58,0.15)',
                border: `3px solid ${C.ink}`, borderRadius: 14,
                opacity: clamp((lt-0.8)/0.5, 0, 1),
              }}>
                <div style={{ fontFamily: F.body, fontSize: 20, color: C.ink, fontWeight: 600 }}>① 领用出库</div>
                <div style={{ fontFamily: F.mono, fontSize: orient==='landscape'?50:60, fontWeight: 900, color: C.ink, marginTop: 6 }}>50%</div>
                <div style={{ fontFamily: F.body, fontSize: 18, color: C.inkSoft, marginTop: 6 }}>计入费用</div>
              </div>
              <div style={{ display:'flex', alignItems:'center', fontSize: 40, color: C.pencil }}>→</div>
              <div style={{
                flex: 1, padding: 22,
                background: clamp((lt-3.5)/0.5, 0, 1) > 0.5 ? C.mustard : 'rgba(224,164,58,0.15)',
                border: `3px solid ${C.ink}`, borderRadius: 14,
                opacity: clamp((lt-3)/0.5, 0, 1),
              }}>
                <div style={{ fontFamily: F.body, fontSize: 20, color: C.ink, fontWeight: 600 }}>② 报废回收</div>
                <div style={{ fontFamily: F.mono, fontSize: orient==='landscape'?50:60, fontWeight: 900, color: C.ink, marginTop: 6 }}>50%</div>
                <div style={{ fontFamily: F.body, fontSize: 18, color: C.inkSoft, marginTop: 6 }}>计入费用</div>
              </div>
            </div>
            <LocalSprite start={6} end={28}>
              <div style={{ padding: 20, background: C.ink, color: C.cream, borderRadius: 14, fontFamily: F.body, fontSize: 20, lineHeight: 1.5 }}>
                <div style={{ color: C.mustard, fontWeight: 700, marginBottom: 6 }}>隐藏优势</div>
                报废前账上保留 50% 余额 · 管理层随时知道在用物品状况
              </div>
            </LocalSprite>
          </div>
        )}
      </LocalSprite>
    }
  />;
}

function P2Comparison() {
  const { localTime } = useSprite();
  const C = P2.C();
  return <ChapterComparison
    heading={<>三种摊销 · 各司其职</>}
    items={[
      { name: '一次摊销', use: '金额小、种类多 — 小工具', color: C.tomato },
      { name: '分次摊销', use: '金额较高、周期明确 — 工装', color: C.teal },
      { name: '五五摊销', use: '要兼顾管理 — 中国实务经典', color: C.mustard },
    ]}
    footer="💡 看金额大小、使用周期、管理需求"
    localTime={localTime}
  />;
}

function Part2() {
  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);
  const s_c = s(CM);
  return (
    <div data-video-root style={{ width:'100%', height:'100%', position:'relative' }}>
      <Sprite {...s_o}><P2Opening/></Sprite>
      <Sprite {...s1}><M09/></Sprite>
      <Sprite {...s2}><M10/></Sprite>
      <Sprite {...s3}><M11/></Sprite>
      <Sprite {...s_c}><P2Comparison/></Sprite>
    </div>
  );
}

Object.assign(window, { Part2 });