// lab-sections-2.jsx — Plans, UseCases, Security
// ---------------------------------------------------------------------------
const T2 = window.LAB_TOKENS;

// ---------------------------------------------------------------------------
// Plans — 4 columns, #2 recommended. + 30-person example band.
// ---------------------------------------------------------------------------
function Plans({ onNav, recommended = '02' }) {
  const plans = [
    {
      no: '01', name: '診断パック', en: 'Diagnosis',
      price: '¥98,000', unit: '一括', period: '2週間',
      one: '「ウチにClaudeは効くのか？」を2週間で結論まで。',
      items: ['業務棚卸し・適合性診断', 'ツール使い分け基準の整理', '導入ロードマップ提示'],
    },
    {
      no: '02', name: 'ライト導入', en: 'Light Rollout',
      price: '¥150,000', unit: '月', period: '3ヶ月〜',
      one: '契約・研修・運用ルールまで。翌週から全社員が使える状態へ。',
      items: ['契約・初期設定の代行', '全社員向け活用研修', '利用ガイドライン策定', 'プロンプト雛形の提供'],
    },
    {
      no: '03', name: '実装伴走', en: 'Build Partner',
      price: '¥400,000', unit: '月〜', period: '6ヶ月〜',
      one: '業務エージェント2〜3体を構築。営業/法務/CS等を任せる。',
      items: ['業務エージェント構築', 'MCP・社内データ連携', '効果測定と改善運用'],
    },
    {
      no: '04', name: 'KAI 統合', en: 'Enterprise',
      price: '個別見積', unit: '', period: '12ヶ月〜',
      one: '全社展開・部門別エージェント量産・OEM対応。',
      items: ['部門別エージェント量産', '全社展開・内製化支援', 'OEM・ホワイトラベル'],
    },
  ];
  return (
    <Section id="plans" bg="cream" label="プラン">
      <SectionHead no="03" label="Plans" jpLabel="料金プラン"
        title={<>プラン — 98,000円から始められます</>}
        lead="スモールスタートから全社展開まで、4つの段階。Anthropic 製品料金は貴社で直接契約、lanitech は伴走フィーのみ。中間マージンはありません。" />

      <div className="lab-g4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginTop: 56, alignItems: 'stretch' }}>
        {plans.map((p) => {
          const hot = p.no === recommended;
          return (
            <div key={p.no} style={{
              background: '#FFFFFF',
              border: hot ? `2px solid ${T2.INK}` : `1px solid ${T2.HAIRLINE}`,
              borderRadius: 16, padding: hot ? '31px 27px' : '32px 28px',
              display: 'flex', flexDirection: 'column', gap: 18, position: 'relative',
              boxShadow: hot ? '0 8px 32px rgba(204,120,92,0.12)' : 'none',
            }}>
              {hot ? (
                <div style={{
                  position: 'absolute', top: -12, left: 28,
                  background: T2.CORAL, color: '#FFFFFF', borderRadius: 4, padding: '5px 12px',
                  fontFamily: 'var(--ff-latin)', fontWeight: 700, fontSize: 10.5,
                  letterSpacing: '0.14em', textTransform: 'uppercase',
                }}>おすすめ · Recommended</div>
              ) : null}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--ff-jp)', fontWeight: 700, fontSize: 19, color: T2.INK }}>{p.name}</span>
                <span style={{ fontFamily: 'var(--ff-logo)', fontWeight: 800, fontSize: 14, color: T2.HAIRLINE }}>{p.no}</span>
              </div>
              <div style={{
                fontFamily: 'var(--ff-latin)', fontWeight: 700, fontSize: 11, letterSpacing: '0.16em',
                textTransform: 'uppercase', color: T2.CORAL, marginTop: -8,
              }}>{p.en}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, flexWrap: 'wrap' }}>
                <span style={{ fontFamily: 'var(--ff-logo)', fontWeight: 800, fontSize: 32, color: T2.INK, letterSpacing: '-0.01em' }}>{p.price}</span>
                {p.unit ? <span style={{ fontFamily: 'var(--ff-jp)', fontWeight: 500, fontSize: 13, color: T2.INK_SOFT }}>/ {p.unit}（税別）</span> : null}
              </div>
              <div style={{ display: 'inline-flex', width: 'fit-content' }}><Tag tone="cream">{p.period}</Tag></div>
              <p style={{ margin: 0, fontFamily: 'var(--ff-body)', fontSize: 13.5, lineHeight: 1.75, color: T2.INK, minHeight: 48, textWrap: 'pretty' }}>{p.one}</p>
              <div style={{ height: 1, background: T2.HAIRLINE }} />
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
                {p.items.map((it, j) => (
                  <li key={j} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontFamily: 'var(--ff-body)', fontSize: 13, lineHeight: 1.6, color: '#444' }}>
                    <span style={{ marginTop: 7, width: 5, height: 5, background: T2.CORAL, flexShrink: 0 }} />
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
              <Button size="sm" variant={hot ? 'primary' : 'secondary'} fullWidth href={window.FORM_APPLY} target="_blank">
                {p.no === '04' ? '相談する' : '申し込む'}
              </Button>
            </div>
          );
        })}
      </div>

    </Section>
  );
}

