// Sherlock BR — Blog (listagem + layout de artigo)
const SB_POSTS = [
  { slug:'ransomware-seguranca-da-informacao-para-empresas',
    title:'Ransomware: como proteger sua empresa antes do sequestro de dados',
    excerpt:'O ataque não começa no dia em que os arquivos são criptografados. Ele começa semanas antes, num backup que ninguém testou e num acesso que ninguém revogou.',
    tag:'Segurança da Informação', icon:'shield-alert', img:'assets/blog/ransomware.png', alt:'Escudo digital bloqueando um ataque de ransomware a servidores corporativos', date:'22 de julho de 2026', iso:'2026-07-22', read:'7 min',
    related:{ label:'Segurança da Informação', href:PAGE_URL.services },
    desc:'Como o ransomware invade empresas, quanto custa a paralisação e as 8 camadas de proteção que a Sherlock BR implanta em empresas no Rio de Janeiro.' },
  { slug:'lgpd-na-pratica-empresas-rio-de-janeiro',
    title:'LGPD na prática: o que muda para empresas no Rio de Janeiro',
    excerpt:'A LGPD não é um documento jurídico guardado na gaveta. Ela é uma exigência de infraestrutura — e a maioria das empresas descobre isso tarde demais.',
    tag:'Conformidade', icon:'file-text', img:'assets/blog/lgpd.png', alt:'Checklist de conformidade LGPD com cadeado e dados protegidos, com o Rio de Janeiro ao fundo', date:'8 de julho de 2026', iso:'2026-07-08', read:'8 min',
    related:{ label:'Diagnóstico Gratuito de TI', href:PAGE_URL.diagnostico },
    desc:'O que a LGPD exige na prática da infraestrutura de TI de empresas, clínicas e indústrias no Rio de Janeiro — e por onde começar a adequação.' },
  { slug:'backup-e-disaster-recovery',
    title:'Backup e Disaster Recovery: por que "eu tenho backup" quase nunca é verdade',
    excerpt:'Ter backup e conseguir restaurar são coisas diferentes. A conta chega no pior dia possível — quando o sistema já caiu.',
    tag:'Continuidade', icon:'database', img:'assets/blog/backup.png', alt:'Servidores em falha à esquerda e backup em nuvem restaurado à direita, separados por um escudo', date:'24 de junho de 2026', iso:'2026-06-24', read:'6 min',
    related:{ label:'Backup & Recovery', href:PAGE_URL.services },
    desc:'A diferença entre backup e disaster recovery, o que são RPO e RTO e como montar um plano de recuperação que funciona de verdade na sua empresa.' },
  { slug:'obsolescencia-de-hardware',
    title:'Obsolescência de hardware: o custo invisível das máquinas antigas',
    excerpt:'A máquina antiga não custa zero. Ela custa minutos por dia, multiplicados por pessoas, multiplicados por meses — e ninguém coloca isso na planilha.',
    tag:'Infraestrutura', icon:'monitor', img:'assets/blog/obsolescencia.png', alt:'Computadores obsoletos e enferrujados ao lado de infraestrutura de TI moderna', date:'10 de junho de 2026', iso:'2026-06-10', read:'6 min',
    related:{ label:'Locação de Equipamentos', href:PAGE_URL.locacao },
    desc:'Como calcular o custo real de computadores obsoletos na sua empresa: produtividade perdida, chamados, risco de segurança e paralisação.' },
  { slug:'sinais-de-ti-desorganizada',
    title:'7 sinais de que a TI da sua empresa está desorganizada',
    excerpt:'Nenhuma empresa decide ter uma TI bagunçada. Ela vira bagunça aos poucos, com decisões pequenas tomadas às pressas.',
    tag:'Gestão de TI', icon:'alert-triangle', img:'assets/blog/gestao-ti.png', alt:'Cabos e equipamentos desorganizados de um lado e ambiente de TI gerenciado do outro', date:'27 de maio de 2026', iso:'2026-05-27', read:'6 min',
    related:{ label:'Suporte Técnico Corporativo', href:PAGE_URL.services },
    desc:'Sete sinais claros de que a infraestrutura de TI da sua empresa está desorganizada — e o que fazer em cada caso antes que vire prejuízo.' },
  { slug:'locacao-de-ti-vs-comprar-equipamentos',
    title:'Locação de infraestrutura de TI vs. comprar equipamentos: o que compensa mais',
    excerpt:'Comprar parece mais barato porque o custo aparece uma vez só. Alugar parece mais caro porque aparece todo mês. A conta real não é essa.',
    tag:'Locação', icon:'package-check', img:'assets/blog/locacao.png', alt:'Equipamentos comprados e acorrentados de um lado, locação flexível em nuvem do outro', date:'13 de maio de 2026', iso:'2026-05-13', read:'7 min',
    related:{ label:'Locação de Infraestrutura', href:PAGE_URL.locacao },
    desc:'Comparativo honesto entre alugar e comprar computadores e servidores para empresas: caixa, obsolescência, suporte, escala e previsibilidade.' },
];
const postUrl = (slug) => BLOG_DIR + slug + '/index.html';
const postImg = (post) => BASE + post.img;

