/* 制度活用ナビ — 画面コンポーネント */
const { useState, useEffect, useRef } = React;

/* ── 小さなアイコン(線画。簡素な形状のみ) ── */
const Ic = {
  arrow: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}>
      <path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  back: (p) => (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" {...p}>
      <path d="M19 12H6M11 6l-6 6 6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  check: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}>
      <path d="M4 12.5l5 5L20 6.5" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  lock: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}>
      <rect x="4.5" y="10.5" width="15" height="10" rx="2.2" stroke="currentColor" strokeWidth="2" />
      <path d="M8 10.5V8a4 4 0 018 0v2.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  ),
  coin: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}>
      <circle cx="12" cy="12" r="8.4" stroke="currentColor" strokeWidth="2" />
      <path d="M12 7.5v9M9.6 10h3.2a1.8 1.8 0 010 3.6H9.6m0 0h3.6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  xLogo: (p) => (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z" />
    </svg>
  ),
  shield: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}>
      <path d="M12 3l7 2.5v5.5c0 4.6-3 8-7 9.5-4-1.5-7-4.9-7-9.5V5.5L12 3z" stroke="currentColor" strokeWidth="1.9" strokeLinejoin="round" />
    </svg>
  )
};

/* ════════════ PC専用 左ブランドレール ════════════ */
function DesktopRail({ showProfile = true, onHome }) {
  return (
    <aside className="brandrail">
      <div className="br-top">
        <div className="brandmark br-brand" role="link" tabIndex={0} title="トップに戻る"
          onClick={onHome}
          onKeyDown={(e) => { if ((e.key === "Enter" || e.key === " ") && onHome) onHome(); }}>
          <span className="dot">制</span>制度活用ナビ
        </div>
        <h1 className="h-serif br-title">
          お金のピンチを、<br /><span className="em">使える制度</span>で<br />乗り越える。
        </h1>
        <p className="br-lead">
          税金・保険・手当——知らないだけで使えなかった支援があります。
          元銀行員の安達が、あなたに合う制度を一緒に見つけます。
        </p>

        <div className="br-profile" style={{ display: showProfile ? "flex" : "none" }}>
          <div className="avatar"><img src="adachi.webp" alt="安達 拓郎" /></div>
          <div>
            <div className="who">安達 拓郎</div>
            <div className="role">元銀行員 / お金の制度活用アドバイザー</div>
            <a className="x-link on-dark" href="https://x.com/takuro_seido" target="_blank" rel="noopener noreferrer">{Ic.xLogo()} @takuro_seido</a>
          </div>
        </div>

        <div className="br-trust">
          <div>{Ic.check()} 公的・実在の制度だけをご案内</div>
          <div>{Ic.check()} 約2分・全6問のかんたん診断</div>
          <div>{Ic.check()} 申請手順までメールで解説</div>
        </div>
      </div>
      <p className="br-foot">本診断は一般的な制度情報の提供を目的としたもので、受給を保証するものではありません。実際の可否は各窓口の判断によります。</p>
    </aside>
  );
}

