/* global React, TopoField, SectionHead */
const { useState: useStateP } = React;

function ProductsPage({ onNav }) {
  return (
    <div className="page-enter">
      <section style={{ padding: "100px 0 40px" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 24 }}>PRODUCTS · プロダクト</div>
          <h1 className="serif d-2" style={{ marginBottom: 32, maxWidth: 900 }}>
            <span style={{ display: "block" }}>暮らしの側から、</span>
            <span style={{ display: "block" }}>現場の側から。</span>
          </h1>
          <p className="body-lg" style={{ maxWidth: 720, color: "var(--ink-75)" }}>
            YORIAIは、ふたつのプロダクトを並行して進めています。ひとつは、やることはあるのに始められない個人のための実行支援アプリ。もうひとつは、放課後等デイ・児童発達支援を開こうとする事業者の開設判断を早くするための地図。どちらも「環境を変えて、人を変えない」という同じ設計原則から生まれています。
          </p>
        </div>
      </section>
      <section style={{ padding: "40px 0 120px" }}>
        <div className="container" style={{ display: "grid", gap: 32 }}>
          <BigProductCard
            num="01" status="iOS App · 開発中"
            name="Ando" jp="ひとつだけ、やるアプリ。"
            body="やることはあるのに始められない人のための、やさしい実行支援アプリ。思いついたことを投げ込むだけで、明確化し、ボードに整えて、必要なときに取り出す。タスクを敵にせず、思考の外部記憶として寄り添います。現在開発中。"
            features={["クイック投入","明確化アシスト","ボード整理","分析とふりかえり"]}
            accent="saffron"
            onClick={() => onNav("ando")}
          />
          <BigProductCard
            num="02" status="Web · 受注開始"
            name="福祉エリアマップ" jp="開設判断を、勘ではなく地図で。"
            body="放課後等デイサービス・児童発達支援の開設候補地を、契約前に比較しやすくするサービス。競合密度、送迎圏、学校・医療、ハザード、交通、地価を重ねて、「進める候補地」と「先に外す候補地」を見分けやすくします。簡易診断 39,800円から、候補地1件でもエリア検討段階でも対応します。"
            features={["候補地1件の簡易診断","3件までの比較レポート","開業判断まで深掘り","不動産情報ライブラリ／国土地理院／e-Stat データ"]}
            accent="green"
            onClick={() => onNav("fukushi-area-map")}
          />
        </div>
      </section>
    </div>
  );
}

function BigProductCard({ num, status, name, jp, body, features, accent, onClick }) {
  const color = accent === "saffron" ? "var(--saffron)" : "var(--topo-green)";
  return (
    <article onClick={onClick} className="card grid-2-stack" style={{ padding: 0, overflow: "hidden", cursor: "pointer", display: "grid", gridTemplateColumns: "1.2fr 1fr", minHeight: 420 }}>
      <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 32 }}>
            <span className="mono" style={{ color, fontSize: 13, letterSpacing: "0.16em" }}>{num}</span>
            <span className="tag tag-outline">{status}</span>
          </div>
          <h2 className="serif" style={{ fontSize: 56, marginBottom: 12, letterSpacing: "-0.005em" }}>{name}</h2>
          <p className="serif" style={{ fontSize: 20, color, marginBottom: 24 }}>{jp}</p>
          <p className="body" style={{ color: "var(--ink-75)", maxWidth: 480 }}>{body}</p>
        </div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 32 }}>
          {features.map(f => <span key={f} className="tag tag-outline">{f}</span>)}
        </div>
      </div>
      <div style={{ background: "var(--sky-mist)", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0 }}>
          <TopoField seed={name.length * 3} opacity={0.5} color={color} />
        </div>
        <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
          {accent === "saffron" ? <AndoMiniMock /> : <MapMiniMock />}
        </div>
      </div>
    </article>
  );
}

