// Healify V2 — Secondary screens (menu, habits, picks, notifications, focus, paywall)

// ============================================================================
// MENU — slide-in drawer style
// ============================================================================
function MenuScreen({ onNavigate, onBack }) {
  return (
    <HScreen label="Menu" bg="var(--t-bg-deep)">
      <HTopBar title="" onBack={onBack} right={<HIconButton icon="settings" tone="soft" onClick={() => onNavigate('settings')} />} />

      {/* Profile card */}
      <HCard pad="20px" radius={24} style={{ marginBottom: 16, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,179,107,0.25), transparent 70%)' }}/>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, position: 'relative' }}>
          <div style={{ width: 64, height: 64, borderRadius: 999, background: 'var(--grad-warm-orange)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, color: '#fff' }}>{(window.HEALIFY_USER && window.HEALIFY_USER.initial) || 'K'}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500 }}>{(window.HEALIFY_USER && window.HEALIFY_USER.first) || 'Kathryn'}</div>
            <div style={{ fontSize: 12, color: 'var(--t-fg-3)' }}>{(window.HEALIFY_USER && window.HEALIFY_USER.email) || 'kathryn@healify.ai'}</div>
            <div style={{ marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px', background: 'var(--t-cream)', borderRadius: 999, fontSize: 11, color: 'var(--brand-orange-vibey)', fontWeight: 500 }}>
              <Glyph name="sparkle" size={10}/> Healify Life+
            </div>
          </div>
        </div>
      </HCard>

      <div className="h-display" style={{ fontSize: 22, padding: '8px 4px', marginBottom: 6 }}>Quick access</div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10, marginBottom: 16 }}>
        <MenuTile icon="target" label="Habits" sub="2 of 4 done" onClick={() => onNavigate('habits')}/>
        <MenuTile icon="droplet" label="Bloodwork" sub="Apr 18 · 14 markers" onClick={() => onNavigate('blood')}/>
        <MenuTile icon="scan" label="DNA insights" sub="142 traits" onClick={() => onNavigate('dna')}/>
        <MenuTile icon="clock" label="Chat history" sub="6 threads" onClick={() => onNavigate('history')}/>
      </div>

      <HCard pad="0" radius={20} style={{ overflow: 'hidden', marginBottom: 12 }}>
        <HSettingsRow icon="user" title="Profile" sub="Personal info, body" onClick={() => onNavigate('profile')}/>
        <HSettingsRow icon="bell" title="Notifications" sub="2 unread" onClick={() => onNavigate('notifications')}/>
        <HSettingsRow icon="settings" title="Settings" onClick={() => onNavigate('settings')}/>
        <HSettingsRow icon="shield" title="Privacy & data" onClick={() => onNavigate('privacy')}/>
      </HCard>

      <HCard pad="0" radius={20} style={{ overflow: 'hidden', marginBottom: 24 }}>
        <HSettingsRow icon="sparkle" title="Upgrade to Life+" sub="Unlimited Anna voice" onClick={() => onNavigate('paywall')}/>
        <HSettingsRow icon="share" title="Invite a friend" sub="Both get 1 month free"/>
        <HSettingsRow icon="search" title="Help center" onClick={() => onNavigate('help')}/>
      </HCard>

      <button style={{ display: 'block', margin: '0 auto', color: 'var(--t-fg-3)', fontSize: 13 }}>Sign out</button>
    </HScreen>
  );
}

function MenuTile({ icon, label, sub, onClick }) {
  return (
    <HCard pad="14px" radius={16} onClick={onClick}>
      <div style={{ width: 36, height: 36, borderRadius: 12, background: 'var(--t-cream)', color: 'var(--brand-orange-vibey)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
        <Glyph name={icon} size={18}/>
      </div>
      <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.2px' }}>{label}</div>
      <div style={{ fontSize: 11, color: 'var(--t-fg-3)', marginTop: 2 }}>{sub}</div>
    </HCard>
  );
}

// ============================================================================
// HABITS
// ============================================================================
function HabitsScreen({ onNavigate, onBack }) {
  const [habits, setHabits] = React.useState([
    { id: 'wat', label: 'Drink 8 glasses water', sub: 'Mid-morning · afternoon', done: false, streak: 12, icon: 'droplet', color: 'var(--focus-mental)' },
    { id: 'med', label: '10-min meditation',     sub: '7:30 am · before work',  done: true,  streak: 5,  icon: 'brain',   color: 'var(--focus-sleep)' },
    { id: 'walk', label: '30-min walk',          sub: '5:30 pm',                done: false, streak: 8,  icon: 'flame',   color: 'var(--focus-fitness)' },
    { id: 'pro', label: '120g protein',          sub: 'spread across meals',    done: false, streak: 3,  icon: 'plate',   color: 'var(--focus-nutrition)' },
    { id: 'jrn', label: 'Evening journal',       sub: '9:30 pm',                done: true,  streak: 21, icon: 'sparkle', color: 'var(--focus-heart)' },
  ]);
  const [showSheet, setShowSheet] = React.useState(false);

  const toggle = (id) => setHabits(hs => hs.map(h => h.id === id ? { ...h, done: !h.done } : h));

  const completed = habits.filter(h => h.done).length;
  return (
    <HScreen label="Habits">
      <HTopBar title="Habits" onBack={onBack} right={<HIconButton icon="plus" tone="soft" onClick={() => setShowSheet(true)} />} />

      <HCard pad="20px" radius={24} style={{ marginBottom: 16, background: 'var(--grad-cream)' }} elevate={false}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div className="h-label">Today</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em' }}>
              {completed}<span style={{ color: 'var(--t-fg-3)', fontSize: 24 }}> / {habits.length}</span>
            </div>
            <div style={{ fontSize: 13, color: 'var(--t-fg-2)', marginTop: 4 }}>habits completed</div>
          </div>
          <div style={{ display: 'flex', gap: 4 }}>
            {habits.map(h => (
              <div key={h.id} style={{ width: 8, height: 36, borderRadius: 4, background: h.done ? h.color : 'var(--t-ink-08)' }}/>
            ))}
          </div>
        </div>
      </HCard>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 16 }}>
        {habits.map(h => (
          <HCard key={h.id} pad="14px" radius={16}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <HHabitCheck done={h.done} onClick={() => toggle(h.id)}/>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: `color-mix(in oklab, ${h.color} 14%, transparent)`, color: h.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Glyph name={h.icon} size={18}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.2px', textDecoration: h.done ? 'line-through' : 'none', color: h.done ? 'var(--t-fg-3)' : 'var(--t-fg-1)' }}>{h.label}</div>
                <div style={{ fontSize: 12, color: 'var(--t-fg-3)', marginTop: 1 }}>{h.sub}</div>
              </div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 3, padding: '4px 8px', borderRadius: 999, background: 'var(--t-cream)', fontSize: 11, fontWeight: 500, color: 'var(--brand-orange-vibey)' }}>
                <Glyph name="flame" size={11}/> {h.streak}d
              </div>
            </div>
          </HCard>
        ))}
      </div>

      <button onClick={() => setShowSheet(true)} style={{ display: 'block', width: '100%' }}>
        <HCard pad="16px" radius={16} elevate={false} style={{ background: 'transparent', border: '1.5px dashed var(--t-ink-12)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, color: 'var(--t-fg-2)', fontSize: 14, fontWeight: 500 }}>
            <Glyph name="plus" size={16}/> Add a habit
          </div>
        </HCard>
      </button>

      {showSheet && <AddHabitSheet onClose={() => setShowSheet(false)} onSave={(h) => { setHabits([...habits, { id: 'new'+Date.now(), ...h, done: false, streak: 0 }]); setShowSheet(false); }}/>}
    </HScreen>
  );
}

function AddHabitSheet({ onClose, onSave }) {
  const [name, setName] = React.useState('');
  const [iconKey, setIconKey] = React.useState('flame');
  const [colorKey, setColorKey] = React.useState('var(--focus-fitness)');
  const [time, setTime] = React.useState('Morning');
  const options = [
    { i: 'flame', c: 'var(--focus-fitness)' },
    { i: 'droplet', c: 'var(--focus-mental)' },
    { i: 'brain', c: 'var(--focus-sleep)' },
    { i: 'plate', c: 'var(--focus-nutrition)' },
    { i: 'heart', c: 'var(--focus-heart)' },
    { i: 'sparkle', c: 'var(--brand-orange-vibey)' },
  ];
  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, zIndex: 50, background: 'rgba(0,0,0,0.45)', display: 'flex', alignItems: 'flex-end' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: '100%', background: 'var(--t-surface)', borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: '20px 18px 28px' }}>
        <div style={{ width: 40, height: 4, borderRadius: 999, background: 'var(--t-ink-12)', margin: '0 auto 14px' }}/>
        <div className="h-display" style={{ fontSize: 22, marginBottom: 14 }}>New habit</div>

        <div style={{ fontSize: 12, color: 'var(--t-fg-3)', letterSpacing: 0.8, textTransform: 'uppercase', fontWeight: 500, marginBottom: 6 }}>Name</div>
        <input value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Morning stretch" style={{ width: '100%', padding: '12px 14px', borderRadius: 12, border: 'none', background: 'var(--t-ink-04)', fontSize: 15, fontFamily: 'var(--font-body)', color: 'var(--t-fg-1)', outline: 'none' }}/>

        <div style={{ fontSize: 12, color: 'var(--t-fg-3)', letterSpacing: 0.8, textTransform: 'uppercase', fontWeight: 500, margin: '16px 0 8px' }}>Icon & color</div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {options.map((o, i) => {
            const active = iconKey === o.i;
            return (
              <button key={i} onClick={() => { setIconKey(o.i); setColorKey(o.c); }} style={{
                width: 44, height: 44, borderRadius: 12,
                background: active ? o.c : `color-mix(in oklab, ${o.c} 14%, transparent)`,
                color: active ? '#fff' : o.c,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                border: active ? `2px solid ${o.c}` : '2px solid transparent',
              }}>
                <Glyph name={o.i} size={20}/>
              </button>
            );
          })}
        </div>

        <div style={{ fontSize: 12, color: 'var(--t-fg-3)', letterSpacing: 0.8, textTransform: 'uppercase', fontWeight: 500, margin: '16px 0 8px' }}>Reminder</div>
        <div style={{ display: 'flex', gap: 8 }}>
          {['Morning','Afternoon','Evening','None'].map(t => (
            <button key={t} onClick={() => setTime(t)} style={{
              flex: 1, height: 40, borderRadius: 12, fontSize: 13, fontWeight: 500,
              background: time === t ? 'var(--t-pill)' : 'var(--t-ink-04)',
              color: time === t ? 'var(--t-pill-fg)' : 'var(--t-fg-2)',
            }}>{t}</button>
          ))}
        </div>

        <div style={{ marginTop: 22, display: 'flex', gap: 10 }}>
          <HPrimaryButton variant="ghost" full size="md" onClick={onClose}>Cancel</HPrimaryButton>
          <HPrimaryButton variant="gradient" full size="md" onClick={() => name && onSave({ label: name, sub: time, icon: iconKey, color: colorKey })}>Add habit</HPrimaryButton>
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// PICKS — AI Tools picker
// ============================================================================
function PicksScreen({ onNavigate, onBack }) {
  const suggested = [
    { k: 'meditation', icon: 'brain', color: 'var(--focus-sleep)', name: 'Generate a meditation', sub: '10 min · for your BP', reason: 'Anna recommends today' },
    { k: 'mealplan',   icon: 'plate', color: 'var(--focus-nutrition)', name: 'Low-sodium meal plan', sub: '3 days · grocery list', reason: '38g protein short' },
  ];
  const tools = [
    { k: 'workout',    icon: 'dumbbell', color: 'var(--focus-fitness)', name: 'Workout',             sub: 'Generated for you' },
    { k: 'nutrition',  icon: 'plate',    color: 'var(--focus-nutrition)', name: 'Nutrition',         sub: "Today's meals & fuel" },
    { k: 'fitness',    icon: 'flame',    color: 'var(--focus-fitness)', name: 'Move',                sub: 'Rings & weekly plan' },
    { k: 'blood',      icon: 'droplet',  color: 'var(--focus-heart)',   name: 'Bloodwork',           sub: 'Upload & decode' },
    { k: 'dna',        icon: 'scan',     color: 'var(--focus-mental)',  name: 'DNA insights',        sub: '142 traits decoded' },
    { k: 'voice',      icon: 'mic',      color: 'var(--brand-orange-vibey)', name: 'Voice with Anna',sub: 'Talk live' },
    { k: 'meditation', icon: 'brain',    color: 'var(--focus-sleep)',   name: 'Meditation',          sub: 'Personalized session' },
    { k: 'history',    icon: 'clock',    color: 'var(--focus-sleep)',   name: 'Chat history',        sub: '6 threads' },
  ];
  return (
    <HScreen label="AI Tools">
      {onBack ? <HTopBar title="" onBack={onBack}/> : <div style={{ height: 12 }}/>}
      <div style={{ padding: '0 4px', marginBottom: 16 }}>
        <div className="h-label">Anna at work</div>
        <div className="h-display" style={{ fontSize: 30, marginTop: 4 }}>AI tools</div>
        <div style={{ fontSize: 14, color: 'var(--t-fg-2)', marginTop: 6, lineHeight: 1.5 }}>Generators that adapt to your body. Always personalized — never generic.</div>
      </div>

      <HSectionLabel>Recommended today</HSectionLabel>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 16 }}>
        {suggested.map(t => (
          <HCard key={t.k} pad="0" radius={20} onClick={() => onNavigate(t.k)} style={{ overflow: 'hidden' }}>
            <div style={{ display: 'flex' }}>
              <div style={{ width: 100, background: `color-mix(in oklab, ${t.color} 14%, transparent)`, color: t.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Glyph name={t.icon} size={32}/>
              </div>
              <div style={{ flex: 1, padding: '14px 14px' }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 10, color: t.color, fontWeight: 500, letterSpacing: 0.6, textTransform: 'uppercase' }}>
                  <Glyph name="sparkle" size={10}/> {t.reason}
                </div>
                <div style={{ fontSize: 15, fontWeight: 500, marginTop: 4, letterSpacing: '-0.2px' }}>{t.name}</div>
                <div style={{ fontSize: 12, color: 'var(--t-fg-3)', marginTop: 2 }}>{t.sub}</div>
              </div>
            </div>
          </HCard>
        ))}
      </div>

      <HSectionLabel>All tools</HSectionLabel>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
        {tools.map((t, i) => (
          <HCard key={i} pad="14px" radius={16} onClick={() => onNavigate(t.k)}>
            <div style={{ width: 38, height: 38, borderRadius: 12, background: `color-mix(in oklab, ${t.color} 14%, transparent)`, color: t.color, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
              <Glyph name={t.icon} size={18}/>
            </div>
            <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.2px' }}>{t.name}</div>
            <div style={{ fontSize: 11, color: 'var(--t-fg-3)', marginTop: 2 }}>{t.sub}</div>
          </HCard>
        ))}
      </div>
    </HScreen>
  );
}

// ============================================================================
// NOTIFICATIONS
// ============================================================================
function NotificationsScreen({ onNavigate, onBack }) {
  const groups = [
    { d: 'Today', items: [
      { unread: true, icon: 'heart', color: 'var(--focus-heart)', t: 'BP reading reminder', s: 'Take your evening read', time: '5m' },
      { unread: true, icon: 'sparkle', color: 'var(--brand-orange-vibey)', t: 'Anna found something', s: 'A pattern in your sleep & caffeine', time: '2h' },
      { unread: false, icon: 'droplet', color: 'var(--focus-mental)', t: 'Logged 3 glasses today', s: '5 more to hit your goal', time: '3h' },
    ]},
    { d: 'Yesterday', items: [
      { unread: false, icon: 'dumbbell', color: 'var(--focus-fitness)', t: 'Workout completed', s: '23 min · 184 kcal', time: 'yest' },
      { unread: false, icon: 'flame', color: 'var(--focus-fitness)', t: '12-day streak — water', s: 'Keep it going', time: 'yest' },
    ]},
  ];
  return (
    <HScreen label="Notifications">
      <HTopBar title="Notifications" onBack={onBack} right={<button style={{ fontSize: 13, color: 'var(--brand-orange-vibey)', fontWeight: 500 }}>Mark read</button>} />
      {groups.map(g => (
        <div key={g.d} style={{ marginBottom: 18 }}>
          <HSectionLabel>{g.d}</HSectionLabel>
          <HCard pad="0" radius={20} style={{ overflow: 'hidden' }}>
            {g.items.map((n, i) => (
              <button key={i} onClick={() => onNavigate('chat')} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '14px', textAlign: 'left', background: n.unread ? 'var(--t-cream)' : 'transparent', borderBottom: i < g.items.length - 1 ? '1px solid var(--t-border)' : 'none', color: 'var(--t-fg-1)' }}>
                <div style={{ width: 38, height: 38, borderRadius: 999, background: `color-mix(in oklab, ${n.color} 14%, transparent)`, color: n.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Glyph name={n.icon} size={18}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.2px' }}>{n.t}</span>
                    {n.unread && <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--brand-orange-vibey)' }}/>}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--t-fg-3)', marginTop: 1 }}>{n.s}</div>
                </div>
                <div style={{ fontSize: 11, color: 'var(--t-fg-3)' }}>{n.time}</div>
              </button>
            ))}
          </HCard>
        </div>
      ))}
    </HScreen>
  );
}

