// health/BedtimeDetail.jsx
// Full-bleed gradient (per user's "inset on root, full-bleed on detail").
// Hero number above the fold, then the reasoning, then "skip" / "adjust" /
// "stop using Smart Bedtime" actions.

function BedtimeDetail({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      {/* Full-bleed gradient panel that sits behind everything */}
      <div className="bedtime-full"/>

      <div style={{ position: 'relative', zIndex: 1, color: '#fff' }}>
        {/* Custom nav row in white */}
        <div style={{
          paddingTop: 56, paddingBottom: 8, position: 'relative',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '56px 12px 8px',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 2, color: '#fff', fontSize: 17, letterSpacing: -0.4 }}>
            <Icon name="chevron-left" size={22} stroke={2.6}/>
            <span style={{ marginLeft: -2 }}>Health</span>
          </div>
          <PillBtn>
            <span style={{ color: '#fff' }}><Icon name="ellipsis" size={18} stroke={2.4}/></span>
          </PillBtn>
        </div>

        <div style={{ padding: '4px 24px 0' }}>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,.72)' }}>
            <span style={{ display:'inline-flex', alignItems:'center', gap: 8 }}>
              <span style={{
                width: 14, height: 14, borderRadius: '50%',
                background: 'radial-gradient(circle at 35% 35%, #fff, rgba(255,255,255,.85) 60%, rgba(255,255,255,.4))',
                boxShadow: '0 0 12px rgba(255,255,255,.45)'
              }}/>
              Smart Bedtime
            </span>
          </div>
          <div className="t1" style={{ color: '#fff', marginTop: 8, letterSpacing: -0.5 }}>Tonight</div>
          <div className="m-hero" style={{ color: '#fff', marginTop: 18, fontSize: 84, letterSpacing: -3.2 }} data-num>
            10:30<span style={{ fontSize: 28, fontWeight: 400, opacity: 0.6, marginLeft: 6, letterSpacing: 0 }}>PM</span>
          </div>
          <div className="bd" style={{ color: 'rgba(255,255,255,.7)', marginTop: 14, lineHeight: 1.4 }}>
            Backed out from <span style={{ color: '#fff' }}>tomorrow's first event at 7:15 AM</span>, a 60-minute wind-down,
            and your 8h sleep goal.
          </div>
        </div>

        <div style={{ padding: '22px 16px 0' }}>
          <div style={{
            background: 'rgba(255,255,255,.08)',
            border: '1px solid rgba(255,255,255,.14)',
            borderRadius: 20, padding: '16px 18px',
            backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
          }}>
            <div className="cp" style={{ color: 'rgba(255,255,255,.55)', textTransform:'uppercase', letterSpacing:0.7, fontWeight:600 }}>How we got there</div>
            <div style={{ marginTop: 12, display: 'grid', gap: 12 }}>
              {[
                { l: 'First event', v: '7:15 AM', s: 'Morning shift · Work' },
                { l: 'Wake', v: '6:15 AM', s: 'Buffer of 60 min before' },
                { l: 'Sleep goal', v: '8h', s: 'Set in Schedule' },
                { l: 'Wind-down', v: '60 min', s: 'Reminder posts at 9:30 PM' },
              ].map((r, i, a) => (
                <div key={r.l} style={{
                  display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
                  paddingBottom: i < a.length - 1 ? 10 : 0,
                  borderBottom: i < a.length - 1 ? '0.5px solid rgba(255,255,255,.12)' : 'none',
                }}>
                  <div>
                    <div className="ca" style={{ color: '#fff', fontWeight: 500 }}>{r.l}</div>
                    <div className="fn" style={{ color: 'rgba(255,255,255,.5)', marginTop: 2 }}>{r.s}</div>
                  </div>
                  <div className="m-sm" data-num style={{ color: '#fff' }}>{r.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Actions */}
        <div style={{ padding: '20px 16px 0', display: 'grid', gap: 10 }}>
          <button style={{
            border: 'none', cursor: 'pointer',
            background: '#fff', color: '#1B1464',
            borderRadius: 14, padding: '15px 18px',
            fontSize: 17, fontWeight: 600, letterSpacing: -0.4,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            <Icon name="bed" size={18} stroke={2.4}/> Wind-down now
          </button>
          <button style={{
            border: '1px solid rgba(255,255,255,.18)', cursor: 'pointer',
            background: 'rgba(255,255,255,.06)', color: '#fff',
            borderRadius: 14, padding: '14px 18px',
            fontSize: 17, fontWeight: 500, letterSpacing: -0.4,
          }}>Adjust schedule</button>
          <button style={{
            border: 'none', cursor: 'pointer',
            background: 'transparent', color: 'rgba(255,255,255,.7)',
            padding: '10px 12px', fontSize: 15, fontWeight: 500, letterSpacing: -0.24,
          }}>Skip tonight</button>
        </div>

        <div style={{ padding: '20px 24px 0' }}>
          <div className="cp" style={{ color: 'rgba(255,255,255,.45)', textTransform: 'uppercase', letterSpacing: 0.7, fontWeight: 600 }}>If you go to bed at 10:30</div>
          <div className="row" style={{ marginTop: 10, gap: 14 }}>
            {[
              { l: 'Recovery', v: '+1.4h' },
              { l: 'Reaction', v: '+18%' },
              { l: 'Memory',   v: '+12%' },
            ].map(s => (
              <div key={s.l} style={{ flex: 1 }}>
                <div className="m-md" data-num style={{ color: '#fff' }}>{s.v}</div>
                <div className="fn" style={{ color: 'rgba(255,255,255,.55)', marginTop: 2 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="scroll-pad"/>
      </div>

      <TabBar active="health"/>
    </FrameScreen>
  );
}
window.BedtimeDetail = BedtimeDetail;