function AndoMiniMock() {
  return (
    <div style={{ width: 220, height: 360, background: "var(--paper)", borderRadius: 28, border: "1px solid var(--line-faint)", padding: 16, boxShadow: "0 40px 80px -20px rgba(26,24,20,0.2)" }}>
      <div className="caption" style={{ marginBottom: 12 }}>今日 · 4月18日</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {["歯医者の予約を取る", "報告書の続き", "牛乳を買って帰る", "子どもの持ち物を揃える"].map((t, i) => (
          <div key={i} style={{ padding: "10px 12px", background: i === 1 ? "rgba(214,138,60,0.1)" : "var(--washi)", borderRadius: 8, fontSize: 12, display: "flex", gap: 8 }}>
            <span style={{ width: 12, height: 12, border: "1.5px solid var(--ink-60)", borderRadius: "50%", flexShrink: 0, marginTop: 2 }} />
            <span>{t}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 16, padding: 12, background: "var(--earth-ink)", color: "var(--paper)", borderRadius: 10, fontSize: 11 }}>
        <div style={{ opacity: 0.6, marginBottom: 4, fontSize: 10 }}>Ando</div>
        「報告書」、いつまでに、どこまで？
      </div>
    </div>
  );
}

function MapMiniMock() {
  return (
    <div style={{ width: 280, height: 200, background: "var(--paper)", borderRadius: 12, border: "1px solid var(--line-faint)", overflow: "hidden", boxShadow: "0 20px 40px -10px rgba(26,24,20,0.2)" }}>
      <svg viewBox="0 0 280 200" style={{ width: "100%", height: "100%" }}>
        <rect width="280" height="200" fill="#EEF3EF" />
        {[0,1,2,3,4,5].map(i => (
          <path key={i} d={`M ${-10} ${50 + i * 18} Q ${80} ${30 + i * 20}, ${160} ${60 + i * 16} T ${300} ${80 + i * 14}`}
            stroke="rgba(63,93,74,0.35)" strokeWidth="0.7" fill="none" />
        ))}
        <circle cx="90" cy="90" r="6" fill="#D68A3C" stroke="#FBFAF7" strokeWidth="1.5" />
        <circle cx="160" cy="115" r="6" fill="#3F5D4A" stroke="#FBFAF7" strokeWidth="1.5" />
        <circle cx="210" cy="75" r="6" fill="#6E8576" stroke="#FBFAF7" strokeWidth="1.5" />
        <circle cx="130" cy="160" r="6" fill="#A0651F" stroke="#FBFAF7" strokeWidth="1.5" />
      </svg>
    </div>
  );
}

/* =================== Ando Detail =================== */
function AndoDetailPage({ onNav }) {
  return (
    <div className="page-enter">
      <section style={{ padding: "80px 0 40px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.4 }}>
          <TopoField seed={5} opacity={0.3} color="#D68A3C" />
        </div>
        <div className="container" style={{ position: "relative" }}>
          <button onClick={() => onNav("products")} className="body-sm" style={{ color: "var(--ink-60)", marginBottom: 24 }}>← プロダクト一覧へ</button>
          <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }}>
            <div>
              <span className="tag tag-saffron" style={{ marginBottom: 24, display: "inline-flex" }}>iOS App · 開発中</span>
              <h1 className="serif d-1" style={{ marginBottom: 24, letterSpacing: "-0.01em" }}>Ando</h1>
              <p className="serif" style={{ fontSize: 24, color: "var(--saffron)", marginBottom: 24 }}>ひとつだけ、やるアプリ。</p>
              <p className="body-lg" style={{ color: "var(--ink-75)", maxWidth: 580 }}>
                やることはあるのに始められない人のための、やさしい実行支援アプリ。思いつきを受け止め、明確化し、必要なときに手渡しする。「タスク管理を使いこなせない」感覚を前提に設計しています。現在開発中。
              </p>
              <p className="serif" style={{ fontSize: 20, color: "var(--earth-ink)", marginTop: 24, maxWidth: 580, lineHeight: 1.7 }}>
                怠けているんじゃない。<br/>
                頭の中でタブが30個開いて、閉じられないだけ。
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
                <button className="btn btn-saffron arrow-r" onClick={() => onNav("philosophy")}>設計思想を読む</button>
                <a className="btn btn-ghost arrow-r" href="https://x.com/okoge_jam" target="_blank" rel="noopener noreferrer">@okoge_jam で続報を見る ↗</a>
                <button className="btn btn-ghost arrow-r" onClick={() => onNav("contact")}>Andoについて問い合わせる</button>
              </div>
            </div>
            <div style={{ display: "flex", justifyContent: "center" }}>
              <AndoHeroPhone />
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--paper)", borderTop: "1px solid var(--line-faint)", borderBottom: "1px solid var(--line-faint)" }}>
        <div className="container">
          <SectionHead eyebrow="FEATURES" jpLabel="機能" title={<>4つの、やさしい道具。</>} />
          <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 32, marginTop: 64 }}>
            <FeatureCard num="01" name="クイック投入" body="思いついたら、3タップ以内でアプリに投げ込める。言葉でも、写真でも、音声でも。" mock={<QuickInputMock />} />
            <FeatureCard num="02" name="明確化アシスト" body="「誰が/いつまでに/どこまで」が欠けていると、Andoが一言だけ尋ねる。詰問ではなく、対話で。" mock={<ClarifyMock />} />
            <FeatureCard num="03" name="ボード整理" body="タスクは「今日／週／いつか／終わった」の4つの地形に並ぶ。重さと時間のバランスが視覚化される。" mock={<BoardMock />} />
            <FeatureCard num="04" name="分析とふりかえり" body="できなかった自分を責めない。傾向を淡く見せて、次の設計を一緒に考える。" mock={<AnalyticsMock />} />
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
            <div>
              <div className="eyebrow-jp" style={{ marginBottom: 16 }}>設計思想</div>
              <h2 className="serif d-3">
                タスク管理を、<br/>敵にしない。
              </h2>
            </div>
            <div>
              <p className="body-lg" style={{ marginBottom: 24 }}>
                既存のタスク管理アプリの多くは、「整えた状態を維持できること」を前提にしています。しかし散らかることが自然な脳にとって、その前提そのものが敵になります。
              </p>
              <p className="body-lg" style={{ color: "var(--ink-75)", marginBottom: 24 }}>
                Andoは、散らかることを禁じません。散らかったまま置いてもいい。取り出すときに、Andoが手渡しする——そういう形のタスク管理を、ひとつの選択肢として置きます。
              </p>
              <p className="body-lg" style={{ color: "var(--ink-75)" }}>
                Andoは、散らかる思考と暮らしのあいだに立つ、小さな補助線です。通知で急かさず、達成率で競わせず、責めずにすむ設計を選んでいます。
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function AndoHeroPhone() {
  return (
    <div style={{ width: 280, height: 560, background: "var(--earth-ink)", borderRadius: 44, padding: 12, boxShadow: "0 60px 80px -20px rgba(26,24,20,0.3)" }}>
      <div style={{ width: "100%", height: "100%", background: "var(--paper)", borderRadius: 32, overflow: "hidden", position: "relative" }}>
        <div style={{ padding: "24px 20px 12px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, marginBottom: 16, color: "var(--ink-60)" }}>
            <span className="mono">9:41</span>
            <span className="mono">●●●</span>
          </div>
          <div className="mono" style={{ fontSize: 10, color: "var(--saffron)", letterSpacing: "0.2em", marginBottom: 6 }}>今日</div>
          <h3 className="serif" style={{ fontSize: 22, marginBottom: 16 }}>4月18日 金曜</h3>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {[
              { t: "歯医者の予約を取る", cat: "連絡", done: false },
              { t: "報告書の続き（～2000字）", cat: "仕事", done: false, focus: true },
              { t: "牛乳と米を買う", cat: "買物", done: false },
              { t: "子どもの持ち物袋を縫う", cat: "家族", done: true },
            ].map((task, i) => (
              <div key={i} style={{ padding: "12px 14px", background: task.focus ? "rgba(214,138,60,0.1)" : "var(--washi)", border: task.focus ? "1px solid rgba(214,138,60,0.4)" : "1px solid transparent", borderRadius: 10 }}>
                <div style={{ display: "flex", alignItems: "start", gap: 8 }}>
                  <span style={{ width: 14, height: 14, border: "1.5px solid var(--ink-60)", borderRadius: "50%", flexShrink: 0, marginTop: 2, background: task.done ? "var(--topo-green)" : "transparent" }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12, textDecoration: task.done ? "line-through" : "none", opacity: task.done ? 0.5 : 1 }}>{task.t}</div>
                    <div className="caption" style={{ fontSize: 9, marginTop: 2 }}>{task.cat}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16, padding: 12, background: "var(--earth-ink)", color: "var(--paper)", borderRadius: 10 }}>
            <div className="mono" style={{ fontSize: 9, color: "var(--saffron)", marginBottom: 4, letterSpacing: "0.1em" }}>ANDO</div>
            <div style={{ fontSize: 11, lineHeight: 1.5 }}>「報告書」、何時までに終わらせる？</div>
          </div>
        </div>
        <div style={{ position: "absolute", bottom: 16, left: "50%", transform: "translateX(-50%)", width: 64, height: 64, borderRadius: "50%", background: "var(--saffron)", display: "grid", placeItems: "center", color: "var(--earth-ink)", fontSize: 28, fontWeight: 300 }}>+</div>
      </div>
    </div>
  );
}

function FeatureCard({ num, name, body, mock }) {
  return (
    <div className="card" style={{ padding: 32, minHeight: 320, display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 24 }}>
      <div>
        <div className="mono" style={{ color: "var(--saffron)", fontSize: 12, letterSpacing: "0.16em", marginBottom: 16 }}>{num}</div>
        <h3 className="serif" style={{ fontSize: 26, marginBottom: 12 }}>{name}</h3>
        <p className="body" style={{ color: "var(--ink-75)" }}>{body}</p>
      </div>
      <div style={{ background: "var(--sky-mist)", borderRadius: 12, padding: 20, minHeight: 140, display: "grid", placeItems: "center" }}>{mock}</div>
    </div>
  );
}

function QuickInputMock() {
  return (
    <div style={{ width: "100%", maxWidth: 280, background: "var(--paper)", borderRadius: 10, padding: 14, border: "1px solid var(--line-faint)" }}>
      <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }}>
        <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--saffron)" }} />
        <span className="caption">クイック投入</span>
      </div>
      <div style={{ fontSize: 14 }} className="serif">ごみ捨て忘れない</div>
      <div style={{ display: "flex", gap: 6, marginTop: 10 }}>
        <span className="tag tag-outline" style={{ fontSize: 10, padding: "2px 8px" }}>🎤 音声</span>
        <span className="tag tag-outline" style={{ fontSize: 10, padding: "2px 8px" }}>📷 写真</span>
        <span className="tag tag-outline" style={{ fontSize: 10, padding: "2px 8px" }}>📝 文字</span>
      </div>
    </div>
  );
}

