/* News / Blog page — realistic placeholder posts */
function Blog() {
  const cats = {
    Secure:'var(--c-secure)', Cloud:'var(--c-cloud)', Managed:'var(--c-managed)',
    AI:'var(--c-ai)', Procure:'var(--c-procure)', Forge:'var(--c-forge)', News:'var(--primary)'
  };
  const feature = {
    cat:'Secure', icon:'pixelarticons:shield', date:'May 2026',
    title:'5 phishing red flags every NE Ohio business should know',
    ex:'Most breaches start with a single click. Here are the five tells we train every client’s team to spot — and what to do when one lands in your inbox.'
  };
  const posts = [
    { cat:'Cloud', icon:'pixelarticons:cloud', date:'May 2026', title:'Is your backup actually working?', ex:'A backup you’ve never tested is just a hope. Here’s the 10-minute check we run for every client.' },
    { cat:'Managed', icon:'pixelarticons:device-laptop', date:'Apr 2026', title:'Break-fix vs. managed IT, in plain English', ex:'Why paying only when things break usually costs small businesses more in the long run.' },
    { cat:'AI', icon:'pixelarticons:cpu', date:'Apr 2026', title:'Where AI actually helps a small business', ex:'Cutting past the hype: three places we’ve seen practical AI save local teams real hours.' },
    { cat:'Procure', icon:'pixelarticons:cart', date:'Mar 2026', title:'Stop overpaying for software licenses', ex:'The license audit that almost always finds money your business is leaving on the table.' },
    { cat:'Forge', icon:'pixelarticons:code', date:'Mar 2026', title:'When to build custom vs. buy off-the-shelf', ex:'A simple framework for deciding whether that workflow deserves a custom tool.' },
    { cat:'News', icon:'pixelarticons:flag', date:'Feb 2026', title:'JBit Solutions is open for business', ex:'We’re live and serving Northeast Ohio. Here’s what we’re about and how we can help.' },
  ];
  return (
    <div className="crt-page">
      <window.SiteNav active="blog" />

      <header className="about-hero wrap" style={{ paddingBottom:20 }}>
        <div className="eyebrow">★ Press Start ★</div>
        <h1 style={{ fontFamily:'var(--font-pixel)', fontSize:'clamp(24px,4vw,42px)', color:'var(--fg)', textShadow:'var(--text-glow-p)', lineHeight:1.5, margin:'20px 0 10px' }}>
          NEWS &amp; <span style={{ color:'var(--primary)' }}>NOTES</span>
        </h1>
        <p className="about-prose">Plain-English tips, local news, and the occasional high score. No jargon, no fluff.</p>
      </header>

      <section className="section wrap" style={{ paddingTop:24 }}>
        <a className="blog-feature" href="#" style={{ textDecoration:'none' }}>
          <div className="bf-art"><iconify-icon icon={feature.icon}></iconify-icon></div>
          <div className="bf-body">
            <span className="cat" style={{ color:cats[feature.cat] }}>● {feature.cat}</span>
            <h3 style={{ fontFamily:'var(--font-pixel)', fontSize:'clamp(14px,1.8vw,19px)', color:'var(--fg)', lineHeight:1.5, margin:'14px 0 14px', textShadow:'var(--text-glow-p)' }}>{feature.title}</h3>
            <p style={{ fontFamily:'var(--font-term)', fontSize:22, color:'var(--fg-dim)', lineHeight:1.25, margin:0 }}>{feature.ex}</p>
            <div className="date" style={{ fontFamily:'var(--font-hud)', fontSize:9, letterSpacing:'.1em', color:'var(--fg-muted)', textTransform:'uppercase', marginTop:18 }}>{feature.date} · Featured</div>
          </div>
        </a>

        <div className="shead" style={{ marginTop:48 }}><span className="bar" /><h2>Latest</h2><span className="meta">CONTINUE? ▸</span></div>
        <div className="blog-grid">
          {posts.map((post,i)=>(
            <a className="post" href="#" key={i}>
              <div className="post-top"><iconify-icon icon={post.icon} style={{ color:cats[post.cat] }}></iconify-icon></div>
              <div className="post-body">
                <span className="cat" style={{ color:cats[post.cat] }}>● {post.cat}</span>
                <h3>{post.title}</h3>
                <p className="ex">{post.ex}</p>
                <div className="date">{post.date}</div>
              </div>
            </a>
          ))}
        </div>
      </section>

      <window.CtaBand title="QUESTIONS? WE'VE GOT ANSWERS" text="Skip the reading — talk to a real local technician about your setup." />
      <window.SiteFooter />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Blog />);