// AIリファクタリング・AI研修・本番枠 の詳細ページ

const AIRefactoringPage = ({ setPage }) => (
  <>
    <section className="page-hero">
      <div className="container">
        <p className="eyebrow">— AI Refactoring</p>
        <h1 className="page-title">AIリファクタリングサービス</h1>
        <p className="page-lede">
          動いているけれど触りづらい、危険な構造のコード。<br />
          AIと熟練エンジニアの手で、安全に整え直します。
        </p>
      </div>
    </section>

    <section className="section">
      <div className="container ai-detail-grid">
        <div>
          <div className="section-mark">
            <span className="mark-num">01</span>
            <span className="mark-label">こんな悩みに</span>
          </div>
          <h2 className="section-title">こんなコード、ありませんか？</h2>
          <ul className="check-list">
            <li><span className="check">✓</span>ネストが深すぎて、何が起きているか追えない</li>
            <li><span className="check">✓</span>テストが無く、変更するのが怖い</li>
            <li><span className="check">✓</span>eval や document.write など、危険な書き方が残っている</li>
            <li><span className="check">✓</span>古いライブラリで、セキュリティアップデートができない</li>
            <li><span className="check">✓</span>仕様書が無く、暗黙のルールだらけ</li>
          </ul>
          <h3 className="sub-title">対応範囲</h3>
          <ul className="check-list">
            <li><span className="check">✓</span>既存コードの構造解析と移行計画</li>
            <li><span className="check">✓</span>テスト追加・型付け（TypeScript / Pydantic 等）</li>
            <li><span className="check">✓</span>セキュリティリスクの除去（eval / SQLi / XSS）</li>
            <li><span className="check">✓</span>段階的なリリース（カナリア / フィーチャーフラグ）</li>
          </ul>
          <button className="btn btn-primary" onClick={() => setPage("contact")}>
            相談してみる →
          </button>
        </div>
        <div className="ai-detail-art">
          <CodeRefactorIcon scale={1.6} />
        </div>
      </div>
    </section>
  </>
);

