/* 連結版 — Sales 2幕構成
   第1幕：提案作成（AIが提案書を執筆）→ ブリッジ「提案をもとにスライドを生成」→
   第2幕：商談資料作成（提案からスライドが1枚ずつ生成）。
   ProposalView / DeckView を1つのマスタークロックで連結。 */

const { useState: useStateSC, useEffect: useEffectSC, useRef: useRefSC } = React;

const SC_FRAME = 720;
const SC_A1 = 10.2;            // 第1幕（提案書）尺
const SC_TR = 0.7;             // クロスフェード
const SC_A2_START = SC_A1 + 0.3;
const SC_A2_DUR = 12.2;        // 第2幕（スライド）尺
const SC_LOOP = SC_A2_START + SC_A2_DUR;
const SC_clamp = (p) => Math.max(0, Math.min(1, p));
const SC_easeOut = (p) => 1 - Math.pow(1 - p, 3);

injectCSS('combined-sales-css', `
.scmb { position:relative; width:${SC_FRAME}px; height:${SC_FRAME}px; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 18px 60px rgba(14,27,44,.16); }
.scmb .act { position:absolute; inset:0; }
.scmb-bridge { position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.scmb-bridge .pill { display:flex; align-items:center; gap:12px; background:var(--ink); color:#fff; border-radius:14px;
  padding:16px 22px; box-shadow:0 16px 44px rgba(0,0,0,.28); }
.scmb-bridge .ic { width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.scmb-bridge .tx { font-family:'Noto Sans JP','Inter',sans-serif; font-weight:600; font-size:15px; white-space:nowrap; }
`);

function CombinedSales() {
  const [t, setT] = useStateSC(0);
  const startRef = useRefSC(null), frozenRef = useRefSC(null);
  useEffectSC(() => {
    let raf;
    const tick = (now) => {
      if (startRef.current == null) startRef.current = now;
      if (frozenRef.current == null) setT(((now - startRef.current) / 1000) % SC_LOOP);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    window.__seek = (v) => { frozenRef.current = v; setT(v); };
    window.__play = () => { frozenRef.current = null; startRef.current = performance.now(); };
    return () => cancelAnimationFrame(raf);
  }, []);
  if (typeof window !== 'undefined') window.__t = t;

  const op1 = t < SC_A1 ? 1 : SC_clamp(1 - (t - SC_A1) / SC_TR);
  const op2 = SC_clamp((t - SC_A1) / SC_TR);
  const showA1 = t < SC_A1 + SC_TR + 0.1;
  const showA2 = t > SC_A1 - 0.1;
  const localT2 = Math.max(0, t - SC_A2_START);
  const bridgeP = (() => {
    if (t < SC_A1 - 0.1 || t > SC_A1 + 1.4) return 0;
    if (t < SC_A1 + 0.4) return SC_easeOut(SC_clamp((t - (SC_A1 - 0.1)) / 0.5));
    return SC_clamp((SC_A1 + 1.4 - t) / 0.6);
  })();
  const globalOp = t > SC_LOOP - 0.5 ? SC_clamp((SC_LOOP - t) / 0.5) : (t < 0.3 ? SC_clamp(t / 0.3) : 1);

  return (
    <div className="scmb" style={{ opacity: globalOp }}>
      {showA1 && <div className="act" style={{ opacity: op1, zIndex: 1 }}><ProposalView t={t} /></div>}
      {showA2 && <div className="act" style={{ opacity: op2, zIndex: 2 }}><DeckView t={localT2} /></div>}

      {bridgeP > 0 && (
        <div className="scmb-bridge" style={{ opacity: bridgeP }}>
          <div className="pill" style={{ transform: `translateY(${(1 - bridgeP) * 10}px)` }}>
            <span className="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg></span>
            <span className="tx">提案をもとにスライドを生成</span>
          </div>
        </div>
      )}
    </div>
  );
}
window.CombinedSales = CombinedSales;