/* global React, TopoField, SectionHead */

/* =================== 保護者の方へ =================== */
function ForParentsPage({ 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%EF%BC%88%E4%BF%9D%E8%AD%B7%E8%80%85%EF%BC%89%E3%81%B8%E3%81%AE%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B&body=%E3%81%8A%E5%90%8D%E5%89%8D%EF%BC%9A%0A%E3%81%8A%E5%AD%90%E3%81%95%E3%82%93%E3%81%AE%E5%B9%B4%E9%BD%A2%EF%BC%9A%0A%E3%81%8A%E4%BD%8F%E3%81%BE%E3%81%84%E3%81%AE%E5%9C%B0%E5%9F%9F%EF%BC%9A%0A%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B%E5%86%85%E5%AE%B9%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.4 }}>
          <TopoField seed={31} opacity={0.3} color="#3F5D4A" />
        </div>
        <div className="container" style={{ position: "relative" }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>FOR FAMILIES · お子さんの通所を考えているご家族の方へ</div>
          <h1 className="serif d-1" style={{ marginBottom: 24, letterSpacing: "-0.01em", maxWidth: 900 }}>
            <span style={{ display: "block" }}>「どこがいいの？」の前に、</span>
            <span style={{ display: "block" }}>「どこから通えるか」を。</span>
          </h1>
          <p className="body-lg" style={{ color: "var(--ink-75)", maxWidth: 720, marginBottom: 16 }}>
            放課後等デイサービス・児童発達支援の探し方に迷ったとき、まず「送迎15分圏・通える範囲」から絞るのが最初のステップです。
            特定の事業所に誘導する広告ではなく、公開情報を地図に重ねただけのもので、選ぶのはあなたです。
          </p>
          <p className="body-lg" style={{ color: "var(--ink-75)", maxWidth: 720, marginBottom: 32 }}>
            見学に行く前に、通える範囲の放デイ・児発をざっと眺めて、制度や選び方のコラムに目を通す。
            「放課後等デイサービスの探し方がわからない」「見学で何を確認すればいいか」「通所受給者証はどう申請するか」——
            そういった疑問に、営業なしでフラットに答えるコラムもここから読めます。
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a className="btn btn-primary arrow-r" href={MAP_URL} target="_blank" rel="noopener noreferrer">近くの教室を地図で見る</a>
            <button className="btn btn-ghost arrow-r" onClick={() => onNav("fukushi-area-map")}>事業者の方はこちら</button>
            <a
              className="btn btn-ghost"
              href={`https://twitter.com/intent/tweet?text=${encodeURIComponent("放課後等デイサービス・児童発達支援を、送迎圏から地図で探せる。営業なしでフラットに選べます。")}&url=${encodeURIComponent("https://www.yoriai.life/for-parents")}&via=okoge_jam`}
              target="_blank"
              rel="noopener noreferrer"
              style={{ fontSize: 13 }}
            >
              Xでシェア
            </a>
          </div>
          <p className="caption" style={{ marginTop: 20, color: "var(--ink-60)" }}>
            ※地図は別タブで開きます。公開情報を見やすく整理したもので、事業所の営業は一切していません。
          </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="WHY" jpLabel="ここでできること" title={<>選ぶのはあなた。<br/>地図は、見やすさだけを受け持つ。</>} body="事業所ごとのホームページを順番に読み比べるのは、それだけで消耗します。地図で位置を見て、コラムで制度の前提を知ってから、あなたが気になるところを選ぶ——そのための入り口をここに置いています。" />
          <div className="grid-3-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 56 }}>
            {[
              { num: "01", h: "近所の教室が、地図上で一目で見える", body: "お家や学校の近くに、どんな教室があるのかを地図で眺められます。名前だけの一覧より、通いやすさの輪郭が先にわかります。" },
              { num: "02", h: "特徴より、前提から確かめられる", body: "「◯◯療育」「△△法」のうたい文句より先に、送迎・営業日・対象年齢・受給者証の扱いなど、日々の実務に効く前提を整理しています。" },
              { num: "03", h: "制度の疑問に、中立の視点で答える", body: "受給者証、放デイと児発の違い、医ケア対応の教室の探し方など、事業所の営業トークではない視点でコラムを用意しました。わからないところから読み始めて大丈夫です。" },
            ].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="VIEWPOINT" jpLabel="見ておきたい3つの観点" title={<>「見学で良かった」より、<br/>「通い続けられる」か。</>} body="放デイ・児発の探し方で最も大切なのは、見学の印象より「通える範囲か・通い続けられるか」の確認です。1回の見学で好印象でも、日々のくり返しで続けられなければ意味がありません。見学前に確認しておきたい3つの観点を整理しました。" />
          <div className="grid-3-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 56 }}>
            {[
              {
                icon: "🚶",
                eyebrow: "通いやすさ・通える範囲",
                h: "あなたの暮らしで続けられる距離か",
                body: "通える範囲の事業所がいくつあるかを地図で先に確認すると、探し方が絞れます。送迎の有無、学校・自宅からの距離、雨の日の通い方、他の予定との両立も見学前に確認してください。",
              },
              {
                icon: "🧸",
                eyebrow: "支援の中身",
                h: "何をする場所かを、具体で知る",
                body: "1日の流れ、活動の内容、スタッフの職種と人数、集団の規模。体験で「楽しい」だけで終わらず、普段どんな時間を過ごすのかを確かめてください。",
              },
              {
                icon: "🤝",
                eyebrow: "お子さんとの相性",
                h: "見学でお子さんが安心できるか",
                body: "見学・体験でお子さんが安心していたか、スタッフが特性を理解しようとしていたか、質問に丁寧に答えてくれたか。見学チェックリストはコラムで読めます。",
              },
            ].map(c => (
              <article key={c.eyebrow} className="card" style={{ padding: 32 }}>
                <div style={{ fontSize: 40, marginBottom: 12 }}>{c.icon}</div>
                <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">
          <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
            <div>
              <div className="mono" style={{ fontSize: 12, color: "var(--saffron)", letterSpacing: "0.2em", marginBottom: 20 }}>MESSAGE</div>
              <h2 className="serif d-3" style={{ marginBottom: 24, lineHeight: 1.3 }}>
                完璧な1件を、<br/>最初から探さなくていい。
              </h2>
              <p className="body-lg" style={{ marginBottom: 16, color: "var(--earth-ink)" }}>
                お子さんと事業所の相性は、通い始めてから見えてくるものも多いです。
                合わなければ変えていいし、併用してもかまいません。
              </p>
              <p className="body-lg" style={{ color: "var(--ink-75)" }}>
                まずは「通える範囲に、どんな選択肢があるのか」を眺めるところから。
                焦らず、数件を比べて、気になるところの見学アポをとってみてください。
              </p>
            </div>
            <div style={{ padding: 40, background: "var(--paper)", border: "1px solid var(--line-faint)", borderRadius: 4 }}>
              <p className="serif" style={{ fontSize: 20, lineHeight: 1.8, marginBottom: 16, color: "var(--earth-ink)" }}>
                「ひとつに決める」ではなく、
              </p>
              <p className="serif" style={{ fontSize: 20, lineHeight: 1.8, marginBottom: 16, color: "var(--earth-ink)" }}>
                「合わせていく」ための地図。
              </p>
              <p className="body-sm" style={{ color: "var(--ink-60)", marginTop: 24 }}>
                受給者証・放デイと児発の違い・医ケア対応など、基礎知識はコラムで読めます。
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead eyebrow="COLUMNS" jpLabel="読んでおくと迷いにくいコラム" title={<>放デイ・児発の探し方、<br/>見学の前に読む4本。</>} body="制度、探し方、児発と放デイの違い、療育の効果の考え方。事業所の営業トークとは別の視点でまとめたコラムです。わからないところから読み始めて大丈夫です。" />
          <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24, marginTop: 56 }}>
            {[
              {
                tag: "探し方",
                h: "放デイ・児発の選び方｜保護者がまず見る3つのポイント",
                body: "通える範囲から絞り、支援の中身・お子さんとの相性を見学で確認する順番を整理しました。",
                href: "https://map.yoriai.life/article/howto-choose-houday",
              },
              {
                tag: "制度の違い",
                h: "児童発達支援と放課後等デイサービスの違い",
                body: "対象年齢、利用の目的、ご家族の関わり方まで、実務的に何が違うかを整理しました。",
                href: "https://map.yoriai.life/article/houday-vs-jihatsu",
              },
              {
                tag: "受給者証",
                h: "通所受給者証とは？申請から発行までの流れ",
                body: "どこに申請して、何が要って、どのくらい時間がかかるか。自治体別の違いも含めて順番に。",
                href: "https://map.yoriai.life/article/jyukyushasho-guide",
              },
              {
                tag: "療育の効果",
                h: "「療育は意味ない」と感じたら読むページ",
                body: "「通えば良くなる」ではなく、何をもって効果と見るかをご家族の視点で整理しています。",
                href: "https://map.yoriai.life/article/ryouiku-is-not-useless",
              },
            ].map(c => (
              <a
                key={c.h}
                href={c.href}
                target="_blank"
                rel="noopener noreferrer"
                className="card"
                style={{ padding: 32, display: "block", textDecoration: "none", color: "inherit" }}
              >
                <div className="mono" style={{ fontSize: 11, color: "var(--topo-green)", letterSpacing: "0.16em", marginBottom: 10 }}>{c.tag}</div>
                <h3 className="serif" style={{ fontSize: 22, marginBottom: 12, lineHeight: 1.4 }}>{c.h}</h3>
                <p className="body-sm" style={{ color: "var(--ink-75)" }}>{c.body}</p>
                <p className="mono" style={{ fontSize: 12, color: "var(--topo-green)", marginTop: 16 }}>読む →</p>
              </a>
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: 32 }}>
            <a
              href="https://map.yoriai.life/articles?category=parents"
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn-ghost arrow-r"
            >
              保護者向けコラム一覧を読む
            </a>
          </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 }}>NEXT STEP</div>
          <h2 className="serif d-3" style={{ marginBottom: 24 }}>まずは、通える範囲に<br/>どんな教室があるかを見る。</h2>
          <p className="body-lg" style={{ color: "rgba(251,250,247,0.75)", maxWidth: 600, margin: "0 auto 32px" }}>
            地図は別タブで開きます。気になる事業所を3件ほど選んで、問い合わせ・見学のアポを取るところから始めてみてください。
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <a className="btn btn-saffron arrow-r" href={MAP_URL} target="_blank" rel="noopener noreferrer">近くの教室を地図で見る ↗</a>
            <a className="btn btn-ghost" style={{ borderColor: "rgba(251,250,247,0.3)", color: "var(--paper)" }} href={mailto}>
              運営に質問する
            </a>
            <a
              className="btn btn-ghost"
              href={`https://twitter.com/intent/tweet?text=${encodeURIComponent("放課後等デイサービス・児童発達支援を、送迎圏から地図で探せる。営業なしでフラットに選べます。")}&url=${encodeURIComponent("https://www.yoriai.life/for-parents")}&via=okoge_jam`}
              target="_blank"
              rel="noopener noreferrer"
              style={{ borderColor: "rgba(251,250,247,0.3)", color: "var(--paper)", fontSize: 13 }}
            >
              Xでシェア
            </a>
          </div>
          <p className="caption" style={{ marginTop: 24, color: "rgba(251,250,247,0.5)" }}>
            連絡先: info@yoriai.life（YORIAI）
          </p>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ForParentsPage });