// process-page.jsx — Approach / How We Work (3 phases, 30-90 day rhythm)
function ProcessPage({ setPage }) {
  const isMobile = useIsMobile(640);

  const steps = [
    {
      n: '01', k: 'PAID SCOPING', title: 'Discovery',
      body: 'A paid scoping engagement. We sit down with the teams doing the work, map current workflows, identify the highest-leverage AI opportunities, and establish the baseline metrics every later phase will measure against. Output: a prioritized roadmap and a fixed-fee Implementation proposal.',
      deliv: ['Workflow map', 'Highest-leverage opportunities', 'Baseline metrics', 'Fixed-fee Implementation proposal']
    },
    {
      n: '02', k: 'FIXED FEE', title: 'Implementation',
      body: 'A fixed-fee build and deploy phase. We design, build, and roll out AI tools tailored to your specific workflows, with human-in-the-loop guardrails and a Model Documentation Card delivered with every solution. Clear milestones, measurable outcomes, no surprise scope changes.',
      deliv: ['Tailored AI tools', 'Human-in-the-loop guardrails', 'Model Documentation Card', 'Clear milestones']
    },
    {
      n: '03', k: 'MONTHLY RETAINER', title: 'Ongoing Partnership',
      body: 'A monthly retainer for continuous improvement. Once the first solution is in production, we keep models tuned, governance current, and expand into new use cases as they emerge. The fastest path from a single AI win to organization-wide adoption.',
      deliv: ['Continuous tuning', 'Governance maintenance', 'New use case expansion', 'Organization-wide adoption']
    },
  ];

  return (
    <div className="page-fade">
      <section className="process-top" style={{ position: 'relative', paddingTop: isMobile ? 100 : 160, paddingBottom: 40, overflow: 'hidden' }}>
        <div className="grid-bg"/>
        <div className="section" style={{ paddingTop: 20, paddingBottom: 40, position: 'relative' }}>
          <Reveal>
            <div className="tag" style={{ marginBottom: 28 }}>
              <span style={{ width: 6, height: 6, background: 'var(--accent-2)', borderRadius: 3 }}/>
              How We Engage · three clear stages
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{
              fontSize: 'clamp(36px, 6vw, 84px)', fontWeight: 500,
              letterSpacing: '-0.035em', lineHeight: 0.98, margin: 0,
              maxWidth: 1000, textWrap: 'balance',
            }}>
              The <span style={{ color: 'var(--accent)' }}>Engagement Model.</span>
            </h1>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ marginTop: 28, fontSize: isMobile ? 15 : 19, color: 'var(--ink-dim)', maxWidth: 680, lineHeight: 1.5 }}>
              Three clear stages, each with a defined scope and deliverables. Every
              engagement starts with a paid Discovery so the work is grounded in your
              real workflows from day one.
            </p>
          </Reveal>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 40 }}>
        <div style={{ position: 'relative' }}>
          {/* Vertical timeline line — only on desktop where the gutter is wide enough */}
          {!isMobile && (
            <div style={{
              position: 'absolute', left: 23, top: 24, bottom: 24, width: 2,
              background: 'linear-gradient(to bottom, transparent, var(--bg-line) 6%, var(--bg-line) 94%, transparent)',
            }}/>
          )}
          <div style={{ display: 'grid', gap: 20 }}>
            {steps.map((s, i) => (
              <Reveal key={s.n} delay={i * 60}>
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: isMobile ? '1fr' : '80px 1fr',
                  gap: isMobile ? 12 : 24,
                  alignItems: 'flex-start',
                }}>
                  {!isMobile && (
                    <div style={{ position: 'relative', paddingTop: 24 }}>
                      <div style={{
                        width: 48, height: 48, borderRadius: 24,
                        background: 'var(--bg-elev)', border: '1px solid var(--bg-line)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 500,
                        position: 'relative', zIndex: 2,
                        color: 'var(--accent)',
                      }}>{s.n}</div>
                    </div>
                  )}
                  <Spotlight style={{
                    background: 'var(--bg-panel)', border: '1px solid var(--bg-line)',
                    borderRadius: 14, padding: isMobile ? 20 : 28, flex: 1,
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12, flexWrap: 'wrap', gap: 8 }}>
                      <h3 style={{ fontSize: isMobile ? 22 : 28, fontWeight: 500, letterSpacing: '-0.02em', margin: 0 }}>
                        {isMobile && <span className="mono" style={{ color: 'var(--accent)', fontSize: 11, display: 'block', marginBottom: 4 }}>{s.n}</span>}
                        {s.title}
                      </h3>
                      <span className="mono" style={{ color: 'var(--accent)', fontSize: 10 }}>{s.k}</span>
                    </div>
                    <p style={{ color: 'var(--ink-dim)', fontSize: isMobile ? 14 : 16, lineHeight: 1.55, margin: 0 }}>
                      {s.body}
                    </p>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16 }}>
                      {s.deliv.map(d => (
                        <span key={d} className="tag" style={{ fontSize: 10 }}>
                          <svg width="8" height="8" viewBox="0 0 10 10"><path d="M2 5 L4 7 L8 3" stroke="var(--accent)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                          {d}
                        </span>
                      ))}
                    </div>
                  </Spotlight>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

        <div style={{ marginTop: isMobile ? 48 : 100 }}>
          <Reveal>
            <div className="mono" style={{ color: 'var(--accent-2)', marginBottom: 24 }}>
              // HOW WE OPERATE
            </div>
          </Reveal>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
            gap: 16, alignItems: 'stretch',
          }}>
            {[
              { t: 'Zero disruption to your stack', b: 'We build on top of the CRM, ERP, or field service software you already own. No new platform to learn.' },
              { t: 'Grounded in your real work', b: 'Every engagement starts with a paid Discovery. Solutions are built around how your teams actually operate, not a generic playbook.' },
              { t: 'Your data stays yours', b: 'Clear data ownership and export at every stage. Defined scope, defined deliverables, and measurable outcomes at every stage.' },
            ].map((p, i) => (
              <Reveal key={p.t} delay={i * 80} style={{ display: 'flex' }}>
                <Spotlight style={{
                  padding: 24, border: '1px solid var(--bg-line)',
                  borderRadius: 12, background: 'var(--bg-elev)',
                  height: '100%', width: '100%',
                  display: 'flex', flexDirection: 'column',
                }}>
                  <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 10 }}>{p.t}</div>
                  <div style={{ color: 'var(--ink-dim)', fontSize: 14, lineHeight: 1.5 }}>{p.b}</div>
                </Spotlight>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

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

function CTABand({ setPage }) {
  const isMobile = useIsMobile(640);
  return (
    <section className="section" style={{ paddingTop: 20, paddingBottom: 60 }}>
      <Reveal>
        <div style={{
          position: 'relative', overflow: 'hidden',
          borderRadius: 20,
          background: 'linear-gradient(135deg, var(--bg-panel), var(--bg-elev))',
          border: '1px solid var(--bg-line)',
        }}>
          <div className="grid-bg" style={{ opacity: 0.6 }}/>
          <div style={{ position: 'relative', zIndex: 2, maxWidth: 720, padding: isMobile ? '32px 24px' : '56px 56px' }}>
            <div className="mono" style={{ color: 'var(--accent)', marginBottom: 16 }}>// READY TO TALK</div>
            <h2 style={{
              fontSize: 'clamp(26px, 4.5vw, 52px)', fontWeight: 500,
              letterSpacing: '-0.03em', lineHeight: 1.05, margin: 0, marginBottom: 16,
              textWrap: 'balance',
            }}>
              Tell us where the hours go.<br/>We will show you what AI can give back.
            </h2>
            <p style={{ color: 'var(--ink-dim)', fontSize: isMobile ? 15 : 17, lineHeight: 1.5, margin: 0, marginBottom: 28, maxWidth: 560 }}>
              Every engagement starts with a paid Discovery. Send a note directly,
              or request a demo and we will be in touch.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Magnetic>
                <button className="btn btn-primary" style={{ fontSize: 15, padding: '14px 24px' }}
                  onClick={() => setPage('contact')}>
                  Request a demo
                  <svg width="14" height="14" viewBox="0 0 12 12"><path d="M2 6h8M7 3l3 3-3 3" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </button>
              </Magnetic>
              <Magnetic>
                <a className="btn btn-ghost" style={{ fontSize: 15, padding: '14px 24px' }}
                  href="mailto:hello@timegainai.com">
                  Email us
                </a>
              </Magnetic>
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

window.ProcessPage = ProcessPage;
window.CTABand = CTABand;