// ============================================================================
// FOCUS DETAIL
// ============================================================================
function FocusDetailScreen({ onNavigate, onBack, area = 'heart' }) {
  const config = {
    sleep:    { color: 'var(--focus-sleep)',     icon: 'moon',     title: 'Sleep',     hero: '7h 12m', sub: 'last night · 80 score', desc: 'You\'re falling asleep within 12 minutes — top of your range.' },
    fitness:  { color: 'var(--focus-fitness)',   icon: 'dumbbell', title: 'Movement',  hero: '8,420',  sub: 'steps · 55 score', desc: 'Down 8% from your baseline. Three weekdays under 7k.' },
    nutrition:{ color: 'var(--focus-nutrition)', icon: 'plate',    title: 'Nutrition', hero: '1,840',  sub: 'kcal · 60 score', desc: 'Protein 82/120g · sodium 2,800mg (target <1,500mg).' },
    mental:   { color: 'var(--focus-mental)',    icon: 'brain',    title: 'Mind',      hero: 'Calm',   sub: 'PHQ-9 ↓ · 70 score', desc: 'Mood lifted from "low" to "calm" over two weeks.' },
    heart:    { color: 'var(--focus-heart)',     icon: 'heart',    title: 'Heart',     hero: '128/82', sub: 'mmHg · 45 score', desc: 'Stage 1 hypertension territory. Avg up 4 mmHg this week.' },
  };
  const c = config[area] || config.heart;

  return (
    <HScreen label={`Focus · ${area}`}>
      <HTopBar title="" onBack={onBack}/>
      <HCard pad="22px 18px" radius={26} style={{ marginBottom: 16, background: `linear-gradient(180deg, color-mix(in oklab, ${c.color} 16%, transparent), var(--t-surface))`, border: `1px solid color-mix(in oklab, ${c.color} 24%, transparent)` }} elevate={false}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 48, height: 48, borderRadius: 16, background: c.color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Glyph name={c.icon} size={22}/>
          </div>
          <div>
            <div className="h-label">{c.title}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 2 }}>{c.hero}</div>
            <div style={{ fontSize: 13, color: 'var(--t-fg-2)' }}>{c.sub}</div>
          </div>
        </div>
        <div style={{ fontSize: 14, color: 'var(--t-fg-2)', marginTop: 14, lineHeight: 1.5 }}>{c.desc}</div>
      </HCard>

      <HSectionLabel>14-day trend</HSectionLabel>
      <HCard pad="16px" radius={20} style={{ marginBottom: 16 }}>
        <TrendChart data={area === 'heart' ? [124,126,125,127,128,131,130,128,127,128,130,132,128,128] : [70,71,72,71,73,72,75,73,74,73,73,75,73,73]} labels={['1','','','4','','','7','','','10','','','13','']}/>
      </HCard>

      <HSectionLabel>Anna's plan</HSectionLabel>
      <HCard pad="14px" radius={18} style={{ marginBottom: 16 }}>
        <HNumberedActions items={
          area === 'heart' ? [
            { title: 'Cut sodium below 1,500mg/day', body: 'Swap deli meat & chips for the alternates I queued.' },
            { title: '20-min walk after lunch', body: 'Drops your BP 5-8 mmHg on average.' },
            { title: 'Recheck in 5 days', body: "I'll remind you at 7am Friday." },
          ] : area === 'fitness' ? [
            { title: 'Walking 1:1s on Tue/Thu', body: '~2,500 extra steps per day.' },
            { title: '8pm post-dinner loop', body: '15 min before TV.' },
          ] : [
            { title: 'Keep the wind-down', body: 'Your 10:45pm pattern is gold — protect it.' },
          ]
        }/>
        <button onClick={() => onNavigate('chat', { topic: area === 'heart' ? 'bp' : 'movement' })} style={{ marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 13, fontWeight: 500, color: 'var(--brand-orange-vibey)' }}>
          Discuss with Anna <Glyph name="chevR" size={12}/>
        </button>
      </HCard>
    </HScreen>
  );
}

