// tela-jornadas.jsx — Jornadas: lista + detalhe + dia + gate sensível.

function capaCss(kind) {
  if (kind === 'liberdade') return {
    background: 'radial-gradient(120% 80% at 75% 8%, rgba(208,138,72,0.22), transparent 60%), linear-gradient(150deg,#0B0906,#120C08 60%,#1a0f08)',
  };
  if (kind === 'oracoes') return {
    background: 'radial-gradient(120% 80% at 25% 10%, rgba(58,90,134,0.28), transparent 60%), linear-gradient(150deg,#0A0E16,#0D1119 60%,#0a0d13)',
  };
  return { background: 'var(--bg-2)' };
}

function CapaJornada({ journey, h, r = 16, label, className = '', children }) {
  // Prefere a FOTO (hero) à capa do ebook: a capa tem texto embutido que corta no crop largo.
  const _capa = journey.hero || journey.cover;
  if (_capa) return <Picture src={_capa} label={label || journey.title} h={h} r={r} className={className}>{children}</Picture>;
  return (
    <div className={'imgph ' + className} style={{ height: h, borderRadius: r, position: 'relative', ...capaCss(journey.coverCss) }}>
      <div style={{ position: 'absolute', inset: 0, padding: 16, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: journey.accent, textTransform: 'uppercase' }}>O Casal Legendário</div>
        <div className="serif" style={{ fontSize: 'clamp(22px,5vw,30px)', color: 'var(--text)', marginTop: 6, lineHeight: 1.05, fontWeight: 600 }}>{journey.title}</div>
      </div>
      {children}
    </div>
  );
}

function proximoDiaJornada(store, journey) {
  const prog = store.journeyProgress(journey.id);
  return Math.min(prog + 1, journey.days);
}

function JornadaProgress({ store, journey, compact = false }) {
  const prog = store.journeyProgress(journey.id);
  const pct = Math.round(prog / journey.days * 100);
  return (
    <div className={compact ? 'journey-progress compact' : 'journey-progress'}>
      <div className="bar"><i style={{ width: pct + '%' }} /></div>
      <div className="journey-progress-meta">
        <span className="mono accent">{prog ? pct + '%' : 'novo começo'}</span>
        <span className="mono muted">{prog ? `${prog}/${journey.days} dias` : `${journey.free} ${journey.free === 1 ? 'dia' : 'dias'} grátis`}</span>
      </div>
    </div>
  );
}

function JornadaCardCine({ journey, store, index }) {
  const prog = store.journeyProgress(journey.id);
  const next = proximoDiaJornada(store, journey);
  const status = prog >= journey.days ? 'Concluída' : prog ? `Dia ${next} espera por você` : 'Comece pela introdução';
  return (
    <button type="button" className="journey-card-cine card-tap" style={{ '--j-accent': journey.accent, '--i': index }}
      onClick={() => nav('/jornada/' + journey.id)}>
      <div className="journey-card-media">
        <CapaJornada journey={journey} h="100%" r={0} label={journey.title} />
        <div className="journey-card-scrim" />
        <span className="journey-card-index mono">{String(index + 1).padStart(2, '0')}</span>
      </div>
      <div className="journey-card-body">
        <div className="journey-kicker-row">
          <span className="tag" style={{ color: journey.accent }}>{journey.category}</span>
          {journey.sensitive && <span className="tag tag-plain"><Icon name="shield" size={11} /> sensível</span>}
        </div>
        <h2 className="serif journey-card-title">{journey.title}</h2>
        <div className="journey-card-sub">{journey.subtitle}</div>
        <p>{journey.blurb}</p>
        <JornadaProgress store={store} journey={journey} compact />
        <div className="journey-card-foot">
          <span>{status}</span>
          <Icon name="arrow" size={17} />
        </div>
      </div>
    </button>
  );
}