const AITrainingPage = ({ setPage }) => (
  <>
    <section className="page-hero ai-hero">
      <div className="container ai-hero-grid">
        <div>
          <p className="eyebrow">— AI Training Service</p>
          <h1 className="page-title">
            <span className="accent-underline">実践的</span>AI研修サービス
          </h1>
          <p className="page-lede">
            企業の従業員様向けに、AIの研修やテクニックの提供を行っております。<br />
            研修内容は会社様に合わせてカスタマイズ可能です。お気軽にお問い合わせください。
          </p>
          <div className="ai-hero-pricetag">
            <span className="hero-tag-label">基本料金</span>
            <span className="hero-tag-value">4時間 <strong>10,000円</strong></span>
            <span className="hero-tag-note">※相談可能</span>
          </div>
        </div>
        <div className="ai-hero-art" aria-hidden="true">
          <svg viewBox="0 0 320 280" width="100%">
            <g fill="none" stroke="#4a5260" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <rect x="40" y="30" width="240" height="150" rx="6" fill="#c5d8e5" strokeWidth="2.6" />
              <path d="M70 70 L120 70 M70 90 L160 90 M70 110 L140 110 M70 130 L180 130" stroke="#4a5260" opacity="0.5" />
              <text x="200" y="80" fontFamily="'Caveat', cursive" fontSize="36" fill="#4a5260" fontWeight="700">AI</text>
              <path d="M80 180 L60 230 M240 180 L260 230" />
              <ellipse cx="60" cy="245" rx="22" ry="6" fill="#b89878" strokeWidth="0" />
              <path d="M50 245 L48 218 Q50 200 60 195 Q70 200 72 218 L70 245" fill="#a8b89e" />
              <path d="M55 215 Q60 205 65 215" stroke="#4a5260" />
              <circle cx="245" cy="225" r="12" fill="#f5f1e8" />
              <path d="M235 245 Q245 240 255 245 L258 270 L232 270 Z" fill="#6f8aa8" />
              <path d="M170 200 L180 215 L200 215 Q230 215 230 200 Q230 185 200 185 L180 185 Q170 185 170 200 Z" fill="#f5f1e8" />
              <text x="180" y="207" fontFamily="'Klee One', serif" fontSize="13" fill="#4a5260">なるほど！</text>
            </g>
          </svg>
        </div>
      </div>
    </section>

    {/* 1. サービスへの思い */}
    <section className="section ai-message">
      <div className="container">
        <div className="section-mark">
          <span className="mark-num">01</span>
          <span className="mark-label">サービスへの思い</span>
        </div>
        <div className="message-card">
          <div className="message-pin" aria-hidden="true"></div>
          <p className="big">みんなにAIを、<br />もっと<strong>使いこなしてほしい。</strong></p>
          <p>AIの進化は急速で、業務に取り入れることでこれまでと比べ物にならないほど効率が上がる場面がたくさんあります。一方で「何から手を付ければ良いか分からない」「ツールは入れたけど使いこなせていない」というお声も多くいただきます。</p>
          <p>このサービスは、<strong>従業員のみなさまが、自分の仕事で実際にAIを使えるようになる</strong>ことを目的としております。</p>
          <p className="emphasis">だし惜しみはしません。</p>
          <p>普段使っているテクニックや、現場で役立つプロンプトのコツまで、惜しみなくお伝えします。</p>
          <div className="message-sign">— 合同会社しゅし</div>
        </div>
      </div>
    </section>

    {/* 2. 研修内容・構成 */}
    <section className="section ai-curriculum">
      <div className="container">
        <div className="section-mark">
          <span className="mark-num">02</span>
          <span className="mark-label">研修内容・構成</span>
        </div>
        <h2 className="section-title centered">基礎 1時間 ＋ 応用 3時間 の構成です。</h2>

        <div className="curriculum-grid">
          <div className="curriculum-card">
            <div className="curriculum-head">
              <span className="curriculum-tag">基礎講座</span>
              <span className="curriculum-time">1<small>h</small></span>
            </div>
            <h3>AIの「いま」を、まず知る。</h3>
            <ul className="check-list">
              <li><span className="check">✓</span>AIツールの紹介</li>
              <li><span className="check">✓</span>今後の見通し</li>
              <li><span className="check">✓</span>使い方の基本</li>
            </ul>
            <p className="curriculum-desc">主要なAIツール（ChatGPT / Claude / Gemini など）の特徴と違い、これから先どうなっていくのかの見通し、業務で使うときの基本的な考え方をお伝えします。</p>
          </div>
          <div className="curriculum-card featured">
            <div className="curriculum-head">
              <span className="curriculum-tag">応用講座</span>
              <span className="curriculum-time">3<small>h</small></span>
            </div>
            <h3>手を動かして、使えるようになる。</h3>
            <ul className="check-list">
              <li><span className="check">✓</span>実際に手を動かしてもらう</li>
              <li><span className="check">✓</span>講師による実演</li>
              <li><span className="check">✓</span>会社ごとに合わせたテーマ設定</li>
            </ul>
            <p className="curriculum-desc">受講者の方それぞれにAIを操作していただきます。御社の業務内容に応じてテーマを決め、明日からそのまま現場で使えるレベルを目指します。</p>
          </div>
        </div>

        <p className="curriculum-note">※ 時間や内容は、御社のご要望に応じて柔軟に調整可能です。</p>
      </div>
    </section>

    {/* 3. 料金 */}
    <section className="section ai-price">
      <div className="container">
        <div className="section-mark">
          <span className="mark-num">03</span>
          <span className="mark-label">料金</span>
        </div>
        <div className="ai-price-card">
          <div className="ai-price-main">
            <div className="ai-price-time">4時間</div>
            <div className="ai-price-amount"><strong>10,000</strong><small>円</small></div>
          </div>
          <ul className="ai-price-notes">
            <li>※ 内容・時間によっては相談可能です</li>
            <li>※ 対面の場合は別途交通費を頂戴します</li>
            <li>※ 受講人数の上限はありません（要相談）</li>
          </ul>
        </div>
      </div>
    </section>

    {/* 4. 流れ */}
    <section className="section ai-flow">
      <div className="container">
        <div className="section-mark">
          <span className="mark-num">04</span>
          <span className="mark-label">流れ</span>
        </div>
        <h2 className="section-title centered">問い合わせから請求まで。</h2>
        <ol className="ai-flow-steps">
          <li><span className="step-num">1</span><div><h3>お問い合わせ</h3><p>フォーム・メール・お電話のいずれかでご連絡ください。</p></div></li>
          <li><span className="step-num">2</span><div><h3>リモート打ち合わせ</h3><p>御社の課題やテーマをお伺いし、研修内容をご提案します。</p></div></li>
          <li><span className="step-num">3</span><div><h3>研修資料の共有</h3><p>当日使う資料・スライドを事前にお渡しします。</p></div></li>
          <li><span className="step-num">4</span><div><h3>研修の実施</h3><p>対面 / リモートいずれでも対応可能です。</p></div></li>
          <li><span className="step-num">5</span><div><h3>請求・お支払い</h3><p>研修終了後に請求書をお送りします。</p></div></li>
        </ol>
      </div>
    </section>

    {/* CTA */}
    <section className="section cta-section">
      <div className="container">
        <div className="cta-card">
          <div className="cta-copy">
            <h2>御社向けの研修、組み立てます。</h2>
            <p>業界・部署・スキルレベルに合わせて、内容をカスタマイズします。<br />まずはお気軽にお問い合わせください。</p>
            <div className="cta-actions">
              <button className="btn btn-primary" onClick={() => setPage("contact")}>お問い合わせフォームへ</button>
              <a className="btn btn-ghost" href="tel:090-6021-8006">☎ 090-6021-8006</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </>
);

