// SunSync — Onboarding flow (7 screens)

function OBWelcome({ dark }) {
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="dusk" />
      {/* logo + glow */}
      <div style={{
        position: 'absolute', top: '18%', left: 0, right: 0,
        display: 'flex', justifyContent: 'center',
      }}>
        <div style={{ position: 'relative', width: 180, height: 180 }}>
          <div className="sun-pulse" style={{
            position: 'absolute', inset: 0, borderRadius: '50%',
            background: `radial-gradient(circle, ${dark ? 'rgba(244,181,103,0.35)' : 'rgba(232,162,74,0.45)'} 0%, transparent 70%)`,
            filter: 'blur(20px)',
          }} />
          <div style={{
            position: 'absolute', inset: 36, borderRadius: '50%',
            background: 'linear-gradient(135deg, #FFD08A 0%, #E8A24A 70%, #D9624A 100%)',
            boxShadow: '0 20px 60px rgba(232,162,74,0.4), inset 0 -8px 20px rgba(217,98,74,0.3), inset 0 8px 20px rgba(255,255,255,0.4)',
          }} />
        </div>
      </div>

      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '0 28px 50px',
      }}>
        <div style={{
          fontFamily: 'Geist Mono', fontSize: 11, letterSpacing: 3, textTransform: 'uppercase',
          color: dark ? '#A89F92' : '#A89F92', marginBottom: 18,
        }}>SunSync · v1.0</div>
        <h1 className="font-display" style={{
          fontSize: 52, lineHeight: 1.0, fontWeight: 400,
          color: dark ? '#F2EBDF' : '#1F1B16',
          margin: 0, marginBottom: 16, letterSpacing: -1,
        }}>
          Stay in the<br/><em style={{ color: dark ? '#F4B567' : '#C99750' }}>sun,</em> safely.
        </h1>
        <p style={{
          fontFamily: 'Geist', fontSize: 16, lineHeight: 1.5, fontWeight: 400,
          color: dark ? '#B8AE9F' : '#6B6258', margin: 0, marginBottom: 32, maxWidth: 320,
        }}>
          Smart sunscreen tracking that adapts to your skin, your activities, and the sky above you.
        </p>
        <PillBtn dark={dark} primary full size="lg">Get started</PillBtn>
        <div style={{
          marginTop: 16, textAlign: 'center',
          fontFamily: 'Geist', fontSize: 14, color: dark ? '#A89F92' : '#6B6258',
        }}>
          Already have an account? <span style={{ color: dark ? '#F2EBDF' : '#1F1B16', fontWeight: 500 }}>Sign in</span>
        </div>
      </div>
    </div>
  );
}

// ─── progress dots ───
function Dots({ step, total = 6, dark }) {
  return (
    <div style={{ display: 'flex', gap: 6, alignItems: 'center', justifyContent: 'center' }}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} style={{
          width: i === step ? 22 : 6, height: 6, borderRadius: 3,
          background: i === step
            ? (dark ? '#F2EBDF' : '#1F1B16')
            : (dark ? 'rgba(255,255,255,0.18)' : 'rgba(31,27,22,0.18)'),
          transition: 'all .3s',
        }} />
      ))}
    </div>
  );
}

