// ページコンポーネント群

const NAV_ITEMS = [
{ id: "home", label: "ホーム" },
{ id: "service", label: "サービス" },
{ id: "koumon", label: "顧問SE" },
{ id: "company", label: "会社案内" },
{ id: "media", label: "お問い合わせ・SNS" }];


// ============ ヘッダー ============
const Header = ({ page, setPage, variant }) => {
  return (
    <header className={`site-header variant-${variant}`}>
      <div className="container header-inner">
        <a className="brand" href="#home" onClick={(e) => {e.preventDefault();setPage("home");}}>
          <img src="assets/syushi-logo.png" alt="しゅし" className="brand-logo" />
          <div className="brand-text">
            <div className="brand-jp">合同会社しゅし</div>
            <div className="brand-en">Syushi LLC.</div>
          </div>
        </a>
        <nav className="site-nav">
          {NAV_ITEMS.map((item) =>
          <a
            key={item.id}
            href={`#${item.id}`}
            className={`nav-link ${page === item.id ? "active" : ""}`}
            onClick={(e) => {e.preventDefault();setPage(item.id);}}>
            
              {item.label}
            </a>
          )}
        </nav>
      </div>
    </header>);

};

// ============ ホームページ ============
const HomePage = ({ setPage, variant, illustDensity }) => {
  return (
    <>
      {/* HERO */}
      <section className="hero">
        <div className="container hero-grid">
          <div className="hero-copy">
            <p className="eyebrow">— Web Application Studio</p>
            <h1 className="hero-title">
              AIを使い倒すエンジニアが、<br />
              <span className="accent-underline">どんな要望にも</span>応える。
            </h1>
            <p className="hero-lede">
              合同会社しゅしは、Webアプリ開発を中心に、<br />
              セキュリティ・インフラ・既存コード再構築まで<br />
              「Webアプリに関するどんなことでも」お任せいただける制作集団です。
            </p>
            <div className="hero-cta">
              <button className="btn btn-primary" onClick={() => setPage("contact")}>
                相談してみる
                <span className="btn-arrow">→</span>
              </button>
              <button className="btn btn-ghost" onClick={() => setPage("service")}>
                サービスを見る
              </button>
            </div>
          </div>
          <div className={`hero-art density-${illustDensity}`}>
            <HeroIllustration />
            {/* 浮かぶ雲 */}
            <div className="float-cloud cloud-1"><HandDrawnCloud scale={0.9} /></div>
            <div className="float-cloud cloud-2"><HandDrawnCloud scale={0.7} /></div>
          </div>
        </div>
        {/* 区切り線 — 手描きの波 */}
        <svg className="hero-divider" viewBox="0 0 1200 24" preserveAspectRatio="none" aria-hidden="true">
          <path d="M0 12 Q 100 4 200 12 T 400 12 T 600 12 T 800 12 T 1000 12 T 1200 12"
          stroke="var(--ink-soft)" strokeWidth="1.4" fill="none" strokeLinecap="round" />
        </svg>
      </section>

      {/* サービスメイン：Webアプリ */}
      <section className="section main-service">
        <div className="container">
          <div className="section-mark">
            <span className="mark-num">01</span>
            <span className="mark-label">主力サービス</span>
          </div>
          <div className="main-service-grid">
            <div className="main-service-copy">
              <h2 className="section-title">
                Webアプリ、<br />なんでも作ります。
              </h2>
              <p className="section-lede">
                ゼロからの新規開発も、既存システムの再構築も。<br />
                フロント・バックエンド・インフラ・セキュリティ・<br />
                AI活用まで、<strong>Webアプリに関わる全工程</strong>を<br />
                一貫してお引き受けします。
              </p>
              <ul className="check-list">
                <li><span className="check">✓</span>新規Webアプリ開発（要件定義〜公開まで）</li>
                <li><span className="check">✓</span>既存コードの再構築・モダナイズ</li>
                <li><span className="check">✓</span>セキュリティ診断・脆弱性対応</li>
                <li><span className="check">✓</span>クラウドインフラ構築（AWS / GCP / Azure）</li>
                <li><span className="check">✓</span>パフォーマンス改善・障害試験</li>
                <li><span className="check">✓</span>AIを活用した開発高速化・自動化</li>
              </ul>
              <button className="btn btn-link" onClick={() => setPage("service")}>
                サービス詳細を見る →
              </button>
            </div>
            <div className="main-service-art">
              <div className="desk-stack">
                <HandDrawnDesk scale={1.1} screenText="> npm run dev" />
                <div className="desk-offset">
                  <HandDrawnDesk scale={0.9} screenText="> deploy" />
                </div>
              </div>
              <div className="cat-spot"><HandDrawnCat scale={0.8} /></div>
            </div>
          </div>
        </div>
      </section>

      {/* サブサービス */}
      <section className="section sub-services">
        <div className="container">
          <div className="section-mark">
            <span className="mark-num">02</span>
            <span className="mark-label">サービス一覧</span>
          </div>
          <h2 className="section-title centered">6つのサービスで、お応えします。</h2>
          <div className="sub-grid sub-grid-5">
            <a className="sub-card sub-card-link" href="#contact" onClick={(e) => {e.preventDefault();setPage("contact");}}>
              <div className="sub-card-ill">
                <HandDrawnDesk scale={0.7} />
              </div>
              <div className="badge-num">01</div>
              <h3>Webアプリ開発</h3>
              <p className="sub-meta">新規・既存ともに対応</p>
              <p className="sub-desc">
                要件定義から運用まで、Webアプリ開発の全工程を一貫対応。フロント・バック・インフラまでフルスタックで。
              </p>
              <span className="sub-card-arrow">お問い合わせへ →</span>
            </a>
            <a className="sub-card sub-card-link" href="#koumon" onClick={(e) => {e.preventDefault();setPage("koumon");}}>
              <div className="sub-card-ill">
                <HandDrawnDesk scale={0.7} screenText="" />
              </div>
              <div className="badge-num">02</div>
              <div className="badge-feature">時間内でアプリ作り放題！</div>
              <h3>顧問SEサービス</h3>
              <p className="sub-meta">月額制 / 8万円〜</p>
              <p className="sub-desc">
                沢山の開発案件を抱えている企業様向けの月額定額サービス。要件定義からリリースまで、同じエンジニアが一貫対応します。
              </p>
              <span className="sub-card-arrow">サービス詳細を見る →</span>
            </a>
            <a className="sub-card sub-card-link" href="recode.html">
              <div className="sub-card-ill">
                <CodeRefactorIcon />
              </div>
              <div className="badge-num">03</div>
              <h3>AIリファクタリングサービス</h3>
              <p className="sub-meta">既存コード改善</p>
              <p className="sub-desc">
                ネストの深い、読みづらい、危険な構造のコードを、AIと熟練エンジニアの手で安全に整え直します。
              </p>
              <span className="sub-card-arrow">サービス詳細を見る →</span>
            </a>
            <a className="sub-card sub-card-link" href="#ai-training" onClick={(e) => {e.preventDefault();setPage('ai-training');}}>
              <div className="sub-card-ill">
                <HandDrawnPlant scale={0.85} />
              </div>
              <div className="badge-num">04</div>
              <h3>AI研修サービス</h3>
              <p className="sub-meta">4時間 10,000円〜</p>
              <p className="sub-desc">
                企業の従業員様向けに、AIの研修やテクニックの提供を行います。みんなにAIを使いこなしてほしい、だし惜しみはしません。
              </p>
              <span className="sub-card-arrow">サービス詳細を見る →</span>
            </a>
            <a className="sub-card sub-card-link" href="#honbanwaku" onClick={(e) => {e.preventDefault();setPage('honbanwaku');}}>
              <div className="sub-card-ill">
                <ChromeExtIcon />
              </div>
              <div className="badge-num">05</div>
              <div className="badge-feature">Chrome 拡張機能</div>
              <h3>本番枠</h3>
              <p className="sub-meta">弊社開発 / 無償公開</p>
              <p className="sub-desc">
                弊社が開発・公開している Chrome 拡張機能。コードは非公開ですが、ご相談いただければ公開可能です。
              </p>
              <span className="sub-card-arrow">Chrome ストアへ →</span>
            </a>
            <a className="sub-card sub-card-link" href="#contact" onClick={(e) => {e.preventDefault();setPage("contact");}}>
              <div className="sub-card-ill">
                <HandDrawnTower scale={0.7} />
              </div>
              <div className="badge-num">06</div>
              <h3>その他</h3>
              <p className="sub-meta">セキュリティ・インフラ ほか</p>
              <p className="sub-desc">
                セキュリティ対策・インフラ構築・Webサイト制作など、Webアプリの周辺領域もご相談ください。
              </p>
              <span className="sub-card-arrow">お問い合わせへ →</span>
            </a>
          </div>
        </div>
      </section>

      {/* 強み */}
      <section className="section strengths">
        <div className="container" data-comment-anchor="3deed95b3f-div-214-9">
          <div className="section-mark">
            <span className="mark-num">03</span>
            <span className="mark-label">しゅしの強み</span>
          </div>
          <div className="strength-grid">
            <div className="strength">
              <div className="strength-num">a.</div>
              <h3>AIを使い倒す</h3>
              <p>最新のAIツールを開発に組み込み、従来の数倍の速度と質で実装します。</p>
            </div>
            <div className="strength">
              <div className="strength-num">b.</div>
              <h3>一貫対応</h3>
              <p>企画・設計・実装・運用までワンストップ。担当が変わらないので、文脈が消えません。</p>
            </div>
            <div className="strength">
              <div className="strength-num">c.</div>
              <h3>柔軟な契約</h3>
              <p>請負・準委任・月額顧問。規模やフェーズに合わせて、最適なかたちを選べます。</p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section cta-section">
        <div className="container">
          <div className="cta-card" data-comment-anchor="c7d2218abc-div-242-11">
            <div className="cta-art">
              <HandDrawnPlant scale={1} />
            </div>
            <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 ServicePage = ({ setPage }) => {
  const services = [
  {
    cat: "01",
    title: "Webアプリ開発",
    desc: "新規・既存問わず、Webアプリに関わる全工程を引き受けます。要件整理から運用設計まで一貫して。",
    items: ["フロントエンド（React / Next.js / Vue）", "バックエンド（Node.js / Go / Python / PHP）", "DB設計・API設計", "テスト戦略・CI/CD"],
    icon: "desk",
    page: "contact"
  },
  {
    cat: "02",
    title: "顧問SEサービス",
    desc: "月額制で、開発パートナーになります。要件定義から保守まで、御社の社内SEのように。",
    items: ["月額8万円〜", "年間対応時間360時間〜", "余り時間は翌年繰り越し", "平日 9-18時対応"],
    icon: "desk",
    badge: "展開中",
    page: "koumon"
  },
  {
    cat: "03",
    title: "AIリファクタリングサービス",
    desc: "ネストの深い、読みづらい、危険な構造のコードを、AIと熟練エンジニアの手で安全に整え直します。",
    items: ["既存コードの構造解析", "テスト追加・型付け", "段階的な移行計画", "セキュリティリスク除去"],
    icon: "code",
    href: "recode.html"
  },
  {
    cat: "04",
    title: "AI研修サービス",
    desc: "企業の従業員様向けに、AIの研修やテクニックの提供を行います。みんなにAIを使いこなしてほしい、だし惜しみはしません。",
    items: ["4時間 10,000円〜", "基礎講座 1時間", "応用講座 3時間", "テーマ・時間 相談可能"],
    icon: "plant",
    page: "ai-training"
  },
  {
    cat: "05",
    title: "本番枠（Chrome 拡張機能）",
    desc: "弊社が開発・公開している Chrome 拡張機能。コードは非公開ですが、ご相談いただければ公開可能です。",
    items: ["Chrome ウェブストアで公開中", "弊社による開発・運用", "コードは原則非公開", "公開希望はお問い合わせください"],
    icon: "chrome",
    page: "honbanwaku"
  },
  {
    cat: "06",
    title: "その他",
    desc: "セキュリティ対策・インフラ構築・Webサイト制作など、Webアプリの周辺領域もご相談ください。",
    items: ["脆弱性診断・WAF設定・ログ監視", "AWS / GCP / Azure クラウド構築", "Webサイト制作・SEO対策", "その他IT関連業務（要相談）"],
    icon: "tower",
    page: "contact"
  }];


  return (
    <>
      <section className="page-hero">
        <div className="container">
          <p className="eyebrow">— Services</p>
          <h1 className="page-title">サービス一覧</h1>
          <p className="page-lede">
            Webアプリを軸に、その周辺で発生するあらゆるご相談に対応します。<br />
            ご予算や納期に合わせて柔軟に組み立てます。
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="service-list">
            {services.map((s, i) => {
              const linked = s.href || s.page;
              const onClick = s.page ? (e) => {e.preventDefault();setPage(s.page);} : undefined;
              const Wrap = linked ? "a" : "article";
              const wrapProps = linked ?
              { href: s.href || `#${s.page}`, onClick, className: `service-row service-row-link` } :
              { className: `service-row` };
              return (
                <Wrap key={i} {...wrapProps}>
                <div className="service-row-meta">
                  <span className="service-cat">No.</span>
                  <span className="service-num">{s.cat}</span>
                </div>
                <div className="service-row-body">
                  <div className="service-row-head">
                    <h2>{s.title}</h2>
                    {s.badge && <span className="badge-new inline">{s.badge}</span>}
                  </div>
                  <p className="service-row-desc">{s.desc}</p>
                  <ul className="service-row-items">
                    {s.items.map((it, j) =>
                      <li key={j}><span className="dot">●</span>{it}</li>
                      )}
                  </ul>
                  {linked && <span className="service-row-arrow">サービス詳細を見る →</span>}
                </div>
                <div className="service-row-art">
                  {s.icon === "desk" && <HandDrawnDesk scale={0.6} />}
                  {s.icon === "tower" && <HandDrawnTower scale={0.55} />}
                  {s.icon === "plant" && <HandDrawnPlant scale={0.85} />}
                  {s.icon === "code" && <CodeRefactorIcon />}
                  {s.icon === "chrome" && <ChromeExtIcon />}
                </div>
              </Wrap>);
            })}
          </div>

          <div className="cta-card small">
            <div className="cta-copy">
              <h2>個別のご相談、歓迎します。</h2>
              <p>このリストに当てはまらないものでも、Webアプリ周りなら大抵対応できます。</p>
              <button className="btn btn-primary" onClick={() => setPage("contact")}>
                相談してみる →
              </button>
            </div>
          </div>
        </div>
      </section>
    </>);

};

// ============ 会社案内 ============
const CompanyPage = () =>
<>
    <section className="page-hero">
      <div className="container">
        <p className="eyebrow">— About us</p>
        <h1 className="page-title">会社案内</h1>
        <p className="page-lede">
          AIを使い倒すエンジニアが集まる、小さな制作会社です。<br />
          手を動かすことを大切にしています。
        </p>
      </div>
    </section>

    {/* 代表挨拶 */}
    <section className="section ceo-section">
      <div className="container">
        <div className="section-mark">
          <span className="mark-num">01</span>
          <span className="mark-label">代表挨拶</span>
        </div>
        <div className="ceo-grid">
          <div className="ceo-letter">
            <h2 className="ceo-greet">この度は、弊社HPをご覧くださり、<br />ありがとうございます。</h2>
            <div className="ceo-body">
              <p>私は合同会社しゅしの代表を務めております、<strong>西尾朱志（にしおしゅし）</strong>と申します。</p>
              <p>弊社ではWebアプリケーションといわれる分野のシステム開発を行っております。<br />今まで、製造業界や不動産業界の企業様へのご支援を行って参りました。</p>
              <p>さて、今現在人工知能（AI）の進化によって社会全体で大きな転換点を迎えております。<br />今まで手作業で行っていた仕事も人工知能を使って自動化や効率化をするようになってきました。</p>
              <p>しかし、AIを導入してすぐに業務状況が改善されることは少なく、業務負荷が改善されるには時間と手間を要します。</p>
              <p>私どもはアプリケーションを納品するだけでなく、<strong>そんな手間や負担を軽減するようなご支援</strong>もしております。AIの研修や、社内資料の整理、最新の技術を使った業務改善のご提案も行います。<br />AIの性能を十分に発揮し企業様のお力になるよう、ご納得いただけるまでご支援させていただきます。</p>
              <p>技術大国日本を誇り続けるために、その一員であり続けるために、努力を惜しみません。</p>
              <p>今後ともお客様と一緒に歩んで参ります。引き続きのご支援とご愛顧のほど、どうぞよろしくお願い申し上げます。</p>
            </div>
            <div className="ceo-sign">
              <span className="ceo-sign-label">合同会社しゅし　代表取締役</span>
              <span className="ceo-sign-name">西尾 朱志</span>
            </div>
          </div>
          <div className="ceo-photo-wrap">
            <div className="ceo-photo-frame" data-comment-anchor="9bae2e2619-div-426-13">
              <img src="assets/ceo.jpg" alt="代表 西尾朱志" className="ceo-photo" />
            </div>
            <div className="ceo-caption">
              <div className="ceo-role">代表取締役 / Founder</div>
              <div className="ceo-name">西尾 朱志</div>
              <div className="ceo-name-en">Nishio Shushi</div>
            </div>
            <div className="ceo-deco-cloud"><HandDrawnCloud scale={0.6} /></div>
          </div>
        </div>
      </div>
    </section>

    <section className="section company-about">
      <div className="container company-grid">
        <div className="company-text">
          <div className="section-mark">
            <span className="mark-num">02</span>
            <span className="mark-label">わたしたちについて</span>
          </div>
          <h2 className="section-title">小さな、なんでも屋。</h2>
          <p>
            合同会社しゅしは、Webアプリ開発を中心としたエンジニアリングサービスを提供しています。
            「なんでもできるエンジニア」を標榜し、フロントエンドからバックエンド、インフラ、
            セキュリティ、AIの活用まで、Webアプリの実装に関わるあらゆる領域に対応しています。
          </p>
          <p>
            少人数だからこそ、文脈を一貫して持ち続けられること。
            AIツールを積極的に取り入れることで、少人数でも大きな成果を出せること。
            この2つを大切にしながら、お客様の事業に寄り添うパートナーでありたいと考えています。
          </p>

          <h3 className="sub-title">会社概要</h3>
          <table className="info-table">
            <tbody>
              <tr><th>会社名</th><td>インフラ構築・運用サービス</td></tr>
              <tr><th>所在地</th><td>〒103-0022<br />東京都中央区日本橋室町1丁目11番12号<br />日本橋水野ビル7階</td></tr>
              <tr><th>事業内容</th><td>Webアプリケーション開発<br />システム保守・運用・改善<br />セキュリティ対策・インフラ構築<br />顧問SEサービス</td></tr>
              <tr><th>連絡先</th><td>TEL: 090-6021-8006<br />Mail: contact@syushi.com</td></tr>
            </tbody>
          </table>
        </div>
        <div className="company-art">
          <div className="company-art-frame">
            <HandDrawnDesk scale={1} screenText="> hello" />
            <div className="company-cat"><HandDrawnCat scale={0.7} /></div>
            <div className="company-plant"><HandDrawnPlant scale={0.8} /></div>
          </div>
        </div>
      </div>
    </section>
  </>;
// ============ お問い合わせ ============
const ContactPage = () => {
  const [form, setForm] = React.useState({ name: "", company: "", email: "", subject: "Webアプリ開発について", body: "" });
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <>
      <section className="page-hero">
        <div className="container">
          <p className="eyebrow">— Contact</p>
          <h1 className="page-title">お問い合わせ</h1>
          <p className="page-lede">
            お電話・メール・フォームのいずれでもお受けしています。<br />
            内容を伺ったうえで、3営業日以内にご返信します。
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container contact-grid">
          <aside className="contact-direct">
            <h3 className="sub-title">直接のご連絡</h3>
            <div className="direct-block">
              <div className="direct-label">電話</div>
              <a className="direct-value" href="tel:090-6021-8006">090-6021-8006</a>
              <div className="direct-note">年中無休 夜間は気づかない場合がございます。</div>
            </div>
            <div className="direct-block">
              <div className="direct-label">メール</div>
              <a className="direct-value" href="mailto:contact@syushi.com">contact@syushi.com</a>
              <div className="direct-note">24時間受付</div>
            </div>
            <div className="direct-illust">
              <HandDrawnPlant scale={1.1} />
            </div>
          </aside>

          <div className="contact-form-wrap">
            <h3 className="sub-title">フォームからのご連絡</h3>
            {sent ?
            <div className="form-thanks">
                <p>送信ありがとうございました。</p>
                <p className="muted">3営業日以内にご返信します。</p>
                <button className="btn btn-ghost" onClick={() => setSent(false)}>もう一度送る</button>
              </div> :

            <form className="contact-form" onSubmit={(e) => {e.preventDefault();setSent(true);}}>
                <label className="field">
                  <span>お名前 <em>*</em></span>
                  <input required value={form.name} onChange={set("name")} placeholder="しゅし 太郎" />
                </label>
                <label className="field">
                  <span>会社名</span>
                  <input value={form.company} onChange={set("company")} placeholder="株式会社○○" />
                </label>
                <label className="field">
                  <span>メールアドレス <em>*</em></span>
                  <input type="email" required value={form.email} onChange={set("email")} placeholder="you@example.com" />
                </label>
                <label className="field">
                  <span>ご相談の種類</span>
                  <select value={form.subject} onChange={set("subject")}>
                    <option>Webアプリ開発について</option>
                    <option>顧問SEサービスについて</option>
                    <option>AIリファクタリングサービスについて</option>
                    <option>AI研修サービスについて</option>
                    <option>本番枠（Chrome拡張）について</option>
                    <option>セキュリティ対策について</option>
                    <option>インフラ構築について</option>
                    <option>その他</option>
                  </select>
                </label>
                <label className="field">
                  <span>ご相談内容 <em>*</em></span>
                  <textarea required rows="6" value={form.body} onChange={set("body")} placeholder="どんな小さなことでも、お気軽にどうぞ。" />
                </label>
                <button type="submit" className="btn btn-primary btn-large">送信する →</button>
              </form>
            }
          </div>
        </div>
      </section>
    </>);

};

// ============ フッター ============
const Footer = () =>
<footer className="site-footer">
    <div className="container footer-grid">
      <div className="footer-brand">
        <img src="assets/syushi-logo.png" alt="" className="footer-logo" />
        <div>
          <div className="brand-jp">合同会社しゅし</div>
          <div className="brand-en">Syushi LLC.</div>
        </div>
      </div>
      <div className="footer-cols footer-cols-4">
        <div className="footer-col">
          <h4>サービス</h4>
          <ul>
            <li><a href="#contact" onClick={(e) => {e.preventDefault();window.location.hash = 'contact';}} style={{ color: 'inherit' }}>Webアプリ開発</a></li>
            <li><a href="#koumon" onClick={(e) => {e.preventDefault();window.location.hash = 'koumon';}} style={{ color: 'inherit' }}>顧問SEサービス</a></li>
            <li><a href="recode.html" style={{ color: 'inherit' }}>AIリファクタリングサービス</a></li>
            <li><a href="#ai-training" onClick={(e) => {e.preventDefault();window.location.hash = 'ai-training';}} style={{ color: 'inherit' }}>AI研修サービス</a></li>
            <li><a href="#honbanwaku" onClick={(e) => {e.preventDefault();window.location.hash = 'honbanwaku';}} style={{ color: 'inherit' }}>本番枠（Chrome拡張）</a></li>
            <li><a href="#contact" onClick={(e) => {e.preventDefault();window.location.hash = 'contact';}} style={{ color: 'inherit' }}>セキュリティ・インフラ ほか</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>顧問SEサービス</h4>
          <ul>
            <li><a href="faq.html" style={{ color: 'inherit' }}>よくある質問</a></li>
            <li><a href="skills.html" style={{ color: 'inherit' }}>スキルシート</a></li>
            <li><a href="privacy-policy.html" style={{ color: 'inherit' }}>プライバシーポリシー</a></li>
            <li><a href="terms.html" style={{ color: 'inherit' }}>利用規約</a></li>
            <li><a href="tokusho.html" style={{ color: 'inherit' }}>特定商取引法に基づく表記</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>会社</h4>
          <ul>
            <li>会社案内</li>
            <li>お問い合わせ</li>
            <li><a href="blog.html" style={{ color: 'inherit' }}>ブログ</a></li>
            <li><a href="products.html" style={{ color: 'inherit' }}>提供ソフト</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>連絡先</h4>
          <ul>
            <li>東京都中央区日本橋室町1-11-12<br />日本橋水野ビル7階</li>
            <li>090-6021-8006</li>
            <li>contact@syushi.com</li>
          </ul>
        </div>
      </div>
    </div>
    <div className="footer-base">
      <div className="container">
        <span>© 2026 合同会社しゅし</span>
        <span className="footer-tag">Webアプリ、なんでも作ります。</span>
      </div>
    </div>
  </footer>;


// ============ 顧問SE 専用ページ ============
const KoumonPage = ({ setPage }) => {
  const issues = [
  { num: "01", title: "要件を詰めると予算がオーバーしてしまう", desc: "開発を進めるうちに追加要件が発生し、当初の見積もりを大幅に超えてしまうことはありませんか？" },
  { num: "02", title: "開発後も保守・運用までサポートしてほしい", desc: "開発後の運用・保守を別の会社に依頼すると、引き継ぎに時間がかかり、コストも増加します。" },
  { num: "03", title: "予算や環境に柔軟に対応してほしい", desc: "固定的な開発プロセスではなく、プロジェクトの状況に応じて柔軟に対応してほしい。" },
  { num: "04", title: "もっと早く、安く開発してほしい", desc: "オフショア開発やフリーランスへの外注でも、思ったほどコストが下がらない。" }];


  const concepts = [
  { num: "01", title: "サービスコンセプト", body: "開発パートナーとして、アジャイル開発をフルサポートする月額定額制のシステムエンジニアリングサービス。要件定義からリリースまでの開発工程を一貫して対応します。" },
  { num: "02", title: "主な特徴", body: "月額定額制により開発コストを最適化し、複数プロジェクトの同時進行が可能。年間契約で余った時間は翌年に繰り越せるので、無駄なくご利用いただけます。" },
  { num: "03", title: "対応範囲", body: "フルスタックエンジニアが、フロント（React / Next.js）、バック（PHP / Python）、インフラ（AWS / GCP / Azure）、AI開発まで幅広く対応します。" }];


  const features = [
  { mark: "a.", title: "月額定額制", body: "月額定額制を採用しており、一度開発が終わったアプリのサポートも行います。毎月の稼働時間は報告書でご確認いただけます。" },
  { mark: "b.", title: "一貫したサポート", body: "要件定義からリリースまで、一貫したサポート。開発の各フェーズでスムーズなコミュニケーションが実現します。" },
  { mark: "c.", title: "フルスタック対応", body: "フロント／バック／インフラ／AIまで対応するフルスタックエンジニアが、必要な技術を選んでプロジェクトを進めます。" }];


  const solves = [
  { ill: "desk", title: "モック・デモ版作成", body: "発注段階でのモックやデモ版の作成が可能です。視覚的にイメージを共有することで、認識のズレを防ぎます。" },
  { ill: "plant", title: "要件定義・詳細設計", body: "ヒアリングをもとに詳細設計を行います。ご希望に応じて機能の追加もご提案します。" },
  { ill: "tower", title: "開発からリリース", body: "開発、検証試験、リリースまで一貫対応。機能要件の追加にも柔軟に対応します。" }];


  const flow = [
  { step: "1", title: "開発料金見積もり", body: "顧問SEを使わない場合の見積もりを行います。" },
  { step: "2", title: "精査・洗い出し", body: "障害試験や機能追加など、運用で対応できることを精査します。" },
  { step: "3", title: "顧問SEで見積もり", body: "顧問SEでどのくらいになるのかご提示します。" },
  { step: "4", title: "ご提案", body: "お客様の予算も参考に、顧問SEでの工数をご提案させていただきます。" }];


  const support = [
  { step: "1", title: "ご依頼", body: "連絡ツール（Slack / ChatWork / LINE など）で担当へご連絡。お好きなツールを選択可能。" },
  { step: "2", title: "開発・サポート", body: "ご依頼内容を元にサポートを開始。この時点である程度の工数をお知らせします。" },
  { step: "3", title: "報告書送付", body: "月の作業内容・消費時間をメールおよび管理画面にてお知らせします。" }];


  const plans = [
  {
    name: "Starter",
    init: "20万円",
    price: "8万円",
    base: "240時間",
    opt: "120時間",
    total: "360時間",
    avg: "月平均 30時間",
    hours: "平日 9-18時",
    visit: "単価3,000円+交通費"
  },
  {
    name: "Professional",
    featured: true,
    init: "20万円",
    price: "20万円",
    priceNote: "15万円（3ヶ月間）",
    base: "840時間",
    opt: "120時間",
    total: "960時間",
    avg: "月平均 80時間",
    hours: "緊急時は24時間365日",
    visit: "単価2,000円+交通費"
  },
  {
    name: "Enterprise",
    init: "要相談",
    price: "60万円",
    base: "3000時間",
    opt: "240時間",
    total: "3120時間",
    avg: "月平均 260時間",
    hours: "24時間365日",
    visit: "無料"
  }];


  const options = [
  { no: "01", title: "運用・保守", body: "基本開発で行ったアプリケーションの運用・保守を行います。" },
  { no: "02", title: "メールサポート", body: "アカウント追加の代行、迷惑メール登録、送信できない事象などにも対処します。" },
  { no: "03", title: "ライセンス管理", body: "複雑なソフトウェアライセンスの一元管理、更新時期の把握、コスト最適化を支援します。" },
  { no: "04", title: "ファイル整理", body: "プロジェクトファイルの命名規則策定、フォルダ構造の最適化、アセット管理の導入支援。" },
  { no: "05", title: "データバックアップ", body: "大容量データに対応したバックアップ戦略の策定と実装を支援します。" },
  { no: "06", title: "セキュリティ対策", body: "アクセス制御・ポリシー策定・脆弱性診断まで、包括的なセキュリティ対策を実施します。" },
  { no: "07", title: "PC選定・購入", body: "現在の課題に合わせて新しいPCや関連機器を選定し、購入支援を行います。" },
  { no: "08", title: "その他", body: "IT関連業務全般（要相談）。お気軽にご相談ください。" }];


  return (
    <>
      {/* HERO */}
      <section className="page-hero koumon-hero">
        <div className="container koumon-hero-grid">
          <div>
            <p className="eyebrow">— 顧問SE / Monthly Engineering Partner</p>
            <h1 className="page-title">
              時間内で<br />
              <span className="accent-underline">アプリ作り放題</span>です。
            </h1>
            <p className="page-lede">
              月8万円～の月額定額制。フルスタックエンジニアがなんでも対応。<br />
              要件定義からリリースまで一貫サポートします。運用もサポート
            </p>
            <div className="hero-cta">
              <a className="btn btn-primary" href="#koumon-price">
                料金プランを見る
                <span className="btn-arrow">→</span>
              </a>
              <button className="btn btn-ghost" onClick={() => setPage("contact")}>
                相談してみる
              </button>
            </div>
          </div>
          <div className="koumon-hero-art">
            <HandDrawnDesk scale={1} screenText="> consult" />
            <div className="koumon-hero-cloud"><HandDrawnCloud scale={0.8} /></div>
            <div className="koumon-hero-cat"><HandDrawnCat scale={0.7} /></div>
          </div>
        </div>
      </section>

      {/* 課題 */}
      <section className="section koumon-issues">
        <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="issue-grid">
            {issues.map((it, i) =>
            <article key={i} className="issue-card">
                <div className="issue-num">{it.num}</div>
                <h3>{it.title}</h3>
                <p>{it.desc}</p>
              </article>
            )}
          </div>
          <div className="issues-arrow">
            <span>↓</span>
            <p>顧問SEが、すべて解決します。</p>
          </div>
        </div>
      </section>

      {/* コンセプト */}
      <section className="section koumon-concept">
        <div className="container">
          <div className="section-mark">
            <span className="mark-num">02</span>
            <span className="mark-label">サービスコンセプト</span>
          </div>
          <div className="concept-grid">
            {concepts.map((c, i) =>
            <div key={i} className="concept-block">
                <div className="concept-num">{c.num}</div>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* 解決できること */}
      <section className="section koumon-solves">
        <div className="container">
          <div className="section-mark">
            <span className="mark-num">03</span>
            <span className="mark-label">顧問SEで解決できること</span>
          </div>
          <div className="solve-grid">
            {solves.map((s, i) =>
            <article key={i} className="solve-card">
                <div className="solve-ill">
                  {s.ill === "desk" && <HandDrawnDesk scale={0.5} />}
                  {s.ill === "plant" && <HandDrawnPlant scale={0.7} />}
                  {s.ill === "tower" && <HandDrawnTower scale={0.5} />}
                </div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </article>
            )}
          </div>
        </div>
      </section>

      {/* 開発工程フロー */}
      <section className="section koumon-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>
          <div className="flow-row">
            {flow.map((f, i) =>
            <React.Fragment key={i}>
                <div className="flow-step">
                  <div className="flow-step-num">{f.step}</div>
                  <h4>{f.title}</h4>
                  <p>{f.body}</p>
                </div>
                {i < flow.length - 1 && <div className="flow-arrow" aria-hidden="true">→</div>}
              </React.Fragment>
            )}
          </div>
          <div className="flow-point">
            <span className="point-label">Point</span>
            <p>顧問SEは定額の契約です。運用しながら機能追加を行うこともできます。運用時点での対応も見越した詳細設計や開発が可能になり、お安く対応できます。</p>
          </div>
        </div>
      </section>

      {/* サポートの流れ */}
      <section className="section koumon-support">
        <div className="container">
          <div className="section-mark">
            <span className="mark-num">05</span>
            <span className="mark-label">サポートの流れ</span>
          </div>
          <div className="support-grid">
            {support.map((s, i) =>
            <div key={i} className="support-step">
                <div className="support-step-num">{s.step}</div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            )}
          </div>
          <div className="hours-card">
            <div className="hours-head">
              <h3>基本開発時間とオプション</h3>
              <span className="hours-sub">Professionalプランの場合の例</span>
            </div>
            <div className="hours-body">
              <div className="hours-block">
                <div className="hours-label">基本</div>
                <div className="hours-value">840<span>時間/年</span></div>
                <div className="hours-note">モック・要件定義・詳細設計・インフラ構築・開発・テスト・リリース</div>
              </div>
              <div className="hours-plus">＋</div>
              <div className="hours-block alt">
                <div className="hours-label">オプション</div>
                <div className="hours-value">120<span>時間/年</span></div>
                <div className="hours-note">運用・保守、当社が提供するIT関連サービス</div>
              </div>
            </div>
            <div className="flow-point">
              <span className="point-label">Point</span>
              <p>開発と運用で時間の計算を分けているため、開発しすぎて運用ができないということがありません。</p>
            </div>
          </div>
        </div>
      </section>

      {/* 料金プラン */}
      <section className="section koumon-price" id="koumon-price">
        <div className="container">
          <div className="section-mark">
            <span className="mark-num">06</span>
            <span className="mark-label">料金プラン</span>
          </div>
          <h2 className="section-title centered">3つのプランから、お選びいただけます。</h2>
          <div className="plan-grid">
            {plans.map((p, i) =>
            <article key={i} className={`plan-card ${p.featured ? "is-featured" : ""}`}>
                {p.featured && <div className="plan-ribbon">おすすめ</div>}
                <h3 className="plan-name">{p.name}</h3>
                <div className="plan-price">
                  <span className="plan-price-num">{p.price}</span>
                  <span className="plan-price-unit">/月</span>
                </div>
                {p.priceNote && <div className="plan-price-note">{p.priceNote}</div>}
                <dl className="plan-meta">
                  <div><dt>初期費用</dt><dd>{p.init}</dd></div>
                  <div><dt>基本対応時間</dt><dd>{p.base}/年</dd></div>
                  <div><dt>オプション</dt><dd>{p.opt}/年</dd></div>
                  <div className="plan-total"><dt>合計</dt><dd><strong>{p.total}</strong><span className="plan-avg">{p.avg}</span></dd></div>
                  <div><dt>対応時間</dt><dd>{p.hours}</dd></div>
                  <div><dt>現地対応</dt><dd>{p.visit}</dd></div>
                </dl>
                <button className={`btn ${p.featured ? "btn-primary" : "btn-ghost"} btn-block`} onClick={() => setPage("contact")}>
                  このプランで相談する
                </button>
              </article>
            )}
          </div>
          <ul className="plan-notes">
            <li>※1ヶ月に消費できる時間には限りがあります。</li>
            <li>※1年間で消費できなかった分は翌年に繰り越せます（2年以上の繰り越し不可）。</li>
            <li>※試用期間もご用意しております。お気軽にお問い合わせください。</li>
            <li>※記載の値段は変動する可能性があります。最新情報はお問い合わせください。</li>
          </ul>
        </div>
      </section>

      {/* オプション一覧 */}
      <section className="section koumon-options">
        <div className="container">
          <div className="section-mark">
            <span className="mark-num">07</span>
            <span className="mark-label">オプション対応項目</span>
          </div>
          <div className="option-grid">
            {options.map((o, i) =>
            <article key={i} className="option-card">
                <div className="option-no">No. {o.no}</div>
                <h3>{o.title}</h3>
                <p>{o.body}</p>
              </article>
            )}
          </div>
          <p className="option-foot">※運用・保守以外の項目はご要望後にサポートを開始します。サポート内容によっては準備期間が必要になります。</p>
        </div>
      </section>

      {/* 技術スタック概要 */}
      <section className="section koumon-skills">
        <div className="container">
          <div className="section-mark">
            <span className="mark-num">08</span>
            <span className="mark-label">対応技術スタック</span>
          </div>
          <h2 className="section-title centered">フロント・バック・インフラ・AI まで。</h2>
          <p className="section-lede" style={{ textAlign: "center", maxWidth: 680, margin: "0 auto" }}>
            プロジェクトの要件に応じて最適な技術選定をご提案します。<br />
            ここに記載のない技術もお気軽にご相談ください。
          </p>
          <div className="skills-summary" data-comment-anchor="0eb1027dc3-div-957-11">
            <div className="skills-cat">
              <h3 className="skills-cat-head">プログラミング言語</h3>
              <ul><li>JavaScript</li><li>TypeScript</li><li>PHP</li><li>Python</li><li>Go</li><li>Java</li></ul>
            </div>
            <div className="skills-cat">
              <h3 className="skills-cat-head">フロントエンド</h3>
              <ul><li>React</li><li>Next.js</li><li>Vue</li><li>Nuxt</li><li>HTML/CSS</li></ul>
            </div>
            <div className="skills-cat">
              <h3 className="skills-cat-head">バックエンド</h3>
              <ul><li>Node.js</li><li>Laravel</li><li>FastAPI</li><li>Django</li><li>Express</li></ul>
            </div>
            <div className="skills-cat">
              <h3 className="skills-cat-head">データベース</h3>
              <ul><li>MySQL</li><li>PostgreSQL</li><li>MongoDB</li><li>Redis</li><li>DynamoDB</li></ul>
            </div>
            <div className="skills-cat">
              <h3 className="skills-cat-head">インフラ</h3>
              <ul><li>AWS</li><li>GCP</li><li>Azure</li><li>Docker</li><li>Kubernetes</li><li>Terraform</li></ul>
            </div>
            <div className="skills-cat">
              <h3 className="skills-cat-head">AI / データ</h3>
              <ul><li>OpenAI</li><li>Claude</li><li>LangChain</li><li>RAG</li><li>機械学習</li></ul>
            </div>
            <div className="skills-cat">
              <h3 className="skills-cat-head">セキュリティ</h3>
              <ul><li>WAF</li><li>脆弱性診断</li><li>OWASP</li><li>OAuth</li><li>SAML</li></ul>
            </div>
            <div className="skills-cat">
              <h3 className="skills-cat-head">開発手法</h3>
              <ul><li>アジャイル</li><li>スクラム</li><li>CI/CD</li><li>DevOps</li><li>TDD</li></ul>
            </div>
          </div>
          <div className="skills-cta">
            <a className="btn btn-ghost" href="skills.html">スキル検索 / 詳細を見る →</a>
          </div>
        </div>
      </section>

      {/* 注意事項 */}
      <section className="section koumon-notice">
        <div className="container">
          <div className="section-mark">
            <span className="mark-num">09</span>
            <span className="mark-label">ご利用にあたって</span>
          </div>
          <ul className="notice-list">
            <li>サービスの特性上、チーム会議や定例会議への参加をお約束することはできません。</li>
            <li>契約は1年更新です。</li>
            <li>1年以内の解約は、消費時間によっては返金対応ができない場合があります。</li>
            <li>本資料に記載の月平均運用時間はあくまで参考値です。</li>
            <li>消費できなかった時間は翌年に繰り越せますが、2年以上の繰り越しはできません。</li>
            <li>消費できなかった分の返金はできません。</li>
            <li>サービス内容は変更される場合があります。</li>
            <li>本サービスはアプリケーションの動作・セキュリティを完全に保証するものではありません。</li>
            <li>常駐型のプロジェクトや、開発の部分的な参画は対応できない場合があります。</li>
          </ul>
        </div>
      </section>

      {/* CTA */}
      <section className="section cta-section">
        <div className="container">
          <div className="cta-card">
            <div className="cta-art">
              <HandDrawnPlant scale={1} />
            </div>
            <div className="cta-copy">
              <h2>まずはお気軽にご相談ください。</h2>
              <p>顧問SEサービスについて、プロジェクトの要件に応じて<br />最適なソリューションをご提案いたします。</p>
              <div className="cta-actions">
                <button className="btn btn-primary" onClick={() => setPage("contact")}>
                  お問い合わせフォームへ
                </button>
                <a className="btn btn-ghost" href="faq.html">
                  よくある質問
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>);

};

Object.assign(window, { Header, HomePage, ServicePage, KoumonPage, CompanyPage, ContactPage, Footer });