{label}

{count > 0 && {count} {countLabel}}

{linkHref && count > 8 && ( Ver todos → )}

); } // ── ContentCard (3:4 portrait DS, para projetos não-Papo) ──────────────────── function ContentCard({ post, width }) { const [hov, setHov] = useState(false); const isVideo = getCategory(post.tipo) === 'video'; const cover = post.capa || (!isVideo ? post.modelos?.[0]?.capa : null) || null; const wrapStyle = { position: 'relative', borderRadius: 16, overflow: 'hidden', aspectRatio: '3/4', cursor: 'pointer', border: `1px solid ${hov ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.06)'}`, boxShadow: hov ? '0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(123,63,242,0.2)' : '0 4px 20px rgba(0,0,0,0.45)', transform: hov ? 'translateY(-3px)' : 'none', transition: 'transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s, border-color 0.25s', background: '#14141C', }; if (width) { wrapStyle.flexShrink = 0; wrapStyle.width = width; wrapStyle.aspectRatio = undefined; } return (

window.location.href = `/conteudo/${post.slug}`} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={wrapStyle}>

{cover &&

e.target.style.display='none'} />}

{post.title}

{fmtDate(post.date)}

); } // ── VideoCard (16:9, para episódios em carousel) ────────────────────────────── function VideoCard({ post, width = 288 }) { const [hov, setHov] = useState(false); return (

window.location.href = `/conteudo/${post.slug}`} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ flexShrink: 0, width, borderRadius: 16, overflow: 'hidden', background: post.gradient || '#14141C', border: `1px solid ${hov ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.06)'}`, cursor: 'pointer', boxShadow: hov ? '0 4px 24px rgba(0,0,0,0.5), 0 0 20px rgba(123,63,242,0.3)' : '0 4px 24px rgba(0,0,0,0.4)', transform: hov ? 'scale(1.02)' : 'scale(1)', transition: 'transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s, border-color 0.2s' }}>

{post.capa &&

e.target.style.display='none'} />}

{post.title}

{fmtDate(post.date)}

); } // ── HeroEpisode (destaque do episódio mais recente) ─────────────────────────── function HeroEpisode({ post, accent }) { if (!post) return null; return (

window.location.href = `/conteudo/${post.slug}`} style={{ borderRadius: 16, overflow: 'hidden', position: 'relative', aspectRatio: '21/9', background: post.gradient || '#14141C', cursor: 'pointer', marginBottom: 14 }}> {post.capa && (

e.target.style.display='none'} /> )}

{/* Play button center */}

ÚLTIMO EPISÓDIO

{post.title}

{fmtDate(post.date)}

); } // ── PresenterGrid (grid de apresentadoras) ──────────────────────────────────── function PresenterGrid({ items, loading, accent }) { if (!loading && items.length === 0) return null; const skelCount = 5; return (

{loading ? Array.from({length: skelCount}).map((_,i) => (

)) : items.map(post => { const cover = post.capa || post.modelos?.[0]?.capa || null; const modelSlug = post.modelos?.[0]?.slug; const modelName = post.modelos?.[0]?.nome; const href = modelSlug ? `/modelos/${modelSlug}` : `/conteudo/${post.slug}`; return (

window.location.href = href} style={{ flex: 1, minWidth: 120, borderRadius: 16, overflow: 'hidden', position: 'relative', aspectRatio: '3/4', background: post.gradient || '#14141C', border: '1px solid rgba(255,255,255,0.06)', cursor: 'pointer' }}> {cover && (

e.target.style.display='none'} /> )}

{modelName && (

{modelName}

)}

Apresentadora

); }) }

); } // ── SubSection (Papo) ───────────────────────────────────────────────────────── function SubSection({ tipo, label, accent, component = 'carousel' }) { const [items, setItems] = useState([]); const [total, setTotal] = useState(0); const [loading, setLoading] = useState(true); const limit = component === 'hero+carousel' ? 9 : component === 'grid-portrait' ? 12 : 8; useEffect(() => { fetch(`/api/content?tipo=${encodeURIComponent(tipo)}&limit=${limit}`) .then(r => r.json()) .then(data => { setItems(Array.isArray(data?.items) ? data.items : []); setTotal(data?.total || 0); }) .catch(console.error) .finally(() => setLoading(false)); }, [tipo]); if (!loading && items.length === 0) return null; const header = ( ); // Hero + carousel: primeiro item em destaque, restantes em scroll horizontal if (component === 'hero+carousel') { const hero = items[0]; const rest = items.slice(1); return (

{header} {loading ?

: }

{loading ? Array.from({length: 5}).map((_,i) =>

) : rest.map(post => ) }

); } // Grid de retratos: apresentadoras if (component === 'grid-portrait') { return (

{header}

); } // Carousel padrão 16:9 return (

{header}

{loading ? Array.from({length: 5}).map((_,i) =>

) : items.map(post => ) }

); } // ── PapoContent ──────────────────────────────────────────────────────────────── function PapoContent({ meta }) { return (

{PAPO_SUB_TIPOS.map(({ tipo, label, component }) => ( ))}

); } // ── ProjetoPage ─────────────────────────────────────────────────────────────── function ProjetoPage({ slug }) { const meta = PROJETO_META[slug]; const [items, setItems] = useState([]); const [total, setTotal] = useState(0); const [offset, setOffset] = useState(0); const [loading, setLoading] = useState(false); const [hasMore, setHasMore] = useState(false); const LIMIT = 24; const load = useCallback((off, append) => { if (!slug || slug === 'papo') return; setLoading(true); fetch(`/api/content?projeto=${slug}&limit=${LIMIT}&offset=${off}`) .then(r => r.json()) .then(data => { const newItems = Array.isArray(data?.items) ? data.items : []; setItems(prev => append ? [...prev, ...newItems] : newItems); setTotal(data?.total || 0); setHasMore(off + LIMIT < (data?.total || 0)); setOffset(off + LIMIT); }) .catch(console.error) .finally(() => setLoading(false)); }, [slug]); useEffect(() => { if (slug !== 'papo') load(0, false); }, [load, slug]); if (!meta) return (

Projeto não encontrado.

Ver todo o conteúdo

); return (

{/* Hero do projeto */}

{ e.target.style.display='none'; }} />

{meta.label}

{meta.desc}

{slug !== 'papo' && total > 0 &&

{total} conteúdos disponíveis

}

{/* Comparativo: assinatura individual do projeto x Combo Premium */}

{/* Papo: layout editorial | Outros: flat grid */} {slug === 'papo' ? ( ) : (

{loading && items.length === 0 ? (

{Array.from({length: 8}).map((_,i) =>

)}

) : items.length === 0 ? (

Nenhum conteúdo encontrado para este projeto.

) : (

{items.map(post => )}

)} {items.length > 0 && (

Exibindo {items.length} de {total} {hasMore && ( )}

)}

); }