// process.jsx - engagement process + before/after metrics block

function Process() {
  const steps = [
    {
      n: "01",
      label: "Discover",
      days: "Days 1-2",
      title: "We learn your stack faster than your last hire.",
      bullets: [
        "Repo + pipeline read-through",
        "1-hour technical interview",
        "Constraints, deadlines, blockers documented",
      ],
      out: "→ Statement of work, fixed fee, fixed date",
    },
    {
      n: "02",
      label: "Build",
      days: "Days 3-10",
      title: "Daily progress in your tools. Working software in your repo.",
      bullets: [
        "PRs at a sensible cadence, progress always visible",
        "Pair sessions with your senior dev",
        "Async standups, CET working hours",
      ],
      out: "→ Pipelines green, services deployed, infra committed",
    },
    {
      n: "03",
      label: "Handover",
      days: "Days 11-14",
      title: "You own everything. We're one message away.",
      bullets: [
        "Recorded walkthrough + runbook",
        "Knowledge-transfer session w/ team",
        "30-day post-launch support included",
      ],
      out: "→ Zero vendor lock-in, full documentation",
    },
  ];

  return (
    <section className="section" id="process">
      <div className="wrap">
        <div className="sb-sec-head">
          <div>
            <span className="eyebrow">How we work</span>
            <h2 className="h1" style={{ marginTop: 18 }}>
              Two weeks.<br />
              <em>Three milestones.</em><br />
              Zero surprises.
            </h2>
          </div>
          <p className="lede" style={{ marginTop: 6 }}>
            Most engagements ship inside a sprint. You're never wondering
            where it stands - daily updates, working PRs, calendar invites,
            real humans.
          </p>
        </div>

        <ol className="sb-process">
          {steps.map((s, i) => (
            <li key={i} className="sb-step">
              <div className="sb-step-head">
                <span className="sb-step-num">{s.n}</span>
                <div className="sb-step-meta">
                  <span className="chip chip--red">{s.label}</span>
                  <span className="kicker">{s.days}</span>
                </div>
              </div>
              <h3 className="h2 sb-step-title">{s.title}</h3>
              <ul className="sb-step-list">
                {s.bullets.map((b, j) => (
                  <li key={j}><CheckSm /><span>{b}</span></li>
                ))}
              </ul>
              <p className="sb-step-out mono">{s.out}</p>
            </li>
          ))}
        </ol>

        {/* Process timeline visual */}
        <div className="sb-timeline" aria-hidden>
          <div className="sb-timeline-track">
            <div className="sb-timeline-fill" />
          </div>
          <div className="sb-timeline-labels">
            <span>Start</span>
            <span>Week 1</span>
            <span>Week 2</span>
            <span>Complete</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function CheckSm() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden style={{ flexShrink: 0, marginTop: 4 }}>
      <path d="M2.5 7.5l2.8 2.8L11.5 4" stroke="var(--bridge-red)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function Metrics() {
  // Aggregate before/after metrics across engagements
  const rows = [
    { label: "Average build time",       before: "38 min", after: "5 min",  delta: "-87%" },
    { label: "Deploys per week",         before: "2",       after: "24",     delta: "+12×" },
    { label: "Failed releases / month",  before: "4.1",     after: "0.3",    delta: "-93%" },
    { label: "Monthly infra spend",      before: "€5.4k",   after: "€2.6k",  delta: "-52%" },
    { label: "Time-to-prod (PR → live)", before: "3.4 d",   after: "47 min", delta: "-99%" },
    { label: "MTTR (critical incidents)",before: "2.1 h",   after: "18 min", delta: "-86%" },
  ];

  return (
    <section className="section section--alt" id="metrics">
      <div className="wrap">
        <div className="sb-sec-head">
          <div>
            <span className="eyebrow">Aggregate results</span>
            <h2 className="h1" style={{ marginTop: 18 }}>
              The numbers we don't <em>hide</em>.
            </h2>
          </div>
          <p className="lede" style={{ marginTop: 6 }}>
            Median across our last 14 engagements (Q3 2024 - Q1 2026).
            Methodology in the audit doc. Yours will be different - but
            this is the shape.
          </p>
        </div>

        <div className="sb-metrics-table">
          <div className="sb-metrics-row sb-metrics-head">
            <span>Metric</span>
            <span>Before</span>
            <span>After</span>
            <span>Δ</span>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="sb-metrics-row">
              <span className="sb-mt-label">{r.label}</span>
              <span className="sb-mt-before mono">{r.before}</span>
              <span className="sb-mt-arrow" aria-hidden>
                <svg width="16" height="10" viewBox="0 0 16 10"><path d="M0 5h13m0 0L9 1m4 4-4 4" stroke="var(--muted)" strokeWidth="1.2" fill="none" strokeLinecap="round"/></svg>
              </span>
              <span className="sb-mt-after mono">{r.after}</span>
              <span className="sb-mt-delta mono">{r.delta}</span>
            </div>
          ))}
        </div>

        <p className="sb-metrics-note mono">
          ✻ We report medians, not bests. We're happy to share the dataset
          on a call.
        </p>
      </div>
    </section>
  );
}

