// tela-extra.jsx — Vídeos + Comunidade/Testemunhos + Perfil.

// ── VÍDEOS ───────────────────────────────────────────────────
// Overlay com player NATIVO de vídeo local (/videos/*.mp4). Esc/clique fora fecha.
// "YouTube" fica só como alternativa — o padrão agora é tocar o arquivo baixado.
function PlayerVideo({ video, onClose }) {
  React.useEffect(() => {
    const onKey = e => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose]);
  return (
    <div onClick={onClose} role="dialog" aria-modal="true" aria-label={video.title}
      style={{ position: 'fixed', inset: 0, zIndex: 90, background: 'rgba(5,4,3,0.88)', backdropFilter: 'blur(6px)', display: 'grid', placeItems: 'center', padding: 16 }}>
      <div onClick={e => e.stopPropagation()} style={{ width: 'min(900px, 100%)', maxHeight: '90vh' }}>
        <div className="spread" style={{ marginBottom: 10 }}>
          <span className="tag">{video.cat}</span>
          <button className="iconbtn" onClick={onClose} aria-label="Fechar"><Icon name="close" size={20} /></button>
        </div>
        <video key={video.id} src={video.src} poster={video.poster} controls autoPlay playsInline
          style={{ width: '100%', maxHeight: '70vh', borderRadius: 'var(--radius-sm)', background: '#000', display: 'block' }} />
        <div className="spread" style={{ marginTop: 12, gap: 12 }}>
          <div style={{ minWidth: 0 }}>
            <h2 className="serif" style={{ fontSize: 18, lineHeight: 1.25, margin: 0 }}>{video.title}</h2>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 3 }}>@ocasallegendario · {video.dur}</div>
          </div>
          <a className="btn btn-soft btn-sm" href={video.url} target="_blank" rel="noopener" style={{ flex: '0 0 auto' }}>
            YouTube <Icon name="external" size={14} />
          </a>
        </div>
      </div>
    </div>
  );
}

function TelaVideos() {
  const [cat, setCat] = useState('Tudo');
  const [playing, setPlaying] = useState(null);
  const list = cat === 'Tudo' ? VIDEOS : VIDEOS.filter(v => v.cat === cat);
  const posterBg = v => ({ backgroundImage: 'linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.55)), url("' + v.poster + '")', backgroundSize: 'cover', backgroundPosition: 'center' });
  return (
    <div className="col">
      {playing && <PlayerVideo video={playing} onClose={() => setPlaying(null)} />}

      <div style={{ paddingTop: 8 }}>
        <Eyebrow className="muted">Canal @ocasallegendario</Eyebrow>
        <div className="spread">
          <h1 style={{ fontSize: 'clamp(26px,6vw,34px)', fontWeight: 700, letterSpacing: '-0.02em', margin: '4px 0 0' }}>Vídeos</h1>
          <a className="btn btn-soft btn-sm" href={BRAND.youtube} target="_blank" rel="noopener">Inscrever-se</a>
        </div>
      </div>

      <div className="scroll-x" style={{ marginTop: 16 }}>
        {VIDEO_CATS.map(c => <button key={c} className={'pill' + (cat === c ? ' on' : '')} onClick={() => setCat(c)}>{c}</button>)}
      </div>

      {/* destaque — toca local */}
      <button onClick={() => setPlaying(list[0])} className="card card-hover card-tap" style={{ marginTop: 18, padding: 0, overflow: 'hidden', display: 'block', width: '100%', textAlign: 'left', border: '1px solid var(--line-2)' }}>
        <div className="imgph" style={{ height: 200, borderRadius: 0, position: 'relative', ...posterBg(list[0]) }}>
          <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
            <div style={{ width: 62, height: 62, borderRadius: '50%', background: 'var(--accent)', display: 'grid', placeItems: 'center', color: 'var(--on-accent)', boxShadow: 'var(--shadow-sm)' }}>
              <Icon name="play" size={26} fill />
            </div>
          </div>
          <span style={{ position: 'absolute', bottom: 10, right: 10, background: 'rgba(0,0,0,0.6)', borderRadius: 6, padding: '3px 7px', fontSize: 11 }} className="mono">{list[0].dur}</span>
        </div>
        <div style={{ padding: 16 }}>
          <span className="tag">{list[0].cat}</span>
          <div style={{ fontWeight: 600, fontSize: 16, marginTop: 8 }}>{list[0].title}</div>
          <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>@ocasallegendario · {list[0].dur}</div>
        </div>
      </button>

      <div className="stack" style={{ marginTop: 14 }}>
        {list.slice(1).map(v => (
          <button key={v.id} onClick={() => setPlaying(v)} className="lrow card-tap" style={{ alignItems: 'stretch', width: '100%', textAlign: 'left', background: 'transparent', border: 0 }}>
            <div className="imgph" style={{ width: 116, height: 70, borderRadius: 10, position: 'relative', flex: '0 0 116px', ...posterBg(v) }}>
              <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
                <div style={{ width: 34, height: 34, borderRadius: '50%', background: 'rgba(0,0,0,0.5)', display: 'grid', placeItems: 'center', color: '#fff' }}><Icon name="play" size={16} fill /></div>
              </div>
              <span style={{ position: 'absolute', bottom: 5, right: 5, background: 'rgba(0,0,0,0.65)', borderRadius: 5, padding: '2px 5px', fontSize: 10 }} className="mono">{v.dur}</span>
            </div>
            <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <div style={{ fontWeight: 600, fontSize: 14, lineHeight: 1.25 }}>{v.title}</div>
              <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{v.cat} · {v.dur}</div>
            </div>
          </button>
        ))}
      </div>

      <a className="btn btn-ghost btn-full" href={BRAND.youtube} target="_blank" rel="noopener" style={{ marginTop: 20 }}>
        <Icon name="play" size={17} fill /> Ver canal no YouTube <Icon name="external" size={15} />
      </a>
    </div>
  );
}

