const Process = () => (
  <section className="sec sec-white" id="process">
    <div className="wrap">
      <div className="sec-head" data-reveal><span className="label eyebrow">Process</span><h2 className="h2">Your first full cycle ships by week six.</h2><p className="lede">It starts with a two-week diagnosis, so <strong>you know what to fix first</strong> before you commit to anything bigger.</p></div>
      <div className="proc">
        <div data-reveal>
          {[['Weeks 1–2', 'Diagnose', 'A one-page diagnosis and a plan in the order it should happen.'], ['Weeks 3–6', 'Set up and launch', 'Your brand voice, assets and people set up. First tests go live.'], ['Month 2 onward', 'Run and improve', 'Weekly tests, monthly reviews and quarterly board materials.']].map(([w, t, d]) => (
            <div className="phase" key={t}><span className="label">{w}</span><div><h3>{t}</h3><p>{d}</p></div></div>
          ))}
          <div className="cadence">
            <div><span className="label">Every week</span><strong>Tests and a written note</strong></div>
            <div><span className="label">Every month</span><strong>Strategy review</strong></div>
          </div>
          <div className="card checks" style={{ marginTop: 20 }}>
            {[['Brand voice loaded into the prompts', '✓'], ['Brand assets in the agents', '✓'], ['Conversion signals validated', '✓'], ['A named owner for every output', '✓'], ['First tests live', 'Shipped']].map(([t, s]) => <div key={t}><span>{t}</span><b>{s}</b></div>)}
          </div>
        </div>
        <div className="notes" data-reveal>
          {[['First', 'Fix measurement', 'Revenue events to the platforms, not form fills.', 'y'], ['Second', 'Load your brand', 'Voice, assets and guardrails into the agents.', 'b'], ['Third', 'Launch tests', 'First creative and landing tests live by week six.', 'p'], ['Fourth', 'Scale what wins', 'Budget follows proof. Fatigue triggers new creative.', 'g'], ['Every quarter', 'Board deck', 'What we spent, what it returned, what we learned, where the next dollar goes.', 'y']].map(([o, t, d, c], k) => (
            <div className={`note-card tone-${c}`} key={t} style={{ '--i': k }}><span className="label">{o}</span><strong>{t}</strong><p>{d}</p></div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const Investment = () => (
  <section className="sec sec-white" id="investment">
    <div className="wrap invest">
      <div className="sec-head" data-reveal style={{ marginBottom: 0 }}>
        <h2 className="h2">What you invest, and what it buys.</h2>
        <p className="lede">You're paying for senior team members on your account at all times, with the system and AI behind them. Pricing scales with throughput, so you never fund headcount you don't use, and our fee doesn't grow when your media budget does.</p>
        <div><a href="mailto:dave@apexgrowth.co" className="btn btn-primary">Get a scoped proposal →</a></div>
      </div>
      <div className="card terms" data-reveal>
        <div className="terms-head"><span>Terms of engagement</span><span>Apex Growth</span></div>
        {[['Fee', "Flat and monthly. No percentage of spend, so we're not paid to grow your budget."], ['Team', 'Named and senior. No substitutions without notice.'], ['Response', 'A seasoned growth strategist within four hours, during business hours.'], ['Ownership', 'Accounts, data and creative remain yours.'], ['Exit', 'Ninety days, with a full documented handover.']].map(([k, v]) => (
          <div className="term" key={k}><strong>{k}</strong><p>{v}</p></div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { Process, Investment });