/* =============================================================
   Shared UI components (React + Babel)
   斜視手術件数 全国調査
   全コンポーネントを window に公開して各ページから利用する
   ============================================================= */

/* ---- Inline icons (line, 1.6 stroke) ---- */
function Icon({ name, size = 18 }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "eye": return (<svg {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>);
    case "info": return (<svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg>);
    case "search": return (<svg {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.2-3.2"/></svg>);
    case "pin": return (<svg {...p}><path d="M12 21s-6-5.3-6-10a6 6 0 1 1 12 0c0 4.7-6 10-6 10Z"/><circle cx="12" cy="11" r="2.3"/></svg>);
    case "ext": return (<svg {...p}><path d="M14 4h6v6M20 4 10 14M19 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6"/></svg>);
    case "chev": return (<svg {...p}><path d="m9 6 6 6-6 6"/></svg>);
    case "back": return (<svg {...p}><path d="M15 6 9 12l6 6"/></svg>);
    case "grid": return (<svg {...p}><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>);
    case "rows": return (<svg {...p}><path d="M3 6h18M3 12h18M3 18h18"/></svg>);
    case "trend": return (<svg {...p}><path d="M3 17l6-6 4 4 7-7"/><path d="M17 8h4v4"/></svg>);
    case "x": return (<svg {...p}><path d="M6 6l12 12M18 6 6 18"/></svg>);
    case "check": return (<svg {...p}><path d="M20 6 9 17l-5-5"/></svg>);
    case "building": return (<svg {...p}><path d="M4 21V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v16"/><path d="M15 9h4a1 1 0 0 1 1 1v11M8 8h3M8 12h3M8 16h3"/></svg>);
    case "quote": return (<svg {...p}><path d="M7 7h4v4c0 2.5-1.5 4-4 4.5M14 7h4v4c0 2.5-1.5 4-4 4.5"/></svg>);
    case "user": return (<svg {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5"/></svg>);
    default: return null;
  }
}

/* ---- 固定注記（上部短文の帯） ---- */
function TopNote() {
  return (
    <div className="topnote" role="note">
      <div className="wrap">
        <Icon name="info" size={17} />
        <span>本ページは、締切までに回答のあった施設を掲載した「回答施設内一覧（集計）」です。</span>
      </div>
    </div>
  );
}

/* ---- Header ---- */
function SiteHeader({ current }) {
  return (
    <header className="site-header">
      <div className="wrap">
        <a className="brand" href="index.html" aria-label="斜視手術件数 全国調査 トップ">
          <span className="brand-mark" aria-hidden="true"><Icon name="eye" size={22} /></span>
          <span className="brand-text">
            <b>斜視手術件数 全国調査</b>
            <span>2023–2025 回答施設内一覧（集計）</span>
          </span>
        </a>
        <nav className="header-nav" aria-label="グローバルナビ">
          <a href="index.html" aria-current={current === "national" ? "page" : undefined}>全国から探す</a>
          <a href="index.html#about">この調査について</a>
        </nav>
      </div>
    </header>
  );
}

/* ---- Breadcrumb ---- */
function Crumbs({ items }) {
  return (
    <nav className="crumbs" aria-label="パンくず">
      <div className="wrap">
        <ol>
          {items.map((it, i) => (
            <li key={i}>{it.href ? <a href={it.href}>{it.label}</a> : <span aria-current="page">{it.label}</span>}</li>
          ))}
        </ol>
      </div>
    </nav>
  );
}

/* ---- 16:9 placeholder figure ---- */
function Placeholder({ label = "アイキャッチ画像（16:9）", icon = "eye" }) {
  return (
    <div className="ph" role="img" aria-label={label}>
      <div className="ph-inner">
        <Icon name={icon} size={34} />
        <span>{label}</span>
      </div>
    </div>
  );
}

/* ---- 件数レンジ バッジ（テキストのみ・非ランキング・均一表示） ---- */
function RangeBadge({ value }) {
  const muted = !value || value === "未回答" || value === "—" || value === "不明";
  const text = !value || value === "—" ? "—" : value;
  return <span className={"badge" + (muted ? " badge-muted" : "")}>{text}</span>;
}

/* ---- 実施有無 タグ ---- */
function HasTag({ value }) {
  const yes = value === "有";
  return (
    <span className={"tag-has" + (yes ? "" : " is-no")}>
      <span className="dot" aria-hidden="true"></span>
      {yes ? "手術 実施有" : "実施無"}
    </span>
  );
}

/* ---- 種別 バッジ ---- */
function TypeBadge({ value }) {
  return <span className="badge badge-type"><Icon name={value === "病院" ? "building" : "pin"} size={13} />{value}</span>;
}

/* ---- DPC 参考情報ボックス ---- */
function DpcBox() {
  return (
    <aside className="dpc" aria-label="参考情報（DPC）">
      <h3>参考情報（DPC公表情報：別指標）</h3>
      <p>DPCの公表情報は、集計期間（年度）や対象範囲等が本調査と異なるため、統合はせず“参考情報（別指標）”として掲載します。</p>
      <a className="ext-link" href="https://caloo.jp/dpc/disease/994#achievement" target="_blank" rel="noopener noreferrer">
        DPC公表情報（Caloo）を開く <Icon name="ext" size={15} />
      </a>
      <p className="ext-note">※ 外部サイトが新しいタブで開きます。集計の前提が本調査と異なる点にご注意ください。</p>
    </aside>
  );
}

/* ---- 固定注記（下部 詳細） ---- */
function FooterNotes() {
  return (
    <section className="notes" id="notes" aria-labelledby="notes-h">
      <div className="wrap">
        <h2 id="notes-h">この調査結果の前提と注記</h2>
        <ul>
          <li>未回答施設が存在し得るため、全国の全医療機関を網羅した結果ではありません。</li>
          <li>件数は施設の自己申告に基づき、集計期間（暦年/年度等）や同日両眼手術の扱い（1件/2件等）が施設により異なる可能性があります。</li>
          <li>医療の優劣や治療成績を比較する目的ではありません。</li>
        </ul>
        <p className="meta">斜視手術件数 全国調査（2023–2025）／回答施設内一覧（集計）。掲載内容は予告なく更新される場合があります。</p>
        <div className="operator">
          <span className="op-name">運営：THE J.V.株式会社</span>
          <span className="op-meta">東京都新宿区</span>
        </div>
      </div>
    </section>
  );
}

/* ---- 調査概要（方法・送付/回答数） ---- */
function SurveyOverview() {
  return (
    <section className="section" id="overview" aria-labelledby="overview-h">
      <div className="wrap">
        <div className="section-head">
          <h2 id="overview-h">調査概要</h2>
          <span className="sub">「回答施設内集計」の前提</span>
        </div>
        <div className="overview-grid">
          <div className="panel panel-pad ov-stats">
            <div className="ov-stat">
              <span className="ov-n">273</span>
              <span className="ov-l">送付施設数</span>
            </div>
            <span className="ov-arrow" aria-hidden="true"><Icon name="chev" size={20} /></span>
            <div className="ov-stat ov-stat-accent">
              <span className="ov-n">75</span>
              <span className="ov-l">回答施設数</span>
            </div>
            <p className="ov-stats-note">締切までに回答のあった施設のみを集計しています（回答施設内集計）。</p>
          </div>
          <dl className="panel panel-pad ov-dl">
            <div className="ov-row"><dt>調査名</dt><dd>斜視手術件数 全国調査（2023–2025）</dd></div>
            <div className="ov-row"><dt>対象</dt><dd>DPC対象病院／非DPCの眼科クリニック・病院</dd></div>
            <div className="ov-row"><dt>方法</dt><dd>郵便（往復はがき）による自己申告</dd></div>
            <div className="ov-row"><dt>調査期間</dt><dd>2026年4月9日〜4月30日（締切：4月30日必着）</dd></div>
            <div className="ov-row"><dt>調査項目</dt><dd>①施設名　②斜視手術の実施有無（有／無）　③斜視手術件数（2023・2024・2025年）</dd></div>
            <div className="ov-row"><dt>集計対象</dt><dd>締切までに回答のあった施設（回答施設内集計）</dd></div>
          </dl>
        </div>
      </div>
    </section>
  );
}

/* ---- この調査について（背景） ---- */
function AboutSurvey() {
  return (
    <section className="section" id="about" aria-labelledby="about-h">
      <div className="wrap">
        <div className="section-head"><h2 id="about-h">この調査について</h2></div>
        <figure className="flow-figure">
          <img src={(window.__resources && window.__resources.flowImg) || "flow.png"} width="1672" height="941"
            alt="この調査の流れ：①相談のきっかけ（眼鏡やスマートフォンなど、見え方の悩みで相談を検討）→ ②全国調査（調査票で全国の医療機関に件数を調査）→ ③探しやすく（都道府県で探せる一覧と地図で相談先を見つけやすく）" />
          <figcaption className="flow-cap">相談のきっかけ → 全国調査 → 都道府県で探しやすく、という流れで情報を整理しています。</figcaption>
        </figure>
        <figure className="flow-figure">
          <img src={(window.__resources && window.__resources.surveyDocsImg) || "調査チラシハガキ.jpg"}
            alt="今回の調査で使用したお願い文（チラシ）と返信はがき（回答票）。施設名・斜視手術の実施有無・年別件数の3項目を記入して返送する形式。" />
          <figcaption className="flow-cap">今回の調査で使用したお願い文と返信はがき（回答票）。3項目の記入のみで回答できる簡易設計です。</figcaption>
        </figure>
        <div className="panel panel-pad about-body">
          <p>斜視は、お子さんの先天的な内斜視などで保護者の方が受診先を探すことがある一方、近年はスマートフォン等のデジタル機器の普及に伴う近見作業の増加を背景に、若年者の後天性共同性内斜視（いわゆる急性内斜視）との関連が議論され、学会からも視距離・休憩に関する提言が示されています。</p>
          <p>斜視は視機能の問題に加えて、外見の印象や学校生活など心理・社会面にも影響することがあります。患者さんやご家族が「どこに相談すればよいか」を検討する際、情報が大規模病院に集約されて見えやすく、地域で手術を担う施設の情報が見つけにくい場合があります。</p>
          <p>そこで本調査では、DPC対象病院に加えて非DPC施設も対象に、斜視手術の提供実態（件数）を「回答施設内集計」として可視化し、都道府県で探せる形で公開しています。なお、本調査は治療成績や医療機関の優劣を比較する目的ではありません。</p>
        </div>
        <figure className="flow-figure survey-types-figure">
          <img src={(window.__resources && window.__resources.shashiTypesImg) || "斜視タイプ.jpg"}
            alt="斜視の主なタイプ：正常の目／内斜視（目が内側に向く）／外斜視（目が外側に向く）／上斜視（目が上に向く）／下斜視（目が下に向く）のイラスト図解。" />
          <figcaption className="flow-cap">斜視の主なタイプ。内斜視・外斜視・上斜視・下斜視など、ずれの方向により分類されます。</figcaption>
        </figure>
      </div>
    </section>
  );
}

/* ---- 専門家コメント枠（後日差し込み） ----
   ▼ 編集方法：下の EXPERT_COMMENTS 配列を編集。
   - status:"published" にしてコメントを入れると掲載カードになります。
   - status:"pending"（既定）は「準備中」プレースホルダー表示。
   - 掲載可否・肩書表記は事前確認のうえ反映してください。 */
const EXPERT_COMMENTS = [
  { role: "斜視・小児眼科の専門家", status: "pending", guide: "近見作業の増加と急性内斜視の受診行動／早期受診の重要性などを一般向けに。", name: "", title: "", quote: "" },
  { role: "視能訓練士（斜視検査に詳しい専門家）", status: "pending", guide: "視距離・休憩などの具体的な工夫／異常を感じたときの行動を短く。", name: "", title: "", quote: "" },
  { role: "（任意）", status: "pending", guide: "大人にも起こり得る／複視など受診のきっかけについて。", name: "", title: "", quote: "" }
];

function ExpertComments() {
  return (
    <section className="section" id="experts" aria-labelledby="experts-h">
      <div className="wrap">
        <div className="section-head">
          <h2 id="experts-h">専門家コメント</h2>
          <span className="sub">掲載可否・肩書は事前確認のうえ掲載します</span>
        </div>
        <div className="expert-grid">
          {EXPERT_COMMENTS.map((c, i) => {
            const published = c.status === "published" && c.quote;
            return (
              <article className={"expert-card" + (published ? "" : " is-pending")} key={i}>
                <div className="expert-quote-mark" aria-hidden="true"><Icon name="quote" size={22} /></div>
                {published ? (
                  <p className="expert-quote">{c.quote}</p>
                ) : (
                  <p className="expert-placeholder">
                    <span className="expert-pending-badge">コメント準備中</span>
                    {c.guide}
                  </p>
                )}
                <div className="expert-person">
                  <span className="expert-avatar" aria-hidden="true"><Icon name="user" size={20} /></span>
                  <span className="expert-id">
                    <span className="expert-name">{published && c.name ? c.name : c.role}</span>
                    <span className="expert-title">{published && c.title ? c.title : "掲載予定"}</span>
                  </span>
                </div>
              </article>
            );
          })}
        </div>
        <p className="expert-note">※ 本枠は専門家コメントの掲載スペースです。コメントは取得・確認後に差し込みます（現在はプレースホルダー表示）。</p>
      </div>
    </section>
  );
}
function EvidenceLinks() {
  return (
    <aside className="evidence" aria-labelledby="evidence-h">
      <h3 id="evidence-h">参考（エビデンス・背景）</h3>
      <p className="evidence-lede">若年者の後天共同性内斜視とデジタル機器に関する、学会等の提言・情報です。本調査とは目的・前提が異なります。</p>
      <ul className="evidence-list">
        <li>
          <a href="https://www.jasa-web.jp/c-news/6456" target="_blank" rel="noopener noreferrer">
            若年者の後天共同性内斜視に対する提言（日本弱視斜視学会・日本小児眼科学会・日本視能訓練士協会）
            <Icon name="ext" size={14} />
          </a>
        </li>
        <li>
          <a href="https://www.gankaikai.or.jp/school-health/detail2/__icsFiles/afieldfile/2025/06/02/comitant_esotropia.pdf" target="_blank" rel="noopener noreferrer">
            提言 全文（PDF・日本眼科医会サイト掲載）
            <Icon name="ext" size={14} />
          </a>
        </li>
      </ul>
      <p className="evidence-note">※ 外部サイトが新しいタブで開きます。リンク先の内容は各発行団体に帰属します。</p>
    </aside>
  );
}

/* ---- 公開 ---- */
Object.assign(window, {
  Icon, TopNote, SiteHeader, Crumbs, Placeholder,
  RangeBadge, HasTag, TypeBadge, DpcBox, FooterNotes,
  SurveyOverview, AboutSurvey, EvidenceLinks, ExpertComments
});