/* JBit website — shared data + components (nav, footer, invader, helpers).
   Loaded on every page before the page script. Copy is realistic placeholder. */

const PRODUCTS = [
  {
    key:'ai', name:'JBit AI', color:'var(--c-ai)', deep:'#0a4a6e', glow:'rgba(46,196,255,.45)',
    icon:'pixelarticons:cpu', logo:'assets/logos/jbit-ai-black-bg.png', iconImg:'assets/logos/jbit-ai-icon.png',
    tag:'The intelligent partner',
    blurb:'AI tooling & automation that does the busywork for your team.',
    lead:'Put practical AI to work in your business — automating the repetitive stuff, surfacing answers fast, and freeing your people for the work that matters.',
    features:[
      {icon:'pixelarticons:repeat', h:'Workflow Automation', p:'Automate the repetitive tasks eating your team’s day — intake, routing, reminders, reports.'},
      {icon:'pixelarticons:message', h:'AI Assistants', p:'Chatbots and copilots trained on your docs to answer staff and customer questions instantly.'},
      {icon:'pixelarticons:trending-up', h:'Data & Insights', p:'Turn the data you already have into dashboards and plain-English summaries you’ll actually use.'},
      {icon:'pixelarticons:sliders', h:'Safe Rollout', p:'We scope, pilot, and govern AI responsibly so it helps without surprises.'},
    ],
    levels:['Discovery & use-case mapping','Pilot build & integration','Team training & rollout','Ongoing tuning'],
  },
  {
    key:'cloud', name:'JBit Cloud', color:'var(--c-cloud)', deep:'#0a4f7c', glow:'rgba(79,157,224,.45)',
    icon:'pixelarticons:cloud', logo:'assets/logos/jbit-cloud-black-bg.png', iconImg:'assets/logos/jbit-cloud-icon.png',
    tag:'Hosting, backup & continuity',
    blurb:'Migrate, host, and back up — your data safe and always on.',
    lead:'Move to the cloud without the headaches. We migrate, host, and protect your systems so your business keeps running, wherever your team works.',
    features:[
      {icon:'pixelarticons:upload', h:'Cloud Migration', p:'Plan and execute a clean move to Microsoft 365, Azure, or the platform that fits.'},
      {icon:'pixelarticons:archive', h:'Backup & Recovery', p:'Automated, tested backups with a real recovery plan — not just a checkbox.'},
      {icon:'pixelarticons:server', h:'Hosting & Email', p:'Managed hosting, email, and file storage that stays fast and available.'},
      {icon:'pixelarticons:reload', h:'Business Continuity', p:'If disaster strikes, you’re back online in hours, not days.'},
    ],
    levels:['Cloud readiness assessment','Migration & cutover','Backup configuration','Continuity testing'],
  },
  {
    key:'managed', name:'JBit Managed', color:'var(--c-managed)', deep:'#1a7a48', glow:'rgba(52,226,122,.4)',
    icon:'pixelarticons:device-laptop', logo:'assets/logos/jbit-managed-black-bg.png', iconImg:'assets/logos/jbit-managed-icon.png',
    tag:'Day-to-day support',
    blurb:'Help desk, monitoring & maintenance so things just keep running.',
    lead:'Your outsourced IT department. We monitor, maintain, and support your systems around the clock so small issues never become big ones.',
    features:[
      {icon:'pixelarticons:headphone', h:'24/7 Help Desk', p:'Real local people who pick up, know your setup, and fix it fast.'},
      {icon:'pixelarticons:radio-signal', h:'Remote Monitoring', p:'We watch your network 24/7 and catch problems before you feel them.'},
      {icon:'pixelarticons:download', h:'Patch & Maintenance', p:'Updates, patches, and tune-ups handled quietly in the background.'},
      {icon:'pixelarticons:list', h:'IT Roadmapping', p:'Quarterly reviews so your technology keeps pace with your growth.'},
    ],
    levels:['Onboarding & documentation','Monitoring deployment','Help-desk activation','Quarterly business review'],
  },
  {
    key:'secure', name:'JBit Secure', color:'var(--c-secure)', deep:'#28369e', glow:'rgba(81,112,255,.5)',
    icon:'pixelarticons:shield', logo:'assets/logos/jbit-secure-black-bg.png', iconImg:'assets/logos/jbit-secure-icon.png',
    tag:'Cybersecurity & compliance',
    blurb:'Threat protection, compliance & training that keeps the bad guys out.',
    lead:'Security built for small business reality. We layer protection, meet your compliance needs, and train your team to be the strongest link.',
    features:[
      {icon:'pixelarticons:shield', h:'Threat Protection', p:'Endpoint, email, and network defenses that stop attacks before they land.'},
      {icon:'pixelarticons:check', h:'Compliance & Audits', p:'HIPAA, PCI, and cyber-insurance requirements handled and documented.'},
      {icon:'pixelarticons:users', h:'Security Training', p:'Phishing simulations and short trainings that turn staff into a human firewall.'},
      {icon:'pixelarticons:eye', h:'24/7 Monitoring', p:'We watch for threats around the clock and respond when seconds count.'},
    ],
    levels:['Security risk assessment','Protection deployment','Staff training program','Continuous monitoring'],
  },
  {
    key:'forge', name:'JBit Forge', color:'var(--c-forge)', deep:'#a87715', glow:'rgba(255,194,75,.42)',
    icon:'pixelarticons:zap', logo:'assets/logos/jbit-forge-black-bg.png', iconImg:'assets/logos/jbit-forge-icon.png',
    tag:'Custom builds & projects',
    blurb:'Custom development and implementation projects, built to spec.',
    lead:'When off-the-shelf won’t cut it, we build it. Custom software, integrations, and implementation projects forged to fit exactly how you work.',
    features:[
      {icon:'pixelarticons:code', h:'Custom Software', p:'Apps, tools, and portals built around your real workflow — not the other way around.'},
      {icon:'pixelarticons:git-merge', h:'Integrations', p:'Connect the systems you already use so data flows instead of getting re-typed.'},
      {icon:'pixelarticons:briefcase', h:'Implementation', p:'New platform rollouts managed end to end, on time and on budget.'},
      {icon:'pixelarticons:flag', h:'Fixed-Scope Projects', p:'Clear scope, clear price, clear finish line — no runaway invoices.'},
    ],
    levels:['Discovery & specification','Design & build sprints','Testing & launch','Handoff & support'],
  },
  {
    key:'procure', name:'JBit Procure', color:'var(--c-procure)', deep:'#5b3fa8', glow:'rgba(185,140,255,.42)',
    icon:'pixelarticons:cart', logo:'assets/logos/jbit-procure-black-bg.png', iconImg:'assets/logos/jbit-procure-icon.png',
    tag:'Hardware & software sourcing',
    blurb:'We source, quote, and provision the right hardware & licenses for you.',
    lead:'Stop guessing on gear. We source the right hardware and software at the right price, then deliver it configured and ready to go.',
    features:[
      {icon:'pixelarticons:device-laptop', h:'Hardware Sourcing', p:'Workstations, servers, and networking spec’d for your needs and budget.'},
      {icon:'pixelarticons:copy', h:'Software Licensing', p:'The right licenses, no over-buying — and one renewal date to remember.'},
      {icon:'pixelarticons:dollar', h:'Quotes & Budgeting', p:'Transparent quotes and refresh planning so there are no surprises.'},
      {icon:'pixelarticons:checkbox', h:'Provisioning', p:'Devices arrive imaged, configured, and ready for your team to use.'},
    ],
    levels:['Needs & budget review','Sourcing & quote','Provisioning & imaging','Delivery & setup'],
  },
];

