// idea-shared.jsx — wrapper used by all 5 idea artboards.
// Provides the header strip (number + title + tagline + pills),
// a 2-column body (stage on the left, rail of stats/pros on the right).

function IdeaShell({ num, title, titleEm, tagline, pills = [], stats = [], pros = [], rail, children }) {
  return (
    <div className="idea wc-scope">
      <div className="idea-head">
        <div className="idea-num">
          <small>IDEA</small>
          {num}
        </div>
        <div>
          <h1 className="idea-title">
            {title}{titleEm && <> <em>{titleEm}</em></>}
          </h1>
          <div className="idea-tag">{tagline}</div>
        </div>
        <div className="idea-pill-stack">
          {pills.map((p, i) => (
            <span key={i} className={`idea-pill ${p.kind || ''}`}>
              {p.icon && <Icon name={p.icon}/>} {p.label}
            </span>
          ))}
        </div>
      </div>
      <div className="idea-body">
        <div className="idea-stage">{children}</div>
        <div className="idea-rail">
          {rail || (
            <>
              {stats.map((s, i) => (
                <div key={i} className={`idea-rail-card ${s.dark ? 'dark' : ''}`}>
                  <h4>{s.label}</h4>
                  <div className="stat-num">{s.num}</div>
                  <div className="stat-lbl">{s.sub}</div>
                </div>
              ))}
              {pros.length > 0 && (
                <div className="idea-rail-card">
                  <h4>Why it works</h4>
                  <ul className="idea-pros">
                    {pros.map((p, i) => (
                      <li key={i} dangerouslySetInnerHTML={{ __html: p }}/>
                    ))}
                  </ul>
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// CharAvatar from earlier — re-defined locally so each artboard can use it
function CharAv({ charId, size = 36, ring }) {
  if (!charId || !window.HSCChars) {
    return <div style={{ width: size, height: size, borderRadius: '50%', background: 'var(--adv-plum-soft)' }}/>;
  }
  const html = window.HSCChars.svg(charId, { size, ring });
  return <span style={{ display: 'inline-block', width: size, height: size, lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: html }}/>;
}

Object.assign(window, { IdeaShell, CharAv });