/* Hero.jsx — Ordentus marketing hero.
   Headline, waitlist, viz card (mini calendar + bedtime + cognition). */

function WaitlistInline() {
  const [sent, setSent] = React.useState(false);
  if (sent) {
    return (
      <p style={{
        marginTop:28, padding:'12px 16px', maxWidth:460,
        color:'#1F8B3D', fontSize:14, fontWeight:500,
        background:'rgba(52,199,89,.08)',
        border:'1px solid rgba(52,199,89,.25)',
        borderRadius:999,
      }}>
        ✓ You're on the list — we'll be in touch.
      </p>
    );
  }
  return (
    <React.Fragment>
      <form className="wl-form" onSubmit={e => { e.preventDefault(); setSent(true); }}>
        <input type="email" required placeholder="you@domain.com" aria-label="Email address" />
        <button className="btn btn--primary" type="submit">Join the waitlist</button>
      </form>
      <p className="hero-microcopy small">
        We'll email you once. You can unsubscribe in one click.
        No marketing, no drip, no sharing.
      </p>
    </React.Fragment>
  );
}

function HeroViz() {
  return (
    <div className="viz" aria-hidden="true">
      {/* Calendar slab */}
      <div className="viz-cal">
        <div className="viz-cal-bar">
          <span className="ttl">May 11 – 15</span>
          <span className="seg"><span>D</span><span className="on">W</span><span>M</span></span>
        </div>
        <div className="viz-day-head">
          <span></span>
          <span>Mon<b>11</b></span>
          <span>Tue<b>12</b></span>
          <span className="today">Wed<b>13</b></span>
          <span>Thu<b>14</b></span>
          <span>Fri<b>15</b></span>
        </div>
        <div className="viz-cal-grid">
          <div className="viz-cal-hour-col">
            {[9,10,11,12,1,2,3,4].map(h => <div key={h} className="viz-cal-hour">{h}</div>)}
          </div>
          <div className="viz-cal-cell">
            <div className="viz-evt blue"  style={{ top:'4%',  height:'13%' }}>CS 240<small>9:00 — Uni</small></div>
            <div className="viz-evt teal"  style={{ top:'50%', height:'18%' }}>Study group<small>1:00 — Personal</small></div>
          </div>
          <div className="viz-cal-cell">
            <div className="viz-evt purple" style={{ top:'16%', height:'24%' }}>Tutorial · Lab 3<small>10:30 — Uni</small></div>
            <div className="viz-evt orange" style={{ top:'60%', height:'14%' }}>5k run<small>2:30 — Strava</small></div>
          </div>
          <div className="viz-cal-cell">
            <div className="viz-evt blue"   style={{ top:'4%',  height:'13%' }}>CS 240<small>Uni</small></div>
            <div className="viz-evt indigo" style={{ top:'24%', height:'18%' }}>Office hours<small>11:30 — Personal</small></div>
            <div className="viz-evt green"  style={{ top:'72%', height:'13%' }}>Climbing</div>
          </div>
          <div className="viz-cal-cell">
            <div className="viz-evt teal"   style={{ top:'14%', height:'26%' }}>Deep work<small>10:00 — Personal</small></div>
            <div className="viz-evt purple" style={{ top:'46%', height:'16%' }}>Therapy<small>1:00 — Personal</small></div>
            <div className="viz-evt indigo" style={{ top:'68%', height:'14%' }}>Dinner — Sam</div>
          </div>
          <div className="viz-cal-cell">
            <div className="viz-evt blue"   style={{ top:'4%',  height:'13%' }}>CS 240<small>Uni</small></div>
            <div className="viz-evt purple" style={{ top:'24%', height:'30%' }}>Society exec<small>10:30 — Group</small></div>
            <div className="viz-evt red"    style={{ top:'62%', height:'14%' }}>Flight · LHR → BCN</div>
          </div>
        </div>
      </div>

      {/* Health column */}
      <div className="viz-health">
        <div className="viz-bedtime">
          <div className="lbl">Tonight's bedtime</div>
          <div className="time">10:30<small> PM</small></div>
          <div className="meta">Forecast from your 7:15 AM tomorrow</div>
        </div>
        <div className="viz-cog">
          <span className="lbl">Cognition</span>
          <span className="pill">Clear</span>
          <div className="ring">
            <svg viewBox="0 0 108 108">
              <circle className="track" cx="54" cy="54" r="45" strokeWidth="9"/>
              {/* 78% of 2πr ≈ 220.4; offset = 282.74 - 220.4 = 62.34 */}
              <circle className="arc"   cx="54" cy="54" r="45" strokeWidth="9"
                      strokeDasharray="282.74" strokeDashoffset="62.34"/>
            </svg>
            <div className="pct"><b>78</b><span>Today</span></div>
          </div>
          <div className="domains">
            <div className="row"><span>Focus</span><div className="bar"><i style={{ width:'82%' }}></i></div><span className="v">82</span></div>
            <div className="row warn"><span>Memory</span><div className="bar"><i style={{ width:'71%' }}></i></div><span className="v">71</span></div>
            <div className="row"><span>Reaction</span><div className="bar"><i style={{ width:'80%' }}></i></div><span className="v">80</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow">A personal life portal · private beta</div>
            <h1 className="h-display">One page for your life.</h1>
            <p className="lede">
              Your calendars, your body, your mind — beside each other,
              every morning. Quiet. Plain. Yours alone.
            </p>
            <WaitlistInline />
          </div>
          <HeroViz />
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;