const HonbanwakuPage = ({ setPage }) => (
  <>
    <section className="page-hero honbanwaku-hero">
      <div className="container honbanwaku-hero-grid">
        <div>
          <p className="eyebrow">— Chrome Extension</p>
          <h1 className="page-title">本番枠</h1>
          <p className="hb-tagline">本番環境の「うっかりミス」を、色で防ぐ。</p>
          <p className="page-lede">
            <strong>本番枠</strong>は、AWSコンソールやデータベース管理画面など、本番環境のURLを開いた瞬間に画面の周囲へ色付きの枠を表示するChrome拡張機能です。視覚的な警告によって、開発環境と本番環境の混同による操作ミスを未然に防ぎます。
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary" href="https://chromewebstore.google.com/detail/cmlnkfipgheklhkblnlnfkjpdalamlib?utm_source=item-share-cb" target="_blank" rel="noopener">
              Chrome Web Store でインストール
              <span className="btn-arrow">→</span>
            </a>
            <button className="btn btn-ghost" onClick={() => setPage("contact")}>お問い合わせ</button>
          </div>
        </div>
        <div className="hb-icon-wrap">
          <img src="assets/honbanwaku-icon.png" alt="本番枠 アイコン" className="hb-app-icon" />
        </div>
      </div>
    </section>

    {/* 開発者コメント */}
    <section className="section hb-comment-section">
      <div className="container">
        <div className="hb-comment-card">
          <div className="hb-comment-label">開発者コメント</div>
          <p>こんにちは。合同会社しゅしの<strong>西尾</strong>です。</p>
          <p>今回は「本番枠」というchromeの拡張機能を作りましたのでご紹介いたします。</p>
          <p>「開発環境で行うべき操作を本番環境で実行してしまった☠」<br />そんな事故を防ぐための拡張機能です。</p>
          <p>例えば、本番環境のAWSコンソールにアクセスしたら画面の周りに赤い「枠」が現れる、といった設定が簡単にできる拡張機能です。<br /><strong>ぜひ使ってみてください！</strong></p>
        </div>
      </div>
    </section>

    {/* スクリーンショット */}
    <section className="section">
      <div className="container">
        <div className="section-mark">
          <span className="mark-num">01</span>
          <span className="mark-label">使い方</span>
        </div>
        <h2 className="section-title centered">設定して、開くだけ。</h2>
        <div className="hb-shot-grid">
          <figure className="hb-shot">
            <img src="assets/honbanwaku-1.png" alt="通常のページ" />
            <figcaption><span className="hb-shot-num">01</span>普段見ているページ</figcaption>
          </figure>
          <figure className="hb-shot">
            <img src="assets/honbanwaku-2.png" alt="ルール設定画面" />
            <figcaption><span className="hb-shot-num">02</span>URLパターンと色を設定</figcaption>
          </figure>
          <figure className="hb-shot">
            <img src="assets/honbanwaku-3.png" alt="赤枠が表示されたページ" />
            <figcaption><span className="hb-shot-num">03</span>該当ページを開くと枠が出現</figcaption>
          </figure>
        </div>
      </div>
    </section>

    {/* 機能 */}
    <section className="section hb-features">
      <div className="container">
        <div className="section-mark">
          <span className="mark-num">02</span>
          <span className="mark-label">主な機能</span>
        </div>
        <div className="hb-feat-grid">
          <div className="hb-feat">
            <h3>URLパターンに応じた色枠</h3>
            <p>登録したURLパターンにマッチするページを開くと、画面周囲に設定した色の枠が自動表示。本番は赤、ステージングは黄色、といった使い分けが可能です。</p>
          </div>
          <div className="hb-feat">
            <h3>複数ルールの管理</h3>
            <p>URLと色の組み合わせを複数登録でき、プロジェクトや環境の数に合わせて柔軟に設定できます。一覧で確認・削除も。</p>
          </div>
          <div className="hb-feat">
            <h3>即時反映</h3>
            <p>設定の変更は保存後すぐに反映されます。ブラウザの再起動は不要です。</p>
          </div>
          <div className="hb-feat">
            <h3>データはブラウザ内に完結</h3>
            <p>すべての設定情報はブラウザのローカルストレージにのみ保存。外部サーバーへのデータ送信は一切ありません。</p>
          </div>
        </div>
      </div>
    </section>

    {/* 設定例 */}
    <section className="section hb-example">
      <div className="container">
        <div className="section-mark">
          <span className="mark-num">03</span>
          <span className="mark-label">設定例</span>
        </div>
        <h2 className="section-title">こんな使い方ができます。</h2>
        <table className="hb-example-table">
          <thead>
            <tr><th>環境</th><th>URLパターン例</th><th>枠の色</th></tr>
          </thead>
          <tbody>
            <tr>
              <td>本番 AWS</td>
              <td><code>console.aws.amazon.com</code></td>
              <td><span className="hb-swatch" style={{background:'#FF0000'}}></span>赤（#FF0000）</td>
            </tr>
            <tr>
              <td>本番 DB管理</td>
              <td><code>db.example.com/phpmyadmin</code></td>
              <td><span className="hb-swatch" style={{background:'#FF8C00'}}></span>オレンジ（#FF8C00）</td>
            </tr>
            <tr>
              <td>ステージング</td>
              <td><code>staging.example.com</code></td>
              <td><span className="hb-swatch" style={{background:'#FFD700'}}></span>黄色（#FFD700）</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>

    {/* 想定ユーザー */}
    <section className="section hb-users">
      <div className="container">
        <h2 className="section-title centered">想定ユーザー</h2>
        <ul className="hb-users-list">
          <li>Webアプリケーション開発者</li>
          <li>システム管理者・インフラエンジニア</li>
          <li>データベース管理者</li>
          <li>DevOps・SREエンジニア</li>
          <li>本番・ステージング・開発環境を日常的に切り替える方</li>
        </ul>
      </div>
    </section>

    {/* CTA */}
    <section className="section cta-section">
      <div className="container">
        <div className="cta-card">
          <div className="cta-copy">
            <h2>Chrome Web Store からワンクリック。</h2>
            <p>権限の要求は最小限。インストール後すぐに設定画面から利用を開始できます。<br />ご質問・ご要望・不具合報告はお気軽にどうぞ。</p>
            <div className="cta-actions">
              <a className="btn btn-primary" href="https://chromewebstore.google.com/detail/cmlnkfipgheklhkblnlnfkjpdalamlib?utm_source=item-share-cb" target="_blank" rel="noopener">
                インストールする →
              </a>
              <button className="btn btn-ghost" onClick={() => setPage("contact")}>お問い合わせ</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </>
);

