/* Home page */
function Home() {
  return (
    <div className="crt-page">
      <window.SiteNav active="home" />

      <header className="hero wrap">
        <div className="hero-emblem">
          <img src="assets/logos/jbit-circuit-head.png" alt="JBit Solutions" />
        </div>
        <div className="eyebrow">★ Lakewood, Ohio · Locally owned ★</div>
        <h1>MODERN IT,<br /><span className="c">LEVELED UP</span></h1>
        <p className="sub">We plan, build, and maintain the technology your business runs on — from day-to-day support to long-term strategy, right here in your community.</p>
        <div className="cta">
          <a className="btn lg" href="contact.html"><iconify-icon icon="pixelarticons:coin"></iconify-icon> Insert Coin — Free Assessment</a>
          <a className="btn outline lg" href="#lines">View Services ▸</a>
        </div>
        <div className="invader-row">
          <window.InvaderSprite color="var(--primary)" scale={8} variant="a" className="float" />
          <window.InvaderSprite color="var(--c-procure)" scale={8} variant="b" className="float" />
          <window.InvaderSprite color="var(--c-managed)" scale={8} variant="a" className="float" />
        </div>
        <div style={{ marginTop:22, fontFamily:'var(--font-hud)', fontSize:10, letterSpacing:'.2em', color:'var(--fg-muted)' }}>
          PRESS START <span className="blink" style={{ color:'var(--primary)' }}>▮</span>
        </div>
      </header>

      <section className="section wrap" id="lines">
        <div className="shead"><span className="bar" /><h2>Select Your Player</h2><span className="meta">PRODUCTS &amp; SERVICES · 6 LINES</span></div>
        <div className="pgrid">
          {window.PRODUCTS.map(p=>(
            <a key={p.key} className="pcard" href={'product-'+p.key+'.html'} style={{ '--ac':p.color, '--ac-deep':p.deep }}>
              <img className="pcard-ico" src={p.iconImg} alt="" />
              <div className="nm">{p.name}</div>
              <div className="ds">{p.blurb}</div>
              <div className="go">Enter ▸</div>
            </a>
          ))}
        </div>
      </section>

      <section className="section wrap">
        <div className="shead"><span className="bar" style={{ background:'var(--c-forge)', boxShadow:'0 0 8px rgba(255,194,75,.6)' }} /><h2 style={{ color:'var(--c-forge)', textShadow:'0 0 8px rgba(255,194,75,.5)' }}>High Scores</h2><span className="meta">WHY LOCAL BUSINESSES PICK JBIT</span></div>
        <div className="band">
          <div className="cell"><div className="n">99.98%</div><div className="l">Uptime SLA</div></div>
          <div className="cell"><div className="n">&lt;15min</div><div className="l">Response Time</div></div>
          <div className="cell"><div className="n">30+</div><div className="l">Businesses Served</div></div>
          <div className="cell"><div className="n">NE OH</div><div className="l">Local &amp; On-Site</div></div>
        </div>
      </section>

      <section className="section wrap">
        <div className="shead"><span className="bar" /><h2>How It Works</h2><span className="meta">3 STEPS TO READY</span></div>
        <div className="steps">
          <div className="step"><div className="num">01</div><h3>Insert Coin</h3><p>We sit down with you for a free assessment — no jargon, no pressure, just a clear look at where you stand.</p></div>
          <div className="step"><div className="num">02</div><h3>Build the Plan</h3><p>We map a roadmap across the lines you need — support, cloud, security, and more — sized to your budget.</p></div>
          <div className="step"><div className="num">03</div><h3>Level Up</h3><p>We implement, monitor, and maintain — and keep leveling you up as your business grows.</p></div>
        </div>
      </section>

      <window.CtaBand />
      <window.SiteFooter />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Home />);