function ClarifyMock() {
  return (
    <div style={{ width: "100%", maxWidth: 280, display: "flex", flexDirection: "column", gap: 6 }}>
      <div style={{ padding: 10, background: "var(--paper)", borderRadius: 8, fontSize: 12, alignSelf: "flex-end", maxWidth: "80%" }}>報告書</div>
      <div style={{ padding: 10, background: "var(--earth-ink)", color: "var(--paper)", borderRadius: 8, fontSize: 11, alignSelf: "flex-start", maxWidth: "85%" }}>
        <span className="mono" style={{ opacity: 0.6, fontSize: 9 }}>Ando</span><br/>
        いつまで？どこまで書く？
      </div>
      <div style={{ padding: 10, background: "var(--paper)", borderRadius: 8, fontSize: 12, alignSelf: "flex-end", maxWidth: "80%" }}>金曜17時まで。2000字。</div>
    </div>
  );
}

function BoardMock() {
  return (
    <div style={{ width: "100%", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }}>
      {["今日","今週","いつか","完了"].map((c, i) => (
        <div key={c} style={{ background: "var(--paper)", borderRadius: 6, padding: 8, minHeight: 80 }}>
          <div style={{ fontSize: 9, color: "var(--ink-60)", marginBottom: 6, fontFamily: "var(--ff-mono)", letterSpacing: "0.08em" }}>{c}</div>
          {[0,1,2].slice(0, 3 - (i % 2)).map(j => (
            <div key={j} style={{ height: 12, background: i === 3 ? "rgba(63,93,74,0.15)" : "var(--sky-mist)", borderRadius: 3, marginBottom: 4 }} />
          ))}
        </div>
      ))}
    </div>
  );
}

