// today/TodayHome.jsx — Home tab root. The "one page" that opens every
// morning. Composition: greeting hero → Arc → Todos (3 buckets) → Projects
// (h-scroll) → Goals → Objectives. Pinned tab bar (Today active).

function TodayHome({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      <BigTitle
        title="Today"
        leading={<div style={{ paddingLeft: 4, fontSize: 15, fontWeight: 600, color: 'var(--io-label-secondary)', whiteSpace:'nowrap' }}>
          <span style={{ color: 'var(--io-label)' }}>Sunday</span> · Mar 16
        </div>}
        trailing={<>
          <PillBtn><Icon name="plus" size={18} stroke={2.4}/></PillBtn>
          <Avatar initial="L"/>
        </>}
      />

      {/* Greeting hero */}
      <div className="greet" style={{ marginTop: 4 }}>
        <div className="row" style={{ justifyContent: 'space-between' }}>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,.65)' }}>Good morning, Lukas</div>
          <div className="row" style={{ gap: 6, color: 'rgba(255,255,255,.7)', fontSize: 12 }}>
            <Icon name="sun" size={14} stroke={2.4} style={{ color: '#FFCC55' }}/> 14° · clear
          </div>
        </div>
        <div className="t1" style={{ color: '#fff', marginTop: 8, letterSpacing: -0.45, lineHeight: 1.15 }}>
          Three things matter today.
        </div>
        <div className="bd" style={{ color: 'rgba(255,255,255,.75)', marginTop: 6, lineHeight: 1.4 }}>
          Algorithms lecture · Maya at 1 · finish thesis section 4.2.
        </div>
        <div style={{
          marginTop: 14, paddingTop: 14, borderTop: '1px solid rgba(255,255,255,.12)',
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
        }}>
          {[
            { l: 'Next up', v: '7:15 AM', s: 'Morning shift' },
            { l: 'Sleep',   v: '6.2h',    s: '−1.8h vs avg' },
            { l: 'Bedtime', v: '10:30 PM', s: 'Backed from 7:15' },
          ].map(s => (
            <div key={s.l}>
              <div className="cp" style={{ color: 'rgba(255,255,255,.55)', textTransform: 'uppercase', letterSpacing: 0.7, fontWeight: 600 }}>{s.l}</div>
              <div className="m-sm" data-num style={{ color: '#fff', marginTop: 4 }}>{s.v}</div>
              <div className="cp" style={{ color: 'rgba(255,255,255,.55)', marginTop: 2 }}>{s.s}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Today's Arc */}
      <SectionHead icon="today" label="Today's arc" see="Open Calendar"/>
      <div style={{ padding: '0 0 4px' }}>
        <ArcRow kind="past"     feed="work"     time={{ h: '7:15', s: 'AM' }} title="Morning shift"        location="Office"/>
        <ArcRow kind="past"     feed="personal" time={{ h: '9:00', s: 'AM' }} title="Daylight walk"        location="Hyde Park"/>
        <ArcRow kind="now"      feed="work"     time={{ h: '10:00', s: 'AM' }} title="Standup"             location="Engineering"/>
        <div className="arc-now"/>
        <ArcRow                  feed="personal" time={{ h: '11:15', s: 'AM' }} title="Deep work block"     location="Library 4F"/>
        <ArcRow                  feed="family"   time={{ h: '1:00', s: 'PM' }} title="Lunch w/ Maya"        location="Honey & Co"/>
        <ArcRow                  feed="uni"      time={{ h: '2:30', s: 'PM' }} title="COMP3010 · Algorithms" location="Roberts G06"/>
        <ArcRow                  feed="gym"      time={{ h: '5:00', s: 'PM' }} title="Climbing session"     location="The Castle"/>
        <ArcRow                  feed="bedtime"  time={{ h: '10:00', s: 'PM' }} title="🌙 Wind down"        location=""/>
      </div>

      {/* TO-DO — 3 buckets stacked, drag-between */}
      <BucketHeader title="Today" count={4}/>
      <div style={{ padding: '0 16px' }}>
        <TodoRow done title="Buy bread before lunch" projectColor={PROJECTS.flat.color}/>
        <TodoRow      title="Send thesis section 4.2 to Anu" projectColor={PROJECTS.thesis.color} due="By 6 PM"/>
        <TodoRow      title="Order replacement keys"  projectColor={PROJECTS.flat.color}/>
        <TodoRow      title="Reply to Priya's design review thread"/>
      </div>

      <BucketHeader title="This week" count={6}/>
      <div style={{ padding: '0 16px' }}>
        <TodoRow title="Draft v1 release notes" projectColor={PROJECTS.ordentus.color} due="Thu"/>
        <TodoRow title="Book climbing partner for Sat" projectColor={PROJECTS.fitness.color} due="Wed"/>
        <TodoRow title="Tax return — gather receipts"/>
        <TodoRow title="Renew library card"/>
      </div>

      <BucketHeader title="Later" count={11}/>
      <div style={{ padding: '0 16px' }}>
        <TodoRow title="Move desk to bedroom — measure first" projectColor={PROJECTS.flat.color}/>
        <TodoRow title="Re-read Asimov, vol III"/>
      </div>

      {/* PROJECTS */}
      <SectionHead label="Projects" see="All"/>
      <div className="proj-row">
        <ProjectCard proj="ordentus" taskCount={48} doneCount={28} pct={58}/>
        <ProjectCard proj="thesis"   taskCount={24} doneCount={9}  pct={37}/>
        <ProjectCard proj="flat"     taskCount={16} doneCount={11} pct={68}/>
        <ProjectCard proj="fitness"  taskCount={32} doneCount={18} pct={56}/>
      </div>

      {/* GOALS */}
      <SectionHead label="Goals" see="All"/>
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <GoalCard title="Half-marathon · May" milestone="Long run · 18km Saturday" percent={62} color="var(--io-activity)"/>
        <GoalCard title="Thesis · final draft" milestone="Section 4.2 written" percent={37} color="var(--io-purple)"/>
        <GoalCard title="Sleep 7h+ ten nights in a row" milestone="Tonight" percent={20} color="var(--io-indigo)"/>
      </div>

      {/* OBJECTIVES */}
      <SectionHead label="Objectives" see="All"/>
      <div style={{ padding: '0 16px' }}>
        <ObjectiveRow icon="brain"    color="var(--io-purple)"  title="Finish degree this year"     sub="3 modules remaining"/>
        <ObjectiveRow icon="activity" color="var(--io-green)"   title="Run a half-marathon"          sub="9 weeks of training"/>
        <ObjectiveRow icon="sparkles" color="var(--io-indigo)"  title="Ship Ordentus v1 publicly"    sub="Q3 · launch + handoff"/>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="today"/>
    </FrameScreen>
  );
}
window.TodayHome = TodayHome;