// ─── Card de artigo ───────────────────────────────────────────────────────────
const PostCard = ({ post }) => (
  <a className="postcard" href={postUrl(post.slug)}>
    <div style={{ position:'relative', overflow:'hidden', background:'linear-gradient(135deg,#012d3a,#16242d)', aspectRatio:'16/9' }}>
      <img className="pc-img" src={postImg(post)} alt={post.alt} loading="lazy" style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', display:'block', transition:'transform 520ms cubic-bezier(.2,.7,.3,1)' }}/>
      <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg,rgba(1,45,58,0.10) 0%,rgba(1,45,58,0.30) 55%,rgba(22,36,45,0.86) 100%)' }}/>
      <div style={{ position:'absolute', left:20, right:20, bottom:16, display:'flex', alignItems:'center', gap:11 }}>
        <div style={{ width:34, height:34, borderRadius:9, background:'rgba(1,45,58,0.72)', backdropFilter:'blur(6px)', border:'1px solid rgba(214,184,134,0.34)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
          <Icon name={post.icon} size={17} color="#d6b886" sw={1.9}/>
        </div>
        <span style={{ fontSize:11, fontWeight:700, letterSpacing:'1.6px', textTransform:'uppercase', color:'#d6b886', fontFamily:"'Inter',sans-serif", textShadow:'0 1px 6px rgba(0,0,0,0.55)' }}>{post.tag}</span>
      </div>
    </div>
    <div style={{ padding:'24px 24px 26px', display:'flex', flexDirection:'column', flex:1, gap:12 }}>
      <h2 className="pc-title" style={{ fontFamily:"'Poppins',sans-serif", fontSize:19, fontWeight:800, color:'#16242d', lineHeight:1.28, letterSpacing:'-0.3px', transition:'color 200ms' }}>{post.title}</h2>
      <p style={{ fontSize:14, color:'#6c757d', lineHeight:1.68, fontFamily:"'Inter',sans-serif", flex:1 }}>{post.excerpt}</p>
      <div style={{ display:'flex', alignItems:'center', gap:10, paddingTop:6, borderTop:'1px solid #e9ecef', marginTop:4 }}>
        <span style={{ fontSize:12, color:'#adb5bd', fontFamily:"'Inter',sans-serif" }}>{post.date}</span>
        <span style={{ width:3, height:3, borderRadius:'50%', background:'#dee2e6' }}/>
        <span style={{ fontSize:12, color:'#adb5bd', fontFamily:"'Inter',sans-serif" }}>{post.read} de leitura</span>
        <span style={{ marginLeft:'auto', display:'flex', alignItems:'center', gap:6, fontSize:13, fontWeight:700, color:'#a8874a', fontFamily:"'Inter',sans-serif" }}>
          Ler <Icon name="arrow-right" size={14} color="#a8874a" sw={2.4}/>
        </span>
      </div>
    </div>
  </a>
);

// ─── Listagem ─────────────────────────────────────────────────────────────────
const BlogListPage = () => (
  <div>
    <MiniHero tag="Blog Sherlock BR" title="Conteúdo de TI para quem toma decisão"
      sub="Segurança, continuidade, custo e organização da TI corporativa — explicados sem jargão, a partir do que vemos todo dia em empresas do Rio de Janeiro."/>
    <section style={{ background:'#f8f9fa', padding:'76px 32px' }}>
      <div style={{ maxWidth:1180, margin:'0 auto' }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:26 }}>
          {SB_POSTS.map(p => <PostCard key={p.slug} post={p}/>)}
        </div>
      </div>
    </section>
    <CTASection/>
  </div>
);

