// tela-inicio.jsx — Início + Hoje (leitor de devocional). Layout mistura + variantes.

function saudacao() {
  const h = new Date().getHours();
  if (h < 12) return 'Bom dia';
  if (h < 18) return 'Boa tarde';
  return 'Boa noite';
}
function rotuloData() {
  const d = new Date();
  const dias = ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'];
  const mes = ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'];
  return `${dias[d.getDay()]} · ${d.getDate()} ${mes[d.getMonth()]}`;
}
function indiceDevoHoje(store) {
  return Math.min(store.journeyProgress('restauracao'), DEVOTIONALS.length - 1);
}

function ChipSequencia({ streak }) {
  return (
    <div className="chip-streak">
      <Icon name="flame" size={15} className="flame" fill />
      <span>{streak}</span>
    </div>
  );
}

function PontosSemana({ store }) {
  const labels = ['S', 'T', 'Q', 'Q', 'S', 'S', 'D'];
  const now = new Date();
  const monday = new Date(now); monday.setDate(now.getDate() - ((now.getDay() + 6) % 7));
  return (
    <div className="spread" style={{ marginTop: 4 }}>
      {labels.map((l, i) => {
        const d = new Date(monday); d.setDate(monday.getDate() + i);
        const ds = d.toISOString().slice(0, 10);
        const done = store.state.doneDates.includes(ds);
        const isToday = ds === store.todayStr();
        return (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 26, height: 26, borderRadius: '50%',
              background: done ? 'var(--accent)' : 'transparent',
              border: done ? 'none' : `1.4px solid ${isToday ? 'var(--accent-line)' : 'var(--line)'}`,
              display: 'grid', placeItems: 'center' }}>
              {done && <Icon name="check" size={15} color="var(--on-accent)" />}
            </div>
            <span className="mono" style={{ fontSize: 11, color: 'var(--faint)' }}>{l}</span>
          </div>
        );
      })}
    </div>
  );
}

// Modo Casal: selo de aliança com os dois nomes (sóbrio). O dado já está persistido
// (coupleMode/partnerName em estado.jsx) — diferencial categórico: NENHUM app devocional é a dois.
function CasalBadge({ store }) {
  const s = store.state;
  if (!s.coupleMode || !s.partnerName) return null;
  return (
    <div className="casal-badge">
      <svg viewBox="0 0 46 26" width="42" height="24" aria-hidden="true">
        <g fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round">
          <circle cx="18" cy="13" r="9" /><circle cx="28" cy="13" r="9" />
        </g>
      </svg>
      <span className="casal-nomes">{s.name || 'Você'} <span className="amp">&</span> {s.partnerName}</span>
    </div>
  );
}