const processStyles = document.createElement("style");
processStyles.textContent = `
  /* Process */
  .sb-process {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    counter-reset: step;
    border-top: 1px solid var(--line);
  }
  .sb-step {
    padding: 36px 28px 32px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 14px;
    background: var(--paper);
    transition: background .2s var(--ease);
  }
  .sb-step:hover { background: var(--paper-2); }
  .sb-step:last-child { border-right: 0; }
  .sb-step-head { display: flex; align-items: center; gap: 16px; }
  .sb-step-num {
    font-family: var(--f-serif);
    font-size: 56px;
    line-height: 1;
    color: var(--bridge-red);
    letter-spacing: -0.02em;
  }
  .sb-step-meta { display: flex; flex-direction: column; gap: 6px; }
  .sb-step-title { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
  .sb-step-list {
    list-style: none; padding: 0; margin: 6px 0 0;
    display: flex; flex-direction: column; gap: 8px;
  }
  .sb-step-list li {
    display: flex; gap: 10px;
    font-size: 14px; color: var(--ink-2);
  }
  .sb-step-out {
    margin-top: auto; padding-top: 16px;
    font-size: 12px; color: var(--bridge-red); letter-spacing: 0.04em;
    border-top: 1px dashed var(--line);
  }
  @media (max-width: 900px) {
    .sb-process { grid-template-columns: 1fr; }
    .sb-step { border-right: 0; }
  }

  /* Timeline */
  .sb-timeline {
    margin-top: 40px;
    padding: 28px 0 0;
  }
  .sb-timeline-track {
    height: 8px; border-radius: 999px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    overflow: hidden;
    position: relative;
  }
  .sb-timeline-fill {
    position: absolute; inset: 0;
    width: 100%;
    background:
      repeating-linear-gradient(90deg,
        var(--bridge-red) 0 4px,
        transparent 4px 8px);
    -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent);
            mask-image: linear-gradient(90deg, #000 75%, transparent);
  }
  .sb-timeline-labels {
    display: flex; justify-content: space-between;
    margin-top: 10px;
    font-family: var(--f-mono); font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted);
  }

  /* Metrics table */
  .sb-metrics-table {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .sb-metrics-row {
    display: grid;
    grid-template-columns: 1.8fr 1fr 28px 1fr 1fr;
    gap: 24px;
    padding: 22px 8px;
    align-items: center;
    border-top: 1px dashed var(--line);
    transition: background .15s var(--ease);
  }
  .sb-metrics-row:first-child { border-top: 0; }
  .sb-metrics-row:not(.sb-metrics-head):hover { background: var(--paper); }
  .sb-metrics-head {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 14px 8px;
  }
  .sb-mt-label { font-family: var(--f-serif); font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; }
  .sb-mt-before { font-size: 18px; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.25); }
  .sb-mt-after  { font-size: 22px; color: var(--ink); font-weight: 500; }
  .sb-mt-delta  { font-size: 14px; color: #1A8A4D; text-align: right; letter-spacing: 0.04em; }
  [data-theme="technical"] .sb-mt-delta { color: #6EE0A0; }
  .sb-mt-arrow { display: inline-flex; align-items: center; justify-content: center; }
  @media (max-width: 720px) {
    .sb-metrics-row {
      grid-template-columns: 1fr 1fr;
      gap: 8px 18px;
    }
    .sb-metrics-head { display: none; }
    .sb-mt-label { grid-column: 1 / -1; font-size: 18px; }
    .sb-mt-arrow { display: none; }
    .sb-mt-delta { text-align: left; }
  }
  .sb-metrics-note {
    margin-top: 18px;
    font-size: 11px;
    color: var(--muted);
  }
`;
document.head.appendChild(processStyles);

Object.assign(window, { Process, Metrics });