// ============ お問い合わせ・SNS（Media） ============
const MediaPage = ({ setPage }) => (
  <>
    <section className="page-hero">
      <div className="container">
        <p className="eyebrow">— Media & Contact</p>
        <h1 className="page-title">お問い合わせ・SNS</h1>
        <p className="page-lede">
          ご相談はお電話・メール・フォームからお気軽に。<br />
          SNS各種でも、最新情報・活動の様子を発信しています。
        </p>
      </div>
    </section>

    <section className="section">
      <div className="container">
        <h2 className="section-title centered">直接のご連絡</h2>
        <div className="sub-grid media-direct-grid">
          <div className="sub-card">
            <div className="sub-card-ill">
              <span className="media-emoji" aria-hidden="true">📞</span>
            </div>
            <h3>お電話</h3>
            <a className="media-big-value" href="tel:090-6021-8006">090-6021-8006</a>
            <p className="sub-desc">年中無休 / 夜間は気づかない場合がございます。</p>
          </div>
          <div className="sub-card">
            <div className="sub-card-ill">
              <span className="media-emoji" aria-hidden="true">✉️</span>
            </div>
            <h3>メール</h3>
            <a className="media-big-value" href="mailto:contact@syushi.com">contact@syushi.com</a>
            <p className="sub-desc">24時間受付。3営業日以内にご返信します。</p>
          </div>
          <div className="sub-card">
            <div className="sub-card-ill">
              <span className="media-emoji" aria-hidden="true">📝</span>
            </div>
            <h3>フォーム</h3>
            <a className="media-big-value" href="/Contact.php">お問い合わせフォームへ →</a>
            <p className="sub-desc">入力項目に沿ってご相談内容をお送りください。</p>
          </div>
        </div>
      </div>
    </section>

    <section className="section section-alt">
      <div className="container">
        <h2 className="section-title centered">SNS</h2>
        <p className="section-lede" style={{ textAlign: "center" }}>
          最新の活動・お知らせを各SNSで発信しています。
        </p>
        <div className="sub-grid sub-grid-5 media-sns-grid">
          <a className="sub-card media-sns-card" href="https://x.com/Syushi_LLC" target="_blank" rel="noopener noreferrer">
            <div className="sub-card-ill">
              <span className="media-emoji" aria-hidden="true">𝕏</span>
            </div>
            <h3>X</h3>
            <div className="media-sns-handle">@Syushi_LLC</div>
            <p className="sub-desc">フォロー受付中</p>
          </a>
          <a className="sub-card media-sns-card" href="https://www.facebook.com/profile.php?id=61574000033322" target="_blank" rel="noopener noreferrer">
            <div className="sub-card-ill">
              <span className="media-emoji" aria-hidden="true">f</span>
            </div>
            <h3>Facebook</h3>
            <div className="media-sns-handle">合同会社しゅし</div>
            <p className="sub-desc">フォロー受付中</p>
          </a>
          <a className="sub-card media-sns-card" href="https://lin.ee/edvO4zF" target="_blank" rel="noopener noreferrer">
            <div className="sub-card-ill">
              <span className="media-emoji" aria-hidden="true">L</span>
            </div>
            <h3>LINE 公式</h3>
            <div className="media-sns-handle">友だち追加</div>
            <p className="sub-desc">気軽にメッセージを</p>
          </a>
          <div className="sub-card media-sns-card muted">
            <div className="sub-card-ill faded">
              <span className="media-emoji" aria-hidden="true">📷</span>
            </div>
            <h3>Instagram</h3>
            <div className="media-sns-handle">—</div>
            <p className="sub-desc">開設準備中</p>
          </div>
          <div className="sub-card media-sns-card muted">
            <div className="sub-card-ill faded">
              <span className="media-emoji" aria-hidden="true">▶</span>
            </div>
            <h3>YouTube</h3>
            <div className="media-sns-handle">—</div>
            <p className="sub-desc">開設準備中</p>
          </div>
        </div>
      </div>
    </section>

    <section className="section cta-section">
      <div className="container">
        <div className="cta-card">
          <div className="cta-copy">
            <h2>ご質問・お見積もり、お気軽に。</h2>
            <p>「こんなこと相談していい？」レベルのご相談、大歓迎です。<br />まずは一言、メッセージをいただければ折り返します。</p>
            <div className="cta-actions">
              <a className="btn btn-primary" href="/Contact.php">フォームから送る →</a>
              <a className="btn btn-ghost" href="tel:090-6021-8006">電話する</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </>
);

Object.assign(window, { AIRefactoringPage, AITrainingPage, HonbanwakuPage, MediaPage });