/**
 * DemosPage — interactive sample screens ("開発例") for the consulting service.
 * Reached from the Consulting page. Each demo is a clickable sample with
 * made-up data only.
 */
function DemosPage({ go }) {
  // Jump to the demo the visitor picked on the Consulting page.
  React.useEffect(() => {
    let id = null;
    try { id = sessionStorage.getItem('demoTarget'); sessionStorage.removeItem('demoTarget'); } catch (e) { /* ignore */ }
    if (!id) return undefined;
    const t = setTimeout(() => {
      const el = document.getElementById(id);
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: 'instant' });
    }, 150);
    return () => clearTimeout(t);
  }, []);

  return (
    <main>
      <PageHero
        kicker="Demo — デモ"
        lead="開発例を、実際の画面で試せます。ボタンを押したり、画面を切り替えたりして、使い心地をご確認ください。" />

      <Container style={{ paddingBottom: 72 }}>
        <Rule strong />
        <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 16, paddingTop: 40 }}>
          <button onClick={() => go('consulting')} style={window.btnOutline}>←&nbsp;コンサルティングへ戻る</button>
          <button onClick={() => go('contact')} style={window.btnSolid}>無料で相談する&nbsp;→</button>
        </div>
      </Container>

      {/* Interactive demo */}
      <div id="demo" style={{ background: '#EAF1F7', marginBottom: 96 }}>
        <Container style={{ paddingTop: 96, paddingBottom: 96 }}>
          <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 'clamp(32px, 6vw, 80px)', alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 700, color: 'var(--neutral-600)' }}>Demo</div>
              <h2 style={{ margin: '10px 0 0', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 'clamp(26px, 3.4vw, 40px)', lineHeight: 1.3, color: 'var(--zinc-950)' }}>オンライン英会話教室様<br />向けアプリ</h2>
              <p style={{ margin: '20px 0 0', maxWidth: 460, fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 2, color: 'var(--text-on-light-muted)' }}>
                実際のアプリのようにタップして操作できます。生徒と講師、2つの立場で試せます。
              </p>
              <ol style={{ margin: '24px 0 0', padding: 0, listStyle: 'none', maxWidth: 460 }}>
                {['「通話ルームに入室」を押して、通話画面を見る', '「講師を探す」から、レッスンの予約を申請する', '右上を「講師」に切り替えて、申請を承認する'].map((t, i) => (
                  <li key={t} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 12, alignItems: 'center', padding: '10px 0', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--zinc-950)' }}>
                    <span style={{ width: 28, height: 28, borderRadius: 999, background: '#1E3A5F', color: '#fff', fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{i + 1}</span>{t}
                  </li>
                ))}
              </ol>
              <p style={{ margin: '20px 0 0', fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.8, color: 'var(--neutral-600)' }}>※ サンプル画面です。実際のデザインや機能は、ご要望に合わせて設計します。</p>
            </div>
            <DemoFrame src="demos/speakflow.html?v=20261107" title="英会話教室向け通話アプリのサンプル" />
          </div>
        </Container>
      </div>

      {/* Merit of building in-house (English-lesson app) */}
      <Container id="demo-merit" style={{ paddingBottom: 96 }}>
        <div style={{ maxWidth: 760 }}>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 700, color: 'var(--neutral-600)' }}>Merit</div>
          <h2 style={{ margin: '10px 0 0', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 'clamp(26px, 3.4vw, 40px)', lineHeight: 1.3, color: 'var(--zinc-950)' }}>自社製にすると、<br />費用のかかり方が変わります</h2>
          <p style={{ margin: '20px 0 0', fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 2, color: 'var(--text-on-light-muted)' }}>
            英会話教室では、通話に Google Meet などの会議ツール、予約に有料の予約サイトを使うケースも多くあります。どちらも有料プランを契約すると、講師や予約が増えるたびに月額が上がり、予約サービスは年間契約が必要なものもあります。自社のアプリにすると、予約は自社の機能になり、通話は通話した時間ぶんだけの費用になります。
          </p>
        </div>
        <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, margin: '40px 0' }}>
          {[
            ['通話は Agora の SDK。使った分だけ', '弊社は、通話の仕組みに Agora の SDK を使って開発します。アカウントごとではなく、通話した時間ぶんの従量課金です。講師が増えても、固定費が増えにくくなります。'],
            ['予約サービスの月額・年間契約が不要に', '予約の機能も自社のアプリに含まれるので、予約サイトの月額や年間契約が要りません。講師や予約が増えて、上位のプランに切り替える必要もありません。'],
            ['予約から通話まで、1つのアプリで', '予約・通話・出欠を別々のツールに分けず、ひとつの画面にまとめられます。画面や流れも、教室のやり方に合わせて作れます。録画など、追加の費用がかかる機能もあります。'],
          ].map(([t, b], i) => (
            <div key={t} style={{ border: '1px solid var(--neutral-200)', borderRadius: 12, padding: 24, background: 'var(--white)' }}>
              <div style={{ width: 28, height: 28, borderRadius: 999, background: '#1E3A5F', color: '#fff', fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{i + 1}</div>
              <div style={{ marginTop: 14, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 17, lineHeight: 1.5, color: 'var(--zinc-950)' }}>{t}</div>
              <p style={{ margin: '10px 0 0', fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.8, color: 'var(--text-on-light-muted)' }}>{b}</p>
            </div>
          ))}
        </div>
        <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 20, color: 'var(--zinc-950)', marginBottom: 16 }}>月額の費用を、計算してみる</div>
        <CostCalculator />
      </Container>

      {/* Interactive demo: dashboard */}
      <Container id="demo-dashboard" style={{ paddingBottom: 96 }}>
        <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.25fr', gap: 'clamp(32px, 5vw, 64px)', alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 700, color: 'var(--neutral-600)' }}>Demo</div>
            <h2 style={{ margin: '10px 0 0', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 'clamp(26px, 3.4vw, 40px)', lineHeight: 1.3, color: 'var(--zinc-950)' }}>SNS分析<br />ダッシュボード</h2>
            <p style={{ margin: '20px 0 0', maxWidth: 440, fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 2, color: 'var(--text-on-light-muted)' }}>
              Instagram の画面だけでは、分析しきれません。毎月のCSVで長期間データを保持して、数年分の変化まで分析できます。
            </p>
            <ol style={{ margin: '24px 0 0', padding: 0, listStyle: 'none', maxWidth: 440 }}>
              {['「前の月のCSVを取り込む」を押して、グラフが過去へ伸びるのを見る', '「まとめて取り込む」で、3年分のデータを見る', '「前年と重ねて見る」で、去年との違いを比べる'].map((t, i) => (
                <li key={t} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 12, alignItems: 'center', padding: '10px 0', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--zinc-950)' }}>
                  <span style={{ width: 28, height: 28, borderRadius: 999, background: '#1E3A5F', color: '#fff', fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{i + 1}</span>{t}
                </li>
              ))}
            </ol>
            <div style={{ marginTop: 24 }}>
              <button onClick={() => go('demo-dashboard')} style={window.btnSolid}>大きな画面で操作する&nbsp;→</button>
            </div>
            <p style={{ margin: '20px 0 0', fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.8, color: 'var(--neutral-600)' }}>※ 架空のアカウントのサンプルデータです。実際の内容は、ご要望に合わせて設計します。</p>
          </div>
          <DemoFrame variant="browser" designWidth={900} scale={0.75} height={680} label="SNS分析ダッシュボード（サンプル）" src="demos/sns.html?v=20261107" title="SNS分析ダッシュボードのサンプル" />
        </div>
      </Container>

      {/* Merit of keeping the data (SNS analytics dashboard) */}
      <Container id="demo-dashboard-merit" style={{ paddingBottom: 96 }}>
        <div style={{ maxWidth: 760 }}>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 700, color: 'var(--neutral-600)' }}>Merit</div>
          <h2 style={{ margin: '10px 0 0', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 'clamp(26px, 3.4vw, 40px)', lineHeight: 1.3, color: 'var(--zinc-950)' }}>標準の画面では見られない期間まで、<br />分析できます</h2>
          <p style={{ margin: '20px 0 0', fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 2, color: 'var(--text-on-light-muted)' }}>
            Instagram などの標準の画面で見られるのは、直近約90日です。90日より前を見るには、有料のサブスクリプションが必要です（公式ヘルプ、2026年11月時点）。毎月のCSVや公式のAPIで自社のアプリに保存しておくと、数年分のデータが手元に残ります。
          </p>
        </div>
        <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, margin: '40px 0 16px' }}>
          {[
            ['数か月で見られなくなるデータを、数年分ためる', '毎月のCSVの取り込みや、公式のAPIでの自動保存で、自社のアプリにデータを積み上げます。サービス側の仕様が変わっても、手元のデータは残ります。'],
            ['年をまたいで、施策の効果を比べる', '前年同月との比較や、季節ごとの傾向、キャンペーン前後の変化を見られます。投稿の反応がよい曜日や時間帯も、データが増えるほど正確になります。'],
            ['SNSも広告もサイトも、ひとつの画面に', 'Instagram のほか、X や YouTube、自社サイトのアクセスなどを、ひとつの画面に並べられます。毎月のレポート作りの手間も減らせます。'],
          ].map(([t, b], i) => (
            <div key={t} style={{ border: '1px solid var(--neutral-200)', borderRadius: 12, padding: 24, background: 'var(--white)' }}>
              <div style={{ width: 28, height: 28, borderRadius: 999, background: '#1E3A5F', color: '#fff', fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{i + 1}</div>
              <div style={{ marginTop: 14, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 17, lineHeight: 1.5, color: 'var(--zinc-950)' }}>{t}</div>
              <p style={{ margin: '10px 0 0', fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.8, color: 'var(--text-on-light-muted)' }}>{b}</p>
            </div>
          ))}
        </div>
        <p style={{ margin: '0 0 40px', maxWidth: 760, fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.9, color: 'var(--neutral-600)' }}>
          データの取得は、公式のCSV出力と公式のAPIの範囲で行います。APIでは、一部の指標（フォロワーがオンラインの時間帯など）が直近30日分しか取れないため、毎日保存して履歴を積み上げます。
        </p>
        <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 20, color: 'var(--zinc-950)', marginBottom: 16 }}>レポート作成の手間を、計算してみる</div>
        <ReportCalculator />
      </Container>

      {/* Interactive demo: reservation system */}
      <div id="demo-reservation" style={{ background: '#EAF1F7', marginBottom: 96 }}>
        <Container style={{ paddingTop: 96, paddingBottom: 96 }}>
          <div className="rgrid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.25fr', gap: 'clamp(32px, 5vw, 64px)', alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 700, color: 'var(--neutral-600)' }}>Demo</div>
              <h2 style={{ margin: '10px 0 0', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 'clamp(26px, 3.4vw, 40px)', lineHeight: 1.3, color: 'var(--zinc-950)' }}>予約も顧客も、<br />1つの画面で</h2>
              <p style={{ margin: '20px 0 0', maxWidth: 420, fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 2, color: 'var(--text-on-light-muted)' }}>
                予約・顧客管理システムの、サンプル画面です。予約の時間割を見たり、お客様の顧客カルテを開いたりできます。ここでは小さく表示しています。見づらいときは、大きな画面で操作できます。
              </p>
              <ol style={{ margin: '24px 0 0', padding: 0, listStyle: 'none', maxWidth: 420 }}>
                {['「予約管理」で、スタッフごとの予約の時間割を見る', '予約を押して、お客様の顧客カルテを開く', '「顧客台帳」で、お客様を名前で探す'].map((t, i) => (
                  <li key={t} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 12, alignItems: 'center', padding: '10px 0', fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--zinc-950)' }}>
                    <span style={{ width: 28, height: 28, borderRadius: 999, background: '#1E3A5F', color: '#fff', fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{i + 1}</span>{t}
                  </li>
                ))}
              </ol>
              <div style={{ marginTop: 24 }}>
                <button onClick={() => go('demo-reservation')} style={window.btnSolid}>大きな画面で操作する&nbsp;→</button>
              </div>
              <p style={{ margin: '20px 0 0', fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.8, color: 'var(--neutral-600)' }}>※ 架空のお客様名・サンプルデータです。実際の内容は、ご要望に合わせて設計します。</p>
            </div>
            <DemoFrame variant="browser" designWidth={900} scale={0.75} height={680} label="予約・顧客管理システム（サンプル）" src="demos/salon.html?v=20261107b" title="予約・顧客管理システムのサンプル" />
          </div>
        </Container>
      </div>

      {/* CTA */}
      <Container style={{ paddingBottom: 110 }}>
        <Rule strong />
        <div style={{ textAlign: 'center', paddingTop: 56 }}>
          <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 16 }}>
            <button onClick={() => go('consulting')} style={window.btnOutline}>←&nbsp;コンサルティングへ戻る</button>
            <button onClick={() => go('contact')} style={window.btnSolid}>相談する&nbsp;→</button>
          </div>
        </div>
      </Container>
    </main>
  );
}

window.DemosPage = DemosPage;