/* ============================================================
   profile.jsx — プロフィール詳細ページ「405 Just Found」
   自己紹介 / これまでの歩み(年表) / このサイトでやりたいこと・想い
   mascots.jsx の window.Pixel / window.PixelPanda を利用
   ============================================================ */

/* ---------- 小さなヘルパー ---------- */
function StatusBar() {
  return (window.HudBar ? React.createElement(window.HudBar) : null);
}
function Mascot({ which, scale = 1, pose = "stand" }) {
  const C = which === "pico" ? window.Pixel : window.PixelPanda;
  return (
    <div className="m-scale" style={{ transform: `scale(${scale})`, transformOrigin: "center" }}>
      <C pose={pose} />
    </div>
  );
}

/* ---------- セクション見出し ---------- */
function PSec({ en, ja }) {
  return (
    <div className="p-sec">
      <span className="en">{en}</span>
      <span className="ja">{ja}</span>
      <span className="rule" />
    </div>
  );
}

/* ---------- パンダの一言（タップで変化） ---------- */
const PANDA_FIRST = "共感できたら、仲間になってほしいな。";
const PANDA_10TH = "あなた、求め過ぎよ。";
const PANDA_COMMENTS = [
  "子供が言うこと聞かないけど、自分も子供のころ親の言うこと聞いてなかったな。",
  "最近スマホを見てるっていうか、気づかないうちに見させられてるよね。",
  "風俗せざるを得ない人は、しなくていい。",
  "時給が2000円あったら、幸せになれると思う。",
  "未成年の犯罪者って、親から虐待されてること多いよね。",
  "社会って、生活ギリッギリの賃金で働かせて、考える余裕を与えないよね。",
  "手羽元が、一番美味い。",
  "娘の恋バナ聞くの、エモつら複雑な気持ち。",
];
const POSES = ["stand", "wave", "sleep"];

function PandaTalk() {
  const [tap, setTap] = React.useState(0);
  const [pose, setPose] = React.useState("stand");
  const [comment, setComment] = React.useState(PANDA_FIRST);

  const onTap = () => {
    const n = tap + 1;
    let c;
    if (n % 10 === 0) {
      c = PANDA_10TH;                       // 10タップごとに必ず
    } else {
      do { c = PANDA_COMMENTS[Math.floor(Math.random() * PANDA_COMMENTS.length)]; }
      while (c === comment && PANDA_COMMENTS.length > 1);
    }
    setPose(POSES[Math.floor(Math.random() * POSES.length)]);
    setComment(c);
    setTap(n);
  };

  return (
    <div>
      <div
        className="pico-aside panda-tap"
        role="button" tabIndex={0}
        onClick={onTap}
        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onTap(); } }}
      >
        <div style={{ flex: "0 0 auto", width: 76, height: 82, position: "relative" }}>
          <div style={{ position: "absolute", left: "50%", top: "54%", transform: "translate(-50%,-50%) scale(0.46)" }}>
            <Mascot which="poyan" pose={pose} />
          </div>
        </div>
        <div className="bubble">{comment}</div>
      </div>
      <div className="tap-hint dot">タップすると、パンダが言いたいことを言うよ</div>
    </div>
  );
}

