// Meetings & e-voting — competitor best-of (StrataVote-style motions + electronic
// voting), in Opsmera's language. Agenda, compliant motions, live tallies, quorum.
function Motion({ m }) {
  const total = m.forV + m.against + m.abstain;
  const pc = n => total ? (n / total * 100) : 0;
  const statusStage = { carried: 'carried', defeated: 'defeated', open: 'voting', upcoming: 'upcoming' }[m.status];
  return (
    <div className="motion">
      <div className="mtop">
        <span className="no">{m.no}</span>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', gap: 14, alignItems: 'flex-start' }}>
            <h3>{m.title}</h3>
            <Tag stage={statusStage} />
          </div>
          <p>{m.desc}</p>
        </div>
      </div>
      {m.status !== 'upcoming' ? (
        <React.Fragment>
          <div className="vote">
            <div>
              <div className="vote-bar">
                <i className="for" style={{ width: pc(m.forV) + '%' }} />
                <i className="ag" style={{ width: pc(m.against) + '%' }} />
                <i className="ab" style={{ width: pc(m.abstain) + '%' }} />
              </div>
              <div className="vote-legend">
                <span><span className="d" style={{ background: 'var(--mint-500)' }} />For {m.forV}</span>
                <span><span className="d" style={{ background: 'var(--status-urgent)' }} />Against {m.against}</span>
                <span><span className="d" style={{ background: 'var(--navy-500)' }} />Abstain {m.abstain}</span>
              </div>
            </div>
            {m.status === 'open' && (
              <div className="vote-cta">
                <button className="btn-vote for" onClick={() => act('Vote recorded: For', { kind: 'resolved', sub: m.no + ' · ' + m.title })}><Icon name="thumbs-up" />For</button>
                <button className="btn-vote ag" onClick={() => act('Vote recorded: Against', { kind: 'urgent', icon: 'thumbs-down', sub: m.no + ' · ' + m.title })}><Icon name="thumbs-down" />Against</button>
              </div>
            )}
          </div>
        </React.Fragment>
      ) : (
        <div style={{ marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--fg-3)' }}>Opens after motion 03 closes</div>
      )}
    </div>
  );
}

function Meetings() {
  const M = MEETING;
  return (
    <div className="view"><div className="wrap">
      <div className="eyebrow">Meetings · e-voting · {M.code}</div>
      <div className="meet-head">
        <div>
          <h1 className="h-serif" style={{ fontSize: 28, margin: '12px 0 0' }}>{M.type}, <em>{M.bldg}.</em></h1>
          <div className="meet-meta">
            <div className="m"><div className="k">When</div><div className="v">{M.date}</div></div>
            <div className="m"><div className="k">Mode</div><div className="v">{M.mode}</div></div>
            <div className="m"><div className="k">Lots</div><div className="v">{M.lots}</div></div>
          </div>
        </div>
        <div className="quorum">
          <div className="lab"><span className="d" />Quorum met</div>
          <div className="big">{M.quorumHave}<small> / {M.quorumNeed} needed</small></div>
        </div>
      </div>
      <div className="toolbar" style={{ marginTop: 8 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>Agenda · {M.motions.length} motions</span>
        <button className="btn btn-ghost btn-sm" style={{ marginLeft: 'auto' }} onClick={() => act('Motion templates', { kind: 'info', icon: 'file-text', sub: 'Compliant motion library opened' })}><Icon name="file-text" />Motion templates</button>
        <button className="btn btn-primary btn-sm" onClick={() => act('Generating minutes', { kind: 'auto', icon: 'file-check', sub: 'Draft minutes from live tallies' })}><Icon name="file-check" />Generate minutes</button>
      </div>
      <div style={{ marginTop: 16 }}>
        {M.motions.map(m => <Motion key={m.no} m={m} />)}
      </div>
    </div></div>
  );
}
Object.assign(window, { Meetings });