/* global React, LogoMark, ContourDivider, TopoField */
const { useState: useStateH, useEffect: useEffectH } = React;

function HomePage({ onNav }) {
  return (
    <div className="page-enter">
      <HeroHome onNav={onNav} />
      <WhatIsYoriai />
      <ProductsOverview onNav={onNav} />
      <AndoTeaser onNav={onNav} />
      <MapTeaser onNav={onNav} />
      <ColumnsTeaser onNav={onNav} />
      <ThreePillars onNav={onNav} />
      <ContactCTA onNav={onNav} />
    </div>
  );
}

/* -------- Hero -------- */
function HeroHome({ onNav }) {
  return (
    <section style={{ position: "relative", padding: "140px 0 160px", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.9 }}>
        <TopoField seed={3} opacity={0.35} color="#3F5D4A" />
      </div>
      <div className="grain" />
      <div className="container" style={{ position: "relative" }}>
        <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80, alignItems: "end" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 28 }}>
              <span>YORIAI — Topography of Minds</span>
            </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: 520, color: "var(--ink-75)", marginBottom: 40 }}>
              YORIAI（寄合）は、認知の違いで失われた理解・実行・協働の機会を、
              環境とインターフェースから取り戻すプロジェクトです。
              診断名で切らず、困りごとと場面で切る。
              そのための道具を、福祉の現場と個人の暮らし、両側からつくっています。
            </p>
            <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
              <button className="btn btn-primary arrow-r" onClick={() => onNav("products")}>
                プロダクトを見る
              </button>
              <button className="btn btn-ghost" onClick={() => onNav("philosophy")}>
                思想を読む
              </button>
            </div>
          </div>
          <aside style={{ paddingBottom: 8 }}>
            <div className="card" style={{ padding: 28, background: "rgba(251,250,247,0.72)", backdrop: "blur(8px)" }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--topo-green)", letterSpacing: "0.18em", marginBottom: 16 }}>FIELD NOTE · 01</div>
              <p className="serif" style={{ fontSize: 20, lineHeight: 1.7, marginBottom: 16 }}>
                「寄合」とは、立場や背景の異なる人々が集い、対話する場所のこと。
              </p>
              <p className="body-sm">
                等高線が異なる標高を描くように、私たちもまた、それぞれ違う地形の上で暮らしています。
                YORIAIはその地形の上に、道具と地図を置きます。現場の側から、暮らしの側から。
              </p>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

/* -------- What is YORIAI -------- */
function WhatIsYoriai() {
  return (
    <section className="section" style={{ background: "var(--paper)", 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 1.3fr", gap: 120, alignItems: "start" }}>
          <div>
            <div className="eyebrow-jp" style={{ marginBottom: 24 }}>YORIAIとは</div>
            <h2 className="serif d-3">
              <span style={{ display: "block" }}>寄り合う。</span>
              <span style={{ display: "block", color: "var(--topo-green)" }}>異なる地形で。</span>
            </h2>
          </div>
          <div style={{ paddingTop: 8 }}>
            <p className="body-lg" style={{ marginBottom: 24 }}>
              「寄合（よりあい）」は、古くは村の意思決定の場を指した日本語です。
              立場や年齢、役割の違う者が、ひとつの場に集い、時間をかけて言葉を交わす。
            </p>
            <p className="body-lg" style={{ marginBottom: 24, color: "var(--ink-75)" }}>
              私たちは、この言葉に「認知の違いを前提とした、共にある設計」の原型を見ています。
              急がず、競わず、けれど確かに進むための道具を、現場の側から、暮らしの側から、少しずつつくっています。
            </p>
            <div className="grid-3-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--line-faint)" }}>
              <Stat num="2" label="公開中・開発中プロダクト" />
              <Stat num="現場×暮らし" label="両側からつくる" />
              <Stat num="2026" label="プロジェクト始動" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ num, label }) {
  return (
    <div>
      <div className="serif" style={{ fontSize: "clamp(22px, 2vw, 30px)", marginBottom: 6, whiteSpace: "nowrap", letterSpacing: "-0.01em" }}>{num}</div>
      <div className="caption">{label}</div>
    </div>
  );
}