function TelaJornadas() {
  const store = useStore();
  const spotlight = JOURNEYS.find(j => {
    const p = store.journeyProgress(j.id);
    return p > 0 && p < j.days;
  }) || JOURNEYS[0];
  const spotProg = store.journeyProgress(spotlight.id);
  const spotNext = proximoDiaJornada(store, spotlight);
  return (
    <div className="col col-wide jornadas-page">
      <section className="journeys-stage rise-in">
        <CapaJornada journey={spotlight} h="100%" r={0} label={spotlight.title} className="journeys-stage-media" />
        <div className="journeys-stage-veil" />
        <div className="journeys-stage-body">
          <div>
            <Eyebrow className="muted">Jornadas guiadas</Eyebrow>
            <h1 className="serif journeys-stage-title">Escolha o caminho de hoje.</h1>
            <p>Três percursos diários para transformar crise, rotina fria e ciclos secretos em passos concretos de restauração.</p>
          </div>
          <div className="journeys-stage-panel">
            <span className="tag" style={{ color: spotlight.accent }}>{spotlight.category} · {spotlight.days} dias</span>
            <h2 className="serif">{spotlight.title}</h2>
            <p>{spotProg ? `Continue no dia ${spotNext}.` : `Comece com ${spotlight.free} ${spotlight.free === 1 ? 'dia aberto' : 'dias abertos'}.`}</p>
            <JornadaProgress store={store} journey={spotlight} />
            <button className="btn btn-gold btn-full" onClick={() => nav('/jornada/' + spotlight.id)}>
              {spotProg ? 'Continuar jornada' : 'Abrir jornada'} <Icon name="arrow" size={17} />
            </button>
          </div>
        </div>
      </section>

      <div className="journey-section-head">
        <Eyebrow className="muted">Percursos disponíveis</Eyebrow>
        <span className="mono muted">{JOURNEYS.length} jornadas</span>
      </div>

      <div className="journey-cine-list">
        {JOURNEYS.map((j, i) => <JornadaCardCine key={j.id} journey={j} store={store} index={i} />)}
      </div>
    </div>
  );
}

function PortaoSensivel({ journey, onEnter }) {
  return (
    <div className="col center-narrow" style={{ paddingTop: 30, textAlign: 'center' }}>
      <div style={{ width: 64, height: 64, borderRadius: 18, background: 'var(--surface)', border: '1px solid var(--line)', display: 'grid', placeItems: 'center', margin: '0 auto 18px', color: 'var(--copper)' }}>
        <Icon name="shield" size={30} />
      </div>
      <Eyebrow className="muted">Conteúdo sensível</Eyebrow>
      <h1 className="serif" style={{ fontSize: 30, fontWeight: 600, margin: '8px 0 12px' }}>{journey.title}</h1>
      <p className="muted" style={{ fontSize: 15, lineHeight: 1.6 }}>{journey.sensitiveNote}</p>
      <div className="notice" style={{ marginTop: 20, textAlign: 'left' }}>
        <Icon name="shield" size={20} className="ico" />
        <span>{COMPLIANCE}</span>
      </div>
      <button className="btn btn-gold btn-full btn-lg" style={{ marginTop: 22 }} onClick={onEnter}>Entendi, quero continuar</button>
      <button className="btn btn-ghost btn-full" style={{ marginTop: 10 }} onClick={() => back()}>Voltar</button>
    </div>
  );
}

