// tela-loja.jsx — Biblioteca + Loja + landing de produto + checkout + Bluue.

// Parser de preço BR ("R$23,99" → 23.99) e cálculo de % de desconto.
// Intenção: derivar o selo "-X%" só de priceOld/price já existentes, sem dados novos.
function precoNum(s) {
  if (!s) return null;
  const n = parseFloat(String(s).replace(/[^0-9,.-]/g, '').replace(/\./g, '').replace(',', '.'));
  return isNaN(n) ? null : n;
}
function descontoPct(priceOld, price) {
  const a = precoNum(priceOld), b = precoNum(price);
  if (!a || !b || b >= a) return null;
  return Math.round((1 - b / a) * 100);
}

const FAQ = [
  { q: 'Preciso que meu cônjuge participe?', a: 'Não necessariamente — muitos recomeços começam quando uma pessoa muda a própria postura.' },
  { q: 'É religioso? Preciso ser evangélico?', a: 'Usa princípios bíblicos, mas com linguagem prática e acolhedora, sem dogmatismo.' },
  { q: 'Em quanto tempo vejo resultado?', a: 'Sem promessa mágica. A proposta é criar movimento e direção, um passo de cada vez.' },
  { q: 'Como funciona a garantia?', a: '7 dias pela Hotmart, com reembolso integral dentro do prazo.' },
  { q: 'Posso ler no celular?', a: 'Sim, o acesso é digital e funciona em qualquer dispositivo.' },
  { q: 'E se a situação for grave?', a: 'Em casos de violência, abuso ou risco, procure ajuda profissional, pastoral, jurídica ou de emergência.' },
];

