// today/ProjectDetail.jsx — tasks grouped by section + progress + people.

function ProjectDetail({ dark = false }) {
  const proj = PROJECTS.ordentus;
  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Today" title="Project"/>

      <div style={{ padding: '4px 20px 0' }}>
        <div className="row" style={{ gap: 8 }}>
          <span style={{ width: 12, height: 12, borderRadius: 50, background: proj.color }}/>
          <span className="cp" style={{ color: 'var(--io-label-secondary)', textTransform: 'uppercase', letterSpacing: 0.7, fontWeight: 600 }}>Project</span>
        </div>
        <div className="t1" style={{ marginTop: 6, letterSpacing: -0.5 }}>{proj.name}</div>
        <div className="bd" style={{ color: 'var(--io-label-secondary)', marginTop: 6, lineHeight: 1.4 }}>
          Ship the first public release. Calendar merge + Health sidecar + sharing.
        </div>
      </div>

      <div style={{ padding: '16px 16px 0' }}>
        <div className="card padded" style={{ padding: 16 }}>
          <div className="between">
            <div className="cp" style={{ color: 'var(--io-label-secondary)', textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 600 }}>Progress</div>
            <div className="row" style={{ gap: 4 }}>
              <div className="av" style={{
                width: 22, height: 22, borderRadius: 50,
                background: 'linear-gradient(135deg,#5E5CE6,#AF52DE)', color: '#fff',
                display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600,
              }}>L</div>
              <div className="av" style={{
                width: 22, height: 22, borderRadius: 50,
                background: 'var(--io-fill-tertiary)', color: 'var(--io-label-secondary)',
                display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600,
                marginLeft: -6, border: '1.5px solid var(--io-bg-elev)',
              }}>M</div>
              <div className="av" style={{
                width: 22, height: 22, borderRadius: 50,
                background: 'var(--io-fill-tertiary)', color: 'var(--io-label-secondary)',
                display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600,
                marginLeft: -6, border: '1.5px solid var(--io-bg-elev)',
              }}>P</div>
            </div>
          </div>
          <div className="between" style={{ marginTop: 8 }}>
            <div className="m-md" data-num style={{ fontSize: 32 }}>58<span className="m-unit" style={{ fontSize: 16 }}>%</span></div>
            <div className="fn" style={{ color: 'var(--io-label-secondary)' }} data-num>28 of 48 tasks · 3 due this week</div>
          </div>
          <div className="bar" style={{ height: 6, background: 'var(--io-fill-tertiary)', borderRadius: 3, marginTop: 10, overflow: 'hidden' }}>
            <i style={{ display: 'block', height: '100%', width: '58%', background: proj.color, borderRadius: 3 }}/>
          </div>
        </div>
      </div>

      <SectionHead label="In progress"/>
      <div style={{ padding: '0 16px' }}>
        <TodoRow      title="Draft v1 release notes" projectColor={proj.color} due="Thu"/>
        <TodoRow      title="Sharing — token rotation flow" projectColor={proj.color}/>
        <TodoRow      title="Settings: timezone autodetect" projectColor={proj.color}/>
      </div>

      <SectionHead label="Up next"/>
      <div style={{ padding: '0 16px' }}>
        <TodoRow title="Empty state — no calendars yet" projectColor={proj.color}/>
        <TodoRow title="Polish iOS keyboard tab dismissal" projectColor={proj.color}/>
        <TodoRow title="Apple Health: write last-sample timestamps" projectColor={proj.color}/>
        <TodoRow title="Admin · log streaming SSE" projectColor={proj.color}/>
      </div>

      <SectionHead label="Done"/>
      <div style={{ padding: '0 16px' }}>
        <TodoRow done title="Brand spec finalised" projectColor={proj.color}/>
        <TodoRow done title="Calendar Day view shipped" projectColor={proj.color}/>
        <TodoRow done title="Health overview shipped" projectColor={proj.color}/>
      </div>

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