// RouteHeader.jsx — dark navy route summary banner shown after generation
const RouteHeader = ({ route }) => (
  <section className="mr-route">
    <div className="mr-route__kicker">DETECTED ROUTE · {route.domain}</div>
    <h2 className="mr-route__h2">
      {route.headline.map((seg, i) =>
        seg.mono ? (
          <span key={i} className="mr-route__mono">{seg.text}</span>
        ) : (
          <React.Fragment key={i}>{seg.text}</React.Fragment>
        )
      )}
    </h2>
    {route.rationale ? <p className="mr-route__why">{route.rationale}</p> : null}
    <div className="mr-route__strip">
      {route.stats.map((s, i) => (
        <div key={i} className="mr-route__stat">
          <div className="mr-route__v">{s.value}</div>
          <div className="mr-route__l">{s.label}</div>
        </div>
      ))}
    </div>
  </section>
);

window.RouteHeader = RouteHeader;