// SunSync — Notifications + Widgets + Apple Watch

// ─── LOCKSCREEN with 3 notification concepts ────────────────
function NotificationsScreen({ dark }) {
  // dark lockscreen vibe (uses night sky)
  const notifs = [
    {
      title: 'SunSync',
      time: 'now',
      heading: 'Time to reapply',
      body: '2 h elapsed since your last application. Protection at 22%.',
      tone: 'amber',
      icon: 'Drop',
    },
    {
      title: 'SunSync',
      time: '9m ago',
      heading: 'UV levels are climbing',
      body: 'It just hit UV 8 (Very High). Consider stepping into the shade.',
      tone: 'coral',
      icon: 'Sun',
    },
    {
      title: 'SunSync',
      time: '34m ago',
      heading: 'Protection running low',
      body: 'You\'re down to 18%. A quick reapply will keep your streak.',
      tone: 'gold',
      icon: 'Bell',
    },
  ];
  const toneBg = {
    amber: 'linear-gradient(135deg, #FFD08A, #E8A24A)',
    coral: 'linear-gradient(135deg, #F2906A, #D9624A)',
    gold:  'linear-gradient(135deg, #F0E2C6, #C99750)',
  };

  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden', background: '#000' }}>
      {/* Wallpaper: sunset over ocean abstract */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, #1A1208 0%, #2A1A12 30%, #4A2618 55%, #2C1A14 85%, #0A0A0E 100%)',
      }}>
        {/* sun glow */}
        <div className="sun-pulse" style={{
          position: 'absolute', top: '38%', left: '50%', transform: 'translateX(-50%)',
          width: 220, height: 220, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(255,140,80,0.65) 0%, rgba(255,140,80,0.2) 40%, transparent 70%)',
          filter: 'blur(20px)',
        }} />
        <div style={{
          position: 'absolute', top: '46%', left: '50%', transform: 'translateX(-50%)',
          width: 80, height: 80, borderRadius: '50%',
          background: 'radial-gradient(circle, #FFD08A 0%, #E8A24A 50%, #D9624A 100%)',
          boxShadow: '0 0 80px rgba(255,140,80,0.8)',
        }} />
        {/* horizon stripes (reflected light) */}
        <div style={{ position: 'absolute', top: '52%', left: 0, right: 0, height: 30, background: 'repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,140,80,0.12) 3px, rgba(255,140,80,0.12) 5px)' }} />
      </div>

      {/* Time + date */}
      <div style={{ position: 'absolute', top: 60, left: 0, right: 0, textAlign: 'center' }}>
        <div style={{ fontFamily: 'Geist', fontSize: 16, fontWeight: 500, color: 'rgba(255,255,255,0.85)' }}>Saturday, May 10</div>
        <div style={{ fontFamily: 'Geist', fontSize: 88, fontWeight: 200, letterSpacing: -3, color: '#FFF', lineHeight: 1, marginTop: 4 }}>13:42</div>
      </div>

      {/* SunSync widget under clock */}
      <div style={{ position: 'absolute', top: 244, left: 16, right: 16 }}>
        <div style={{
          borderRadius: 22, padding: 14,
          background: 'rgba(40,32,22,0.5)',
          backdropFilter: 'blur(28px) saturate(180%)',
          WebkitBackdropFilter: 'blur(28px) saturate(180%)',
          border: '0.5px solid rgba(255,255,255,0.12)',
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <ProtectionRing pct={22} size={62} dark={true} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'Geist Mono', fontSize: 9, letterSpacing: 1.5, textTransform: 'uppercase', color: 'rgba(255,200,160,0.7)' }}>Protection</div>
            <div className="font-display" style={{ fontSize: 22, fontStyle: 'italic', color: '#FFF', lineHeight: 1.05, marginTop: 2 }}>22% · reapply soon</div>
            <div style={{ fontFamily: 'Geist', fontSize: 11, color: 'rgba(255,255,255,0.6)', marginTop: 2 }}>UV 8 · Very High</div>
          </div>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg, #FFD08A, #D9624A)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Glyph.Sun s={20} c="#FFF" />
          </div>
        </div>
      </div>

      {/* Notifications stack */}
      <div style={{ position: 'absolute', bottom: 110, left: 0, right: 0, padding: '0 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ fontFamily: 'Geist', fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.75)', padding: '0 16px 4px' }}>Notifications</div>
        {notifs.map((n, i) => {
          const I = Glyph[n.icon] || Glyph.Bell;
          return (
            <div key={i} style={{
              borderRadius: 20, padding: 14,
              background: 'rgba(40,32,22,0.55)',
              backdropFilter: 'blur(28px) saturate(180%)',
              WebkitBackdropFilter: 'blur(28px) saturate(180%)',
              border: '0.5px solid rgba(255,255,255,0.1)',
              display: 'flex', gap: 12, alignItems: 'flex-start',
              opacity: 1 - i * 0.05,
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 10, flexShrink: 0,
                background: toneBg[n.tone],
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <I s={20} c="#FFF" />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 2 }}>
                  <span style={{ fontFamily: 'Geist', fontSize: 12, fontWeight: 600, color: '#FFF', textTransform: 'uppercase', letterSpacing: 0.5 }}>{n.title}</span>
                  <span style={{ fontFamily: 'Geist', fontSize: 11, color: 'rgba(255,255,255,0.55)' }}>{n.time}</span>
                </div>
                <div style={{ fontFamily: 'Geist', fontSize: 14, fontWeight: 600, color: '#FFF', lineHeight: 1.2 }}>{n.heading}</div>
                <div style={{ fontFamily: 'Geist', fontSize: 12, color: 'rgba(255,255,255,0.7)', lineHeight: 1.35, marginTop: 2 }}>{n.body}</div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Flashlight + camera buttons */}
      <div style={{ position: 'absolute', bottom: 50, left: 0, right: 0, display: 'flex', justifyContent: 'space-between', padding: '0 40px' }}>
        <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(20px)', border: '0.5px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="#FFF"><path d="M9 2v6h6V2zm0 8v8a3 3 0 0 0 6 0v-8z"/></svg>
        </div>
        <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(20px)', border: '0.5px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FFF" strokeWidth="1.6"><rect x="3" y="7" width="18" height="13" rx="2"/><circle cx="12" cy="13.5" r="3.5"/><path d="M8 7l2-3h4l2 3"/></svg>
        </div>
      </div>
    </div>
  );
}

// ─── WIDGETS + APPLE WATCH ──────────────────────────────────
function WidgetsScreen({ dark }) {
  // Showcase: home-screen widgets in different sizes + watch faces
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      {/* iOS home-screen wallpaper */}
      <div style={{
        position: 'absolute', inset: 0,
        background: dark
          ? 'linear-gradient(160deg, #1A1208 0%, #15110A 50%, #0A0805 100%)'
          : 'linear-gradient(160deg, #FFE5C4 0%, #FAF5ED 45%, #E8DCC4 100%)',
      }}>
        <div className="aurora-1" style={{
          position: 'absolute', top: '-10%', right: '-20%', width: '90%', height: '60%',
          borderRadius: '50%',
          background: dark
            ? 'radial-gradient(circle, rgba(228,165,90,0.18) 0%, transparent 65%)'
            : 'radial-gradient(circle, rgba(255,180,90,0.4) 0%, transparent 65%)',
          filter: 'blur(40px)',
        }} />
      </div>

      <div style={{ position: 'relative', height: '100%', overflowY: 'auto', paddingBottom: 40 }} className="no-scrollbar">
        <div style={{ padding: '60px 24px 0' }}>
          <div style={{ fontFamily: 'Geist', fontSize: 14, fontWeight: 500, textAlign: 'center', color: dark ? 'rgba(242,235,223,0.85)' : 'rgba(31,27,22,0.7)' }}>Saturday, May 10</div>
          <div style={{ fontFamily: 'Geist', fontSize: 64, fontWeight: 300, letterSpacing: -2, textAlign: 'center', color: dark ? '#F2EBDF' : '#1F1B16', lineHeight: 1, marginTop: 4 }}>13:42</div>
        </div>

        <div style={{ padding: '32px 16px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {/* Section label */}
          <div style={{ fontFamily: 'Geist Mono', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: dark ? 'rgba(242,235,223,0.55)' : 'rgba(31,27,22,0.55)', paddingLeft: 8 }}>iPhone Widgets</div>

          {/* Small widget + medium widget row */}
          <div style={{ display: 'flex', gap: 12 }}>
            {/* Small UV widget */}
            <div style={{
              width: 152, height: 152, borderRadius: 22, padding: 14,
              background: dark ? 'rgba(40,32,22,0.6)' : 'rgba(255,255,255,0.65)',
              backdropFilter: 'blur(28px) saturate(180%)',
              border: `0.5px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.9)'}`,
              boxShadow: dark ? '0 12px 30px rgba(0,0,0,0.4)' : '0 12px 30px rgba(31,27,22,0.1)',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ fontFamily: 'Geist', fontSize: 10, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: dark ? '#A89F92' : '#A89F92' }}>UV Now</div>
                <div style={{ width: 18, height: 18, borderRadius: 5, background: 'linear-gradient(135deg, #E8A24A, #D9624A)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Glyph.Sun s={11} c="#FFF" />
                </div>
              </div>
              <div>
                <div className="font-display" style={{ fontSize: 64, fontStyle: 'italic', lineHeight: 1, color: dark ? '#F2EBDF' : '#1F1B16' }}>7</div>
                <div style={{ fontFamily: 'Geist', fontSize: 12, fontWeight: 500, color: dark ? '#F4B567' : '#C99750', marginTop: 2 }}>High</div>
              </div>
              <div style={{ height: 4, borderRadius: 2, background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(31,27,22,0.06)', position: 'relative' }}>
                <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: '64%', borderRadius: 2, background: 'linear-gradient(90deg, #F2C46B, #D9624A)' }} />
              </div>
            </div>

            {/* Small protection widget */}
            <div style={{
              flex: 1, height: 152, borderRadius: 22, padding: 14,
              background: dark ? 'rgba(40,32,22,0.6)' : 'rgba(255,255,255,0.65)',
              backdropFilter: 'blur(28px) saturate(180%)',
              border: `0.5px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.9)'}`,
              boxShadow: dark ? '0 12px 30px rgba(0,0,0,0.4)' : '0 12px 30px rgba(31,27,22,0.1)',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div style={{ fontFamily: 'Geist', fontSize: 10, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: dark ? '#A89F92' : '#A89F92' }}>Protection</div>
                <div style={{ fontFamily: 'Geist Mono', fontSize: 10, color: dark ? '#7A7065' : '#A89F92' }}>Maya</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <ProtectionRing pct={68} size={70} dark={dark} />
                <div>
                  <div style={{ fontFamily: 'Geist Mono', fontSize: 9, letterSpacing: 1, textTransform: 'uppercase', color: dark ? '#A89F92' : '#A89F92' }}>Reapply</div>
                  <div className="font-display" style={{ fontSize: 26, fontStyle: 'italic', lineHeight: 1, color: dark ? '#F2EBDF' : '#1F1B16', marginTop: 2 }}>47<span style={{ fontFamily: 'Geist', fontSize: 11, fontStyle: 'normal' }}>min</span></div>
                </div>
              </div>
              <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#B8AE9F' : '#6B6258' }}>SPF 50 · Mineral</div>
            </div>
          </div>

          {/* Medium widget — UV forecast */}
          <div style={{
            height: 152, borderRadius: 22, padding: 16,
            background: dark ? 'rgba(40,32,22,0.6)' : 'rgba(255,255,255,0.65)',
            backdropFilter: 'blur(28px) saturate(180%)',
            border: `0.5px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.9)'}`,
            boxShadow: dark ? '0 12px 30px rgba(0,0,0,0.4)' : '0 12px 30px rgba(31,27,22,0.1)',
            display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
              <div style={{ fontFamily: 'Geist', fontSize: 11, fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase', color: dark ? '#A89F92' : '#A89F92' }}>Today's UV</div>
              <div style={{ fontFamily: 'Geist Mono', fontSize: 10, color: dark ? '#7A7065' : '#A89F92' }}>Peak 14:00 · UV 9</div>
            </div>
            {/* hour bars */}
            <div style={{ flex: 1, display: 'flex', alignItems: 'flex-end', gap: 4 }}>
              {[20, 30, 42, 55, 68, 80, 92, 85, 70, 55, 38, 20].map((v, i) => (
                <div key={i} style={{ flex: 1, height: `${v}%`, borderRadius: 4, background: i === 6 ? 'linear-gradient(180deg, #D9624A, #E8A24A)' : (dark ? `rgba(232,162,74,${0.25 + v/200})` : `rgba(232,162,74,${0.3 + v/180})`) }} />
              ))}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontFamily: 'Geist Mono', fontSize: 9, color: dark ? '#7A7065' : '#A89F92' }}>
              <span>6a</span><span>9a</span><span>12p</span><span>3p</span><span>6p</span>
            </div>
          </div>
        </div>

        {/* Lockscreen widgets */}
        <div style={{ padding: '24px 16px 0' }}>
          <div style={{ fontFamily: 'Geist Mono', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: dark ? 'rgba(242,235,223,0.55)' : 'rgba(31,27,22,0.55)', paddingLeft: 8, marginBottom: 12 }}>Lockscreen Widgets</div>
          <div style={{ display: 'flex', gap: 8, padding: '14px 16px', borderRadius: 18, background: dark ? 'rgba(40,32,22,0.55)' : 'rgba(255,255,255,0.5)', backdropFilter: 'blur(20px)', border: `0.5px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.9)'}` }}>
            {/* circle widget */}
            <div style={{ width: 56, height: 56, borderRadius: '50%', background: dark ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', position: 'relative' }}>
              <svg width="56" height="56" viewBox="0 0 56 56" style={{ position: 'absolute', transform: 'rotate(-90deg)' }}>
                <circle cx="28" cy="28" r="24" stroke={dark ? 'rgba(255,255,255,0.1)' : 'rgba(31,27,22,0.1)'} strokeWidth="3" fill="none"/>
                <circle cx="28" cy="28" r="24" stroke={dark ? '#F4B567' : '#C99750'} strokeWidth="3" fill="none" strokeLinecap="round" strokeDasharray={`${0.68 * 2 * Math.PI * 24} ${2 * Math.PI * 24}`} />
              </svg>
              <Glyph.Sun s={14} c={dark ? '#F4B567' : '#C99750'} />
              <div style={{ fontFamily: 'Geist Mono', fontSize: 9, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16', marginTop: 0 }}>68%</div>
            </div>
            {/* inline rectangular widget */}
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, paddingLeft: 4 }}>
              <Glyph.Drop s={16} c={dark ? '#F4B567' : '#C99750'} />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'Geist', fontSize: 11, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16' }}>Reapply in 47 min</div>
                <div style={{ fontFamily: 'Geist', fontSize: 10, color: dark ? '#B8AE9F' : '#6B6258' }}>UV 7 · High</div>
              </div>
            </div>
            {/* tiny widget */}
            <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'linear-gradient(135deg, #FFD08A, #D9624A)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', color: '#FFF', boxShadow: '0 4px 12px rgba(232,162,74,0.5)' }}>
              <div style={{ fontFamily: 'Geist Mono', fontSize: 8, letterSpacing: 0.5, opacity: 0.85 }}>UV</div>
              <div className="font-display" style={{ fontSize: 22, fontStyle: 'italic', lineHeight: 1 }}>7</div>
            </div>
          </div>
        </div>

        {/* Apple Watch concepts */}
        <div style={{ padding: '24px 16px 0' }}>
          <div style={{ fontFamily: 'Geist Mono', fontSize: 9, letterSpacing: 2, textTransform: 'uppercase', color: dark ? 'rgba(242,235,223,0.55)' : 'rgba(31,27,22,0.55)', paddingLeft: 8, marginBottom: 12 }}>Apple Watch</div>

          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            {/* Watch face 1: Modular */}
            <WatchFace title="Modular" dark={dark}>
              <div style={{ position: 'absolute', top: 16, left: 14, right: 14, display: 'flex', justifyContent: 'space-between', fontFamily: 'Geist Mono', fontSize: 8, color: 'rgba(255,255,255,0.6)' }}>
                <span>SAT 10</span><span>13:42</span>
              </div>
              <div style={{ position: 'absolute', top: 32, left: 14, right: 14 }}>
                <div style={{ fontFamily: 'Geist Mono', fontSize: 7, letterSpacing: 1, color: '#F4B567' }}>UV INDEX</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                  <span className="font-display" style={{ fontSize: 34, fontStyle: 'italic', color: '#FFF', lineHeight: 1 }}>7</span>
                  <span style={{ fontFamily: 'Geist', fontSize: 10, color: '#F4B567', fontWeight: 600 }}>High</span>
                </div>
              </div>
              <div style={{ position: 'absolute', bottom: 16, left: 14, right: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{ fontFamily: 'Geist Mono', fontSize: 6, letterSpacing: 1, color: 'rgba(255,255,255,0.6)' }}>REAPPLY</div>
                  <div style={{ fontFamily: 'Geist', fontSize: 12, fontWeight: 600, color: '#FFF' }}>47m</div>
                </div>
                <div style={{ position: 'relative', width: 36, height: 36 }}>
                  <svg width="36" height="36" style={{ transform: 'rotate(-90deg)' }}>
                    <circle cx="18" cy="18" r="14" stroke="rgba(255,255,255,0.15)" strokeWidth="3" fill="none" />
                    <circle cx="18" cy="18" r="14" stroke="#F4B567" strokeWidth="3" fill="none" strokeLinecap="round" strokeDasharray={`${0.68 * 2 * Math.PI * 14} ${2 * Math.PI * 14}`}/>
                  </svg>
                  <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Geist Mono', fontSize: 8, fontWeight: 600, color: '#FFF' }}>68</div>
                </div>
              </div>
            </WatchFace>

            {/* Watch face 2: Infograph */}
            <WatchFace title="Infograph" dark={dark}>
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
                <div style={{ fontFamily: 'Geist', fontSize: 28, fontWeight: 200, color: '#FFF', letterSpacing: -1 }}>13:42</div>
                <div style={{ fontFamily: 'Geist Mono', fontSize: 8, color: 'rgba(255,255,255,0.6)', letterSpacing: 1 }}>SAT MAY 10</div>
              </div>
              {/* corner complications */}
              <div style={{ position: 'absolute', top: 12, left: 12, width: 30, height: 30, borderRadius: '50%', background: 'rgba(232,162,74,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(232,162,74,0.5)' }}>
                <span style={{ fontFamily: 'Geist', fontSize: 11, fontWeight: 700, color: '#F4B567' }}>7</span>
              </div>
              <div style={{ position: 'absolute', top: 12, right: 12, width: 30, height: 30, borderRadius: '50%', background: 'rgba(143,180,200,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(143,180,200,0.5)' }}>
                <span style={{ fontFamily: 'Geist', fontSize: 9, fontWeight: 700, color: '#8FB4C8' }}>68%</span>
              </div>
              <div style={{ position: 'absolute', bottom: 12, left: 12, width: 30, height: 30, borderRadius: '50%', background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(255,255,255,0.15)' }}>
                <Glyph.Drop s={12} c="#FFF" />
              </div>
              <div style={{ position: 'absolute', bottom: 12, right: 12, width: 30, height: 30, borderRadius: '50%', background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid rgba(255,255,255,0.15)' }}>
                <span style={{ fontFamily: 'Geist Mono', fontSize: 7, color: '#FFF' }}>47m</span>
              </div>
            </WatchFace>

            {/* Watch face 3: Notification */}
            <WatchFace title="Reapply alert" dark={dark}>
              <div style={{ position: 'absolute', inset: 0, padding: 14, display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                  <div style={{ width: 18, height: 18, borderRadius: 5, background: 'linear-gradient(135deg, #FFD08A, #E8A24A)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Glyph.Sun s={10} c="#FFF" />
                  </div>
                  <span style={{ fontFamily: 'Geist', fontSize: 9, fontWeight: 600, color: 'rgba(255,255,255,0.7)', textTransform: 'uppercase', letterSpacing: 0.8 }}>SunSync</span>
                </div>
                <div style={{ fontFamily: 'Geist', fontSize: 14, fontWeight: 600, color: '#FFF', lineHeight: 1.1, marginBottom: 4 }}>Time to reapply</div>
                <div style={{ fontFamily: 'Geist', fontSize: 10, color: 'rgba(255,255,255,0.7)', lineHeight: 1.3 }}>Protection at 22%. UV 8.</div>
                <div style={{ marginTop: 'auto', padding: '6px 10px', borderRadius: 14, background: 'linear-gradient(135deg, #E8A24A, #D9624A)', fontFamily: 'Geist', fontSize: 10, fontWeight: 600, color: '#FFF', textAlign: 'center' }}>Mark applied</div>
              </div>
            </WatchFace>
          </div>
        </div>
      </div>
    </div>
  );
}

function WatchFace({ children, title, dark }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
      <div style={{
        width: 156, height: 188, borderRadius: 38,
        background: '#0A0805',
        boxShadow: '0 12px 30px rgba(0,0,0,0.3), inset 0 0 0 4px #1F1812, inset 0 0 0 5px #3A2818',
        padding: 4, position: 'relative',
        overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', inset: 4, borderRadius: 34, background: '#000', overflow: 'hidden' }}>
          {children}
        </div>
        {/* digital crown */}
        <div style={{ position: 'absolute', right: -3, top: 50, width: 4, height: 20, borderRadius: 2, background: '#3A2818' }} />
        <div style={{ position: 'absolute', right: -3, top: 80, width: 4, height: 12, borderRadius: 2, background: '#3A2818' }} />
      </div>
      <div style={{ fontFamily: 'Geist Mono', fontSize: 9, letterSpacing: 0.5, color: dark ? '#A89F92' : '#6B6258' }}>{title}</div>
    </div>
  );
}

Object.assign(window, { NotificationsScreen, WidgetsScreen });