/* ════════════ イントロ ════════════ */
function Intro({ onStart, showProfile = true }) {
  return (
    <div className="scroll fade-in">
      <div className="intro-hero">
        <div className="intro-desktop-head">
          <span className="kicker">無料診断 · 全6問</span>
          <h2 className="h-serif dh-title">3ステップで、あなたに<br />使える制度がわかります。</h2>
        </div>
        <span className="intro-badge">{Ic.shield()} 元銀行員がつくった、お金の制度ナビ</span>
        <h1 className="h-serif intro-title">
          お金のピンチを、<br /><span className="em">使える制度</span>で乗り越える。
        </h1>
        <p className="intro-sub">
          税金・保険・手当——国や自治体には、知らないだけで使えなかった支援がたくさんあります。
          かんたんな質問に答えるだけで、<b>あなたがいま使える制度のTop10</b>がわかります。
        </p>

        <div className="meta-row">
          <span className="chip">⏱ 所要 <b>約2分</b></span>
          <span className="chip">全 <b>6問</b></span>
          <span className="chip">公的制度 <b>16種</b>から診断</span>
        </div>

        <div className="profile" style={{ display: showProfile ? "flex" : "none" }}>
          <div className="avatar"><img src="adachi.webp" alt="安達 拓郎" /></div>
          <div>
            <div className="who">安達 拓郎</div>
            <div className="role">元銀行員 / お金の制度活用アドバイザー。「制度を知らずに損をする人を減らしたい」</div>
            <a className="x-link" href="https://x.com/takuro_seido" target="_blank" rel="noopener noreferrer">{Ic.xLogo()} @takuro_seido</a>
          </div>
        </div>

        <ul className="intro-points">
          <li><span className="n">1</span><div><b>6つの質問</b>に答える(働き方・世帯・困りごとなど)</div></li>
          <li><span className="n">2</span><div>あなたに合う<b>公的制度Top10</b>がその場で表示</div></li>
          <li><span className="n">3</span><div>各制度の<b>申請手順・受け取り方</b>はメールで詳しく解説</div></li>
        </ul>
      </div>

      <div className="cta-wrap">
        <button className="btn btn-primary" onClick={onStart}>無料で診断をはじめる {Ic.arrow()}</button>
        <p className="cta-note">※ 表示される制度は一般的な情報です。実際の可否は各窓口でご確認ください。</p>
      </div>
    </div>
  );
}

