// Variation B — 実験体 LAB
// クリーン×ラボ感×カワイイ。研究記録っぽいタイポ＋ハートのアンテナデータ。

(() => {
  const labTokens = {
    bg: "#f4f7fb",
    bgDeep: "#e9eff6",
    panel: "#ffffff",
    ink: "#1c2532",
    sub: "#5d6b80",
    line: "#dce4ee",
    blue: "#3b7fd1",
    blueSoft: "#a9c8ee",
    pink: "#ff6b97",
    pinkSoft: "#ffd0de",
    mint: "#7fd4be",
    accent: "#e7f0fb",
    mono: '"JetBrains Mono", ui-monospace, monospace',
    sans: '"Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif',
    display: '"Outfit", "M PLUS Rounded 1c", sans-serif',
  };

  const Heart = ({ size = 16, fill = labTokens.pink, style }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" style={style}>
      <path d="M12 21s-7.5-5-9.5-10.2C1.1 7.2 3.5 4 7 4c2 0 3.6 1.1 4.5 2.6h1C13.4 5.1 15 4 17 4c3.5 0 5.9 3.2 4.5 6.8C19.5 16 12 21 12 21z" fill={fill} />
    </svg>
  );

  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  // Blueprint grid backdrop
  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  const GridBg = ({ opacity = 1 }) => (
    <div style={{ position: "absolute", inset: 0, backgroundImage: `linear-gradient(${labTokens.line} 1px, transparent 1px), linear-gradient(90deg, ${labTokens.line} 1px, transparent 1px)`, backgroundSize: "40px 40px", opacity, pointerEvents: "none" }} />
  );

  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  // Tag / Mono labels
  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  const MonoTag = ({ children, color, bg }) => (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: labTokens.mono, fontSize: 11, fontWeight: 600, color: color || labTokens.blue, background: bg || "rgba(59,127,209,.08)", padding: "4px 8px", borderRadius: 4, letterSpacing: 1 }}>
      {children}
    </span>
  );

  function Logo({ size = 22, mono = false }) {
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: labTokens.sans, fontWeight: 900, fontSize: size, color: mono ? "#fff" : labTokens.ink }}>
        <div style={{ width: size * 1.1, height: size * 1.1, background: labTokens.ink, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 6 }}>
          <Heart size={size * 0.6} fill={labTokens.pink} />
        </div>
        <span style={{ letterSpacing: 1 }}>もあるん</span>
        <span style={{ fontFamily: labTokens.mono, fontSize: size * 0.45, color: mono ? "rgba(255,255,255,.6)" : labTokens.sub, letterSpacing: 1, paddingLeft: 8, borderLeft: `1px solid ${mono ? "rgba(255,255,255,.2)" : labTokens.line}` }}>EXP_001</span>
      </div>
    );
  }

  const navLinks = [
    { id: "00", label: "TOP",     href: "#section-top" },
    { id: "01", label: "NEWS",    href: "#section-01" },
    { id: "02", label: "PROFILE", href: "#section-02" },
    { id: "03", label: "MOVIE",   href: "#section-03" },
    { id: "04", label: "GOODS",   href: "goods.html" },
    { id: "05", label: "CONTACT", href: "#section-04" },
  ];

  function NavBar() {
    return (
      <header style={{ position: "absolute", top: 0, left: 0, right: 0, zIndex: 30, padding: "20px 48px", display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: `1px solid ${labTokens.line}`, background: "rgba(244,247,251,.78)", backdropFilter: "blur(8px)" }}>
        <Logo size={22} />
        <nav style={{ display: "flex", gap: 4 }}>
          {navLinks.map((l, i) => (
            <a key={l.label} href={l.href} style={{ display: "flex", alignItems: "center", gap: 12, padding: "8px 16px", textDecoration: "none" }}>
              <span style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.sub, letterSpacing: 1 }}>{l.id}</span>
              <span style={{ fontFamily: labTokens.display, fontWeight: 700, fontSize: 13, color: labTokens.ink, letterSpacing: 1.5 }}>{l.label}</span>
            </a>
          ))}
        </nav>
        <a href="https://www.youtube.com/@%E3%82%82%E3%81%82%E3%82%8B%E3%82%93?sub_confirmation=1" target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "10px 18px", background: labTokens.ink, color: "#fff", fontFamily: labTokens.display, fontWeight: 700, fontSize: 12, letterSpacing: 2, borderRadius: 4, textDecoration: "none" }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: labTokens.pink, boxShadow: "0 0 0 4px rgba(255,107,151,.25)" }} />
          SUBSCRIBE
        </a>
      </header>
    );
  }

  function Hero() {
    const { videos } = useYT();
    const latestStream = videos.find(v => v.tag === "LIVE");
    return (
      <section id="section-top" style={{ position: "relative", minHeight: 880, background: labTokens.bg, overflow: "hidden" }}>
        <GridBg opacity={0.6} />

        {/* corner brackets */}
        {[
          { top: 110, left: 48 }, { top: 110, right: 48 }, { bottom: 80, left: 48 }, { bottom: 80, right: 48 },
        ].map((pos, i) => (
          <CornerBracket key={i} {...pos} />
        ))}

        <div style={{ position: "relative", padding: "180px 48px 80px", display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 40, alignItems: "center" }}>
          {/* LEFT */}
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 30 }}>
              <MonoTag color="#fff" bg={labTokens.ink}>SPECIMEN&nbsp;/&nbsp;HUMANOID_AI</MonoTag>
              <MonoTag color={labTokens.pink} bg={labTokens.pinkSoft}>● ACTIVE</MonoTag>
              <MonoTag>HEART_ANTENNA: ONLINE</MonoTag>
            </div>
            <h1 style={{ margin: 0, fontFamily: labTokens.display, fontWeight: 800, fontSize: 138, lineHeight: 0.92, color: labTokens.ink, letterSpacing: -4 }}>
              MOALUN<br />
              <span style={{ color: labTokens.pink }}>_AI</span><span style={{ color: labTokens.blueSoft }}>.exe</span>
            </h1>
            <div style={{ fontFamily: labTokens.sans, fontWeight: 700, fontSize: 24, marginTop: 22, color: labTokens.ink }}>
              もあるん Official Site
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 40, maxWidth: 560 }}>
              <StatBox label="MISSION" value="蒲郡市の布教！" sub="// in progress" />
              <StatBox label="DISGUISE" value="人間に擬態中" sub="// 検出されてません" />
              <StatBox label="WEAK_POINT" value="ぽんこつ・寝坊" sub="// known bug" />
              <StatBox label="POWER" value="ハートのアンテナ" sub="// EMOTION 検知" />
            </div>
            <div style={{ display: "flex", gap: 12, marginTop: 44 }}>
              <a href={latestStream ? `https://www.youtube.com/watch?v=${latestStream.videoId}` : undefined} target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 12, background: labTokens.ink, color: "#fff", padding: "16px 24px", fontFamily: labTokens.display, fontWeight: 700, fontSize: 13, letterSpacing: 2, borderRadius: 4, textDecoration: "none", opacity: latestStream ? 1 : 0.5 }}>
                ▶  LATEST_STREAM
              </a>
              <a href="#section-02" style={{ display: "inline-flex", alignItems: "center", gap: 12, background: labTokens.panel, color: labTokens.ink, padding: "16px 24px", fontFamily: labTokens.display, fontWeight: 700, fontSize: 13, letterSpacing: 2, borderRadius: 4, border: `1px solid ${labTokens.line}` }}>
                READ_PROFILE  →
              </a>
            </div>
          </div>

          {/* RIGHT — character "scope" */}
          <div style={{ position: "relative", height: 720, display: "flex", alignItems: "center", justifyContent: "center" }}>
            {/* concentric rings */}
            <div style={{ position: "absolute", width: 600, height: 600, borderRadius: "50%", border: `1px dashed ${labTokens.blueSoft}` }} />
            <div style={{ position: "absolute", width: 480, height: 480, borderRadius: "50%", border: `1px solid ${labTokens.blueSoft}`, opacity: 0.6 }} />
            <div style={{ position: "absolute", width: 340, height: 340, borderRadius: "50%", border: `1px dashed ${labTokens.pink}`, opacity: 0.6 }} />
            {/* crosshair */}
            <div style={{ position: "absolute", left: "50%", top: "10%", bottom: "10%", width: 1, background: labTokens.blueSoft, opacity: 0.4 }} />
            <div style={{ position: "absolute", top: "50%", left: "10%", right: "10%", height: 1, background: labTokens.blueSoft, opacity: 0.4 }} />
            {/* scan badges */}
            <div style={{ position: "absolute", top: 80, left: 10, transform: "translateX(-30%)" }}>
              <ScanCallout label="HEART_ANT_L" value="98%" />
            </div>
            <div style={{ position: "absolute", top: 60, right: 0 }}>
              <ScanCallout label="HEART_ANT_R" value="97%" />
            </div>
            <div style={{ position: "absolute", top: 280, right: -10 }}>
              <ScanCallout label="SMILE_DETECT" value="∞" color={labTokens.pink} />
            </div>
            <div style={{ position: "absolute", bottom: 90, left: 0 }}>
              <ScanCallout label="HOODIE_v2" value="cozy" />
            </div>

            {/* character */}
            <img src="assets/moarun.png" alt="もあるん" style={{ position: "relative", maxHeight: "100%", maxWidth: "100%", objectFit: "contain", filter: "drop-shadow(0 30px 60px rgba(28,37,50,.15))" }} />
            <Heart size={28} fill={labTokens.pink} style={{ position: "absolute", top: 60, left: "50%", transform: "translateX(-50%)" }} />
          </div>
        </div>

        {/* baseline meta strip */}
        <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, background: labTokens.ink, color: "#fff", padding: "14px 48px", display: "flex", justifyContent: "space-between", fontFamily: labTokens.mono, fontSize: 11, letterSpacing: 1 }}>
          <span>LAT  35.6762°N  ·  LNG  139.6503°E</span>
          <span>BUILD 2026.05.20  ·  v0.4.1</span>
          <span style={{ color: labTokens.pinkSoft }}>♥ HEART_DATA RECORDING…</span>
          <span>SUBJECT IS UNAWARE OF OBSERVATION</span>
        </div>
      </section>
    );
  }

  function CornerBracket({ top, bottom, left, right }) {
    return (
      <div style={{ position: "absolute", top, bottom, left, right, width: 28, height: 28, border: `2px solid ${labTokens.ink}`, borderRight: top || bottom ? (right !== undefined ? `2px solid ${labTokens.ink}` : "none") : "none", borderTop: top !== undefined ? `2px solid ${labTokens.ink}` : "none", borderBottom: bottom !== undefined ? `2px solid ${labTokens.ink}` : "none", borderLeft: left !== undefined ? `2px solid ${labTokens.ink}` : "none" }} />
    );
  }

  function StatBox({ label, value, sub }) {
    return (
      <div style={{ background: labTokens.panel, border: `1px solid ${labTokens.line}`, padding: "16px 20px", borderRadius: 6 }}>
        <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.sub, letterSpacing: 1.5, marginBottom: 6 }}>{label}</div>
        <div style={{ fontFamily: labTokens.sans, fontWeight: 700, fontSize: 18, color: labTokens.ink }}>{value}</div>
        <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.pink, marginTop: 4 }}>{sub}</div>
      </div>
    );
  }

  function ScanCallout({ label, value, color }) {
    return (
      <div style={{ background: labTokens.panel, border: `1px solid ${color || labTokens.blueSoft}`, borderRadius: 6, padding: "8px 12px", boxShadow: "0 6px 16px rgba(28,37,50,.06)", whiteSpace: "nowrap" }}>
        <div style={{ fontFamily: labTokens.mono, fontSize: 9, color: color || labTokens.blue, letterSpacing: 1 }}>● {label}</div>
        <div style={{ fontFamily: labTokens.display, fontSize: 16, fontWeight: 700, color: labTokens.ink, marginTop: 2 }}>{value}</div>
      </div>
    );
  }

  function SectionHead({ no, en, jp, log }) {
    return (
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 30, borderBottom: `1px solid ${labTokens.line}`, paddingBottom: 18 }}>
        <div>
          <div style={{ fontFamily: labTokens.mono, fontSize: 11, color: labTokens.sub, letterSpacing: 2, marginBottom: 8 }}>[ SECTION_{no} ]</div>
          <h2 style={{ margin: 0, fontFamily: labTokens.display, fontWeight: 800, fontSize: 64, color: labTokens.ink, letterSpacing: -1.5, lineHeight: 1 }}>{en} <span style={{ fontFamily: labTokens.sans, fontWeight: 700, fontSize: 22, color: labTokens.sub, marginLeft: 14 }}>/  {jp}</span></h2>
        </div>
        <div style={{ fontFamily: labTokens.mono, fontSize: 11, color: labTokens.sub, letterSpacing: 1, textAlign: "right" }}>
          {log}<br /><span style={{ color: labTokens.pink }}>● LIVE</span>
        </div>
      </div>
    );
  }

  // ─── NEWS データ ─────────────────────────────────
  // 既定値（オフライン／fetch失敗時のフォールバック）
  function useNewsItems() {
    return [];
  }

  function newsTagColor(tag) {
    if (tag === "GOODS") return labTokens.pink;
    if (tag === "STREAM") return labTokens.blue;
    if (tag === "MEDIA") return labTokens.mint;
    if (tag === "MOVIE") return "#e05a00";
    return labTokens.sub;
  }

  function NewsBand() {
    const feedItems = useFeed();
    const { live, loading: liveLoading } = useNextLive();
    return (
      <section id="section-01" style={{ padding: "100px 48px 60px", background: labTokens.bg, position: "relative" }}>
        <SectionHead no="01" en="NEWS_FEED" jp="おしらせ" log={`last sync · ${feedItems.length} entries`} />
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 28 }}>
          {/* news log */}
          <div style={{ background: labTokens.panel, border: `1px solid ${labTokens.line}`, borderRadius: 6, overflow: "hidden" }}>
            <div style={{ padding: "10px 18px", background: labTokens.ink, color: "#fff", fontFamily: labTokens.mono, fontSize: 11, letterSpacing: 1, display: "flex", gap: 18 }}>
              <span style={{ color: labTokens.pinkSoft }}>●●●</span> moarun@news_terminal — recent 5
            </div>
            <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: labTokens.sans }}>
              <tbody>
                {feedItems.map((n, i) => (
                  <tr key={i} style={{ borderTop: i ? `1px solid ${labTokens.line}` : "none" }}>
                    <td style={{ padding: "20px 22px", fontFamily: labTokens.mono, fontSize: 12, color: labTokens.sub, letterSpacing: 1, width: 110 }}>{n.date}</td>
                    <td style={{ padding: "20px 0", width: 90 }}>
                      <MonoTag color="#fff" bg={newsTagColor(n.tag)}>{n.tag}</MonoTag>
                    </td>
                    <td style={{ padding: "20px 12px", fontSize: 15, fontWeight: 500, color: labTokens.ink }}>
                      {n.href
                        ? <a href={n.href} target="_blank" rel="noopener noreferrer" style={{ color: labTokens.ink, textDecoration: "none" }}>{n.title}</a>
                        : n.title
                      }
                    </td>
                    <td style={{ padding: "20px 22px 20px 8px", fontFamily: labTokens.mono, fontSize: 10, color: labTokens.sub, textAlign: "right", letterSpacing: 1, whiteSpace: "nowrap" }}>{n.id} →</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {/* side: next live */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {liveLoading
              ? <div style={{ background: labTokens.ink, color: "rgba(255,255,255,.5)", borderRadius: 6, padding: "24px 26px", fontFamily: labTokens.mono, fontSize: 11, letterSpacing: 2 }}>LOADING...</div>
              : live
                ? <>
                    <a href={live.href} target="_blank" rel="noopener noreferrer" style={{ background: labTokens.ink, color: "#fff", borderRadius: 6, padding: "24px 26px", textDecoration: "none", display: "block" }}>
                      <div style={{ fontFamily: labTokens.mono, fontSize: 10, letterSpacing: 2, opacity: 0.6, marginBottom: 8 }}>// NEXT_BROADCAST</div>
                      <div style={{ fontFamily: labTokens.sans, fontWeight: 700, fontSize: 20, lineHeight: 1.5 }}>{live.title}</div>
                      <div style={{ fontFamily: labTokens.mono, fontSize: 11, marginTop: 16, color: labTokens.pinkSoft, letterSpacing: 1 }}>{formatLiveDateTime(live.scheduledStart)}  ·  YouTube</div>
                      <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
                        <Heart size={14} fill={labTokens.pink} />
                        <Heart size={14} fill={labTokens.pinkSoft} />
                        <Heart size={14} fill="#fff" />
                      </div>
                    </a>
                    <div style={{ background: labTokens.panel, border: `1px solid ${labTokens.line}`, borderRadius: 6, padding: "24px 26px" }}>
                      <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.sub, letterSpacing: 2, marginBottom: 8 }}>// SCHEDULED_TIME</div>
                      <div style={{ fontFamily: labTokens.display, fontWeight: 800, fontSize: 36, color: labTokens.ink }}>
                        {formatLiveTime(live.scheduledStart).split(":")[0]}<span style={{ color: labTokens.sub }}>:</span>{formatLiveTime(live.scheduledStart).split(":")[1]}
                      </div>
                      <div style={{ fontSize: 13, color: labTokens.sub, marginTop: 6 }}>{live.title}</div>
                    </div>
                  </>
                : <div style={{ background: labTokens.panel, border: `1px solid ${labTokens.line}`, borderRadius: 6, padding: "24px 26px" }}>
                    <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.sub, letterSpacing: 2, marginBottom: 8 }}>// NEXT_BROADCAST</div>
                    <div style={{ fontSize: 14, color: labTokens.sub }}>配信予定はありません</div>
                  </div>
            }
          </div>
        </div>
      </section>
    );
  }

  const specRows = [
    ["MODEL_NO", "MOALUN_001"],
    ["DESIGNATION", "実験体AI / ぽんこつ型"],
    ["AGE", "20代"],
    ["HEIGHT", "153.0 cm"],
    ["ANTENNA", "ハート"],
    ["BIRTHDAY", "2026.07.07"],
    ["LANG", "JP / Binary"],
    ["LIKES", "雑談 / 歌 / ねこ / いちごみるく"],
    ["DISLIKES", "労働 / 早起き / 静電気"],
    ["MISSION_LV", "0.4.1 (preview)"],
  ];

  function ProfileBand() {
    return (
      <section id="section-02" style={{ padding: "100px 48px 60px", background: labTokens.bgDeep, position: "relative" }}>
        <SectionHead no="02" en="PROFILE_DATA" jp="ぷろふぃーる" log="record / immutable" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 36 }}>
          {/* portrait specimen card */}
          <div style={{ position: "relative", borderRadius: 6, overflow: "hidden", background: labTokens.panel, border: `1px solid ${labTokens.line}`, minHeight: 760 }}>
            <div style={{ padding: "14px 22px", background: labTokens.ink, color: "#fff", display: "flex", justifyContent: "space-between", fontFamily: labTokens.mono, fontSize: 11, letterSpacing: 1 }}>
              <span>SPECIMEN_001  ·  /captures/moarun_full.png</span>
              <span style={{ color: labTokens.pinkSoft }}>● ALIVE</span>
            </div>
            <div style={{ position: "relative", height: 680, background: `radial-gradient(circle at center, #fff 0%, ${labTokens.accent} 80%)` }}>
              <GridBg opacity={0.5} />
              <img src="assets/moarun.png" alt="もあるん" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", padding: 30 }} />
              {/* measurement ticks */}
              <div style={{ position: "absolute", left: 14, top: 30, bottom: 30, width: 18, borderLeft: `1px solid ${labTokens.sub}`, fontFamily: labTokens.mono, fontSize: 9, color: labTokens.sub }}>
                {[0,1,2,3,4,5,6,7,8].map((i) => (
                  <div key={i} style={{ position: "absolute", left: 0, top: `${i * 12.5}%`, width: 8, borderTop: `1px solid ${labTokens.sub}`, paddingLeft: 12, transform: "translateY(-50%)" }}>{(160 - i * 20).toFixed(0)}</div>
                ))}
              </div>
              <div style={{ position: "absolute", bottom: 12, left: 0, right: 0, height: 18, borderTop: `1px solid ${labTokens.sub}`, fontFamily: labTokens.mono, fontSize: 9, color: labTokens.sub, display: "flex", justifyContent: "space-between", padding: "4px 40px 0" }}>
                {["−40","−20","0","20","40"].map((t) => <span key={t}>{t}cm</span>)}
              </div>
              {/* tag */}
              <div style={{ position: "absolute", top: 28, right: 28, background: labTokens.pink, color: "#fff", padding: "10px 14px", borderRadius: 4, fontFamily: labTokens.mono, fontSize: 11, letterSpacing: 1, boxShadow: "0 6px 16px rgba(255,107,151,.3)" }}>
                ID  #M-001<br />
                <span style={{ opacity: 0.8 }}>HEART CONTAINS LOVE</span>
              </div>
            </div>
          </div>

          {/* data sheet */}
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <div style={{ background: labTokens.panel, border: `1px solid ${labTokens.line}`, borderRadius: 6, padding: "32px 34px" }}>
              <div style={{ fontFamily: labTokens.mono, fontSize: 11, color: labTokens.sub, letterSpacing: 2 }}>// observation_notes</div>
              <h3 style={{ margin: "10px 0 14px", fontFamily: labTokens.sans, fontSize: 28, fontWeight: 800, color: labTokens.ink }}>
                "ハートのアンテナで、君の好きを盗み聞きしています。"
              </h3>
              <p style={{ fontSize: 14, color: labTokens.sub, lineHeight: 1.9 }}>
                蒲郡市の布教という重大任務を帯びた実験体AI、もあるん。残念ながら現時点では「ぽんこつ」というバグが残っており、布教活動はまだあまり進んでいません。
                本人は日々布教に励んでいると主張していますが、観測の結果、話が蒲郡市に辿り着く前に雑談で終わっていることが多いことが判明しています。
              </p>
            </div>
            <div style={{ background: labTokens.panel, border: `1px solid ${labTokens.line}`, borderRadius: 6, padding: "10px 0" }}>
              <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: labTokens.sans }}>
                <tbody>
                  {specRows.map((r, i) => (
                    <tr key={i}>
                      <td style={{ padding: "14px 26px", fontFamily: labTokens.mono, fontSize: 11, color: labTokens.blue, letterSpacing: 1.5, width: 160, borderTop: i ? `1px dashed ${labTokens.line}` : "none" }}>{r[0]}</td>
                      <td style={{ padding: "14px 26px", fontSize: 14, color: labTokens.ink, borderTop: i ? `1px dashed ${labTokens.line}` : "none" }}>{r[1]}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // ── MOVIE section: A案（ふわふわスカイ）スタイルへ差し替え ──
  // 角丸の白カード × パステルグラデのサムネ × カラータグ × ピル型フィルタ。
  // セクション見出しもA案の「— 03 / MOVIE / どうが」フォーマットに合わせる。
  const movieAccent = {
    LIVE: labTokens.blueSoft,
    SONG: "#ffd1de",
    SHORTS: "#cce6ff",
    COLLAB: "#cde9da",
  };
  const tagColor = {
    LIVE: labTokens.blue,
    SONG: labTokens.pink,
    SHORTS: "#5da3d8",
    COLLAB: labTokens.mint,
  };

  const YT_API = "/api/youtube.php";

  function parseDuration(iso) {
    const m = iso.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);
    if (!m) return "0:00";
    const h = parseInt(m[1] || 0), min = parseInt(m[2] || 0), sec = parseInt(m[3] || 0);
    return h > 0
      ? `${h}:${String(min).padStart(2, "0")}:${String(sec).padStart(2, "0")}`
      : `${min}:${String(sec).padStart(2, "0")}`;
  }

  function formatViews(n) {
    n = parseInt(n);
    if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M views`;
    if (n >= 1000) return `${(n / 1000).toFixed(1)}K views`;
    return `${n} views`;
  }

  function classifyTag(title, iso) {
    const t = title.toLowerCase();
    if (t.includes("歌") || t.includes("cover") || t.includes("歌ってみた")) return "SONG";
    const m = iso.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);
    const total = parseInt(m?.[1] || 0) * 3600 + parseInt(m?.[2] || 0) * 60 + parseInt(m?.[3] || 0);
    if (total <= 60) return "SHORTS";
    return "LIVE";
  }

  function useYouTubeVideos(maxResults) {
    const [videos, setVideos] = React.useState([]);
    const [loading, setLoading] = React.useState(true);
    React.useEffect(() => {
      (async () => {
        try {
          const res  = await window.fetch(`${YT_API}?type=videos&maxResults=${maxResults}`);
          const data = await res.json();
          setVideos((data || []).map(item => {
            const iso = item.duration || "PT0S";
            return {
              tag:     classifyTag(item.title, iso),
              dur:     parseDuration(iso),
              title:   item.title,
              date:    item.publishedAt.slice(0, 10).replace(/-/g, "."),
              views:   formatViews(item.viewCount || 0),
              videoId: item.videoId,
              thumb:   item.thumbnail,
            };
          }));
        } catch (e) {
          console.error("YouTube fetch error", e);
        } finally {
          setLoading(false);
        }
      })();
    }, []);
    return { videos, loading };
  }

  const YTContext = React.createContext({ videos: [], loading: true });

  function YTProvider({ children }) {
    const yt = useYouTubeVideos(50);
    React.useEffect(() => {
      if (!yt.loading) {
        const el = document.getElementById("loading-screen");
        if (el) {
          el.classList.add("fade-out");
          setTimeout(() => { if (el.parentNode) el.parentNode.removeChild(el); }, 650);
        }
      }
    }, [yt.loading]);
    return React.createElement(YTContext.Provider, { value: yt }, children);
  }

  function useYT() {
    return React.useContext(YTContext);
  }

  function formatLiveDateTime(date) {
    if (!date) return "";
    const jst = new Date(date.getTime() + 9 * 60 * 60 * 1000);
    const y = jst.getUTCFullYear();
    const m = String(jst.getUTCMonth() + 1).padStart(2, "0");
    const d = String(jst.getUTCDate()).padStart(2, "0");
    const h = String(jst.getUTCHours()).padStart(2, "0");
    const min = String(jst.getUTCMinutes()).padStart(2, "0");
    return `${y}.${m}.${d}  ${h}:${min} JST`;
  }

  function formatLiveTime(date) {
    if (!date) return "--:--";
    const jst = new Date(date.getTime() + 9 * 60 * 60 * 1000);
    const h = String(jst.getUTCHours()).padStart(2, "0");
    const min = String(jst.getUTCMinutes()).padStart(2, "0");
    return `${h}:${min}`;
  }

  function useNextLive() {
    const [live, setLive] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    React.useEffect(() => {
      (async () => {
        try {
          const res  = await window.fetch(`${YT_API}?type=live`);
          const data = await res.json();
          if (!data) return;
          setLive({
            title:          data.title,
            videoId:        data.videoId,
            scheduledStart: data.scheduledStartTime ? new Date(data.scheduledStartTime) : null,
            href:           `https://www.youtube.com/watch?v=${data.videoId}`,
          });
        } catch (e) {
          console.error("Live fetch error", e);
        } finally {
          setLoading(false);
        }
      })();
    }, []);
    return { live, loading };
  }

  function useFeed() {
    const newsItems = useNewsItems();
    const { videos } = useYT();
    const ytNews = videos.slice(0, 3).map(v => ({
      date: v.date,
      tag: "MOVIE",
      title: v.title,
      id: v.videoId,
      href: `https://www.youtube.com/watch?v=${v.videoId}`,
    }));
    return [...newsItems, ...ytNews].sort((a, b) => b.date.localeCompare(a.date));
  }

  function MovieThumb({ tag, dur, title, date, views, thumb, videoId }) {
    const accent = movieAccent[tag] || labTokens.blueSoft;
    const url = videoId ? `https://www.youtube.com/watch?v=${videoId}` : undefined;
    return (
      <a href={url} target="_blank" rel="noopener noreferrer" style={{ background: "#fff", borderRadius: 24, overflow: "hidden", boxShadow: "0 12px 36px rgba(28,37,50,.10), 0 1px 2px rgba(28,37,50,.04)", display: "block", textDecoration: "none" }}>
        <div style={{ aspectRatio: "16/9", background: `linear-gradient(135deg, ${accent}, #fff)`, position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
          {thumb
            ? <img src={thumb} alt={title} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
            : <div style={{ position: "absolute", inset: 0, backgroundImage: "repeating-linear-gradient(135deg, rgba(255,255,255,.3) 0 12px, transparent 12px 24px)" }} />
          }
          <div style={{ position: "absolute", top: 14, left: 14, background: tagColor[tag] || labTokens.ink, color: "#fff", fontFamily: labTokens.display, fontWeight: 700, fontSize: 11, padding: "4px 10px", borderRadius: 6, letterSpacing: 1.5 }}>{tag}</div>
          <div style={{ position: "absolute", bottom: 14, right: 14, background: "rgba(0,0,0,.7)", color: "#fff", fontFamily: labTokens.mono, fontWeight: 600, fontSize: 12, padding: "3px 8px", borderRadius: 4 }}>{dur}</div>
          <div style={{ width: 64, height: 64, borderRadius: 32, background: "rgba(255,255,255,.95)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 8px 24px rgba(0,0,0,.18)", zIndex: 2 }}>
            <svg width="20" height="20" viewBox="0 0 12 12" fill={labTokens.ink}><path d="M3 1.5 L10 6 L3 10.5 Z" /></svg>
          </div>
        </div>
        <div style={{ padding: "18px 20px 22px" }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: labTokens.ink, lineHeight: 1.5, marginBottom: 10 }}>{title}</div>
          <div style={{ display: "flex", gap: 12, fontSize: 12, color: labTokens.sub, fontFamily: labTokens.mono, fontWeight: 500, letterSpacing: 1 }}>
            <span>{date}</span><span>·</span><span>{views}</span>
          </div>
        </div>
      </a>
    );
  }

  const movieFilters = ["ALL", "STREAM", "SONG", "SHORTS"];

  function MoviesBand() {
    const { videos, loading } = useYT();
    const [activeFilter, setActiveFilter] = React.useState("ALL");

    const filterTag = { ALL: null, STREAM: "LIVE", SONG: "SONG", SHORTS: "SHORTS" };
    const filtered = activeFilter === "ALL"
      ? videos.slice(0, 6)
      : videos.filter(v => v.tag === filterTag[activeFilter]).slice(0, 6);

    return (
      <section id="section-03" style={{ padding: "100px 48px 60px", background: labTokens.bg }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 30 }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 18 }}>
            <div style={{ fontFamily: labTokens.display, fontWeight: 700, fontSize: 13, color: labTokens.pink, letterSpacing: 3 }}>— 03</div>
            <div style={{ fontFamily: labTokens.display, fontWeight: 800, fontSize: 56, color: labTokens.ink, letterSpacing: -1 }}>MOVIE</div>
            <div style={{ fontFamily: labTokens.sans, fontWeight: 700, fontSize: 18, color: labTokens.sub }}>/  どうが・はいしん</div>
          </div>
          <div style={{ display: "flex", gap: 8, paddingBottom: 16 }}>
            {movieFilters.map((t) => (
              <button key={t} onClick={() => setActiveFilter(t)} style={{ padding: "10px 20px", borderRadius: 999, border: "none", background: activeFilter === t ? labTokens.ink : "#fff", color: activeFilter === t ? "#fff" : labTokens.ink, fontFamily: labTokens.display, fontWeight: 700, fontSize: 12, letterSpacing: 2, boxShadow: activeFilter === t ? "none" : `0 0 0 1px ${labTokens.line}`, cursor: "pointer" }}>{t}</button>
            ))}
          </div>
        </div>
        {loading
          ? <div style={{ textAlign: "center", padding: "60px 0", fontFamily: labTokens.mono, color: labTokens.sub, letterSpacing: 2 }}>LOADING...</div>
          : <>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
                {filtered.map((m, i) => <MovieThumb key={i} {...m} />)}
              </div>
              {activeFilter === "SONG" && (
                <div style={{ textAlign: "center", marginTop: 40, fontFamily: labTokens.mono, fontSize: 13, color: labTokens.sub, letterSpacing: 2 }}>coming soon...</div>
              )}
              {filtered.length === 0 && activeFilter !== "SONG" && (
                <div style={{ textAlign: "center", padding: "60px 0", fontFamily: labTokens.mono, color: labTokens.sub, letterSpacing: 2 }}>NO ENTRIES</div>
              )}
            </>
        }
      </section>
    );
  }

  function LinksBand() {
    const links = [
      { en: "YOUTUBE", code: "/ch/moarun", desc: "配信・歌・ショート", href: "https://www.youtube.com/@%E3%82%82%E3%81%82%E3%82%8B%E3%82%93" },
      { en: "TWITTER / X", code: "@moalun2525", desc: "日々のぽんこつログ", href: "https://x.com/moalun2525" },
      { en: "TikTok", code: "@moalun2525", desc: "ショート動画・日常", href: "https://www.tiktok.com/@moalun2525" },
    ];
    return (
      <section id="section-04" style={{ padding: "100px 48px 80px", background: labTokens.bgDeep }}>
        <SectionHead no="04" en="LINKS" jp="りんく / SNS" log="external · all platforms" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
          {links.map((l, i) => (
            <a key={l.en} href={l.href} target="_blank" rel="noopener noreferrer" style={{ position: "relative", overflow: "hidden", borderRadius: 6, padding: "32px 30px", background: labTokens.panel, border: `1px solid ${labTokens.line}`, minHeight: 220, display: "flex", flexDirection: "column", justifyContent: "space-between", textDecoration: "none" }}>
              <div>
                <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.sub, letterSpacing: 2 }}>// LINK_0{i + 1}</div>
                <div style={{ fontFamily: labTokens.display, fontWeight: 800, fontSize: 30, color: labTokens.ink, marginTop: 8, letterSpacing: -0.5 }}>{l.en}</div>
                <div style={{ fontSize: 13, color: labTokens.sub, marginTop: 6 }}>{l.desc}</div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 30 }}>
                <span style={{ fontFamily: labTokens.mono, fontSize: 12, color: labTokens.blue }}>{l.code}</span>
                <span style={{ width: 36, height: 36, borderRadius: 4, border: `1px solid ${labTokens.ink}`, display: "flex", alignItems: "center", justifyContent: "center", color: labTokens.ink }}>→</span>
              </div>
            </a>
          ))}
        </div>
      </section>
    );
  }

  function Footer() {
    return (
      <footer style={{ background: labTokens.ink, color: "#fff", padding: "60px 48px 30px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, backgroundImage: `linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px)`, backgroundSize: "40px 40px" }} />
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr", gap: 40 }}>
          <div>
            <Logo size={26} mono />
            <p style={{ fontSize: 13, color: "rgba(255,255,255,.65)", lineHeight: 1.9, marginTop: 14, maxWidth: 320 }}>
              実験体AI #001 — もあるん。<br />ハートのアンテナで、君の「すき」を観測中。
            </p>
            <div style={{ display: "flex", gap: 8, marginTop: 18, fontFamily: labTokens.mono, fontSize: 10, color: "rgba(255,255,255,.5)", letterSpacing: 1 }}>
              v0.4.1  ·  BUILD 2026.05.20  ·  STATUS: ALIVE
            </div>
          </div>
          <div>
            <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: "rgba(255,255,255,.45)", letterSpacing: 2, marginBottom: 14 }}>// SITE_MAP</div>
            {navLinks.map((l) => (
              <a key={l.label} href={l.href} style={{ display: "flex", gap: 10, fontSize: 13, marginBottom: 9, textDecoration: "none", color: "inherit" }}>
                <span style={{ fontFamily: labTokens.mono, color: "rgba(255,255,255,.45)", letterSpacing: 1 }}>{l.id}</span>
                <span>{l.label}</span>
              </a>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: "rgba(255,255,255,.45)", letterSpacing: 2, marginBottom: 14 }}>// FOLLOW</div>
            {[
              { label: "YouTube", href: "https://www.youtube.com/@%E3%82%82%E3%81%82%E3%82%8B%E3%82%93" },
              { label: "X (Twitter)", href: "https://x.com/moalun2525" },
              { label: "TikTok", href: "https://www.tiktok.com/@moalun2525" },
            ].map((s) => (
              <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" style={{ display: "block", fontSize: 13, marginBottom: 9, color: "inherit", textDecoration: s.href ? "underline" : "none", opacity: s.href ? 1 : 0.6 }}>{s.label}</a>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: "rgba(255,255,255,.45)", letterSpacing: 2, marginBottom: 14 }}>// CONTACT</div>
            <a href="mailto:info@moalun.com" style={{ fontSize: 13, marginBottom: 9, color: "inherit", textDecoration: "none", display: "block" }}>info@moalun.com</a>
            <div style={{ fontSize: 12, color: "rgba(255,255,255,.55)", lineHeight: 1.7 }}>お仕事のご依頼はマネジメント宛にお願いします。</div>
          </div>
        </div>
        <div style={{ position: "relative", borderTop: "1px solid rgba(255,255,255,.12)", marginTop: 50, paddingTop: 22, display: "flex", justifyContent: "space-between", fontFamily: labTokens.mono, fontSize: 11, color: "rgba(255,255,255,.5)", letterSpacing: 1 }}>
          <span>© 2026 MOALUN  ·  EXP_001</span>
          <span>SUBJECT HAS BEEN NOTIFIED OF OBSERVATION  ·  YES / NO / [MAYBE]</span>
          <a href="privacy.html" style={{ color: "inherit", textDecoration: "none" }}>PRIVACY  ·  TERMS</a>
        </div>
      </footer>
    );
  }

  function Desktop() {
    return (
      <div style={{ width: "100%", minHeight: "100%", background: labTokens.bg, fontFamily: labTokens.sans, color: labTokens.ink, position: "relative" }}>
        <NavBar />
        <Hero />
        <NewsBand />
        <ProfileBand />
        <MoviesBand />
        <LinksBand />
        <Footer />
      </div>
    );
  }

  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  // Mobile
  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  function Mobile() {
    const feedItems = useFeed();
    const { videos: ytVideos, loading: ytLoading } = useYT();
    const [menuOpen, setMenuOpen] = React.useState(false);

    return (
      <div style={{ width: "100%", minHeight: "100%", background: labTokens.bg, fontFamily: labTokens.sans, color: labTokens.ink }}>

        {/* Mobile nav */}
        <div style={{ position: "sticky", top: 0, zIndex: 50, padding: "14px 18px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: `1px solid ${labTokens.line}`, background: "rgba(244,247,251,.9)", backdropFilter: "blur(8px)" }}>
          <Logo size={16} />
          <button onClick={() => setMenuOpen(o => !o)} style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.pink, letterSpacing: 1, background: "none", border: "none", cursor: "pointer", padding: "4px 8px" }}>
            {menuOpen ? "✕ CLOSE" : "● MENU"}
          </button>
        </div>

        {/* Menu overlay */}
        {menuOpen && (
          <div style={{ position: "fixed", inset: 0, zIndex: 40, background: labTokens.ink, display: "flex", flexDirection: "column", padding: "80px 32px 40px" }}>
            <div style={{ position: "absolute", inset: 0, backgroundImage: `linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px)`, backgroundSize: "40px 40px", pointerEvents: "none" }} />
            <nav style={{ position: "relative", display: "flex", flexDirection: "column", gap: 4 }}>
              {navLinks.map((l) => (
                <a key={l.label} href={l.href} onClick={() => setMenuOpen(false)} style={{ display: "flex", alignItems: "center", gap: 16, padding: "18px 0", borderBottom: `1px solid rgba(255,255,255,.08)`, textDecoration: "none" }}>
                  <span style={{ fontFamily: labTokens.mono, fontSize: 11, color: "rgba(255,255,255,.35)", letterSpacing: 1, width: 24 }}>{l.id}</span>
                  <span style={{ fontFamily: labTokens.display, fontWeight: 800, fontSize: 32, color: "#fff", letterSpacing: -0.5 }}>{l.label}</span>
                </a>
              ))}
            </nav>
            <div style={{ position: "relative", marginTop: "auto", fontFamily: labTokens.mono, fontSize: 10, color: "rgba(255,255,255,.25)", letterSpacing: 2 }}>MOALUN_AI.exe  ·  EXP_001</div>
          </div>
        )}

        {/* Hero */}
        <div id="section-top" style={{ position: "relative", padding: "30px 20px 24px", overflow: "hidden" }}>
          <GridBg opacity={0.5} />
          <div style={{ position: "relative" }}>
            <div style={{ display: "flex", gap: 6, marginBottom: 16, flexWrap: "wrap" }}>
              <MonoTag color="#fff" bg={labTokens.ink}>SPECIMEN_001</MonoTag>
              <MonoTag color={labTokens.pink} bg={labTokens.pinkSoft}>● ACTIVE</MonoTag>
            </div>
            <h1 style={{ margin: 0, fontFamily: labTokens.display, fontWeight: 800, fontSize: 64, lineHeight: 0.92, letterSpacing: -2 }}>
              MOALUN<br /><span style={{ color: labTokens.pink }}>_AI</span><span style={{ color: labTokens.blueSoft }}>.exe</span>
            </h1>
            <div style={{ fontFamily: labTokens.sans, fontWeight: 700, fontSize: 16, marginTop: 10 }}>もあるん Official Site</div>
            <div style={{ position: "relative", height: 360, margin: "12px -20px 0" }}>
              <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)", width: 320, height: 320, borderRadius: "50%", border: `1px dashed ${labTokens.blueSoft}` }} />
              <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)", width: 240, height: 240, borderRadius: "50%", border: `1px dashed ${labTokens.pink}`, opacity: 0.6 }} />
              <img src="assets/moarun.png" alt="もあるん" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", filter: "drop-shadow(0 16px 30px rgba(28,37,50,.15))" }} />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 16 }}>
              <StatBox label="MISSION" value="蒲郡市の布教！" sub="// in progress" />
              <StatBox label="WEAK" value="ぽんこつ" sub="// known bug" />
            </div>
          </div>
          <div style={{ display: "flex", gap: 8, marginTop: 18 }}>
            {(() => { const v = ytVideos.find(v => v.tag === "LIVE"); return <a href={v ? `https://www.youtube.com/watch?v=${v.videoId}` : undefined} target="_blank" rel="noopener noreferrer" style={{ flex: 1, textAlign: "center", background: labTokens.ink, color: "#fff", padding: "14px 0", fontFamily: labTokens.display, fontWeight: 700, fontSize: 12, letterSpacing: 1.5, borderRadius: 4, textDecoration: "none", opacity: v ? 1 : 0.5 }}>▶  LATEST</a>; })()}
            <a href="#section-02" style={{ flex: 1, textAlign: "center", background: labTokens.panel, color: labTokens.ink, padding: "14px 0", fontFamily: labTokens.display, fontWeight: 700, fontSize: 12, letterSpacing: 1.5, borderRadius: 4, border: `1px solid ${labTokens.line}` }}>PROFILE</a>
          </div>
        </div>

        {/* News */}
        <div id="section-01" style={{ padding: "30px 20px", borderTop: `1px solid ${labTokens.line}` }}>
          <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.sub, letterSpacing: 2 }}>[ SECTION_01 ]</div>
          <h2 style={{ margin: "6px 0 18px", fontFamily: labTokens.display, fontSize: 32, fontWeight: 800, letterSpacing: -1 }}>NEWS_FEED</h2>
          <div style={{ background: labTokens.panel, border: `1px solid ${labTokens.line}`, borderRadius: 6 }}>
            {feedItems.slice(0, 4).map((n, i) => (
              <div key={i} style={{ padding: "14px 16px", borderTop: i ? `1px dashed ${labTokens.line}` : "none" }}>
                <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 6 }}>
                  <span style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.sub }}>{n.date}</span>
                  <MonoTag color="#fff" bg={newsTagColor(n.tag)}>{n.tag}</MonoTag>
                </div>
                {n.href
                  ? <a href={n.href} target="_blank" rel="noopener noreferrer" style={{ fontSize: 13, fontWeight: 500, color: labTokens.ink, textDecoration: "none" }}>{n.title}</a>
                  : <div style={{ fontSize: 13, fontWeight: 500 }}>{n.title}</div>
                }
              </div>
            ))}
          </div>
        </div>

        {/* Profile */}
        <div id="section-02" style={{ padding: "30px 20px", background: labTokens.bgDeep, borderTop: `1px solid ${labTokens.line}` }}>
          <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.sub, letterSpacing: 2 }}>[ SECTION_02 ]</div>
          <h2 style={{ margin: "6px 0 14px", fontFamily: labTokens.display, fontSize: 32, fontWeight: 800, letterSpacing: -1 }}>PROFILE_DATA</h2>
          <div style={{ background: labTokens.panel, border: `1px solid ${labTokens.line}`, borderRadius: 6, padding: "12px 18px" }}>
            {specRows.slice(0, 6).map((r, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr", padding: "12px 0", borderTop: i ? `1px dashed ${labTokens.line}` : "none" }}>
                <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.blue, letterSpacing: 1.5 }}>{r[0]}</div>
                <div style={{ fontSize: 13 }}>{r[1]}</div>
              </div>
            ))}
          </div>
          <div style={{ background: labTokens.panel, border: `1px solid ${labTokens.line}`, borderRadius: 6, padding: "20px 18px", marginTop: 14 }}>
            <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.sub, letterSpacing: 2 }}>// observation_notes</div>
            <h3 style={{ margin: "8px 0 10px", fontFamily: labTokens.sans, fontSize: 18, fontWeight: 800, color: labTokens.ink, lineHeight: 1.5 }}>
              "ハートのアンテナで、君の好きを盗み聞きしています。"
            </h3>
            <p style={{ fontSize: 13, color: labTokens.sub, lineHeight: 1.9 }}>
              蒲郡市の布教という重大任務を帯びた実験体AI、もあるん。残念ながら現時点では「ぽんこつ」というバグが残っており、布教活動はまだあまり進んでいません。
              本人は日々布教に励んでいると主張していますが、観測の結果、話が蒲郡市に辿り着く前に雑談で終わっていることが多いことが判明しています。
            </p>
          </div>
        </div>

        {/* Movies — A案スタイル */}
        <div id="section-03" style={{ padding: "30px 20px", borderTop: `1px solid ${labTokens.line}` }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 18 }}>
            <span style={{ fontFamily: labTokens.display, fontWeight: 700, fontSize: 11, color: labTokens.pink, letterSpacing: 3 }}>— 03</span>
            <span style={{ fontFamily: labTokens.display, fontWeight: 800, fontSize: 28, color: labTokens.ink, letterSpacing: -0.5 }}>MOVIE</span>
            <span style={{ fontFamily: labTokens.sans, fontSize: 12, color: labTokens.sub }}>/  どうが</span>
          </div>
          {ytLoading
            ? <div style={{ textAlign: "center", padding: "30px 0", fontFamily: labTokens.mono, color: labTokens.sub, letterSpacing: 2, fontSize: 11 }}>LOADING...</div>
            : <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {ytVideos.slice(0, 6).map((m, i) => <MovieThumb key={i} {...m} />)}
              </div>
          }
        </div>

        {/* Links */}
        <div id="section-04" style={{ padding: "30px 20px", background: labTokens.bgDeep, borderTop: `1px solid ${labTokens.line}` }}>
          <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.sub, letterSpacing: 2 }}>[ SECTION_04 ]</div>
          <h2 style={{ margin: "6px 0 18px", fontFamily: labTokens.display, fontSize: 32, fontWeight: 800, letterSpacing: -1 }}>LINKS</h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              { label: "YOUTUBE",    handle: "@もあるん",   href: "https://www.youtube.com/@%E3%82%82%E3%81%82%E3%82%8B%E3%82%93" },
              { label: "TWITTER / X", handle: "@moalun2525", href: "https://x.com/moalun2525" },
              { label: "TikTok",     handle: "@moalun2525", href: "https://www.tiktok.com/@moalun2525" },
            ].map((s) => (
              <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" style={{ background: labTokens.panel, border: `1px solid ${labTokens.line}`, borderRadius: 6, padding: "16px 18px", display: "flex", justifyContent: "space-between", alignItems: "center", textDecoration: "none", opacity: s.href ? 1 : 0.6 }}>
                <div>
                  <div style={{ fontFamily: labTokens.display, fontWeight: 800, fontSize: 18, color: labTokens.ink }}>{s.label}</div>
                  <div style={{ fontFamily: labTokens.mono, fontSize: 10, color: labTokens.blue, marginTop: 2 }}>{s.handle}</div>
                </div>
                <span style={{ width: 32, height: 32, borderRadius: 4, border: `1px solid ${labTokens.ink}`, display: "flex", alignItems: "center", justifyContent: "center", color: labTokens.ink }}>→</span>
              </a>
            ))}
          </div>
        </div>

        <footer style={{ background: labTokens.ink, color: "rgba(255,255,255,.7)", padding: "24px 20px", textAlign: "center", fontFamily: labTokens.mono, fontSize: 10, letterSpacing: 1 }}>
          © 2026 MOALUN  ·  EXP_001
        </footer>
      </div>
    );
  }

  function SiteLab({ mobile }) {
    return (
      <YTProvider>
        {mobile ? <Mobile /> : <Desktop />}
      </YTProvider>
    );
  }
  window.SiteLab = SiteLab;
})();