// top.jsx — トップページ

function TopHero({ navigate }) {
  return (
    <section className="hero">
      <div className="hero__inner">
        <div className="hero__layout">
          <div>
            <span className="hero__tag">
              <span className="hero__tag-pill">NEW</span>
              主力プラン「AI業務再設計パッケージ（月60万円〜）」始まりました
            </span>
            <h1 className="hero__title">
              AI研修で終わらせず、<br />
              社内で<span className="accent">業務改善が進む状態</span>を作る。
            </h1>
            <p className="hero__sub">
              Claude Code、Cortex、Google Workspace、Obsidianを活用し、社内AI推進者の育成、業務改善テーマの整理、AI活用フローの設計を伴走支援。必要に応じて、AIエンジニアによる業務アプリ開発まで対応します。
            </p>
            <div className="hero__note">
              <span className="dot"></span>
              まずは月15万円から、AI活用の相談役を社外に置きませんか。
            </div>
            <div className="hero__ctas">
              <a className="btn btn--primary btn--lg" href="#final-cta" onClick={(e) => { e.preventDefault(); document.getElementById("final-cta")?.scrollIntoView({ behavior: "smooth" }); }}>
                無料相談を申し込む <ArrowRight />
              </a>
              <a className="btn btn--ghost btn--lg" href="#service" onClick={(e) => { e.preventDefault(); document.getElementById("service")?.scrollIntoView({ behavior: "smooth" }); }}>
                AI業務再設計パッケージを見る
              </a>
            </div>
            <div className="hero__chips">
              <div className="hero__chip">
                <span className="hero__chip-label">Entry · 6h / 月</span>
                <span className="hero__chip-value">AI顧問ライト <strong>¥150,000〜</strong></span>
              </div>
              <div className="hero__chip">
                <span className="hero__chip-label">Starter · 12h / 月</span>
                <span className="hero__chip-value">業務AI化スターター <strong>¥300,000〜</strong></span>
              </div>
              <div className="hero__chip">
                <span className="hero__chip-label">Core · 20h / 月</span>
                <span className="hero__chip-value">AI業務再設計パッケージ <strong>¥600,000〜</strong></span>
              </div>
              <div className="hero__chip">
                <span className="hero__chip-label">Pro · 32h / 月</span>
                <span className="hero__chip-value">AI推進責任者代行 <strong>¥1,200,000〜</strong></span>
              </div>
              <div className="hero__chip" style={{ gridColumn: "span 2" }}>
                <span className="hero__chip-label">Tools</span>
                <span className="hero__chip-value">Claude Code / Cortex / Google Workspace / Obsidian</span>
              </div>
            </div>
          </div>
          <aside className="hero__visual hero__visual--mocks">
            <div className="hero__mock-main">
              <MockDashboard />
            </div>
            <div className="hero__mock-sub">
              <MockChat />
            </div>
            <div className="hero__photo-stat" style={{ top: "auto", bottom: "8%", left: "auto", right: "-12px", zIndex: 4 }}>
              <span className="icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 4v16M4 12h16" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2"/></svg>
              </span>
              <div>
                <strong>主力 ¥600,000 〜</strong>
                <span>AI業務再設計パッケージ / 月 3h</span>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function ProblemSection() {
  const items = [
    "AIを導入したが、社員が日常業務で使い続けていない",
    "AI研修を受けたが、現場の業務改善につながっていない",
    "どの業務をAI化すべきかわからない",
    "社内にAI推進担当者がいない",
    "Google Workspaceや社内資料に情報はあるが、活用できていない",
    "業務改善のアイデアはあるが、実行する人がいない",
    "開発会社に相談したいが、要件が固まっていない",
    "いきなり高額なAIシステム開発に進むのは不安"
  ];
  return (
    <section className="section" id="problems">
      <div className="container">
        <div style={{ maxWidth: 760 }}>
          <div className="eyebrow">Problem</div>
          <h2 className="section-title">AIを導入したい。<br />でも、社内で進められる人がいない。</h2>
          <p className="section-lede">多くの企業が「ツールを入れる」ことには成功していますが、業務改善まで進めるには別のスキルセットが必要です。次のような状況に心当たりはありませんか。</p>
        </div>
        <div className="problem-grid">
          {items.map((t, i) => (
            <div key={i} className="problem-item">
              <span className="problem-item__icon">!</span>
              <span>{t}</span>
            </div>
          ))}
        </div>
        <div className="problem-conclusion">
          <span className="problem-conclusion__bar"></span>
          <div>
            問題は、<strong>AIツールが足りないこと</strong>ではありません。<br />
            AIを業務に落とし込み、<strong>社内で改善を進める人材と仕組み</strong>がないことです。
          </div>
        </div>
      </div>
    </section>
  );
}

function RiskSection() {
  const risks = [
    {
      label: "Risk 01",
      title: "AIを入れただけで終わる",
      body: "全社員に研修を受けさせても、現場業務に落とし込む人がいなければ、3か月で利用率は10%以下に戻ります。"
    },
    {
      label: "Risk 02",
      title: "高額開発に進んで失敗する",
      body: "業務要件が曖昧なまま開発に進むと、完成した頃には現場が使わないツールが残り、投資が回収できません。"
    },
    {
      label: "Risk 03",
      title: "属人化したAI活用",
      body: "一部の社員だけがAIを使いこなし、業務知識が個人に閉じる状態が固定化。退職とともにAI活用ノウハウも失われます。"
    },
    {
      label: "Risk 04",
      title: "競合との差が開く",
      body: "業務改善ではなく業務改革のスピードで他社が先行。同じ人数で2倍の提案・対応をこなす企業との差は、年単位で取り戻せなくなります。"
    }
  ];
  return (
    <section className="section section--soft" id="risks">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Risk of Inaction</div>
          <h2 className="section-title">放置すると起きる、4つのリスク</h2>
          <p className="section-lede">AI導入の遅れではなく、AI導入の「やりっぱなし」が、より大きな機会損失を生みます。</p>
        </div>
        <div className="risk-grid">
          {risks.map((r, i) => (
            <div key={i} className="risk-card">
              <div className="risk-card__label">{r.label}</div>
              <h3 className="risk-card__title">{r.title}</h3>
              <p className="risk-card__body">{r.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SolutionSection() {
  return (
    <section className="section" id="solution">
      <div className="container">
        <div style={{ maxWidth: 760 }}>
          <div className="eyebrow">Solution</div>
          <h2 className="section-title">私たちは、ツールではなく<br />「進める人」と「仕組み」を残します</h2>
          <p className="section-lede">AI研修で終わらせず、実際の業務改善まで伴走する3つのアプローチで、内製化を支援します。</p>
        </div>
        <div className="solution-grid">
          <div className="solution-card">
            <div className="solution-card__icon">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
                <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.6" />
              </svg>
            </div>
            <h3>社内AI推進者を育成</h3>
            <p>現場業務を理解している非エンジニアの担当者を、AIで業務改善を進められるAI推進者として育成。会社にAI活用のスキルが残ります。</p>
          </div>
          <div className="solution-card solution-card--green">
            <div className="solution-card__icon">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                <rect x="3" y="4" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.6" />
                <path d="M7 9h6M7 13h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
              </svg>
            </div>
            <h3>1〜2業務に絞って小さく試す</h3>
            <p>全業務を一気に変えるのではなく、まずは1〜2業務に絞って具体的に業務改善。成功体験を作ってから次の業務へ展開します。</p>
          </div>
          <div className="solution-card solution-card--purple">
            <div className="solution-card__icon">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                <path d="M4 7l8 4 8-4M4 7l8-4 8 4M4 7v10l8 4M20 7v10l-8 4M12 11v10" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
              </svg>
            </div>
            <h3>必要なら、開発まで対応</h3>
            <p>業務要件が固まり、AIで定型化できる業務が見えたら、AI業務アプリ開発まで対応。要件整理から開発まで一気通貫で支援します。</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceOverview() {
  const steps = [
    { tag: "Step 01", title: "無料相談", price: "無料", priceSmall: "約 30分", body: "現状確認・課題整理", entry: false },
    { tag: "Step 02", title: "AI顧問ライト", price: "月 15万円〜", priceSmall: "6時間 / 月", body: "月2回MTG、AI利活用相談、簡易プロンプト", entry: false },
    { tag: "Step 03", title: "業務AI化スターター", price: "月 30万円〜", priceSmall: "12時間 / 月", body: "1業務の棚卸し、簡易自動化、推進者研修", entry: false },
    { tag: "Step 04", title: "AI業務再設計パッケージ", price: "月 60万円〜", priceSmall: "20時間 / 月", body: "業務設計・試作・導入・KPI測定", entry: true },
    { tag: "Step 05", title: "AI推進責任者代行", price: "月 120万円〜", priceSmall: "32時間 / 月", body: "複数業務・複数部署のAI推進をチーム代行", entry: false },
    { tag: "Step 06", title: "AI業務アプリ開発", price: "別見積もり", priceSmall: "案件別", body: "業務アプリ・AIツール開発", entry: false }
  ];
  return (
    <section className="section section--soft" id="service">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Service Overview</div>
          <h2 className="section-title">6ステップで、無理なくAI内製化</h2>
          <p className="section-lede">最初から大きな投資は不要です。月15万円のAI顧問ライトを入口に、必要なステップだけ進めます。中核はAI業務再設計パッケージ（月20時間／60万円〜）です。</p>
        </div>
        <div className="flow flow--six">
          {steps.map((s, i) => (
            <div key={i} className={`flow__step ${s.entry ? "is-entry" : ""}`}>
              <div className="flow__step-tag">{s.tag}</div>
              <div className="flow__step-title">{s.title}</div>
              <div className="flow__step-price">{s.price}<small>{s.priceSmall || ""}</small></div>
              <div className="flow__step-body">{s.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductBlocks() {
  return (
    <section className="section" id="products">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 24 }}>
          <div className="eyebrow">Products</div>
          <h2 className="section-title">4つの月額プランと、開発オプション</h2>
          <p className="section-lede">月額×月間稼働時間で支援範囲が決まる、わかりやすい料金設計。主力は AI業務再設計パッケージ（月20時間 / 60万円〜）。「いきなり主力から」も、「まず顧問ライトで方向性整理から」もOKです。</p>
        </div>

        {/* AI顧問ライト */}
        <div className="product">
          <div className="product__intro">
            <span className="product__tag">Entry · 月 6時間</span>
            <h3 className="product__title">AI顧問ライト</h3>
            <div className="product__price">¥150,000<small>/ 月（税別）</small></div>
            <p className="product__desc">
              月 2回のオンラインMTGと、Slack / Googleチャット / Chatwork / LINE WORKSでの日常的な相談を通じて、AI活用の方向性整理と簡易プロンプト提供を行う入口プラン。「いきなり大きく始めたくない」「まず方向性だけ整理したい」企業向けです。
            </p>
            <a className="btn btn--ghost" href="#final-cta" onClick={(e) => { e.preventDefault(); document.getElementById("final-cta")?.scrollIntoView({ behavior: "smooth" }); }}>このプランで相談する <ArrowRight /></a>
          </div>
          <ul className="product__list">
            <li><span className="check"><Check /></span>月 2回 × 60分のオンラインMTG（議題は事前共有）</li>
            <li><span className="check"><Check /></span>Slack / Googleチャット / Chatwork / LINE WORKSでの日常的な相談（営業日対応）</li>
            <li><span className="check"><Check /></span>AI活用テーマの優先順位整理・現状の業務棚卸しアドバイス</li>
            <li><span className="check"><Check /></span>業務に合うAI利活用パターンの提案（簡易プロンプト含む）</li>
            <li><span className="check"><Check /></span>Google Workspace / Obsidianを使った情報整理アドバイス</li>
            <li><span className="check"><Check /></span>上位プランへの移行判断サポート</li>
          </ul>
        </div>

        {/* 業務AI化スターター */}
        <div className="product">
          <div className="product__intro">
            <span className="product__tag">Starter · 月 12時間</span>
            <h3 className="product__title">業務AI化スターター</h3>
            <div className="product__price">¥300,000<small>/ 月（税別）</small></div>
            <p className="product__desc">
              一番効果の見える 1業務 に絞って、棚卸し → 簡易自動化 → 推進者研修まで進めるスタート位置づけのプラン。「小さく確実に成功体験を作ってから次に進みたい」企業向けです。
            </p>
            <a className="btn btn--ghost" href="#final-cta" onClick={(e) => { e.preventDefault(); document.getElementById("final-cta")?.scrollIntoView({ behavior: "smooth" }); }}>このプランで相談する <ArrowRight /></a>
          </div>
          <ul className="product__list">
            <li><span className="check"><Check /></span>1業務の現状フロー棚卸し（インタビュー＋業務観察）</li>
            <li><span className="check"><Check /></span>AI活用ポイント特定・簡易自動化の試作</li>
            <li><span className="check"><Check /></span>推進者向けハンズオン研修（月 2回）</li>
            <li><span className="check"><Check /></span>業務マニュアル・プロンプト集の整備（Obsidian）</li>
            <li><span className="check"><Check /></span>Slack / Googleチャット / Chatwork / LINE WORKSでの日常伴走</li>
            <li><span className="check"><Check /></span>AI業務再設計パッケージへの移行判断サポート</li>
          </ul>
        </div>

        {/* AI業務再設計パッケージ — MAIN */}
        <div className="product product--featured">
          <div className="product__intro">
            <span className="product__tag product__tag--featured">★ Core · 月 20時間 · 主力プラン</span>
            <h3 className="product__title">AI業務再設計パッケージ</h3>
            <div className="product__price">¥600,000<small>/ 月（税別）</small></div>
            <p className="product__desc">
              業務を「AIを前提に再設計」する主力プラン。業務設計 → 試作 → 導入 → KPI測定までの全工程を伴走し、成果を数値で追える状態を作ります。AI推進担当者を中心とした実装フェーズに最適です。
            </p>
            <a className="btn btn--primary" href="#final-cta" onClick={(e) => { e.preventDefault(); document.getElementById("final-cta")?.scrollIntoView({ behavior: "smooth" }); }}>このプランで相談する <ArrowRight /></a>
          </div>
          <ul className="product__list">
            <li><span className="check"><Check /></span>業務フロー再設計（As-Is / To-Be 整理、責任分担の再定義）</li>
            <li><span className="check"><Check /></span>AIプロトタイプ試作（Claude Code活用 / 月 2〜3本）</li>
            <li><span className="check"><Check /></span>段階的な現場導入と、運用ルールの整備</li>
            <li><span className="check"><Check /></span>KPI 設計と測定（削減時間・件数・品質・手戻り）</li>
            <li><span className="check"><Check /></span>週次 1on1 ＋ 月次 経営報告会の運営支援</li>
            <li><span className="check"><Check /></span>Cortex / Obsidianによる社内ナレッジ蓄積</li>
            <li><span className="check"><Check /></span>AI業務アプリ開発への発展判断（要件定義書作成含む）</li>
          </ul>
        </div>

        {/* AI推進責任者代行 */}
        <div className="product">
          <div className="product__intro">
            <span className="product__tag">Pro · 月 32時間</span>
            <h3 className="product__title">AI推進責任者代行</h3>
            <div className="product__price">¥1,200,000<small>/ 月（税別）</small></div>
            <p className="product__desc">
              複数業務・複数部署にまたがるAI推進を、社外AI推進責任者としてチームで代行するプラン。専任の社内責任者を立てるのが難しい中堅企業の、CDO / CAIO代行として機能します。
            </p>
            <a className="btn btn--ghost" href="#final-cta" onClick={(e) => { e.preventDefault(); document.getElementById("final-cta")?.scrollIntoView({ behavior: "smooth" }); }}>このプランで相談する <ArrowRight /></a>
          </div>
          <ul className="product__list">
            <li><span className="check"><Check /></span>複数業務（3〜5テーマ）の同時並行推進</li>
            <li><span className="check"><Check /></span>複数部署（営業 / 制作 / バックオフィス等）への横展開</li>
            <li><span className="check"><Check /></span>社内AI推進者の育成と、月次レビュー体制構築</li>
            <li><span className="check"><Check /></span>経営会議向けAI推進ロードマップの策定・更新</li>
            <li><span className="check"><Check /></span>AI関連ガバナンス（情報統制・利用ルール）の整備</li>
            <li><span className="check"><Check /></span>外部AI開発ベンダーとの折衝・進捗管理（CTO代行的役割）</li>
          </ul>
        </div>

        {/* 開発 */}
        <div className="product">
          <div className="product__intro">
            <span className="product__tag">Optional · 別途見積もり</span>
            <h3 className="product__title">AI業務アプリ開発</h3>
            <div className="product__price">要件定義の上、見積もり</div>
            <p className="product__desc">
              業務要件が整理されたあと、定型化できる業務をAI業務アプリとして開発します。要件が曖昧なまま開発に進まないことが、投資回収の最大の鍵です。AI業務再設計パッケージで整理した要件をベースにすると、開発の失敗確率を大きく下げられます。
            </p>
            <a className="btn btn--ghost" href="#final-cta" onClick={(e) => { e.preventDefault(); document.getElementById("final-cta")?.scrollIntoView({ behavior: "smooth" }); }}>開発相談をする <ArrowRight /></a>
          </div>
          <ul className="product__list">
            <li><span className="check"><Check /></span>業務要件定義書の作成（再設計パッケージ実績の活用）</li>
            <li><span className="check"><Check /></span>Claude Codeによる業務アプリ・社内ツールの開発</li>
            <li><span className="check"><Check /></span>Google Workspace（Drive / Sheets / Gmail等）連携設計</li>
            <li><span className="check"><Check /></span>Cortexと連携した社内ナレッジ検索AIの実装</li>
            <li><span className="check"><Check /></span>運用開始後の改善対応（責任者代行プラン内で対応可）</li>
          </ul>
        </div>
      </div>
    </section>
  );
}

function IndustryLinks({ navigate }) {
  const top10 = [
    "beauty_clinic", "realestate_investment", "recruitment", "salesrep",
    "saas_partner", "is_company", "sales_outsourcing", "accounting",
    "seo", "ad_ops"
  ];
  return (
    <section className="section section--soft" id="industries">
      <div className="container">
        <div style={{ maxWidth: 760 }}>
          <div className="eyebrow">Industries</div>
          <h2 className="section-title">自社に近い業種のAI導入モデルを見る</h2>
          <p className="section-lede">
            AI導入は、業種によって最初に取り組むべき業務が異なります。問い合わせ対応、資料作成、記録、営業フォロー、社内ナレッジ整理など、自社に近い業種の事例とロードマップから、無理のない導入ステップを確認できます。
          </p>
        </div>
        <div className="industry-card-grid">
          {top10.map(id => {
            const data = INDUSTRY_DATA[id];
            if (!data) return null;
            const firstPlan = ALL_PLANS[data.firstPlan];
            return (
              <div key={id} className="ind-card ind-card--available" onClick={() => navigate(id)} role="button" tabIndex={0}>
                <div className="ind-card__head">
                  <span className="ind-card__label">{data.label}</span>
                  <span className="ind-card__badge">事例 + ロードマップ</span>
                </div>
                <div className="ind-card__issue">
                  <span className="ind-card__issue-label">深い業界課題</span>
                  <p>{data.issueShort}</p>
                </div>
                <div className="ind-card__issue">
                  <span className="ind-card__issue-label">AIで改善しやすい業務</span>
                  <p>{data.aiHighlights}</p>
                </div>
                <div className="ind-card__plans">
                  <div className="ind-card__plan-first">
                    <span className="ind-card__plan-label">最初におすすめ</span>
                    <strong>{firstPlan.name}</strong>
                    <small>{firstPlan.hours} · {firstPlan.price}</small>
                  </div>
                  <div className="ind-card__plan-next">
                    <span className="ind-card__plan-label">次に進むプラン</span>
                    <span>{data.nextPlans.map(p => ALL_PLANS[p].name).join(" → ")}</span>
                  </div>
                </div>
                <div className="ind-card__more">導入ロードマップを見る <ArrowRight size={12} /></div>
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: 32, textAlign: "center" }}>
          <a className="btn btn--dark btn--lg" href="#" onClick={(e) => { e.preventDefault(); navigate("industries"); }}>
            すべての業種を見る <ArrowRight />
          </a>
        </div>
      </div>
    </section>
  );
}

function TopPage({ navigate }) {
  return (
    <div className="page-fade">
      <TopHero navigate={navigate} />
      <StatsSection />
      <PersonaSection />
      <ProblemSection />
      <CompareSection />
      <RiskSection />
      <SolutionSection />
      <ServiceOverview />
      <ProductBlocks />
      <WorkflowSection />
      <BannerQuote />
      <ToolsSection />
      <ConsultantSection />
      <IndustryLinks navigate={navigate} />
      <ProcessSection />
      <CTABanner />
      <Pricing />
      <FAQ />
      <FinalCTA />
    </div>
  );
}

window.TopPage = TopPage;