/* -------- Products overview -------- */
function ProductsOverview({ onNav }) {
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="PRODUCTS"
          jpLabel="プロダクト"
          title={<>暮らしの側から、<br/>現場の側から。</>}
          body="ひとつは、やることはあるのに始められない個人に向けた実行支援アプリ。もうひとつは、放課後等デイ・児童発達支援を開こうとする事業者に向けた判断支援の地図。どちらも「環境を変えて、人を変えない」という同じ設計原則から生まれています。"
        />
        <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginTop: 72 }}>
          <ProductCard
            tag="iOS App · 開発中"
            name="Ando"
            jp="ひとつだけ、やるアプリ。"
            body="やることはあるのに始められない人のための実行支援アプリ。キャプチャ、明確化、ボード、ふりかえり。責めずに寄り添うタスク管理を設計しています。現在開発中。"
            accent="saffron"
            onClick={() => onNav("ando")}
          />
          <ProductCard
            tag="Web · 受注開始"
            name="福祉エリアマップ"
            jp="開設判断を、勘ではなく地図で。"
            body="放課後等デイサービス・児童発達支援の開設候補地を、競合密度・送迎圏・学校・医療・ハザード・交通・地価を重ねて比較する。契約前に「進める候補地」と「先に外す候補地」を見分けるためのサービス。"
            accent="green"
            onClick={() => onNav("fukushi-area-map")}
          />
        </div>
      </div>
    </section>
  );
}

function ProductCard({ tag, name, jp, body, accent, onClick }) {
  const accentColor = accent === "saffron" ? "var(--saffron)" : "var(--topo-green)";
  return (
    <article className="card" style={{ padding: 40, position: "relative", overflow: "hidden", cursor: "pointer" }} onClick={onClick}>
      <div style={{ position: "absolute", right: -40, top: -40, width: 260, height: 260, opacity: 0.4 }}>
        <TopoField seed={accent === "saffron" ? 7 : 12} opacity={0.25} color={accentColor} />
      </div>
      <div style={{ position: "relative" }}>
        <span className={`tag ${accent === "saffron" ? "tag-saffron" : ""}`}>{tag}</span>
        <h3 className="serif" style={{ fontSize: 48, marginTop: 24, marginBottom: 8 }}>{name}</h3>
        <p className="serif" style={{ fontSize: 18, color: accentColor, marginBottom: 20 }}>{jp}</p>
        <p className="body" style={{ color: "var(--ink-75)", marginBottom: 32, maxWidth: 440 }}>{body}</p>
        <span className="arrow-r" style={{ fontSize: 14, fontWeight: 500, color: "var(--earth-ink)" }}>
          詳しく見る{" "}
        </span>
      </div>
    </article>
  );
}