/* ════════════ 質問 ════════════ */
function Question({ q, index, total, selected, onSelect }) {
  return (
    <div className="scroll fade-in" key={q.id}>
      <div className="pad">
        <div className="q-head rise">
          <span className="kicker">{q.kicker}</span>
          <h2 className="h-serif q-text">{q.text}</h2>
        </div>
        <div className="options">
          {q.options.map((o, i) => (
            <button
              key={i}
              className={"opt rise" + (selected === i ? " sel" : "")}
              style={{ animationDelay: i * 0.04 + "s" }}
              onClick={() => onSelect(i)}
            >
              <span className="tick" />
              <span>
                <span className="label">{o.label}</span>
                <span className="sub" style={{ display: "block" }}>{o.sub}</span>
              </span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ════════════ 集計中 ════════════ */
function Loading() {
  const msgs = ["回答を読み取っています…", "使える制度を照合しています…", "あなた向けに並べ替えています…"];
  const [m, setM] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setM((x) => Math.min(x + 1, msgs.length - 1)), 700);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="loading fade-in">
      <div className="loader-ring" />
      <div className="msg">あなたに使える制度を探しています</div>
      <div className="sub">{msgs[m]}</div>
    </div>
  );
}

/* ════════════ 個別詳細ページ(前半フリー + 後半パスワードゲート) ════════════ */
const PASSWORD_STORAGE_KEY = "takuro-seido-password";

function Detail({ program, currentPassword, onBack }) {
  const p = program;
  const hue = window.NAVI_DATA.CAT_HUE[p.cat] || 248;
  const [pw, setPw] = useState("");
  const [err, setErr] = useState("");
  const [unlocked, setUnlocked] = useState(false);

  // 月内ならLocalStorageで自動解錠
  useEffect(() => {
    try {
      const saved = localStorage.getItem(PASSWORD_STORAGE_KEY);
      if (saved && saved === currentPassword) setUnlocked(true);
    } catch (e) { /* ignore */ }
  }, [currentPassword, p.id]);

  function submit(e) {
    e.preventDefault();
    if (pw.trim() === currentPassword) {
      setErr("");
      setUnlocked(true);
      try { localStorage.setItem(PASSWORD_STORAGE_KEY, currentPassword); } catch (e) { /* ignore */ }
    } else {
      setErr("パスワードが違うようです。LINEまたはメールでお送りした最新のパスワードをご確認ください。");
    }
  }

  return (
    <div className="scroll fade-in">
      <div className="detail-head rise">
        <span className="cat-chip detail-cat" style={{ "--ch": hue }}>{p.cat}</span>
        <h1 className="h-serif detail-title">{p.name}</h1>
        <p className="detail-tag">{p.tag}</p>
        <div className="detail-benefit">{Ic.coin()} {p.benefit}</div>
      </div>

      {/* 前半: フリーで読める */}
      <div className="detail-section rise" style={{ animationDelay: "0.05s" }}>
        <span className="kicker">こんな制度です</span>
        <h2 className="h-serif ds-title">対象・金額・期間・相談先</h2>
        <div className="dt-row"><span className="k">📌 対象</span><span>{p.who}</span></div>
        <div className="dt-row"><span className="k">💰 金額</span><span>{p.detail.amount}</span></div>
        <div className="dt-row"><span className="k">⏱ 期間</span><span>{p.detail.period}</span></div>
        <div className="dt-row"><span className="k">☎️ 相談先</span><span>{p.detail.where}</span></div>
      </div>

      {/* 境界: パスワードゲート or 閲覧制限解除後 */}
      {unlocked ? (
        <div className="detail-section unlocked rise" style={{ animationDelay: "0.1s" }}>
          <span className="kicker accent">閲覧可能</span>
          <h2 className="h-serif ds-title">申請の手順・ワンポイント</h2>
          <div className="dt-row"><span className="k">📝 申請手順</span>
            <ol className="dt-steps">
              {p.detail.steps.map((s, i) => <li key={i}>{s}</li>)}
            </ol>
          </div>
          <div className="dt-tip"><b>💡 元銀行員からのワンポイント </b>{p.detail.tip}</div>
          <button className="btn btn-ghost" onClick={onBack} style={{ marginTop: 18 }}>{Ic.back()} 結果Top10に戻る</button>
        </div>
      ) : (
        <PasswordGate value={pw} onChange={setPw} onSubmit={submit} err={err} />
      )}
    </div>
  );
}

function PasswordGate({ value, onChange, onSubmit, err }) {
  return (
    <React.Fragment>
      <div className="gate-boundary rise" style={{ animationDelay: "0.08s" }}>
        <div className="gb-icon">{Ic.lock()}</div>
        <div className="gb-title h-serif">ここからが本当に大事です</div>
        <p className="gb-text">
          申請の具体的な手順は、知っているかどうかで受給できるかが決まります。
          ここで諦める人が多いからこそ、貰える人が少ない。
        </p>
      </div>

      <div className="password-gate rise" style={{ animationDelay: "0.12s" }}>
        <span className="pg-kicker">{Ic.lock()} パスワード入力で閲覧制限を解除</span>
        <h3 className="pg-title h-serif">申請手順・ワンポイントを表示</h3>

        <form className="pg-form" onSubmit={onSubmit}>
          <input
            type="text"
            value={value}
            placeholder="例: takuro-2026-06"
            onChange={(e) => onChange(e.target.value)}
            autoComplete="off"
            spellCheck="false"
          />
          {err ? <div className="err">{err}</div> : null}
          <button type="submit" className="btn btn-unlock">閲覧制限を解除する {Ic.arrow()}</button>
        </form>

        <div className="pg-divider"><span>パスワードを入手する2つの方法</span></div>

        <div className="pg-channels">
          <a className="pg-channel line"
             href="https://line.me/R/ti/p/@takuro-seido"
             target="_blank"
             rel="noopener noreferrer">
            <span className="pgc-badge">即時</span>
            <div className="pgc-main">
              <div className="pgc-title">💬 LINEで30秒で受け取る</div>
              <div className="pgc-sub">友達追加して「詳細」と送ると自動返信されます</div>
            </div>
          </a>
          <div className="pg-channel mail">
            <span className="pgc-badge wait">明朝</span>
            <div className="pgc-main">
              <div className="pgc-title">📨 登録メールで受け取る</div>
              <div className="pgc-sub">明日の朝7時、最初のメールでお届け予定です</div>
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { Ic, DesktopRail, Intro, Question, Loading, Detail, PasswordGate });