// industries.jsx — 業種別AI導入事例・ロードマップ（旧 LP を完全置換）

// ============================================================
// 業界構造・深いペイン
// ============================================================
function DeepPain({ data }) {
  if (!data.deepPain) return null;
  return (
    <section className="section section--soft" id="deep-pain">
      <div className="container container--narrow">
        <div className="deep-pain">
          <div className="eyebrow">Industry Structure</div>
          <h2 className="section-title">{data.deepPain.title}</h2>
          <div className="deep-pain__body">
            {data.deepPain.body.split("\n\n").map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ロードマップ ステップカード
// ============================================================
function Roadmap({ data }) {
  const planSequence = [data.firstPlan, ...data.nextPlans].slice(0, 4);
  // Always start with 無料相談 + planSequence
  const steps = [
    {
      tag: "Step 0",
      period: "0か月目",
      title: "無料相談",
      desc: "現状の業務課題、AI活用の目的、社内体制をヒアリング。約30分のオンラインMTGです。",
      price: "無料",
      hours: "30分"
    },
    ...planSequence.map((p, i) => {
      const plan = ALL_PLANS[p];
      const stepDescs = {
        light: { period: `${i + 1}か月目`, purpose: "現状整理・AI活用テーマの洗い出し", body: "月2回MTG、AI利活用相談、簡易プロンプト作成" },
        starter: { period: `${i + 1}〜${i + 2}か月目`, purpose: "1業務を選び、棚卸しと簡易自動化", body: "業務フロー整理、推進者ハンズオン研修、簡易プロンプト・テンプレート作成" },
        redesign: { period: `${i + 1}〜${i + 3}か月目`, purpose: "業務設計・試作・導入・KPI測定", body: "業務再設計、Claude Codeでの試作、Google Workspace連携、KPI測定運用" },
        pro: { period: `${i + 2}か月目以降`, purpose: "複数業務・複数部署へ横展開", body: "複数業務の同時推進、社内AIルール整備、推進者育成、月次経営報告" }
      };
      const sd = stepDescs[p];
      return {
        tag: `Step ${i + 1}`,
        period: sd.period,
        title: plan.name,
        purpose: sd.purpose,
        desc: sd.body,
        price: plan.price,
        hours: plan.hours,
        featured: plan.featured
      };
    })
  ];

  return (
    <section className="section section--soft" id="roadmap">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Roadmap</div>
          <h2 className="section-title">{data.label}向け AI導入ロードマップ</h2>
          <p className="section-lede">無料相談から始めて、必要なフェーズだけ進めます。一度に全プランを契約する必要はありません。</p>
        </div>
        <div className="roadmap">
          {steps.map((s, i) => (
            <div key={i} className={`roadmap__step ${s.featured ? "is-featured" : ""}`}>
              <div className="roadmap__step-rail">
                <div className="roadmap__step-dot">{s.tag.replace("Step ", "")}</div>
                {i < steps.length - 1 && <div className="roadmap__step-line"></div>}
              </div>
              <div className="roadmap__step-card">
                <div className="roadmap__step-meta">
                  <span className="roadmap__step-tag">{s.tag}</span>
                  <span className="roadmap__step-period">{s.period}</span>
                  {s.featured && <span className="roadmap__step-pill">主力</span>}
                </div>
                <h3 className="roadmap__step-title">{s.title}</h3>
                {s.purpose && <div className="roadmap__step-purpose">目的：{s.purpose}</div>}
                <p className="roadmap__step-body">{s.desc}</p>
                <div className="roadmap__step-foot">
                  <span className="roadmap__step-hours">{s.hours}</span>
                  <span className="roadmap__step-price">{s.price}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// プランの使い分け表
// ============================================================
function PlanFit() {
  const rows = [
    { sit: "まずAI活用について相談したい", plan: "light", note: "月6時間 / 15万円〜" },
    { sit: "1業務だけ試したい", plan: "starter", note: "月12時間 / 30万円〜" },
    { sit: "業務設計から試作・導入まで進めたい", plan: "redesign", note: "月20時間 / 60万円〜" },
    { sit: "複数部署・複数業務で本格的に進めたい", plan: "pro", note: "月32時間 / 120万円〜" }
  ];
  return (
    <section className="section" id="planfit">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Plan Fit</div>
          <h2 className="section-title">状況別の、プランの使い分け</h2>
          <p className="section-lede">どのプランから始めるべきかは、社内のAI活用の進み具合と、改善したい業務の明確さで決まります。</p>
        </div>
        <div className="planfit">
          {rows.map((r, i) => {
            const plan = ALL_PLANS[r.plan];
            return (
              <div className={`planfit__row ${plan.featured ? "is-featured" : ""}`} key={i}>
                <div className="planfit__sit">
                  <div className="planfit__sit-label">こんな状況なら</div>
                  <div className="planfit__sit-text">{r.sit}</div>
                </div>
                <div className="planfit__arrow">→</div>
                <div className="planfit__plan">
                  <div className="planfit__plan-name">
                    {plan.featured && <span className="planfit__plan-pill">主力</span>}
                    {plan.name}
                  </div>
                  <div className="planfit__plan-note">{r.note}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 導入後に目指す状態
// ============================================================
function TargetState({ data }) {
  return (
    <section className="section section--soft" id="target">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Target State</div>
          <h2 className="section-title">導入後に目指す状態</h2>
          <p className="section-lede">AI業務再設計パッケージを終えたあたりで、{data.label}として目指せる業務体制のイメージです。</p>
        </div>
        <div className="target-grid">
          {data.targetState.map((t, i) => (
            <div className="target-item" key={i}>
              <div className="target-item__num">{String(i + 1).padStart(2, "0")}</div>
              <div className="target-item__text">{t}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ファーストビュー（売り込み色弱め）
// ============================================================
function CaseHero({ data, navigate }) {
  return (
    <section className="lp-hero">
      <div className="lp-hero__bg" style={{ backgroundImage: `url(${Img(PHOTOS[data.heroPhoto] || PHOTOS.workspace, 1800)})` }}></div>
      <div className="lp-hero__inner">
        <Breadcrumb
          navigate={navigate}
          items={[
            { label: "Top", href: "top" },
            { label: "業種別AI導入事例・ロードマップ", href: "industries" },
            { label: data.label }
          ]}
        />
        <div className="lp-hero__layout">
          <div>
            <span className="hero__tag">
              <span className="hero__tag-pill">{data.code}</span>
              {data.label} 向け · AI導入事例・ロードマップ
            </span>
            <h1 className="hero__title">
              {data.label}向け<br />
              <span className="accent">AI導入事例・業務改善ロードマップ</span>
            </h1>
            <p className="hero__sub">
              {data.label}でよく発生する業務課題を整理し、AI顧問ライト → 業務AI化スターター → AI業務再設計パッケージ → AI推進責任者代行 をどの順番で使うと効果的かを解説します。「いきなり高額な開発」は不要、小さく始めて段階的に進めます。
            </p>
            <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="#roadmap" onClick={(e) => { e.preventDefault(); document.getElementById("roadmap")?.scrollIntoView({ behavior: "smooth" }); }}>
                自社に近い進め方を見る
              </a>
            </div>
            <div className="case-hero-recommend">
              <span className="case-hero-recommend__label">この業種でまず選ぶのは</span>
              <span className="case-hero-recommend__plan">
                {ALL_PLANS[data.firstPlan].name}
                <small>{ALL_PLANS[data.firstPlan].hours} / {ALL_PLANS[data.firstPlan].price}</small>
              </span>
              <span className="case-hero-recommend__next">
                次に：{data.nextPlans.map(p => ALL_PLANS[p].name).join(" → ")}
              </span>
            </div>
          </div>
          <div className="lp-hero__photoframe">
            <div className="lp-hero__photo lp-hero__photo--doc">
              {INDUSTRY_MOCKS && INDUSTRY_MOCKS[data.id]
                ? React.createElement(INDUSTRY_MOCKS[data.id])
                : <MockDocument title={data.docTitle || "業務改善メモ"} industry={data.label} />}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// この業種でよくある課題
// ============================================================
function CaseProblems({ data }) {
  return (
    <section className="section" id="problems">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Pain Points</div>
          <h2 className="section-title">{data.label}でよくある業務課題</h2>
          <p className="section-lede">どれかひとつでも当てはまれば、まずは AI顧問ライト（月15万円）で業務課題を整理するところから始められます。</p>
        </div>
        <div className="problem-grid">
          {data.problems.map((p, i) => (
            <div className="problem-item" key={i}>
              <span className="problem-item__icon">!</span>
              <span>{p}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// AIで改善しやすい業務
// ============================================================
function CaseImprovements({ data }) {
  return (
    <section className="section section--soft" id="improvements">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">AI Improvements</div>
          <h2 className="section-title">AIで解決すべき業務</h2>
          <p className="section-lede">業務を完全自動化するのではなく、判断は人、下書き・整理・要約はAIに任せる発想です。{data.label}の中で、特に効果が出やすい業務を整理しました。</p>
        </div>
        <div className="lp-improvements">
          {data.improvements.map((t, i) => (
            <div className="lp-improvement" key={i}>
              <span className="lp-improvement__num">{String(i + 1).padStart(2, "0")}</span>
              <span>{t}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 想定事例
// ============================================================
function CaseStudy({ data }) {
  const cs = data.caseStudy;
  return (
    <section className="section" id="case">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Hypothetical Case</div>
          <h2 className="section-title">{cs.title}</h2>
          <p className="section-lede">※本事例は実在実績ではなく、AI導入の進め方をご理解いただくための「想定事例」です。</p>
        </div>
        <div className="case">
          <div>
            <span className="case__badge">想定事例 / Hypothetical</span>
            <h3>{cs.title}</h3>
            {cs.body.split("\n\n").map((p, i) => <p key={i}>{p}</p>)}
          </div>
          <div className="case__voice">
            <span className="case__voice-badge">顧客の声イメージ</span>
            <p className="case__voice-quote">{cs.voice}」</p>
            <div className="case__voice-attr">{cs.voiceAttr}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 必要に応じた開発・自動化の例
// ============================================================
function DevExamples({ data }) {
  return (
    <section className="section" id="development">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <div className="eyebrow">Development (Optional)</div>
          <h2 className="section-title">必要に応じた、開発・自動化の例</h2>
          <p className="section-lede">業務要件が AI業務再設計パッケージで固まったあと、必要であれば AI業務アプリ開発（別途見積もり）に進めます。Claude Code・Google Workspace・Cortex・Obsidianを活用した、{data.label}向けの開発例を整理しました。</p>
        </div>
        <div className="dev-support">
          <div>
            <h3>業務要件が固まったら、開発まで一気通貫で</h3>
            <p>いきなり開発から入らず、AI顧問ライト → 業務AI化スターター → AI業務再設計パッケージ で業務要件を整理してから、AI業務アプリ開発に進みます。要件が曖昧なまま開発に進むのが、投資回収を一番失敗しやすいパターンです。</p>
            <p style={{ fontSize: 12, color: "var(--muted)", marginTop: 16 }}>※ AI業務アプリ開発は別途要件定義・お見積もりのうえ対応します。</p>
            <div style={{ marginTop: 20 }}>
              <a className="btn btn--dark" href="#final-cta" onClick={(e) => { e.preventDefault(); document.getElementById("final-cta")?.scrollIntoView({ behavior: "smooth" }); }}>
                開発相談をする <ArrowRight />
              </a>
            </div>
          </div>
          <div>
            <div style={{ fontSize: 12, fontFamily: "var(--en)", letterSpacing: "0.1em", color: "var(--muted)", textTransform: "uppercase", marginBottom: 14 }}>{data.label} 向け 開発例</div>
            <ul>
              {data.devExamples.map((e, i) => <li key={i}>{e}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 業種ページ用 最終CTA
// ============================================================
function CaseFinalCTA({ data }) {
  return (
    <section className="section" id="final-cta">
      <div className="container">
        <div className="final-cta">
          <div className="final-cta__inner">
            <div className="eyebrow" style={{ color: "oklch(85% 0.10 252)" }}>Get Started</div>
            <h2 style={{ marginTop: 14 }}>この業種のAI導入を、小さく始めませんか。</h2>
            <p>
              いきなり高額な開発を行う必要はありません。<br />
              まずは AI顧問ライト または 業務AI化スターター で業務課題を整理し、必要に応じて AI業務再設計パッケージ へ進めます。
            </p>
            <div className="final-cta__ctas">
              <a className="btn btn--primary btn--lg" href="#">無料相談を申し込む <ArrowRight /></a>
              <a className="btn btn--ghost btn--lg" href="#">自社に近い進め方を相談する <ArrowRight /></a>
            </div>
            <div style={{ marginTop: 32, display: "flex", gap: 24, flexWrap: "wrap", fontSize: 12.5, color: "oklch(70% 0.01 255)" }}>
              <span>✓ 無料相談 約30分</span>
              <span>✓ オンライン対応</span>
              <span>✓ 営業強要なし</span>
              <span>✓ 秘密保持契約締結可</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 業種別 詳細ページ（旧 IndustryPage を置き換え）
// ============================================================
function CaseRoadmapPage({ id, navigate }) {
  const data = INDUSTRY_DATA[id];
  if (!data) return null;
  const faq = FAQ_ITEMS.map(it => {
    if (data.faqOverride && data.faqOverride[it.q]) {
      return { q: it.q, a: data.faqOverride[it.q] };
    }
    return it;
  });
  return (
    <div className="page-fade" key={id}>
      <CaseHero data={data} navigate={navigate} />
      <DeepPain data={data} />
      <CaseImprovements data={data} />
      <Roadmap data={data} />
      <CaseStudy data={data} />
      <DevExamples data={data} />
      <PlanFit />
      <FAQ items={faq} />
      <CaseFinalCTA data={data} />
    </div>
  );
}

// ============================================================
// 業種別 一覧ページ（全業種カードグリッド）
// ============================================================
function IndustriesIndexPage({ navigate }) {
  return (
    <div className="page-fade">
      <section className="section" style={{ paddingTop: 64, paddingBottom: 24 }}>
        <div className="container">
          <Breadcrumb navigate={navigate} items={[{ label: "Top", href: "top" }, { label: "業種別AI導入事例・ロードマップ" }]} />
          <div style={{ maxWidth: 760, marginTop: 24 }}>
            <div className="eyebrow">Industries</div>
            <h1 className="section-title" style={{ fontSize: "clamp(32px, 4vw, 48px)" }}>
              業種ごとのAI導入の進め方を見る
            </h1>
            <p className="section-lede" style={{ fontSize: 17 }}>
              AI導入は、業種によって最初に取り組むべき業務が異なります。自社に近い業種の事例とロードマップを参考に、無理のない導入ステップを確認してください。
            </p>
          </div>
        </div>
      </section>
      <section className="section section--soft" style={{ paddingTop: 32 }}>
        <div className="container">
          <div className="industry-card-grid">
            {ALL_INDUSTRIES.map(ind => (
              <IndustryListCard key={ind.id} ind={ind} navigate={navigate} />
            ))}
          </div>
        </div>
      </section>
      <CTABanner />
      <FAQ />
      <FinalCTA />
    </div>
  );
}

function IndustryListCard({ ind, navigate }) {
  const firstPlan = ALL_PLANS[ind.firstPlan];
  return (
    <div className="ind-card ind-card--available" onClick={() => navigate(ind.id)} role="button" tabIndex={0}>
      <div className="ind-card__head">
        <span className="ind-card__label">{ind.label}</span>
        <span className="ind-card__badge">事例 + ロードマップ</span>
      </div>
      <div className="ind-card__issue">
        <span className="ind-card__issue-label">深い業界課題</span>
        <p>{ind.issueShort}</p>
      </div>
      <div className="ind-card__issue">
        <span className="ind-card__issue-label">AIで改善しやすい業務</span>
        <p>{ind.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>{ind.nextPlans.map(p => ALL_PLANS[p].name).join(" → ")}</span>
        </div>
      </div>
      <div className="ind-card__more">導入ロードマップを見る <ArrowRight size={12} /></div>
    </div>
  );
}

Object.assign(window, { CaseRoadmapPage, IndustriesIndexPage, Roadmap, PlanFit, TargetState });