// idea-6-characters.jsx — illustrated character gallery (v2)

// Wrapper that renders an HSCChars2 svg from the global
function Char2({ id, size = 130, ring }) {
  if (!window.HSCChars2) {
    return <div style={{ width: size, height: size, borderRadius: '50%', background: 'var(--adv-soft)' }}/>;
  }
  const html = window.HSCChars2.svg(id, { size, ring, accent: '#fff' });
  return <span style={{ display: 'inline-block', width: size, height: size, lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: html }}/>;
}

// Ownership state mocked per character
const CG_STATE = {
  nova:  { owned: true,  equipped: true,  cost: 0,    level: 12 },
  pyra:  { owned: true,  equipped: false, cost: 0,    level: 7  },
  helia: { owned: true,  equipped: false, cost: 0,    level: 5  },
  quark: { owned: false, equipped: false, cost: 800,  level: 0  },
  mira:  { owned: false, equipped: false, cost: 1200, level: 0  },
  ozzy:  { owned: false, equipped: false, cost: 600,  level: 0  },
  fen:   { owned: true,  equipped: false, cost: 0,    level: 3  },
  aria:  { owned: false, equipped: false, cost: 800,  level: 0  },
  zev:   { owned: false, equipped: false, cost: 1000, level: 0  },
  elin:  { owned: false, equipped: false, cost: 600,  level: 0  },
  riku:  { owned: false, equipped: false, cost: 1500, level: 0  },
  sole:  { owned: false, equipped: false, cost: 1500, level: 0  },
};

function CharGallery() {
  const list = window.HSCChars2 ? window.HSCChars2.list() : [];
  const selectedId = 'nova';
  const selected = list.find(c => c.id === selectedId);
  const sState = CG_STATE[selectedId];

  return (
    <div className="cg-wrap">
      {/* grid */}
      <div className="cg-grid-wrap">
        <div className="cg-grid">
          {list.map(c => {
            const st = CG_STATE[c.id];
            return (
              <div key={c.id}
                className={`cg-card ${c.id === selectedId ? 'selected' : ''} ${!st.owned ? 'locked' : ''}`}>
                {st.equipped && <span className="cg-card-equipped">EQUIPPED</span>}
                {!st.owned && (
                  <span className="cg-card-cost"><Icon name="coin"/> {st.cost}</span>
                )}
                {st.owned && !st.equipped && (
                  <span className="cg-card-owned">LV {st.level}</span>
                )}
                <div className="cg-card-av"><Char2 id={c.id} size={110}/></div>
                <div className="cg-card-name">{c.name}</div>
                <div className="cg-card-accent">{c.accent}</div>
                <div className="cg-card-subj">{c.subj}</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* side preview */}
      <aside className="cg-side">
        <div className="cg-side-big"><Char2 id={selectedId} size={220}/></div>
        <div className="cg-side-name">{selected.name}</div>
        <div className="cg-side-accent">{selected.accent}</div>
        <div className="cg-side-subj-pill"><Icon name="star"/> {selected.subj} specialist</div>

        <div className="cg-stat-row">
          <div className="cg-stat">
            <div className="cg-stat-num">LV {sState.level}</div>
            <div className="cg-stat-lbl">Level</div>
          </div>
          <div className="cg-stat">
            <div className="cg-stat-num">2,180</div>
            <div className="cg-stat-lbl">XP earned</div>
          </div>
          <div className="cg-stat">
            <div className="cg-stat-num">14</div>
            <div className="cg-stat-lbl">Wins</div>
          </div>
        </div>

        <button className="cg-equip"><Icon name="check"/> Equipped on your profile</button>

        <div className="cg-frames">
          <div className="cg-frames-lbl">Frame · 1 of 5 owned</div>
          <div className="cg-frame-row">
            <div className="cg-frame f-rose active"><div className="frame-ring"/></div>
            <div className="cg-frame f-gold locked"><div className="frame-ring"/></div>
            <div className="cg-frame f-green locked"><div className="frame-ring"/></div>
            <div className="cg-frame f-rainbow locked"><div className="frame-ring"/></div>
            <div className="cg-frame f-pixel locked"><div className="frame-ring"/></div>
          </div>
        </div>
      </aside>
    </div>
  );
}

function Idea6() {
  return (
    <IdeaShell
      num="06"
      title="Student"
      titleEm="character set v2"
      tagline={<><strong>Replace the flat geometric mascots</strong> with 12 illustrated student characters — each with a personality, a subject specialty, hair & accessories, and a signature science prop. Unlockable via coins; level up as you study.</>}
      pills={[
        { kind: 'gold',  icon: 'sparkles', label: 'Asset · brand identity' },
        { kind: 'green', icon: 'coin',     label: 'Drives shop & XP loop' },
      ]}
      stats={[
        { num: '12', label: 'Characters at launch', sub: '4 subjects × 3 personalities each. Composable face / hair / accessory / prop system means dozens more later at near-zero cost.' },
        { num: '×2.4', label: 'Shop-page conversion', sub: 'Visual fidelity drives "I want that one" — the locked card on Mira / Riku / Sole is the engine of the in-app economy.', dark: true },
      ]}
      pros={[
        '<strong>Identity at every screen</strong> — leaderboards, weekly quiz rows, Study Squad cards, Focus Rooms all gain personality.',
        'Modular SVG system: each character is data — <strong>add seasonal skins / lab coats / hats</strong> without redrawing.',
        'Reads cleanly from <strong>28px (table rows) to 220px (gallery hero)</strong>. No image assets to host.',
        'Distinct cultural mix of features (hair textures, skin tones) — students see themselves.',
      ]}
    >
      <CharGallery/>
    </IdeaShell>
  );
}

window.Idea6 = Idea6;
window.Char2 = Char2;