// What an engagement looks like - a scoping call, then the first month, then
// the standing cadence. Runs as a horizontal pipeline 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,
    },
  ];

  const [hover, setHover] = React.useState(-1);

  return (
    <section id="engagement" className="section" style={{ position: 'relative' }}>
      <style>{`
        /* a shallow raised band behind the whole pipeline, so the section reads
           as a distinct surface without a hard edge */
        .eng-band {
          position: absolute;
          inset: 0;
          pointer-events: none;
          background: linear-gradient(180deg, transparent, rgba(14,16,23,0.9) 18%, rgba(14,16,23,0.9) 82%, transparent);
          border-top: 1px solid var(--hairline);
          border-bottom: 1px solid var(--hairline);
        }

        .eng-grid {
          margin-top: 36px;
          display: grid;
          grid-template-columns: repeat(5, 1fr);
        }
        .eng-step { padding-right: 26px; }
        .eng-rail { position: relative; height: 26px; margin-bottom: 22px; }
        /* the segment runs past its own column to meet the next node, so the
           five stops read as one continuous pipeline */
        .eng-line {
          position: absolute; left: 0; right: -26px; top: 12px;
          height: 1px;
          background: linear-gradient(to right, var(--emerald-mid), var(--hairline-2));
        }
        .eng-step:last-child .eng-line {
          right: 0;
          background: linear-gradient(to right, var(--hairline-2), transparent);
        }
        .eng-node {
          position: absolute; left: 0; top: 6px;
          width: 14px; height: 14px; border-radius: 50%;
          background: var(--bg-raised);
          border: 1.5px solid var(--emerald);
          box-sizing: border-box;
          box-shadow: 0 0 0 5px rgba(16,185,129,0.07), 0 0 18px -2px rgba(16,185,129,0.55);
          transition: transform 360ms var(--ease), box-shadow 360ms var(--ease),
                      background 360ms var(--ease);
        }
        .eng-node.is-first {
          background: var(--emerald);
          animation: pulseRing 3s ease-out infinite;
        }
        .eng-step.is-hover .eng-node {
          transform: scale(1.35);
          background: var(--emerald);
          box-shadow: 0 0 0 7px rgba(16,185,129,0.12), 0 0 28px 0 rgba(16,185,129,0.8);
        }

        .eng-marker {
          font-family: 'JetBrains Mono', ui-monospace, monospace;
          font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
          color: var(--emerald);
        }
        .eng-title {
          margin-top: 13px;
          font-family: 'Instrument Serif', serif;
          font-size: 25px; line-height: 1.12; letter-spacing: -0.02em;
          color: var(--ink);
        }
        .eng-text {
          margin: 12px 0 0;
          font-size: 13.5px; line-height: 1.65; color: var(--ink-2);
          max-width: 420px;
          transition: color 360ms var(--ease);
        }
        .eng-step.is-hover .eng-text { color: var(--ink); }

        @media (max-width: 900px) {
          .eng-band { display: none; }
          .eng-grid { grid-template-columns: 1fr !important; margin-top: 28px !important; }
          /* the pipeline turns on its side and becomes the spine of a stepper */
          .eng-step {
            display: grid; grid-template-columns: 26px 1fr;
            column-gap: 20px; padding-right: 0; padding-bottom: 34px;
          }
          .eng-step:last-child { padding-bottom: 0; }
          .eng-rail { height: auto; margin-bottom: 0; align-self: stretch; }
          .eng-line {
            left: 6px; right: auto; top: 22px; bottom: -34px;
            width: 1px; height: auto;
            background: linear-gradient(to bottom, var(--emerald-mid), var(--hairline-2)) !important;
          }
          .eng-step:last-child .eng-line { display: none; }
          .eng-node { top: 5px; }
          .eng-title { font-size: 23px !important; }
        }
      `}</style>

      <span className="eng-band" aria-hidden="true" />

      <div className="shell" style={{ position: 'relative' }}>
        <window.NlReveal>
          <h2 style={window.nlHeadingStyle}>What an engagement looks like.</h2>
        </window.NlReveal>

        <div className="eng-grid">
          {steps.map((s, i) =>
          <window.NlReveal
            key={i}
            delay={i * 90}
            className={hover === i ? 'eng-step is-hover' : 'eng-step'}
            onMouseEnter={() => setHover(i)}
            onMouseLeave={() => setHover(-1)}>
            <div className="eng-rail">
              <span className="eng-line" />
              <span className={s.first ? 'eng-node is-first' : 'eng-node'} />
            </div>

            <div>
              <div className="eng-marker">{s.marker}</div>
              <div className="eng-title">{s.title}</div>
              <p className="eng-text">{s.text}</p>
            </div>
          </window.NlReveal>
          )}
        </div>
      </div>
    </section>);
}

window.Engagement = Engagement;