// SunSync — Home dashboard + Apply flow

// ─── HOME DASHBOARD ─────────────────────────────────────────
function HomeDashboard({ dark }) {
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="day" />
      <div style={{ position: 'relative', height: '100%', overflowY: 'auto', paddingBottom: 120 }} className="no-scrollbar">
        {/* Header */}
        <div style={{ padding: '70px 24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <div style={{ fontFamily: 'Geist Mono', fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: dark ? '#A89F92' : '#A89F92' }}>Saturday · May 10</div>
            <div className="font-display" style={{ fontSize: 30, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', marginTop: 4, lineHeight: 1 }}>Good afternoon, Maya.</div>
          </div>
          <div style={{
            width: 44, height: 44, borderRadius: '50%',
            background: 'linear-gradient(135deg, #F0E2C6, #C99750)',
            border: dark ? '0.5px solid rgba(255,255,255,0.08)' : '0.5px solid rgba(255,255,255,0.9)',
            boxShadow: '0 4px 12px rgba(31,27,22,0.1)',
          }} />
        </div>

        {/* UV Ring HERO */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 18, marginBottom: 8 }}>
          <UVRing value={7} max={11} label="High" dark={dark} size={240} />
        </div>

        {/* Weather strip */}
        <div style={{ padding: '8px 24px 0' }}>
          <Glass dark={dark} padding={14} radius={20}>
            <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
              {[
                { label: 'Now', val: '11:23', sub: '78°F' },
                { label: 'Cloud', val: '12%', sub: 'clear' },
                { label: 'Peak UV', val: '14:00', sub: 'in 2h 37m' },
                { label: 'Sunset', val: '19:42', sub: '' },
              ].map((s, i) => (
                <div key={i} style={{ textAlign: 'center', flex: 1 }}>
                  <div style={{ fontFamily: 'Geist Mono', fontSize: 9, letterSpacing: 1, textTransform: 'uppercase', color: dark ? '#A89F92' : '#A89F92', marginBottom: 4 }}>{s.label}</div>
                  <div style={{ fontFamily: 'Geist', fontSize: 14, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16' }}>{s.val}</div>
                  {s.sub && <div style={{ fontFamily: 'Geist', fontSize: 10, color: dark ? '#7A7065' : '#A89F92', marginTop: 1 }}>{s.sub}</div>}
                </div>
              ))}
            </div>
          </Glass>
        </div>

        {/* Protection card */}
        <div style={{ padding: '12px 24px 0' }}>
          <Glass dark={dark} padding={20} radius={28}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
              <ProtectionRing pct={68} size={104} dark={dark} label="Protected" />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'Geist', fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase', color: dark ? '#A89F92' : '#A89F92' }}>Reapply in</div>
                <div className="font-display" style={{ fontSize: 38, fontStyle: 'italic', lineHeight: 1, color: dark ? '#F2EBDF' : '#1F1B16', marginTop: 2 }}>
                  47<span style={{ fontFamily: 'Geist', fontSize: 16, fontStyle: 'normal', fontWeight: 500, marginLeft: 4, color: dark ? '#B8AE9F' : '#6B6258' }}>min</span>
                </div>
                <div style={{ marginTop: 8, padding: '4px 10px', borderRadius: 12, background: dark ? 'rgba(143,180,200,0.15)' : 'rgba(166,200,219,0.3)', display: 'inline-block' }}>
                  <span style={{ fontFamily: 'Geist', fontSize: 11, fontWeight: 500, color: dark ? '#8FB4C8' : '#6F9CB5' }}>SPF 50 · Mineral</span>
                </div>
              </div>
            </div>

            <div style={{ height: 1, background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(31,27,22,0.06)', margin: '16px 0' }} />

            <button style={{
              width: '100%', height: 54, borderRadius: 27, border: 'none',
              background: 'linear-gradient(135deg, #E8A24A, #D9624A)',
              color: '#FFF', fontFamily: 'Geist', fontSize: 16, fontWeight: 600,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              boxShadow: '0 8px 24px rgba(232,162,74,0.4)',
              cursor: 'pointer',
            }}>
              <Glyph.Drop s={20} c="#FFF" />
              Apply sunscreen
            </button>
          </Glass>
        </div>

        {/* Today's exposure */}
        <div style={{ padding: '12px 24px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10, padding: '0 4px' }}>
            <div style={{ fontFamily: 'Geist', fontSize: 13, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16' }}>Today's exposure</div>
            <div style={{ fontFamily: 'Geist', fontSize: 12, color: dark ? '#A89F92' : '#A89F92' }}>see all →</div>
          </div>
          <Glass dark={dark} padding={18} radius={24}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 12 }}>
              <span className="font-display" style={{ fontSize: 32, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16' }}>2h 18m</span>
              <span style={{ fontFamily: 'Geist', fontSize: 12, color: dark ? '#A89F92' : '#A89F92' }}>· 64% protected</span>
            </div>
            {/* hourly bars */}
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 56 }}>
              {[20,30,45,55,68,78,85,72,60,48,30,18].map((v, i) => {
                const isPeak = i === 6;
                return (
                  <div key={i} style={{ flex: 1, height: `${v}%`, position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
                    <div style={{
                      width: '100%', height: '100%', borderRadius: 6,
                      background: isPeak
                        ? 'linear-gradient(180deg, #D9624A, #E8A24A)'
                        : dark
                          ? 'linear-gradient(180deg, rgba(232,162,74,0.5), rgba(232,162,74,0.2))'
                          : 'linear-gradient(180deg, rgba(232,162,74,0.7), rgba(232,162,74,0.25))',
                    }} />
                  </div>
                );
              })}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontFamily: 'Geist Mono', fontSize: 9, color: dark ? '#7A7065' : '#A89F92', letterSpacing: 0.5 }}>
              <span>6a</span><span>9a</span><span>12p</span><span>3p</span><span>6p</span>
            </div>
          </Glass>
        </div>

        {/* Quick insights */}
        <div style={{ padding: '12px 24px 0' }}>
          <Glass dark={dark} padding={16} radius={22}>
            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: 12, background: dark ? 'rgba(244,181,103,0.15)' : 'rgba(232,162,74,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Glyph.Sparkle s={18} c={dark ? '#F4B567' : '#C99750'} />
              </div>
              <div>
                <div style={{ fontFamily: 'Geist', fontSize: 11, fontWeight: 600, letterSpacing: 1, textTransform: 'uppercase', color: dark ? '#F4B567' : '#C99750', marginBottom: 2 }}>AI Insight</div>
                <div style={{ fontFamily: 'Geist', fontSize: 13, lineHeight: 1.45, color: dark ? '#F2EBDF' : '#1F1B16' }}>UV peaks at 2 PM today. Consider reapplying before your 1:30 run.</div>
              </div>
            </div>
          </Glass>
        </div>
      </div>

      <TabBar active="home" dark={dark} />
    </div>
  );
}

// ─── APPLY — SPF select ─────────────────────────────────────
function ApplyStep1({ dark }) {
  const spfs = [15, 30, 50, 70, 100];
  const sel = 50;
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="dusk" />
      <div style={{ padding: '70px 24px 0', height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{
            width: 36, height: 36, borderRadius: 12,
            background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.7)',
            border: dark ? '0.5px solid rgba(255,255,255,0.08)' : '0.5px solid rgba(255,255,255,0.9)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            backdropFilter: 'blur(20px)',
          }}>
            <Glyph.Chevron s={14} c={dark ? '#F2EBDF' : '#1F1B16'} dir="left" />
          </div>
          <div style={{ fontFamily: 'Geist Mono', fontSize: 11, letterSpacing: 1.5, color: dark ? '#A89F92' : '#A89F92' }}>1 / 4</div>
        </div>

        <h2 className="font-display" style={{ fontSize: 32, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', margin: '32px 0 8px 0', lineHeight: 1.05 }}>Choose your SPF</h2>
        <p style={{ fontFamily: 'Geist', fontSize: 14, color: dark ? '#B8AE9F' : '#6B6258', margin: 0 }}>Higher SPF, longer protection window.</p>

        {/* big SPF picker */}
        <div style={{ margin: '32px 0' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {spfs.map(s => (
              <div key={s} style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                padding: '18px 22px', borderRadius: 22,
                background: s === sel
                  ? (dark ? 'rgba(244,181,103,0.14)' : 'rgba(232,162,74,0.14)')
                  : (dark ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.55)'),
                border: s === sel
                  ? `1.5px solid ${dark ? '#F4B567' : '#C99750'}`
                  : `0.5px solid ${dark ? 'rgba(255,255,255,0.06)' : 'rgba(31,27,22,0.06)'}`,
                backdropFilter: 'blur(20px)',
              }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                  <span style={{ fontFamily: 'Geist Mono', fontSize: 12, color: dark ? '#A89F92' : '#A89F92', letterSpacing: 1 }}>SPF</span>
                  <span className="font-display" style={{ fontSize: 36, fontStyle: 'italic', lineHeight: 1, color: dark ? '#F2EBDF' : '#1F1B16' }}>{s}</span>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontFamily: 'Geist', fontSize: 13, fontWeight: 500, color: dark ? '#F2EBDF' : '#1F1B16' }}>
                    {s >= 70 ? '~ 4 h' : s >= 50 ? '~ 3 h' : s >= 30 ? '~ 2 h' : '~ 1.5 h'}
                  </div>
                  <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#A89F92' : '#A89F92' }}>
                    {s >= 70 ? 'blocks 99%' : s >= 50 ? 'blocks 98%' : s >= 30 ? 'blocks 97%' : 'blocks 93%'}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 'auto', paddingBottom: 40 }}>
          <PillBtn dark={dark} primary full size="lg">Continue</PillBtn>
        </div>
      </div>
    </div>
  );
}

// ─── APPLY — activity ───
function ApplyStep2({ dark }) {
  const activities = [
    { id: 'beach', label: 'Beach', sub: 'Water + sand', tone: '#FFD08A' },
    { id: 'run', label: 'Run', sub: 'High sweat', tone: '#A6C8DB' },
    { id: 'hike', label: 'Hike', sub: 'High altitude', tone: '#8BA88A' },
    { id: 'pool', label: 'Pool', sub: 'Chlorine water', tone: '#7AA7BF' },
    { id: 'casual', label: 'Outdoor', sub: 'Errands, café', tone: '#E8C7A8' },
    { id: 'sport', label: 'Sport', sub: 'Tennis, golf', tone: '#E8A24A' },
  ];
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="day" />
      <div style={{ padding: '70px 24px 0', height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{
            width: 36, height: 36, borderRadius: 12,
            background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.7)',
            border: dark ? '0.5px solid rgba(255,255,255,0.08)' : '0.5px solid rgba(255,255,255,0.9)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            backdropFilter: 'blur(20px)',
          }}>
            <Glyph.Chevron s={14} c={dark ? '#F2EBDF' : '#1F1B16'} dir="left" />
          </div>
          <div style={{ fontFamily: 'Geist Mono', fontSize: 11, letterSpacing: 1.5, color: dark ? '#A89F92' : '#A89F92' }}>2 / 4</div>
        </div>

        <h2 className="font-display" style={{ fontSize: 32, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', margin: '32px 0 8px 0', lineHeight: 1.05 }}>What are you up to?</h2>
        <p style={{ fontFamily: 'Geist', fontSize: 14, color: dark ? '#B8AE9F' : '#6B6258', margin: 0 }}>We'll match the reapply rhythm to your activity.</p>

        <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {activities.map((a, i) => (
            <div key={a.id} style={{
              padding: 18, borderRadius: 22, position: 'relative', overflow: 'hidden',
              background: i === 1
                ? (dark ? 'rgba(244,181,103,0.12)' : 'rgba(232,162,74,0.12)')
                : (dark ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.55)'),
              border: i === 1
                ? `1.5px solid ${dark ? '#F4B567' : '#C99750'}`
                : `0.5px solid ${dark ? 'rgba(255,255,255,0.06)' : 'rgba(31,27,22,0.06)'}`,
              backdropFilter: 'blur(20px)',
              minHeight: 120,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: '50%',
                background: `radial-gradient(circle at 30% 30%, ${a.tone}, ${a.tone}99)`,
                boxShadow: `inset 0 -4px 8px rgba(0,0,0,0.1), 0 4px 12px ${a.tone}55`,
              }} />
              <div>
                <div style={{ fontFamily: 'Geist', fontSize: 16, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16' }}>{a.label}</div>
                <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#A89F92' : '#A89F92', marginTop: 2 }}>{a.sub}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 'auto', paddingBottom: 40 }}>
          <PillBtn dark={dark} primary full size="lg">Continue</PillBtn>
        </div>
      </div>
    </div>
  );
}

// ─── APPLY — water resistance + start ───
function ApplyStep3({ dark }) {
  const opts = ['None', '40 min', '80 min'];
  const sel = '80 min';
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="calm" />
      <div style={{ padding: '70px 24px 0', height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{
            width: 36, height: 36, borderRadius: 12,
            background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.7)',
            border: dark ? '0.5px solid rgba(255,255,255,0.08)' : '0.5px solid rgba(255,255,255,0.9)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            backdropFilter: 'blur(20px)',
          }}>
            <Glyph.Chevron s={14} c={dark ? '#F2EBDF' : '#1F1B16'} dir="left" />
          </div>
          <div style={{ fontFamily: 'Geist Mono', fontSize: 11, letterSpacing: 1.5, color: dark ? '#A89F92' : '#A89F92' }}>3 / 4</div>
        </div>

        <h2 className="font-display" style={{ fontSize: 32, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', margin: '32px 0 8px 0', lineHeight: 1.05 }}>Water resistance?</h2>
        <p style={{ fontFamily: 'Geist', fontSize: 14, color: dark ? '#B8AE9F' : '#6B6258', margin: 0 }}>Check the bottle. Affects how often you'll reapply after swims.</p>

        <Glass dark={dark} padding={6} radius={22} style={{ marginTop: 28 }}>
          <div style={{ display: 'flex', gap: 4 }}>
            {opts.map(o => (
              <div key={o} style={{
                flex: 1, padding: '14px 10px', borderRadius: 18, textAlign: 'center',
                background: o === sel ? (dark ? '#F2EBDF' : '#1F1B16') : 'transparent',
                fontFamily: 'Geist', fontSize: 14, fontWeight: 600,
                color: o === sel ? (dark ? '#1F1B16' : '#FAF5ED') : (dark ? '#B8AE9F' : '#6B6258'),
              }}>{o}</div>
            ))}
          </div>
        </Glass>

        {/* Summary preview */}
        <div style={{ marginTop: 24 }}>
          <div style={{ fontFamily: 'Geist Mono', fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase', color: dark ? '#A89F92' : '#A89F92', marginBottom: 12, paddingLeft: 4 }}>Your session</div>
          <Glass dark={dark} padding={20} radius={24}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                { label: 'SPF', val: '50 · Mineral', icon: 'Drop' },
                { label: 'Activity', val: 'Run', icon: 'Wave' },
                { label: 'Water resistant', val: '80 minutes', icon: 'Clock' },
                { label: 'Predicted protection', val: '~ 1 h 30 m', icon: 'Sparkle' },
              ].map((r, i) => {
                const I = Glyph[r.icon];
                return (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <I s={16} c={dark ? '#A89F92' : '#A89F92'} />
                    <div style={{ flex: 1, fontFamily: 'Geist', fontSize: 13, color: dark ? '#B8AE9F' : '#6B6258' }}>{r.label}</div>
                    <div style={{ fontFamily: 'Geist', fontSize: 14, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16' }}>{r.val}</div>
                  </div>
                );
              })}
            </div>
          </Glass>
        </div>

        <div style={{ marginTop: 'auto', paddingBottom: 40 }}>
          <button style={{
            width: '100%', height: 58, borderRadius: 29, border: 'none',
            background: 'linear-gradient(135deg, #E8A24A, #D9624A)',
            color: '#FFF', fontFamily: 'Geist', fontSize: 16, fontWeight: 600,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            boxShadow: '0 12px 28px rgba(232,162,74,0.4)',
            cursor: 'pointer',
          }}>
            Start protection timer
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── APPLY — timer running ───
function ApplyTimer({ dark }) {
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="day" />
      <div style={{ padding: '70px 24px 0', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div style={{ alignSelf: 'flex-end', fontFamily: 'Geist', fontSize: 14, fontWeight: 500, color: dark ? '#F2EBDF' : '#1F1B16' }}>Done</div>

        <div style={{ marginTop: 40, marginBottom: 24, textAlign: 'center' }}>
          <div style={{ fontFamily: 'Geist Mono', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: dark ? '#F4B567' : '#C99750' }}>Protected</div>
          <h2 className="font-display" style={{ fontSize: 32, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', marginTop: 6, marginBottom: 0, lineHeight: 1.05 }}>You're good to go.</h2>
        </div>

        {/* Big protection ring */}
        <div style={{ position: 'relative', marginBottom: 40 }}>
          <ProtectionRing pct={100} size={240} dark={dark} showValue={false} />
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          }}>
            <div style={{ fontFamily: 'Geist Mono', fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: dark ? '#A89F92' : '#6B6258' }}>Reapply in</div>
            <div className="font-display" style={{ fontSize: 64, fontStyle: 'italic', lineHeight: 1, color: dark ? '#F2EBDF' : '#1F1B16', marginTop: 6 }}>1:30</div>
            <div style={{ fontFamily: 'Geist', fontSize: 12, color: dark ? '#A89F92' : '#6B6258', marginTop: 4 }}>hours · minutes</div>
          </div>
        </div>

        {/* Summary chips */}
        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 8, width: '100%' }}>
          {['SPF 50', 'Mineral', 'Run', '80 min water resist'].map(c => (
            <div key={c} style={{
              padding: '8px 14px', borderRadius: 16,
              background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.55)',
              border: `0.5px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.8)'}`,
              backdropFilter: 'blur(20px)',
              fontFamily: 'Geist', fontSize: 12, fontWeight: 500,
              color: dark ? '#B8AE9F' : '#6B6258',
            }}>{c}</div>
          ))}
        </div>

        <div style={{ marginTop: 'auto', width: '100%', paddingBottom: 40, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <PillBtn dark={dark} full size="lg" style={{ background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(31,27,22,0.06)' }}>I just reapplied</PillBtn>
          <div style={{ textAlign: 'center', fontFamily: 'Geist', fontSize: 13, color: dark ? '#A89F92' : '#A89F92' }}>Pause session</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HomeDashboard, ApplyStep1, ApplyStep2, ApplyStep3, ApplyTimer });