function HeroInicio({ store, tw, devo }) {
  const layout = tw.homeLayout || 'mistura';
  const name = store.state.name || 'amado';
  const casal = store.state.coupleMode && store.state.partnerName;

  if (layout === 'editorial') {
    return (
      <div className="glow-top" style={{ position: 'relative', textAlign: 'center', padding: '26px 8px 8px' }}>
        <Eyebrow>{rotuloData()} · {devo.day}</Eyebrow>
        <p className="verse" style={{ fontSize: 'clamp(28px,7vw,42px)', margin: '18px 0 0', color: 'var(--text)' }}>
          “{devo.verse.text}”
        </p>
        <div className="mono" style={{ fontSize: 12, color: 'var(--faint)', marginTop: 14 }}>{devo.verse.ref}</div>
        <div className="rule" style={{ width: 36, margin: '24px auto' }} />
        <p className="muted" style={{ maxWidth: 360, margin: '0 auto 20px', lineHeight: 1.55 }}>{devo.intro}</p>
        <button className="btn btn-gold btn-lg" onClick={() => nav('/hoje')}>
          Abrir o devocional <Icon name="arrow" size={18} />
        </button>
        <div className="row" style={{ justifyContent: 'center', gap: 8, marginTop: 22 }}>
          <ChipSequencia streak={store.streak} />
          <span className="muted" style={{ fontSize: 13 }}>{store.streak} dias seguidos</span>
        </div>
      </div>
    );
  }

  if (layout === 'streak') {
    return (
      <div className="glow-top" style={{ position: 'relative', textAlign: 'center', padding: '20px 8px 4px' }}>
        <Ring pct={Math.min(store.streak / 7 * 100, 100)} size={104} sw={6}>
          <Icon name="flame" size={26} color="var(--accent)" className="flame" fill />
          <span className="mono" style={{ fontSize: 22, fontWeight: 500, marginTop: 2 }}>{store.streak}</span>
        </Ring>
        <div style={{ fontWeight: 700, fontSize: 18, marginTop: 12 }}>{store.streak} dias seguidos</div>
        <div className="muted" style={{ fontSize: 14, marginTop: 2 }}>Continue firme, {name}</div>
        <div style={{ marginTop: 18, paddingTop: 18, borderTop: '1px solid var(--line)' }}>
          <Eyebrow>Hoje · {devo.day}</Eyebrow>
          <p className="verse" style={{ fontSize: 'clamp(22px,5.4vw,28px)', margin: '10px 0 0', color: 'var(--text)' }}>“{devo.verse.text}”</p>
          <div className="mono" style={{ fontSize: 12, color: 'var(--faint)', marginTop: 8 }}>{devo.verse.ref}</div>
          <button className="btn btn-gold btn-full btn-lg" style={{ marginTop: 18 }} onClick={() => nav('/hoje')}>
            {store.doneToday ? 'Reler o devocional de hoje' : 'Concluir o dia de hoje'}
          </button>
        </div>
        <PontosSemana store={store} />
      </div>
    );
  }

  // mistura (default) — hero cinematográfico com a foto do casal (atmosfera > densidade)
  return (
    <div style={{ position: 'relative' }}>
      <div className="hero-cine rise-in">
        <img className="hero-cine-img" src="assets/hero-umbrella.webp" alt="" aria-hidden="true" />
        <div className="hero-cine-veil" />
        <div className="hero-cine-body">
          <div className="spread" style={{ alignItems: 'flex-start' }}>
            <CasalBadge store={store} />
            <button onClick={() => nav('/perfil')} style={{ background: 'none', border: 0, padding: 0 }}>
              <ChipSequencia streak={store.streak} />
            </button>
          </div>
          <div style={{ flex: 1, minHeight: 36 }} />
          <Eyebrow className="muted">{rotuloData()}</Eyebrow>
          <h1 className="serif hero-cine-title">{saudacao()},<br /><span style={{ color: 'var(--accent)' }}>{name}</span></h1>
          <p className="hero-cine-sub">
            {casal
              ? (store.doneToday ? 'A caminhada de vocês continua firme. Que bom te ver de volta.' : `Reserve 3 minutos hoje — você e ${store.state.partnerName}, pelo casamento de vocês.`)
              : (store.doneToday ? 'Você já cuidou do seu casamento hoje. Que bom te ver de volta.' : 'Reserve 3 minutos hoje pelo seu casamento.')}
          </p>
        </div>
      </div>

      {/* Hoje hero card — tem <button> filho (CTA): usa role=button, não <button> (button-em-button é inválido) */}
      <div className="card card-accent card-hover card-tap rise-in" style={{ marginTop: 18 }}
        role="button" tabIndex={0} onClick={() => nav('/hoje')}
        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); nav('/hoje'); } }}>
        <div className="spread">
          <Eyebrow>Devocional de hoje · {devo.day}</Eyebrow>
          {store.doneToday
            ? <span className="tag"><Icon name="check" size={12} /> concluído</span>
            : <span className="tag tag-plain"><Icon name="clock" size={12} /> 3 min</span>}
        </div>
        <div className="serif" style={{ fontSize: 'clamp(22px,5.6vw,28px)', fontWeight: 600, lineHeight: 1.12, margin: '14px 0 0', color: 'var(--text)' }}>{devo.title}</div>
        <p className="verse" style={{ fontSize: 'clamp(17px,4.2vw,20px)', margin: '10px 0 0', color: 'var(--muted-2)' }}>
          “{devo.verse.text}”
        </p>
        <div className="mono" style={{ fontSize: 12, color: 'var(--accent)', marginTop: 8, letterSpacing: '0.06em' }}>{devo.verse.ref}</div>
        <p className="muted" style={{ fontSize: 14, margin: '12px 0 0' }}>{devo.intro}</p>
        <button className="btn btn-gold btn-full" style={{ marginTop: 16 }}>
          {store.doneToday ? 'Reler o devocional' : 'Ler o devocional'}
        </button>
      </div>
    </div>
  );
}

// coach-mark de primeiro uso: ensina a navegação (tab bar + Voltar). Aparece 1x (flag localStorage).
function CoachNav() {
  const [show, setShow] = useState(() => { try { return !localStorage.getItem('ocl_coach_nav'); } catch (e) { return false; } });
  if (!show) return null;
  const dismiss = () => { try { localStorage.setItem('ocl_coach_nav', '1'); } catch (e) {} setShow(false); };
  return (
    <div className="coach-nav mob-only" role="status" aria-live="polite">
      <div className="coach-nav-txt">Use a <strong>barra de baixo</strong> para navegar entre as seções. Para voltar, toque em <strong>‹ Voltar</strong> no topo.</div>
      <button className="btn btn-gold btn-sm" onClick={dismiss}>Entendi</button>
    </div>
  );
}

