/* The agenda, Alan's high-level map of Flywheel, paid off in the chapters that follow. */

function Advertorial() {
  const ch = window.PITCH.advertorial;
  return (
    <section className="section ink" id="advertorial" data-rail="The big picture" data-tone="dark">
      <div className="wrap">
        <p className="kicker"><Reveal as="span">The big picture</Reveal></p>
        <Split tag="h2" className="head" text={'Four ways to understand it.'} style={{ color: '#fff', maxWidth: '14ch' }} />
        <Reveal delay={150} style={{ marginTop: 22, maxWidth: 600 }}>
          <p className="lead">Four views of one operating model: AI for the volume, humans for the brand. The first three are the machine; the fourth is what keeps it honest.</p>
        </Reveal>

        <div className="agenda" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'clamp(20px,2.4vw,40px)', marginTop: 'clamp(40px,7vh,80px)' }}>
          {ch.map((c, i) => (
            <Reveal key={c.n} delay={i * 90} variant="rise">
              <div style={{ borderTop: '1px solid rgba(255,255,255,0.16)', paddingTop: 22 }}>
                <span className="agenda-n" style={{ display: 'block', marginBottom: 16 }}>{c.n}</span>
                <h3 className="sub" style={{ color: '#fff', fontSize: 'clamp(18px,1.7vw,25px)', lineHeight: 1.14, margin: 0 }}>{c.title}</h3>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Advertorial });