// extras.jsx — additional screens: Search, Patronage, Journal, Notification preview, Onboarding, Divine Office, Mary parallel

const { useState: useS, useMemo: useM } = React;

// ─────────────── SAINTS LIBRARY (with search + patronages) ───────────────
function SaintsLibraryFull({ ctx, onOpenSaint, onOpenPatronage }) {
  const t = window.TOKENS;
  const { dark } = ctx;
  const ink = dark ? t.ink.dark : t.ink.light;
  const inkSoft = dark ? t.inkSoft.dark : t.inkSoft.light;
  const surface = dark ? t.surface.dark : t.surface.light;
  const [q, setQ] = useS('');
  const [filter, setFilter] = useS('pregnancy'); // pregnancy | all

  const all = Object.values(window.SAINTS);
  const filtered = useM(() => {
    let list = filter === 'pregnancy' ? all.filter(s => s.pregnancyRelevant) : all;
    if (q.trim()) {
      const ql = q.toLowerCase();
      list = list.filter(s =>
        s.name.toLowerCase().includes(ql) ||
        s.short.toLowerCase().includes(ql) ||
        s.patronOf.some(p => p.toLowerCase().includes(ql))
      );
    }
    return list;
  }, [q, filter]);

  const patronages = ['Expectant mothers', 'Childbirth', 'Unborn children', 'Mothers', 'Difficult marriages', 'Childless couples', 'Grandmothers', 'Conversions'];

  return (
    <div style={{ position: 'absolute', inset: 0, overflowY: 'auto', paddingBottom: 100 }}>
      <div style={{ padding: '64px 20px 14px' }}>
        <div style={{ fontFamily: 'JetBrains Mono, ui-monospace, monospace', fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase', color: inkSoft, marginBottom: 6 }}>
          {all.length} saints · curated
        </div>
        <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: -0.6, color: ink, lineHeight: 1.05 }}>Saints</div>
      </div>

      {/* search */}
      <div style={{ padding: '0 16px 12px' }}>
        <div style={{
          background: surface, borderRadius: 14, padding: '10px 14px',
          display: 'flex', alignItems: 'center', gap: 10,
          border: `0.5px solid ${dark ? t.hairline.dark : t.hairline.light}`,
        }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <circle cx="7" cy="7" r="5" stroke={inkSoft} strokeWidth="1.6"/>
            <path d="M11 11l3 3" stroke={inkSoft} strokeWidth="1.6" strokeLinecap="round"/>
          </svg>
          <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Search by name or patronage…" style={{
            flex: 1, border: 'none', background: 'transparent', outline: 'none',
            fontSize: 14, color: ink, fontFamily: 'inherit',
          }}/>
        </div>
      </div>

      {/* filter chips */}
      <div style={{ padding: '0 16px 12px', display: 'flex', gap: 8 }}>
        {[['pregnancy','For pregnancy'],['all','All saints']].map(([v,l]) => (
          <button key={v} onClick={()=>setFilter(v)} style={{
            background: filter===v ? t.roseDeep : (dark ? 'rgba(255,255,255,0.06)' : 'rgba(60,55,70,0.06)'),
            color: filter===v ? '#fff' : ink, border: 'none', cursor: 'pointer',
            borderRadius: 999, padding: '7px 13px', fontSize: 12, fontWeight: 700, fontFamily: 'inherit',
          }}>{l}</button>
        ))}
      </div>

      {/* Browse by patronage */}
      {!q.trim() && (
        <div style={{ padding: '4px 0 16px' }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: inkSoft, padding: '0 20px 8px' }}>Browse by patronage</div>
          <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '0 16px', scrollbarWidth: 'none' }}>
            {patronages.map(p => (
              <button key={p} onClick={()=>onOpenPatronage(p)} style={{
                flexShrink: 0, background: surface, border: `0.5px solid ${dark?t.hairline.dark:t.hairline.light}`,
                borderRadius: 14, padding: '10px 14px', cursor: 'pointer', fontFamily: 'inherit',
                color: ink, fontSize: 13, fontWeight: 600, letterSpacing: -0.1,
              }}>{p}</button>
            ))}
          </div>
        </div>
      )}

      {/* grid */}
      <div style={{ padding: '0 16px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {filtered.map(s => (
          <div key={s.id} onClick={() => onOpenSaint(s.id)} style={{
            background: surface, borderRadius: 18, padding: 12, cursor: 'pointer',
            display: 'flex', flexDirection: 'column', gap: 10,
          }}>
            <window.SaintPlaceholder tone={s.image} size="md" dark={dark} halo label={s.feast}/>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: ink, lineHeight: 1.2, letterSpacing: -0.1 }}>{s.short}</div>
              <div style={{ fontSize: 11, color: inkSoft, marginTop: 2 }}>{s.feast}</div>
            </div>
          </div>
        ))}
        {filtered.length === 0 && (
          <div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: 32, color: inkSoft, fontSize: 13 }}>
            No saints match "{q}".
          </div>
        )}
      </div>
    </div>
  );
}

