/* Devonew — member screens */
const { useState } = React;

/* ---------- shared bits ---------- */
function PageHead({ title, sub, right }) {
  return (
    <div className="page-head">
      <div>
        <h1 className="page-title">{title}</h1>
        {sub && <p className="page-sub">{sub}</p>}
      </div>
      {right}
    </div>
  );
}

function SecTitle({ children, link, onLink }) {
  return (
    <div className="sec-title">
      <h3>{children}</h3>
      {link && <button className="sec-link" onClick={onLink}>{link}</button>}
    </div>
  );
}

/* ---------- Cuidado pastoral (ponte com o painel da igreja via localStorage do mesmo subdomínio) ---------- */
const careRead = (k, d) => { try { const v = localStorage.getItem('devonew_' + k); return v == null ? d : JSON.parse(v); } catch { return d; } };
const carerInitials = (name) => (name || '').replace(/^(Pr\.|Pra\.|Diác\.)\s*/, '').trim().split(/\s+/).map((w) => w[0]).slice(0, 2).join('').toUpperCase();

function MemberCareCard({ c, go, toast }) {
  const findMe = () => {
    const roster = careRead('care', null);
    if (!Array.isArray(roster)) return null;
    return roster.find((p) => (p.initials && c.initials && p.initials === c.initials)
      || (p.name && c.first && p.name.toLowerCase().startsWith(c.first.toLowerCase()))) || null;
  };
  const [me, setMe] = useState(findMe);
  const steps = (() => { const pub = careRead('journey_def', null); return Array.isArray(pub) && pub.length ? pub : (c.journey || []); })();
  const carer = (me && me.assignedTo && me.assignedTo !== '—') ? me.assignedTo : ((c.cell && c.cell.leader && c.cell.leader.name) || null);
  const praying = !!(me && me.prayer);
  const birthday = !!(me && (me.flags || []).includes('aniversario'));
  const stepIdx = me ? Math.min(me.journeyStep || 0, steps.length) : 0;
  const nextStep = stepIdx < steps.length ? steps[stepIdx] : null;

  if (!carer && !nextStep && !praying) return null;

  const togglePrayer = () => {
    const next = !praying;
    const roster = careRead('care', null);
    if (Array.isArray(roster) && me) {
      const updated = roster.map((p) => p.id === me.id ? { ...p, prayer: next, status: next && p.status === 'cuidado_ok' ? 'aberto' : p.status } : p);
      try { localStorage.setItem('devonew_care', JSON.stringify(updated)); } catch {}
      setMe(updated.find((p) => p.id === me.id) || null);
    } else {
      setMe((m) => ({ ...(m || {}), prayer: next }));
    }
    toast(next ? 'Pedido de oração enviado à liderança 🙏' : 'Pedido de oração encerrado');
  };

  return (
    <>
      <SecTitle>Você não caminha sozinho</SecTitle>
      <div className="card pad mcare">
        {carer && (
          <div className="row gap-12">
            <div className="avatar">{carerInitials(carer)}</div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div className="quick-t">{carer} está com você</div>
              <div className="quick-s">Acompanhando a sua caminhada na fé</div>
            </div>
            <span className="mcare-heart"><Icon name="heart" size={18}/></span>
          </div>
        )}

        {praying && <div className="mcare-note"><Icon name="pray" size={16}/>A liderança está orando pelo seu pedido.</div>}
        {birthday && <div className="mcare-note"><Icon name="gift" size={16}/>Feliz aniversário! A {c.church} celebra a sua vida. 🎉</div>}

        {nextStep && (
          <button className="mcare-next" onClick={() => go('trilha')}>
            <div style={{ minWidth: 0 }}>
              <span className="eyebrow">Seu próximo passo</span>
              <div className="quick-t">{nextStep.name}</div>
              {nextStep.desc && <div className="quick-s" style={{ whiteSpace: 'normal' }}>{nextStep.desc}</div>}
            </div>
            <Icon name="chevron" size={18}/>
          </button>
        )}

        <div className="row gap-10" style={{ marginTop: 14 }}>
          <button className="btn btn-ghost" style={{ flex: 1 }} onClick={togglePrayer}>
            <Icon name="pray" size={16}/>{praying ? 'Encerrar pedido' : 'Pedir oração'}
          </button>
          {carer && <button className="btn btn-ghost" onClick={() => toast(`Gratidão enviada a ${carer.split(' ')[0]} 💚`)}><Icon name="heart" size={16}/>Agradecer</button>}
        </div>
      </div>
    </>
  );
}

/* ============================================================
   HOJE  (Today / Home)
   ============================================================ */
