// What an engagement looks like - a scoping call, then the first month, then
// the standing cadence. Runs as a horizontal rail on desktop and folds into a
// vertical stepper on narrow screens, where five columns can't survive.
function Engagement() {
  const steps = [
    {
      marker: 'Scoping call',
      title: 'We scope it.',
      text: 'We work out which parts of the finance function you want off your plate.',
      first: true,
    },
    {
      marker: 'Week 1',
      title: 'Kickoff.',
      text: 'System access, a review of your data, and a close calendar set with whoever keeps your books.',
    },
    {
      marker: 'Weeks 2–3',
      title: 'The build.',
      text: 'Your operating model and your finance stack built out, on the tools you already run or the ones I’d recommend.',
    },
    {
      marker: 'Week 4',
      title: 'First review.',
      text: 'Model, runway, and KPIs walked through together, with written commentary you can forward to investors.',
    },
    {
      marker: 'Every month after',
      title: 'The cadence.',
      text: 'Books closed by business day 10, investor update out by the 15th. Longer projects run alongside, at a pace you’re comfortable with.',
      last: true,
    },
  ];

  return (
    <section id="engagement" style={{
      padding: '48px 32px',
      background: 'var(--bg-alt)',
      borderBottom: '1px solid var(--line-2)',
    }}>
      <style>{`
        .eng-grid {
          margin-top: 52px;
          display: grid;
          grid-template-columns: repeat(5, 1fr);
        }
        .eng-step { padding-right: 28px; }
        .eng-rail { position: relative; height: 22px; margin-bottom: 20px; }
        /* the segment runs past its own column to meet the next node, so the
           five stops read as one continuous rail */
        .eng-line {
          position: absolute; left: 0; right: -28px; top: 10px;
          height: 1px; background: var(--line);
        }
        .eng-step:last-child .eng-line {
          right: 0;
          background: linear-gradient(to right, var(--line), transparent);
        }
        .eng-node {
          position: absolute; left: 0; top: 4px;
          width: 13px; height: 13px; border-radius: 50%;
          background: var(--bg-alt);
          border: 1.5px solid var(--accent);
          box-sizing: border-box;
        }
        .eng-node.is-first { background: var(--accent); }

        @media (max-width: 900px) {
          .eng-grid { grid-template-columns: 1fr !important; margin-top: 40px !important; }
          /* the rail turns on its side and becomes the spine of a stepper */
          .eng-step {
            display: grid; grid-template-columns: 22px 1fr;
            column-gap: 20px; padding-right: 0; padding-bottom: 32px;
          }
          .eng-step:last-child { padding-bottom: 0; }
          .eng-rail { height: auto; margin-bottom: 0; align-self: stretch; }
          .eng-line {
            left: 6px; right: auto; top: 20px; bottom: -32px;
            width: 1px; height: auto;
          }
          .eng-step:last-child .eng-line { display: none; }
          .eng-node { top: 3px; }
        }
      `}</style>

      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <h2 style={window.sectionHeadingStyle}>What an engagement looks like.</h2>

        <div className="eng-grid">
          {steps.map((s, i) =>
          <div className="eng-step" key={i}>
            <div className="eng-rail">
              <span className="eng-line" />
              <span className={s.first ? 'eng-node is-first' : 'eng-node'} />
            </div>

            <div>
              <div className="mono" style={{
                fontSize: 12.5, letterSpacing: '0.1em', textTransform: 'uppercase',
                color: 'var(--accent)',
              }}>
                {s.marker}
              </div>
              <div style={{
                marginTop: 12,
                fontFamily: "'Instrument Serif', serif",
                fontSize: 24, lineHeight: 1.15, letterSpacing: '-0.015em',
                color: 'var(--ink)',
              }}>
                {s.title}
              </div>
              <p style={{
                margin: '12px 0 0',
                fontSize: 14, lineHeight: 1.6, color: 'var(--ink-2)',
                maxWidth: 420,
              }}>
                {s.text}
              </p>
            </div>
          </div>
          )}
        </div>
      </div>
    </section>);

}

window.Engagement = Engagement;