/* Methodology — 6-step engagement model */

const METHOD_STEPS = [
  {
    num: "01",
    title: "Diagnostic",
    desc: "Stakeholder mapping, data-estate review, regulatory scope, opportunity register and risk classification.",
    dur: "1–3 weeks",
  },
  {
    num: "02",
    title: "Architecture",
    desc: "Reference architecture, model selection, integration plan, control framework and total-cost forecast.",
    dur: "2–4 weeks",
  },
  {
    num: "03",
    title: "Prototype",
    desc: "Vertical-slice build against a single, measurable use-case. Eval harness in place before any code is shipped.",
    dur: "4–8 weeks",
  },
  {
    num: "04",
    title: "Hardening",
    desc: "Red-team pass, governance documentation pack, performance and cost controls, SRE handover plan.",
    dur: "3–6 weeks",
  },
  {
    num: "05",
    title: "Production",
    desc: "Phased rollout under SLO. Monitoring, drift detection, incident playbook, model registry in place.",
    dur: "Ongoing",
  },
  {
    num: "06",
    title: "Operate",
    desc: "Steady-state run, model refresh, regulatory re-attestation, capability extension on demand.",
    dur: "Continuous",
  },
];

function Methodology() {
  return (
    <section id="method">
      <div className="page">
        <div className="section-head">
          <div className="index">
            <span className="dot"></span>04 / Method
          </div>
          <div>
            <h2>
              Engagement <span className="serif-italic">model</span>.
              <br />
              Diagnostic to&nbsp;operate.
            </h2>
            <p className="lede">
              Engagements are structured around a single measurable outcome
              and progressed through six defined stages, from diagnostic to
              operation. Documentation, evaluation harnesses, and risk
              registers are produced as deliverables at each stage. The
              methodology is consistent across engagement size; scope and
              duration vary.
            </p>
          </div>
        </div>

        <div className="method-grid">
          {METHOD_STEPS.map((s) => (
            <div className="method-step" key={s.num}>
              <div className="num">
                {s.num}
                <sup>/06</sup>
              </div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
              <div className="dur">{s.dur}</div>
            </div>
          ))}
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr 1fr",
            gap: 32,
            marginTop: 56,
            fontFamily: "var(--ff-mono)",
            fontSize: 11,
            letterSpacing: "0.08em",
            color: "var(--g-55)",
            textTransform: "uppercase",
          }}
          className="method-foot"
        >
          <div>
            <div style={{ color: "var(--ink)", marginBottom: 6 }}>
              ↳ Accountable team
            </div>
            Senior architect and delivery lead are named in the
            engagement contract.
          </div>
          <div>
            <div style={{ color: "var(--ink)", marginBottom: 6 }}>
              ↳ Documentation
            </div>
            ISO/IEC 42001-aligned artefacts produced at each stage gate.
          </div>
          <div>
            <div style={{ color: "var(--ink)", marginBottom: 6 }}>
              ↳ Exit
            </div>
            Engagement includes full hand-over package, operational
            run-book, and a 90-day support window.
          </div>
        </div>
        <style>{`
          @media (max-width: 720px) {
            .method-foot { grid-template-columns: 1fr !important; gap: 16px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

Object.assign(window, { Methodology });