function CapaProduto({ product, h, r = 10, w }) {
  if (product.cover) return <Picture src={product.cover} label={product.title} h={h} w={w} r={r} />;
  return (
    <div className="imgph" style={{ height: h, width: w, borderRadius: r, position: 'relative', ...capaCss(product.coverCss) }}>
      <div style={{ position: 'absolute', inset: 0, padding: 12, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
        <div className="mono" style={{ fontSize: 8, letterSpacing: '0.16em', color: 'var(--accent)', textTransform: 'uppercase' }}>O Casal Legendário</div>
        <div className="serif" style={{ fontSize: 16, color: 'var(--text)', lineHeight: 1.05, marginTop: 3, fontWeight: 600 }}>{product.title}</div>
      </div>
    </div>
  );
}

function SelosSeguranca() {
  return (
    <div className="row wrap" style={{ gap: 14, justifyContent: 'center', marginTop: 14 }}>
      {[['shieldcheck', 'Compra segura · Hotmart'], ['unlock', 'Acesso imediato'], ['refresh', 'Garantia de 7 dias']].map(([i, l]) => (
        <div key={l} className="row" style={{ gap: 7, color: 'var(--muted)', fontSize: 12.5 }}>
          <Icon name={i} size={16} color="var(--accent)" /> {l}
        </div>
      ))}
    </div>
  );
}

function TelaBiblioteca() {
  const store = useStore();
  const owned = PRODUCTS.filter(p => store.isUnlocked(p.id));
  const shop = PRODUCTS;
  return (
    <div className="col">
      <div style={{ paddingTop: 8 }}>
        <Eyebrow className="muted">Materiais & loja</Eyebrow>
        <h1 style={{ fontSize: 'clamp(26px,6vw,34px)', fontWeight: 700, letterSpacing: '-0.02em', margin: '4px 0 0' }}>Biblioteca</h1>
      </div>

      {owned.length > 0 && (
        <>
          <div className="sec-head" style={{ marginTop: 22 }}><Eyebrow className="muted">Seus materiais</Eyebrow></div>
          <div className="stack">
            {owned.map(p => (
              <div key={p.id} className="lrow" onClick={() => p.journey ? nav('/jornada/' + p.journey) : nav('/produto/' + p.id)}>
                <CapaProduto product={p} h={56} w={42} r={6} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 14.5 }}>{p.title}</div>
                  <div className="accent" style={{ fontSize: 12.5 }}><Icon name="unlock" size={12} /> Desbloqueado</div>
                </div>
                <Icon name="chevron" size={18} color="var(--faint)" />
              </div>
            ))}
          </div>
        </>
      )}

      <div className="sec-head" style={{ marginTop: 26 }}><Eyebrow className="muted">Loja</Eyebrow></div>
      <div className="grid-2">
        {shop.map(p => {
          const has = store.isUnlocked(p.id);
          return (
            <div key={p.id} className="card card-sm card-hover card-tap" style={{ padding: 12 }} onClick={() => nav('/produto/' + p.id)}>
              <div style={{ position: 'relative' }}>
                <CapaProduto product={p} h={150} r={8} />
                {!has && descontoPct(p.priceOld, p.price) && (
                  <span className="disc-badge">-{descontoPct(p.priceOld, p.price)}%</span>
                )}
              </div>
              <div style={{ fontWeight: 600, fontSize: 14, marginTop: 10, lineHeight: 1.2 }}>{p.title}</div>
              <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{p.sub}</div>
              <div className="spread" style={{ marginTop: 8, gap: 8, flexWrap: 'wrap' }}>
                {has
                  ? <span className="accent" style={{ fontSize: 13, fontWeight: 600 }}><Icon name="unlock" size={13} /> Desbloqueado</span>
                  : <span style={{ fontSize: 14 }}>{p.priceOld && <span className="price-old">{p.priceOld}</span>} <span className="price-now">{p.price}</span></span>}
                {!has && <span className="accent" style={{ fontSize: 12.5, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 3 }}>Ver <Icon name="arrow" size={13} /></span>}
              </div>
            </div>
          );
        })}
      </div>

      {/* Bluue */}
      <div className="card" style={{ marginTop: 22 }}>
        <Eyebrow className="muted">Parceiro</Eyebrow>
        <h3 style={{ margin: '8px 0 4px', fontSize: 18 }}>Consulta com a Bluue</h3>
        <p className="muted" style={{ fontSize: 14, margin: 0 }}>Acompanhamento profissional com desconto para a nossa comunidade.</p>
        <div className="spread" style={{ marginTop: 14, flexWrap: 'wrap', gap: 10 }}>
          <div className="row" style={{ gap: 8 }}>
            <span className="kicker">Cupom</span>
            <span className="mono" style={{ fontSize: 15, fontWeight: 500, color: 'var(--accent)', border: '1px dashed var(--accent-line)', borderRadius: 8, padding: '5px 12px', letterSpacing: '0.1em' }}>{BRAND.bluueCoupon}</span>
            <span className="muted" style={{ fontSize: 13 }}>10% off</span>
          </div>
          <a className="btn btn-soft btn-sm" href={BRAND.bluue} target="_blank" rel="noopener">Agendar <Icon name="external" size={15} /></a>
        </div>
      </div>

      <SelosSeguranca />

      <a className="btn btn-ghost btn-full" href={BRAND.whatsapp} target="_blank" rel="noopener" style={{ marginTop: 18 }}>
        <Icon name="whatsapp" size={18} /> Falar sobre parcerias
      </a>
    </div>
  );
}

function FolhaCheckout({ product, open, onClose }) {
  const store = useStore();
  if (!product) return null;
  const buy = () => { store.actions.unlock(product.id); onClose(); nav('/compra/sucesso/' + product.id); };
  return (
    <Sheet open={open} onClose={onClose}>
      <div style={{ padding: '8px 22px 30px' }}>
        <div className="row" style={{ gap: 14, marginBottom: 18 }}>
          <CapaProduto product={product} h={72} w={54} r={7} />
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600 }}>{product.title}</div>
            <div className="muted" style={{ fontSize: 13 }}>{product.sub}</div>
            <div style={{ marginTop: 4, fontSize: 18 }}>
              {product.priceOld && <span className="price-old">{product.priceOld}</span>} <span className="price-now">{product.price}</span>
              {product.priceOld && descontoPct(product.priceOld, product.price) && (
                <span style={{
                  marginLeft: 8, fontSize: 12.5, fontWeight: 700, color: 'var(--accent)',
                  background: 'var(--accent-soft)', border: '1px solid var(--accent-line)',
                  borderRadius: 999, padding: '2px 9px', whiteSpace: 'nowrap', verticalAlign: 'middle'
                }}>-{descontoPct(product.priceOld, product.price)}%</span>
              )}
            </div>
          </div>
        </div>
        <a className="btn btn-gold btn-full btn-lg" href={product.checkout} target="_blank" rel="noopener">
          Pagar com Hotmart <Icon name="external" size={17} />
        </a>
        <div className="row" style={{ gap: 7, justifyContent: 'center', marginTop: 10, color: 'var(--muted)', fontSize: 12.5 }}>
          <Icon name="refresh" size={14} color="var(--accent)" /> Garantia de 7 dias · acesso imediato
        </div>
        <button className="btn btn-soft btn-full" style={{ marginTop: 10 }} onClick={buy}>Já comprei — desbloquear no app</button>
        <SelosSeguranca />
        <p className="kicker tc" style={{ marginTop: 16, lineHeight: 1.5 }}>Pagamento processado pela Hotmart.<br />Acesso liberado imediatamente após a confirmação.</p>
      </div>
    </Sheet>
  );
}

