/* author-sheet.jsx — 作者プロフィールのシート（本人確認済み・通常版で公開）。
   フッターの「プロフィール」またはヒーローの「created by」から開く。note と Instagram への入口をまとめる。
   文面は本人指定（2026-10-21）。 */
const AUTHOR = {
  name: "中野紘志",
  kana: "HIROSHI NAKANO",
  tag: "元日本代表 ／ コーチ ／ 運動生理学 博士課程",
  bio: [
    "「レース観戦がより楽しくなれば！」と思ってサイトを作成。",
    "強くなる方法やローイングの明るい話などは note や instagram に投稿中。",
  ],
  note: { url: "https://note.com/hiroshi32", label: "note を読む", sub: "トレーニングやレースの“なぜ”" },
  ig: { url: "https://www.instagram.com/hiroshi.rowing/", label: "Instagram", sub: "@hiroshi.rowing" },
};
function AuthorSheet({ onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey);
  }, []);
  // 下にスワイプして閉じる：指の動きに合わせてシートが付いてくる。80px以上または速く払ったら閉じる。
  // 本文を上にスクロールできる状態（scrollTop>0）では、スクロールを優先してスワイプ閉じは効かせない。
  const sheetRef = React.useRef(null);
  const drag = React.useRef({ y0: 0, dy: 0, t0: 0, on: false });
  const [dy, setDy] = React.useState(0);
  const [closing, setClosing] = React.useState(false);
  const onStart = (e) => {
    const body = sheetRef.current && sheetRef.current.querySelector(".psheet-body");
    if (body && body.scrollTop > 0 && body.contains(e.target)) return;
    drag.current = { y0: e.touches[0].clientY, dy: 0, t0: Date.now(), on: true };
  };
  const onMove = (e) => {
    if (!drag.current.on) return;
    const d = Math.max(0, e.touches[0].clientY - drag.current.y0);
    drag.current.dy = d; setDy(d);
  };
  const onEnd = () => {
    if (!drag.current.on) return;
    const { dy: d, t0 } = drag.current; drag.current.on = false;
    const fast = d > 30 && (Date.now() - t0) < 250;
    if (d > 80 || fast) { setClosing(true); setTimeout(onClose, 180); } else setDy(0);
  };
  return (
    <div className="psheet-wrap" onClick={onClose}>
      <div className={"psheet ausheet" + (closing ? " closing" : "")} ref={sheetRef}
           style={dy ? { transform: "translateY(" + dy + "px)", transition: "none" } : undefined}
           onClick={(e) => e.stopPropagation()} role="dialog" aria-label="このサイトの管理人（プロフィール）"
           onTouchStart={onStart} onTouchMove={onMove} onTouchEnd={onEnd} onTouchCancel={onEnd}>
        <div className="au-grab" aria-hidden="true" />
        <div className="psheet-hd"><span className="au-ttl">このサイトの管理人（プロフィール）</span><button type="button" className="psheet-x" aria-label="閉じる" onClick={onClose}>×</button></div>
        <div className="au-hero">
          <img className="au-avatar" src="./icons/author.png?v=3" alt="" width="64" height="64" />
          <div className="au-nmwrap">
            <div className="au-nm">{AUTHOR.name}<span className="au-kana">{AUTHOR.kana}</span></div>
            <div className="au-tag">{AUTHOR.tag}</div>
          </div>
        </div>
        <div className="psheet-body">
          {AUTHOR.bio.map((t, i) => <p className="au-p" key={i}>{t}</p>)}
          <a className="au-btn note" href={AUTHOR.note.url} target="_blank" rel="noopener noreferrer">
            <span className="au-btn-ic">n</span>
            <span className="au-btn-tx"><b>{AUTHOR.note.label}</b><i>{AUTHOR.note.sub}</i></span>
            <span className="au-btn-go">›</span>
          </a>
          <a className="au-btn ig" href={AUTHOR.ig.url} target="_blank" rel="noopener noreferrer">
            <span className="au-btn-ic">◎</span>
            <span className="au-btn-tx"><b>{AUTHOR.ig.label}</b><i>{AUTHOR.ig.sub}</i></span>
            <span className="au-btn-go">›</span>
          </a>
          <p className="au-note">このサイトは非公式の個人制作です。記録・結果は日本ローイング協会の公式発表をもとにしています。</p>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { AuthorSheet });