/* Halves.jsx — "Calendar on the left. You on the right." */

function CalendarHalf() {
  return (
    <div className="half">
      <div className="eyebrow">The planning half</div>
      <h3 className="h-feature">Every feed, merged. One agenda, true.</h3>
      <p className="body-l">
        Subscribe to anything that publishes iCal — university timetables,
        work, your gym, a society exec chat, a partner's shared feed.
        Ordentus deduplicates by UID, preserves timezones, color-codes by
        source, and republishes one subscribable feed your phone, laptop,
        and watch all read.
      </p>

      <div className="mini-cal">
        <div className="mini-cal-bar">
          <span className="ttl">May 11 – 15</span>
          <span className="seg"><span>Day</span><span className="on">Week</span><span>Month</span><span>Year</span></span>
          <span className="sync">Synced 2m ago</span>
        </div>
        <div className="mini-cal-grid">
          <div className="head"></div>
          <div className="head">Mon<b>11</b></div>
          <div className="head">Tue<b>12</b></div>
          <div className="head today">Wed<b>13</b></div>
          <div className="head">Thu<b>14</b></div>
          <div className="head">Fri<b>15</b></div>
          <div className="mini-cal-body">
            <div className="mini-cal-hours">
              {['9','10','11','12','1','2','3','4'].map(h => <div key={h} className="mini-cal-hour">{h}</div>)}
            </div>
            <div className="mini-cal-col">
              <div className="mini-evt blue" style={{ top:'4%', height:'13%' }}>CS 240<small>9:00 — Uni</small></div>
              <div className="mini-evt teal" style={{ top:'50%', height:'18%' }}>Study group<small>1:00 — Personal</small></div>
            </div>
            <div className="mini-cal-col">
              <div className="mini-evt purple" style={{ top:'16%', height:'24%' }}>Tutorial · Lab 3<small>10:30 — Uni</small></div>
              <div className="mini-evt orange" style={{ top:'60%', height:'14%' }}>5k run<small>2:30 — Strava</small></div>
            </div>
            <div className="mini-cal-col">
              <div className="mini-evt blue"   style={{ top:'4%', height:'13%' }}>CS 240</div>
              <div className="mini-evt indigo" style={{ top:'24%', height:'18%' }}>Office hours<small>11:30 — Personal</small></div>
              <div className="mini-evt green"  style={{ top:'72%', height:'13%' }}>Climbing</div>
              <div className="now-line" style={{ top:'30%' }}></div>
            </div>
            <div className="mini-cal-col">
              <div className="mini-evt teal"   style={{ top:'14%', height:'26%' }}>Deep work<small>10:00 — Personal</small></div>
              <div className="mini-evt purple" style={{ top:'46%', height:'16%' }}>Therapy<small>1:00</small></div>
              <div className="mini-evt indigo" style={{ top:'68%', height:'14%' }}>Dinner — Sam</div>
            </div>
            <div className="mini-cal-col">
              <div className="mini-evt blue"   style={{ top:'4%',  height:'13%' }}>CS 240</div>
              <div className="mini-evt purple" style={{ top:'24%', height:'30%' }}>Society exec<small>10:30 — Group</small></div>
            </div>
          </div>
        </div>
      </div>

      <div className="half-caption">
        <span>Smart sync</span><span>Per-feed error isolation</span><span>Hidden events</span><span>Manual events</span>
      </div>
    </div>
  );
}

function HealthHalf() {
  return (
    <div className="half" id="health">
      <div className="eyebrow">The body &amp; mind half</div>
      <h3 className="h-feature">Tonight's bedtime. Tomorrow's clarity.</h3>
      <p className="body-l">
        Import your Apple Health export and Ordentus starts answering the
        questions a calendar can't. <em>When should I sleep tonight, given
        my 7:15 AM tomorrow? How much sleep debt am I carrying? How sharp
        will I actually be at the 10 AM tutorial?</em>
      </p>

      <div className="mock-health">
        <div className="h-bedtime">
          <div>
            <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="right">First event<b>CS 240 · 9:00 AM</b></div>
        </div>

        <div className="h-card">
          <div>
            <div className="lbl">Last night · sleep</div>
            <div className="num">6.2<small>h</small></div>
            <div className="delta warn">−1.4h vs target</div>
          </div>
          <div className="right">Debt<b>3.1h</b></div>
        </div>
      </div>

      <div className="half-caption">
        <span>Sleep stages</span><span>Sleep debt</span><span>Recovery trend</span><span>Cognition forecast</span>
      </div>
    </div>
  );
}

function Halves() {
  return (
    <section className="section section--soft" id="calendar" data-screen-label="02 Halves">
      <div className="container">
        <div className="halves-head">
          <div className="eyebrow">One page. Two halves.</div>
          <h2 className="h-section">Calendar on the left. You on the right.</h2>
        </div>
        <div className="halves-grid">
          <CalendarHalf />
          <HealthHalf />
        </div>
      </div>
    </section>
  );
}

window.Halves = Halves;