/* global React */
// 5 panel content components — slide in over the hero when a menu item is picked.
const { useState } = React;

// ---------- 01 · START NEW GAME (Portfolio) ----------
const WORKS = [
  { h:"DAYBREAK / 黎明协议", k:"AI · BRAND · 2025", tags:["AI 策划","品牌叙事"] },
  { h:"NEON CICADA", k:"INSTALLATION · 2024", tags:["装置","声画"] },
  { h:"HELLRIDE FW24", k:"FASHION FILM · 2024", tags:["短片","CD"] },
  { h:"OS://OPERATOR", k:"PRODUCT · 2024", tags:["UX","AI agent"] },
  { h:"PAGER NOISE", k:"MUSIC VIDEO · 2023", tags:["MV","导演"] },
  { h:"FLOOR-99", k:"SPATIAL · 2023", tags:["空间","story"] },
];
function PortfolioPanel(){
  return (
    <div>
      <p style={{ fontFamily:"IBM Plex Mono", fontSize:11, color:"var(--text-2)", marginTop:0 }}>
        // 47 项作品 · 显示精选 6 个 · 按 <b style={{color:"var(--violet-2)"}}>↑↓</b> 切类目, <b style={{color:"var(--violet-2)"}}>ENTER</b> 进入案例
      </p>
      <div className="grid">
        {WORKS.map(w=>(
          <div className="tile" key={w.h}>
            <div className="thumb"/>
            <div className="body">
              <div className="mono" style={{ fontSize:9, color:"var(--violet-2)", letterSpacing:".15em" }}>{w.k}</div>
              <div className="h" style={{ marginTop:6 }}>{w.h}</div>
              <div className="meta">
                {w.tags.map((t,i)=><span key={t} className={i===0?"v":""}>{t}</span>)}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- 02 · CHARACTER STATUS (About) ----------
function StatusPanel(){
  const stats = [
    ["HP","Strategy · Concept",92],
    ["MP","Visual Direction",100],
    ["EXP","Engineering · Code",74],
    ["AGI","AI Workflow",88],
    ["LCK","Cultural Antenna",61],
  ];
  return (
    <div style={{ display:"grid", gridTemplateColumns:"1.1fr .9fr", gap:24 }}>
      <div>
        <div className="mono" style={{ fontSize:10, color:"var(--violet-2)", letterSpacing:".15em" }}>// NINI · CHARACTER SHEET</div>
        <h3 style={{ fontFamily:"Oswald", fontStyle:"italic", fontWeight:700, fontSize:32, margin:"6px 0 12px" }}>AI 创意策划 / 系统级创作者</h3>
        <p style={{ fontSize:13, lineHeight:1.7, color:"var(--text-2)"}}>
          深夜的创意 OS · 用品牌叙事 + AI 工作流把 0 → 1 的项目跑通。<br/>
          擅长把模糊概念拆成可执行的系统 — 包括视觉、产品、文案、声音、空间。<br/>
          目前 OPEN TO WORK · 可远程 · 接独立合作 · 在 Anthropic 工具圈活跃。
        </p>
        <div style={{ marginTop:14, padding:12, border:"1.5px solid var(--violet-deep)", borderRadius:6, background:"rgba(124,92,255,.06)" }}>
          <div className="mono" style={{ fontSize:10, color:"var(--violet-2)", letterSpacing:".12em", marginBottom:8 }}>EQUIPPED</div>
          <div style={{ display:"flex", flexWrap:"wrap", gap:6 }}>
            {["Figma","After Effects","Claude / Cursor","Cinema4D","Three.js","Ableton","Notion","Vibe Coding"].map(s=>(
              <span key={s} className="mono" style={{ fontSize:10, padding:"3px 9px", border:"1.5px solid var(--stroke-2)", borderRadius:999, color:"var(--text)"}}>{s}</span>
            ))}
          </div>
        </div>
        <button className="btn btn-primary" style={{ marginTop:14 }}>↓ DOWNLOAD CV.PDF</button>
      </div>
      <div>
        <div className="mono" style={{ fontSize:10, color:"var(--violet-2)", letterSpacing:".15em" }}>// STATS</div>
        <div style={{ marginTop:12 }}>
          {stats.map(([n,l,v])=>(
            <div className="statline" key={n}>
              <span className="name">{n}</span>
              <div className="statbar"><div className="fill" style={{ width:v+"%"}}/></div>
              <span className="val">{v}/100</span>
              <span style={{ flex:1, fontSize:10, color:"var(--text-mute)", paddingLeft:6 }}>{l}</span>
            </div>
          ))}
        </div>
        <div className="mono" style={{ fontSize:10, color:"var(--violet-2)", letterSpacing:".15em", marginTop:18 }}>// QUEST LOG</div>
        <div style={{ marginTop:8, fontFamily:"IBM Plex Mono", fontSize:11, lineHeight:1.7, color:"var(--text-2)"}}>
          <div>▸ 2026 — building NINI / CREATIVE OS</div>
          <div>▸ 2025 — 入选 Anthropic Creative Lab</div>
          <div>▸ 2024 — HELLRIDE FW24 · creative direction</div>
          <div>▸ 2023 — first solo show · "FLOOR-99"</div>
        </div>
      </div>
    </div>
  );
}

// ---------- 03 · LOAD ARCHIVE (Logs) ----------
const LOGS = [
  { d:"2026.05.18", t:"如何把一个模糊的 brief 拆成 5 个原型", c:"系统化 · 拆解 · brief → 概念 → 视觉 → 原型 → 评审 · 一个我反复回到的工作流。" },
  { d:"2026.04.02", t:"和 Claude 做 brand 系统的 6 条心得", c:"AI 不是替代品；它是一个不知疲倦的 art director。" },
  { d:"2026.02.28", t:"为什么我把创意笔记装进一个 OS", c:"知识管理是有限的；OS 思维让它能演化。" },
  { d:"2025.12.11", t:"夜行 — 一份 5000 字的 mood research", c:"摩托 · 暗夜 · 解 · 紫色边缘照明 — fashion vs spatial 的视觉互文。" },
];
function ArchivePanel(){
  return (
    <div>
      <div className="mono" style={{ fontSize:11, color:"var(--text-2)", marginBottom:14 }}>// 18 篇日志 · 公开 12 · 私密 6 · 按时间排序</div>
      {LOGS.map(l=>(
        <div key={l.t} style={{ display:"grid", gridTemplateColumns:"110px 1fr auto", gap:14, padding:"14px 4px", borderTop:"1.5px solid var(--stroke-2)" }}>
          <div className="mono" style={{ fontSize:11, color:"var(--violet-2)", letterSpacing:".05em"}}>{l.d}</div>
          <div>
            <div style={{ fontFamily:"Oswald", fontStyle:"italic", fontWeight:700, fontSize:18, color:"var(--text)" }}>{l.t}</div>
            <div style={{ fontSize:12, color:"var(--text-2)", marginTop:4, lineHeight:1.55 }}>{l.c}</div>
          </div>
          <button className="btn btn-ghost" style={{ padding:"6px 10px", fontSize:10 }}>READ ↗</button>
        </div>
      ))}
    </div>
  );
}

// ---------- 04 · SIDE QUESTS (Vibe Coding) ----------
const QUESTS = [
  { h:"tarot.exe", k:"vibe-coded · 2 days", desc:"塔罗 + AI 解牌的小工具，紫色 CRT 主题。" },
  { h:"BPM 跟随灯", k:"hardware · ongoing", desc:"ESP32 + WS2812 · 跟着 Ableton tempo 同步。" },
  { h:"NINI's Diary", k:"local-first AI · 2025", desc:"私人日记的 AI 副官 · 端侧加密。" },
  { h:"MARK 工坊", k:"weekend · 2024", desc:"独立印章 / 贴纸 / 小物 · 卖给同好。" },
];
function QuestsPanel(){
  return (
    <div>
      <div className="mono" style={{ fontSize:11, color:"var(--text-2)", marginBottom:14 }}>// 周末项目 · 个人 vibe coding · 未必完成, 但是必须有趣</div>
      <div className="grid">
        {QUESTS.map(q=>(
          <div className="tile" key={q.h}>
            <div className="thumb"/>
            <div className="body">
              <div className="mono" style={{ fontSize:9, color:"var(--violet-2)", letterSpacing:".15em" }}>{q.k}</div>
              <div className="h" style={{ marginTop:6 }}>{q.h}</div>
              <div style={{ fontSize:11, color:"var(--text-2)", marginTop:6, lineHeight:1.5 }}>{q.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- 05 · COMMS (Contact) ----------
function CommsPanel(){
  return (
    <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:24 }}>
      <div>
        <div className="mono" style={{ fontSize:10, color:"var(--violet-2)", letterSpacing:".15em" }}>// OPEN COMMS · 24h</div>
        <h3 style={{ fontFamily:"Oswald", fontStyle:"italic", fontWeight:700, fontSize:32, margin:"6px 0 12px" }}>有问题？发个信号。</h3>
        <p style={{ fontSize:13, color:"var(--text-2)", lineHeight:1.6}}>
          独立合作 / 全职机会 / AI 工作坊 / 单纯想聊 — 都可以。<br/>
          回复时间通常 &lt; 24h · 时区 GMT+8.
        </p>
        <div style={{ marginTop:18, display:"flex", flexDirection:"column", gap:8 }}>
          {[
            ["EMAIL","hello@nini.studio"],
            ["TWITTER","@nini_ops"],
            ["WECHAT","nini-os (备注来意)"],
            ["DISCORD","nini.os.gg"],
          ].map(([k,v])=>(
            <div key={k} style={{ display:"flex", gap:12, padding:"8px 12px", border:"1.5px solid var(--stroke-2)", borderRadius:6, alignItems:"center", background:"rgba(15,13,20,.5)" }}>
              <span className="mono" style={{ fontSize:10, color:"var(--violet-2)", width:72, letterSpacing:".15em" }}>{k}</span>
              <span style={{ fontFamily:"IBM Plex Mono", fontSize:13, color:"var(--text)" }}>{v}</span>
              <span style={{ marginLeft:"auto", color:"var(--text-mute)"}}>↗</span>
            </div>
          ))}
        </div>
      </div>
      <div>
        <div className="mono" style={{ fontSize:10, color:"var(--violet-2)", letterSpacing:".15em" }}>// QUICK SIGNAL</div>
        <div style={{ marginTop:12, padding:14, border:"1.5px solid var(--violet-deep)", borderRadius:6, background:"rgba(124,92,255,.05)" }}>
          <label style={{ fontFamily:"IBM Plex Mono", fontSize:10, color:"var(--text-2)", letterSpacing:".12em" }}>SUBJECT</label>
          <input type="text" defaultValue="想聊聊一个想法 / a project pitch" style={{ width:"100%", padding:"8px 10px", marginTop:4, marginBottom:12, background:"transparent", border:"1.5px solid var(--stroke-2)", borderRadius:4, color:"var(--text)", fontFamily:"IBM Plex Mono", fontSize:12 }}/>
          <label style={{ fontFamily:"IBM Plex Mono", fontSize:10, color:"var(--text-2)", letterSpacing:".12em" }}>MESSAGE</label>
          <textarea rows="6" defaultValue="..." style={{ width:"100%", padding:"8px 10px", marginTop:4, background:"transparent", border:"1.5px solid var(--stroke-2)", borderRadius:4, color:"var(--text)", fontFamily:"IBM Plex Mono", fontSize:12, resize:"vertical" }}/>
          <button className="btn btn-primary" style={{ marginTop:10, width:"100%", justifyContent:"center" }}>► SEND SIGNAL <span className="chip">↗</span></button>
        </div>
      </div>
    </div>
  );
}

// Index by menu key
const PANELS = {
  "START NEW GAME":   { tag:"01 · PORTFOLIO",   render: PortfolioPanel },
  "CHARACTER STATUS": { tag:"02 · CHARACTER",   render: StatusPanel },
  "LOAD ARCHIVE":     { tag:"03 · ARCHIVE",     render: ArchivePanel },
  "SIDE QUESTS":      { tag:"04 · SIDE QUESTS", render: QuestsPanel },
  "COMMS":            { tag:"05 · COMMS",       render: CommsPanel },
};

Object.assign(window, { PANELS });