/* About page */
function About() {
  const C = window.CONTACT;
  const vals = [
    { icon:'pixelarticons:map', h:'Local First', p:'We live and work in Northeast Ohio. When you call, you get a neighbor — not a call center three time zones away.' },
    { icon:'pixelarticons:heart', h:'No Jargon', p:'We explain technology in plain English and only recommend what actually moves your business forward.' },
    { icon:'pixelarticons:shield', h:'In It Long-Term', p:'We’re a partner, not a one-time vendor. Your wins are our wins, quarter after quarter.' },
  ];
  const crew = [
    { i:'J', n:'Founder', r:'Principal Consultant' },
    { i:'O', n:'Operations', r:'Service Delivery' },
    { i:'S', n:'Security', r:'Lead Engineer' },
    { i:'H', n:'Help Desk', r:'Support Team' },
  ];
  return (
    <div className="crt-page">
      <window.SiteNav active="about" />

      <header className="about-hero wrap">
        <div className="eyebrow">{C.est} · {C.location}</div>
        <h1 style={{ fontFamily:'var(--font-pixel)', fontSize:'clamp(26px,4.4vw,46px)', color:'var(--fg)', textShadow:'var(--text-glow-p)', lineHeight:1.5, margin:'22px 0' }}>
          PLAYER 1: <span style={{ color:'var(--primary)' }}>JBIT</span>
        </h1>
        <p className="about-prose">JBit Solutions is a locally owned and operated IT services firm based in <strong>Lakewood, Ohio</strong>. We help small and medium-sized businesses plan, implement, and maintain the technology they need to grow and thrive.</p>
      </header>

      <section className="section wrap">
        <p className="about-prose" style={{ textAlign:'center' }}>From day-to-day support to long-term strategy, we’re your trusted partner in navigating the ever-changing tech landscape — right here in your community. We started JBit in <strong>2024</strong> with a simple idea: small businesses deserve the same caliber of IT as the big guys, delivered by people who actually answer the phone.</p>
      </section>

      <section className="section wrap">
        <div className="shead"><span className="bar" /><h2>Our Rules</h2><span className="meta">HOW WE PLAY</span></div>
        <div className="vals">
          {vals.map((v,i)=>(
            <div className="val" key={i}><iconify-icon icon={v.icon}></iconify-icon><h3>{v.h}</h3><p>{v.p}</p></div>
          ))}
        </div>
      </section>

      <section className="section wrap">
        <div className="shead"><span className="bar" /><h2>The Crew</h2><span className="meta">PLACEHOLDER · ADD REAL TEAM</span></div>
        <div className="crew">
          {crew.map((c,i)=>(
            <div className="crew-card" key={i}><div className="crew-av">{c.i}</div><div className="cn">{c.n}</div><div className="cr">{c.r}</div></div>
          ))}
        </div>
      </section>

      <section className="section wrap">
        <div className="band">
          <div className="cell"><div className="n">2024</div><div className="l">Established</div></div>
          <div className="cell"><div className="n">NE OH</div><div className="l">Service Area</div></div>
          <div className="cell"><div className="n">6</div><div className="l">Service Lines</div></div>
          <div className="cell"><div className="n">100%</div><div className="l">Locally Owned</div></div>
        </div>
      </section>

      <window.CtaBand title="LET'S MEET" text="We're right down the road. Drop a quarter in and let's talk about your business." />
      <window.SiteFooter />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<About />);