const Team = () => {
  const people = [
    ['Dave Riggs', 'Founder / CEO', 22, 'assets/team-dave-riggs.png'],
    ['Maggie Valiunas', 'Chief Growth Officer', 20, 'assets/team-maggie-valiunas.png'],
    ['Jennifer Wang', 'VP of Growth Marketing', 21, 'assets/team-jennifer-wang.png'],
    ['Charlotte Olsen', 'Head of Operations', 20, 'assets/team-charlotte-olsen.webp'],
    ['Alex Yae', 'Senior Manager, SEM', 12, 'assets/team-alex-yae.png'],
    ['Shin Tanaka', 'Senior Manager, Analytics', 11, 'assets/team-shin-tanaka.png'],
    ['Kathy Tran', 'Senior Manager, Creative Strategy', 15, 'assets/team-kathy-tran.png'],
    ['Cameron Martel', 'Head of SEO', 20, 'assets/team-cameron-martel.webp'],
  ];
  const bios = {
    'Dave Riggs': { text: 'Software engineer turned media buyer, Dave has personally managed over $1B in ad spend since 2005. He was early on Google AdWords (Ads), MyAds (MySpace Ads), and Facebook Ads, and has jumped on nearly every new ad network since. He\u2019s driven growth for Snap, Ring, Fox, Pluto TV, Shopify, Experian, and TransUnion.', li: 'https://www.linkedin.com/in/daveriggs' },
  };
  return (
    <section className="sec sec-tint" id="team">
      <div className="wrap">
        <div className="sec-head" data-reveal>
          <span className="label">Leadership</span>
          <h2 className="h2">The people you meet are the people who do the work.</h2>
          <p className="lede"><strong>More than 100 years of combined leadership experience</strong> across agency, in-house and platform roles, at companies like Shopify, TransUnion, Experian and Upstart. Leadership is listed below, and <strong>a bench of 25+ specialists we staff to each account's needs</strong>.</p>
        </div>
        <div className="team-grid">
          {people.map(([n, r, y, src, slot], k) => (
            <article className="member" key={n} data-reveal style={{ transitionDelay: `${(k % 4) * 60}ms` }}>
              <div className="portrait">
                {src ? <img src={src} alt={`${n}, ${r}`} /> : <image-slot id={`portrait-${slot}`} shape="rect" placeholder={`Drop photo · ${n}`}></image-slot>}
                <span className="yrs">{y} yrs</span>
                {bios[n] && (
                  <div className="bio" tabIndex={0}>
                    <p>{bios[n].text}</p>
                    <a href={bios[n].li} target="_blank" rel="noopener noreferrer" className="bio-li" aria-label={`${n} on LinkedIn`}>
                      <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><rect width="24" height="24" rx="4" fill="#0A66C2"></rect><path d="M7.1 9.6h2.6V18H7.1zM8.4 5.6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zM11.3 9.6h2.5v1.1h.1c.4-.7 1.2-1.4 2.6-1.4 2.7 0 3.2 1.8 3.2 4.1V18h-2.6v-4.1c0-1 0-2.2-1.4-2.2s-1.6 1.1-1.6 2.2V18h-2.6z" fill="#fff"></path></svg>
                      <span>Connect here on LinkedIn!</span>
                    </a>
                  </div>
                )}
              </div>
              <div><strong>{n}</strong><span>{r}</span></div>
            </article>
          ))}
        </div>
        <div className="bench card" data-reveal>
          <div className="bench-copy"><span className="label eyebrow">Plus a deep bench</span><strong>25+ specialists, matched to what your account needs</strong><p>Your lead pulls in the right specialists for each stage, and scales the team up or down as priorities shift. No waiting to hire.</p></div>
          <div className="bench-roles">{['Media buyers', 'Data analysts', 'Creative strategists', 'Designers and editors', 'CRO developers', 'SEO specialists', 'Marketing ops', 'Project managers'].map(r => <span className="bench-chip" key={r}>{r}</span>)}</div>
        </div>
      </div>
    </section>
  );
};

const CTA = () => (
  <section className="sec sec-white closer">
    <div className="wrap closer-row" data-reveal>
      <h2 className="h3">Ready to see where your growth is leaking?</h2>
      <a href={window.CTA_URL} data-form="1" className="btn btn-primary">Talk to an expert →</a>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="wrap">
      <div className="foot-grid">
        <div><div className="brand"><img className="logo-img" src="assets/apex-logo.png" alt="Apex Growth" /></div><p>Seasoned growth strategists running strategy, paid acquisition, CRO, analytics and creative for AI, B2B, B2C, fintech and subscription brands.</p></div>
        <div className="foot-col"><span className="label">On this page</span><a href="#team">Team</a><a href="#work">Results</a><a href="#services">Services</a></div>
        <div className="foot-col"><span className="label">Contact</span><a href="mailto:info@apexgrowth.co">info@apexgrowth.co</a></div>
      </div>
      <div className="foot-bottom"><span>© 2026 Apex Growth. All rights reserved.</span><div><a href="https://www.apexgrowth.co/privacy-policy">Privacy Policy</a><a href="https://www.apexgrowth.co/cookie-policy">Cookie Policy</a><a href="https://www.apexgrowth.co/terms-and-conditions">Terms and Conditions</a></div></div>
    </div>
  </footer>
);

Object.assign(window, { Team, CTA, Footer });