// home-page.jsx
function HomePage({ setPage, tokens }) {
  return (
    <div className="page-fade">
      <Hero setPage={setPage} tokens={tokens} />
      <LogoMarquee />
      <WhoWeHelp />
      <Stats />
      <BeforeAfter />
      <ServicesBento />
      <CTABand setPage={setPage} />
    </div>);
}

function WhoWeHelp() {
  const isMobile = useIsMobile(640);
  const groups = [
    { t: 'Owners', b: 'You see the drag on your operation. You want a partner who delivers measurable ROI, not features. Senior expertise that finds the biggest wins fast and proves them with numbers before scaling.' },
    { t: 'Operations leaders', b: 'You have mapped the pain in your head for months. You want a partner who speaks your language and respects the systems you have already built.' },
    { t: 'Decision makers', b: 'Your remit is outcomes, not technology. You want a partner who moves at the pace of your business, ships tools your team will actually use, and ties every engagement to measurable results.' }
  ];

  return (
    <section className="section">
      <Reveal>
        <div className="mono" style={{ color: 'var(--accent-2)', marginBottom: 24 }}>// WHO WE HELP</div>
      </Reveal>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 16 : 80,
        alignItems: 'end', marginBottom: 40,
      }}>
        <Reveal>
          <h2 style={{ fontSize: 'clamp(28px, 4.5vw, 56px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.02, margin: 0, textWrap: 'balance' }}>
            If admin tax and missed revenue sound like your problems, we probably fit.
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <p style={{ color: 'var(--ink-dim)', fontSize: isMobile ? 15 : 17, lineHeight: 1.5, margin: 0, maxWidth: 460 }}>
            We work across small and mid-size businesses, with particular strength in
            operational and field-service teams already running a CRM, ERP, or field
            service platform.
          </p>
        </Reveal>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
        gap: 16,
      }}>
        {groups.map((g, i) =>
          <Reveal key={g.t} delay={i * 80}>
            <Spotlight style={{ padding: 24, border: '1px solid var(--bg-line)', borderRadius: 14, background: 'var(--bg-panel)', height: '100%' }}>
              <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.015em', marginBottom: 10 }}>{g.t}</div>
              <div style={{ color: 'var(--ink-dim)', fontSize: 14, lineHeight: 1.55 }}>{g.b}</div>
            </Spotlight>
          </Reveal>
        )}
      </div>
    </section>
  );
}

function Footer({ setPage }) {
  const isMobile = useIsMobile(640);
  return (
    <footer style={{ borderTop: '1px solid var(--bg-line)', padding: isMobile ? '40px 18px 32px' : '60px 32px 40px' }}>
      <div className="footer-grid" style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : '1.5fr 1fr 1fr 1fr',
        gap: isMobile ? 24 : 40,
      }}>
        <div style={{ gridColumn: isMobile ? '1 / -1' : 'auto' }}>
          <Logo onClick={(e) => { e.preventDefault(); setPage('home'); }} size={isMobile ? 44 : 64} />
          <p style={{ color: 'var(--ink-dim)', fontSize: 13, lineHeight: 1.5, marginTop: 16, maxWidth: 320 }}>
            AI Consulting for Small and Mid-Size Businesses · Fishers, Indiana
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 20, flexWrap: 'wrap' }}>
            <button className="btn btn-primary" style={{ fontSize: 13 }} onClick={() => setPage('contact')}>Request a demo</button>
            <a className="btn btn-ghost" style={{ fontSize: 13 }} href="mailto:hello@timegainai.com">Email us</a>
          </div>
        </div>
        <div>
          <div className="mono" style={{ marginBottom: 16 }}>Company</div>
          <div style={{ display: 'grid', gap: 10 }}>
            <a onClick={() => setPage('home')} style={{ fontSize: 14, color: 'var(--ink-dim)', cursor: 'pointer' }}>Home</a>
            <a onClick={() => setPage('services')} style={{ fontSize: 14, color: 'var(--ink-dim)', cursor: 'pointer' }}>Services</a>
            <a onClick={() => setPage('process')} style={{ fontSize: 14, color: 'var(--ink-dim)', cursor: 'pointer' }}>Approach</a>
            <a onClick={() => setPage('about')} style={{ fontSize: 14, color: 'var(--ink-dim)', cursor: 'pointer' }}>About</a>
          </div>
        </div>
        <div>
          <div className="mono" style={{ marginBottom: 16 }}>Contact</div>
          <div style={{ display: 'grid', gap: 10 }}>
            <a href="mailto:hello@timegainai.com" style={{ fontSize: 14, color: 'var(--ink-dim)' }}>hello@timegainai.com</a>
            <a href="https://www.linkedin.com/in/timegain-ai" target="_blank" rel="noopener noreferrer" style={{ fontSize: 14, color: 'var(--ink-dim)' }}>LinkedIn</a>
            <a onClick={() => setPage('contact')} style={{ fontSize: 14, color: 'var(--ink-dim)', cursor: 'pointer' }}>Request a demo</a>
            <span style={{ fontSize: 14, color: 'var(--ink-dim)' }}>Fishers, Indiana</span>
          </div>
        </div>
        <div>
          <div className="mono" style={{ marginBottom: 16 }}>Legal</div>
          <div style={{ display: 'grid', gap: 10 }}>
            <span style={{ fontSize: 13, color: 'var(--ink-dim)' }}>Infinite Horizons LLC</span>
            <span style={{ fontSize: 13, color: 'var(--ink-dim)' }}>dba Timegain AI Solutions</span>
            <span style={{ fontSize: 13, color: 'var(--ink-dim)' }}>Fishers, IN · United States</span>
          </div>
        </div>
      </div>
      <div style={{
        maxWidth: 1280, margin: isMobile ? '32px auto 0' : '60px auto 0',
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-faint)',
        paddingTop: 24, borderTop: '1px solid var(--bg-line)', flexWrap: 'wrap', gap: 12,
      }}>
        <span>© 2026 Infinite Horizons LLC dba Timegain AI Solutions. All rights reserved.</span>
      </div>
    </footer>
  );
}

window.HomePage = HomePage;
window.Footer = Footer;