/* GreetingHero.jsx — Ordentus midnight hero card.
   Greeting + live clock + weather + 3-stat strip.
   The single most recognisable surface in the product. */

function GreetingHero() {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 30 * 1000);
    return () => clearInterval(id);
  }, []);

  const hour = now.getHours();
  const greeting = hour < 5 ? 'Late night'
                 : hour < 12 ? 'Good morning'
                 : hour < 17 ? 'Good afternoon'
                 : hour < 21 ? 'Good evening'
                 : 'Winding down';

  const time12 = now.toLocaleTimeString([], { hour:'numeric', minute:'2-digit' });
  const [t, ampm] = time12.split(' ');
  const dateStr = now.toLocaleDateString([], { weekday:'long', month:'short', day:'numeric' }).toUpperCase();

  return (
    <section className="hero" data-screen-label="01 Greeting hero">
      <div className="hero-head">
        <div>
          <div className="hero-eyebrow"><span className="orb" aria-hidden="true"></span>Today · Wed 13 May</div>
          <h2 className="hero-greet">{greeting}, Pete. <span className="dim">One page for your day.</span></h2>
          <p className="hero-tag">
            You're <strong>2h 15m</strong> from <strong>CS 240</strong>.
            Cognition reads sharp — memory is the one to watch.
          </p>
        </div>
        <div className="hero-clock">
          <div className="t">{t}<span className="ampm">{ampm}</span></div>
          <div className="d">{dateStr}</div>
          <div className="wx"><span style={{ fontSize:16 }}>⛅</span><span>18° · Light cloud</span></div>
        </div>
      </div>

      <div className="hero-stats">
        <div className="hero-stat">
          <div className="lbl">Cognition</div>
          <div className="val">78<small> / 100</small></div>
          <div className="delta">▼ 4 vs 14-day avg</div>
        </div>
        <div className="hero-stat">
          <div className="lbl">Last night · sleep</div>
          <div className="val">6.2<small>h</small></div>
          <div className="delta">−1.4h vs target</div>
        </div>
        <div className="hero-stat">
          <div className="lbl">Next event · in</div>
          <div className="val">2h 15m</div>
          <div className="delta">CS 240 · 9:00 AM</div>
        </div>
      </div>
    </section>
  );
}

window.GreetingHero = GreetingHero;