const PHOTOS = {
  maggie: 'assets/team-maggie-valiunas.png', jennifer: 'assets/team-jennifer-wang.png', alex: 'assets/team-alex-yae.png',
  kathy: 'assets/team-kathy-tran.png', shin: 'assets/team-shin-tanaka.png',
};

const OneTeam = () => {
  const vendors = [
    ['Strategy consultant', 'Quarterly deck', 'Invoice', 'Lead'],
    ['Media agency', 'Platform report, weekly', '% of spend', 'Strategy'],
    ['Creative shop', 'Billed per asset', 'Invoice', 'Media'],
    ['CRO vendor', 'Test results, monthly', 'Retainer', 'Creative'],
    ['Analytics contractor', 'Their own dashboard', 'Hourly', 'Data'],
  ];
  const apex = [
    ['Maggie Valiunas', 'Engagement lead', PHOTOS.maggie],
    ['Jennifer Wang', 'Strategy and planning', PHOTOS.jennifer],
    ['Alex Yae', 'Paid search', PHOTOS.alex],
    ['Kathy Tran', 'Creative and landing tests', PHOTOS.kathy],
    ['Shin Tanaka', 'Measurement and reporting', PHOTOS.shin],
  ];
  return (
    <section className="sec sec-white" id="one-team">
      <div className="wrap">
        <div className="sec-head" data-reveal>
          <h2 className="h2">One senior team instead of multiple vendors.</h2>
          <p className="lede">Most companies stitch growth together from a strategy firm, a media agency, a creative shop, a CRO vendor and an analytics contractor. <strong>Apex covers all of it as one partner</strong>, with agentic workflows underneath, so the people who set your strategy are the people in your accounts every week.</p>
        </div>
        <div className="compare">
          <div className="card compare-col" data-reveal>
            <div className="compare-head"><div><span className="label" style={{ display: 'block', marginBottom: 4 }}>The old way</span><strong>Your former vendor stack</strong></div><span className="label">5 invoices · 5 reports</span></div>
            {vendors.map(([v, rep, bill, role]) => (
              <div className="row" key={v}><div><strong>{v}</strong><small>{rep}</small></div><div style={{ display: 'flex', gap: 6 }}><span className="chip chip-mute">{bill}</span><span className="chip">{role}</span></div></div>
            ))}
          </div>
          <div className="card compare-col apex" data-reveal>
            <div className="compare-head"><div><span className="label" style={{ display: 'block', marginBottom: 4, color: 'var(--blue-700)' }}>The new way</span><strong style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span style={{ width: 20, height: 20, display: 'inline-block' }}><Mark /></span>Your all-in-one Apex partner</strong></div><span className="label" style={{ color: 'var(--blue-700)' }}>One team · One weekly note</span></div>
            {apex.map(([n, r, src]) => (
              <div className="row" key={n}><div className="who"><img className="avatar" src={src} alt="" /><div><strong>{n}</strong><small>{r}</small></div></div></div>
            ))}
            <a href="#team" style={{ fontWeight: 600, fontSize: 14.5, marginTop: 6 }}>Meet the team →</a>
          </div>
        </div>
      </div>
    </section>
  );
};

const WhoWeWorkWith = () => {
  const nots = [
    ['A staffing shop', 'You get a named senior team, not seats to fill.'],
    ['A PowerPoint factory', 'We run your accounts every week, not just the strategy deck.'],
    ['A black-box agency', 'Your accounts, data and creative stay yours. You see every test.'],
    ['Prompt resale', 'AI does the volume. A seasoned growth strategist owns every output.'],
  ];
  return (
    <section className="sec sec-white" style={{ paddingTop: 0, borderTop: 0 }}>
      <div className="wrap">
        <div className="sec-head" data-reveal>
          <span className="label">Who we work with</span>
          <h2 className="h3" style={{ fontSize: 'clamp(24px,2.6vw,34px)' }}>AI, B2B, B2C, fintech and subscription brands, from Series A to public companies.</h2>
          <p className="lede">Teams whose channels work but keep getting more expensive, and who want <strong>senior people in the accounts</strong> instead of more vendors.</p>
        </div>
        <div className="not-grid">
          {nots.map(([t, d]) => <div className="card not" key={t} data-reveal><span className="label not-x" aria-hidden="true"><svg viewBox="0 0 12 12" width="12" height="12"><path d="M2 2l8 8M10 2l-8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"></path></svg>Not</span><strong><s>{t}</s></strong><p>{d}</p></div>)}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { PHOTOS, OneTeam, WhoWeWorkWith });