// ABOUT — profile dossier
function About() {
  return (
    <section id="about" className="page">
      <div className="sec-head">
        <div>
          <div className="tag">// 05 · PROFILE DOSSIER</div>
          <h2>PLAYER <span style={{color: "var(--rose)"}}>GAIA</span></h2>
        </div>
        <div className="sub">FILE ID · GL-7714-A / CLEARANCE: PUBLIC</div>
      </div>

      <div style={styles_ab.grid}>
        {/* Portrait card */}
        <div className="panel bracket-4" style={styles_ab.portrait}>
          <span className="bk tl"></span><span className="bk tr"></span>
          <span className="bk bl"></span><span className="bk br"></span>

          <div className="placeholder-art" style={{width: "100%", aspectRatio: "3/4"}}>
            <div className="stripe-label">[ GAIA PORTRAIT · ART GOES HERE ]</div>
          </div>

          <div style={{padding: "16px 18px", borderTop: "1px solid var(--panel-stroke)"}}>
            <div className="mono" style={{fontSize: 10, color: "var(--cyan)", letterSpacing: "0.25em"}}>CODENAME</div>
            <div className="display" style={{fontSize: 22, marginTop: 4}}>GAIA LOVE</div>
            <div className="jp" style={{fontSize: 12, color: "var(--ink-dim)", marginTop: 2}}>ガイア・ラブ</div>
          </div>
        </div>

        {/* Dossier */}
        <div style={styles_ab.dossier}>
          <div className="panel" style={styles_ab.bio}>
            <div className="jp" style={{fontSize: 12, color: "var(--cyan)", letterSpacing: "0.3em"}}>バイオグラフィー</div>
            <div className="display" style={{fontSize: 24, marginTop: 6}}>THE ANIME MADE DJ</div>

            <p style={styles_ab.para}>
              Half <span style={{color: "var(--rose)"}}>Romanian</span>, half <span style={{color: "var(--cyan)"}}>Japanese</span> — started spinning decks at 15 on Roblox and GTA radio. Turned 18 and brought the beats into Eorzea, blasting every data center and festival with <b style={{color: "var(--magenta)"}}>techno, EDM, rock and metal</b>.
            </p>
            <p style={styles_ab.para}>
              Her home club <span style={{color: "var(--magenta)"}}><b>WOAH!</b></span> is a wild mix of fast-paced EDM & techno nights and heavy rock/metal drops. Music, friends, and pure chaos. Every mix, every melody — made with heart.
            </p>
          </div>

          <div style={styles_ab.statGrid}>
            {[
              { k: "ORIGIN",  v: "RO × JP",      kana: "出身" },
              { k: "DEBUT",   v: "AGE 15",       kana: "デビュー" },
              { k: "FFXIV",   v: "SINCE 18",     kana: "参戦" },
              { k: "CIRCUIT", v: "ALL DC",       kana: "全データセンター" },
              { k: "GENRES",  v: "4 CHANNELS",   kana: "ジャンル" },
              { k: "CREW",    v: "1.2K+",        kana: "仲間" },
            ].map(s => (
              <div key={s.k} className="panel" style={styles_ab.statCell}>
                <div className="mono" style={{fontSize: 10, color: "var(--cyan)", letterSpacing: "0.25em"}}>{s.k}</div>
                <div className="display" style={{fontSize: 20, marginTop: 6}}>{s.v}</div>
                <div className="jp" style={{fontSize: 10, color: "var(--ink-faint)", marginTop: 2}}>{s.kana}</div>
              </div>
            ))}
          </div>

          {/* Affinities */}
          <div className="panel" style={styles_ab.aff}>
            <div className="mono" style={{fontSize: 10, color: "var(--cyan)", letterSpacing: "0.3em", marginBottom: 10}}>// AFFINITY CHART</div>
            {[
              {name: "Techno / EDM",   v: 98, accent: "var(--magenta)"},
              {name: "Rock / Metal",   v: 94, accent: "var(--danger)"},
              {name: "J-Pop / Synth",  v: 86, accent: "var(--rose)"},
              {name: "Ambient / Lo-fi",v: 72, accent: "var(--cyan)"},
            ].map(row => (
              <div key={row.name} style={{display: "grid", gridTemplateColumns: "140px 1fr 42px", gap: 14, alignItems: "center", padding: "8px 0"}}>
                <div style={{fontSize: 13, color: "var(--ink-dim)"}}>{row.name}</div>
                <div style={{height: 6, background: "oklch(0.15 0.04 300)", position: "relative"}}>
                  <div style={{
                    position: "absolute", left: 0, top: 0, bottom: 0,
                    width: `${row.v}%`,
                    background: row.accent,
                    boxShadow: `0 0 10px ${row.accent}`,
                  }}></div>
                </div>
                <div className="display" style={{fontSize: 14, color: row.accent, textAlign: "right"}}>{row.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const styles_ab = {
  grid: { display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: 28, alignItems: "start" },
  portrait: { overflow: "hidden" },
  dossier: { display: "flex", flexDirection: "column", gap: 18 },
  bio: { padding: 24 },
  para: { fontSize: 15, lineHeight: 1.6, color: "var(--ink-dim)", marginTop: 14, textWrap: "pretty" },
  statGrid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 },
  statCell: { padding: "14px 16px" },
  aff: { padding: 20 },
};

Object.assign(window, { About });