/* Clients hub — list of all client-type pages */
function ClientsHubPage({ onBook }) {
  const { N, nStyles, useMediaQuery, PageHero, SectionLabel, CTAStrip, GridBg, CLIENTS_DATA } = window;
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isTablet = useMediaQuery('(max-width: 1024px)');
  const container = { ...nStyles.container, padding: isMobile ? '0 20px' : '0 48px' };

  const entries = Object.values(CLIENTS_DATA);

  return (
    <>
      <PageHero
        eyebrow="› who we serve"
        title={<>Built for the <span style={{ color: N.accent, filter: `drop-shadow(0 0 20px ${N.accent}66)` }}>specific business</span> you run.</>}
        subtitle="Generic accountants treat every client the same. We built specialized playbooks for the industries we know best — the ones where the accounting is genuinely different, and where a specialist saves you real money."
      >
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <button onClick={onBook} style={{ ...nStyles.btn, background: N.accent, color: N.bg, fontWeight: 600, boxShadow: `0 0 24px ${N.accent}88` }}>Book a consult →</button>
          <div style={{ ...nStyles.tag, marginLeft: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: N.accent, boxShadow: `0 0 8px ${N.accent}` }} />
            {entries.length} INDUSTRIES · {entries.reduce((s,e) => s + e.clientCount, 0)}+ BUSINESSES
          </div>
        </div>
      </PageHero>

      <section style={{ padding: isMobile ? '60px 0' : '100px 0', borderBottom: `1px solid ${N.line}`, position: 'relative', overflow: 'hidden' }}>
        <GridBg />
        <div style={{ ...container, position: 'relative' }}>
          <SectionLabel>› industries / specialized</SectionLabel>
          <h2 style={{ ...nStyles.h2, fontSize: isMobile ? 28 : 48, marginBottom: 14 }}>
            Our specialty <span style={{ color: N.accent }}>is your specialty.</span>
          </h2>
          <p style={{ fontSize: isMobile ? 14 : 16, color: N.inkSoft, maxWidth: 720, marginBottom: isMobile ? 32 : 48 }}>
            Click any industry below for the specific pain points, tax opportunities, KPIs, and stack we handle for businesses like yours.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)', gap: 20 }}>
            {entries.map((e, i) => (
              <a key={e.slug} href={`${e.slug}.html`} style={{
                textDecoration: 'none', color: 'inherit',
                border: `1px solid ${N.line}`, borderRadius: 10, padding: isMobile ? 20 : 26,
                background: N.surface, display: 'block',
                transition: 'all .2s', cursor: 'pointer',
              }}
              onMouseEnter={ev => { ev.currentTarget.style.borderColor = e.accent; ev.currentTarget.style.background = N.surface2; ev.currentTarget.style.boxShadow = `0 0 30px ${e.accent}33`; }}
              onMouseLeave={ev => { ev.currentTarget.style.borderColor = N.line; ev.currentTarget.style.background = N.surface; ev.currentTarget.style.boxShadow = 'none'; }}
              >
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                  <div style={{ ...nStyles.mono, fontSize: 10, letterSpacing: '0.18em', color: e.accent }}>
                    {String(i+1).padStart(2,'0')} / INDUSTRY
                  </div>
                  <div style={{ ...nStyles.mono, fontSize: 10, color: N.inkMute }}>→</div>
                </div>
                <div style={{ fontSize: isMobile ? 18 : 22, fontWeight: 500, marginBottom: 8 }}>{e.label}</div>
                <div style={{ fontSize: 13, color: N.inkSoft, lineHeight: 1.55, marginBottom: 20 }}>
                  For {e.ownerTitle.toLowerCase()}s running {e.revBand} businesses.
                </div>
                <div style={{ display: 'flex', gap: 12, ...nStyles.mono, fontSize: 11 }}>
                  <div><span style={{ color: e.accent }}>{e.clientCount}+</span> <span style={{ color: N.inkMute }}>clients</span></div>
                  <div style={{ color: N.line }}>|</div>
                  <div><span style={{ color: e.accent }}>{e.avgSavings}</span> <span style={{ color: N.inkMute }}>avg savings yr 1</span></div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Not on the list? */}
      <section style={{ padding: isMobile ? '48px 0' : '80px 0', borderBottom: `1px solid ${N.line}`, background: N.surface }}>
        <div style={container}>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 28 : 60, alignItems: 'center' }}>
            <div>
              <SectionLabel>› not listed?</SectionLabel>
              <h3 style={{ ...nStyles.h3, fontSize: isMobile ? 22 : 30, marginBottom: 16 }}>
                Don't see your <span style={{ color: N.accent }}>industry?</span>
              </h3>
              <p style={{ fontSize: isMobile ? 14 : 16, color: N.inkSoft, lineHeight: 1.7 }}>
                These are the industries we have deep, codified playbooks for. We also serve SaaS, consultancies, franchisors, nonprofits and more — as long as we can genuinely add value, we take you on.
              </p>
            </div>
            <div>
              <button onClick={onBook} style={{ ...nStyles.btn, background: N.accent, color: N.bg, fontWeight: 600, boxShadow: `0 0 24px ${N.accent}88`, width: isMobile ? '100%' : 'auto', justifyContent: 'center' }}>Talk to us →</button>
            </div>
          </div>
        </div>
      </section>

      <CTAStrip onBook={onBook} />
    </>
  );
}
window.ClientsHubPage = ClientsHubPage;