// ─── Layout de artigo ─────────────────────────────────────────────────────────
const ArticleLayout = ({ post, children }) => {
  const others = SB_POSTS.filter(p => p.slug !== post.slug).slice(0,3);
  return (
    <div>
      <div style={{ background:'linear-gradient(135deg,#012d3a,#16242d)', padding:'104px 32px 58px', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', inset:0, backgroundImage:"url('"+PATTERN+"')", backgroundRepeat:'repeat', backgroundSize:'90px', opacity:.05 }}/>
        <div style={{ position:'relative', zIndex:1, maxWidth:800, margin:'0 auto' }}>
          <div style={{ display:'flex', alignItems:'center', gap:9, marginBottom:18, fontSize:12, fontFamily:"'Inter',sans-serif", color:'rgba(255,255,255,0.42)' }}>
            <a href={PAGE_URL.blog} style={{ color:'#d6b886', textDecoration:'none', fontWeight:600 }}>Blog</a>
            <Icon name="chevron-right" size={13} color="rgba(255,255,255,0.3)" sw={2}/>
            <span>{post.tag}</span>
          </div>
          <h1 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(27px,3.6vw,45px)', fontWeight:900, color:'#fff', letterSpacing:'-1px', lineHeight:1.14, marginBottom:20 }}>{post.title}</h1>
          <p style={{ fontSize:16.5, color:'rgba(255,255,255,0.58)', fontFamily:"'Inter',sans-serif", lineHeight:1.7, marginBottom:26, maxWidth:660 }}>{post.excerpt}</p>
          <div style={{ display:'flex', alignItems:'center', gap:14, flexWrap:'wrap', paddingTop:20, borderTop:'1px solid rgba(214,184,134,0.16)' }}>
            <div style={{ width:36, height:36, borderRadius:'50%', background:'rgba(214,184,134,0.12)', border:'1px solid rgba(214,184,134,0.28)', display:'flex', alignItems:'center', justifyContent:'center' }}>
              <Icon name="search" size={16} color="#d6b886" sw={2.2}/>
            </div>
            <div>
              <div style={{ fontSize:13, fontWeight:700, color:'#fff', fontFamily:"'Inter',sans-serif" }}>Sherlock BR</div>
              <div style={{ fontSize:12, color:'rgba(255,255,255,0.40)', fontFamily:"'Inter',sans-serif" }}>
                <time dateTime={post.iso}>{post.date}</time> · {post.read} de leitura
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ background:'#fff', padding:'0 32px' }}>
        <figure style={{ maxWidth:920, margin:'-34px auto 0', position:'relative', zIndex:2, borderRadius:16, overflow:'hidden', boxShadow:'0 26px 60px rgba(1,45,58,0.28)', border:'1px solid rgba(214,184,134,0.22)', aspectRatio:'16/9' }}>
          <img src={postImg(post)} alt={post.alt} style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}/>
        </figure>
      </div>

      <section style={{ background:'#fff', padding:'48px 32px 20px' }}>
        <article className="art" style={{ maxWidth:760, margin:'0 auto' }}>{children}</article>
      </section>

      <section style={{ background:'#fff', padding:'8px 32px 70px' }}>
        <div style={{ maxWidth:760, margin:'0 auto', display:'flex', flexDirection:'column', gap:18 }}>
          <a href={post.related.href} style={{ display:'flex', alignItems:'center', gap:16, padding:'20px 24px', background:'#f8f9fa', border:'2px solid #e9ecef', borderRadius:14, textDecoration:'none', transition:'border-color 200ms' }}
            onMouseEnter={e=>e.currentTarget.style.borderColor='#d6b886'}
            onMouseLeave={e=>e.currentTarget.style.borderColor='#e9ecef'}>
            <div style={{ width:42, height:42, borderRadius:10, background:'rgba(214,184,134,0.14)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
              <Icon name={post.icon} size={19} color="#a8874a" sw={2}/>
            </div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:11, fontWeight:700, letterSpacing:'1.4px', textTransform:'uppercase', color:'#adb5bd', fontFamily:"'Inter',sans-serif", marginBottom:4 }}>Serviço relacionado</div>
              <div style={{ fontSize:16, fontWeight:700, color:'#16242d', fontFamily:"'Poppins',sans-serif" }}>{post.related.label}</div>
            </div>
            <Icon name="arrow-right" size={18} color="#a8874a" sw={2.2}/>
          </a>

          <div style={{ background:'linear-gradient(135deg,#012d3a,#16242d)', borderRadius:16, padding:'34px 32px', border:'1px solid rgba(214,184,134,0.16)', position:'relative', overflow:'hidden' }}>
            <div style={{ position:'absolute', inset:0, backgroundImage:"url('"+PATTERN+"')", backgroundRepeat:'repeat', backgroundSize:'90px', opacity:.05 }}/>
            <div style={{ position:'relative', zIndex:1 }}>
              <div style={{ fontSize:11, fontWeight:700, letterSpacing:'2px', textTransform:'uppercase', color:'#d6b886', marginBottom:12, fontFamily:"'Inter',sans-serif" }}>Próximo passo</div>
              <h2 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(21px,2.4vw,28px)', fontWeight:900, color:'#fff', letterSpacing:'-0.5px', lineHeight:1.18, marginBottom:12 }}>Quer saber como está a TI da sua empresa hoje?</h2>
              <p style={{ fontSize:15, color:'rgba(255,255,255,0.58)', lineHeight:1.72, fontFamily:"'Inter',sans-serif", marginBottom:24, maxWidth:520 }}>A Sherlock BR faz um diagnóstico gratuito e presencial no Rio de Janeiro: analisamos rede, segurança, backup e equipamentos, e entregamos um relatório com riscos e prioridades.</p>
              <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
                <a href={WA_LINK} target="_blank" rel="noopener noreferrer" style={{ display:'inline-flex', alignItems:'center', gap:9, padding:'13px 24px', background:'#d6b886', color:'#16242d', fontFamily:"'Inter',sans-serif", fontSize:14, fontWeight:700, borderRadius:8, textDecoration:'none', transition:'background 200ms' }}
                  onMouseEnter={e=>e.currentTarget.style.background='#c4a673'}
                  onMouseLeave={e=>e.currentTarget.style.background='#d6b886'}>
                  <WAIcon size={17} color="#16242d"/> Solicitar Diagnóstico Gratuito
                </a>
                <a href={PAGE_URL.diagnostico} style={{ display:'inline-flex', alignItems:'center', gap:9, padding:'13px 24px', background:'transparent', color:'rgba(255,255,255,0.78)', border:'1px solid rgba(255,255,255,0.22)', fontFamily:"'Inter',sans-serif", fontSize:14, fontWeight:600, borderRadius:8, textDecoration:'none', transition:'all 200ms' }}
                  onMouseEnter={e=>{ e.currentTarget.style.borderColor='#d6b886'; e.currentTarget.style.color='#d6b886'; }}
                  onMouseLeave={e=>{ e.currentTarget.style.borderColor='rgba(255,255,255,0.22)'; e.currentTarget.style.color='rgba(255,255,255,0.78)'; }}>
                  Como funciona o diagnóstico
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ background:'#f8f9fa', padding:'70px 32px' }}>
        <div style={{ maxWidth:1180, margin:'0 auto' }}>
          <h2 style={{ fontFamily:"'Poppins',sans-serif", fontSize:'clamp(21px,2.4vw,30px)', fontWeight:900, color:'#16242d', letterSpacing:'-0.5px', marginBottom:28 }}>Continue lendo</h2>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:26 }}>
            {others.map(p => <PostCard key={p.slug} post={p}/>)}
          </div>
        </div>
      </section>
    </div>
  );
};

const mountArticle = (slug, body) => {
  const post = SB_POSTS.find(p => p.slug === slug);
  mountSite('blog', <ArticleLayout post={post}>{body}</ArticleLayout>);
};

Object.assign(window, { SB_POSTS, postUrl, postImg, PostCard, BlogListPage, ArticleLayout, mountArticle });