/* NowCards.jsx — three quick-glance metric cards under the hero.
   Cognition · Last-night sleep · Bedtime tonight. */

function NowCards() {
  return (
    <section data-screen-label="02 Now cards">
      <div className="section-title">
        <span>Right now</span>
        <span className="see-all">See full health →</span>
      </div>

      <div className="now-grid">
        <div className="now-card">
          <div className="lbl"><span className="dot" style={{ background:'var(--indigo)' }}></span>Cognition</div>
          <div className="val">78<small> / 100</small></div>
          <div className="sub">Memory −12% — protect deep work before noon.</div>
          <div className="bar"><i style={{ width:'78%', background:'var(--green)' }}></i></div>
        </div>

        <div className="now-card">
          <div className="lbl"><span className="dot" style={{ background:'var(--purple)' }}></span>Last night · sleep</div>
          <div className="val">6.2<small>h</small></div>
          <div className="sub">−1.4h vs 7.5h target. Debt at <b>3.1h</b>.</div>
          <div className="bar"><i style={{ width:'62%', background:'var(--orange)' }}></i></div>
        </div>

        <div className="now-card" style={{ background:'var(--grad-bedtime)', color:'#fff', borderColor:'transparent' }}>
          <div className="lbl" style={{ color:'rgba(255,255,255,.7)' }}>
            <span className="dot" style={{ background:'#fff' }}></span>Tonight's bedtime
          </div>
          <div className="val" style={{ color:'#fff' }}>10:30<small style={{ color:'rgba(255,255,255,.65)' }}> PM</small></div>
          <div className="sub" style={{ color:'rgba(255,255,255,.78)' }}>
            Forecast from 7:15 AM tomorrow, an 8h target.
          </div>
        </div>
      </div>
    </section>
  );
}

window.NowCards = NowCards;