// EngagementSection: Concept B, the Commitment Staircase.
//
// Four stages climb left to right on ascending risers. Each step carries a
// stage number, plain name, duration tick, a one-line "what you walk away
// with," and a "Step off here. Take the work." marker under the step gap.
// Coral lands once, on the top Partnership step (the destination, rhyming
// with the mark's coral triangle). The Risk Reversal folds in as a
// gold-bordered Callout at the bottom of the section.
//
// Self-contained: inline styles + a scoped <style> block. One small effect:
// an IntersectionObserver arms the axis-draw animation when the diagram
// scrolls into view. Stacks to a single column under ~880px (the ascending
// risers AND the axes hide on mobile). Honors prefers-reduced-motion: the
// axes render in their final drawn state with no animation.
//
// The staircase is framed as a 2D diagram. A gold X-axis arrow runs along the
// bottom (right = deeper client relationship); a gold Y-axis arrow climbs the
// right edge (up = deeper engagement). Coral stays reserved for the
// Partnership step. The axes are SVG with a stroke-dashoffset draw.
//
// Reuses window globals: SectionLabel, Headline, Callout.

const { useRef, useEffect, useState } = React;

const EngagementSection = () => {
  const diagramRef = useRef(null);
  const [drawn, setDrawn] = useState(false);

  useEffect(() => {
    const node = diagramRef.current;
    if (!node) return;
    // Reduced motion: skip the observer, render final state immediately.
    const reduce = window.matchMedia
      && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setDrawn(true); return; }
    if (typeof IntersectionObserver === 'undefined') { setDrawn(true); return; }
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) { setDrawn(true); obs.disconnect(); }
        });
      },
      { threshold: 0.35 }
    );
    obs.observe(node);
    return () => obs.disconnect();
  }, []);

  const STAGES = [
    {
      num: '01',
      name: 'AI Leadership Workshop',
      dur: '~2 weeks · 1hr intro + 2hr tailored',
      walk: 'a plan you can run without us',
      coral: false,
    },
    {
      num: '02',
      name: 'Custom AI Blueprint',
      dur: '2 to 6 weeks',
      walk: 'a build plan and the math behind it',
      coral: false,
    },
    {
      num: '03',
      name: 'AI Engineering',
      dur: '4 to 12 weeks per workflow',
      walk: 'a working system you own',
      coral: false,
    },
    {
      num: '04',
      name: 'AI Partnership',
      dur: '12-month minimum · performance-aligned',
      walk: 'compounded returns, year on year',
      coral: true,
    },
  ];

  return (
    <section id="engagements" className="section eng">
      <div className="container">
        <SectionLabel number="04">Engagement</SectionLabel>

        <Headline as="h2" size="d2">
          The work{' '}
          <em style={{ color: 'var(--fg-accent)', fontWeight: 500 }}>compounds</em>{' '}
          one stage at a time.
        </Headline>

        <p className="lead eng__lead">
          Workshop. Blueprint. Engineering. Partnership. Begin with a two-week
          diagnostic and go deeper only when it pays off.
        </p>

        {/* The Commitment Staircase, framed as a 2D diagram with axes.
            X (bottom): depth of client relationship, drawing right.
            Y (right):  depth of engagement, drawing up. */}
        <div
          className={'eng__diagram' + (drawn ? ' is-drawn' : '')}
          ref={diagramRef}
        >
          <div className="eng__stair" role="list">
            {STAGES.map((s) => (
              <div
                key={s.num}
                role="listitem"
                className={'eng__col' + (s.coral ? ' eng__col--coral' : '')}
              >
                <div className="eng__step">
                  <div className="eng__num">{s.num}</div>
                  <div className="eng__name">{s.name}</div>
                  <span className="eng__dur">{s.dur}</span>
                  <span className="eng__walk">
                    Walk away with <span aria-hidden>·</span> {s.walk}
                  </span>
                </div>
                <div className="eng__off">
                  {s.coral ? 'The destination. Compounded returns.' : 'Step off here. Take the work.'}
                </div>
                <div className="eng__riser" aria-hidden />
              </div>
            ))}
          </div>

          {/* X-axis: horizontal arrow along the bottom, drawing to the right. */}
          <svg
            className="eng__axis eng__axis--x"
            viewBox="0 0 100 10"
            preserveAspectRatio="none"
            aria-hidden="true"
          >
            <line
              className="eng__axis-line"
              x1="0" y1="5" x2="96" y2="5"
              vectorEffect="non-scaling-stroke"
            />
            <polyline
              className="eng__axis-head"
              points="92,1.5 97.5,5 92,8.5"
              vectorEffect="non-scaling-stroke"
            />
          </svg>
          <span className="eng__axis-label eng__axis-label--x" aria-hidden="true">
            Depth of client relationship
          </span>

          {/* Y-axis: vertical arrow on the right, drawing upward. */}
          <svg
            className="eng__axis eng__axis--y"
            viewBox="0 0 10 100"
            preserveAspectRatio="none"
            aria-hidden="true"
          >
            <line
              className="eng__axis-line"
              x1="5" y1="100" x2="5" y2="4"
              vectorEffect="non-scaling-stroke"
            />
            <polyline
              className="eng__axis-head"
              points="1.5,8 5,2.5 8.5,8"
              vectorEffect="non-scaling-stroke"
            />
          </svg>
          <span className="eng__axis-label eng__axis-label--y" aria-hidden="true">
            Depth of engagement
          </span>
        </div>

        {/* Risk Reversal, folded in at the bottom as a gold-bordered callout. */}
        <Callout eyebrow="The risk reversal" style={{ marginTop: 'clamp(48px, 6vw, 80px)' }}>
          We ship in stages, not all at once. Each stage has a clear success
          metric defined up front. If a stage does not work, we roll it back
          before the next one starts. The risk of running another year on Excel
          is bigger than the risk of trying us.
        </Callout>

        {/* Pricing: a quiet footnote on paper, not a second gold box. A
            hairline-bordered strip with a DM Mono label and a DM Sans line. */}
        <div className="eng__pricing">
          <span className="eng__pricing-label">How we price</span>
          <p className="eng__pricing-note">
            Every engagement is fixed-scope and outcome-priced. No SaaS seats,
            no hourly billing. You own the code and the models, and we share the
            math up front.
          </p>
        </div>
      </div>

      <style>{`
        /* ---------- The staircase ---------- */
        .eng__lead { margin-top: 32px; margin-bottom: clamp(48px, 6vw, 72px); }

        /* ---------- Diagram frame: holds the staircase + two axes ---------- */
        /* Padding makes room for the X-axis label below and the Y-axis arrow
           and rotated label to the right. */
        .eng__diagram {
          position: relative;
          padding-bottom: 56px;
          padding-right: 60px;
        }

        .eng__stair {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
          align-items: end;
        }
        .eng__col { position: relative; }

        .eng__step {
          background: var(--bg-elev-1);
          border: 1px solid var(--border-soft);
          border-bottom: 2px solid var(--rule-gold);
          border-radius: 4px;
          padding: 26px 24px 28px;
          position: relative;
          transition: border-color var(--dur-base) var(--ease-editorial),
                      transform var(--dur-base) var(--ease-editorial);
        }
        .eng__step:hover {
          border-color: var(--border-gold);
          transform: translateY(-2px);
        }

        .eng__num {
          font-family: var(--font-mono);
          font-size: 11px; font-weight: 500;
          letter-spacing: 0.22em; text-transform: uppercase;
          color: var(--fg-accent);
          margin-bottom: 14px;
        }
        .eng__name {
          font-family: var(--font-display);
          font-weight: 500; font-size: 24px; line-height: 1.14;
          color: var(--fg-1);
          margin-bottom: 16px;
          text-wrap: balance;
        }
        .eng__dur {
          display: block;
          font-family: var(--font-mono);
          font-size: 11px; font-weight: 400;
          letter-spacing: 0.12em; text-transform: uppercase;
          color: var(--fg-2);
          margin-bottom: 18px;
        }
        .eng__walk {
          display: block;
          font-family: var(--font-display);
          font-style: italic; font-weight: 500;
          font-size: 18px; line-height: 1.3;
          color: var(--fg-accent-soft);
          text-wrap: pretty;
        }

        /* "Step off here" marker under each step gap. */
        .eng__off {
          margin-top: 14px;
          padding-top: 12px;
          border-top: 1px dashed var(--border-soft);
          font-family: var(--font-mono);
          font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
          color: var(--fg-2);
        }

        /* Ascending risers: each column sits higher than the one before it,
           so the steps climb left to right. The riser is the dashed vertical
           that visually props each step above the baseline. */
        .eng__riser {
          position: relative;
          margin-left: 12px;
          border-left: 1px dashed var(--border-soft);
        }
        .eng__col:nth-child(1) .eng__riser { height: 0; }
        .eng__col:nth-child(2) .eng__riser { height: 58px; }
        .eng__col:nth-child(3) .eng__riser { height: 116px; }
        .eng__col:nth-child(4) .eng__riser { height: 174px; }

        /* Coral lands once: the top Partnership step. */
        .eng__col--coral .eng__step {
          border: 1px solid var(--coral-line);
          border-bottom: 2px solid var(--coral);
        }
        .eng__col--coral .eng__step:hover { border-color: var(--coral); }
        .eng__col--coral .eng__num,
        .eng__col--coral .eng__name { color: var(--coral); }
        .eng__col--coral .eng__off {
          color: var(--coral);
          border-top-color: var(--coral-line);
        }
        .eng__col--coral .eng__riser { border-left-color: var(--coral-line); }

        /* ---------- Axes: precise gold/muted diagram annotation ---------- */
        /* Each axis is an SVG with a 1px gold stroke. The line + arrowhead are
           drawn via stroke-dashoffset, armed by the .is-drawn class the
           IntersectionObserver adds. Editorial easing, slow draw, staggered. */
        .eng__axis { position: absolute; overflow: visible; }
        .eng__axis-line,
        .eng__axis-head {
          fill: none;
          stroke: var(--rule-gold);
          stroke-width: 1.25px;
          stroke-linecap: square;
          stroke-linejoin: miter;
        }

        /* X-axis: runs full width along the bottom of the ladder. */
        .eng__axis--x {
          left: 0;
          right: 60px;        /* stop short of the Y-axis gutter */
          bottom: 30px;
          height: 10px;
        }
        /* Y-axis: climbs the right gutter, alongside the whole staircase.
           An inline SVG will not stretch its height from top+bottom alone the
           way a block does, so we pin top:0 and an explicit height that runs
           down to the X-axis baseline (the diagram is padded 56px at the
           bottom; the X-axis line sits 30px up from there, so the gap from the
           diagram top to that baseline is the full height minus 30px). */
        .eng__axis--y {
          top: 0;
          height: calc(100% - 30px);   /* top of diagram down to X-axis baseline */
          right: 24px;
          width: 10px;
        }

        /* Draw setup: dash the whole length, offset it fully, then unspool.
           With non-scaling-stroke the dash pattern is measured in screen px,
           so the dash must exceed the LONGEST rendered line (the X-axis runs
           ~1180px wide). A short dash (e.g. 400) leaves a gap at the end of any
           longer line, which clipped the top of the Y-axis arrow. One dash of
           1400px covers both axes with margin, so each line draws fully solid. */
        .eng__axis-line {
          stroke-dasharray: 1400;
          stroke-dashoffset: 1400;
        }
        .eng__axis-head {
          stroke-dasharray: 40;
          stroke-dashoffset: 40;
          opacity: 0;
        }
        .eng__diagram.is-drawn .eng__axis-line {
          animation: eng-draw-line var(--dur-slow) var(--ease-editorial) forwards;
        }
        .eng__diagram.is-drawn .eng__axis--x .eng__axis-line { animation-delay: 80ms; }
        .eng__diagram.is-drawn .eng__axis--y .eng__axis-line { animation-delay: 220ms; }
        .eng__diagram.is-drawn .eng__axis-head {
          animation: eng-draw-head var(--dur-base) var(--ease-editorial) forwards;
        }
        .eng__diagram.is-drawn .eng__axis--x .eng__axis-head { animation-delay: 520ms; }
        .eng__diagram.is-drawn .eng__axis--y .eng__axis-head { animation-delay: 660ms; }

        @keyframes eng-draw-line { to { stroke-dashoffset: 0; } }
        @keyframes eng-draw-head { to { stroke-dashoffset: 0; opacity: 1; } }

        /* Axis labels: DM Mono small caps, muted gold, like a chart annotation. */
        .eng__axis-label {
          position: absolute;
          font-family: var(--font-mono);
          font-size: 10px; font-weight: 500;
          letter-spacing: 0.22em; text-transform: uppercase;
          color: var(--fg-accent);
          opacity: 0;
          transition: opacity var(--dur-base) var(--ease-editorial) 760ms;
          white-space: nowrap;
          pointer-events: none;
        }
        .eng__diagram.is-drawn .eng__axis-label { opacity: 0.85; }

        .eng__axis-label--x {
          left: 0;
          bottom: 8px;
        }
        /* Center the rotated label along the y-axis arrow. The arrow runs from
           the diagram top down to the X-axis baseline (30px up from the bottom),
           so its vertical midpoint is (100% - 30px) / 2. We anchor the label's
           own center there and rotate -90deg about that center, so the text sits
           centered alongside the arrow and reads bottom-to-top. The label is
           ~14px tall and sits just outside the 10px-wide arrow gutter. */
        .eng__axis-label--y {
          top: calc((100% - 30px) / 2);
          right: 12px;
          transform-origin: center center;
          transform: translate(50%, -50%) rotate(-90deg);
        }

        /* ---------- Mobile: clean single-column stack, no ascent ---------- */
        @media (max-width: 880px) {
          .eng__stair { grid-template-columns: 1fr; gap: 18px; }
          .eng__riser { display: none; }
          .eng__name { font-size: 26px; }
          /* The diagram framing only reads with the climbing layout. On the
             single-column stack, drop the axes and their gutters entirely. */
          .eng__diagram { padding-bottom: 0; padding-right: 0; }
          .eng__axis, .eng__axis-label { display: none; }
        }

        /* ---------- Pricing footnote: quiet hairline strip on paper ---------- */
        .eng__pricing {
          margin-top: clamp(20px, 3vw, 32px);
          padding: 16px 20px;
          border: 1px solid var(--border-soft);
          border-left: 2px solid var(--rule-gold);
          border-radius: 2px;
          display: flex;
          align-items: baseline;
          gap: 18px;
          flex-wrap: wrap;
        }
        .eng__pricing-label {
          flex: 0 0 auto;
          font-family: var(--font-mono);
          font-size: 10px; font-weight: 500;
          letter-spacing: 0.22em; text-transform: uppercase;
          color: var(--fg-accent);
          white-space: nowrap;
        }
        .eng__pricing-note {
          margin: 0;
          flex: 1 1 380px;
          font-family: var(--font-body);
          font-size: 14px; line-height: 1.55; font-weight: 400;
          color: var(--fg-2);
          text-wrap: pretty;
        }

        @media (prefers-reduced-motion: reduce) {
          .eng__step { transition: none; }
          .eng__step:hover { transform: none; }
          /* Final drawn state, no animation. */
          .eng__axis-line, .eng__axis-head { animation: none; }
          .eng__axis-line { stroke-dashoffset: 0; }
          .eng__axis-head { stroke-dashoffset: 0; opacity: 1; }
          .eng__axis-label { transition: none; opacity: 0.85; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { EngagementSection });