function AnalyticsMock() {
  return (
    <div style={{ width: "100%", maxWidth: 280, background: "var(--paper)", borderRadius: 10, padding: 14 }}>
      <div className="caption" style={{ marginBottom: 12 }}>今週の傾向</div>
      <svg viewBox="0 0 240 80" style={{ width: "100%", height: 80 }}>
        <path d="M 10 60 Q 50 40, 80 45 T 150 30 T 230 35" stroke="var(--saffron)" strokeWidth="2" fill="none" />
        <path d="M 10 60 Q 50 40, 80 45 T 150 30 T 230 35 L 230 80 L 10 80 Z" fill="rgba(214,138,60,0.15)" />
      </svg>
      <div style={{ fontSize: 11, color: "var(--ink-60)", marginTop: 6 }}>朝、10時前後が集中できてるみたい。</div>
    </div>
  );
}

/* =================== 福祉エリアマップ Detail =================== */
function FukushiDetailPage({ onNav }) {
  const MAP_URL = "https://map.yoriai.life/map";
  const mailto = "mailto:info@yoriai.life?subject=%E7%A6%8F%E7%A5%89%E3%82%A8%E3%83%AA%E3%82%A2%E3%83%9E%E3%83%83%E3%83%97%E3%81%AE%E7%9B%B8%E8%AB%87&body=%E6%B3%95%E4%BA%BA%E5%90%8D%EF%BC%9A%0A%E6%8B%85%E5%BD%93%E8%80%85%E5%90%8D%EF%BC%9A%0A%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E7%A8%AE%E5%88%A5%EF%BC%9A%0A%E7%8F%BE%E5%9C%A8%E3%81%AE%E6%AE%B5%E9%9A%8E%EF%BC%9A%0A%E5%80%99%E8%A3%9C%E5%9C%B0%E6%95%B0%EF%BC%9A%0A%E7%9B%B8%E8%AB%87%E3%81%97%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8%EF%BC%9A";
  return (
    <div className="page-enter">
      <section style={{ padding: "80px 0 60px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.5 }}>
          <TopoField seed={14} opacity={0.3} color="#3F5D4A" />
        </div>
        <div className="container" style={{ position: "relative" }}>
          <button onClick={() => onNav("products")} className="body-sm" style={{ color: "var(--ink-60)", marginBottom: 24 }}>← プロダクト一覧へ</button>
          <span className="tag" style={{ marginBottom: 24, display: "inline-flex", background: "rgba(63,93,74,0.1)", color: "var(--topo-green)" }}>福祉エリアマップ</span>
          <h1 className="serif d-1" style={{ marginBottom: 24, letterSpacing: "-0.01em", maxWidth: 960 }}>
            <span style={{ display: "block" }}>放課後等デイ・児童発達支援を、</span>
            <span style={{ display: "block" }}>地図で見渡す。</span>
          </h1>
          <p className="body-lg" style={{ color: "var(--ink-75)", maxWidth: 760, marginBottom: 48, lineHeight: 1.8 }}>
            通所の検討も、開設の判断も、同じ地図の上で整理できるように作っています。<br/>
            まず、あなたの立場を教えてください。
          </p>
          <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20, maxWidth: 880 }}>
            <button
              onClick={() => onNav("for-parents")}
              className="card branch-card"
              style={{ padding: 32, textAlign: "left", cursor: "pointer", border: "1px solid var(--line-faint)", background: "var(--paper)", display: "flex", flexDirection: "column", gap: 0 }}
            >
              <div className="mono" style={{ fontSize: 11, color: "var(--topo-green)", letterSpacing: "0.18em", marginBottom: 14 }}>FOR FAMILIES</div>
              <h2 className="serif" style={{ fontSize: 24, marginBottom: 12, lineHeight: 1.4, color: "var(--earth-ink)" }}>
                お子さんの通所を<br/>検討しているご家族
              </h2>
              <p className="body-sm" style={{ color: "var(--ink-75)", marginBottom: 20, lineHeight: 1.8, flex: 1 }}>
                近くの事業所を地図で探して、見学や相談の前に、比べやすく整える。<br/>
                どの観点で見るといいかのガイドもあります。
              </p>
              <span className="body-sm arrow-r" style={{ color: "var(--topo-green)", fontWeight: 600 }}>ご家族向けページへ</span>
            </button>
            <a
              href="#providers"
              onClick={(e) => { e.preventDefault(); const el = document.getElementById("providers"); if (el) el.scrollIntoView({ behavior: "smooth" }); }}
              className="card branch-card"
              style={{ padding: 32, textAlign: "left", cursor: "pointer", border: "1px solid var(--line-faint)", background: "var(--paper)", textDecoration: "none", display: "flex", flexDirection: "column", gap: 0 }}
            >
              <div className="mono" style={{ fontSize: 11, color: "var(--saffron)", letterSpacing: "0.18em", marginBottom: 14 }}>FOR PROVIDERS</div>
              <h2 className="serif" style={{ fontSize: 24, marginBottom: 12, lineHeight: 1.4, color: "var(--earth-ink)" }}>
                開設・運営を<br/>検討している事業者
              </h2>
              <p className="body-sm" style={{ color: "var(--ink-75)", marginBottom: 20, lineHeight: 1.8, flex: 1 }}>
                候補地の比較、送迎15分圏・競合・ハザードの重ね見、PDFレポート納品まで。<br/>
                勘ではなく地図で、契約前に判断する。
              </p>
              <span className="body-sm" style={{ color: "var(--saffron)", fontWeight: 600 }}>事業者向けの内容を見る ↓</span>
            </a>
          </div>
        </div>
      </section>

      <section id="providers" style={{ padding: "48px 0 0", borderTop: "1px solid var(--line-faint)", background: "var(--paper)" }}>
        <div className="container">
          <div className="mono" style={{ fontSize: 11, color: "var(--saffron)", letterSpacing: "0.2em", marginBottom: 12 }}>FOR PROVIDERS</div>
          <p className="serif" style={{ fontSize: 18, color: "var(--topo-green)", marginBottom: 8, lineHeight: 1.5 }}>
            療育圏調査、していますか？
          </p>
          <h2 className="serif" style={{ fontSize: 32, marginBottom: 16, lineHeight: 1.4, color: "var(--earth-ink)" }}>
            開設判断を、勘ではなく地図で。
          </h2>
          <p className="body-lg" style={{ color: "var(--ink-75)", maxWidth: 760, marginBottom: 32, lineHeight: 1.8 }}>
            クリニックに「診療圏調査」があるように、放デイ・児発の「療育圏調査」にあたるのが、このサービスです。<br/>
            放課後等デイサービス・児童発達支援の開設候補地を、契約前に比較しやすくするサービスです。
            競合密度、送迎15分圏、学校・医療、ハザード、交通、地価を重ねて、
            「進める候補地」と「先に外す候補地」を見分けやすくします。
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 16 }}>
            <a className="btn btn-primary arrow-r" href={mailto}>デモを相談する</a>
            <a className="btn btn-ghost arrow-r" href={MAP_URL} target="_blank" rel="noopener noreferrer">分析マップを開く ↗</a>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--paper)", borderTop: "1px solid var(--line-faint)", borderBottom: "1px solid var(--line-faint)" }}>
        <div className="container">
          <SectionHead eyebrow="WHY" jpLabel="なぜこのサービスか" title={<>物件の契約前に、<br/>切る理由を見つけにくい。</>} body="放デイの45%は赤字。事業所は10年で5.5倍に増えた——閉業の理由は、たいてい立地で決まります。それなのに、よさそうに見える物件ほど判断が遅れます。競合件数だけで決めると、送迎、紹介元、安全性、運営コストの見落としが残ります。" />
          <div className="grid-4-stack" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, marginTop: 72 }}>
            {[
              { num: "01", h: "競合件数だけで決めがち", body: "競合が少なく見えても、対象人口や紹介元との距離感が弱ければ、開設後に苦しくなります。" },
              { num: "02", h: "送迎の現実が後から出る", body: "直線距離では近くても、道路条件や交通で送迎15分圏が崩れると、日々の運営コストに直結します。" },
              { num: "03", h: "安全性と継続性を見落とす", body: "ハザードや周辺環境を後回しにすると、契約後にやめる判断がしづらくなります。" },
              { num: "04", h: "人材前提が崩れる", body: "児発管が1人辞めただけで、指定基準割れで休業。近隣の採用可能性も、立地で決まります。" },
            ].map(c => (
              <div key={c.num} style={{ padding: 24, borderLeft: "2px solid var(--topo-green)" }}>
                <div className="mono" style={{ fontSize: 12, color: "var(--topo-green)", letterSpacing: "0.16em", marginBottom: 12 }}>{c.num}</div>
                <h3 className="serif" style={{ fontSize: 22, marginBottom: 10 }}>{c.h}</h3>
                <p className="body-sm">{c.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead eyebrow="AUDIENCE" jpLabel="活用場面" title={<>新規開設でも、2拠点目でも、<br/>候補地比較でも。</>} body="物件が1件だけあるケースにも、まだエリアで迷っているケースにも対応します。いまの段階に合わせて、使い方を変えられます。" />
          <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24, marginTop: 56 }}>
            {[
              { eyebrow: "新規開設", h: "まずはエリアの輪郭を見たい", body: "どこから探し始めるべきか、無料マップで一次判断の土台をつくります。" },
              { eyebrow: "2拠点目", h: "既存拠点と食い合わないか見たい", body: "競合だけでなく、送迎圏や紹介元の重なりも含めて見直せます。" },
              { eyebrow: "候補地比較", h: "3件の優先順位を決めたい", body: "候補地を最大3件まで並べて、同じ観点で比較しやすくします。" },
              { eyebrow: "紹介直後", h: "内見前に足切りしたい", body: "不動産会社から出てきた候補地を、契約前に早く切るための入口として使えます。" },
            ].map(c => (
              <article key={c.eyebrow} className="card" style={{ padding: 32 }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--topo-green)", letterSpacing: "0.16em", marginBottom: 10 }}>{c.eyebrow}</div>
                <h3 className="serif" style={{ fontSize: 22, marginBottom: 12 }}>{c.h}</h3>
                <p className="body-sm" style={{ color: "var(--ink-75)" }}>{c.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--sky-mist)", borderTop: "1px solid var(--line-faint)", borderBottom: "1px solid var(--line-faint)" }}>
        <div className="container">
          <SectionHead eyebrow="PRICING" jpLabel="料金プラン" title={<>必要な深さだけ、<br/>依頼できる。</>} body="いきなり高額な調査ではなく、候補地の段階に応じて選べるようにしています。まず無料マップで見てから、必要なら有料比較へ進めます。" />
          <div className="grid-3-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 56 }}>
            {[
              {
                label: "候補地1件の一次評価",
                name: "簡易診断", price: "¥39,800", unit: "/件",
                lead: "最初の足切りに向いたプラン。候補地1件の輪郭を早く整理します。",
                items: [
                  "候補地1件",
                  "3軸スコア（需要・運営・継続）",
                  "地図: 競合分布 + 送迎15分圏（2レイヤー）",
                  "納品目安 3営業日以内",
                ],
                recommended: false,
                pdf: "/demo/fukushi-area-map-demo-simple.pdf"
              },
              {
                label: "候補地2〜3件の比較",
                name: "比較レポート", price: "¥79,800", unit: "/件",
                lead: "3件までを同じ観点で比較し、優先順位を決めやすくする標準プランです。",
                items: [
                  "候補地2〜3件",
                  "3軸×候補地の比較表",
                  "地図: 競合 / 送迎圏 / 学校・医療・保育所 / ハザード（4レイヤー）",
                  "注意点と次の確認事項",
                  "納品目安 5営業日以内",
                ],
                recommended: true,
                pdf: "/demo/fukushi-area-map-demo-compare.pdf"
              },
              {
                label: "意思決定まで詰める",
                name: "開業判断", price: "¥149,800", unit: "/件",
                lead: "比較レポートに加えて、開設判断の整理と説明まで含めるプランです。",
                items: [
                  "候補地3件まで",
                  "全軸の詳細評価 + 簡易収支シミュレーション",
                  "地図: 競合 / 送迎圏 / 学校・医療 / ハザード / 地価 / 人口メッシュ / 交通網（7レイヤー）",
                  "優先順位の提案と推奨アクション",
                  "30分のオンライン解説",
                  "納品目安 7営業日以内",
                ],
                recommended: false,
                pdf: "/demo/fukushi-area-map-demo-deep.pdf"
              }
            ].map(p => (
              <article key={p.name} className="card" style={{ padding: 32, position: "relative", border: p.recommended ? "2px solid var(--saffron)" : "1px solid var(--line-faint)", background: "var(--paper)" }}>
                {p.recommended && (
                  <span style={{ position: "absolute", top: -12, left: 20, background: "var(--saffron)", color: "var(--earth-ink)", fontSize: 11, padding: "4px 10px", borderRadius: 999, fontWeight: 600, letterSpacing: "0.08em" }}>おすすめ</span>
                )}
                <div className="mono" style={{ fontSize: 11, color: "var(--topo-green)", letterSpacing: "0.12em", marginBottom: 10 }}>{p.label}</div>
                <h3 className="serif" style={{ fontSize: 28, marginBottom: 12 }}>{p.name}</h3>
                <div style={{ marginBottom: 16 }}>
                  <span className="serif" style={{ fontSize: 36, fontWeight: 600 }}>{p.price}</span>
                  <span className="body-sm" style={{ marginLeft: 4 }}>{p.unit}</span>
                </div>
                <p className="body-sm" style={{ marginBottom: 20, color: "var(--ink-75)" }}>{p.lead}</p>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8, marginBottom: 24 }}>
                  {p.items.map(i => (
                    <li key={i} className="body-sm" style={{ color: "var(--earth-ink)", display: "flex", gap: 8 }}>
                      <span style={{ color: "var(--topo-green)" }}>●</span>
                      <span>{i}</span>
                    </li>
                  ))}
                </ul>
                <a href={p.pdf} target="_blank" rel="noopener noreferrer"
                   className="body-sm"
                   style={{ display: "inline-flex", alignItems: "center", gap: 6, paddingTop: 16, borderTop: "1px solid var(--line-faint)", color: "var(--topo-green)", fontWeight: 600, textDecoration: "none" }}>
                  このプランのデモPDFを開く ↗
                </a>
              </article>
            ))}
          </div>
          <p className="caption" style={{ marginTop: 24, textAlign: "center" }}>税込。候補地数や状況に応じて進め方を調整します。</p>
        </div>
      </section>

      <section className="section" style={{ background: "var(--paper)", borderTop: "1px solid var(--line-faint)", borderBottom: "1px solid var(--line-faint)" }}>
        <div className="container">
          <SectionHead eyebrow="COMPARISON" jpLabel="他社コンサルとの比較" title={<>見積もりからの逆算ではなく、<br/>最初から金額を出しています。</>} body="開業コンサルティング業界では、無料相談から電話・ビデオミーティングを重ねて個別見積もりを出す進め方が一般的です。福祉エリアマップは、あらかじめ価格を公開する方を選んでいます。" />
          <div style={{ marginTop: 56, overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 720, background: "var(--paper)" }}>
              <thead>
                <tr>
                  <th style={{ textAlign: "left", padding: "16px 20px", borderBottom: "1px solid var(--line-soft)", fontWeight: 500, fontSize: 13, color: "var(--ink-60)", letterSpacing: "0.06em" }}>項目</th>
                  <th style={{ textAlign: "left", padding: "16px 20px", borderBottom: "1px solid var(--line-soft)", fontWeight: 500, fontSize: 13, color: "var(--ink-60)", letterSpacing: "0.06em" }}>一般的な開業コンサル（相場感）</th>
                  <th style={{ textAlign: "left", padding: "16px 20px", borderBottom: "2px solid var(--topo-green)", fontWeight: 600, fontSize: 13, color: "var(--topo-green)", letterSpacing: "0.06em" }}>福祉エリアマップ</th>
                </tr>
              </thead>
              <tbody>
                {[
                  { k: "初期接触", a: "まず無料相談・ヒアリング", b: "サイトで内容と料金を先に公開" },
                  { k: "料金の提示", a: "電話・ビデオ後に個別見積もり", b: "¥39,800〜¥149,800（税込・公開）" },
                  { k: "開業支援一括", a: "月額顧問 15〜30万円 / 開業支援パッケージ 50〜200万円前後", b: "なし（候補地評価のみに絞る）" },
                  { k: "意思決定までの時間", a: "数週間〜1〜2ヶ月", b: "3〜7営業日（プラン別）" },
                  { k: "オプション販売", a: "補助金申請、開業後運営、人事研修などを追加提案", b: "なし。追加販売は行わない" },
                  { k: "納品形態", a: "対面・Zoomの口頭説明が中心", b: "PDFレポートで納品（稟議に回せる）" },
                ].map((row, i) => (
                  <tr key={row.k}>
                    <td style={{ padding: "18px 20px", borderBottom: "1px solid var(--line-faint)", fontSize: 14, color: "var(--ink-60)", verticalAlign: "top", width: 160 }}>{row.k}</td>
                    <td style={{ padding: "18px 20px", borderBottom: "1px solid var(--line-faint)", fontSize: 14, color: "var(--ink-75)", verticalAlign: "top", lineHeight: 1.7 }}>{row.a}</td>
                    <td style={{ padding: "18px 20px", borderBottom: "1px solid var(--line-faint)", fontSize: 14, color: "var(--earth-ink)", verticalAlign: "top", lineHeight: 1.7, background: "rgba(63,93,74,0.04)" }}>{row.b}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p className="caption" style={{ marginTop: 16, color: "var(--ink-60)" }}>
            ※ 相場感は公開されている開業支援サービスの料金例をもとにした当方の一般論です。個別企業との比較ではありません。
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead eyebrow="WHY OPEN PRICE" jpLabel="なぜ金額を先に出すのか" title={<>意思決定を早くしたい。<br/>それだけです。</>} />
          <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, marginTop: 56, alignItems: "start" }}>
            <div style={{ display: "grid", gap: 20 }}>
              <p className="body-lg" style={{ color: "var(--earth-ink)" }}>
                多くのコンサルは、無料見積もりで接点を作り、電話やビデオミーティングを重ねて金額を調整していきます。稼ぎを最大化するには合理的な進め方ですが、そのあいだ、あなたの契約判断は止まっています。
              </p>
              <p className="body-lg" style={{ color: "var(--ink-75)" }}>
                福祉エリアマップは、そこに時間を使いません。先に金額を出して、デモ資料で内容を確かめてもらって、納得したら買っていただく。ミーティングで積み上げる説得ではなく、情報の透明さで決めてもらう進め方です。
              </p>
              <p className="body-lg" style={{ color: "var(--ink-75)" }}>
                良い事業者を広げること、その判断基盤をインフラとして整えること——そのために必要なのは、稼ぐための営業工数ではなく、誰でも使える明朗な料金だと考えています。
              </p>
            </div>
            <aside className="card" style={{ padding: 36, background: "var(--washi)" }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--saffron)", letterSpacing: "0.18em", marginBottom: 16 }}>OUR STANCE</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 16 }}>
                {[
                  { h: "しっかりしたものを、早く届ける", body: "稟議に回せるPDFで、3〜7営業日以内に納品。" },
                  { h: "無駄なオプションは、載せない", body: "追加契約を前提にした軽い内容にせず、最初から必要なものを入れる。" },
                  { h: "買うか買わないかは、あなたが決める", body: "デモで納得してから、明示された金額で購入する。交渉もオプションも不要。" },
                ].map(item => (
                  <li key={item.h} style={{ borderLeft: "2px solid var(--topo-green)", paddingLeft: 14 }}>
                    <div className="serif" style={{ fontSize: 16, marginBottom: 4, color: "var(--earth-ink)", lineHeight: 1.5 }}>{item.h}</div>
                    <div className="body-sm" style={{ color: "var(--ink-75)", lineHeight: 1.7 }}>{item.body}</div>
                  </li>
                ))}
              </ul>
            </aside>
          </div>
          <div style={{ marginTop: 56, padding: "32px 36px", background: "var(--earth-ink)", color: "var(--paper)", borderRadius: 4 }}>
            <div className="mono" style={{ color: "var(--saffron)", fontSize: 11, letterSpacing: "0.2em", marginBottom: 12 }}>PURPOSE</div>
            <p className="serif" style={{ fontSize: 22, lineHeight: 1.7, marginBottom: 12 }}>
              目的は、放課後等デイ・児童発達支援のインフラを整えることです。
            </p>
            <p className="body" style={{ color: "rgba(251,250,247,0.75)", lineHeight: 1.8, marginBottom: 16 }}>
              お子さんとご家族に、良い事業所が届くこと。その事業所を営むあなたが、勘ではなく地図で判断できること。明朗な料金は、その実現のためのいちばん素直な手段だと考えています。
            </p>
            <p className="serif" style={{ color: "var(--saffron)", fontSize: 18, lineHeight: 1.7 }}>
              数字ではなく、風景として、判断する。
            </p>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--paper)", borderTop: "1px solid var(--line-faint)", borderBottom: "1px solid var(--line-faint)" }}>
        <div className="container">
          <SectionHead eyebrow="FLOW" jpLabel="利用の流れ" title={<>候補地が1件でも、<br/>3件で迷っていても、始められる。</>} />
          <div className="grid-4-stack" style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {[
              { n: "01", h: "候補地かエリアを入力する", body: "住所、駅名、座標、あるいは現在地から候補地を読み込みます。住所未確定でも相談できます。" },
              { n: "02", h: "無料マップで一次判断", body: "競合、需要、安全性、交通、価格の輪郭を見て、契約前に切るべき候補地を見つけます。" },
              { n: "03", h: "候補地を比較する", body: "最大3件まで比較し、優先順位をつけやすい状態に整えます。" },
              { n: "04", h: "必要ならレポート依頼", body: "比較した候補地を引き継いで、PDFレポートや開業判断の相談へ進めます。" },
            ].map(s => (
              <article key={s.n} className="card" style={{ padding: 24, minHeight: 220 }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--saffron)", letterSpacing: "0.16em", marginBottom: 12 }}>{s.n}</div>
                <h3 className="serif" style={{ fontSize: 18, marginBottom: 10, lineHeight: 1.4 }}>{s.h}</h3>
                <p className="body-sm">{s.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ padding: "28px 32px", background: "var(--sky-mist)", border: "1px solid var(--line-faint)", borderRadius: 4, display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
            <div style={{ flex: 1, minWidth: 280 }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--topo-green)", letterSpacing: "0.18em", marginBottom: 8 }}>FOR FAMILIES</div>
              <h3 className="serif" style={{ fontSize: 22, marginBottom: 6, color: "var(--earth-ink)" }}>お子さんの通所を検討しているご家族の方へ</h3>
              <p className="body-sm" style={{ color: "var(--ink-75)" }}>ここまでは事業者向けの内容です。ご家族向けの使い方・コラムは別のページにまとめています。</p>
            </div>
            <button className="btn btn-primary arrow-r" onClick={() => onNav("for-parents")}>ご家族向けページへ</button>
          </div>
        </div>
      </section>

      <section style={{ padding: "100px 0", background: "var(--earth-ink)", color: "var(--paper)" }}>
        <div className="container" style={{ textAlign: "center" }}>
          <div className="mono" style={{ color: "var(--saffron)", fontSize: 12, letterSpacing: "0.2em", marginBottom: 20 }}>CONTACT</div>
          <h2 className="serif d-3" style={{ marginBottom: 24 }}>候補地が1件でも、3件で迷っていても、<br/>まず相談できます。</h2>
          <p className="body-lg" style={{ color: "rgba(251,250,247,0.75)", maxWidth: 600, margin: "0 auto 32px" }}>
            いまの段階を書いて送ってください。デモや進め方の相談から始められます。
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <a className="btn btn-saffron arrow-r" href={mailto}>メールで相談する</a>
            <a className="btn btn-ghost" style={{ borderColor: "rgba(251,250,247,0.3)", color: "var(--paper)" }} href="https://x.com/okoge_jam" target="_blank" rel="noopener noreferrer">
              @okoge_jam にDMする ↗
            </a>
            <a className="btn btn-ghost" style={{ borderColor: "rgba(251,250,247,0.3)", color: "var(--paper)" }} href="/demo/fukushi-area-map-demo-compare.pdf" target="_blank" rel="noopener noreferrer">
              デモ資料（PDF）を開く ↗
            </a>
            <a className="btn btn-ghost" style={{ borderColor: "rgba(251,250,247,0.3)", color: "var(--paper)" }} href={MAP_URL} target="_blank" rel="noopener noreferrer">
              分析マップを開く ↗
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ProductsPage, AndoDetailPage, FukushiDetailPage });