function TelaDetalheProduto({ id }) {
  const store = useStore();
  const p = PRODUCTS.find(x => x.id === id);
  const [checkout, setCheckout] = useState(false);
  const [openFaq, setOpenFaq] = useState(null);
  if (!p) return <div className="col" style={{ paddingTop: 40 }}>Produto não encontrado.</div>;
  const has = store.isUnlocked(p.id);
  // Faixa de economia em R$ + % na landing. precoNumLoja: 'R$23,99'→23.99, 'R$17'→17.
  // fmtBRL: inteiro vira "30", fracionado vira "73,01" (evita hack .replace(',00','')).
  const precoNumLoja = (v) => parseFloat(String(v).replace(/[^0-9,]/g, '').replace(',', '.')) || 0;
  const fmtBRL = (n) => Number.isInteger(n) ? String(n) : n.toFixed(2).replace('.', ',');

  return (
    <div className="col" style={{ maxWidth: 700, paddingTop: 4 }}>
      <div className="row" style={{ gap: 16, alignItems: 'flex-start' }}>
        <CapaProduto product={p} h={180} w={134} r={10} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <Eyebrow className="muted">eBook · O Casal Legendário</Eyebrow>
          <h1 className="serif" style={{ fontSize: 'clamp(26px,5.6vw,34px)', fontWeight: 600, lineHeight: 1.06, margin: '6px 0 4px' }}>{p.title}</h1>
          <div className="muted" style={{ fontSize: 14 }}>{p.sub}</div>
          <div style={{ marginTop: 12, display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 26 }}>{p.priceOld && <span className="price-old">{p.priceOld}</span>} <span className="price-now">{p.price}</span></span>
            {p.priceOld && precoNumLoja(p.priceOld) > precoNumLoja(p.price) && (
              <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--accent)', background: 'var(--accent-soft)', border: '1px solid var(--accent-line)', borderRadius: 999, padding: '3px 10px', whiteSpace: 'nowrap' }}>
                Economize R${fmtBRL(precoNumLoja(p.priceOld) - precoNumLoja(p.price))} · {Math.round((1 - precoNumLoja(p.price) / precoNumLoja(p.priceOld)) * 100)}%
              </span>
            )}
          </div>
          <div className="row" style={{ gap: 7, marginTop: 8, color: 'var(--muted)', fontSize: 12.5 }}>
            <Icon name="shieldcheck" size={14} color="var(--accent)" /> À vista no Pix · garantia de 7 dias
          </div>
        </div>
      </div>

      <p className="muted" style={{ fontSize: 16, lineHeight: 1.6, marginTop: 20 }}>{p.desc}</p>

      {has ? (
        <button className="btn btn-gold btn-full btn-lg" style={{ marginTop: 18 }} onClick={() => p.journey ? nav('/jornada/' + p.journey) : nav('/biblioteca')}>
          <Icon name="unlock" size={18} /> Acessar conteúdo
        </button>
      ) : (
        <button className="btn btn-gold btn-full btn-lg" style={{ marginTop: 18 }} onClick={() => setCheckout(true)}>{p.cta}</button>
      )}

      <div className="card" style={{ marginTop: 20 }}>
        <Eyebrow className="muted">O que você recebe</Eyebrow>
        <div className="stack" style={{ marginTop: 12, gap: 10 }}>
          {p.bullets.map((b, i) => (
            <div key={i} className="row" style={{ alignItems: 'flex-start', gap: 11 }}>
              <Icon name="check" size={19} color="var(--accent)" style={{ marginTop: 1 }} />
              <span style={{ fontSize: 15 }}>{b}</span>
            </div>
          ))}
        </div>
      </div>

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

      {/* depoimentos */}
      <div className="spread" style={{ margin: '28px 0 12px', alignItems: 'baseline' }}>
        <h3 className="serif" style={{ fontSize: 22, fontWeight: 600, margin: 0 }}>Quem já caminhou</h3>
        <span className="row" style={{ gap: 6 }}><Stars n={5} size={13} /><span className="accent" style={{ fontSize: 13, fontWeight: 600 }}>4,9</span></span>
      </div>
      <div className="stack">
        {(p.journey === 'liberdade' ? TESTIMONIALS.filter(t => t.libertacao).concat(TESTIMONIALS) : TESTIMONIALS).slice(0, 2).map(t => (
          <div key={t.id} className="card">
            <div className="spread">
              <Stars n={t.stars} />
              <span className="row" style={{ gap: 4, color: 'var(--accent)', fontSize: 11.5, fontFamily: 'var(--mono)' }}><Icon name="shieldcheck" size={13} /> Verificado</span>
            </div>
            <p style={{ margin: '10px 0 12px', fontSize: 15, lineHeight: 1.5 }}>“{t.text}”</p>
            <div className="muted" style={{ fontSize: 13 }}>{t.name} · {t.city}</div>
          </div>
        ))}
      </div>

      {/* FAQ */}
      <h3 className="serif" style={{ fontSize: 22, fontWeight: 600, margin: '28px 0 12px' }}>Perguntas frequentes</h3>
      <div className="stack" style={{ gap: 8 }}>
        {FAQ.map((f, i) => (
          <div key={i} className="card card-sm card-tap" onClick={() => setOpenFaq(openFaq === i ? null : i)}>
            <div className="spread">
              <span style={{ fontWeight: 600, fontSize: 14.5 }}>{f.q}</span>
              <Icon name={openFaq === i ? 'down' : 'chevron'} size={18} color="var(--faint)" />
            </div>
            {openFaq === i && <p className="muted" style={{ margin: '10px 0 0', fontSize: 14.5, lineHeight: 1.5 }}>{f.a}</p>}
          </div>
        ))}
      </div>

      <SelosSeguranca />

      <FolhaCheckout product={p} open={checkout} onClose={() => setCheckout(false)} />
    </div>
  );
}