const CONTACT = {
  email:'info@jbitsolutionsllc.com',
  phone:'330-639-2593',
  phoneHref:'tel:+13306392593',
  location:'Lakewood, OH',
  est:'Est. 2024',
  socials:[
    { name:'Facebook',  icon:'simple-icons:facebook',  href:'https://www.facebook.com/profile.php?id=61567101473616' },
    { name:'Instagram', icon:'simple-icons:instagram', href:'https://www.instagram.com/jbit.solutions' },
    { name:'YouTube',   icon:'simple-icons:youtube',   href:'https://www.youtube.com/@jbitsolutions' },
  ],
};
window.PRODUCTS = PRODUCTS;
window.CONTACT = CONTACT;

/* ---------- InvaderSprite ---------- */
const INV_A = ["00100000100","00010001000","00111111100","01101110110","11111111111","10111111101","10100000101","00011011000"];
const INV_B = ["00100000100","10010001001","10111111101","11101110111","11111111111","01111111110","00100000100","01000000010"];
function InvaderSprite({ color='var(--primary)', scale=7, variant='a', glow=true, className='' }) {
  const pat = variant==='b'?INV_B:INV_A; const cols = pat[0].length;
  return (
    <div className={'invader '+className} style={{ gridTemplateColumns:`repeat(${cols}, ${scale}px)` }} aria-hidden="true">
      {pat.flatMap((row,r)=>row.split('').map((c,i)=>(
        <i key={r+'-'+i} style={{ width:scale, height:scale, background:c==='1'?color:'transparent',
          boxShadow:c==='1'&&glow?`0 0 ${scale}px ${color}`:'none' }} />
      )))}
    </div>
  );
}
window.InvaderSprite = InvaderSprite;