// ---------------------------------------------------------------------------
// UseCases — 6 cards, 3×2.
// ---------------------------------------------------------------------------
function UseCases() {
  const cases = [
    { dept: '営業', en: 'Sales', body: '提案書ドラフト / 議事録から次アクション抽出 / 顧客リサーチ。', kpi: '週3〜5時間/人を削減' },
    { dept: '法務・総務', en: 'Legal & Admin', body: '契約書の一次レビュー / 規程整備 / 問合せ一次回答。', kpi: '専門家レビューの前段を自動化' },
    { dept: 'カスタマーサポート', en: 'Support', body: '問合せの下処理。返信品質を保ちながら対応時間を圧縮。', kpi: '問合せの30〜50%を下処理' },
    { dept: '開発', en: 'Engineering', body: 'Claude Code導入で、コードレビュー・テスト生成・リファクタを伴走。', kpi: '開発速度を底上げ' },
    { dept: '経営企画', en: 'Strategy', body: '市場・競合リサーチ / 資料ドラフト / 数値の解釈。', kpi: '一次案を全部Claudeに' },
    { dept: '社内ヘルプデスク', en: 'Internal Help', body: '社内規程・マニュアル・SaaS手順を学習させて質問に回答。', kpi: '24時間受付' },
  ];
  return (
    <Section id="usecases" bg="paper" label="活用ユースケース">
      <SectionHead no="04" label="Use Cases" jpLabel="想定ユースケース"
        title={<>何ができるようになるか</>}
        lead="Claudeは「賢いチャット」ではなく、部門ごとの実務を任せられる戦力になります。導入初期から効果が見えやすい6つの領域です。" />
      <div className="lab-g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 56 }}>
        {cases.map((c, i) => (
          <div key={i} style={{
            background: T2.CREAM, border: `1px solid ${T2.HAIRLINE}`, borderRadius: 16, padding: 30,
            display: 'flex', flexDirection: 'column', gap: 14,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <h3 style={{ margin: 0, fontFamily: 'var(--ff-jp)', fontWeight: 700, fontSize: 18, color: T2.INK }}>{c.dept}</h3>
              <span style={{ fontFamily: 'var(--ff-latin)', fontWeight: 700, fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: T2.INK_SOFT }}>{c.en}</span>
            </div>
            <p style={{ margin: 0, fontFamily: 'var(--ff-body)', fontSize: 14, lineHeight: 1.8, color: '#555', flex: 1, textWrap: 'pretty' }}>{c.body}</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 14, borderTop: `1px solid ${T2.HAIRLINE}` }}>
              <CoralBar height={12} width={3} mr={0} />
              <span style={{ fontFamily: 'var(--ff-jp)', fontWeight: 700, fontSize: 13.5, color: T2.CORAL_DEEP }}>{c.kpi}</span>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ---------------------------------------------------------------------------
// Security — 3 columns.
// ---------------------------------------------------------------------------
function Security() {
  const cols = [
    { h: 'データ保護', en: 'Data Protection', items: ['Claude API / for Work は学習に使われない', 'Zero Data Retention（ZDR）申請でログ保持ゼロ化も可能', 'PII（個人情報）マスキング設計支援'] },
    { h: '国内運用', en: 'Domestic Hosting', items: ['AWS Bedrock 東京リージョン構成にも対応', 'VPC / 閉域網接続の設計支援', '国内サーバーで運用したい企業向けオプション'] },
    { h: 'ガバナンス', en: 'Governance', items: ['利用ガイドライン策定', '監査ログ / SSO / IP制限', '情報持出ポリシー・承認フロー設計'] },
  ];
  return (
    <Section id="security" bg="cream" label="セキュリティ">
      <SectionHead no="05" label="Security" jpLabel="セキュリティ"
        title={<>法人でも、エンタープライズ水準</>}
        lead="「AIに社内情報を渡して大丈夫か」——その不安に、設計で答えます。データ保護・国内運用・ガバナンスの3軸で安全に進めます。" />
      <div className="lab-g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 56 }}>
        {cols.map((col, i) => (
          <div key={i} style={{
            background: '#FFFFFF', border: `1px solid ${T2.HAIRLINE}`, borderRadius: 16, padding: 32,
            display: 'flex', flexDirection: 'column', gap: 20,
          }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, paddingBottom: 18, borderBottom: `1px solid ${T2.HAIRLINE}` }}>
              <div style={{ fontFamily: 'var(--ff-latin)', fontWeight: 700, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: T2.CORAL }}>{col.en}</div>
              <h3 style={{ margin: 0, fontFamily: 'var(--ff-jp)', fontWeight: 700, fontSize: 21, color: T2.INK }}>{col.h}</h3>
            </div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 14 }}>
              {col.items.map((it, j) => (
                <li key={j} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontFamily: 'var(--ff-body)', fontSize: 14, lineHeight: 1.7, color: '#444' }}>
                  <span style={{ marginTop: 7, width: 6, height: 6, background: T2.CORAL, flexShrink: 0 }} />
                  <span>{it}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </Section>
  );
}

Object.assign(window, { Plans, UseCases, Security });