/* ---------- 年表データ ---------- */
const HISTORY = [
  { era: "16歳", node: "sky", jobs: ["ストリート弾き語り"],
    note: "モテたくてストリートでアコギを弾く。夜中に怖い人たちに囲まれたり、お金をくれる優しいおじさんに出会ったり。ストリートで知り合った短大のお姉さんと一緒に歌って、大学生ってオトナだなぁと思う。",
    touch: "世の中の、愛と恐怖に触れる。" },
  { era: "19歳", node: "sky", jobs: ["バーの店員"],
    note: "大学でも相変わらずストリート。そんなとき、音楽好きのバーのマスターに拾われて働きはじめる。第二の父との出会い。",
    touch: "音楽と、リスペクトな大人に触れる。" },
  { era: "20歳", node: "butter", jobs: ["広告代理店"],
    note: "大学は中退。マスターのつてで広告代理店に入社。ピアスして出社して怒られたりする。",
    touch: "「社会」に触れる。" },
  { era: "25歳", node: "butter", jobs: ["広告フリーランス", "バー経営"],
    note: "調子に乗って広告でフリーに。第二の父からバーを譲り受け、広告とバーの二足のわらじ。まぁまぁ楽しかった。",
    touch: "事業に触れる。" },
  { era: "26歳", node: "butter", jobs: ["結婚", "パパに"],
    note: "結婚して、子どもができる。このままみんなで普通に生きていくんだろうと、無垢に思う。",
    touch: "家族に触れる。" },
  { era: "30歳", node: "ink", jobs: ["離婚", "ひとり親スタート"],
    note: "自由にしすぎて愛想をつかされ、嫁に若いオスと逃げられる。離婚なんて遠い世界の話だと思ってたけど、案外近くにあるのね。納得いかず1歳と3歳を引き取る。慰謝料は払われず、弁護士費用だけ払っていじける。飲みに出るたび、会う人みんなに「うちの子を一緒に育ててください」と頼み込んだら、ひとり見つかった。",
    touch: "離婚は、遠い世界の話じゃなかった。" },
  { era: "31歳", node: "ink", jobs: ["軟禁状態"],
    note: "見つかったはいいものの、母性は強かったけど愛が強すぎた。刃物が出てきたり、細い農道を時速100キロで走られたり、軽く軟禁状態に。仕事も続けられなくなる。",
    touch: "人の心の闇に、軽く触れる。" },
  { era: "34歳", node: "ink", jobs: ["避難"],
    note: "向き合う努力はしたけれど、子どもたちに危険が及びかねないと感じ、警察と児童相談所の協力でそこから避難。男の自分の相談にもすぐ動いてくれた警察の方たちには、本当に感謝。",
    touch: "日本の優しさに触れる。" },
  { era: "35歳", node: "sky", jobs: ["限界集落 支援事業"],
    note: "山奥に引きこもり、限界集落の支援をしながら子どもたちとひっそり暮らす。友達に恵まれて、いろんな友が山奥まで来てくれて、子どもたちの人格形成を手伝ってくれた。",
    touch: "友のありがたみと、田園風景の良さに触れる。" },
  { era: "39歳", node: "sky", jobs: ["米作り"],
    note: "田舎暮らしは自分に合ってた。けど、田舎あるあるの謎の外国人にトラクターを盗まれて生活ができなくなる。古い友達に100万借り、山の友達に100万を投資で預ける。自然のおかげでトラウマも薄れ、マッチングアプリをやってみたら、会う人みんなアイコンと違って恐怖する。",
    touch: "時間と自然が、心をほどく。" },
  { era: "40歳", node: "butter", jobs: ["工場勤務", "女風セラピスト"],
    note: "生まれて初めて履歴書を書いて面接を受け、工場勤務に就く。社会人を意気込む。けど同じタイミングで女風セラピストの立ち上げに誘われ、0→1にどうしても胸が躍ってやってみることに。",
    touch: "「社会人」を意気込む。" },
  { era: "41歳", node: "ink", jobs: ["車上生活"],
    note: "セラピストの報酬が自分の提供価値と合ってない気がして、いろいろイヤになる。山の友達の投資は詐欺だった。借金も返せず逃げ出し、子どもも親に任せて車で生活。自暴自棄でパチンコ、お金も尽きて、戻ってこれないところまで限りなく近づく。",
    touch: "親のありがたみに、すごく触れる。" },
  { era: "42歳", node: "butter", jobs: ["スロット", "工場"],
    note: "スロットと工場勤務で立て直しを図る。でも工場は12時間勤務のシフト制で、帰りに寝落ちして事故ったりして嫌になり、スロット一本でとりあえず凌ぐ。",
    touch: "期待値に触れる。" },
  { era: "43歳", node: "ink", jobs: ["ホスト", "建築業"],
    note: "古い友達への借金を返し終え、家に帰る。子どもと親にめっちゃ怒られ、心配してくれてた友達にも謝る。連絡が途絶えてた投資詐欺の山の友達は、「生きてる？」って連絡をくれたのを最後に、自ら命を絶っていた。そんななか偶然ホストに誘われ、行きたくても行けない知らない世界をのぞきに行く。未成年がウーロン茶を飲みながら100万のシャンパンを入れるのを見て、胸がギュッとなる。3ヶ月で昼職が決まり建築業界へ。",
    touch: "お金の意味と、詐欺と、命に触れる。" },
  { era: "44歳〜", node: "ink", jobs: ["社会人リタイア", "405 Just Found"],
    note: "ラストチャンスと意気込んだ社会人、普通にしんどくて1年でリタイア。そして、生活のプレッシャーを感じつつも、ひとり親の世界が気になっていろいろと考えて現在に至る。",
    touch: "社会人を諦めて、いまここ。" },
];