// ============================================================================
// PAYWALL
// ============================================================================
function PaywallScreen({ onBack }) {
  const [plan, setPlan] = React.useState('annual');
  return (
    <div data-screen-label="Paywall" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 0%, #2A1B14 0%, #07060B 70%)', color: '#fff', overflowY: 'auto', paddingTop: 56 }}>
      <div style={{ padding: '20px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <button onClick={onBack} aria-label="Close" style={{ width: 36, height: 36, borderRadius: 999, background: 'rgba(255,255,255,0.08)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0, lineHeight: 0 }}>
          <Glyph name="close" size={16}/>
        </button>
        <button style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>Restore</button>
      </div>

      <div style={{ padding: '16px 24px 0', textAlign: 'center' }}>
        <div style={{ display: 'inline-flex', padding: '4px 12px', background: 'rgba(255,179,107,0.18)', color: 'var(--brand-gold-sand)', borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing: 0.8 }}>HEALIFY LIFE+</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 18, lineHeight: 1.1 }}>
          The full Anna,<br/>
          <span style={{ background: 'var(--grad-warm-orange)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>without limits.</span>
        </div>
        <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.6)', marginTop: 12, lineHeight: 1.5 }}>Unlimited voice. Deep data analysis. Personalized meditation, meal plans, and workouts.</div>
      </div>

      <div style={{ padding: '24px 16px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { k: 'feat-1', icon: 'mic',     t: 'Unlimited voice with Anna', s: 'Long conversations, anytime' },
            { k: 'feat-2', icon: 'sparkle', t: 'Adaptive AI tools',          s: 'Meditation, meals, workouts — tuned to you' },
            { k: 'feat-3', icon: 'data',    t: 'Deep trend analysis',        s: 'Decoded bloodwork & DNA' },
            { k: 'feat-4', icon: 'shield',  t: 'End-to-end encryption',      s: 'Your data, only yours' },
          ].map(f => (
            <div key={f.k} style={{ display: 'flex', gap: 12, padding: '12px 0', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
              <div style={{ width: 36, height: 36, borderRadius: 12, background: 'rgba(255,179,107,0.16)', color: 'var(--brand-gold-sand)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Glyph name={f.icon} size={16}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{f.t}</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>{f.s}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { k: 'annual',  title: 'Annual',  sub: 'Best value · 2 months free', price: '$89', per: '/yr', badge: 'POPULAR' },
            { k: 'monthly', title: 'Monthly', sub: 'Cancel anytime',             price: '$12', per: '/mo' },
          ].map(p => {
            const active = plan === p.k;
            return (
              <button key={p.k} onClick={() => setPlan(p.k)} style={{
                padding: '16px 16px', borderRadius: 18,
                background: active ? 'rgba(255,179,107,0.12)' : 'rgba(255,255,255,0.04)',
                border: active ? '2px solid var(--brand-gold-sand)' : '2px solid transparent',
                color: '#fff', textAlign: 'left', position: 'relative',
              }}>
                {p.badge && <span style={{ position: 'absolute', top: -10, right: 14, padding: '3px 10px', background: 'var(--brand-orange-vibey)', borderRadius: 999, fontSize: 10, fontWeight: 600, letterSpacing: 0.6 }}>{p.badge}</span>}
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 500 }}>{p.title}</div>
                    <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>{p.sub}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600 }}>{p.price}</span>
                    <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)' }}>{p.per}</span>
                  </div>
                </div>
              </button>
            );
          })}
        </div>

        <div style={{ marginTop: 22 }}>
          <HPrimaryButton variant="gradient" full size="lg" onClick={onBack}>Continue · 7 days free</HPrimaryButton>
        </div>
        <div style={{ textAlign: 'center', fontSize: 11, color: 'rgba(255,255,255,0.45)', marginTop: 10 }}>Cancel anytime in Settings. Subscription managed by RevenueCat · App Store.</div>
      </div>
    </div>
  );
}

Object.assign(window, { MenuScreen, MenuTile, HabitsScreen, AddHabitSheet, PicksScreen, NotificationsScreen, FocusDetailScreen, PaywallScreen });