// ─── How it works ───
function OBHowItWorks({ dark }) {
  const items = [
    { icon: 'Map', title: 'Read the sky', body: 'Real-time UV index from your exact location, refreshed every 15 minutes.' },
    { icon: 'Drop', title: 'Time your protection', body: 'We track SPF, sweat, water, and time — so you always know what\'s left.' },
    { icon: 'Sparkle', title: 'Learn your skin', body: 'Personalised reapply windows based on your skin type and habits.' },
  ];
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="day" />
      <div style={{
        position: 'absolute', inset: 0, padding: '90px 28px 0',
        display: 'flex', flexDirection: 'column',
      }}>
        <h2 className="font-display" style={{
          fontSize: 36, lineHeight: 1.05, fontWeight: 400, fontStyle: 'italic',
          color: dark ? '#F2EBDF' : '#1F1B16', margin: 0,
        }}>How SunSync works.</h2>
        <p style={{
          fontFamily: 'Geist', fontSize: 15, color: dark ? '#B8AE9F' : '#6B6258',
          marginTop: 10, marginBottom: 36,
        }}>Three quiet systems, always running for you.</p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {items.map((it, i) => {
            const I = Glyph[it.icon];
            return (
              <Glass key={i} dark={dark} padding={18} radius={24}>
                <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 14, flexShrink: 0,
                    background: i === 0
                      ? 'linear-gradient(135deg, #A6C8DB, #7AA7BF)'
                      : i === 1
                      ? 'linear-gradient(135deg, #F0E2C6, #C99750)'
                      : 'linear-gradient(135deg, #FFD08A, #E8A24A)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: '#FFF',
                  }}>
                    <I s={22} c="#fff" />
                  </div>
                  <div style={{ flex: 1, paddingTop: 2 }}>
                    <div style={{ fontFamily: 'Geist', fontSize: 15, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16' }}>{it.title}</div>
                    <div style={{ fontFamily: 'Geist', fontSize: 13, lineHeight: 1.45, color: dark ? '#B8AE9F' : '#6B6258', marginTop: 2 }}>{it.body}</div>
                  </div>
                </div>
              </Glass>
            );
          })}
        </div>

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

// ─── Skin type ───
function OBSkinType({ dark }) {
  const types = [
    { id: 1, name: 'Type I', desc: 'Very fair · burns easily', tone: '#FCE9D4', selected: false },
    { id: 2, name: 'Type II', desc: 'Fair · burns often', tone: '#F5D5B0', selected: false },
    { id: 3, name: 'Type III', desc: 'Light · sometimes burns', tone: '#E8B987', selected: true },
    { id: 4, name: 'Type IV', desc: 'Medium · rarely burns', tone: '#C99166', selected: false },
    { id: 5, name: 'Type V', desc: 'Brown · seldom burns', tone: '#8B5A3C', selected: false },
    { id: 6, name: 'Type VI', desc: 'Deep · never burns', tone: '#4A2C1C', selected: false },
  ];
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="calm" />
      <div style={{ position: 'absolute', inset: 0, padding: '90px 24px 0', display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontFamily: 'Geist Mono', fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: dark ? '#A89F92' : '#A89F92', marginBottom: 8 }}>Step 02 · About you</div>
        <h2 className="font-display" style={{ fontSize: 34, lineHeight: 1.05, fontWeight: 400, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', margin: 0 }}>What's your skin type?</h2>
        <p style={{ fontFamily: 'Geist', fontSize: 14, color: dark ? '#B8AE9F' : '#6B6258', marginTop: 10, marginBottom: 24 }}>
          We'll use the Fitzpatrick scale to set safe baselines.
        </p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {types.map(t => (
            <div key={t.id} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: 14, borderRadius: 20,
              background: t.selected
                ? (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: t.selected
                ? `1.5px solid ${dark ? '#F4B567' : '#C99750'}`
                : `0.5px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(31,27,22,0.06)'}`,
              backdropFilter: 'blur(20px)',
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: '50%', flexShrink: 0,
                background: t.tone,
                boxShadow: 'inset 0 1px 3px rgba(255,255,255,0.5), 0 2px 6px rgba(31,27,22,0.1)',
              }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'Geist', fontSize: 15, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16' }}>{t.name}</div>
                <div style={{ fontFamily: 'Geist', fontSize: 12, color: dark ? '#B8AE9F' : '#6B6258', marginTop: 1 }}>{t.desc}</div>
              </div>
              {t.selected && (
                <div style={{ width: 22, height: 22, borderRadius: '50%', background: dark ? '#F4B567' : '#C99750', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Glyph.Check s={12} c={dark ? '#1F1B16' : '#FFF'} />
                </div>
              )}
            </div>
          ))}
        </div>

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

// ─── SPF preference ───
function OBSPF({ dark }) {
  const spfs = [15, 30, 50, 70];
  const selected = 50;
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="dusk" />
      <div style={{ position: 'absolute', inset: 0, padding: '90px 28px 0', display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontFamily: 'Geist Mono', fontSize: 10, letterSpacing: 2, textTransform: 'uppercase', color: dark ? '#A89F92' : '#A89F92', marginBottom: 8 }}>Step 03 · Preferences</div>
        <h2 className="font-display" style={{ fontSize: 34, lineHeight: 1.05, fontWeight: 400, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', margin: 0 }}>Your everyday SPF?</h2>
        <p style={{ fontFamily: 'Geist', fontSize: 14, color: dark ? '#B8AE9F' : '#6B6258', marginTop: 10, marginBottom: 30 }}>
          You can always change it before applying.
        </p>

        {/* SPF dial */}
        <Glass dark={dark} padding={24} radius={28}>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'baseline', gap: 6 }}>
            <span style={{ fontFamily: 'Geist Mono', fontSize: 13, color: dark ? '#A89F92' : '#A89F92', letterSpacing: 1 }}>SPF</span>
            <span className="font-display" style={{ fontSize: 96, lineHeight: 1, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16' }}>{selected}</span>
          </div>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 16 }}>
            {spfs.map(s => (
              <div key={s} style={{
                padding: '8px 16px', borderRadius: 18,
                fontFamily: 'Geist', fontSize: 13, fontWeight: 500,
                background: s === selected
                  ? (dark ? '#F2EBDF' : '#1F1B16')
                  : (dark ? 'rgba(255,255,255,0.06)' : 'rgba(31,27,22,0.05)'),
                color: s === selected
                  ? (dark ? '#1F1B16' : '#FAF5ED')
                  : (dark ? '#B8AE9F' : '#6B6258'),
              }}>SPF {s}</div>
            ))}
          </div>
          <div style={{ marginTop: 20, padding: 14, borderRadius: 16, background: dark ? 'rgba(255,255,255,0.04)' : 'rgba(31,27,22,0.03)', fontFamily: 'Geist', fontSize: 12, lineHeight: 1.5, color: dark ? '#B8AE9F' : '#6B6258' }}>
            <span style={{ color: dark ? '#F4B567' : '#C99750', fontWeight: 600 }}>Good pick.</span> Blocks ~98% of UVB. We'll suggest SPF 70+ for beach days.
          </div>
        </Glass>

        <div style={{ marginTop: 18 }}>
          <div style={{ fontFamily: 'Geist', fontSize: 13, fontWeight: 500, color: dark ? '#F2EBDF' : '#1F1B16', marginBottom: 10 }}>Type you usually use</div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {['Mineral', 'Chemical', 'Hybrid', 'Tinted', 'Spray'].map((t, i) => (
              <div key={t} style={{
                padding: '10px 16px', borderRadius: 18,
                fontFamily: 'Geist', fontSize: 13, fontWeight: 500,
                background: i === 0
                  ? (dark ? 'rgba(244,181,103,0.16)' : 'rgba(232,162,74,0.16)')
                  : (dark ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.55)'),
                border: i === 0
                  ? `1px solid ${dark ? '#F4B567' : '#C99750'}`
                  : `0.5px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(31,27,22,0.08)'}`,
                color: i === 0
                  ? (dark ? '#F4B567' : '#C99750')
                  : (dark ? '#B8AE9F' : '#6B6258'),
                backdropFilter: 'blur(16px)',
              }}>{t}</div>
            ))}
          </div>
        </div>

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

// ─── Notifications permission ───
function OBNotifications({ dark }) {
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="dusk" />
      <div style={{ position: 'absolute', inset: 0, padding: '70px 28px 0', display: 'flex', flexDirection: 'column' }}>
        {/* Hero illustration: floating notification */}
        <div style={{ position: 'relative', height: 260, marginBottom: 8 }}>
          <div className="sun-pulse" style={{
            position: 'absolute', top: 30, left: '50%', transform: 'translateX(-50%)',
            width: 180, height: 180, borderRadius: '50%',
            background: `radial-gradient(circle, ${dark ? 'rgba(244,181,103,0.3)' : 'rgba(232,162,74,0.35)'} 0%, transparent 70%)`,
            filter: 'blur(24px)',
          }} />
          <div style={{
            position: 'absolute', top: 60, left: '50%', transform: 'translate(-50%, 0) rotate(-3deg)',
            width: 280,
          }}>
            <Glass dark={dark} padding={14} radius={20}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg, #FFD08A, #E8A24A)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Glyph.Sun s={20} c="#FFF" />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'Geist', fontSize: 13, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16' }}>SunSync</div>
                  <div style={{ fontFamily: 'Geist', fontSize: 12, color: dark ? '#B8AE9F' : '#6B6258' }}>Time to reapply — UV is peaking</div>
                </div>
                <div style={{ fontFamily: 'Geist Mono', fontSize: 10, color: dark ? '#7A7065' : '#A89F92' }}>now</div>
              </div>
            </Glass>
          </div>
          <div style={{
            position: 'absolute', top: 150, left: '50%', transform: 'translate(-55%, 0) rotate(2deg)',
            width: 260, opacity: 0.6,
          }}>
            <Glass dark={dark} padding={12} radius={18}>
              <div style={{ fontFamily: 'Geist', fontSize: 12, color: dark ? '#B8AE9F' : '#6B6258' }}>Protection running low (18%)</div>
            </Glass>
          </div>
        </div>

        <h2 className="font-display" style={{ fontSize: 32, lineHeight: 1.05, fontWeight: 400, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', margin: 0, marginTop: 12 }}>Gentle reminders, when it matters.</h2>
        <p style={{ fontFamily: 'Geist', fontSize: 14, lineHeight: 1.5, color: dark ? '#B8AE9F' : '#6B6258', marginTop: 12 }}>
          Smart pings when UV climbs, when it's time to reapply, or when your protection is fading. Quiet hours by default.
        </p>

        <div style={{ marginTop: 'auto', paddingBottom: 30 }}>
          <Dots step={3} dark={dark} />
          <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <PillBtn dark={dark} primary full size="lg">Enable notifications</PillBtn>
            <div style={{ textAlign: 'center', fontFamily: 'Geist', fontSize: 14, color: dark ? '#A89F92' : '#A89F92' }}>Maybe later</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Location permission ───
function OBLocation({ dark }) {
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="calm" />
      <div style={{ position: 'absolute', inset: 0, padding: '70px 28px 0', display: 'flex', flexDirection: 'column' }}>
        {/* map-y pin viz */}
        <div style={{ position: 'relative', height: 240, marginBottom: 12 }}>
          <div style={{
            position: 'absolute', inset: '0 30px',
            borderRadius: 24, overflow: 'hidden',
            background: dark
              ? 'linear-gradient(135deg, #1A2028, #0F1820)'
              : 'linear-gradient(135deg, #DCEAF1, #E8EDD8)',
            border: dark ? '0.5px solid rgba(255,255,255,0.08)' : '0.5px solid rgba(255,255,255,0.8)',
          }}>
            {/* grid lines */}
            <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.4 }}>
              <defs>
                <pattern id="mapgrid" width="30" height="30" patternUnits="userSpaceOnUse">
                  <path d="M 30 0 L 0 0 0 30" fill="none" stroke={dark ? 'rgba(255,255,255,0.06)' : 'rgba(31,27,22,0.08)'} strokeWidth="0.5"/>
                </pattern>
              </defs>
              <rect width="100%" height="100%" fill="url(#mapgrid)" />
              <path d="M0,140 Q80,120 160,150 T320,130" stroke={dark ? 'rgba(143,180,200,0.4)' : 'rgba(122,167,191,0.5)'} strokeWidth="1.5" fill="none" strokeDasharray="3,4" />
            </svg>
            {/* center pin */}
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ position: 'relative' }}>
                <div className="glow-breath" style={{
                  position: 'absolute', inset: -30,
                  background: `radial-gradient(circle, ${dark ? 'rgba(244,181,103,0.4)' : 'rgba(232,162,74,0.5)'} 0%, transparent 70%)`,
                  borderRadius: '50%',
                }} />
                <div style={{
                  width: 56, height: 56, borderRadius: '50%',
                  background: 'linear-gradient(135deg, #FFD08A, #E8A24A)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 12px 30px rgba(232,162,74,0.5)', position: 'relative',
                }}>
                  <Glyph.Sun s={28} c="#FFF" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <h2 className="font-display" style={{ fontSize: 32, lineHeight: 1.05, fontWeight: 400, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', margin: 0, marginTop: 4 }}>Local UV, hyper-accurate.</h2>
        <p style={{ fontFamily: 'Geist', fontSize: 14, lineHeight: 1.5, color: dark ? '#B8AE9F' : '#6B6258', marginTop: 12 }}>
          We use your location only to read UV index from satellite & weather stations near you. Never shared. Never sold.
        </p>

        <div style={{ marginTop: 'auto', paddingBottom: 30 }}>
          <Dots step={4} dark={dark} />
          <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <PillBtn dark={dark} primary full size="lg">Allow location</PillBtn>
            <div style={{ textAlign: 'center', fontFamily: 'Geist', fontSize: 14, color: dark ? '#A89F92' : '#A89F92' }}>Use approximate location</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Premium upsell ───
function OBPremium({ dark }) {
  const perks = [
    'AI UV insights, daily',
    'Apple Watch complications',
    'Cumulative skin score',
    'Smart activity detection',
    'Family protection tracking',
  ];
  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
      <SunBackdrop dark={dark} hue="extreme" />
      <div style={{ position: 'absolute', inset: 0, padding: '70px 24px 0', display: 'flex', flexDirection: 'column' }}>
        {/* SunSync+ badge */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 16px', borderRadius: 18,
            background: dark ? 'rgba(244,181,103,0.16)' : 'rgba(232,162,74,0.18)',
            border: `1px solid ${dark ? 'rgba(244,181,103,0.3)' : 'rgba(232,162,74,0.4)'}`,
          }}>
            <Glyph.Sparkle s={14} c={dark ? '#F4B567' : '#C99750'} />
            <span style={{ fontFamily: 'Geist', fontSize: 12, fontWeight: 600, letterSpacing: 1.5, textTransform: 'uppercase', color: dark ? '#F4B567' : '#C99750' }}>SunSync Plus</span>
          </div>
        </div>

        <h2 className="font-display" style={{ fontSize: 36, lineHeight: 1.0, fontWeight: 400, fontStyle: 'italic', color: dark ? '#F2EBDF' : '#1F1B16', margin: 0, textAlign: 'center' }}>The full ritual,<br/>unlocked.</h2>
        <p style={{ fontFamily: 'Geist', fontSize: 14, color: dark ? '#B8AE9F' : '#6B6258', marginTop: 12, textAlign: 'center' }}>
          Try 7 days free. Cancel anytime.
        </p>

        <Glass dark={dark} padding={20} radius={26} style={{ marginTop: 22 }}>
          {perks.map((p, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '10px 0',
              borderBottom: i < perks.length - 1 ? `0.5px solid ${dark ? 'rgba(255,255,255,0.06)' : 'rgba(31,27,22,0.06)'}` : 'none',
            }}>
              <div style={{ width: 22, height: 22, borderRadius: '50%', background: dark ? 'rgba(244,181,103,0.2)' : 'rgba(232,162,74,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Glyph.Check s={12} c={dark ? '#F4B567' : '#C99750'} />
              </div>
              <span style={{ fontFamily: 'Geist', fontSize: 15, color: dark ? '#F2EBDF' : '#1F1B16' }}>{p}</span>
            </div>
          ))}
        </Glass>

        {/* plan selector */}
        <div style={{ marginTop: 16, display: 'flex', gap: 10 }}>
          <div style={{ flex: 1, padding: 14, borderRadius: 18, border: `0.5px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(31,27,22,0.08)'}`, background: dark ? 'rgba(255,255,255,0.03)' : 'rgba(255,255,255,0.5)' }}>
            <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#A89F92' : '#A89F92', textTransform: 'uppercase', letterSpacing: 1 }}>Monthly</div>
            <div style={{ fontFamily: 'Geist', fontSize: 22, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16', marginTop: 4 }}>$4.99</div>
            <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#7A7065' : '#A89F92' }}>per month</div>
          </div>
          <div style={{ flex: 1, padding: 14, borderRadius: 18, position: 'relative', background: dark ? 'rgba(244,181,103,0.12)' : 'rgba(232,162,74,0.14)', border: `1.5px solid ${dark ? '#F4B567' : '#C99750'}` }}>
            <div style={{ position: 'absolute', top: -10, right: 10, padding: '2px 8px', borderRadius: 10, background: dark ? '#F4B567' : '#C99750', fontFamily: 'Geist', fontSize: 9, fontWeight: 700, letterSpacing: 1, color: dark ? '#1F1B16' : '#FFF' }}>SAVE 50%</div>
            <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#F4B567' : '#C99750', textTransform: 'uppercase', letterSpacing: 1 }}>Yearly</div>
            <div style={{ fontFamily: 'Geist', fontSize: 22, fontWeight: 600, color: dark ? '#F2EBDF' : '#1F1B16', marginTop: 4 }}>$29.99</div>
            <div style={{ fontFamily: 'Geist', fontSize: 11, color: dark ? '#B8AE9F' : '#6B6258' }}>$2.50/mo</div>
          </div>
        </div>

        <div style={{ marginTop: 'auto', paddingBottom: 28 }}>
          <Dots step={5} dark={dark} />
          <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <PillBtn dark={dark} primary full size="lg">Start 7-day free trial</PillBtn>
            <div style={{ textAlign: 'center', fontFamily: 'Geist', fontSize: 13, color: dark ? '#A89F92' : '#A89F92' }}>No thanks, continue with basic</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { OBWelcome, OBHowItWorks, OBSkinType, OBSPF, OBNotifications, OBLocation, OBPremium });