// about-page.jsx — About the founder and practice
function AboutPage({ setPage }) {
  const isMobile = useIsMobile(640);

  const creds = [
  { k: '6+ YRS', v: 'IT experience' },
  { k: '3.5+ YRS', v: 'Implementing AI in operational environments' },
  { k: 'OXFORD', v: 'Saïd Business School coursework' },
  { k: 'GOOGLE', v: 'Cloud certifications' },
  { k: 'MIT', v: 'Certifications in progress · mid 2026' },
  { k: 'GOVERNANCE', v: 'Authored AI responsible-use policy at scale' }];


  return (
    <div className="page-fade">
      <section className="about-top" style={{ position: 'relative', paddingTop: 160, paddingBottom: 40, overflow: 'hidden' }}>
        <div className="grid-bg" />
        <div className="section" style={{ paddingTop: 20, paddingBottom: 40, position: 'relative' }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1.5fr 0.85fr',
            gap: isMobile ? 32 : 72,
            alignItems: 'flex-start'
          }}>
            <div>
              <Reveal>
                <div className="tag" style={{ marginBottom: 28 }}>
                  <span style={{ width: 6, height: 6, background: 'var(--accent)', borderRadius: 3 }} />
                  About · Fishers, Indiana
                </div>
              </Reveal>
              <Reveal delay={80}>
                <h1 style={{
                  fontSize: 'clamp(36px, 5.5vw, 76px)', fontWeight: 500,
                  letterSpacing: '-0.035em', lineHeight: 0.98, margin: 0,
                  textWrap: 'balance'
                }}>
                  We give you<br />
                  your time<br />
                  <span style={{ color: 'var(--accent)' }}>back.</span>
                </h1>
              </Reveal>
              <Reveal delay={200}>
                <div style={{ marginTop: 36, display: 'grid', gap: 20, color: 'var(--ink-dim)', fontSize: isMobile ? 15 : 17, lineHeight: 1.55, maxWidth: 640 }}>
                  <p style={{ margin: 0 }}>
                    Timegain AI Solutions helps small and mid-size businesses eliminate
                    administrative waste, capture missed revenue, and automate manual
                    workflows with AI. We work with teams across industries, with particular
                    strength in operational and field-service environments.
                  </p>
                  <p style={{ margin: 0 }}>
                    The thesis is simple. Skilled workers across every industry lose a huge
                    share of their week to administrative tax. AI is now mature enough to
                    eliminate most of that tax and hand those hours back to revenue
                    generating work.
                  </p>
                  {!isMobile &&
                  <p style={{ margin: 0 }}>
                      If you are a decision maker at a small or mid-size business and you can
                      feel the drag, you are the customer this practice was built for.
                    </p>
                  }
                </div>
              </Reveal>
              <Reveal delay={320}>
                <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                  <Magnetic>
                    <button className="btn btn-primary" style={{ fontSize: 15, padding: '14px 24px' }}
                    onClick={() => setPage('contact')}>Request a demo</button>
                  </Magnetic>
                  <Magnetic>
                    <a className="btn btn-ghost" style={{ fontSize: 15, padding: '14px 24px' }}
                    href="mailto:hello@timegainai.com">Email us</a>
                  </Magnetic>
                </div>
              </Reveal>
            </div>

            <Reveal delay={200}>
              <div style={{
                background: 'var(--bg-panel)', border: '1px solid var(--bg-line)',
                borderRadius: 16, overflow: 'hidden',
                maxWidth: isMobile ? '100%' : 380,
                marginLeft: isMobile ? 0 : 'auto'
              }}>
                {/* Photo flush to top, full width */}
                <div style={{ position: 'relative' }}>
                  <div style={{
                    aspectRatio: '4/5', overflow: 'hidden',
                    background: 'var(--bg)',
                  }}>
                    <img src="assets/founder.png" alt="Baher Tawedrous"
                    style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
                  </div>
                  {/* FOUNDER label overlaid bottom of photo */}
                  <div className="mono" style={{
                    position: 'absolute', bottom: 12, left: 16,
                    color: 'var(--accent-2)', fontSize: 11,
                    background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)',
                    padding: '4px 10px', borderRadius: 6
                  }}>// FOUNDER</div>
                </div>
                {/* Name & creds */}
                <div style={{ padding: isMobile ? 20 : 20 }}>
                  <div style={{ fontSize: isMobile ? 18 : 19, fontWeight: 500, letterSpacing: '-0.02em' }}>Baher Tawedrous</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-dim)', marginTop: 3 }}>
                    Founder &amp; AI Solutions Architect · Fishers, IN
                  </div>
                  <div style={{ marginTop: 16, display: 'grid', gap: 8 }}>
                    {creds.map((c) =>
                    <div key={c.k} style={{ display: 'grid', gridTemplateColumns: '88px 1fr', gap: 10, alignItems: 'baseline' }}>
                        <span className="mono" style={{ color: 'var(--accent)', fontSize: 10 }}>{c.k}</span>
                        <span style={{ fontSize: 12, color: 'var(--ink-dim)', lineHeight: 1.4 }}>{c.v}</span>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 40 }}>
        <Reveal>
          <div className="mono" style={{ color: 'var(--accent-2)', marginBottom: 24 }}>// HOW WE WORK</div>
        </Reveal>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
          gap: 16, alignItems: 'stretch'
        }}>
          {[
          ['Industry agnostic, operationally fluent', 'We work across industries, with particular strength in operational and field-service teams. The framing transfers, the patterns repeat.'],
          ['Grounded in 3.5+ years of real AI work', 'Every recommendation is anchored in production AI tools we have already shipped inside a real operational company. Not classroom theory.'],
          ['Defined scope, defined deliverables', 'Three clear stages, fixed-fee Implementation, and a Model Documentation Card with every solution. No surprise scope changes.'],
          ['Human-in-the-loop by default', 'AI augments your team, it does not replace judgment. Every solution ships with guardrails, governance, and a path to expand safely.']].
          map(([t, b], i) =>
          <Reveal key={t} delay={i * 60} style={{ display: 'flex' }}>
              <Spotlight style={{
              padding: 28, border: '1px solid var(--bg-line)', borderRadius: 14, background: 'var(--bg-panel)',
              height: '100%', width: '100%',
              display: 'flex', flexDirection: 'column'
            }}>
                <div style={{ fontSize: 20, fontWeight: 500, marginBottom: 10, letterSpacing: '-0.01em' }}>{t}</div>
                <div style={{ fontSize: 14, color: 'var(--ink-dim)', lineHeight: 1.55 }}>{b}</div>
              </Spotlight>
            </Reveal>
          )}
        </div>
      </section>

      <section className="section" style={{ paddingTop: 40 }}>
        <Reveal>
          <div className="mono" style={{ color: 'var(--accent)', marginBottom: 24 }}>// BACKGROUND</div>
        </Reveal>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1.2fr',
          gap: isMobile ? 16 : 60,
          alignItems: 'flex-start', marginBottom: 40
        }}>
          <Reveal>
            <h2 style={{
              fontSize: 'clamp(28px, 4.5vw, 56px)', fontWeight: 500,
              letterSpacing: '-0.03em', lineHeight: 1.02, margin: 0, textWrap: 'balance'
            }}>
              Hands-On AI Experience
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p style={{ color: 'var(--ink-dim)', fontSize: isMobile ? 15 : 17, lineHeight: 1.55, margin: 0, maxWidth: 580 }}>
              Beyond Timegain, Baher has spent 3.5+ years building production AI tools
              inside a mid-size operational company. Every Timegain engagement is anchored
              in hard-won lessons from real workflows, not classroom theory.
            </p>
          </Reveal>
        </div>
        <Reveal delay={200}>
          <Spotlight style={{
            padding: isMobile ? 20 : 36, border: '1px solid var(--bg-line)', borderRadius: 16,
            background: 'var(--bg-panel)'
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8, flexWrap: 'wrap', gap: 8 }}>
              <div style={{ fontSize: isMobile ? 18 : 24, fontWeight: 500, letterSpacing: '-0.02em' }}>
                Prior In-House AI Work
              </div>
              <span className="mono" style={{ color: 'var(--accent)', fontSize: 11 }}>3.5+ YEARS</span>
            </div>
            <div style={{ color: 'var(--ink-dim)', fontSize: 14, marginBottom: 20 }}>
              3.5+ years at a mid-size operational company. Identity kept confidential.
            </div>
            <div style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
              gap: 12
            }}>
              {[
              'Advises owners, IT leadership, and executive teams on AI strategy and adoption across departments',
              'Initiated, scoped, and led 17 internal AI projects from concept to production',
              'Researched and evaluated enterprise AI platforms, secured executive approval, and led full implementation',
              'Builds custom AI tools for teams across the organization, from field operations to executive reporting',
              'Authored AI governance, security, and responsible-use policies adopted company-wide',
              'Serves as a go-to internal resource for AI questions across departments'].
              map((b, i) =>
              <div key={i} style={{
                display: 'flex', alignItems: 'flex-start', gap: 12,
                padding: '14px 16px', borderRadius: 10,
                background: 'var(--bg-elev)', border: '1px solid var(--bg-line)'
              }}>
                  <svg width="14" height="14" viewBox="0 0 14 14" style={{ flexShrink: 0, marginTop: 4 }}>
                    <path d="M3 7 L6 10 L11 4" stroke="var(--accent)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <div style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.5 }}>{b}</div>
                </div>
              )}
            </div>
          </Spotlight>
        </Reveal>
      </section>

      <CTABand setPage={setPage} />
    </div>);

}

window.AboutPage = AboutPage;