function TelaCompraSucesso({ id }) {
  const p = PRODUCTS.find(x => x.id === id);
  return (
    <div className="col center-narrow glow-top" style={{ paddingTop: 50, textAlign: 'center', position: 'relative' }}>
      <div style={{ width: 76, height: 76, borderRadius: 22, background: 'var(--accent-soft)', border: '1px solid var(--accent-line)', display: 'grid', placeItems: 'center', margin: '0 auto 20px', color: 'var(--accent)' }}>
        <Icon name="check" size={38} />
      </div>
      <Eyebrow>Acesso liberado</Eyebrow>
      <h1 className="serif" style={{ fontSize: 34, fontWeight: 600, margin: '10px 0 10px' }}>Tudo certo!</h1>
      <p className="muted" style={{ fontSize: 16 }}>{p ? `${p.title} foi desbloqueado.` : 'Seu material foi desbloqueado.'} Que esse seja o início de um novo caminho para a sua casa.</p>
      {p && p.journey
        ? <button className="btn btn-gold btn-full btn-lg" style={{ marginTop: 24 }} onClick={() => nav('/jornada/' + p.journey)}>Começar a jornada</button>
        : <button className="btn btn-gold btn-full btn-lg" style={{ marginTop: 24 }} onClick={() => nav('/biblioteca')}>Ir para a biblioteca</button>}
      <button className="btn btn-ghost btn-full" style={{ marginTop: 10 }} onClick={() => nav('/home')}>Voltar ao início</button>
    </div>
  );
}

Object.assign(window, { TelaBiblioteca, TelaDetalheProduto, FolhaCheckout, TelaCompraSucesso, CapaProduto, FAQ });