function TelaDetalheJornada({ id }) {
  const store = useStore();
  const journey = JOURNEYS.find(j => j.id === id);
  if (!journey) return <div className="col" style={{ paddingTop: 40 }}>Jornada não encontrada.</div>;

  if (journey.sensitive && !store.isSensitiveOk(journey.id)) {
    return <PortaoSensivel journey={journey} onEnter={() => store.actions.ackSensitive(journey.id)} />;
  }

  const prog = store.journeyProgress(journey.id);
  const unlocked = store.isUnlocked(journey.product);
  const product = PRODUCTS.find(p => p.id === journey.product);

  return (
    <div className="col col-wide jornada-detail-page" style={{ paddingTop: 0 }}>
      <section className="journey-detail-stage">
        <CapaJornada journey={journey} h="100%" r={0} label={journey.title} className="journey-detail-media" />
        <div className="journey-detail-veil" />
        <div className="journey-detail-body">
          <div className="journey-detail-copy">
            <span className="tag" style={{ color: journey.accent, background: 'rgba(0,0,0,0.28)' }}>{journey.category} · {journey.days} dias</span>
            <h1 className="serif">{journey.title}</h1>
            <p>{journey.subtitle}</p>
          </div>
          <div className="journey-detail-panel">
            <p>{journey.blurb}</p>
            <JornadaProgress store={store} journey={journey} />
            {prog < journey.days && (
              <button className="btn btn-gold btn-full" onClick={() => nav(`/jornada/${id}/dia/${Math.max(1, prog + 1)}`)}>
                {prog ? `Continuar no dia ${prog + 1}` : 'Começar o dia 1'} <Icon name="arrow" size={17} />
              </button>
            )}
          </div>
        </div>
      </section>

      {prog > 0 && (
        <div className="journey-status-strip">
          <Ring pct={prog / journey.days * 100} size={48} sw={5}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>{prog}/{journey.days}</span>
          </Ring>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600 }}>{prog >= journey.days ? 'Jornada concluída' : `Você está no dia ${prog + 1}`}</div>
            <div className="jpips" style={{ marginTop: 7 }}>
              {Array.from({ length: Math.min(journey.days, 14) }).map((_, k) => {
                const dayN = journey.days > 14 ? Math.round((k + 1) * journey.days / 14) : k + 1;
                return <span key={k} className={'jpip' + (dayN <= prog ? ' on' : '')} />;
              })}
              {journey.days > 14 && <span className="mono muted" style={{ fontSize: 11, marginLeft: 4 }}>{Math.round(prog / journey.days * 100)}%</span>}
            </div>
          </div>
          {prog < journey.days && <button className="btn btn-gold btn-sm" onClick={() => nav(`/jornada/${id}/dia/${prog + 1}`)}>Continuar</button>}
        </div>
      )}

      <div className="sec-head" style={{ marginTop: 26 }}>
        <Eyebrow className="muted">Os {journey.days} {journey.days > 7 ? 'passos' : 'dias'}</Eyebrow>
        {!unlocked
          ? <span className="mono muted" style={{ fontSize: 11 }}>{journey.free} grátis</span>
          : prog > 0 && <span className="mono accent" style={{ fontSize: 11 }}>{prog} de {journey.days} {prog === 1 ? 'concluído' : 'concluídos'}</span>}
      </div>

      <div className="stack">
        {journey.chapters.map((c) => {
          const done = store.isDayDone(journey.id, c.n);
          const locked = !unlocked && c.n > journey.free;
          const current = !locked && !done && c.n === prog + 1;
          return (
            <div key={c.n} className={'lrow' + (current ? ' lrow--now' : '')} style={locked ? { opacity: 0.66 } : null}
              onClick={() => locked ? nav('/produto/' + journey.product) : nav(`/jornada/${id}/dia/${c.n}`)}>
              <div className="lrow-ico" style={done ? { background: 'var(--accent)', color: 'var(--on-accent)' } : null}>
                {done ? <Icon name="check" size={18} /> : locked ? <Icon name="lock" size={17} /> : <span className="mono" style={{ fontSize: 14, fontWeight: 500 }}>{String(c.n).padStart(2, '0')}</span>}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 600, fontSize: 14.5 }}>{c.title}</div>
                <div className="muted" style={{ fontSize: 13, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.summary}</div>
              </div>
              <Icon name={locked ? 'lock' : 'chevron'} size={18} color="var(--faint)" />
            </div>
          );
        })}
      </div>

      {!unlocked && product && (
        <div className="card card-accent" style={{ marginTop: 22 }}>
          <Eyebrow>Desbloqueie a jornada completa</Eyebrow>
          <p className="muted" style={{ fontSize: 14, margin: '8px 0 14px' }}>
            A introdução é gratuita. A versão completa vem com o eBook <strong style={{ color: 'var(--text)' }}>{product.title}</strong>.
          </p>
          <div className="spread">
            <div style={{ fontSize: 18 }}>
              {product.priceOld && <span className="price-old">{product.priceOld}</span>} <span className="price-now" style={{ fontSize: 22 }}>{product.price}</span>
            </div>
            <button className="btn btn-gold" onClick={() => nav('/produto/' + product.id)}>Ver oferta</button>
          </div>
        </div>
      )}
    </div>
  );
}