function TelaInicio({ tw }) {
  const store = useStore();
  const devo = DEVOTIONALS[indiceDevoHoje(store)];
  const activeJourney = JOURNEYS.find(j => store.journeyProgress(j.id) > 0 && store.journeyProgress(j.id) < j.days) || JOURNEYS[0];
  const prog = store.journeyProgress(activeJourney.id);
  const nextDay = Math.min(prog + 1, activeJourney.days);
  const promo = PRODUCTS[0];

  return (
    <div className="col">
      <HeroInicio store={store} tw={tw} devo={devo} />

      {/* continuar jornada */}
      <button type="button" className="card card-hover card-tap rise-in-2" style={{ marginTop: 14, display: 'flex', gap: 14, alignItems: 'center' }}
        onClick={() => nav('/jornada/' + activeJourney.id)}>
        <Ring pct={prog / activeJourney.days * 100} size={52} sw={5}>
          <span className="mono" style={{ fontSize: 12, color: 'var(--accent)' }}>{prog}/{activeJourney.days}</span>
        </Ring>
        <div style={{ flex: 1, minWidth: 0 }}>
          <Eyebrow className="muted">{prog ? 'Continuar jornada' : 'Comece uma jornada'}</Eyebrow>
          <div style={{ fontWeight: 600, marginTop: 2 }}>{activeJourney.title}</div>
          <div className="muted" style={{ fontSize: 13 }}>Dia {nextDay} · {activeJourney.chapters[nextDay - 1].title}</div>
          {prog > 0 && prog < activeJourney.days &&
            <div className="mono" style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 5, letterSpacing: '0.04em' }}>
              Faltam {activeJourney.days - prog} {activeJourney.days - prog === 1 ? 'dia' : 'dias'} para concluir
            </div>}
        </div>
        <Icon name="chevron" size={20} color="var(--faint)" />
      </button>

      {/* acessos rápidos */}
      <div className="sec-head" style={{ marginTop: 26 }}>
        <Eyebrow className="muted">Acessos rápidos</Eyebrow>
      </div>
      <div className="grid-3 rise-in-3">
        <button type="button" className="qa" onClick={() => nav('/orar')}><span className="ic"><Icon name="hands" size={22} /></span><span>Orações</span></button>
        <button type="button" className="qa" onClick={() => nav('/orar/roteiros')}><span className="ic"><Icon name="message" size={22} /></span><span>Roteiros</span></button>
        <button type="button" className="qa" onClick={() => nav('/videos')}><span className="ic"><Icon name="play" size={22} /></span><span>Vídeos</span></button>
      </div>

      {/* destaque loja */}
      {(() => {
        const parseBR = (s) => parseFloat(String(s||'').replace(/[^0-9,]/g,'').replace(',','.')) || 0;
        const off = promo.priceOld ? Math.round((1 - parseBR(promo.price) / parseBR(promo.priceOld)) * 100) : 0;
        return (
          <button type="button" className="card card-hover card-tap rise-in-3" style={{ marginTop: 14, display: 'flex', gap: 14, position: 'relative', overflow: 'hidden', textAlign: 'left', width: '100%' }}
            onClick={() => nav('/produto/' + promo.id)}>
            {off > 0 && <span className="tag" style={{ position: 'absolute', top: 12, right: 12, background: 'var(--accent)', color: 'var(--on-accent)', borderColor: 'var(--accent)' }}>-{off}%</span>}
            <Picture src={promo.cover} label="capa" w={62} h={84} r={8} style={{ flex: '0 0 62px' }} />
            <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
              <Eyebrow className="muted">Mais escolhido</Eyebrow>
              <div style={{ fontWeight: 600, marginTop: 2 }}>{promo.title}</div>
              <div className="muted" style={{ fontSize: 12.5, marginTop: 1 }}>{promo.sub}</div>
              <div style={{ fontSize: 13, marginTop: 6 }}>
                <span className="price-old">{promo.priceOld}</span> <span className="price-now" style={{ fontSize: '1.15em' }}>{promo.price}</span>
              </div>
              <span className="btn btn-gold btn-sm" style={{ marginTop: 'auto', alignSelf: 'flex-start' }}>Ver oferta <Icon name="arrow" size={15} /></span>
            </div>
          </button>
        );
      })()}

      {/* prova social — discreta, não compete com o foco (devocional) */}
      <div style={{ margin: '34px 0 8px', textAlign: 'center', padding: '0 12px' }}>
        <Stars n={5} size={14} />
        <p className="muted" style={{ fontSize: 14, marginTop: 12, maxWidth: 332, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.6 }}>
          <strong style={{ color: 'var(--cream)', fontWeight: 600 }}>{BRAND.reach.vidas} vidas impactadas.</strong> Junte-se a {BRAND.reach.seguidores} casais que escolheram lutar pelo amor com direção bíblica.
        </p>
      </div>
    </div>
  );
}

