/* global React, TopoField, SectionHead */

function PhilosophyPage({ onNav }) {
  const principles = [
    {
      num: "01",
      jp: "人を変えようとしない",
      lead: "困りごとの原因を、本人の努力不足や性格のせいにしない。",
      body: [
        "大人でも子どもでも、「できない」の奥には、環境とのミスマッチがある。",
        "大切なのは、その人を無理に変えることではなく、その人が力を発揮できる環境を見つけること。",
        "私たちは、道具と仕組みでそれを実現します。",
      ],
    },
    {
      num: "02",
      jp: "見えない困りごとに、仕組みで届ける",
      lead: "かつて見過ごされてきた生きづらさに、今は少しずつ名前がつき、支援につながれる時代になってきました。",
      body: [
        "でも、支援があることを知らない。どこに行けばいいかわからない。情報の壁が、つながりを阻んでいる。",
        "私たちは、支援を届ける側ではなく、支援が届く仕組みをつくる側にいます。",
        "Andoは、実行機能の壁に悩む大人のための道具。福祉エリアマップは、子どもと家族が自分に合った支援に出会うための道具。",
        "どちらも、「人を変える」のではなく「環境を整える」ための道具です。",
      ],
    },
    {
      num: "03",
      jp: "子どもたちが自分を責める前に",
      lead: "子どもの困りごとは、わがままでも努力不足でもない。",
      body: [
        "環境との相性、認知の凸凹、感覚の違い。理由はさまざまで、本人にもうまく説明できないことがある。",
        "「自分はだめなんだ」と思い込む前に、理解される経験を届けたい。",
        "私たちが放課後等デイサービスを直接運営するわけではありません。でも、放デイで子どもたちを支えている人たちを、仕組みで支えることはできる。",
        "保護者が「うちの子に合う場所はどこだろう」と迷ったとき、情報の壁で諦めなくていいように。子どもたちが、自分を責めずに自分らしく育つための場所に、たどり着けるように。",
      ],
    },
    {
      num: "04",
      jp: "道具を渡す、使い方を売らない",
      lead: "私たちは、知識を囲い込んで売ることはしません。",
      body: [
        "必要な情報を、必要な人に、障壁なく届ける。",
        "福祉エリアマップは無料で使えます。Andoも、基本機能は無料で提供します。",
        "「使い方を教えてあげる」ではなく、「もう自分でできるよ」と言える道具を渡す。",
        "それが、YORIAIの思想です。",
      ],
    },
  ];

  return (
    <div className="page-enter">
      <section style={{ padding: "100px 0 60px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.4 }}>
          <TopoField seed={23} opacity={0.3} color="#3F5D4A" />
        </div>
        <div className="container" style={{ position: "relative" }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>PHILOSOPHY · 思想</div>
          <h1 className="serif d-1" style={{ marginBottom: 32, maxWidth: 900 }}>
            <span style={{ display: "block" }}>環境を変える、</span>
            <span style={{ display: "block" }}>人を変えない。</span>
          </h1>
          <p className="body-lg" style={{ maxWidth: 640, color: "var(--ink-75)" }}>
            認知の違いで失われた機会を、環境を変えて取り戻す。<br />
            これが、YORIAIのすべての活動の根底にある考え方です。
          </p>
        </div>
      </section>

      <section className="section-sm">
        <div className="container">
          {principles.map((p, i) => (
            <article key={p.num} className="principle-grid" style={{ display: "grid", gridTemplateColumns: "140px 1fr 1.6fr", gap: 40, padding: "60px 0", borderTop: "1px solid var(--line-faint)" }}>
              <div className="serif" style={{ fontSize: 64, color: i % 2 === 1 ? "var(--saffron)" : "var(--topo-green)", lineHeight: 1 }}>{p.num}</div>
              <div>
                <h2 className="serif" style={{ fontSize: 32, marginBottom: 16, lineHeight: 1.3 }}>{p.jp}</h2>
                <p className="serif" style={{ fontSize: 18, lineHeight: 1.7, color: "var(--ink-75)" }}>{p.lead}</p>
              </div>
              <div>
                {p.body.map((para, j) => (
                  <p key={j} className="body-lg" style={{ marginBottom: 16, color: j === 0 ? "var(--earth-ink)" : "var(--ink-75)" }}>{para}</p>
                ))}
              </div>
            </article>
          ))}
        </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="ABOUT THE NAME" jpLabel="寄合という言葉について" title={<>「寄合」という<br/>古い日本語。</>} />
          <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, marginTop: 56 }}>
            <div>
              <p className="serif" style={{ fontSize: 22, lineHeight: 1.8, marginBottom: 24 }}>
                寄合（よりあい）は、古くは村落の意思決定の場を指した日本語。
              </p>
              <p className="body-lg" style={{ color: "var(--ink-75)" }}>
                立場や年齢、役割の違う者が、ひとつの場に集まる。結論を急がず、長い時間をかけて言葉を交わす。反対者を排除せず、全員が腑に落ちるまで待つ——そんな合意形成のかたちを、日本の地域社会は長く持っていました。
              </p>
            </div>
            <div>
              <p className="body-lg" style={{ marginBottom: 24 }}>
                私たちはこの言葉に、現代のプロダクト設計が忘れかけている価値を見ています。速さではなく、誰かを置き去りにしない設計を。最適化ではなく、全員の腑に落ちる時間を。
              </p>
              <p className="body-lg" style={{ color: "var(--ink-75)" }}>
                やり方のちがう人が、ひとつの場に寄り合う。そこにしか作れない道具があると、私たちは考えています。
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function AboutPage({ onNav }) {
  return (
    <div className="page-enter">
      <section style={{ padding: "100px 0 60px" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 24 }}>ABOUT · このサイトについて</div>
          <h1 className="serif d-1" 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 className="section-sm">
        <div className="container grid-2-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <div>
            <div style={{ width: "100%", aspectRatio: "3/4", background: "var(--sky-mist)", borderRadius: 12, position: "relative", overflow: "hidden", border: "1px solid var(--line-faint)" }}>
              <div style={{ position: "absolute", inset: 0, opacity: 0.6 }}>
                <TopoField seed={31} opacity={0.3} color="#3F5D4A" />
              </div>
              <div style={{ position: "absolute", left: 24, bottom: 24, right: 24 }}>
                <div className="caption" style={{ marginBottom: 4 }}>VOICE</div>
                <div className="serif" style={{ fontSize: 22, marginBottom: 8 }}>おこげ</div>
                <div className="body-sm" style={{ color: "var(--ink-75)", lineHeight: 1.7 }}>
                  YORIAI と ENSO（音楽×文化のプロジェクト）を横断する語り手。進捗や考えごとは、おこげの声で発信しています。
                </div>
                <a href="https://x.com/okoge_jam" target="_blank" rel="noopener noreferrer"
                   className="body-sm"
                   style={{ display: "inline-block", marginTop: 12, color: "var(--topo-green)", textDecoration: "underline" }}>
                  @okoge_jam を見る ↗
                </a>
              </div>
            </div>
          </div>
          <div>
            <div className="eyebrow-jp" style={{ marginBottom: 16 }}>はじめに</div>
            <h2 className="serif d-3" style={{ marginBottom: 32 }}>設計者のひとことより、<br/>使う人のひとことを。</h2>
            <p className="body-lg" style={{ marginBottom: 24 }}>
              YORIAIは、ひとりで運営している小さなプロジェクトです。ADHD傾向のある運営者自身が、既存のタスク管理アプリを使いこなせなかったことから、Andoの構想は始まりました。
            </p>
            <p className="body-lg" style={{ marginBottom: 24, color: "var(--ink-75)" }}>
              「自分が使いこなせない」感覚は、ひとりの問題ではないはずだと思っています。福祉エリアマップもまた、事業者が物件の契約前に判断材料を揃えにくいという現場の声から、構想されています。
            </p>
            <p className="body-lg" style={{ color: "var(--ink-75)" }}>
              完璧な解を届けることより、使う人のひとことを重ねていくこと。それが YORIAI の寄合のやり方です。会社ぶらず、誇張せず、ひとつずつ作っています。
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead eyebrow="TIMELINE" jpLabel="道のり" title={<>小さな足跡。</>} />
          <div style={{ marginTop: 48 }}>
            {[
              { y: "2026 Q1", e: "YORIAI プロジェクト始動。認知アクセシビリティを軸にした道具づくりを開始。" },
              { y: "2026 Q2", e: "Ando iOS版 開発継続。福祉エリアマップ 受注開始（本サイト）。" },
              { y: "2026 以降", e: "Ando の実装を進めつつ、福祉エリアマップは対応エリアと機能を段階的に拡張。現場と暮らしの声を聞きながら、ひとつずつ。" },
            ].map(row => (
              <div key={row.y} className="timeline-row" style={{ display: "grid", gridTemplateColumns: "160px 1fr", gap: 32, padding: "24px 0", borderBottom: "1px solid var(--line-faint)" }}>
                <div className="serif" style={{ fontSize: 22, color: "var(--topo-green)" }}>{row.y}</div>
                <div className="body-lg">{row.e}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="container">
          <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
            <div className="card" style={{ padding: 32 }}>
              <div className="eyebrow-jp" style={{ marginBottom: 16 }}>運営について</div>
              <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 12, fontSize: 14 }}>
                <div className="caption">プロジェクト名</div><div>YORIAI（寄合）</div>
                <div className="caption">運営形態</div><div>個人運営（法人ではありません）</div>
                <div className="caption">発足</div><div>2026年</div>
                <div className="caption">所在</div><div>東京</div>
                <div className="caption">やっていること</div><div>認知アクセシビリティを軸にした<br/>道具の企画・開発・運営</div>
                <div className="caption">道具</div><div>Ando / 福祉エリアマップ</div>
                <div className="caption">発信</div><div>X <a href="https://x.com/okoge_jam" target="_blank" rel="noopener noreferrer" style={{ color: "var(--topo-green)", textDecoration: "underline" }}>@okoge_jam</a>（おこげ名義）</div>
              </div>
            </div>
            <div className="card" style={{ padding: 32 }}>
              <div className="eyebrow-jp" style={{ marginBottom: 16 }}>いまやっていること</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--saffron)", marginBottom: 4, letterSpacing: "0.08em" }}>暮らしの側から</div>
                  <div className="body-sm" style={{ color: "var(--earth-ink)", lineHeight: 1.7 }}>
                    Andoで、始められない朝の「ひとつだけ、やる」を支える。責めずに寄り添う設計のタスク管理。
                  </div>
                </div>
                <div style={{ paddingTop: 14, borderTop: "1px solid var(--line-faint)" }}>
                  <div className="mono" style={{ fontSize: 11, color: "var(--topo-green)", marginBottom: 4, letterSpacing: "0.08em" }}>現場の側から</div>
                  <div className="body-sm" style={{ color: "var(--earth-ink)", lineHeight: 1.7 }}>
                    福祉エリアマップで、放課後等デイ・児童発達支援の開設判断を支える。事業者が物件契約前に候補地を切れるように。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="container">
          <div className="card" style={{ padding: 32, maxWidth: 820 }}>
            <div className="eyebrow-jp" style={{ marginBottom: 16 }}>運営者について</div>
            <p className="body-sm" style={{ color: "var(--earth-ink)", lineHeight: 1.9, margin: 0, wordBreak: "auto-phrase" }}>
              <span style={{ display: "inline-block" }}>運営者は、</span>
              <span style={{ display: "inline-block" }}>福祉現場の事業運営と、</span>
              <span style={{ display: "inline-block" }}>採用・組織づくりの仕事を経て</span>
              <span style={{ display: "inline-block" }}>YORIAI を始めました。</span>
              <span style={{ display: "inline-block" }}>当事者として、</span>
              <span style={{ display: "inline-block" }}>運営者として、</span>
              <span style={{ display: "inline-block" }}>両方の目で道具を設計しています。</span>
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactPage({ onNav }) {
  const [form, setForm] = React.useState({ name: "", email: "", role: "福祉事業者（開設相談）", message: "" });
  const [sent, setSent] = React.useState(false);

  // mailto fallback — submits to info@yoriai.life with pre-filled subject/body
  const handleSend = (e) => {
    e.preventDefault();
    const subject = encodeURIComponent(`[${form.role}] ${form.name || "お問い合わせ"}`);
    const body = encodeURIComponent(
      `お名前: ${form.name}\n` +
      `メール: ${form.email}\n` +
      `お立場: ${form.role}\n\n` +
      `ご用件:\n${form.message}\n`
    );
    window.location.href = `mailto:info@yoriai.life?subject=${subject}&body=${body}`;
    setSent(true);
  };

  return (
    <div className="page-enter">
      <section style={{ padding: "100px 0 60px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.35 }}>
          <TopoField seed={42} opacity={0.3} color="#D68A3C" />
        </div>
        <div className="container" style={{ position: "relative" }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>CONTACT · お問い合わせ</div>
          <h1 className="serif d-1" style={{ marginBottom: 32, maxWidth: 720 }}>
            <span style={{ display: "block" }}>寄合に、</span>
            <span style={{ display: "block" }}>参加する。</span>
          </h1>
          <p className="body-lg" style={{ maxWidth: 640, color: "var(--ink-75)" }}>
            福祉エリアマップの開設相談、Andoへのフィードバック、メディア・自治体・研究のお問い合わせ——背景の違いは歓迎です。お気軽にどうぞ。
          </p>
        </div>
      </section>

      <section className="section-sm">
        <div className="container grid-2-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
          <div>
            <div className="eyebrow-jp" style={{ marginBottom: 16 }}>直接のご連絡</div>
            <a href="mailto:info@yoriai.life" className="serif" style={{ fontSize: 26, color: "var(--topo-green)", display: "block", marginBottom: 32 }}>info@yoriai.life</a>

            <div style={{ paddingTop: 32, borderTop: "1px solid var(--line-faint)", marginBottom: 32 }}>
              <div className="eyebrow-jp" style={{ marginBottom: 12 }}>福祉エリアマップのご相談</div>
              <p className="body-sm" style={{ color: "var(--ink-75)", lineHeight: 1.8, marginBottom: 12 }}>
                候補地の足切りから、3候補地の比較まで。プランは3種類ご用意しています。
              </p>
              <a href="#/products/fukushi-area-map"
                onClick={(e) => { e.preventDefault(); onNav("fukushi-area-map"); }}
                className="body-sm"
                style={{ color: "var(--topo-green)", textDecoration: "underline" }}>
                プラン詳細を見る →
              </a>
            </div>

            <div style={{ paddingTop: 32, borderTop: "1px solid var(--line-faint)" }}>
              <div className="eyebrow-jp" style={{ marginBottom: 12 }}>返信について</div>
              <p className="body-sm" style={{ color: "var(--ink-75)", lineHeight: 1.8 }}>
                平日3営業日以内にご返信します。少人数で運営しているため、お急ぎのご相談は件名に【急】とお書き添えください。
              </p>
            </div>
          </div>

          <form onSubmit={handleSend} className="card" style={{ padding: 40 }}>
            {sent ? (
              <div style={{ padding: 40, textAlign: "center" }}>
                <div className="serif" style={{ fontSize: 28, marginBottom: 16 }}>メールアプリを開きました。</div>
                <p className="body" style={{ color: "var(--ink-75)", marginBottom: 24, lineHeight: 1.8 }}>
                  そのまま送信してください。<br/>
                  うまく開かない場合は、<a href="mailto:info@yoriai.life" style={{ color: "var(--topo-green)" }}>info@yoriai.life</a> まで直接ご連絡ください。
                </p>
                <button type="button" className="btn btn-ghost" onClick={() => { setSent(false); setForm({ name: "", email: "", role: "福祉事業者（開設相談）", message: "" }); }}>
                  もう一度書く
                </button>
              </div>
            ) : (
              <>
                <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 20 }}>
                  <Field label="お名前" value={form.name} onChange={v => setForm({ ...form, name: v })} placeholder="寄合 たろう" />
                  <Field label="メールアドレス" type="email" value={form.email} onChange={v => setForm({ ...form, email: v })} placeholder="you@example.com" />
                </div>
                <div style={{ marginBottom: 20 }}>
                  <label className="caption" style={{ display: "block", marginBottom: 10 }}>お立場</label>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                    {[
                      "福祉事業者（開設相談）",
                      "福祉事業者（その他）",
                      "当事者・家族",
                      "自治体",
                      "メディア・研究",
                      "その他",
                    ].map(r => (
                      <button key={r} type="button"
                        onClick={() => setForm({ ...form, role: r })}
                        style={{
                          padding: "8px 14px", fontSize: 13, borderRadius: 999,
                          border: `1px solid ${form.role === r ? "var(--earth-ink)" : "var(--line-soft)"}`,
                          background: form.role === r ? "var(--earth-ink)" : "transparent",
                          color: form.role === r ? "var(--paper)" : "var(--ink-75)",
                          cursor: "pointer",
                          fontFamily: "inherit",
                        }}>{r}</button>
                    ))}
                  </div>
                </div>
                <div style={{ marginBottom: 24 }}>
                  <label className="caption" style={{ display: "block", marginBottom: 10 }}>ご用件</label>
                  <textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })}
                    rows={6} placeholder="どんなことでも、どうぞ。開設相談の場合は、検討中のエリア・時期・候補地件数などお書き添えいただけると助かります。"
                    style={{ width: "100%", padding: "14px 16px", background: "var(--washi)", border: "1px solid var(--line-faint)", borderRadius: 10, fontSize: 15, fontFamily: "inherit", lineHeight: 1.7, resize: "vertical", color: "var(--earth-ink)" }} />
                </div>
                <button type="submit"
                  className="btn btn-primary arrow-r" style={{ width: "100%", justifyContent: "center" }}>
                  メールで送信する
                </button>
                <p className="body-sm" style={{ color: "var(--ink-60)", marginTop: 12, textAlign: "center", fontSize: 12 }}>
                  送信ボタンを押すと、お使いのメールアプリが開きます。
                </p>
              </>
            )}
          </form>
        </div>
      </section>
    </div>
  );
}

function Field({ label, value, onChange, placeholder, type = "text" }) {
  return (
    <div>
      <label className="caption" style={{ display: "block", marginBottom: 8 }}>{label}</label>
      <input type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
        style={{ width: "100%", padding: "12px 14px", background: "var(--washi)", border: "1px solid var(--line-faint)", borderRadius: 10, fontSize: 15, fontFamily: "inherit", color: "var(--earth-ink)" }} />
    </div>
  );
}

/* =================== 特定商取引法に基づく表記 =================== */
function TokushohoPage({ onNav }) {
  const rows = [
    { k: "販売業者", v: "YORIAI（寄合）" },
    { k: "運営統括責任者", v: "ご請求があり次第、遅滞なく開示します（特定商取引法ガイドラインに基づく）" },
    { k: "所在地", v: "東京都（詳細は請求があり次第、遅滞なく開示します）" },
    { k: "連絡先", v: <a href="mailto:info@yoriai.life" style={{ color: "var(--topo-green)", textDecoration: "underline" }}>info@yoriai.life</a> },
    { k: "電話番号", v: "請求があり次第、遅滞なく開示します（メールでのお問い合わせを推奨）" },
    { k: "販売価格", v: "各プランの販売ページに税込で記載（簡易診断 ¥39,800 / 比較レポート ¥79,800 / 開業判断 ¥149,800）" },
    { k: "商品代金以外の必要料金", v: "なし（銀行振込手数料のみお客様負担）" },
    { k: "支払い方法", v: "銀行振込（請求書発行後、原則7日以内のお支払い）" },
    { k: "支払い時期", v: "納品前（請求書発行後の前払い）" },
    { k: "納期", v: "各プランの納品目安に従い、3〜7営業日以内に納品" },
    { k: "商品の引渡時期", v: "入金確認後、上記納期に従ってPDFレポートをメールで納品" },
    { k: "返品・交換", v: "成果物の性質上、納品後の返品・返金には応じられません。納品内容に重大な誤りがあった場合は、速やかに修正対応します。" },
    { k: "事業内容", v: "放課後等デイサービス・児童発達支援の開設判断支援、認知アクセシビリティに関するプロダクト開発" },
  ];
  return (
    <div className="page-enter">
      <section style={{ padding: "100px 0 40px" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 24 }}>LEGAL · 特定商取引法に基づく表記</div>
          <h1 className="serif d-2" style={{ marginBottom: 24, maxWidth: 900 }}>
            特定商取引法に基づく表記
          </h1>
          <p className="body-sm" style={{ color: "var(--ink-60)", maxWidth: 720 }}>
            最終更新: 2026-04-18
          </p>
        </div>
      </section>
      <section className="section-sm">
        <div className="container" style={{ maxWidth: 880 }}>
          <dl className="legal-dl" style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 0, margin: 0 }}>
            {rows.map((r, i) => (
              <React.Fragment key={r.k}>
                <dt className="caption" style={{ padding: "20px 16px", borderTop: i === 0 ? "1px solid var(--line-faint)" : "none", borderBottom: "1px solid var(--line-faint)", color: "var(--ink-60)", fontSize: 13 }}>{r.k}</dt>
                <dd className="body-sm" style={{ padding: "20px 16px", borderTop: i === 0 ? "1px solid var(--line-faint)" : "none", borderBottom: "1px solid var(--line-faint)", margin: 0, color: "var(--earth-ink)", lineHeight: 1.8 }}>{r.v}</dd>
              </React.Fragment>
            ))}
          </dl>
          <p className="caption" style={{ marginTop: 24, color: "var(--ink-60)" }}>
            ご不明点は <a href="mailto:info@yoriai.life" style={{ color: "var(--topo-green)", textDecoration: "underline" }}>info@yoriai.life</a> までお問い合わせください。
          </p>
        </div>
      </section>
    </div>
  );
}

/* =================== プライバシーポリシー =================== */
function PrivacyPage({ onNav }) {
  return (
    <div className="page-enter">
      <section style={{ padding: "100px 0 40px" }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 24 }}>LEGAL · プライバシーポリシー</div>
          <h1 className="serif d-2" style={{ marginBottom: 24, maxWidth: 900 }}>
            プライバシーポリシー
          </h1>
          <p className="body-sm" style={{ color: "var(--ink-60)", maxWidth: 720 }}>
            最終更新: 2026-04-18
          </p>
        </div>
      </section>
      <section className="section-sm">
        <div className="container" style={{ maxWidth: 880, display: "grid", gap: 32 }}>
          {[
            {
              h: "1. 取得する情報",
              p: [
                "YORIAI（以下「当方」）は、お問い合わせ・サービスのご提供にあたり、必要最小限の個人情報のみを取得します。具体的には、お名前、メールアドレス、ご所属（事業者名）、ご相談内容、候補地情報などです。",
                "Andoアプリの利用にあたり取得する情報は、アプリ内の設定画面およびプライバシーポリシーに別途明示します。",
              ],
            },
            {
              h: "2. 利用目的",
              p: [
                "取得した個人情報は、お問い合わせへのご返信、ご依頼いただいたサービス（開設判断支援など）の提供、請求書の発行、法令に基づく対応のためにのみ利用します。マーケティング目的の無断利用・第三者への販売は行いません。",
              ],
            },
            {
              h: "3. 第三者提供",
              p: [
                "ご本人の同意がある場合、法令に基づく場合、または当方が利用している外部サービス（メール配信、決済、クラウドストレージ等）で業務上必要な範囲に限り、適切な契約・管理のもとで取り扱います。",
              ],
            },
            {
              h: "4. 保管と安全管理",
              p: [
                "個人情報は、ご相談・ご契約の目的が達成されるまでの期間、適切なセキュリティ対策のもとで保管します。不要になった情報は、合理的な期間内に削除します。",
              ],
            },
            {
              h: "5. 開示・訂正・削除のご請求",
              p: [
                "ご本人からの開示・訂正・削除・利用停止のご請求に対して、法令に従い、合理的な期間内に対応します。",
                "ご請求は info@yoriai.life までメールでお送りください。",
              ],
            },
            {
              h: "6. Cookie・アクセス解析",
              p: [
                "当サイトでは、サイトの改善のためにアクセス解析ツール（Vercel Analytics等）を使用することがあります。取得されるのはドメイン全体のトラフィック傾向であり、個人を特定する情報は含まれません。",
              ],
            },
            {
              h: "7. 改定",
              p: [
                "本ポリシーは、法令の変更・サービス内容の変更に応じて改定することがあります。重要な変更があった場合は、サイト上で告知します。",
              ],
            },
            {
              h: "8. お問い合わせ窓口",
              p: [
                "個人情報の取り扱いに関するお問い合わせは、info@yoriai.life までご連絡ください。",
              ],
            },
          ].map((s, i) => (
            <div key={i}>
              <h2 className="serif" style={{ fontSize: 22, marginBottom: 12, color: "var(--earth-ink)" }}>{s.h}</h2>
              {s.p.map((para, j) => (
                <p key={j} className="body" style={{ marginBottom: 12, color: "var(--ink-75)", lineHeight: 1.9 }}>{para}</p>
              ))}
            </div>
          ))}
          <p className="caption" style={{ marginTop: 24, color: "var(--ink-60)" }}>
            お問い合わせ: <a href="mailto:info@yoriai.life" style={{ color: "var(--topo-green)", textDecoration: "underline" }}>info@yoriai.life</a>
          </p>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PhilosophyPage, AboutPage, ContactPage, TokushohoPage, PrivacyPage });
