/* 第1幕 — 提案作成 (Sales)
   AIがリサーチを踏まえて提案書を執筆。課題→ご提案→期待効果→概算 の順に、
   セクション単位でタイピング。執筆中のセクションに青いパルス点、完了でチェック。
   ProposalView({t}) は時間propのみ受け取る純View（連結用）。 */

const { useState: useStateS1, useEffect: useEffectS1, useRef: useRefS1 } = React;

const S1_LOOP = 10.8;
const S1_clamp = (p) => Math.max(0, Math.min(1, p));
const S1_easeOut = (p) => 1 - Math.pow(1 - p, 3);

const S1_CHIPS = ['製造業', '従業員 120名', '受注管理が課題'];
const S1_SECS = [
  { lab: '課題', win: [2.0, 3.7], body: '受注管理が属人化し、月次の集計に約20時間。転記ミスや報告の遅れも発生しています。' },
  { lab: 'ご提案', win: [3.9, 5.7], body: '受注データを自動連携し、集計とレポートをAIが生成。属人化を解消し、誰でも即座に状況を把握できます。' },
  { lab: '期待効果', win: [5.9, 7.5], body: '導入後3ヶ月の想定値です。', metrics: [{ v: '20時間', l: '月あたり削減' }, { v: '−90%', l: '転記ミス' }, { v: '即時', l: '月次レポート' }] },
  { lab: '概算', win: [7.7, 9.0], body: '初期費用 ¥0 ／ 月額 ¥80,000〜。約3ヶ月で投資回収の見込みです。' },
];
const S1_TITLE = '株式会社 山田製作所 様 ご提案';
const S1_DONE = 9.4;

injectCSS('animS1-css', `
.pr { position:relative; width:720px; height:720px; background:var(--paper); overflow:hidden;
  font-family:'Inter','Noto Sans JP',sans-serif; color:var(--ink); }
.pr, .pr * { box-sizing:border-box; }
.pr-doc { position:absolute; inset:32px; background:var(--white); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-md); padding:44px 48px; display:flex; flex-direction:column; }
.pr-eye { display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase; }
.pr-eye .dot { width:6px; height:6px; border-radius:50%; background:var(--blue); animation:s1-pulse 1.6s ease-in-out infinite; }
@keyframes s1-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.pr-title { font-family:'Sora','Noto Sans JP',sans-serif; font-weight:600; font-size:30px; line-height:1.25;
  letter-spacing:-.01em; margin:13px 0 0; min-height:38px; }
.pr-title .car, .pr-body .car { display:inline-block; width:2px; height:.85em; background:var(--blue); vertical-align:-2px; margin-left:2px; animation:s1-car 1s steps(1) infinite; }
@keyframes s1-car { 0%,50%{opacity:1} 51%,100%{opacity:0} }
.pr-chips { display:flex; align-items:center; gap:8px; margin-top:18px; flex-wrap:wrap; }
.pr-chips .rl { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; margin-right:2px; }
.pr-chip { font-size:12px; font-weight:600; color:var(--blue-700); background:var(--blue-100); border-radius:999px; padding:5px 12px;
  opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease; }
.pr-chip.in { opacity:1; transform:none; }
.pr-rule { height:1px; background:var(--line); margin:24px 0 4px; }
.pr-secs { display:flex; flex-direction:column; gap:20px; margin-top:18px; }
.pr-sec { opacity:.3; transition:opacity .4s ease; }
.pr-sec.shown { opacity:1; }
.pr-lab { display:flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; margin-bottom:8px; }
.pr-lab .mk { width:15px; height:15px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--ink-300); transition:all .3s ease; }
.pr-lab.active .mk { border-color:var(--blue); }
.pr-lab.active .mk i { width:5px; height:5px; border-radius:50%; background:var(--blue); animation:s1-pulse 1.2s ease-in-out infinite; }
.pr-lab.done .mk { border-color:var(--ok); background:var(--ok); }
.pr-body { font-size:14.5px; line-height:1.7; color:var(--ink-2); }
.pr-mets { display:flex; gap:12px; margin-top:13px; }
.pr-met { flex:1; border:1px solid var(--line); border-radius:12px; padding:13px 15px; background:var(--paper);
  opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .4s cubic-bezier(.2,.7,.3,1); }
.pr-met.in { opacity:1; transform:none; }
.pr-met .v { font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; }
.pr-met .l { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.05em; color:var(--ink-3); text-transform:uppercase; margin-top:6px; }
.pr-foot { margin-top:auto; display:flex; align-items:center; gap:10px; padding-top:18px;
  opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease; }
.pr-foot.in { opacity:1; transform:none; }
.pr-foot .c { width:26px; height:26px; border-radius:50%; background:rgba(43,163,122,.13); border:1.5px solid var(--ok); display:flex; align-items:center; justify-content:center; }
.pr-foot .tx { font-weight:600; font-size:14px; color:var(--ink); }
.pr-foot .tg { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--blue); border-radius:999px; padding:5px 10px; }
`);