// ─────────────── PATRONAGE BROWSE ───────────────
function PatronageScreen({ ctx, patronage, onBack, onOpenSaint }) {
  const t = window.TOKENS;
  const { dark } = ctx;
  const ink = dark ? t.ink.dark : t.ink.light;
  const inkSoft = dark ? t.inkSoft.dark : t.inkSoft.light;
  const surface = dark ? t.surface.dark : t.surface.light;
  const list = Object.values(window.SAINTS).filter(s => s.patronOf.some(p => p.toLowerCase() === patronage.toLowerCase()));

  return (
    <div style={{ position: 'absolute', inset: 0, overflowY: 'auto', paddingBottom: 100 }}>
      <div style={{ padding: '54px 20px 24px', background: 'linear-gradient(180deg, #F4DDD8, transparent)' }}>
        <button onClick={onBack} style={{
          background: 'rgba(255,255,255,0.7)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
          border: 'none', borderRadius: 999, width: 36, height: 36,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', marginBottom: 16,
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M9 2L3 7l6 5" stroke={ink} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase', color: inkSoft, marginBottom: 6 }}>Patron of</div>
        <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: -0.5, lineHeight: 1.1, color: ink, textWrap: 'pretty' }}>{patronage}</div>
        <div style={{ fontSize: 13, color: inkSoft, marginTop: 8 }}>{list.length} {list.length === 1 ? 'saint' : 'saints'} intercede for this.</div>
      </div>
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {list.map(s => (
          <div key={s.id} onClick={()=>onOpenSaint(s.id)} style={{
            background: surface, borderRadius: 16, padding: 12, display: 'flex', gap: 12, cursor: 'pointer',
          }}>
            <window.SaintPlaceholder tone={s.image} size="sm" dark={dark} label={s.feast}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: ink, letterSpacing: -0.1 }}>{s.short}</div>
              <div style={{ fontSize: 12, color: inkSoft, marginTop: 2 }}>{s.feast} · {s.lived}</div>
              <div style={{ fontSize: 12, color: ink, marginTop: 6, lineHeight: 1.4, textWrap: 'pretty' }}>{s.bioShort}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────── PRAYER / INTENTION JOURNAL ───────────────
function JournalScreen({ ctx, onBack }) {
  const t = window.TOKENS;
  const { dark } = ctx;
  const ink = dark ? t.ink.dark : t.ink.light;
  const inkSoft = dark ? t.inkSoft.dark : t.inkSoft.light;
  const surface = dark ? t.surface.dark : t.surface.light;
  const [drafting, setDrafting] = useS(false);
  const [draft, setDraft] = useS('');
  const [entries, setEntries] = useS([
    { date: 'May 14', wk: 19, text: 'For a safe ultrasound tomorrow. St. Gerard, pray for us.', saint: 'gerard-majella' },
    { date: 'May 11', wk: 19, text: 'Mother\'s Day. Thanksgiving for my own mother and her patience with me.', saint: null },
    { date: 'May 5',  wk: 18, text: 'For Maria, struggling with morning sickness in her first trimester.', saint: 'gianna' },
    { date: 'Apr 28', wk: 17, text: 'Feast of St. Gianna. Asking her intercession for the long road ahead.', saint: 'gianna' },
  ]);

  return (
    <div style={{ position: 'absolute', inset: 0, overflowY: 'auto', paddingBottom: 100 }}>
      <div style={{ padding: '54px 20px 18px', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12 }}>
        <button onClick={onBack} style={{
          background: dark ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.7)',
          border: 'none', borderRadius: 999, width: 36, height: 36, flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M9 2L3 7l6 5" stroke={ink} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase', color: inkSoft, marginBottom: 6 }}>{entries.length} intentions</div>
          <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: -0.5, color: ink, lineHeight: 1.1 }}>Prayer journal</div>
        </div>
      </div>

      {/* compose */}
      <div style={{ padding: '0 16px 16px' }}>
        {!drafting ? (
          <button onClick={()=>setDrafting(true)} style={{
            width: '100%', padding: '14px 16px', borderRadius: 16, background: surface,
            border: `1px dashed ${dark?t.hairline.dark:'rgba(60,55,70,0.18)'}`, color: inkSoft,
            cursor: 'pointer', fontSize: 14, fontFamily: 'inherit', textAlign: 'left',
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{
              width: 26, height: 26, borderRadius: '50%', background: t.roseDeep, color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 700,
            }}>+</span>
            Add an intention…
          </button>
        ) : (
          <div style={{ background: surface, borderRadius: 18, padding: 14, border: `1px solid ${t.rose}` }}>
            <textarea value={draft} onChange={e=>setDraft(e.target.value)} autoFocus rows={4} placeholder="What are you bringing to prayer today?" style={{
              width: '100%', border: 'none', outline: 'none', resize: 'none',
              background: 'transparent', color: ink, fontSize: 14, lineHeight: 1.5, fontFamily: 'inherit',
            }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
              <span style={{ fontSize: 11, color: inkSoft, fontFamily: 'JetBrains Mono, monospace' }}>Week 20 · May 15</span>
              <div style={{ display: 'flex', gap: 8 }}>
                <button onClick={()=>{ setDrafting(false); setDraft(''); }} style={{ background:'none',border:'none',color:inkSoft,cursor:'pointer',fontSize:13,fontFamily:'inherit', fontWeight: 600 }}>Cancel</button>
                <button onClick={()=>{
                  if (draft.trim()) setEntries([{date:'May 15', wk:20, text:draft.trim(), saint:null}, ...entries]);
                  setDrafting(false); setDraft('');
                }} style={{
                  background: t.roseDeep, color: '#fff', border: 'none', borderRadius: 999,
                  padding: '7px 14px', fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
                }}>Save</button>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* entries */}
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {entries.map((e, i) => {
          const saint = e.saint ? window.SAINTS[e.saint] : null;
          return (
            <div key={i} style={{ background: surface, borderRadius: 16, padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                <span style={{ fontSize: 11, fontFamily: 'JetBrains Mono, monospace', color: inkSoft, letterSpacing: 0.4 }}>{e.date.toUpperCase()} · WK {e.wk}</span>
                {saint && <window.Chip tone="rose" small>{saint.short}</window.Chip>}
              </div>
              <div style={{ fontSize: 14, color: ink, lineHeight: 1.55, textWrap: 'pretty' }}>{e.text}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────── NOTIFICATION PREVIEW ───────────────
function NotificationPreview({ ctx, onBack }) {
  const t = window.TOKENS;
  const { dark } = ctx;
  const ink = dark ? t.ink.dark : t.ink.light;
  const inkSoft = dark ? t.inkSoft.dark : t.inkSoft.light;
  const surface = dark ? t.surface.dark : t.surface.light;

  const Notif = ({ time, title, body, app = 'Nine Months' }) => (
    <div style={{
      background: dark ? 'rgba(40,38,46,0.85)' : 'rgba(255,255,255,0.92)',
      backdropFilter: 'blur(20px) saturate(180%)', WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      borderRadius: 18, padding: '12px 14px', display: 'flex', gap: 10,
      border: `0.5px solid ${dark?'rgba(255,255,255,0.08)':'rgba(0,0,0,0.06)'}`,
      boxShadow: '0 4px 14px rgba(0,0,0,0.06)',
    }}>
      <div style={{ width: 36, height: 36, flexShrink: 0, borderRadius: 9, background: 'linear-gradient(135deg, #E8C0BA, #B07A7A)', display:'flex', alignItems:'center', justifyContent:'center', color: '#fff', fontSize: 16 }}>✦</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
          <span style={{ fontSize: 12, fontWeight: 700, color: ink }}>{app}</span>
          <span style={{ fontSize: 11, color: inkSoft }}>{time}</span>
        </div>
        <div style={{ fontSize: 13, fontWeight: 700, color: ink, marginTop: 2, letterSpacing: -0.1 }}>{title}</div>
        <div style={{ fontSize: 12, color: inkSoft, marginTop: 2, lineHeight: 1.4, textWrap: 'pretty' }}>{body}</div>
      </div>
    </div>
  );

  return (
    <div style={{ position: 'absolute', inset: 0, overflowY: 'auto', paddingBottom: 100, background: 'linear-gradient(180deg, #4A3D52, #2A2030 40%)', color: '#fff' }}>
      <div style={{ padding: '54px 20px 24px' }}>
        <button onClick={onBack} style={{
          background: 'rgba(255,255,255,0.18)', border: 'none', borderRadius: 999, width: 36, height: 36,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', marginBottom: 16,
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M9 2L3 7l6 5" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 6 }}>Lock screen preview</div>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.4, color: '#fff', lineHeight: 1.1, textWrap: 'pretty' }}>How notifications feel.</div>
        <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', marginTop: 8, lineHeight: 1.45 }}>One quiet message in the morning. Feast days nudge a few hours before.</div>
      </div>
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Notif time="now" title="St. Gerard Majella · Feast today" body="Patron of expectant mothers. Tap to read his life."/>
        <Notif time="7:00" title="Good morning, Anna" body="Week 20 · halfway home. St. Anne walks with you this week."/>
        <Notif time="yesterday" title="The Visitation tomorrow" body="A feast for pregnant friendships. Mary visits Elizabeth."/>
      </div>
      <div style={{ padding: '24px 16px 0' }}>
        <div style={{ background: 'rgba(255,255,255,0.08)', borderRadius: 18, padding: 16 }}>
          <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 10 }}>What you'll get</div>
          {[
            ['Daily morning saint', '7:00 each day'],
            ['Pregnancy-relevant feast days', 'Day before, 6 PM'],
            ['Solemnities (Annunciation, Christmas)', 'Day before, 6 PM'],
            ['Weekly patron transitions', 'Sunday morning'],
          ].map(([k,v],i,arr) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: i<arr.length-1 ? '0.5px solid rgba(255,255,255,0.1)':'none', fontSize: 13 }}>
              <span>{k}</span><span style={{ opacity: 0.7, fontSize: 12 }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────── ONBOARDING ───────────────
function OnboardingScreen({ ctx, onClose }) {
  const t = window.TOKENS;
  const { dark } = ctx;
  const ink = dark ? t.ink.dark : t.ink.light;
  const inkSoft = dark ? t.inkSoft.dark : t.inkSoft.light;
  const surface = dark ? t.surface.dark : t.surface.light;
  const [step, setStep] = useS(0);
  const [name, setName] = useS('Anna');
  const [dueDate, setDueDate] = useS('Dec 25, 2026');
  const [calendar, setCalendar] = useS('novus-ordo');
  const [language, setLanguage] = useS('en');

  const steps = ['welcome', 'name', 'due', 'calendar', 'language', 'ready'];
  const current = steps[step];
  const next = () => setStep(s => Math.min(s+1, steps.length-1));
  const prev = () => setStep(s => Math.max(s-1, 0));

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, #F4DDD8, #FAF6F0 60%)', overflowY: 'auto' }}>
      <button onClick={onClose} style={{
        position: 'absolute', top: 54, right: 16, zIndex: 2,
        background: 'rgba(255,255,255,0.7)', backdropFilter: 'blur(10px)',
        border: 'none', borderRadius: 999, width: 32, height: 32, fontSize: 18,
        display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: ink,
      }}>×</button>

      {/* progress dots */}
      <div style={{ display: 'flex', gap: 6, justifyContent: 'center', paddingTop: 64, marginBottom: 20 }}>
        {steps.map((_, i) => (
          <div key={i} style={{
            width: i === step ? 22 : 6, height: 6, borderRadius: 999,
            background: i <= step ? t.roseDeep : 'rgba(60,55,70,0.18)',
            transition: 'all 0.25s',
          }}/>
        ))}
      </div>

      <div style={{ padding: '0 24px 24px' }}>
        {current === 'welcome' && (
          <div style={{ textAlign: 'center', marginTop: 20 }}>
            <div style={{ width: 96, height: 96, margin: '0 auto 20px', borderRadius: 28, background: 'linear-gradient(135deg, #E8D4A8, #D9A6A0)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 48 }}>✦</div>
            <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: -0.6, color: ink, lineHeight: 1.05, textWrap: 'pretty' }}>Walk the nine months with the Church.</div>
            <div style={{ fontSize: 15, color: inkSoft, marginTop: 12, lineHeight: 1.5 }}>From the Annunciation to Christmas — Mary's gestation, mapped to yours.</div>
          </div>
        )}
        {current === 'name' && (
          <div style={{ marginTop: 20 }}>
            <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.4, color: ink, lineHeight: 1.1 }}>What should we call you?</div>
            <div style={{ fontSize: 14, color: inkSoft, marginTop: 8 }}>Used only to greet you each morning. Stays on this device.</div>
            <input value={name} onChange={e=>setName(e.target.value)} style={{
              marginTop: 24, width: '100%', padding: '14px 16px', borderRadius: 16, border: `1px solid ${t.rose}`,
              background: surface, fontSize: 17, color: ink, fontFamily: 'inherit', outline: 'none',
            }}/>
          </div>
        )}
        {current === 'due' && (
          <div style={{ marginTop: 20 }}>
            <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.4, color: ink, lineHeight: 1.1 }}>When are you due?</div>
            <div style={{ fontSize: 14, color: inkSoft, marginTop: 8 }}>An estimate is fine — we'll calculate your week from this.</div>
            <div style={{ marginTop: 24, padding: 18, borderRadius: 18, background: surface, border: `1px solid ${t.rose}`, textAlign: 'center' }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: t.roseDeep }}>Estimated due date</div>
              <div style={{ fontSize: 28, fontWeight: 700, color: ink, marginTop: 6, letterSpacing: -0.4 }}>{dueDate}</div>
              <div style={{ fontSize: 12, color: inkSoft, marginTop: 6 }}>Christmas Day · You'll deliver with Christ.</div>
            </div>
            <div style={{ marginTop: 16, fontSize: 12, color: inkSoft, textAlign: 'center' }}>Tap to change · or enter LMP instead</div>
          </div>
        )}
        {current === 'calendar' && (
          <div style={{ marginTop: 20 }}>
            <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.4, color: ink, lineHeight: 1.1 }}>Which calendar do you follow?</div>
            <div style={{ fontSize: 14, color: inkSoft, marginTop: 8 }}>You can change this anytime. All are included.</div>
            <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                ['novus-ordo', 'Novus Ordo', 'Universal calendar after Vatican II.'],
                ['1962', '1962 Missal', 'Traditional Latin calendar.'],
                ['polish', 'Polish National', 'Polish saints and feast days overlay.'],
              ].map(([v, l, sub]) => (
                <button key={v} onClick={()=>setCalendar(v)} style={{
                  textAlign: 'left', padding: 16, borderRadius: 16,
                  background: surface, border: `1.5px solid ${calendar===v ? t.roseDeep : (dark?t.hairline.dark:t.hairline.light)}`,
                  cursor: 'pointer', fontFamily: 'inherit',
                }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: ink, letterSpacing: -0.2 }}>{l}</div>
                  <div style={{ fontSize: 12, color: inkSoft, marginTop: 3 }}>{sub}</div>
                </button>
              ))}
            </div>
          </div>
        )}
        {current === 'language' && (
          <div style={{ marginTop: 20 }}>
            <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.4, color: ink, lineHeight: 1.1 }}>Language for prayers and copy</div>
            <div style={{ marginTop: 20, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {[['en','English'],['pl','Polski'],['la','Latina']].map(([v,l]) => (
                <button key={v} onClick={()=>setLanguage(v)} style={{
                  flex: '1 0 calc(50% - 4px)', padding: '14px 16px', borderRadius: 14,
                  background: language===v ? t.roseDeep : surface, color: language===v ? '#fff' : ink,
                  border: `1.5px solid ${language===v ? t.roseDeep : (dark?t.hairline.dark:t.hairline.light)}`,
                  cursor: 'pointer', fontSize: 15, fontWeight: 700, fontFamily: 'inherit',
                }}>{l}</button>
              ))}
            </div>
          </div>
        )}
        {current === 'ready' && (
          <div style={{ textAlign: 'center', marginTop: 30 }}>
            <window.SaintPlaceholder tone="rose" size="lg" halo label="WELCOME"/>
            <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.4, color: ink, lineHeight: 1.1, marginTop: 24, textWrap: 'pretty' }}>Welcome, {name}.</div>
            <div style={{ fontSize: 15, color: inkSoft, marginTop: 12, lineHeight: 1.5, textWrap: 'pretty' }}>You're week 20 of 40. St. Anne is with you this week. Christmas is your due date.</div>
          </div>
        )}
      </div>

      {/* nav */}
      <div style={{ padding: '0 24px 32px', display: 'flex', gap: 12, justifyContent: step === 0 ? 'flex-end' : 'space-between' }}>
        {step > 0 && (
          <button onClick={prev} style={{ background: 'none', border: 'none', color: inkSoft, fontSize: 15, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>Back</button>
        )}
        <button onClick={current === 'ready' ? onClose : next} style={{
          background: t.roseDeep, color: '#fff', border: 'none', borderRadius: 999,
          padding: '14px 28px', fontSize: 15, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
          boxShadow: '0 2px 8px rgba(176,122,122,0.4)',
        }}>{current === 'ready' ? 'Begin' : current === 'welcome' ? 'Get started' : 'Continue'}</button>
      </div>
    </div>
  );
}

// ─────────────── DIVINE OFFICE ───────────────
function DivineOfficeScreen({ ctx, onBack }) {
  const t = window.TOKENS;
  const { dark } = ctx;
  const ink = dark ? t.ink.dark : t.ink.light;
  const inkSoft = dark ? t.inkSoft.dark : t.inkSoft.light;
  const surface = dark ? t.surface.dark : t.surface.light;
  const hours = [
    { id: 'lauds',     name: 'Lauds',         time: 'Morning',    sub: 'Praise — Zechariah\'s canticle (Benedictus).', current: false, done: true },
    { id: 'terce',     name: 'Terce',         time: '9 AM',        sub: 'Mid-morning — Holy Spirit at Pentecost.',      current: false, done: true },
    { id: 'sext',      name: 'Sext',          time: 'Noon',        sub: 'Midday — Crucifixion hour.',                   current: true,  done: false },
    { id: 'none',      name: 'None',          time: '3 PM',        sub: 'Mid-afternoon — Christ\'s death.',             current: false, done: false },
    { id: 'vespers',   name: 'Vespers',       time: 'Evening',     sub: 'Mary\'s canticle (Magnificat).',                current: false, done: false },
    { id: 'compline',  name: 'Compline',      time: 'Night',       sub: 'Simeon\'s canticle (Nunc dimittis).',           current: false, done: false },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, overflowY: 'auto', paddingBottom: 100 }}>
      <div style={{ padding: '54px 20px 24px', background: 'linear-gradient(180deg, #E2D8E8, transparent)' }}>
        <button onClick={onBack} style={{
          background: 'rgba(255,255,255,0.7)', backdropFilter: 'blur(10px)',
          border: 'none', borderRadius: 999, width: 36, height: 36,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', marginBottom: 16,
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M9 2L3 7l6 5" stroke={ink} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase', color: inkSoft, marginBottom: 6 }}>Thursday · Easter VI · White</div>
        <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: -0.5, color: ink, lineHeight: 1.1 }}>Liturgy of the Hours</div>
        <div style={{ fontSize: 14, color: inkSoft, marginTop: 8, lineHeight: 1.45 }}>The Church's daily prayer — short enough for tired mothers, ancient enough to hold you up.</div>
      </div>
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {hours.map(h => (
          <div key={h.id} style={{
            background: h.current ? 'linear-gradient(135deg, #E2D8E8, #F4DDD8)' : surface,
            borderRadius: 16, padding: 14, display: 'flex', alignItems: 'center', gap: 14,
            border: h.current ? `1px solid ${t.violet}` : `0.5px solid ${dark?t.hairline.dark:t.hairline.light}`,
            opacity: h.done ? 0.65 : 1,
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 12, flexShrink: 0,
              background: h.done ? 'rgba(60,55,70,0.08)' : `linear-gradient(135deg, ${t.violet}, ${t.roseDeep})`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: h.done ? inkSoft : '#fff', fontSize: 16,
            }}>{h.done ? '✓' : h.current ? '◉' : '◌'}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontSize: 15, fontWeight: 700, color: ink, letterSpacing: -0.1 }}>{h.name}</span>
                <span style={{ fontSize: 11, color: inkSoft, fontFamily: 'JetBrains Mono, monospace' }}>{h.time}</span>
                {h.current && <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: 0.6, padding: '2px 6px', borderRadius: 999, background: t.violet, color: '#fff' }}>NOW</span>}
              </div>
              <div style={{ fontSize: 12, color: inkSoft, marginTop: 3, lineHeight: 1.4, textWrap: 'pretty' }}>{h.sub}</div>
            </div>
            {!h.done && (
              <svg width="8" height="14" viewBox="0 0 8 14" style={{ flexShrink: 0 }}>
                <path d="M1 1l6 6-6 6" stroke={inkSoft} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────── ANNUNCIATION → CHRISTMAS PARALLEL ───────────────
function MaryParallelScreen({ ctx, onBack, currentWeek }) {
  const t = window.TOKENS;
  const { dark } = ctx;
  const ink = dark ? t.ink.dark : t.ink.light;
  const inkSoft = dark ? t.inkSoft.dark : t.inkSoft.light;
  const surface = dark ? t.surface.dark : t.surface.light;

  const milestones = [
    { date: 'Mar 25', wk: 1,  title: 'The Annunciation',     sub: 'Conception. God becomes an embryo.' },
    { date: 'May 31', wk: 10, title: 'The Visitation',       sub: 'Mary visits Elizabeth, six months pregnant with John.' },
    { date: 'Aug 5',  wk: 20, title: 'Halfway',              sub: 'The pregnancy is now visible. Mary in Nazareth.' },
    { date: 'Sep 24', wk: 27, title: 'Third trimester',      sub: 'Joseph and Mary preparing.' },
    { date: 'Dec 8',  wk: 38, title: 'Immaculate Conception',sub: 'Honor of Mary\'s own preservation from sin.' },
    { date: 'Dec 25', wk: 40, title: 'Christmas',            sub: 'Birth at Bethlehem. Your due date.' },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, overflowY: 'auto', paddingBottom: 100 }}>
      <div style={{ padding: '54px 20px 28px', background: 'linear-gradient(180deg, #EDDDC0, transparent)' }}>
        <button onClick={onBack} style={{
          background: 'rgba(255,255,255,0.7)', backdropFilter: 'blur(10px)',
          border: 'none', borderRadius: 999, width: 36, height: 36,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', marginBottom: 16,
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M9 2L3 7l6 5" stroke={ink} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase', color: inkSoft, marginBottom: 6 }}>Mar 25 → Dec 25</div>
        <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: -0.5, color: ink, lineHeight: 1.05, textWrap: 'pretty' }}>Walking with Mary</div>
        <div style={{ fontSize: 14, color: inkSoft, marginTop: 10, lineHeight: 1.5 }}>The Church teaches the Annunciation took place exactly nine months before Christmas. Your gestation traces hers.</div>
      </div>

      {/* timeline */}
      <div style={{ padding: '0 16px' }}>
        {milestones.map((m, i) => {
          const past = m.wk < currentWeek;
          const cur = Math.abs(m.wk - currentWeek) <= 1;
          return (
            <div key={m.date} style={{ display: 'flex', gap: 14, position: 'relative' }}>
              {/* spine */}
              <div style={{ width: 40, position: 'relative', flexShrink: 0 }}>
                {i < milestones.length - 1 && (
                  <div style={{ position: 'absolute', top: 28, bottom: -10, left: 19, width: 2, background: past ? t.gold : 'rgba(60,55,70,0.12)' }}/>
                )}
                <div style={{
                  width: 40, height: 40, borderRadius: '50%', marginTop: 6,
                  background: cur ? `linear-gradient(135deg, ${t.gold}, ${t.roseDeep})` : (past ? t.gold : surface),
                  border: `2px solid ${cur ? t.roseDeep : (past ? t.gold : 'rgba(60,55,70,0.18)')}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: cur || past ? '#fff' : inkSoft, fontSize: 14, fontWeight: 700,
                }}>{cur ? '✦' : past ? '✓' : m.wk}</div>
              </div>
              <div style={{ flex: 1, paddingBottom: 24 }}>
                <div style={{ fontSize: 11, fontFamily: 'JetBrains Mono, monospace', color: inkSoft, letterSpacing: 0.4, marginTop: 6 }}>{m.date.toUpperCase()} · WK {m.wk}</div>
                <div style={{ fontSize: 17, fontWeight: 700, color: ink, marginTop: 2, letterSpacing: -0.2, textWrap: 'pretty' }}>{m.title}</div>
                <div style={{ fontSize: 13, color: inkSoft, marginTop: 4, lineHeight: 1.5, textWrap: 'pretty' }}>{m.sub}</div>
                {cur && (
                  <div style={{ marginTop: 8, padding: '5px 10px', borderRadius: 999, background: t.roseDeep, color: '#fff', fontSize: 10, fontWeight: 700, letterSpacing: 0.4, display: 'inline-block' }}>YOU ARE HERE</div>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {/* fiat quote */}
      <div style={{ padding: '8px 16px 0' }}>
        <div style={{ background: 'rgba(201,168,120,0.14)', borderRadius: 22, padding: 22, textAlign: 'center' }}>
          <window.CrossGlyph size={14} color={t.gold} opacity={0.7}/>
          <div style={{ fontSize: 16, lineHeight: 1.6, color: ink, marginTop: 10, fontStyle: 'italic', textWrap: 'pretty' }}>
            "Behold, I am the handmaid of the Lord; let it be done unto me according to thy word."
          </div>
          <div style={{ fontSize: 11, color: inkSoft, marginTop: 8, letterSpacing: 0.4, textTransform: 'uppercase' }}>Mary's fiat · Luke 1:38</div>
        </div>
      </div>
    </div>
  );
}

window.SaintsLibraryFull = SaintsLibraryFull;
window.PatronageScreen = PatronageScreen;
window.JournalScreen = JournalScreen;
window.NotificationPreview = NotificationPreview;
window.OnboardingScreen = OnboardingScreen;
window.DivineOfficeScreen = DivineOfficeScreen;
window.MaryParallelScreen = MaryParallelScreen;

// ─────────────── DONATE — letter from Mateusz ───────────────
function DonateScreen({ ctx, onBack }) {
  const t = window.TOKENS;
  const { dark } = ctx;
  const ink = dark ? t.ink.dark : t.ink.light;
  const inkSoft = dark ? t.inkSoft.dark : t.inkSoft.light;
  const surface = dark ? t.surface.dark : t.surface.light;
  const hairline = dark ? t.hairline.dark : t.hairline.light;

  const [amount, setAmount] = useS(10);
  const [custom, setCustom] = useS('');
  const [pressed, setPressed] = useS(false);
  const [confirmed, setConfirmed] = useS(false);

  const tiles = [
    { v: 3,  label: '£3',  hint: 'A coffee' },
    { v: 10, label: '£10', hint: 'A meal' },
    { v: 25, label: '£25', hint: 'A week of hosting' },
  ];
  const finalAmount = custom ? Number(custom) || 0 : amount;

  // Letter body — your words, only light punctuation tidy
  const paragraphs = [
    "I've had an idea of a Catholic pregnancy tracker for a while now — one that would incorporate Catholic values into pregnancy tracking. My wife and I are expecting our 5th child to come in December, and my wife noticed she'll be going through the pregnancy the same as Mary. She's been tracking Marian feasts and checking what saint feast is on a given day. The idea of equating your pregnancy to Mary's seemed like something I had to do.",
    "I've decided to develop this app and share it with the world for free.",
    "There is associated cost with releasing an app to the public. You are more than welcome to enjoy this app for free, in perpetuity. The times are tough and we are all struggling, especially families. If you can, and you would like to aid my family and the development of this app, please consider donating.",
    "If this app becomes something bigger and people find it valuable, I'd be able to devote more time and energy into its development.",
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, overflowY: 'auto', paddingBottom: 60 }}>
      {/* Soft hero with cross+heart icon */}
      <div style={{
        padding: '54px 20px 32px',
        background: dark
          ? 'linear-gradient(180deg, rgba(232,208,168,0.08), transparent)'
          : 'linear-gradient(180deg, #F4E4D2, transparent)',
      }}>
        <button onClick={onBack} style={{
          background: dark ? 'rgba(255,255,255,0.10)' : 'rgba(255,255,255,0.7)', backdropFilter: 'blur(10px)',
          border: 'none', borderRadius: 999, width: 36, height: 36,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', marginBottom: 20,
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M9 2L3 7l6 5" stroke={ink} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>

        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: 1.4, textTransform: 'uppercase', color: inkSoft, textAlign: 'center', marginBottom: 8 }}>A note from Mateusz</div>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.5, color: ink, lineHeight: 1.1, textAlign: 'center', textWrap: 'pretty' }}>Why this app exists.</div>
      </div>

      {/* Letter */}
      <div style={{ padding: '0 24px' }}>
        {paragraphs.map((p, i) => (
          <p key={i} style={{
            fontSize: 15.5, lineHeight: 1.65, color: ink, margin: '0 0 14px',
            textWrap: 'pretty', letterSpacing: -0.05,
          }}>{p}</p>
        ))}

        {/* Marian dingbat divider */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '20px 0 16px', opacity: 0.55 }}>
          <div style={{ flex: 1, height: 0.5, background: hairline }}/>
          <window.CrossGlyph size={12} color={t.gold} opacity={1}/>
          <div style={{ flex: 1, height: 0.5, background: hairline }}/>
        </div>

        <div style={{ fontSize: 14, color: inkSoft, fontStyle: 'italic', marginBottom: 4, letterSpacing: -0.05 }}>Yours in Christ,</div>
        <div style={{ fontSize: 22, fontWeight: 700, color: ink, fontFamily: 'Nunito, serif', letterSpacing: -0.3, lineHeight: 1.2 }}>Mateusz</div>
        <div style={{ fontSize: 14, color: inkSoft, marginTop: 2, letterSpacing: -0.05 }}>with family</div>
      </div>

      {/* Amount picker */}
      <div style={{ padding: '32px 16px 0' }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: inkSoft, padding: '0 4px 10px' }}>If you can</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          {tiles.map(tile => {
            const active = !custom && amount === tile.v;
            return (
              <button key={tile.v} onClick={() => { setAmount(tile.v); setCustom(''); }} style={{
                background: active ? t.roseDeep : surface,
                border: active ? `1px solid ${t.roseDeep}` : `0.5px solid ${hairline}`,
                borderRadius: 16, padding: '14px 8px', cursor: 'pointer', fontFamily: 'inherit',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
              }}>
                <div style={{ fontSize: 18, fontWeight: 700, color: active ? '#fff' : ink, letterSpacing: -0.3 }}>{tile.label}</div>
                <div style={{ fontSize: 10, color: active ? 'rgba(255,255,255,0.85)' : inkSoft, letterSpacing: 0.2 }}>{tile.hint}</div>
              </button>
            );
          })}
        </div>

        {/* Custom */}
        <div style={{
          marginTop: 8, background: surface, borderRadius: 16, border: `0.5px solid ${hairline}`,
          padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{ fontSize: 16, color: inkSoft }}>£</span>
          <input
            type="number"
            inputMode="decimal"
            placeholder="Custom amount"
            value={custom}
            onChange={(e) => setCustom(e.target.value)}
            onFocus={() => setAmount(0)}
            style={{
              flex: 1, background: 'transparent', border: 'none', outline: 'none',
              fontSize: 15, color: ink, fontFamily: 'inherit',
            }}
          />
        </div>
      </div>

      {/* Donate pill (rose-deep, matches Common.js SectionLabel action) */}
      <div style={{ padding: '20px 16px 8px' }}>
        <button
          onClick={() => { setPressed(true); setTimeout(() => { setConfirmed(true); setPressed(false); }, 350); }}
          disabled={confirmed || finalAmount <= 0}
          style={{
            width: '100%', padding: '16px 20px', borderRadius: 999,
            background: confirmed ? t.sage : t.roseDeep,
            border: 'none', cursor: confirmed ? 'default' : 'pointer', fontFamily: 'inherit',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            transform: pressed ? 'scale(0.98)' : 'scale(1)', transition: 'transform 0.12s, background 0.25s',
            opacity: finalAmount <= 0 ? 0.4 : 1,
          }}>
          {confirmed ? (
            <React.Fragment>
              <svg width="16" height="16" viewBox="0 0 16 16"><path d="M3 8.5l3.5 3L13 5" stroke="#fff" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              <span style={{ color: '#fff', fontSize: 15, fontWeight: 700, letterSpacing: 0.2 }}>Thank you · God bless</span>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <span style={{ color: '#fff', fontSize: 15, fontWeight: 700, letterSpacing: 0.3 }}>
                Donate £{finalAmount > 0 ? finalAmount : '—'}
              </span>
              <svg width="11" height="11" viewBox="0 0 12 12"><path d="M3 2l5 4-5 4" stroke="#fff" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </React.Fragment>
          )}
        </button>

        {!confirmed && (
          <button onClick={onBack} style={{
            width: '100%', marginTop: 6, padding: '12px', background: 'transparent', border: 'none',
            color: inkSoft, fontSize: 13, fontFamily: 'inherit', cursor: 'pointer', letterSpacing: 0.1,
          }}>Maybe another time</button>
        )}

        <div style={{
          marginTop: 14, fontSize: 11, color: inkSoft, textAlign: 'center', letterSpacing: 0.2,
          lineHeight: 1.5, padding: '0 12px',
        }}>
          One-time gift · Secure checkout via Stripe · No subscription, ever
        </div>
      </div>
    </div>
  );
}

window.DonateScreen = DonateScreen;