function TelaDia({ id, n }) {
  const store = useStore();
  const journey = JOURNEYS.find(j => j.id === id);
  if (!journey) return <div className="col" style={{ paddingTop: 40 }}>Não encontrado.</div>;
  const num = parseInt(n, 10);
  const c = journey.chapters[num - 1];
  if (!c) return <div className="col" style={{ paddingTop: 40 }}>Dia não encontrado.</div>;

  const unlocked = store.isUnlocked(journey.product);
  const locked = !unlocked && num > journey.free;
  const product = PRODUCTS.find(p => p.id === journey.product);
  const done = store.isDayDone(journey.id, num);
  const [justDone, setJustDone] = useState(false);
  const hasNext = num < journey.days;

  if (locked) {
    return (
      <div className="col center-narrow" style={{ paddingTop: 40, textAlign: 'center' }}>
        <div style={{ width: 60, height: 60, borderRadius: 16, background: 'var(--surface)', border: '1px solid var(--line)', display: 'grid', placeItems: 'center', margin: '0 auto 16px', color: 'var(--accent)' }}><Icon name="lock" size={26} /></div>
        <h2 className="serif" style={{ fontSize: 26, fontWeight: 600 }}>Dia {String(num).padStart(2, '0')} é parte da jornada completa</h2>
        <p className="muted" style={{ marginTop: 8 }}>Desbloqueie com o eBook {product.title} e siga dia a dia dentro do app.</p>
        <button className="btn btn-gold btn-lg" style={{ marginTop: 18 }} onClick={() => nav('/produto/' + product.id)}>Ver oferta · {product.price}</button>
      </div>
    );
  }

  const conclude = () => { store.actions.completeDay(journey.id, num); setJustDone(true); };

  return (
    <div className="col" style={{ maxWidth: 680, paddingTop: 4 }}>
      <div className="row" style={{ gap: 10 }}>
        <span className="tag">{journey.title}</span>
        <span className="mono muted" style={{ fontSize: 12 }}>Dia {String(num).padStart(2, '0')} de {journey.days}</span>
      </div>
      <h1 className="serif" style={{ fontSize: 'clamp(30px,7vw,44px)', lineHeight: 1.06, margin: '12px 0 0', fontWeight: 600 }}>{c.title}</h1>

      {c.verse && (
        <div className="card card-accent" style={{ marginTop: 22, textAlign: 'center', padding: '24px 22px' }}>
          <p className="verse" style={{ fontSize: 'clamp(21px,5.2vw,28px)', margin: 0, color: 'var(--text)' }}>“{c.verse.text}”</p>
          <div className="mono accent" style={{ fontSize: 12, marginTop: 12, letterSpacing: '0.08em' }}>{c.verse.ref}</div>
        </div>
      )}

      <div className="reader" style={{ marginTop: 26 }}>
        <p style={{ fontSize: 'calc(18px * var(--tsize))', color: 'var(--text)' }}>{c.summary}</p>
        <h4>Reflexão</h4>
        {c.reflexao.map((p, i) => <p key={i}>{p}</p>)}
        {c.oracao && (<><h4>Oração</h4>
          <p className="verse" style={{ fontStyle: 'italic', color: 'var(--muted-2)', fontSize: 'calc(19px * var(--tsize))', lineHeight: 1.5 }}>{c.oracao}</p></>)}
        <h4>Exercício prático</h4>
        <div className="card" style={{ borderLeft: '2px solid 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 }}>{c.exercicio}</span>
          </div>
        </div>
      </div>

      {journey.sensitive && (
        <div className="notice" style={{ marginTop: 22 }}>
          <Icon name="shield" size={18} className="ico" />
          <span>{COMPLIANCE}</span>
        </div>
      )}

      {done || justDone ? (
        <div className="card" style={{ marginTop: 24, textAlign: 'center', borderColor: 'var(--accent-line)' }}>
          <Icon name="check" size={26} color="var(--accent)" style={{ margin: '0 auto 8px' }} />
          <div style={{ fontWeight: 700 }}>Dia concluído</div>
          {hasNext
            ? <button className="btn btn-gold" style={{ marginTop: 14 }} onClick={() => nav(`/jornada/${id}/dia/${num + 1}`)}>Ir para o dia {num + 1} <Icon name="arrow" size={18} /></button>
            : <button className="btn btn-gold" style={{ marginTop: 14 }} onClick={() => nav('/jornada/' + id)}>Concluir jornada</button>}
        </div>
      ) : (
        <button className="btn btn-gold btn-full btn-lg" style={{ marginTop: 28 }} onClick={conclude}>Concluir o dia</button>
      )}
    </div>
  );
}

Object.assign(window, { TelaJornadas, TelaDetalheJornada, TelaDia, CapaJornada, capaCss });