// Hero.jsx — minimal top band: previous musicmirror wordmark + live status.

function Hero({ state, mode }) {
  const stateMap = {
    standby:    { label: 'Standby',      cls: 'mm-pill--standby'  },
    decoding:   { label: 'Decoding',     cls: 'mm-pill--analyse'  },
    analysing:  { label: 'Analysing',    cls: 'mm-pill--analyse'  },
    ready:      { label: 'Ready',        cls: 'mm-pill--ready'    },
    live:       { label: 'Live',         cls: 'mm-pill--live'     },
    paused:     { label: 'Paused',       cls: 'mm-pill--standby'  },
    listening:  { label: 'Listening',    cls: 'mm-pill--live'     },
    error:      { label: 'Error',        cls: 'mm-pill--error'    },
  };
  const s = stateMap[state] || stateMap.standby;

  return (
    <header className="mm-hero">
      <div className="mm-hero__left">
        <div className="mm-hero__title-block">
          <h1 className="mm-hero__title">musicmirror</h1>
          <p className="mm-hero__subtitle">Sound, visualised. Measured first — felt after.</p>
        </div>
      </div>
      <div className="mm-hero__status">
        <span className={"mm-pill " + s.cls}>
          <span className="mm-pill__dot" />
          {s.label}
        </span>
        <span className="mm-hero__ledger" aria-label="Signal truth labels">
          <span className="mm-truth mm-truth--measured">Measured</span>
          <span className="mm-hero__arrow">•</span>
          <span className="mm-truth mm-truth--modeled">Modeled</span>
          <span className="mm-hero__arrow">•</span>
          <span className="mm-truth mm-truth--interpreted">Interpreted</span>
        </span>
      </div>
    </header>
  );
}

Object.assign(window, { Hero });