// ── HOJE / devocional reader ─────────────────────────────────
function TelaHoje() {
  const store = useStore();
  const idx = indiceDevoHoje(store);
  const devo = DEVOTIONALS[idx];
  const isFav = store.state.favDevos.includes(devo.id);
  const [justDone, setJustDone] = useState(false);

  const conclude = () => {
    store.actions.completeDay('restauracao', idx + 1);
    setJustDone(true);
    try { if (navigator.vibrate) navigator.vibrate([12, 30, 12]); } catch (e) {} // haptic sóbrio
  };

  return (
    <div className="col" style={{ maxWidth: 680 }}>
      <div className="glow-top" style={{ position: 'relative', paddingTop: 8 }}>
        <div className="spread">
          <Eyebrow>{rotuloData()} · {devo.day}</Eyebrow>
          <FavBtn on={isFav} onToggle={() => store.actions.toggleFavDevo(devo.id)} />
        </div>
        <h1 className="serif" style={{ fontSize: 'clamp(30px,7vw,46px)', lineHeight: 1.08, margin: '8px 0 0', fontWeight: 600 }}>
          {devo.title}
        </h1>
      </div>

      <div className="card card-accent" style={{ marginTop: 22, textAlign: 'center', padding: '26px 22px' }}>
        <Icon name="quote" size={22} color="var(--accent)" style={{ margin: '0 auto 10px' }} />
        <p className="verse" style={{ fontSize: 'clamp(22px,5.6vw,30px)', margin: 0, color: 'var(--text)' }}>“{devo.verse.text}”</p>
        <div className="mono" style={{ fontSize: 12, color: 'var(--accent)', marginTop: 12, letterSpacing: '0.08em' }}>{devo.verse.ref}</div>
      </div>

      <div className="reader" style={{ marginTop: 26 }}>
        <p style={{ fontSize: 'calc(18px * var(--tsize))', color: 'var(--text)' }}>{devo.intro}</p>
        <h4>Reflexão</h4>
        {devo.body.map((p, i) => <p key={i}>{p}</p>)}
        <h4>Oração do dia</h4>
        <p className="verse" style={{ fontStyle: 'italic', color: 'var(--muted-2)', fontSize: 'calc(19px * var(--tsize))', lineHeight: 1.5 }}>{devo.oracao}</p>
        <h4>Aplique hoje</h4>
        <div className="card" style={{ background: 'var(--accent-soft)', borderColor: 'var(--accent-line)' }}>
          <div className="row" style={{ alignItems: 'flex-start', gap: 11 }}>
            <Icon name="check" size={20} color="var(--accent)" style={{ marginTop: 2 }} />
            <span style={{ color: 'var(--text)', fontWeight: 500 }}>{devo.atitude}</span>
          </div>
        </div>
      </div>

      {store.doneToday || justDone ? (
        <div className="card selo-card" style={{ marginTop: 24, textAlign: 'center', borderColor: 'var(--accent-line)' }}>
          <div className="selo-alianca" aria-hidden="true"><Icon name="check" size={26} color="var(--accent)" /></div>
          <div style={{ fontWeight: 700, marginTop: 12 }}>Dia concluído</div>
          <div className="muted" style={{ fontSize: 14, marginTop: 4 }}>
            {store.streak} {store.streak === 1 ? 'dia' : 'dias'} de cuidado com o seu casamento. Volte amanhã.
          </div>
          <button className="btn btn-ghost" style={{ marginTop: 14 }} onClick={() => nav('/jornada/restauracao')}>Continuar na jornada</button>
        </div>
      ) : (
        <button className="btn btn-gold btn-full btn-lg" style={{ marginTop: 28 }} onClick={conclude}>
          Concluir o dia de hoje
        </button>
      )}

      <div className="rule rule-soft" style={{ margin: '30px 0 16px' }} />
      <Eyebrow className="muted">Devocionais anteriores</Eyebrow>
      <div className="stack" style={{ marginTop: 12 }}>
        {DEVOTIONALS.slice(0, idx).reverse().map((d) => (
          <button key={d.id} type="button" className="lrow" onClick={() => nav('/jornada/restauracao')}>
            <div className="lrow-ico"><Icon name="check" size={18} /></div>
            <div style={{ flex: 1, textAlign: 'left' }}>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{d.title}</div>
              <div className="muted" style={{ fontSize: 12.5 }}>{d.verse.ref}</div>
            </div>
            <Icon name="chevron" size={18} color="var(--faint)" />
          </button>
        ))}
        {idx === 0 && <div className="muted" style={{ fontSize: 14 }}>Seu histórico aparece aqui conforme você avança.</div>}
      </div>
    </div>
  );
}

Object.assign(window, { TelaInicio, TelaHoje, saudacao, rotuloData });