// prumo-blog.jsx — componentes compartilhados do blog (índice + artigos)
// Cada post é um arquivo HTML próprio; estes componentes evitam repetir layout/boilerplate.

// Cartão de post usado no índice do blog.
function PostCard({post}){
  return (
    <Reveal>
      <a href={post.file} className="card"
        style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden',
          textDecoration:'none',color:'inherit'}}>
        {/* capa: gradiente com o acento da marca (sem imagem) + losango do Prumo */}
        <div style={{position:'relative',height:148,borderBottom:'1px solid var(--border)',
          background:'linear-gradient(135deg, color-mix(in oklab,var(--accent) 32%,var(--surface-2)), var(--surface-2))'}}>
          <span className="badge amber" style={{position:'absolute',left:16,top:16}}>{post.tag}</span>
          <svg width="40" height="46" viewBox="15 6 18 34" style={{position:'absolute',right:16,bottom:14,opacity:.9,overflow:'visible'}}>
            <line x1="24" y1="8.77" x2="24" y2="24.95" stroke="var(--text)" strokeWidth="4" strokeLinecap="round"/>
            <path d="M25.23,21.35l5.12,6.59c.39.5.44,1.19.12,1.74l-5.12,8.78c-.6,1.03-2.09,1.03-2.69,0l-5.12-8.78c-.32-.55-.27-1.24.12-1.74l5.12-6.59c.62-.8,1.84-.8,2.46,0Z" fill="var(--accent)"/>
          </svg>
        </div>
        <div style={{padding:'20px 22px',display:'flex',flexDirection:'column',gap:10,flex:1}}>
          <h3 className="h3" style={{fontSize:19,lineHeight:1.25}}>{post.title}</h3>
          <p className="muted" style={{fontSize:14.5,lineHeight:1.55,flex:1}}>{post.excerpt}</p>
          <div className="flex between center" style={{marginTop:6}}>
            <span className="faint mono" style={{fontSize:12}}>{post.date} · {post.readTime}</span>
            <span className="flex center" style={{gap:6,color:'var(--accent)',fontSize:13.5,fontWeight:600}}>
              Ler <Icon name="arrow" size={15}/>
            </span>
          </div>
        </div>
      </a>
    </Reveal>
  );
}

// Layout de um artigo: cabeçalho (tag/título/data/lead) + corpo .prose + CTA final.
function ArticleLayout({tag, title, date, readTime, lead, children}){
  return (
    <article className="section" style={{position:'relative',overflow:'hidden'}}>
      {/* glow sutil no topo, consistente com hero/contato */}
      <div style={{position:'absolute',top:-180,left:'50%',transform:'translateX(-50%)',width:900,height:420,
        background:'radial-gradient(50% 50% at 50% 50%, color-mix(in oklab,var(--accent) 18%,transparent), transparent 70%)',
        filter:'blur(20px)',pointerEvents:'none',opacity:.6}}></div>
      <div className="wrap" style={{position:'relative',maxWidth:760}}>
        {/* volta ao índice do blog (arquivo na mesma pasta) */}
        <a href="Prumo%20-%20Blog.html" className="navlink flex center" style={{gap:6,fontSize:13.5,width:'fit-content'}}>
          <Icon name="arrow" size={15} style={{transform:'rotate(180deg)'}}/> Voltar ao blog
        </a>
        <header style={{marginTop:22}}>
          <Eyebrow>{tag}</Eyebrow>
          <h1 className="display grad-text" style={{fontSize:'clamp(30px,4.4vw,48px)',margin:'14px 0 0',lineHeight:1.08}}>{title}</h1>
          <div className="faint mono" style={{fontSize:12.5,marginTop:16,letterSpacing:'.03em'}}>{date} · {readTime}</div>
          <p className="lead" style={{marginTop:20}}>{lead}</p>
        </header>
        <hr className="hairline" style={{margin:'32px 0'}}/>
        <div className="prose">{children}</div>
        {/* CTA ao final de todo artigo */}
        <div className="card" style={{marginTop:52,padding:'30px 28px',textAlign:'center',background:'var(--surface)'}}>
          <h3 className="h3" style={{fontSize:21}}>Coloque sua operação no prumo.</h3>
          <p className="muted" style={{maxWidth:430,margin:'10px auto 0',fontSize:14.5}}>
            Organize prospecção, projetos, obras e financeiro num lugar só. Em beta fechado.
          </p>
          <div className="flex center" style={{justifyContent:'center',gap:12,marginTop:18,flexWrap:'wrap'}}>
            <WaitlistBtn source="blog_article" variant="primary">Entrar na lista de espera <Icon name="arrow" size={16}/></WaitlistBtn>
            <Btn variant="ghost" href="Prumo%20-%20Contato.html">Falar com a gente</Btn>
          </div>
        </div>
      </div>
    </article>
  );
}

Object.assign(window,{ PostCard, ArticleLayout });