// ── COMUNIDADE / TESTEMUNHOS ─────────────────────────────────
function FormularioTestemunho({ open, onClose }) {
  const store = useStore();
  const [f, setF] = useState({ name: '', city: '', text: '', anon: false });
  const [sent, setSent] = useState(false);
  const submit = () => {
    if (!f.text.trim()) return;
    store.actions.addTestimonial({ name: f.anon ? 'Anônimo' : (f.name || 'Anônimo'), city: f.anon ? '' : f.city, text: f.text.trim(), stars: 5 });
    setSent(true);
  };
  return (
    <Sheet open={open} onClose={() => { onClose(); setTimeout(() => { setSent(false); setF({ name: '', city: '', text: '', anon: false }); }, 200); }}>
      <div style={{ padding: '8px 22px 30px' }}>
        {sent ? (
          <div className="tc" style={{ padding: '20px 0' }}>
            <div style={{ width: 64, height: 64, borderRadius: 18, background: 'var(--accent-soft)', display: 'grid', placeItems: 'center', margin: '0 auto 16px', color: 'var(--accent)' }}><Icon name="heart" size={30} fill /></div>
            <h3 className="serif" style={{ fontSize: 26, fontWeight: 600 }}>Obrigado por compartilhar</h3>
            <p className="muted" style={{ marginTop: 8 }}>Seu testemunho pode ser exatamente a esperança que outro casal precisa hoje.</p>
            <button className="btn btn-gold btn-full" style={{ marginTop: 18 }} onClick={() => { onClose(); setTimeout(() => setSent(false), 200); }}>Fechar</button>
          </div>
        ) : (
          <>
            <h3 className="serif" style={{ fontSize: 26, fontWeight: 600, margin: '0 0 4px' }}>Enviar testemunho</h3>
            <p className="muted" style={{ fontSize: 14, margin: '0 0 18px' }}>Conte, com as suas palavras, o que mudou. Você pode enviar de forma anônima.</p>
            <label className="label">Seu nome</label>
            <input className="field" value={f.name} disabled={f.anon} onChange={e => setF({ ...f, name: e.target.value })} placeholder="Como quer ser chamado(a)" />
            <label className="label" style={{ marginTop: 14 }}>Cidade / UF</label>
            <input className="field" value={f.city} disabled={f.anon} onChange={e => setF({ ...f, city: e.target.value })} placeholder="Ex.: São Paulo, SP" />
            <div className="spread" style={{ marginTop: 14, marginBottom: 8 }}>
              <label className="label" style={{ margin: 0 }}>Seu testemunho</label>
              <span className="mono" style={{ fontSize: 11, color: f.text.length > 540 ? 'var(--accent)' : 'var(--faint)' }}>{f.text.length}/600</span>
            </div>
            <textarea className="field" maxLength={600} value={f.text} onChange={e => setF({ ...f, text: e.target.value })} placeholder="O que mudou no seu casamento ou na sua vida?" />
            <div className="row" role="checkbox" aria-checked={f.anon} aria-label="Enviar como anônimo" tabIndex={0} style={{ gap: 10, marginTop: 14, cursor: 'pointer', WebkitTapHighlightColor: 'transparent' }} onClick={() => setF({ ...f, anon: !f.anon })} onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setF({ ...f, anon: !f.anon }); } }}>
              <span aria-hidden="true" style={{ width: 22, height: 22, borderRadius: 7, border: '1.5px solid var(--line)', background: f.anon ? 'var(--accent)' : 'transparent', display: 'grid', placeItems: 'center', color: 'var(--on-accent)', flex: '0 0 22px' }}>{f.anon && <Icon name="check" size={14} />}</span>
              <span style={{ fontSize: 14 }}>Enviar como anônimo</span>
            </div>
            <div className="notice" style={{ marginTop: 16 }}>
              <Icon name="shield" size={18} className="ico" />
              <span>Em situações de violência, abuso ou risco, procure ajuda profissional, pastoral, jurídica ou de emergência.</span>
            </div>
            <button className="btn btn-gold btn-full btn-lg" style={{ marginTop: 18, opacity: f.text.trim() ? 1 : 0.45, transition: 'opacity .18s var(--ease)' }} disabled={!f.text.trim()} onClick={submit}>Enviar testemunho</button>
          </>
        )}
      </div>
    </Sheet>
  );
}