/* -------- Ando teaser -------- */
function AndoTeaser({ onNav }) {
  return (
    <section className="section" style={{ background: "var(--washi)", borderTop: "1px solid var(--line-faint)", borderBottom: "1px solid var(--line-faint)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.4 }}>
        <TopoField seed={9} opacity={0.35} color="#D68A3C" />
      </div>
      <div className="container" style={{ position: "relative" }}>
        <div className="teaser-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div className="teaser-visual" style={{ order: 1 }}>
            <AndoPreview />
          </div>
          <div className="teaser-text" style={{ order: 2 }}>
            <div className="eyebrow-jp" style={{ marginBottom: 24, color: "var(--saffron)" }}>Ando</div>
            <h2 className="serif d-3" style={{ marginBottom: 28 }}>
              始められない朝に、<br/>ひとつだけ。
            </h2>
            <p className="body-lg" style={{ color: "var(--ink-75)", marginBottom: 40 }}>
              頭に浮かんだことをそのまま投げ込めて、あとから必要なぶんだけ砕ける。<br/>
              一気にやらせない、積み残しを責めない。静かに続けるためのタスク管理アプリです。
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn-saffron arrow-r" onClick={() => onNav("ando")}>Andoを詳しく見る</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Frame around the Ando screenshot — simple phone-like bezel */
function AndoPreview() {
  return (
    <div style={{ position: "relative", maxWidth: 360, margin: "0 auto" }}>
      <div style={{
        position: "relative",
        borderRadius: 36,
        overflow: "hidden",
        background: "var(--earth-ink)",
        padding: 8,
        boxShadow: "0 24px 60px rgba(26,24,20,0.18), 0 4px 12px rgba(26,24,20,0.08)",
      }}>
        <img
          src="assets/ando-canvas.png"
          alt="Ando の付箋ボード画面。思いついたタスクが付箋として自由に配置されている。"
          loading="lazy"
          style={{ display: "block", width: "100%", height: "auto", borderRadius: 28 }}
        />
      </div>
      <div style={{
        position: "absolute",
        right: -16, bottom: 24,
        background: "var(--paper)",
        border: "1px solid var(--line-faint)",
        borderRadius: 12,
        padding: "10px 14px",
        boxShadow: "0 8px 20px rgba(26,24,20,0.08)",
        maxWidth: 200,
      }}>
        <div className="mono" style={{ fontSize: 10, color: "var(--saffron)", letterSpacing: "0.16em", marginBottom: 4 }}>CANVAS</div>
        <div className="body-sm" style={{ color: "var(--earth-ink)", lineHeight: 1.5 }}>並べる・砕く・片づける。<br/>ひとつだけ、進める。</div>
      </div>
    </div>
  );
}

/* -------- Map teaser -------- */
function MapTeaser({ onNav }) {
  return (
    <section className="section" style={{ background: "var(--sky-mist)", borderTop: "1px solid var(--line-faint)", borderBottom: "1px solid var(--line-faint)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.5 }}>
        <TopoField seed={18} opacity={0.4} color="#3F5D4A" />
      </div>
      <div className="container" style={{ position: "relative" }}>
        <div className="teaser-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div className="teaser-text">
            <div className="eyebrow-jp" style={{ marginBottom: 24 }}>福祉エリアマップ</div>
            <h2 className="serif d-3" style={{ marginBottom: 28 }}>
              契約前に、<br/>先に切れる。
            </h2>
            <p className="body-lg" style={{ color: "var(--ink-75)", marginBottom: 40 }}>
              候補地に住所を入れるだけで、競合密度、送迎15分圏、学校・医療、ハザード、交通、地価を重ねて見られます。
              よさそうに見える物件ほど、切る理由を見つけにくい——そこを早くするための分析マップです。
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-primary arrow-r" href="https://map.yoriai.life/map" target="_blank" rel="noopener noreferrer">分析マップを開く ↗</a>
              <button className="btn btn-ghost arrow-r" onClick={() => onNav("fukushi-area-map")}>サービス詳細</button>
            </div>
          </div>
          <div className="teaser-visual">
            <MiniMapPreview onNav={onNav} />
          </div>
        </div>
      </div>
    </section>
  );
}

function MiniMapPreview({ onNav }) {
  return (
    <div
      className="card"
      onClick={() => onNav("map")}
      style={{
        padding: 0, overflow: "hidden", cursor: "pointer",
        aspectRatio: "4 / 3", position: "relative", background: "#EEF3F0"
      }}>
      {/* Contour background */}
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
        <rect width="400" height="300" fill="#F2F6F2" />
        {[0,1,2,3,4,5,6,7,8].map(i => (
          <path key={i}
            d={`M ${-20 + i * 4} ${80 + i * 14} Q ${120 + i * 3} ${40 + i * 20}, ${260} ${100 + i * 14} T ${440} ${140 + i * 12}`}
            stroke="rgba(63,93,74,0.2)" strokeWidth={i % 3 === 0 ? "1" : "0.6"} fill="none" />
        ))}
        {/* pins */}
        <g>
          <Pin x={120} y={110} label="A" />
          <Pin x={210} y={145} label="B" color="#D68A3C" />
          <Pin x={280} y={185} label="C" />
          <Pin x={95} y={200} label="D" />
        </g>
      </svg>
      <div style={{
        position: "absolute", left: 16, top: 16,
        background: "rgba(251,250,247,0.92)", padding: "8px 12px",
        borderRadius: 8, fontSize: 12, letterSpacing: "0.04em",
        border: "1px solid var(--line-faint)"
      }}>
        <span className="mono" style={{ color: "var(--topo-green)" }}>候補地A · 分析半径 3km</span>
      </div>
      <div style={{
        position: "absolute", right: 16, bottom: 16,
        background: "var(--earth-ink)", color: "var(--paper)",
        padding: "8px 14px", borderRadius: 999, fontSize: 13
      }}>
        分析マップを開く →
      </div>
    </div>
  );
}

function Pin({ x, y, label, color = "#3F5D4A" }) {
  return (
    <g>
      <circle cx={x} cy={y} r="14" fill={color} opacity="0.15" />
      <circle cx={x} cy={y} r="7" fill={color} stroke="#FBFAF7" strokeWidth="1.5" />
      <text x={x} y={y + 3} fontSize="8" textAnchor="middle" fill="#FBFAF7" fontFamily="Inter, sans-serif" fontWeight="600">{label}</text>
    </g>
  );
}

/* -------- Columns teaser -------- */
const COLUMN_ITEMS = [
  {
    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: "放課後等デイサービスの開設前に見るべき3つの軸",
    body: "需要・運営・継続。競合件数だけで判断すると見落としが生まれます。",
    href: "https://map.yoriai.life/article/3-axes-before-opening",
  },
];

function ColumnsTeaser() {
  return (
    <section className="section" style={{ background: "var(--paper)", borderTop: "1px solid var(--line-faint)", borderBottom: "1px solid var(--line-faint)" }}>
      <div className="container">
        <SectionHead
          eyebrow="COLUMNS"
          jpLabel="コラム"
          title={<>制度・選び方・開設判断を、<br/>フラットに整理する。</>}
          body="保護者の方の「放デイ・児発の探し方」から、事業者の方の「開設判断の軸」まで。まず読んでおくと、次の行動が具体的になるコラムを選びました。"
        />
        <div className="grid-2-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 56 }}>
          {COLUMN_ITEMS.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", cursor: "pointer" }}
            >
              <div className="mono" style={{ fontSize: 11, color: "var(--topo-green)", letterSpacing: "0.16em", marginBottom: 10 }}>{c.tag}</div>
              <h3 className="serif" style={{ fontSize: 20, 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: 48 }}>
          <a
            href="https://map.yoriai.life/articles"
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-ghost arrow-r"
          >
            コラム一覧を読む
          </a>
        </div>
      </div>
    </section>
  );
}

/* -------- Three pillars -------- */
function ThreePillars({ onNav }) {
  const pillars = [
    {
      num: "01",
      title: "環境を変える、人を変えない",
      jp: "Change the Environment",
      body: "できないことは、性格ではなく地形のかたちです。本人の努力ではなく、環境とインターフェースの側を変える。責めずにすむ設計を選びます。"
    },
    {
      num: "02",
      title: "診断名ではなく、困りごとで切る",
      jp: "By Difficulty, Not Diagnosis",
      body: "ADHDだから、自閉だから、認知症だから——でひと括りにしない。「説明が入りにくい」「何から始めればいいかわからない」といった場面と困りごとで道具を設計します。"
    },
    {
      num: "03",
      title: "最終判断は人間が持つ",
      jp: "Humans Hold the Call",
      body: "AIに明け渡さない。自動決定ではなく、人の能力発揮を支える道具として使う。本人不在で物事を決めず、判断の責任は人の側に残します。"
    }
  ];
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="PHILOSOPHY"
          jpLabel="思想 · 3本柱"
          title={<>設計は、<br/>思想からはじまる。</>}
          align="center"
        />
        <div className="grid-3-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 80 }}>
          {pillars.map(p => (
            <article key={p.num} className="card" style={{ padding: 40, minHeight: 320 }}>
              <div className="mono" style={{ color: "var(--saffron)", fontSize: 14, letterSpacing: "0.14em", marginBottom: 24 }}>
                {p.num}
              </div>
              <h3 className="serif" style={{ fontSize: 30, marginBottom: 8 }}>{p.title}</h3>
              <p className="mono" style={{ fontSize: 12, color: "var(--topo-green)", letterSpacing: "0.14em", marginBottom: 20 }}>
                {p.jp}
              </p>
              <p className="body" style={{ color: "var(--ink-75)" }}>{p.body}</p>
            </article>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 56 }}>
          <button className="btn btn-ghost arrow-r" onClick={() => onNav("philosophy")}>思想の詳細を読む</button>
        </div>
      </div>
    </section>
  );
}

/* -------- Contact CTA -------- */
function ContactCTA({ onNav }) {
  return (
    <section style={{ padding: "140px 0", background: "var(--earth-ink)", color: "var(--paper)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.4 }}>
        <TopoField seed={21} opacity={0.25} color="#D68A3C" />
      </div>
      <div className="container" style={{ position: "relative", textAlign: "center" }}>
        <div className="mono" style={{ color: "var(--saffron)", fontSize: 12, letterSpacing: "0.2em", marginBottom: 24 }}>
          LET'S MEET AT THE CROSSROADS
        </div>
        <h2 className="serif d-2" style={{ marginBottom: 32 }}>
          寄合に、参加する。
        </h2>
        <p className="body-lg" style={{ color: "rgba(251,250,247,0.75)", maxWidth: 620, margin: "0 auto 40px" }}>
          福祉エリアマップの開設相談、共同開発や自治体連携のお話——
          立場や段階を問わず、お気軽にお声がけください。
        </p>
        <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
          <button className="btn btn-saffron arrow-r" onClick={() => onNav("contact")}>お問い合わせ</button>
          <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="mailto:info@yoriai.life">
            info@yoriai.life
          </a>
        </div>
      </div>
    </section>
  );
}

/* -------- Section head util -------- */
function SectionHead({ eyebrow, jpLabel, title, body, align = "start" }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === "center" ? 720 : "none", margin: align === "center" ? "0 auto" : undefined }}>
      <div style={{ display: "flex", gap: 16, alignItems: "center", justifyContent: align === "center" ? "center" : "flex-start", marginBottom: 24 }}>
        {eyebrow && <span className="eyebrow">{eyebrow}</span>}
        {jpLabel && <span style={{ width: 48, height: 1, background: "var(--line-soft)" }} />}
        {jpLabel && <span className="eyebrow-jp">{jpLabel}</span>}
      </div>
      <h2 className="serif d-2" style={{ marginBottom: body ? 24 : 0 }}>{title}</h2>
      {body && <p className="body-lg" style={{ color: "var(--ink-75)", maxWidth: 640 }}>{body}</p>}
    </div>
  );
}

Object.assign(window, { HomePage, SectionHead, ColumnsTeaser });