// shared.jsx — small shared UI pieces

// Top bar: optional back chevron + progress dots + optional help icon
function TopBar({ onBack, step, total, onHelp, dark }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 22px 4px', minHeight: 44 }}>
      <div style={{ width: 40 }}>
        {onBack && (
          <button onClick={onBack} aria-label="Back" style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: 6,
            color: dark ? 'var(--on-dark)' : 'var(--ink)', display: 'flex', marginLeft: -6,
          }}>
            <IcArrowL size={22} />
          </button>
        )}
      </div>
      <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
        {total ? (
          <div className="dots">
            {Array.from({ length: total }).map((_, i) => <i key={i} className={i === step ? 'on' : ''} />)}
          </div>
        ) : null}
      </div>
      <div style={{ width: 40, display: 'flex', justifyContent: 'flex-end' }}>
        {onHelp && (
          <button onClick={onHelp} aria-label="Help" style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: 6,
            color: dark ? 'var(--gold-soft)' : 'var(--gold)', display: 'flex', marginRight: -6,
          }}>
            <IcChat size={21} />
          </button>
        )}
      </div>
    </div>
  );
}

// Persistent help affordance, prominence 0–10
function HelpBar({ prominence = 6, onHelp }) {
  if (prominence < 3) return null;
  if (prominence < 6) {
    return (
      <button className="linkbtn" onClick={onHelp}
        style={{ alignSelf: 'center', margin: '2px auto 0' }}>
        <IcChat size={16} /> Talk to Atelier
      </button>
    );
  }
  return (
    <div className="help" onClick={onHelp} role="button" style={{ cursor: 'pointer' }}>
      <div className="av">L</div>
      <div className="t">
        <b>Talk to Atelier</b>
        <span>Laila · replies in minutes</span>
      </div>
      <button>Chat</button>
    </div>
  );
}

Object.assign(window, { TopBar, HelpBar });