function TelaComunidade() {
  const store = useStore();
  const [filter, setFilter] = useState('todos');
  const [form, setForm] = useState(false);
  // Feed real do servidor (depoimentos aprovados) — graceful: se a API estiver
  // fora, fica só com os locais + estáticos.
  const [serverItens, setServerItens] = useState([]);
  React.useEffect(() => {
    apiCall('/api/comunidade').then((res) => {
      if (res && res.itens) setServerItens(res.itens.map((i) => ({ id: 'srv-' + i.id, name: i.nome, city: i.cidade, text: i.texto, stars: 5 })));
    });
  }, []);
  const all = [...store.state.testimonials, ...serverItens, ...TESTIMONIALS];
  const list = filter === 'libertacao' ? all.filter(t => t.libertacao) : all;
  return (
    <div className="col">
      <div style={{ paddingTop: 8 }}>
        <Eyebrow className="muted">Histórias de esperança</Eyebrow>
        <h1 style={{ fontSize: 'clamp(26px,6vw,34px)', fontWeight: 700, letterSpacing: '-0.02em', margin: '4px 0 0' }}>Comunidade</h1>
      </div>

      <button className="btn btn-gold btn-full" style={{ marginTop: 18 }} onClick={() => setForm(true)}><Icon name="plus" size={18} /> Enviar meu testemunho</button>

      <div className="row" style={{ gap: 8, marginTop: 16 }}>
        <button className={'pill' + (filter === 'todos' ? ' on' : '')} onClick={() => setFilter('todos')}>Todos</button>
        <button className={'pill' + (filter === 'libertacao' ? ' on' : '')} onClick={() => setFilter('libertacao')}><Icon name="shield" size={13} /> Libertação</button>
      </div>

      <div className="stack" style={{ marginTop: 16 }}>
        {list.map(t => (
          <div key={t.id} className="card">
            <div className="spread">
              <Stars n={t.stars || 5} />
              {t.libertacao && <span className="tag tag-plain"><Icon name="shield" size={11} /> libertação</span>}
            </div>
            <p style={{ margin: '12px 0 14px', fontSize: 16, lineHeight: 1.55 }}>“{t.text}”</p>
            <div className="row" style={{ gap: 10 }}>
              <div style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--accent-soft)', display: 'grid', placeItems: 'center', color: 'var(--accent)', fontWeight: 700, fontSize: 14 }}>{(t.name || 'A')[0]}</div>
              <div className="muted" style={{ fontSize: 13 }}>{t.name}{t.city ? ` · ${t.city}` : ''}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="notice" style={{ marginTop: 20 }}>
        <Icon name="shield" size={18} className="ico" />
        <span>{COMPLIANCE}</span>
      </div>

      <FormularioTestemunho open={form} onClose={() => setForm(false)} />
    </div>
  );
}

// ── PERFIL ───────────────────────────────────────────────────
function FolhaEditarNome({ open, onClose }) {
  const store = useStore();
  const [name, setName] = useState(store.state.name);
  return (
    <Sheet open={open} onClose={onClose}>
      <div style={{ padding: '8px 22px 30px' }}>
        <h3 className="serif" style={{ fontSize: 24, fontWeight: 600, margin: '0 0 16px' }}>Como podemos te chamar?</h3>
        <input className="field" autoFocus value={name} onChange={e => setName(e.target.value)} placeholder="Seu nome" onKeyDown={e => { if (e.key === 'Enter') { store.actions.setName(name.trim() || store.state.name); onClose(); } }} />
        <button className="btn btn-gold btn-full" style={{ marginTop: 16 }} onClick={() => { store.actions.setName(name.trim() || store.state.name); onClose(); }}>Salvar</button>
      </div>
    </Sheet>
  );
}

function FolhaCasal({ open, onClose }) {
  const store = useStore();
  const [pn, setPn] = useState(store.state.partnerName);
  return (
    <Sheet open={open} onClose={onClose}>
      <div style={{ padding: '8px 22px 30px' }}>
        <div style={{ width: 56, height: 56, borderRadius: 16, background: 'var(--accent-soft)', display: 'grid', placeItems: 'center', color: 'var(--accent)', margin: '0 auto 14px' }}><Icon name="rings" size={28} /></div>
        <h3 className="serif tc" style={{ fontSize: 26, fontWeight: 600, margin: '0 0 6px' }}>Modo casal</h3>
        <p className="muted tc" style={{ fontSize: 14, margin: '0 0 18px' }}>Caminhem juntos. Convide seu cônjuge para compartilhar o progresso e as orações.</p>
        <label className="label">Nome do seu cônjuge</label>
        <input className="field" autoFocus value={pn} onChange={e => setPn(e.target.value)} placeholder="Nome do(a) seu(sua) cônjuge" onKeyDown={e => { if (e.key === 'Enter') { store.actions.setPartnerName(pn.trim()); store.actions.setCoupleMode(!!pn.trim()); onClose(); } }} />
        <button className="btn btn-gold btn-full" style={{ marginTop: 16 }} onClick={() => { store.actions.setPartnerName(pn.trim()); store.actions.setCoupleMode(!!pn.trim()); onClose(); }}>
          <Icon name="rings" size={18} /> Vincular parceiro(a)
        </button>
        <button className="btn btn-ghost btn-full" style={{ marginTop: 10 }} onClick={() => { navigator.share ? navigator.share({ title: BRAND.name, text: 'Vamos caminhar juntos neste app.', url: location.href }).catch(()=>{}) : onClose(); }}>
          <Icon name="share" size={17} /> Enviar convite
        </button>
      </div>
    </Sheet>
  );
}

function CaixaEstatistica({ value, label, icon }) {
  return (
    <div className="card card-sm" style={{ textAlign: 'center', padding: '16px 8px' }}>
      <div className="row" style={{ justifyContent: 'center', gap: 5, color: 'var(--accent)' }}>
        {icon && <Icon name={icon} size={18} fill={icon === 'flame'} className={icon === 'flame' ? 'flame' : ''} />}
        <span style={{ fontSize: 26, fontWeight: 700, fontFamily: 'var(--mono)' }}>{value}</span>
      </div>
      <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{label}</div>
    </div>
  );
}

function TelaPerfil({ tw, setTweak }) {
  const store = useStore();
  const [editName, setEditName] = useState(false);
  const [couple, setCouple] = useState(false);
  const [pushBusy, setPushBusy] = useState(false);
  const [pushMsg, setPushMsg] = useState('');
  const totalDays = Object.values(store.state.completed).reduce((a, b) => a + b.length, 0);
  const activeJourneys = JOURNEYS.filter(j => store.journeyProgress(j.id) > 0).length;
  const owned = PRODUCTS.filter(p => store.isUnlocked(p.id));
  const favCount = store.state.favPrayers.length + store.state.favDevos.length;

  const salvarLembrete = (ativo, hora = store.state.reminderTime) => {
    store.actions.setReminderOn(ativo);
    apiCall('/api/lembrete', { hora, ativo });
  };
  const alternarPush = async () => {
    const ativar = !store.state.reminderOn;
    setPushBusy(true);
    setPushMsg(ativar ? 'Pedindo permissão do navegador...' : 'Lembrete desligado.');
    if (!ativar) {
      salvarLembrete(false);
      setPushBusy(false);
      return;
    }
    const r = await ativarPush();
    if (!r || !r.ok) {
      salvarLembrete(false);
      setPushMsg((r && r.motivo) || 'Não foi possível ativar notificações.');
      setPushBusy(false);
      return;
    }
    salvarLembrete(true);
    setPushMsg('Notificações ativadas. Envie um teste para confirmar.');
    setPushBusy(false);
  };
  const enviarTestePush = async () => {
    setPushBusy(true);
    setPushMsg('Preparando este dispositivo...');
    const r = await ativarPush();
    if (!r || !r.ok) {
      setPushMsg((r && r.motivo) || 'Não foi possível ativar notificações.');
      salvarLembrete(false);
      setPushBusy(false);
      return;
    }
    salvarLembrete(true);
    setPushMsg('Enviando teste...');
    const t = await testarPush();
    setPushMsg(t && t.ok ? 'Teste enviado. Confira a notificação do sistema.' : ((t && t.motivo) || 'Teste não entregue.'));
    setPushBusy(false);
  };

  return (
    <div className="col">
      <div className="glow-top" style={{ position: 'relative', paddingTop: 14, textAlign: 'center' }}>
        <div style={{ width: 84, height: 84, borderRadius: '50%', background: 'var(--accent-soft)', border: '1px solid var(--accent-line)', display: 'grid', placeItems: 'center', margin: '0 auto', color: 'var(--accent)', fontSize: 34, fontWeight: 700 }}>
          {(store.state.name || 'A')[0].toUpperCase()}
        </div>
        <div className="row" style={{ justifyContent: 'center', gap: 8, marginTop: 14 }}>
          <h1 style={{ fontSize: 24, fontWeight: 700, margin: 0 }}>{store.state.name || 'Bem-vindo'}</h1>
          <button className="iconbtn" style={{ width: 32, height: 32 }} onClick={() => setEditName(true)}><Icon name="pencil" size={16} /></button>
        </div>
        {store.state.coupleMode && store.state.partnerName && <div className="accent" style={{ fontSize: 13, marginTop: 2 }}><Icon name="rings" size={13} /> com {store.state.partnerName}</div>}
      </div>

      <div className="grid-3" style={{ marginTop: 22 }}>
        <CaixaEstatistica value={store.streak} label="dias seguidos" icon="flame" />
        <CaixaEstatistica value={totalDays} label="dias concluídos" icon="check" />
        <CaixaEstatistica value={activeJourneys} label="jornadas" icon="book" />
      </div>

      {/* modo casal */}
      {!store.state.coupleMode && (
        <div className="card card-accent card-hover card-tap" style={{ marginTop: 16, display: 'flex', gap: 14, alignItems: 'center' }} onClick={() => setCouple(true)}>
          <div style={{ width: 44, height: 44, borderRadius: 13, background: 'var(--accent-soft)', display: 'grid', placeItems: 'center', color: 'var(--accent)', flex: '0 0 44px' }}><Icon name="rings" size={24} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600 }}>Ativar modo casal</div>
            <div className="muted" style={{ fontSize: 13 }}>Caminhem juntos, lado a lado.</div>
          </div>
          <Icon name="chevron" size={20} color="var(--faint)" />
        </div>
      )}

      {/* favoritos & materiais */}
      <div className="sec-head" style={{ marginTop: 26 }}><Eyebrow className="muted">Seu caminho</Eyebrow></div>
      <div className="stack">
        <div className="lrow" onClick={() => nav('/orar')}>
          <div className="lrow-ico"><Icon name="heart" size={18} fill /></div>
          <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 14.5 }}>Favoritos</div><div className="muted" style={{ fontSize: 13 }}>{favCount} salvos</div></div>
          <Icon name="chevron" size={18} color="var(--faint)" />
        </div>
        <div className="lrow" onClick={() => nav('/biblioteca')}>
          <div className="lrow-ico"><Icon name="bookmark" size={18} /></div>
          <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 14.5 }}>Materiais desbloqueados</div><div className="muted" style={{ fontSize: 13 }}>{owned.length} {owned.length === 1 ? 'material' : 'materiais'}</div></div>
          <Icon name="chevron" size={18} color="var(--faint)" />
        </div>
        <div className="lrow" onClick={() => nav('/comunidade')}>
          <div className="lrow-ico"><Icon name="users" size={18} /></div>
          <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 14.5 }}>Comunidade</div><div className="muted" style={{ fontSize: 13 }}>Ler e enviar testemunhos</div></div>
          <Icon name="chevron" size={18} color="var(--faint)" />
        </div>
      </div>

      {/* configurações */}
      <div className="sec-head" style={{ marginTop: 26 }}><Eyebrow className="muted">Configurações</Eyebrow></div>
      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div className="spread" style={{ padding: '14px 16px', opacity: store.state.reminderOn ? 1 : 0.5, transition: 'opacity .18s var(--ease)' }}>
          <div className="row" style={{ gap: 12 }}><Icon name="bell" size={19} color="var(--accent)" /><div><div style={{ fontWeight: 600, fontSize: 14.5 }}>Lembrete diário</div><div className="muted" style={{ fontSize: 12.5 }}>{store.state.reminderOn ? `Devocional às ${store.state.reminderTime}` : 'Ative as notificações abaixo para receber'}</div></div></div>
          <input type="time" className="field" disabled={!store.state.reminderOn} style={{ width: 'auto', padding: '8px 10px', cursor: store.state.reminderOn ? 'pointer' : 'not-allowed' }} value={store.state.reminderTime} onChange={e => { store.actions.setReminder(e.target.value); if (store.state.reminderOn) apiCall('/api/lembrete', { hora: e.target.value, ativo: true }); }} />
        </div>
        <div className="rule rule-soft" />
        <LinhaAlternar icon={tw.theme === 'light' ? 'sun' : 'moon'} label="Tema" sub={tw.theme === 'light' ? 'Claro' : 'Escuro (santuário)'} on={tw.theme === 'light'} onToggle={() => setTweak('theme', tw.theme === 'light' ? 'dark' : 'light')} />
        <div className="rule rule-soft" />
        <LinhaAlternar icon="bell" label="Notificações" sub={pushMsg || (store.state.reminderOn ? 'Ativadas' : 'Desativadas')} on={store.state.reminderOn} onToggle={pushBusy ? undefined : alternarPush} />
        <div className="push-test">
          <button className="btn btn-soft btn-full" disabled={pushBusy} onClick={enviarTestePush}>
            <Icon name={pushBusy ? 'clock' : 'bell'} size={17} /> {pushBusy ? 'Aguarde...' : 'Enviar um lembrete agora'}
          </button>
          <p className="kicker" style={{ margin: '10px 0 0', lineHeight: 1.45 }}>iPhone: instale na tela inicial antes de permitir notificações.</p>
        </div>
      </div>

      <div className="card" style={{ marginTop: 14, padding: 0, overflow: 'hidden' }}>
        <a className="spread" href={BRAND.youtube} target="_blank" rel="noopener" style={{ padding: '14px 16px' }}>
          <div className="row" style={{ gap: 12 }}><Icon name="play" size={19} color="var(--accent)" fill /><span style={{ fontWeight: 600, fontSize: 14.5 }}>Canal no YouTube</span></div>
          <Icon name="external" size={17} color="var(--faint)" />
        </a>
        <div className="rule rule-soft" />
        <a className="spread" href={BRAND.whatsapp} target="_blank" rel="noopener" style={{ padding: '14px 16px' }}>
          <div className="row" style={{ gap: 12 }}><Icon name="whatsapp" size={19} color="var(--accent)" /><span style={{ fontWeight: 600, fontSize: 14.5 }}>Parcerias (WhatsApp)</span></div>
          <Icon name="external" size={17} color="var(--faint)" />
        </a>
        <div className="rule rule-soft" />
        <a className="spread" href={'mailto:' + BRAND.email} style={{ padding: '14px 16px' }}>
          <div className="row" style={{ gap: 12 }}><Icon name="message" size={19} color="var(--accent)" /><span style={{ fontWeight: 600, fontSize: 14.5 }}>Falar com a equipe</span></div>
          <Icon name="external" size={17} color="var(--faint)" />
        </a>
      </div>

      <button className="btn btn-ghost btn-full" style={{ marginTop: 16, color: 'var(--danger)', borderColor: 'transparent' }}
        onClick={() => { if (confirm('Reiniciar o app? Seu progresso local será apagado.')) { store.actions.resetAll(); nav('/onboarding'); } }}>
        Reiniciar progresso
      </button>

      <div className="tc" style={{ margin: '24px 0 6px' }}>
        <div className="kicker" style={{ lineHeight: 1.6 }}>{BRAND.copyright}<br />{BRAND.tagline}</div>
      </div>

      <FolhaEditarNome open={editName} onClose={() => setEditName(false)} />
      <FolhaCasal open={couple} onClose={() => setCouple(false)} />
    </div>
  );
}

function LinhaAlternar({ icon, label, sub, on, onToggle }) {
  return (
    <div className="spread" style={{ padding: '14px 16px', cursor: 'pointer' }} onClick={onToggle}>
      <div className="row" style={{ gap: 12 }}><Icon name={icon} size={19} color="var(--accent)" /><div><div style={{ fontWeight: 600, fontSize: 14.5 }}>{label}</div><div className="muted" style={{ fontSize: 12.5 }}>{sub}</div></div></div>
      <span style={{ width: 46, height: 27, borderRadius: 999, background: on ? 'var(--accent)' : 'var(--surface-2)', border: '1px solid var(--line)', position: 'relative', transition: 'background .18s', flex: '0 0 46px' }}>
        <span style={{ position: 'absolute', top: 2, left: on ? 21 : 2, width: 21, height: 21, borderRadius: '50%', background: on ? 'var(--on-accent)' : 'var(--muted)', transition: 'left .18s var(--ease)' }} />
      </span>
    </div>
  );
}

Object.assign(window, { TelaVideos, TelaComunidade, TelaPerfil, FormularioTestemunho });