function S1_typed(full, win, t) {
  if (t < win[0]) return { s: '', active: false, done: false };
  if (t >= win[1]) return { s: full, active: false, done: true };
  const p = S1_clamp((t - win[0]) / (win[1] - win[0]));
  return { s: full.slice(0, Math.ceil(full.length * p)), active: true, done: false };
}

function ProposalView({ t }) {
  const titleType = S1_typed(S1_TITLE, [0.5, 1.7], t);
  return (
    <div className="pr">
      <div className="pr-doc" style={{ opacity: S1_easeOut(S1_clamp(t / 0.4)) }}>
        <div className="pr-eye"><span className="dot"></span>AI · 提案書を作成</div>
        <div className="pr-title">{titleType.s}{titleType.active && <span className="car"></span>}</div>

        <div className="pr-chips">
          <span className="rl">リサーチ反映</span>
          {S1_CHIPS.map((c, i) => <span key={i} className={'pr-chip' + (t > 1.9 + i * 0.18 ? ' in' : '')}>{c}</span>)}
        </div>

        <div className="pr-rule"></div>

        <div className="pr-secs">
          {S1_SECS.map((sec, i) => {
            const ty = S1_typed(sec.body, sec.win, t);
            const shown = t >= sec.win[0] - 0.05;
            const labCls = ty.done ? 'done' : ty.active ? 'active' : '';
            return (
              <div key={i} className={'pr-sec' + (shown ? ' shown' : '')}>
                <div className={'pr-lab ' + labCls}>
                  <span className="mk">{ty.done ? <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg> : <i></i>}</span>
                  {sec.lab}
                </div>
                <div className="pr-body">{ty.s}{ty.active && <span className="car"></span>}</div>
                {sec.metrics && (
                  <div className="pr-mets">
                    {sec.metrics.map((m, j) => (
                      <div key={j} className={'pr-met' + (t > sec.win[1] + 0.05 + j * 0.16 ? ' in' : '')}>
                        <div className="v">{m.v}</div><div className="l">{m.l}</div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </div>

        <div className={'pr-foot' + (t > S1_DONE ? ' in' : '')}>
          <span className="c"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--ok)" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
          <span className="tx">提案書を作成しました</span>
          <span className="tg">次の一手</span>
        </div>
      </div>
    </div>
  );
}

function Proposal() {
  const [t, setT] = useStateS1(0);
  const startRef = useRefS1(null), frozenRef = useRefS1(null);
  useEffectS1(() => {
    let raf;
    const tick = (now) => {
      if (startRef.current == null) startRef.current = now;
      if (frozenRef.current == null) setT(((now - startRef.current) / 1000) % S1_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 op = t > S1_LOOP - 0.5 ? S1_clamp((S1_LOOP - t) / 0.5) : 1;
  return <div style={{ opacity: op }}><ProposalView t={t} /></div>;
}
window.Proposal = Proposal;
window.ProposalView = ProposalView;