// legal.jsx — NEXTAGE 法律・規約・ポリシー・通報窓口モジュール
// 要件定義書（11章：法律と規約）に準拠した正式な表記を提供します。

function LegalModal({ type = 'terms', onClose }) {
  const [activeTab, setActiveTab] = React.useState(type);

  const tabs = [
    { id: 'terms', label: '利用規約' },
    { id: 'privacy', label: 'プライバシーポリシー' },
    { id: 'tokusho', label: '特定商取引法に基づく表記' },
    { id: 'external', label: '外部送信について' },
    { id: 'report', label: '通報窓口' },
  ];

  return (
    <div className="modal-bg" onClick={onClose} style={{ zIndex: 9999 }}>
      <div 
        className="card modal" 
        onClick={e => e.stopPropagation()} 
        style={{ 
          maxWidth: 680, 
          width: '94%', 
          maxHeight: '85vh', 
          display: 'flex', 
          flexDirection: 'column',
          padding: '24px 24px 18px',
          borderRadius: 24,
        }}
      >
        {/* ヘッダー */}
        <div className="between" style={{ marginBottom: 14, flex: 'none' }}>
          <div style={{ fontSize: 18, fontWeight: 900 }}>法的表記・規約</div>
          <button className="btn-t" onClick={onClose} style={{ fontSize: 18, padding: '4px 8px', color: 'var(--ink2)' }}>✕</button>
        </div>

        {/* タブナビゲーション */}
        <div className="seg" style={{ marginBottom: 16, flexWrap: 'wrap', gap: 4, flex: 'none' }}>
          {tabs.map(t => (
            <button 
              key={t.id} 
              className={activeTab === t.id ? 'on' : ''} 
              onClick={() => setActiveTab(t.id)}
              style={{ fontSize: 12, padding: '6px 12px' }}
            >
              {t.label}
            </button>
          ))}
        </div>

        {/* コンテンツ本文（スクロール可能） */}
        <div style={{ flex: 1, overflowY: 'auto', paddingRight: 6, fontSize: 13, lineHeight: 1.85, color: 'var(--ink2)' }}>
          {activeTab === 'terms' && (
            <div>
              <h3 style={{ fontSize: 15, fontWeight: 900, color: 'var(--ink)', marginBottom: 8 }}>NEXTAGE 利用規約</h3>
              <p>本規約は、Reverb Lab（以下「当ラボ」）が提供するアクションプラン作成・受講ツール「NEXTAGE」（以下「当サービス」）の利用条件を定めるものです。利用者の皆様は本規約に同意の上でご利用ください。</p>
              
              <h4 style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--ink)', margin: '14px 0 4px' }}>第1条（禁止事項）</h4>
              <p>ユーザーは、以下の行為を行ってはなりません。</p>
              <ul style={{ paddingLeft: 18, margin: '6px 0' }}>
                <li>他人の著作権、商標権、名誉、プライバシーその他の権利を侵害するスライド画像・テキストの投稿・配信</li>
                <li>公序良俗に反するコンテンツ（過度な露出、暴力、差別的表現等）の掲載</li>
                <li>埋め込みコード内の受講者ハッシュ番号やシステムを不正に改ざん・リバースエンジニアリングする行為</li>
                <li>当サービスの正常な運営を妨害する過度な連続アクセス等の行為</li>
              </ul>

              <h4 style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--ink)', margin: '14px 0 4px' }}>第2条（委託関係および会員データの取扱い）</h4>
              <p>講座オーナーが外部会員サイト（UTAGE、MyASP等）に埋め込んで当サービスを利用する場合、会員の学習進捗データはオーナーからの委託に基づき、当サービスが安全に処理・保管するものとします。</p>

              <h4 style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--ink)', margin: '14px 0 4px' }}>第3条（統計データの利用）</h4>
              <p>当サービスは、特定の講座や個人を識別できない形に加工した統計データ（全体の平均完走率、ステップ別傾向等）を、サービスの品質向上および機能改善のために利用できるものとします。</p>

              <h4 style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--ink)', margin: '14px 0 4px' }}>第4条（有料プランおよび解約）</h4>
              <p>有料プラン（月額2,200円・年額22,000円）は自動更新制です。解約は設定画面よりいつでも可能であり、次回更新日の前日までに解約手続きを行うことで次回以降の請求は発生しません。日割り返金は致しかねます。</p>
            </div>
          )}

          {activeTab === 'privacy' && (
            <div>
              <h3 style={{ fontSize: 15, fontWeight: 900, color: 'var(--ink)', marginBottom: 8 }}>プライバシーポリシー</h3>
              <p>Reverb Lab（以下「当ラボ」）は、ユーザーの個人情報の重要性を認識し、個人情報保護法を遵守して適切な管理に努めます。</p>

              <h4 style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--ink)', margin: '14px 0 4px' }}>1. 取得する情報</h4>
              <ul style={{ paddingLeft: 18, margin: '6px 0' }}>
                <li>オーナー情報：ログイン時に入力されたメールアドレス、アカウント設定情報</li>
                <li>受講者情報：各端末ごとの匿名識別トークン、スライドのクリア状況・達成タイムスタンプ</li>
              </ul>

              <h4 style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--ink)', margin: '14px 0 4px' }}>2. 会員サイト（UTAGE・MyASP）連携における個人情報の保護</h4>
              <p>当サービスは、外部会員サイトからの埋め込み連携において、<b>受講生のメールアドレスを平文で保存しません。</b>ブラウザ上で元に戻せない不可逆ハッシュ（SHA-256）に暗号変換したランダム記号のみを識別子として取り扱います。</p>

              <h4 style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--ink)', margin: '14px 0 4px' }}>3. 情報の利用目的</h4>
              <p>取得した情報は、講座スライドの配信、学習進捗の引き継ぎ復元、KPI分析の集計、お問い合わせ対応のためにのみ利用します。</p>
            </div>
          )}

          {activeTab === 'tokusho' && (
            <div>
              <h3 style={{ fontSize: 15, fontWeight: 900, color: 'var(--ink)', marginBottom: 8 }}>特定商取引法に基づく表記</h3>
              <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: 10 }}>
                <tbody>
                  <tr style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '8px 0', fontWeight: 700, width: 140 }}>販売事業者</td>
                    <td style={{ padding: '8px 0' }}>Reverb Lab（運営統括責任者：佐藤 英斗）</td>
                  </tr>
                  <tr style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '8px 0', fontWeight: 700 }}>所在地</td>
                    <td style={{ padding: '8px 0' }}>〒150-0043 東京都渋谷区道玄坂1丁目10番8号 渋谷道玄坂東急ビル2F-C</td>
                  </tr>
                  <tr style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '8px 0', fontWeight: 700 }}>電話番号</td>
                    <td style={{ padding: '8px 0' }}>請求があった場合、遅滞なく開示いたします。</td>
                  </tr>
                  <tr style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '8px 0', fontWeight: 700 }}>連絡先メール</td>
                    <td style={{ padding: '8px 0', fontFamily: 'var(--mono)' }}>support@reverb-lab.com</td>
                  </tr>
                  <tr style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '8px 0', fontWeight: 700 }}>役務の対価</td>
                    <td style={{ padding: '8px 0' }}>有料プラン：月額 2,200円（税込） / 年額 22,000円（税込）</td>
                  </tr>
                  <tr style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '8px 0', fontWeight: 700 }}>商品代金以外の費用</td>
                    <td style={{ padding: '8px 0' }}>インターネット接続料金、通信料金等はお客様のご負担となります。</td>
                  </tr>
                  <tr style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '8px 0', fontWeight: 700 }}>支払方法</td>
                    <td style={{ padding: '8px 0' }}>クレジットカード決済（Stripe）</td>
                  </tr>
                  <tr style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '8px 0', fontWeight: 700 }}>サービスの引渡時期</td>
                    <td style={{ padding: '8px 0' }}>決済完了直後（リアルタイムに全機能が利用可能となります）</td>
                  </tr>
                  <tr style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '8px 0', fontWeight: 700 }}>解約・返金について</td>
                    <td style={{ padding: '8px 0' }}>デジタルサービスの性質上、決済後の返金は原則行いません。管理画面の「設定 → プラン」よりいつでも解約可能であり、次回更新日をもって課金が停止します。</td>
                  </tr>
                </tbody>
              </table>
            </div>
          )}

          {activeTab === 'external' && (
            <div>
              <h3 style={{ fontSize: 15, fontWeight: 900, color: 'var(--ink)', marginBottom: 8 }}>外部送信規律に関する公表事項</h3>
              <p>電気通信事業法の外部送信規律に基づき、当サービスにおいてユーザーの端末から外部に送信される情報および送信先は以下の通りです。</p>

              <div style={{ marginTop: 12, padding: 12, borderRadius: 12, background: 'var(--em-ll)', border: '1px solid var(--line)' }}>
                <div style={{ fontWeight: 800, color: 'var(--ink)', marginBottom: 4 }}>① Supabase, Inc.（データベース・認証保管）</div>
                <div>送信目的：ロードマップ・スライド設定のクラウド保存、受講進捗の保存、ログイン認証</div>
                <div>送信情報：アカウント情報、匿名受講トークン、進捗レコード</div>
              </div>

              <div style={{ marginTop: 10, padding: 12, borderRadius: 12, background: 'var(--em-ll)', border: '1px solid var(--line)' }}>
                <div style={{ fontWeight: 800, color: 'var(--ink)', marginBottom: 4 }}>② Stripe, Inc.（決済処理）</div>
                <div>送信目的：有料プランの安全なサブスクリプション決済処理</div>
                <div>送信情報：決済に必要なカード識別情報、メールアドレス（Stripeサーバーに直接暗号化送信）</div>
              </div>

              <div style={{ marginTop: 10, padding: 12, borderRadius: 12, background: 'var(--em-ll)', border: '1px solid var(--line)' }}>
                <div style={{ fontWeight: 800, color: 'var(--ink)', marginBottom: 4 }}>③ Cloudflare, Inc.（ホスティング・CDN）</div>
                <div>送信目的：Webサイトの高速配信およびDDoS攻撃等のセキュリティ防御</div>
                <div>送信情報：アクセス元IPアドレス、リクエストヘッダー（アクセスログ）</div>
              </div>
            </div>
          )}

          {activeTab === 'report' && (
            <div>
              <h3 style={{ fontSize: 15, fontWeight: 900, color: 'var(--ink)', marginBottom: 8 }}>不適切コンテンツの通報窓口</h3>
              <p>当サービスでは、著作権侵害、名誉毀損、公序良俗に反する不適切なスライドコンテンツの配信を固く禁止しています。</p>
              <p style={{ marginTop: 10 }}>該当するコンテンツを発見された権利者様または受講者様は、以下の窓口まで該当の共有URLおよび問題箇所を明記の上ご連絡ください。速やかに事実関係を確認し、公開停止等の措置を実施いたします。</p>
              <div style={{ marginTop: 16, padding: 16, borderRadius: 12, background: '#fff', border: '1px solid var(--line)', textAlign: 'center' }}>
                <div style={{ fontSize: 12, color: 'var(--ink3)', marginBottom: 4 }}>通報・権利侵害連絡窓口</div>
                <div style={{ fontSize: 16, fontWeight: 700, fontFamily: 'var(--mono)', color: 'var(--ink)' }}>support@reverb-lab.com</div>
              </div>
            </div>
          )}
        </div>

        {/* フッター閉じるボタン */}
        <div className="row" style={{ justifyContent: 'flex-end', marginTop: 14, paddingTop: 10, borderTop: '1px solid var(--line)', flex: 'none' }}>
          <button className="btn btn-s" onClick={onClose}>閉じる</button>
        </div>
      </div>
    </div>
  );
}

// グローバルスコープに公開
window.LegalModal = LegalModal;