/* ============================================================
   mockups.jsx — 押印UI mockups (smartphone + PC)
   Hand-built device frames + interactive 捺印 demo inside the phone.
   ============================================================ */

/* ---------- Phone: 書類に押印するフロー ---------- */
function PhoneMockup() {
  const [stamped, setStamped] = React.useState(false);
  const sealRef = React.useRef(null);

  const doStamp = () => {
    const s = sealRef.current;
    if (s) { s.classList.remove('stamp-play'); void s.offsetWidth; s.classList.add('stamp-play'); }
    setTimeout(() => setStamped(true), 360);
  };

  return (
    <div className="phone">
      <div className="phone-notch" />
      <div className="phone-screen">
        {/* status bar */}
        <div className="ph-status">
          <span>9:41</span>
          <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
            <i className="ph-sig" /><i className="ph-bat" />
          </span>
        </div>
        {/* app header */}
        <div className="ph-head">
          <div className="ph-logo"><SealMark size={20} variant="flat" label="印" /></div>
          <span className="serif" style={{ fontWeight: 700, fontSize: 15 }}>デジスタ</span>
          <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--gold-deep)', fontWeight: 600 }}>承認待ち</span>
        </div>
        {/* document */}
        <div className="ph-doc">
          <div className="doc-title">業務委託契約書</div>
          <div className="doc-lines">
            {[100, 92, 96, 78, 88, 60].map((w, i) => <div key={i} style={{ width: w + '%' }} />)}
          </div>
          <div className="doc-stampzone">
            <div className={'doc-impression' + (stamped ? ' show' : '')}>
              <SealMark size={56} variant="flat" label="印" strokeOnly />
            </div>
            {!stamped && <span className="doc-hint">押印位置</span>}
            <div ref={sealRef} className="doc-floatseal" style={{ opacity: stamped ? 0 : 0 }} />
          </div>
          <div className="doc-lines">
            {[84, 70].map((w, i) => <div key={i} style={{ width: w + '%' }} />)}
          </div>
        </div>
        {/* action bar */}
        <div className="ph-action">
          {!stamped ? (
            <button className="ph-stampbtn" onClick={doStamp}>
              <SealMark size={22} variant="flat" label="印" /> ここに押印する
            </button>
          ) : (
            <div className="ph-done">
              <IconCheck size={18} stroke="#0D1F0F" /> 押印が完了しました
            </div>
          )}
          <div className="ph-meta">{stamped ? '2026/05/31 09:41 · タイムスタンプ記録済' : '代表者印 · 株式会社サンプル'}</div>
        </div>
      </div>
    </div>
  );
}

/* ---------- PC: 印鑑管理ダッシュボード ---------- */
function DesktopMockup() {
  const seals = [
    { name: '代表者印', type: '丸印', glyph: '印', uses: 128 },
    { name: '角印', type: '社印', glyph: '社', uses: 342 },
    { name: '銀行印', type: '丸印', glyph: '銀', uses: 47 },
    { name: '職印（弁護士）', type: '職印', glyph: '職', uses: 89 },
  ];
  return (
    <div className="browser">
      <div className="br-bar">
        <div className="br-dots"><i /><i /><i /></div>
        <div className="br-url"><span className="lock-dot" />app.degista.jp / 印鑑管理</div>
      </div>
      <div className="br-body">
        <aside className="br-side">
          <div className="br-brand"><SealMark size={22} variant="flat" label="印" /><span className="serif">デジスタ</span></div>
          <nav>
            <a className="active"><span className="nv-i" />印鑑管理</a>
            <a><span className="nv-i" />押印履歴</a>
            <a><span className="nv-i" />書類</a>
            <a><span className="nv-i" />メンバー</a>
            <a><span className="nv-i" />設定</a>
          </nav>
        </aside>
        <main className="br-main">
          <div className="br-h">
            <div>
              <div className="br-eyebrow">印鑑管理</div>
              <h4 className="serif">登録済みのデジタル印鑑</h4>
            </div>
            <button className="br-new">＋ 新しい印鑑</button>
          </div>
          <div className="seal-grid">
            {seals.map((s, i) => (
              <div key={i} className="seal-card">
                <SealMark size={64} variant="flat" label={s.glyph} />
                <div className="sc-name">{s.name}</div>
                <div className="sc-type">{s.type}</div>
                <div className="sc-foot">
                  <span className="sc-live"><i />有効</span>
                  <span className="sc-uses">押印 {s.uses}</span>
                </div>
              </div>
            ))}
          </div>
          <div className="br-log">
            <div className="log-h"><IconHistory size={16} stroke="var(--gold-deep)" /> 最近の押印履歴</div>
            {[
              ['代表者印', '業務委託契約書', '田中 一郎', '09:41'],
              ['角印', '請求書 No.2048', '佐藤 花子', '昨日'],
              ['職印（弁護士）', '委任状', '鈴木 太郎', '5/29'],
            ].map((r, i) => (
              <div key={i} className="log-row">
                <span className="log-seal">{r[0]}</span>
                <span className="log-doc">{r[1]}</span>
                <span className="log-user">{r[2]}</span>
                <span className="log-time">{r[3]}</span>
              </div>
            ))}
          </div>
        </main>
      </div>
    </div>
  );
}

Object.assign(window, { PhoneMockup, DesktopMockup });