function HojeScreen({ c, devo, streak, completedToday, xp, level, go, toast }) {
  const d = devo || c.devotional;
  const hour = new Date().getHours();
  const part = hour < 12 ? 'Bom dia' : hour < 18 ? 'Boa tarde' : 'Boa noite';
  const span = level.ceil - level.floor;
  const pct = level.max || span <= 0 ? 100 : Math.min(100, Math.max(0, Math.round(((xp - level.floor) / span) * 100)));

  const copyVerse = () => {
    const txt = `“${c.verse.text}” — ${c.verse.ref}\n\nvia ${c.church} · devonew.com`;
    navigator.clipboard?.writeText(txt); toast('Versículo copiado');
  };
  const shareVerse = () => {
    const txt = `“${c.verse.text}” — ${c.verse.ref}`;
    if (navigator.share) navigator.share({ text: txt }).catch(() => {});
    else { navigator.clipboard?.writeText(txt); toast('Pronto para compartilhar'); }
  };

  return (
    <div className="col stagger">
      <PageHead title={`${part}, ${c.first}`} sub="Que a Palavra renove o seu dia." right={
        <span className="streak-pill"><Icon name="flame" size={18}/>{streak} dias seguidos</span>
      }/>

      {/* mobile greeting */}
      <div className="show-mobile">
        <span className="streak-pill"><Icon name="flame" size={18}/>{streak} dias seguidos</span>
        <h2 className="greet">{part}, {c.first}.</h2>
        <p className="greet-sub">Que a Palavra renove o seu dia.</p>
      </div>

      {/* verse of the day */}
      <div className="verse">
        <span className="verse-glyph">”</span>
        <span className="eyebrow">Versículo do dia</span>
        <p className="verse-text">{c.verse.text}</p>
        <div className="row between wrap gap-10">
          <span className="verse-ref">{c.verse.ref}</span>
          <div className="row gap-8">
            <button className="chip" onClick={copyVerse}><Icon name="copy" size={15}/>Copiar</button>
            <button className="chip" onClick={shareVerse}><Icon name="share" size={15}/>Compartilhar</button>
          </div>
        </div>
      </div>

      {/* devotional CTA */}
      <div style={{ marginTop: 16 }}>
        {completedToday ? (
          <div className="todo-card done">
            <span className="eyebrow">Devocional de hoje</span>
            <div className="todo-h">Devocional concluído ✓</div>
            <p className="todo-p" style={{ opacity: 1, color: 'var(--muted)' }}>
              Você ganhou +{d.xp} XP e manteve sua ofensiva de {streak} dias. Volte amanhã às 05h.
            </p>
            <button className="btn btn-ghost" onClick={() => go('devocional')}>Reler devocional</button>
          </div>
        ) : (
          <div className="todo-card">
            <span className="eyebrow">Devocional de hoje · {d.readTime}</span>
            <div className="todo-h">{d.title}</div>
            <p className="todo-p">por {d.author}</p>
            <button className="btn" style={{ background: 'var(--accent-ink)', color: 'var(--accent-strong)' }} onClick={() => go('devocional')}>
              Ler agora<Icon name="arrowRight" size={17}/>
            </button>
          </div>
        )}
      </div>

      {/* cuidado pastoral — ponte com o painel da igreja */}
      <MemberCareCard c={c} go={go} toast={toast}/>

      {/* próxima escala (só quando o membro está escalado) */}
      {c.scale && (<>
      <SecTitle>Próxima escala</SecTitle>
      <div className="card pad">
        <div className="row between gap-12">
          <div className="row gap-12">
            <div className="quick-ico"><Icon name="calendar" size={20}/></div>
            <div>
              <div className="quick-t">{c.scale.ministry} · {c.scale.role}</div>
              <div className="quick-s">{c.scale.when}</div>
            </div>
          </div>
        </div>
        <div className="row gap-10" style={{ marginTop: 16 }}>
          <button className="btn btn-primary" style={{ flex: 1 }} onClick={() => toast('Presença confirmada 🙌')}>
            <Icon name="check" size={17}/>Confirmar presença
          </button>
          <button className="btn btn-ghost" onClick={() => toast('Pedido de troca enviado')}>Trocar</button>
        </div>
      </div>
      </>)}

      {/* quick links */}
      <SecTitle>Atalhos</SecTitle>
      <div className="quick-grid">
        {c.quick.map((q) => (
          <button key={q.id} className="quick" onClick={() => {
            const dest = { oracao: 'oracao', trilha: 'trilha', curso: 'cursos', celula: 'celula' }[q.id];
            if (dest) go(dest); else toast('Em breve no app');
          }}>
            <div className="quick-ico" style={q.soft ? { background: 'var(--surface-2)', color: 'var(--muted)' } : null}>
              <Icon name={q.icon} size={20}/>
            </div>
            <div style={{ minWidth: 0 }}>
              <div className="quick-t">{q.t}</div>
              <div className="quick-s">{q.id === 'trilha' ? `Nível ${level.n} · ${level.name}` : q.s}</div>
            </div>
          </button>
        ))}
      </div>

      {/* xp strip */}
      <div className="card pad" style={{ marginTop: 22 }}>
        <div className="row between">
          <div className="row gap-12">
            <div className="avatar">{c.initials}</div>
            <div>
              <div className="quick-s" style={{ marginBottom: 2 }}>Nível {level.n}</div>
              <div className="level-name" style={{ fontSize: 18 }}>{level.name}</div>
            </div>
          </div>
          <button className="chip chip-accent" onClick={() => go('trilha')}>Ver trilha<Icon name="chevron" size={15}/></button>
        </div>
        <div className="bar" style={{ marginTop: 16 }}><i style={{ width: pct + '%' }}/></div>
        <div className="xp-meta" style={{ marginBottom: 0 }}>
          <span>{xp.toLocaleString('pt-BR')} XP</span>
          <span>{level.max ? 'Nível máximo 🌳' : `Faltam ${(level.ceil - xp).toLocaleString('pt-BR')} para ${level.next}`}</span>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   DEVOCIONAL  (reading)
   ============================================================ */
/* converte links de YouTube/Vimeo em URL de player embutido */
function devoEmbed(url) {
  if (!url) return null;
  let m;
  if ((m = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([\w-]{6,})/))) return 'https://www.youtube.com/embed/' + m[1];
  if ((m = url.match(/vimeo\.com\/(?:video\/)?(\d+)/))) return 'https://player.vimeo.com/video/' + m[1];
  return null;
}
function DevocionalScreen({ c, devo, archive, completedToday, onComplete, go, amenSet, savedSet, notes, onAmen, onSave, onNote, reminder, onReminder }) {
  const today = devo || c.devotional;
  const [selected, setSelected] = useState(null);
  const d = selected || today;
  const viewingToday = !selected;
  const arch = archive || [];
  const inits = d.authorInitials || (d.author || '').trim().split(/\s+/).map((w) => w[0]).slice(0, 2).join('').toUpperCase();
  // engajamento (amém · salvar · reflexão), por devocional
  const amenSetL = amenSet || [], savedSetL = savedSet || [], notesL = notes || {};
  const dkey = (x) => x.id || x.dateISO || x.title;
  const key = dkey(d);
  const amened = amenSetL.includes(key);
  const amenCount = (d.amens || 0) + (amened ? 1 : 0);
  const saved = savedSetL.includes(key);
  const noteVal = notesL[key] || '';

  const share = () => {
    const txt = `${d.title}\n${d.verse ? '“' + d.verse + '”' + (d.verseRef ? ' — ' + d.verseRef : '') + '\n' : ''}\nvia ${c.church} · devonew`;
    if (navigator.share) navigator.share({ title: d.title, text: txt }).catch(() => {});
    else { navigator.clipboard?.writeText(txt); }
  };

  return (
    <div className="col fade-up">
      <button className="btn btn-quiet show-mobile" style={{ marginLeft: -8, marginBottom: 4 }} onClick={() => go('hoje')}>
        <Icon name="chevronL" size={18}/>Hoje
      </button>
      <PageHead title="Devocional" sub={viewingToday ? 'O devocional de hoje da sua igreja' : 'Do histórico'}/>

      {!viewingToday && (
        <button className="btn btn-quiet" style={{ alignSelf: 'flex-start', marginBottom: 4 }} onClick={() => setSelected(null)}>
          <Icon name="chevronL" size={17}/>Voltar ao devocional de hoje
        </button>
      )}

      <div className="read-hero">
        {d.coverImg
          ? <img className="read-cover" src={d.coverImg} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
          : <div className="ph read-cover">{d.cover}</div>}
      </div>

      <div className="read-body">
        <span className="eyebrow">{d.date}</span>
        <h1 className="read-title">{d.title}</h1>
        <div className="read-meta">
          <div className="avatar sm">{inits || '–'}</div>
          <span>{d.author}</span>
          <span style={{ color: 'var(--faint)' }}>·</span>
          <span>{d.readTime}</span>
          <span style={{ flex: 1 }}/>
          <button className="chip" onClick={share}><Icon name="share" size={15}/>Compartilhar</button>
        </div>

        {d.media && d.media.url && (
          <div style={{ margin: '4px 0 18px' }}>
            {d.media.type === 'audio' ? (
              <audio controls src={d.media.url} style={{ width: '100%' }}/>
            ) : devoEmbed(d.media.url) ? (
              <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, borderRadius: 14, overflow: 'hidden', background: '#000' }}>
                <iframe src={devoEmbed(d.media.url)} title="Devocional em vídeo" allow="accelerometer; autoplay; encrypted-media; picture-in-picture" allowFullScreen style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}/>
              </div>
            ) : /\.(mp4|webm|ogg)(\?|$)/i.test(d.media.url) ? (
              <video controls src={d.media.url} style={{ width: '100%', borderRadius: 14 }}/>
            ) : (
              <a className="btn btn-ghost btn-sm" href={d.media.url} target="_blank" rel="noopener"><Icon name="play" size={16}/>{d.media.type === 'video' ? 'Assistir' : 'Ouvir'}</a>
            )}
          </div>
        )}

        {d.verse && (
          <blockquote style={{ fontFamily: 'var(--font-scripture, inherit)', fontSize: '1.05rem', lineHeight: 1.5, color: 'var(--accent-strong)', borderLeft: '3px solid var(--accent)', padding: '2px 0 2px 14px', margin: '4px 0 20px' }}>
            “{d.verse}”
            {d.verseRef && <span style={{ display: 'block', fontSize: '.8rem', color: 'var(--muted)', marginTop: 6 }}>{d.verseRef}</span>}
          </blockquote>
        )}

        <div className="prose">
          {(d.paragraphs || []).map((p, i) =>
            typeof p === 'string'
              ? <p key={i}>{p}</p>
              : <p key={i} className="pull">{p.pull}</p>
          )}
        </div>

        {d.prayer && (
          <div className="prayer-box">
            <span className="eyebrow">Oração sugerida</span>
            <p>{d.prayer}</p>
          </div>
        )}

        {/* engajamento: amém · salvar · reflexão pessoal */}
        <div className="row gap-8" style={{ marginTop: 18, flexWrap: 'wrap' }}>
          <button className={`chip ${amened ? 'chip-accent' : ''}`} onClick={() => onAmen && onAmen(key)}>
            <Icon name="hands" size={16}/>Amém{amenCount > 0 ? ` · ${amenCount}` : ''}
          </button>
          <button className={`chip ${saved ? 'chip-accent' : ''}`} onClick={() => onSave && onSave(key)}>
            <Icon name={saved ? 'check' : 'plus'} size={16}/>{saved ? 'Salvo' : 'Salvar'}
          </button>
        </div>
        <div className="prayer-box" style={{ marginTop: 12 }}>
          <span className="eyebrow">Minha reflexão</span>
          <textarea className="note" rows={3} style={{ width: '100%', resize: 'vertical' }} value={noteVal}
            onChange={(e) => onNote && onNote(key, e.target.value)} placeholder="O que Deus falou com você hoje? (só você vê)"/>
        </div>

        {viewingToday ? (
          completedToday ? (
            <div className="row gap-10" style={{ marginTop: 8 }}>
              <span className="chip chip-accent"><Icon name="check" size={16}/>Concluído hoje</span>
              <button className="btn btn-ghost" onClick={() => go('hoje')}>Voltar para Hoje</button>
            </div>
          ) : (
            <button className="btn btn-primary btn-lg btn-block" onClick={onComplete}>
              <Icon name="check" size={19}/>Concluir devocional de hoje · +{d.xp} XP
            </button>
          )
        ) : (
          <div className="row gap-10" style={{ marginTop: 8 }}>
            <span className="chip"><Icon name="book" size={15}/>Devocional de {d.date}</span>
          </div>
        )}

        {viewingToday && onReminder && (
          <div className="row between wrap gap-10" style={{ marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--line)' }}>
            <span className="row gap-8" style={{ fontSize: 13.5, color: 'var(--muted)' }}><Icon name="bell" size={16}/>Lembrar do devocional todo dia</span>
            <span className="row gap-8">
              <input type="time" value={(reminder && reminder.time) || '05:00'} onChange={(e) => onReminder({ ...(reminder || {}), time: e.target.value })}
                style={{ border: '1px solid var(--line)', borderRadius: 10, padding: '6px 10px', background: 'var(--surface)', color: 'var(--ink)', fontFamily: 'inherit' }}/>
              <button className={`chip ${reminder && reminder.on ? 'chip-accent' : ''}`} onClick={() => onReminder({ ...(reminder || {}), on: !(reminder && reminder.on) })}>
                <Icon name="bell" size={15}/>{reminder && reminder.on ? 'Ativado' : 'Ativar'}
              </button>
            </span>
          </div>
        )}
      </div>

      {arch.length > 0 && (
        <div style={{ marginTop: 26 }}>
          <span className="eyebrow">Devocionais anteriores</span>
          <div className="col" style={{ gap: 8, marginTop: 10 }}>
            {arch.map((a) => (
              <button key={a.id || a.dateISO} className="devo-arch"
                onClick={() => { setSelected(a); if (typeof window !== 'undefined') window.scrollTo({ top: 0, behavior: 'smooth' }); }}
                style={{ display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left', padding: '12px 14px', border: '1px solid var(--line)', borderRadius: 14, background: 'var(--surface)', cursor: 'pointer' }}>
                <Icon name="book" size={18} style={{ color: 'var(--accent-strong)', flex: 'none' }}/>
                <span style={{ flex: 1, minWidth: 0 }}>
                  <span style={{ display: 'block', fontWeight: 600, fontSize: 14.5 }}>{a.title}</span>
                  <span style={{ display: 'block', fontSize: 12.5, color: 'var(--muted)' }}>{a.date} · {a.author}</span>
                </span>
                {savedSetL.includes(dkey(a)) && <Icon name="check" size={15} style={{ color: 'var(--accent-strong)', flex: 'none' }}/>}
                {notesL[dkey(a)] && <Icon name="edit" size={15} style={{ color: 'var(--muted)', flex: 'none' }}/>}
                <Icon name="chevron" size={16} style={{ color: 'var(--muted)', flex: 'none' }}/>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

/* ============================================================
   ORAÇÃO  (prayer center + private journal)
   ============================================================ */
function OracaoScreen({ c, prayers, togglePrayer, addPrayer, journal, setJournal, toast }) {
  const [tab, setTab] = useState('pedidos');
  const [draft, setDraft] = useState('');
  const active = prayers.filter((p) => !p.answered);
  const answered = prayers.filter((p) => p.answered);

  const submit = (e) => {
    e.preventDefault();
    if (!draft.trim()) return;
    addPrayer(draft.trim()); setDraft(''); toast('Pedido adicionado');
  };

  return (
    <div className="col fade-up">
      <PageHead title="Oração" sub="Seu espaço de intercessão e reflexão pessoal."/>
      <div className="show-mobile" style={{ marginBottom: 18 }}>
        <h2 className="greet" style={{ fontSize: 26 }}>Oração</h2>
      </div>

      <div className="lead-tabs" style={{ marginBottom: 20 }}>
        <button className={`lead-tab ${tab === 'pedidos' ? 'active' : ''}`} onClick={() => setTab('pedidos')}>Central de Oração</button>
        <button className={`lead-tab ${tab === 'diario' ? 'active' : ''}`} onClick={() => setTab('diario')}>Diário</button>
      </div>

      {tab === 'pedidos' ? (
        <>
          <form className="card pad" onSubmit={submit} style={{ marginBottom: 18 }}>
            <div className="row gap-10">
              <input className="note" style={{ minHeight: 0, fontFamily: 'var(--font-text)', fontSize: 15 }}
                placeholder="Adicionar um motivo de oração…" value={draft} onChange={(e) => setDraft(e.target.value)} />
              <button className="iconbtn" type="submit" style={{ background: 'var(--accent)', color: 'var(--accent-ink)', borderColor: 'transparent', flex: 'none' }}>
                <Icon name="plus" size={20}/>
              </button>
            </div>
          </form>

          <span className="eyebrow">Em oração · {active.length}</span>
          <div className="card pad" style={{ marginTop: 10 }}>
            {active.map((p) => (
              <div key={p.id} className="pray-item">
                <button className={`pray-check ${''}`} onClick={() => togglePrayer(p.id)} aria-label="marcar como respondida">
                  <Icon name="check" size={15}/>
                </button>
                <div className="pray-text">
                  <div className="pray-title">{p.title}</div>
                  <div className="pray-sub">{p.sub}</div>
                </div>
              </div>
            ))}
            {active.length === 0 && <div className="pray-sub" style={{ padding: '8px 4px' }}>Nenhum pedido ativo. Que tal começar um?</div>}
          </div>

          {answered.length > 0 && (
            <>
              <span className="eyebrow" style={{ display: 'block', marginTop: 26 }}>Bênçãos alcançadas · {answered.length}</span>
              <div className="card pad" style={{ marginTop: 10 }}>
                {answered.map((p) => (
                  <div key={p.id} className="pray-item answered">
                    <button className="pray-check done" onClick={() => togglePrayer(p.id)} aria-label="reabrir pedido">
                      <Icon name="check" size={15}/>
                    </button>
                    <div className="pray-text">
                      <div className="pray-title">{p.title}</div>
                      <div className="pray-sub">{p.sub}</div>
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}
        </>
      ) : (
        <div className="fade-up">
          <div className="privacy" style={{ marginBottom: 14 }}>
            <Icon name="lock" size={15}/> Anotações criptografadas — 100% privadas. Nem o pastor ou administrador acessam.
          </div>
          <div className="card pad">
            <div className="row between" style={{ marginBottom: 8 }}>
              <span className="eyebrow">Diário espiritual · hoje</span>
              <Icon name="edit" size={16} style={{ color: 'var(--faint)' }}/>
            </div>
            <textarea className="note" placeholder="Escreva suas reflexões, aprendizados e direcionamentos…"
              value={journal} onChange={(e) => setJournal(e.target.value)} />
          </div>
          <p className="pray-sub" style={{ marginTop: 12, textAlign: 'center' }}>Salvo automaticamente neste dispositivo.</p>
        </div>
      )}
    </div>
  );
}

/* ============================================================
   TRILHA  (growth track / gamification)
   ============================================================ */
function timeAgo(ts) {
  const s = Math.max(1, Math.floor((Date.now() - ts) / 1000));
  if (s < 60) return 'agora';
  const m = Math.floor(s / 60); if (m < 60) return `há ${m} min`;
  const h = Math.floor(m / 60); if (h < 24) return `há ${h} h`;
  const d = Math.floor(h / 24); return d === 1 ? 'ontem' : `há ${d} dias`;
}

// roteiro vertical da jornada de discipulado — etapas concluídas, atual e bloqueadas
function JourneyTrack({ steps, signals, journeyDone, courseDone, onComplete, go }) {
  const isDone = (s) => {
    if (s.manual) return journeyDone.includes(s.id);
    if (s.auto === 'course' && s.courseId) return !!(courseDone && courseDone(s.courseId));
    return !!(signals && signals[s.auto]);
  };
  const firstOpen = steps.findIndex((s) => !isDone(s));
  const doneCount = steps.filter(isDone).length;
  const pct = Math.round((doneCount / steps.length) * 100);
  return (
    <div className="card pad">
      <div className="row between gap-10" style={{ alignItems: 'flex-start' }}>
        <div>
          <span className="eyebrow">Jornada de discipulado</span>
          <div className="level-name" style={{ fontSize: 19 }}>{doneCount} de {steps.length} etapas</div>
        </div>
        <span className="chip chip-accent">{pct}%</span>
      </div>
      <div className="bar" style={{ margin: '16px 0 22px' }}><i style={{ width: pct + '%' }}/></div>
      <div className="journey">
        {steps.map((s, i) => {
          const done = isDone(s);
          const current = i === firstOpen;
          const active = !done && (s.manual || current); // manual: sempre acionável; auto: só a etapa atual
          return (
            <div key={s.id} className={`j-step ${done ? 'done' : active ? 'current' : 'locked'}`}>
              <div className="j-rail"><div className="j-node"><Icon name={done ? 'check' : active ? s.icon : 'lock'} size={16}/></div></div>
              <div className="j-body">
                <div className="j-name">{s.name}</div>
                <div className="j-desc">{s.desc}</div>
                {active && s.verse && <div className="j-verse">“{s.verse}”{s.verseRef && <span className="j-verse-ref"> · {s.verseRef}</span>}</div>}
                {done && <span className="j-tag">Concluído ✓</span>}
                {!done && s.manual && (
                  <button className="btn btn-primary btn-sm" style={{ marginTop: 12 }} onClick={() => onComplete(s.id)}>
                    <Icon name="check" size={15}/>Marcar como concluído{s.xp ? ` · +${s.xp} XP` : ''}
                  </button>
                )}
                {!done && !s.manual && current && s.goto && (
                  <button className="btn btn-ghost btn-sm" style={{ marginTop: 12 }} onClick={() => go && go(s.goto)}>
                    {s.cta || 'Abrir'}<Icon name="arrowRight" size={15}/>
                  </button>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// metas semanais com barra de progresso
function WeeklyGoals({ goals, weekly }) {
  return (
    <div className="card pad">
      <div className="col" style={{ gap: 18, display: 'flex', flexDirection: 'column' }}>
        {goals.map((g) => {
          const val = Math.min(g.target, (weekly && weekly[g.id]) || 0);
          const done = val >= g.target;
          const pct = Math.round((val / g.target) * 100);
          return (
            <div key={g.id} className="goal">
              <div className={`goal-ico ${done ? 'done' : ''}`}><Icon name={done ? 'check' : g.icon} size={18}/></div>
              <div className="goal-body">
                <div className="row between">
                  <span className="goal-label">{g.label}</span>
                  <span className="goal-meta">{val}/{g.target}{done ? ' ✓' : ` · +${g.xp} XP`}</span>
                </div>
                <div className="bar" style={{ marginTop: 9 }}><i style={{ width: pct + '%' }}/></div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// feed de conquistas recentes (alimentado por awardXp)
function ActivityFeed({ log }) {
  return (
    <div className="card pad">
      {log.slice(0, 6).map((e, i) => (
        <div key={i} className="feed-row">
          <div className="feed-ico"><Icon name={e.icon || 'sparkle'} size={15}/></div>
          <div className="feed-label">{e.label}</div>
          <div className="feed-time">{timeAgo(e.ts)}</div>
          <div className="feed-xp">+{e.xp}</div>
        </div>
      ))}
    </div>
  );
}

function TrilhaScreen({ c, xp, level, badges, streak, journey, signals, journeyDone, courseDone, onCompleteStep, weekly, xpLog, go, bible }) {
  const [board, setBoard] = useState('mensal');
  const span = level.ceil - level.floor;
  const pct = level.max || span <= 0 ? 100 : Math.min(100, Math.max(0, Math.round(((xp - level.floor) / span) * 100)));
  const badgeList = badges || c.badges;
  const bib = bible || window.BIBLE.progress();
  const readPct = bib.total ? Math.round((bib.read / bib.total) * 100) : 0;
  // ranking ao vivo: injeta o XP real de "Você", reordena e renumera
  const youXp = board === 'geral' ? xp : 510 + Math.max(0, xp - c.level.xp);
  const rows = c.leaderboard[board]
    .map((r) => r.you ? { ...r, xp: youXp } : r)
    .sort((a, b) => b.xp - a.xp)
    .map((r, i) => ({ ...r, rank: i + 1 }));

  return (
    <div className="col stagger">
      <PageHead title="Trilha de Crescimento" sub="Sua jornada de fé, comunhão e serviço."/>
      <div className="show-mobile" style={{ marginBottom: 14 }}>
        <h2 className="greet" style={{ fontSize: 26 }}>Trilha</h2>
      </div>

      {/* level card */}
      <div className="level-card">
        <div className="row between">
          <div className="row gap-16">
            <div className="avatar lg">{c.initials}</div>
            <div>
              <span className="eyebrow">Nível {level.n}</span>
              <div className="level-name">{level.name}</div>
            </div>
          </div>
          <div className="chip chip-ember"><Icon name="flame" size={16}/>{streak} dias</div>
        </div>
        <div className="bar" style={{ marginTop: 22 }}><i style={{ width: pct + '%' }}/></div>
        <div className="xp-meta" style={{ marginBottom: 0 }}>
          <span><b style={{ color: 'var(--ink)' }}>{xp.toLocaleString('pt-BR')}</b>{level.max ? ' XP' : ` / ${level.ceil.toLocaleString('pt-BR')} XP`}</span>
          <span>{level.max ? 'Nível máximo 🌳' : `Faltam ${(level.ceil - xp).toLocaleString('pt-BR')} para ${level.next}`}</span>
        </div>
      </div>

      {/* TRILHA de discipulado — o caminho de crescimento */}
      <SecTitle>Sua trilha de discipulado</SecTitle>
      <JourneyTrack steps={journey || c.journey} signals={signals} journeyDone={journeyDone || []} courseDone={courseDone} onComplete={onCompleteStep} go={go}/>

      {/* metas da semana */}
      <SecTitle>Metas da semana</SecTitle>
      <WeeklyGoals goals={c.weeklyGoals} weekly={weekly}/>

      {/* progresso de leitura bíblica → liga à Bíblia */}
      <SecTitle>Leitura da Palavra</SecTitle>
      <div className="card pad">
        <div className="row between gap-10" style={{ alignItems: 'flex-start' }}>
          <div>
            <span className="eyebrow">Progresso na Bíblia</span>
            <div className="level-name">{bib.read.toLocaleString('pt-BR')} de {bib.total.toLocaleString('pt-BR')} capítulos</div>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={() => go && go('biblia')}>
            <Icon name="bible" size={16}/>Continuar lendo
          </button>
        </div>
        <div className="bar" style={{ marginTop: 18 }}><i style={{ width: readPct + '%' }}/></div>
        <div className="xp-meta" style={{ marginBottom: 0 }}>
          <span>Antigo Testamento · {bib.at.read}/{bib.at.total}</span>
          <span>Novo Testamento · {bib.nt.read}/{bib.nt.total}</span>
        </div>
        <p className="pray-sub" style={{ margin: '10px 0 0' }}>
          {bib.booksDone} de 66 livros concluídos · {readPct}% da Bíblia
        </p>
      </div>

      {/* conquistas recentes */}
      {xpLog && xpLog.length > 0 && (
        <>
          <SecTitle>Conquistas recentes</SecTitle>
          <ActivityFeed log={xpLog}/>
        </>
      )}

      {/* badges */}
      <SecTitle>Medalhas · {badgeList.filter((b) => b.unlocked).length} de {badgeList.length}</SecTitle>
      <div className="badges">
        {badgeList.map((b) => (
          <div key={b.name} className={`badge ${b.unlocked ? '' : 'locked'}`} title={b.req || ''}>
            <div className="badge-ring"><Icon name={b.icon} size={24}/></div>
            <div className="badge-name">{b.name}</div>
            {b.req && <div className="badge-req">{b.unlocked ? 'Conquistada ✓' : b.req}</div>}
          </div>
        ))}
      </div>

      {/* leaderboard */}
      <div className="sec-title">
        <h3>Ranking da igreja</h3>
        <div className="lead-tabs">
          <button className={`lead-tab ${board === 'mensal' ? 'active' : ''}`} onClick={() => setBoard('mensal')}>Mensal</button>
          <button className={`lead-tab ${board === 'geral' ? 'active' : ''}`} onClick={() => setBoard('geral')}>Geral</button>
        </div>
      </div>
      <div className="card pad">
        {rows.map((r) => (
          <div key={r.rank} className={`lead-row ${r.you ? 'you' : ''}`}>
            <div className={`lead-rank ${r.rank <= 3 ? 'top' : ''}`}>{r.rank}</div>
            <div className="avatar sm" style={r.you ? null : { background: 'var(--surface-2)', color: 'var(--muted)' }}>
              {r.name === 'Você' ? c.initials : r.name.split(' ').map((w) => w[0]).slice(0, 2).join('')}
            </div>
            <div className="lead-name">{r.name}</div>
            <div className="lead-xp">{r.xp.toLocaleString('pt-BR')} XP</div>
          </div>
        ))}
      </div>
      <p className="pray-sub" style={{ marginTop: 14, textAlign: 'center' }}>
        Mostrando o Top 6 de {c.church}. Pontos somados por devocionais, leitura da Palavra, células, escalas e cursos.
      </p>
    </div>
  );
}

/* ============================================================
   CURSOS  (courses / formação)
   ============================================================ */
function progressOf(course) {
  let done = 0, total = 0, next = null;
  course.modules.forEach((m) => m.lessons.forEach((l) => {
    total++;
    if (l.done) done++;
    else if (!next) next = { ...l, module: m.name };
  }));
  return { done, total, pct: Math.round((done / total) * 100), next };
}

function CursosScreen({ c, courses, catalog, library, seminars, eventRegs, completeLesson, enrollCourse, toggleEventReg, go, toast }) {
  const [openId, setOpen] = useState(null);
  const [tab, setTab] = useState('meus');
  const open = courses.find((x) => x.id === openId);

  if (open) return <CourseDetail course={open} library={library} completeLesson={completeLesson} back={() => setOpen(null)} toast={toast}/>;

  const cont = courses[0];
  const cp = cont ? progressOf(cont) : null;
  const isEnrolled = (id) => courses.some((x) => x.id === id);

  const TABS = [
    { id: 'meus', label: 'Meus cursos' },
    { id: 'catalogo', label: 'Catálogo' },
    { id: 'biblioteca', label: 'Biblioteca' },
    { id: 'seminarios', label: 'Eventos' },
  ];

  return (
    <div className="col stagger">
      <PageHead title="Cursos" sub="Cursos, materiais e seminários da sua igreja."/>
      <div className="show-mobile" style={{ marginBottom: 16 }}>
        <h2 className="greet" style={{ fontSize: 26 }}>Cursos</h2>
        <p className="greet-sub" style={{ marginBottom: 0 }}>Cursos, materiais e seminários.</p>
      </div>

      {/* continue watching (só na aba Meus cursos) */}
      {tab === 'meus' && cont && cp && (
        <button className="course-hero" onClick={() => setOpen(cont.id)} style={{ display: 'block', border: 'none', width: '100%', textAlign: 'left' }}>
          <span className="eyebrow">Continuar de onde parou</span>
          <div className="course-hero-title">{cont.title}</div>
          <div className="course-hero-sub">
            {cp.next ? <>Próxima · {cp.next.t} · {cp.next.dur}</> : 'Curso concluído 🎉'}
          </div>
          <div className="bar"><i style={{ width: cp.pct + '%' }}/></div>
          <div className="xp-meta" style={{ marginBottom: 0 }}>
            <span>{cp.done} de {cp.total} lições</span>
            <span>{cp.pct}%</span>
          </div>
          <div className="row gap-10" style={{ marginTop: 18 }}>
            <span className="btn btn-primary"><Icon name="play" size={17}/>Continuar curso</span>
          </div>
        </button>
      )}

      {/* tabs */}
      <div className="lead-tabs" style={{ marginTop: tab === 'meus' && cont ? 26 : 4, marginBottom: 18, flexWrap: 'wrap' }}>
        {TABS.map((t) => (
          <button key={t.id} className={`lead-tab ${tab === t.id ? 'active' : ''}`} onClick={() => setTab(t.id)}>{t.label}</button>
        ))}
      </div>

      {tab === 'meus' && (
        courses.length ? (
          <div className="col gap-12" style={{ gap: 12, display: 'flex', flexDirection: 'column' }}>
            {courses.map((co) => {
              const p = progressOf(co);
              return (
                <button key={co.id} className="course-card" onClick={() => setOpen(co.id)}>
                  <div className="ph course-thumb" style={co.coverImg ? { backgroundImage: `url(${co.coverImg})`, backgroundSize: 'cover', backgroundPosition: 'center', color: 'transparent' } : null}>{co.coverImg ? '' : co.cover}</div>
                  <div className="course-card-body">
                    <span className="eyebrow" style={{ fontSize: 10 }}>{co.category}</span>
                    <div className="course-card-title">{co.title}</div>
                    <div className="course-card-sub">{co.instructor}</div>
                    <div className="bar"><i style={{ width: p.pct + '%' }}/></div>
                    <div className="course-prog-meta">
                      <span>{p.done === p.total ? 'Concluído ✓' : `${p.done}/${p.total} lições`}</span>
                      <span>{p.pct}%</span>
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        ) : (
          <div className="card pad" style={{ textAlign: 'center', color: 'var(--muted)' }}>Você ainda não está matriculado. Explore o <b>Catálogo</b>.</div>
        )
      )}

      {tab === 'catalogo' && (
        catalog.length ? (
          <div className="catalog-grid">
            {catalog.map((co) => {
              const isIn = isEnrolled(co.id);
              return (
                <div key={co.id} className="cat-card">
                  <div className="ph cat-cover" style={co.coverImg ? { backgroundImage: `url(${co.coverImg})`, backgroundSize: 'cover', backgroundPosition: 'center', color: 'transparent' } : null}>{co.coverImg ? '' : co.cover}</div>
                  <div className="cat-body">
                    <div className="row between" style={{ alignItems: 'flex-start', gap: 8 }}>
                      <span className="eyebrow" style={{ fontSize: 10 }}>{co.category}</span>
                      <span className="level-tag">{co.level}</span>
                    </div>
                    <div className="cat-title">{co.title}</div>
                    <div className="cat-instr">{co.instructor}</div>
                    <div className="cat-foot">
                      <div className="cat-info">
                        <span><Icon name="play" size={13}/>{co.lessons} lições</span>
                        <span><Icon name="clock" size={13}/>{co.dur}</span>
                      </div>
                    </div>
                    <button className={`btn ${isIn ? 'btn-ghost' : 'btn-primary'}`} style={{ marginTop: 14, width: '100%', padding: '11px 18px', fontSize: 14 }}
                      onClick={() => isIn ? setTab('meus') : enrollCourse(co)}>
                      {isIn ? <><Icon name="check" size={16}/>Matriculado</> : 'Matricular-se'}
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="card pad" style={{ textAlign: 'center', color: 'var(--muted)' }}>Nenhum curso no catálogo ainda.</div>
        )
      )}

      {tab === 'biblioteca' && <BibliotecaTab library={library} toast={toast}/>}
      {tab === 'seminarios' && <SeminariosTab seminars={seminars} eventRegs={eventRegs} toggleEventReg={toggleEventReg} toast={toast}/>}

      {(tab === 'meus' || tab === 'catalogo') && (
        <div className="privacy" style={{ marginTop: 22 }}>
          <Icon name="grad" size={15}/> Conclua um curso e receba o certificado digital da {c.church}.
        </div>
      )}
    </div>
  );
}

/* ---------- Biblioteca de arquivos (membro) ---------- */
function BibliotecaTab({ library, toast }) {
  const files = (library || []).filter((f) => !f.status || f.status === 'publicado');
  if (!files.length) return <div className="card pad" style={{ textAlign: 'center', color: 'var(--muted)' }}>Nenhum material publicado ainda.</div>;
  const glyph = (f) => f.kind === 'link' ? (/youtube|youtu\.be|vimeo/i.test(f.url || '') ? 'video' : 'link') : /image/.test(f.mime || '') ? 'image' : /video|audio/.test(f.mime || '') ? 'video' : 'file';
  const openFile = (f) => {
    const href = f.kind === 'link' ? f.url : f.dataUrl;
    if (!href) { toast('Material indisponível'); return; }
    window.open(href, '_blank', 'noopener');
  };
  const cats = [...new Set(files.map((f) => f.category || 'Geral'))];
  return (
    <div className="col" style={{ gap: 18, display: 'flex', flexDirection: 'column' }}>
      {cats.map((cat) => (
        <div key={cat}>
          <SecTitle>{cat}</SecTitle>
          <div className="lib-list">
            {files.filter((f) => (f.category || 'Geral') === cat).map((f) => (
              <button key={f.id} className="lib-row" onClick={() => openFile(f)}>
                <span className="lib-glyph"><Icon name={glyph(f)} size={20}/></span>
                <div className="lib-body">
                  <div className="lib-title">{f.title}</div>
                  {f.desc ? <div className="lib-sub">{f.desc}</div> : null}
                </div>
                <Icon name={f.kind === 'link' ? 'arrowRight' : 'download'} size={18} className="lib-act"/>
              </button>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Seminários & eventos (membro) ---------- */
function SeminariosTab({ seminars, eventRegs, toggleEventReg, toast }) {
  const list = seminars || [];
  if (!list.length) return <div className="card pad" style={{ textAlign: 'center', color: 'var(--muted)' }}>Nenhum seminário ou evento publicado.</div>;
  const join = (ev) => { if (ev.link) window.open(ev.link, '_blank', 'noopener'); else toast('Link ainda não disponível'); };
  const register = (ev) => { const was = eventRegs.includes(ev.id); toggleEventReg(ev.id); toast(was ? 'Inscrição cancelada' : 'Inscrição confirmada 🙌'); };
  return (
    <div className="col" style={{ gap: 14, display: 'flex', flexDirection: 'column' }}>
      {list.map((ev) => {
        const reg = eventRegs.includes(ev.id);
        return (
          <div key={ev.id} className="sem-card">
            <div className="sem-head">
              <span className={`sem-kind ${ev.online ? 'online' : ''}`}>{ev.online ? <><Icon name="video" size={13}/>Online</> : ev.kind}</span>
              <span className="sem-date"><Icon name="calendar" size={13}/>{ev.date}{ev.time ? ` · ${ev.time}` : ''}</span>
            </div>
            <div className="sem-title">{ev.name}</div>
            {ev.speaker ? <div className="sem-speaker">{ev.speaker}</div> : null}
            {ev.desc ? <p className="sem-desc">{ev.desc}</p> : null}
            {ev.cap ? (
              <div className="xp-meta" style={{ marginBottom: 10 }}>
                <span>{(ev.signups || 0) + (reg ? 1 : 0)}/{ev.cap} inscritos</span>
              </div>
            ) : null}
            <div className="row gap-10">
              <button className={`btn ${reg ? 'btn-ghost' : 'btn-primary'}`} style={{ flex: 1, justifyContent: 'center' }} onClick={() => register(ev)}>
                {reg ? <><Icon name="check" size={16}/>Inscrito</> : 'Inscrever-se'}
              </button>
              {ev.online && <button className="btn btn-primary" style={{ justifyContent: 'center' }} onClick={() => join(ev)}><Icon name="video" size={16}/>Entrar</button>}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function CourseDetail({ course, library, completeLesson, back, toast }) {
  const p = progressOf(course);
  const [openL, setOpenL] = useState(null);
  const continueLesson = () => {
    if (p.next) completeLesson(course.id, p.next.id);
    else toast('Você já concluiu este curso 🎉');
  };
  const matOf = (l) => {
    if (l.link) return { href: l.link, label: l.type === 'video' ? 'Assistir' : 'Abrir', icon: l.type === 'video' ? 'video' : 'link' };
    if (l.fileId) { const f = (library || []).find((x) => x.id === l.fileId); if (f) return { href: f.kind === 'link' ? f.url : f.dataUrl, label: 'Material', icon: 'file' }; }
    return null;
  };
  const hasExtra = (l) => (l.type === 'texto' && l.body) || matOf(l);
  const onLesson = (l) => {
    if (!l.done) completeLesson(course.id, l.id);
    if (hasExtra(l)) setOpenL((cur) => cur === l.id ? null : l.id);
    else if (l.done) toast('Lição concluída ✓');
  };
  return (
    <div className="col fade-up">
      <button className="btn btn-quiet" style={{ marginLeft: -8, marginBottom: 6, alignSelf: 'flex-start' }} onClick={back}>
        <Icon name="chevronL" size={18}/>Cursos
      </button>

      <div className="ph course-detail-cover" style={course.coverImg ? { backgroundImage: `url(${course.coverImg})`, backgroundSize: 'cover', backgroundPosition: 'center', color: 'transparent' } : null}>{course.coverImg ? '' : course.cover}</div>

      <span className="eyebrow">{course.category}{course.track ? ` · ${course.track}` : ''}</span>
      <h1 className="read-title" style={{ fontSize: 'clamp(24px, 5vw, 32px)', margin: '8px 0 14px' }}>{course.title}</h1>
      <div className="read-meta" style={{ marginBottom: course.desc ? 12 : 20 }}>
        <div className="avatar sm">{course.instrInitials}</div>
        <span>{course.instructor}</span>
        <span style={{ color: 'var(--faint)' }}>·</span>
        <span>{p.total} lições</span>
      </div>
      {course.desc ? <p className="course-desc">{course.desc}</p> : null}

      <div className="card pad" style={{ marginBottom: 8 }}>
        <div className="bar"><i style={{ width: p.pct + '%' }}/></div>
        <div className="xp-meta" style={{ marginBottom: 16 }}>
          <span><b style={{ color: 'var(--ink)' }}>{p.done}</b> de {p.total} lições</span>
          <span>{p.pct}%</span>
        </div>
        {p.next ? (
          <button className="btn btn-primary btn-block" onClick={continueLesson}>
            <Icon name="play" size={18}/>{p.done === 0 ? 'Começar' : 'Continuar'} · {p.next.t}
          </button>
        ) : (
          <div className="chip chip-accent" style={{ width: '100%', justifyContent: 'center', padding: '12px' }}>
            <Icon name="grad" size={17}/>Curso concluído · certificado liberado
          </div>
        )}
      </div>

      {course.modules.map((m, mi) => {
        const mdone = m.lessons.filter((l) => l.done).length;
        return (
          <div key={mi}>
            <div className="module-head">
              <h4>{m.name}</h4>
              <span className="cnt">{mdone}/{m.lessons.length}</span>
            </div>
            <div className="card pad" style={{ paddingTop: 6, paddingBottom: 6 }}>
              {m.lessons.map((l) => {
                const mat = matOf(l);
                return (
                  <div key={l.id}>
                    <div className={`lesson-row ${l.done ? 'done' : ''}`} role="button" tabIndex={0} onClick={() => onLesson(l)}>
                      <span className="lesson-ico">
                        <Icon name={l.done ? 'check' : (l.type === 'texto' ? 'file' : 'play')} size={l.done ? 16 : 14}/>
                      </span>
                      <div className="lesson-body">
                        <div className="lesson-t">{l.t}</div>
                        <div className="lesson-dur"><Icon name="clock" size={12}/>{l.dur}{hasExtra(l) ? ' · toque para abrir' : ''}</div>
                      </div>
                      {hasExtra(l) ? <Icon name="chevronDown" size={16} className="lesson-chev" style={openL === l.id ? { transform: 'rotate(180deg)' } : null}/> : null}
                    </div>
                    {openL === l.id && hasExtra(l) && (
                      <div className="lesson-extra">
                        {l.type === 'texto' && l.body ? <p className="lesson-text">{l.body}</p> : null}
                        {mat ? <a className="btn btn-ghost btn-sm" href={mat.href} target="_blank" rel="noopener" onClick={(e) => e.stopPropagation()}><Icon name={mat.icon} size={15}/>{mat.label}</a> : null}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ============================================================
   MINHA CÉLULA  (small group)
   ============================================================ */
function CelulaScreen({ c, toast }) {
  const cell = c.cell;
  if (!cell) {
    return (
      <div className="col stagger">
        <PageHead title="Minha Célula" sub="Seu pequeno grupo de comunhão e cuidado."/>
        <div className="card pad" style={{ textAlign: 'center', padding: '40px 24px' }}>
          <div className="quick-ico" style={{ margin: '0 auto 14px' }}><Icon name="users" size={24}/></div>
          <h3 style={{ margin: '0 0 6px' }}>Você ainda não está em uma célula</h3>
          <p className="quick-s" style={{ maxWidth: 320, margin: '0 auto 18px' }}>
            Células são pequenos grupos de comunhão e cuidado. Fale com a sua igreja para participar de uma.
          </p>
          <button className="btn btn-primary" onClick={() => toast('Pedido enviado à secretaria 🙏')}>
            <Icon name="hands" size={17}/>Quero entrar numa célula
          </button>
        </div>
      </div>
    );
  }
  return (
    <div className="col stagger">
      <PageHead title="Minha Célula" sub="Seu pequeno grupo de comunhão e cuidado."
        right={<span className="chip chip-accent"><Icon name="users" size={15}/>{cell.stats.members} membros</span>}/>
      <div className="show-mobile" style={{ marginBottom: 14 }}>
        <h2 className="greet" style={{ fontSize: 26 }}>Minha Célula</h2>
        <p className="greet-sub" style={{ marginBottom: 0 }}>Seu pequeno grupo de comunhão.</p>
      </div>

      {/* hero */}
      <div className="cell-hero">
        <div className="ph cell-cover">{cell.photo}</div>
        <div className="cell-hero-body">
          <span className="eyebrow">Meu pequeno grupo</span>
          <h2 className="cellgrp-name">{cell.name}</h2>
          <div className="cell-tags">
            <span className="chip"><Icon name="calendar" size={15}/>{cell.day} · {cell.time}</span>
            <span className="chip"><Icon name="users" size={15}/>{cell.stats.members} pessoas</span>
          </div>
          <div className="cell-addr">
            <Icon name="pin" size={18}/>
            <span className="cell-addr-txt">{cell.address}</span>
            <a className="btn btn-ghost btn-sm cell-map" href={cell.maps} target="_blank" rel="noopener">Abrir no mapa</a>
          </div>
        </div>
      </div>

      {/* próximo encontro */}
      <div className="card pad next-meet">
        <div style={{ flex: 1, minWidth: 0 }}>
          <span className="eyebrow">Próximo encontro · {cell.nextDate}</span>
          <div className="next-theme">{cell.nextTheme}</div>
        </div>
        <button className="btn btn-primary" onClick={() => toast('Presença confirmada na célula 🙌')}>
          <Icon name="check" size={17}/>Confirmar presença
        </button>
      </div>

      {/* liderança */}
      <SecTitle>Liderança</SecTitle>
      <div className="card pad">
        <div className="row between gap-12 wrap">
          <div className="row gap-12">
            <div className="avatar">{cell.leader.initials}</div>
            <div>
              <div className="cell-leader-name">{cell.leader.name}</div>
              <div className="quick-s">{cell.leader.role} · supervisão de {cell.supervisor}</div>
            </div>
          </div>
          <a className="btn btn-wa" href={`https://wa.me/${cell.leader.whats}`} target="_blank" rel="noopener">
            <Icon name="chat" size={17}/>Falar no WhatsApp
          </a>
        </div>
      </div>

      {/* membros */}
      <SecTitle>Membros · {cell.members.length}</SecTitle>
      <div className="member-grid">
        {cell.members.map((m, i) => (
          <div key={i} className={`member-chip ${m.role === 'Você' ? 'you' : ''}`}>
            <div className="avatar sm" style={(m.role === 'Você' || m.role === 'Líder') ? null : { background: 'var(--surface-2)', color: 'var(--muted)' }}>{m.initials}</div>
            <div className="member-info">
              <div className="member-name">{m.name}</div>
              {m.role && <div className="member-role">{m.role}</div>}
            </div>
          </div>
        ))}
      </div>
      <p className="pray-sub" style={{ marginTop: 14, textAlign: 'center' }}>
        Toque no líder para falar no WhatsApp e fortalecer a comunhão durante a semana.
      </p>
    </div>
  );
}

Object.assign(window, { HojeScreen, DevocionalScreen, OracaoScreen, TrilhaScreen, CursosScreen, CelulaScreen });