/* ============================================================
   ページ本体
   ============================================================ */
function ProfileDetail() {
  return (
    <div className="page-wrap">
      <div className="page-phone">
        <StatusBar />

        {/* 上部ナビ */}
        <div className="topnav">
          <a className="backlink" href="index.html"><span className="arr">◀</span> もどる</a>
          <span className="dot" style={{ fontSize: 12.5, color: "var(--ink-soft)", letterSpacing: ".18em" }}>PROFILE</span>
        </div>

        {/* ヒーロー：パンダ＋名前 */}
        <div style={{ padding: "0 20px" }}>
          <div className="hardshadow pixbox" style={{ background: "var(--sage-bg)", padding: "18px 18px 14px" }}>
            <div className="p-hero">
              <div style={{ display: "grid", placeItems: "center", height: 150, position: "relative" }}>
                <div style={{ position: "absolute", bottom: 16, width: 96, height: 12, borderRadius: "50%", background: "rgba(0,0,0,.07)", filter: "blur(2px)" }} />
                <Mascot which="poyan" scale={0.86} pose="stand" />
              </div>
              <div className="role">かんりにん</div>
              <div className="name">パンダ</div>
              <div className="dot" style={{ fontSize: 13.5, color: "var(--ink-soft)" }}>40代・シングルファザー</div>
            </div>
          </div>
        </div>

        {/* 自己紹介 */}
        <div style={{ padding: "32px 20px 0" }}>
          <PSec en="ABOUT" ja="じこしょうかい" />
          <p className="p-body">
            40歳をすぎて、<span className="em">社会人をギブアップ</span>しました。ちゃんと生きようと頑張ったけど、わたしには無理だった。
          </p>
          <p className="p-body">
            30歳のころ離婚して、1歳と3歳の子をひとりで。気づけばもう二人とも高校生。大きくなれば手が離れると思いきや、手もお金もかかるばかり（笑）。世のシングルファミリーは、本当に大変だと思う。
          </p>
          <p className="p-body">
            今の時代を否定する気はまったくない。でも、ふと感じる<span className="em">違和感</span>がある。気を抜くと常識に飲まれそうになるから、自分の立ち位置を見失わないように。同じように「なんかしんどい」と思っている人と、答え合わせして、ちょっと安心したい。
          </p>
        </div>

        {/* パンダの一言（タップでポーズ＆コメントが変化） */}
        <div style={{ padding: "26px 20px 0" }}>
          <PandaTalk />
        </div>

        {/* これまでの歩み（年表） */}
        <div style={{ padding: "34px 20px 0" }}>
          <PSec en="HISTORY" ja="これまでの歩み" />
          <div className="timeline">
            {HISTORY.map((h, i) => (
              <div className="tl-row" key={i}>
                <div className="tl-rail"><div className={"tl-node " + (h.node || "")} /></div>
                <div>
                  <div className="tl-era">{h.era}</div>
                  <div className="tl-jobs">
                    {h.jobs.map((j, k) => <span className="tl-job" key={k}>{j}</span>)}
                  </div>
                  {h.note && <div className="tl-note">{h.note}</div>}
                  {h.touch && <div className="tl-touch">{h.touch}</div>}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* このサイトでやりたいこと・想い */}
        <div style={{ padding: "36px 20px 0" }}>
          <PSec en="MISSION" ja="このサイトでやりたいこと" />
          <div className="hardshadow wish-panel">
            <p className="p-body">
              違和感や疑問、子育てハードモードでの発見を、しょうもなくても楽しくアウトプットして、共感してくれる人とつながりたい。最悪笑えて、うまくいけばみんなの生活が少しラクになる。そんな<span className="em">ミラクル</span>が生まれたらいい。
            </p>
            <p className="p-body">
              ふわっとしてるけど、少しずつ具体化していきます。
            </p>
          </div>
        </div>

        {/* 戻り動線：EXIT / B */}
        <div className="exit-wrap">
          <a className="exitbtn" href="index.html"><span className="bkey">B</span> EXIT — トップへ</a>
        </div>

        <div className="foot dot" style={{ textAlign: "center", padding: "18px 0 30px", fontSize: 12.5 }}>
          © 2026 405 JUST FOUND — INSERT COIN
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ProfileDetail />);