/* ---------- SiteNav ---------- */
function SiteNav({ active }) {
  const [open, setOpen] = React.useState(false);   // dropdown
  const [mob, setMob] = React.useState(false);      // mobile menu
  const wrapRef = React.useRef(null);
  React.useEffect(()=>{
    function onDoc(e){ if(wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); }
    document.addEventListener('click', onDoc); return ()=>document.removeEventListener('click', onDoc);
  },[]);
  return (
    <React.Fragment>
      <nav className="nav">
        <a className="nav-logo" href="index.html">
          <img src="assets/logos/jbit-circuit-head.png" alt="JBit" />
          <span className="wm">JBIT</span>
        </a>
        <div className="nav-links">
          <div className={'dd-wrap'+(open?' open':'')} ref={wrapRef}>
            <button className={'nav-link'+(active && active.startsWith('product')?' active':'')+(open?' active':'')}
              onClick={(e)=>{ e.stopPropagation(); setOpen(o=>!o); }}>
              Products &amp; Services <iconify-icon class="dd-caret" icon="pixelarticons:chevron-down"></iconify-icon>
            </button>
            {open && (
              <div className="dd-panel" onClick={(e)=>e.stopPropagation()}>
                {PRODUCTS.map(p=>(
                  <a key={p.key} className="dd-item" href={'product-'+p.key+'.html'}>
                    <img className="dd-ico" src={p.iconImg} alt="" />
                    <div><div className="nm" style={{ color:p.color }}>{p.name}</div><div className="ds">{p.tag}</div></div>
                  </a>
                ))}
                <div className="dd-foot"><span>6 product &amp; service lines</span><span style={{ color:'var(--primary)' }}>ALL SYSTEMS ONLINE ●</span></div>
              </div>
            )}
          </div>
          <a className={'nav-link'+(active==='about'?' active':'')} href="about.html">About</a>
          <a className={'nav-link'+(active==='blog'?' active':'')} href="blog.html">News</a>
          <a className={'nav-link'+(active==='contact'?' active':'')} href="contact.html">Contact</a>
        </div>
        <div className="nav-right">
          <div className="nav-uptime" style={{ textAlign:'right' }}>
            <div className="lbl">UPTIME</div><div className="val">99.98%</div>
          </div>
          <a className="btn" href="contact.html"><iconify-icon icon="pixelarticons:coin"></iconify-icon> Insert Coin</a>
          <button className="nav-burger" onClick={()=>setMob(m=>!m)} aria-label="Menu">{mob?'×':'≡'}</button>
        </div>
      </nav>
      <div className={'mob'+(mob?' open':'')}>
        <a href="index.html">Home</a>
        {PRODUCTS.map(p=> <a key={p.key} href={'product-'+p.key+'.html'}>{p.name}</a>)}
        <a href="about.html">About</a>
        <a href="blog.html">News</a>
        <a href="contact.html">Contact</a>
      </div>
    </React.Fragment>
  );
}
window.SiteNav = SiteNav;

/* ---------- Ticker + Footer ---------- */
function SiteFooter() {
  const items=[
    <span key="1">● ALL SYSTEMS <b>ONLINE</b></span>,
    <span key="2">LAKEWOOD, OHIO · LOCALLY OWNED</span>,
    <span key="3">FREE IT ASSESSMENT — <b>INSERT COIN</b></span>,
    <span key="4">AI · CLOUD · MANAGED · SECURE · FORGE · PROCURE</span>,
    <span key="5">HELP DESK <b>24 / 7</b></span>,
  ];
  return (
    <footer>
      <div className="ticker"><div className="track">{items}{items}</div></div>
      <div className="foot wrap">
        <div className="foot-grid">
          <div>
            <a className="nav-logo" href="index.html" style={{ marginBottom:14 }}>
              <img src="assets/logos/jbit-circuit-head.png" alt="JBit" style={{ height:30, width:'auto' }} />
              <span className="wm" style={{ fontSize:14 }}>JBIT</span>
            </a>
            <p className="blurb">Your trusted local partner in navigating the ever-changing tech landscape — right here in your community.</p>
            <div className="foot-social">
              {CONTACT.socials.map(s=>(
                <a key={s.name} className="soc" href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.name} title={s.name}>
                  <iconify-icon icon={s.icon}></iconify-icon>
                </a>
              ))}
            </div>
          </div>
          <div>
            <h4>Lines</h4>
            {PRODUCTS.map(p=> <a key={p.key} href={'product-'+p.key+'.html'}>{p.name}</a>)}
          </div>
          <div>
            <h4>Company</h4>
            <a href="about.html">About</a><a href="blog.html">News</a><a href="contact.html">Contact</a>
          </div>
          <div>
            <h4>Base</h4>
            <a href={'mailto:'+CONTACT.email}>{CONTACT.email}</a>
            <a href={CONTACT.phoneHref}>{CONTACT.phone}</a>
            <a href="contact.html">{CONTACT.location}</a>
            <a href="about.html" style={{ color:'var(--fg-muted)' }}>{CONTACT.est}</a>
          </div>
        </div>
        <div className="foot-base">
          <span>© 2026 JBIT SOLUTIONS LLC · LOCALLY OWNED &amp; OPERATED</span>
          <span style={{ color:'var(--primary)' }}>● ALL SYSTEMS ONLINE</span>
        </div>
      </div>
    </footer>
  );
}
window.SiteFooter = SiteFooter;

/* ---------- CTA banner (shared) ---------- */
function CtaBand({ title='READY TO LEVEL UP?', text='Drop a quarter in — a free, no-pressure IT assessment for your business.' }) {
  return (
    <section className="section wrap">
      <div className="cta-band">
        <h2>{title}</h2>
        <p>{text}</p>
        <a className="btn lg" href="contact.html"><iconify-icon icon="pixelarticons:coin"></iconify-icon> Insert Coin — Free Assessment</a>
      </div>
    </section>
  );
}
window.CtaBand = CtaBand;