// BlueprintReportSection5_7.jsx
// Section 5, Implementation roadmap (timeline + phase detail)
// Section 6, Governance (policy + risk register)
// Section 7 to Next steps + sign-off

// ─── 5.1  Phased timeline ──────────────────────────────────────────
function S5_TimelinePage() {
  return (
    <window.ReportPage page={28} total={37} headerRight="05 · Roadmap">
      <div style={{display: "flex", flexDirection: "column", gap: "20pt", flex: "1 1 auto"}}>

        <div>
          <div className="rp-section-eyebrow">05.1 · Roadmap</div>
          <h2 className="rp-h1" style={{maxWidth: "26ch"}}>
            Twelve months. Three <i className="emph">phases</i>. One refresh<i className="stop">.</i>
          </h2>
        </div>

        <p className="rp-lede">
          The plan is paced deliberately. Each phase ends with a 30-day stabilisation
          window before the next begins. This is what "deliberate" looks like in
          practice, and it is the single most important difference between Hartwell's
          plan and the off-the-shelf "AI transformation" timelines pitched by larger
          consultancies.
        </p>

        <div className="rp-roadmap">
          <div className="rp-roadmap__phases">
            <div className="rp-roadmap__phase rp-roadmap__phase--ember">
              <div className="rp-roadmap__phase-num">Phase 01</div>
              <div className="rp-roadmap__phase-title">Foundation &amp; first build</div>
              <div className="rp-roadmap__phase-window">May, Jul 2026 · 12 weeks</div>
              <p className="rp-roadmap__phase-body">
                AI policy signed and trained. AI Register stood up. Service Copilot
                built, deployed, and stable across all four depots. First measurable
                value in service department by week 8.
              </p>
              <ul className="rp-roadmap__phase-list">
                <li>AI policy v1.0 signed off</li>
                <li>Service Copilot live · Wymondham + Diss</li>
                <li>Rolled out to Beccles + Aylsham</li>
                <li>30-day stabilisation</li>
              </ul>
            </div>

            <div className="rp-roadmap__phase rp-roadmap__phase--ember">
              <div className="rp-roadmap__phase-num">Phase 02</div>
              <div className="rp-roadmap__phase-title">After-hours + champion network</div>
              <div className="rp-roadmap__phase-window">Aug, Oct 2026 · 12 weeks</div>
              <p className="rp-roadmap__phase-body">
                After-Hours Enquiry Handler built and deployed. Champion network
                formalised, one nominated AI champion per depot, with paid time
                allocation. Use Case Backlog rhythm bedded in.
              </p>
              <ul className="rp-roadmap__phase-list">
                <li>After-Hours Handler live</li>
                <li>4 × depot champions named &amp; trained</li>
                <li>First quarterly AI review</li>
                <li>30-day stabilisation</li>
              </ul>
            </div>

            <div className="rp-roadmap__phase">
              <div className="rp-roadmap__phase-num">Phase 03</div>
              <div className="rp-roadmap__phase-title">Sales intelligence + refresh</div>
              <div className="rp-roadmap__phase-window">Nov 2026 to Apr 2027 · 24 weeks</div>
              <p className="rp-roadmap__phase-body">
                Sales Pipeline Intelligence brief deployed once Ibcos data hygiene
                is sound. Annual planning rhythm established. MoonBoots returns for
                a half-day Blueprint refresh in April 2027.
              </p>
              <ul className="rp-roadmap__phase-list">
                <li>Sales brief live · pilot with Andy</li>
                <li>Roll-out to all three salespeople</li>
                <li>Annual AI plan FY27/28</li>
                <li>Blueprint refresh</li>
              </ul>
            </div>
          </div>
        </div>

        <div style={{marginTop: "auto", paddingTop: "14pt", borderTop: "1px solid var(--hairline)"}}>
          <div className="eyebrow" style={{marginBottom: "10pt"}}>Decision points</div>
          <div style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "20pt"}}>
            <div>
              <h5 className="rp-h4" style={{marginBottom: "4pt"}}>Phase 1 sign-off</h5>
              <p className="rp-small">Target 9 May 2026. Triggers SOW for Service Copilot build.</p>
            </div>
            <div>
              <h5 className="rp-h4" style={{marginBottom: "4pt"}}>Phase 2 sign-off</h5>
              <p className="rp-small">Target 31 July 2026. Conditional on Phase 1 stabilisation report.</p>
            </div>
            <div>
              <h5 className="rp-h4" style={{marginBottom: "4pt"}}>Phase 3 sign-off</h5>
              <p className="rp-small">Target 30 October 2026. Triggered by sales-team training session.</p>
            </div>
          </div>
        </div>

      </div>
    </window.ReportPage>
  );
}

// ─── 5.2  Phase detail + dependencies ──────────────────────────────
function S5_DetailPage() {
  return (
    <window.ReportPage page={29} total={37} headerRight="05 · Detail & dependencies">
      <div style={{display: "flex", flexDirection: "column", gap: "20pt", flex: "1 1 auto"}}>

        <div>
          <div className="rp-section-eyebrow">05.2 · Detail</div>
          <h2 className="rp-h1" style={{maxWidth: "26ch"}}>
            Dependencies, owners, <i className="emph">decisions</i><i className="stop">.</i>
          </h2>
        </div>

        <p className="rp-lede">
          Each work item has a single named owner, a clear dependency chain, and a
          decision point. The plan is engineered so any phase can be paused, slipped
          a quarter, or cancelled without invalidating the work that came before it.
        </p>

        <div>
          <div className="eyebrow" style={{marginBottom: "10pt"}}>Phase 01 · Foundation &amp; Service Copilot · May, Jul 2026</div>
          <table className="rp-risk">
            <thead>
              <tr>
                <th style={{width: "22%"}}>Work item</th>
                <th style={{width: "16%"}}>Owner</th>
                <th style={{width: "20%"}}>Window</th>
                <th>Depends on</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>AI policy draft &amp; sign-off</td><td>Sarah · MoonBoots</td><td>Wk 1 to 2</td><td></td></tr>
              <tr><td>All-hands policy briefing</td><td>Robert</td><td>Wk 3</td><td>Policy signed</td></tr>
              <tr><td>Knowledge-base capture (manuals, job-card history)</td><td>Mike · MoonBoots</td><td>Wk 1 to 4</td><td>Top-30 manual list from Mike</td></tr>
              <tr><td>Service Copilot build</td><td>MoonBoots</td><td>Wk 3 to 7</td><td>Knowledge-base 80% captured</td></tr>
              <tr><td>Tablet hardware procurement (4 units)</td><td>Sarah</td><td>Wk 4 to 6</td><td>Standard agreed</td></tr>
              <tr><td>Pilot · Wymondham</td><td>Mike</td><td>Wk 8 to 9</td><td>Build complete · tablets in</td></tr>
              <tr><td>Roll-out · Diss, Beccles, Aylsham</td><td>Depot leads</td><td>Wk 10 to 11</td><td>Wymondham pilot stable</td></tr>
              <tr><td>30-day stabilisation &amp; report</td><td>MoonBoots</td><td>Wk 12</td><td>Roll-out complete</td></tr>
            </tbody>
          </table>
        </div>

        <window.ReportCallout eyebrow="Critical path">
          The plan's critical path runs through <strong>knowledge-base capture in
          weeks 1 to 4</strong>. If the top-30 manual list slips by more than two weeks,
          Phase 1 launch slips by the same amount. Mike has the buffer; MoonBoots
          provides scanning and OCR support. This is the single most important
          dependency to protect.
        </window.ReportCallout>

      </div>
    </window.ReportPage>
  );
}

// ─── 6.1  AI policy framework ──────────────────────────────────────
function S6_PolicyPage() {
  return (
    <window.ReportPage page={31} total={37} headerRight="06 · AI Policy">
      <div style={{display: "flex", flexDirection: "column", gap: "20pt", flex: "1 1 auto"}}>

        <div>
          <div className="rp-section-eyebrow">06.1 · Policy framework</div>
          <h2 className="rp-h1" style={{maxWidth: "26ch"}}>
            One page. Seven <i className="emph">rules</i><i className="stop">.</i>
          </h2>
        </div>

        <p className="rp-lede">
          The Hartwell AI policy is a single page, written for the staff who will
          actually be expected to follow it. It is built around the seven rules
          summarised below. The full draft is provided as Appendix B of this Blueprint.
        </p>

        <div className="rp-grid">
          <div className="rp-stack rp-stack--tight">
            {[
              { n: "01", t: "AI assists. Humans decide.", b: "No AI tool may make a customer-binding commitment, send a final response, or act on the business's behalf without human review." },
              { n: "02", t: "AI is identifiable.",        b: "Any customer-facing AI interaction is identified as AI from the first message. No silent automation in customer-facing channels." },
              { n: "03", t: "Approved tools only.",       b: "Only tools listed on the AI Register may be used for work. The list is reviewed quarterly. Adding a tool requires Sarah's sign-off." },
              { n: "04", t: "Customer data stays inside.", b: "No customer name, address, or financial information may be entered into a public AI chat. Approved internal AI workflows handle customer data with appropriate data-processing agreements." },
            ].map(r => (
              <div key={r.n} style={{padding: "12pt 0", borderBottom: "1px solid var(--hairline)"}}>
                <div style={{display: "flex", gap: "16pt", alignItems: "baseline"}}>
                  <span style={{fontFamily: "var(--font-mono)", fontSize: "10pt", color: "var(--ember-600)", flexShrink: 0}}>{r.n}</span>
                  <div>
                    <h5 className="rp-h4" style={{marginBottom: "4pt"}}>{r.t}</h5>
                    <p className="rp-small">{r.b}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="rp-stack rp-stack--tight">
            {[
              { n: "05", t: "Errors are reported, not hidden.", b: "If AI produces a wrong answer that affects a customer or a job, it is logged in the AI Register within 48 hours. No blame; the goal is calibration." },
              { n: "06", t: "AI does not replace humans here.", b: "No member of staff will lose their job because of AI. AI is deployed to remove friction, not headcount. This is owner policy, not aspiration." },
              { n: "07", t: "We review what we deploy.",        b: "Every AI workflow is reviewed quarterly: is it working, is it earning, is it still right for us? Tools that fail review are retired." },
            ].map(r => (
              <div key={r.n} style={{padding: "12pt 0", borderBottom: "1px solid var(--hairline)"}}>
                <div style={{display: "flex", gap: "16pt", alignItems: "baseline"}}>
                  <span style={{fontFamily: "var(--font-mono)", fontSize: "10pt", color: "var(--ember-600)", flexShrink: 0}}>{r.n}</span>
                  <div>
                    <h5 className="rp-h4" style={{marginBottom: "4pt"}}>{r.t}</h5>
                    <p className="rp-small">{r.b}</p>
                  </div>
                </div>
              </div>
            ))}

            <window.ReportCallout eyebrow="Owner commitment">
              Rule 06, "AI does not replace humans here", is owner policy. Robert
              will communicate this to all staff at the policy briefing in Phase 1,
              week 3. It is the single most important precondition for productive
              AI adoption inside Hartwell.
            </window.ReportCallout>
          </div>
        </div>

      </div>
    </window.ReportPage>
  );
}

// ─── 6.2  Risk register ────────────────────────────────────────────
function S6_RiskPage() {
  const risks = [
    { id: "R-01", title: "Service Copilot misidentifies a critical part",  prob: "Med",  impact: "High", sev: "high",
      mit: "Confidence threshold + human review for all parts orders > £200. Audit sample weekly during stabilisation." },
    { id: "R-02", title: "Staff treat AI output as authoritative",         prob: "High", impact: "Med",  sev: "high",
      mit: "Policy rule 01 + ongoing reinforcement. Tablet UI shows confidence score and \"AI suggested, verify\" banner." },
    { id: "R-03", title: "Customer feels mistreated by After-Hours bot",   prob: "Med",  impact: "High", sev: "high",
      mit: "AI identification from first message; immediate human callback offered; brand-tone audit monthly." },
    { id: "R-04", title: "Mike Pollard becomes single point of failure",   prob: "High", impact: "Med",  sev: "high",
      mit: "Phase 2 stands up depot champion network. Mike's role transitions from operator to coordinator." },
    { id: "R-05", title: "Ibcos vendor releases competing AI add-on",      prob: "High", impact: "Low",  sev: "med",
      mit: "MoonBoots tracks vendor roadmap. If Ibcos AI makes one of our use cases redundant, we de-scope it." },
    { id: "R-06", title: "Anthropic API outage during peak hours",         prob: "Low",  impact: "Med",  sev: "med",
      mit: "Graceful fallback to non-AI workflow built into every interface. Staff know what to do when AI is unavailable." },
    { id: "R-07", title: "GDPR concern from customer about AI use",        prob: "Low",  impact: "Med",  sev: "med",
      mit: "Privacy notice updated pre-launch. ICO guidance reviewed quarterly. Customer data stays in UK / EU regions." },
    { id: "R-08", title: "Phase 1 stabilisation reveals fundamental issue", prob: "Low",  impact: "High", sev: "med",
      mit: "Phase 2 sign-off conditional on Phase 1 stabilisation report. The plan can be paused or rebased without contractual penalty." },
    { id: "R-09", title: "Cost overrun on tooling",                        prob: "Low",  impact: "Low",  sev: "low",
      mit: "Fixed-price build. Monthly tooling caps disclosed up front. Annual review mandates budget recalibration." },
  ];

  return (
    <window.ReportPage page={32} total={37} headerRight="06 · Risk register">
      <div style={{display: "flex", flexDirection: "column", gap: "18pt", flex: "1 1 auto"}}>

        <div>
          <div className="rp-section-eyebrow">06.2 · Risk register</div>
          <h2 className="rp-h1" style={{maxWidth: "22ch"}}>
            Nine known risks, all <i className="emph">manageable</i><i className="stop">.</i>
          </h2>
        </div>

        <p className="rp-lede">
          The risks below are the ones identified during the Blueprint Day and the
          subsequent review. Severity reflects probability × impact. Owner for the
          register is Sarah Hartwell-Davies; review cadence is quarterly.
        </p>

        <table className="rp-risk">
          <thead>
            <tr>
              <th style={{width: "8%"}}>ID</th>
              <th style={{width: "30%"}}>Risk</th>
              <th style={{width: "10%"}}>Severity</th>
              <th>Mitigation</th>
            </tr>
          </thead>
          <tbody>
            {risks.map(r => (
              <tr key={r.id}>
                <td style={{fontFamily: "var(--font-mono)", color: "var(--t-ink-3)"}}>{r.id}</td>
                <td><strong>{r.title}</strong><br/><span style={{color: "var(--t-ink-2)", fontSize: "9pt"}}>P {r.prob} · I {r.impact}</span></td>
                <td><span className={`rp-risk__sev rp-risk__sev--${r.sev}`}>{r.sev === "high" ? "High" : r.sev === "med" ? "Medium" : "Low"}</span></td>
                <td>{r.mit}</td>
              </tr>
            ))}
          </tbody>
        </table>

      </div>
    </window.ReportPage>
  );
}

// ─── 7  Next steps + sign-off ──────────────────────────────────────
function S7_NextStepsPage() {
  return (
    <window.ReportPage page={34} total={37} headerRight="07 · Next steps & sign-off">
      <div style={{display: "flex", flexDirection: "column", gap: "20pt", flex: "1 1 auto"}}>

        <div>
          <div className="rp-section-eyebrow">07.0 · Next steps</div>
          <h2 className="rp-h1" style={{maxWidth: "26ch"}}>
            Three decisions, one <i className="emph">signature</i><i className="stop">.</i>
          </h2>
        </div>

        <p className="rp-lede">
          Everything in this Blueprint reduces to three decisions that need to be
          made over the next four weeks. The first one, approving Phase 1, unlocks
          the rest. The other two are scheduled, not pre-committed.
        </p>

        <div className="rp-grid">
          <div className="rp-stack">
            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>Decision 01 · Approve Phase 1 build</h4>
              <p className="rp-body">
                <strong>Target date 9 May 2026.</strong> Triggers Statement of Work
                for the Service Copilot at the £17,500 fixed price quoted in
                Section 04. Includes the AI policy work, knowledge-base capture,
                build, roll-out, and 30-day stabilisation.
              </p>
            </div>

            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>Decision 02 · Phase 2 sign-off</h4>
              <p className="rp-body">
                <strong>Target date 31 July 2026.</strong> Conditional on the Phase 1
                stabilisation report. If Phase 1 is unstable or the value not
                materialising as forecast, Phase 2 slips one quarter without penalty.
              </p>
            </div>

            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>Decision 03 · Phase 3 sign-off</h4>
              <p className="rp-body">
                <strong>Target date 30 October 2026.</strong> Conditional on Phase 2
                stabilisation. Includes the half-day Blueprint refresh in April 2027
                at no additional cost.
              </p>
            </div>
          </div>

          <div className="rp-stack">
            <window.ReportCallout eyebrow="What to do this week">
              <strong>1.</strong> Robert reads the Executive Summary &amp; Bottom-Line
              Outcome (pages 03 to 04). <br/>
              <strong>2.</strong> Sarah reads sections 04 to 06 in detail. <br/>
              <strong>3.</strong> Mike reviews the Service Copilot use case (page 24)
              and confirms the top-30 manual list. <br/>
              <strong>4.</strong> Schedule a 60-minute Phase 1 sign-off call with
              John before 9 May.
            </window.ReportCallout>

            <div style={{marginTop: "auto", border: "1px solid var(--hairline-strong)", padding: "20pt 22pt"}}>
              <div className="rp-section-eyebrow" style={{marginBottom: "12pt"}}>Sign-off</div>
              <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20pt"}}>
                <div>
                  <div style={{borderBottom: "1px solid var(--ink-900)", paddingBottom: "32pt"}}>&nbsp;</div>
                  <div style={{marginTop: "6pt"}}>
                    <div style={{fontFamily: "var(--font-body)", fontSize: "10pt", fontWeight: 600}}>Robert Hartwell</div>
                    <div style={{fontFamily: "var(--font-body)", fontSize: "9pt", color: "var(--t-ink-2)"}}>Managing Director · Hartwell &amp; Sons Ltd</div>
                    <div style={{fontFamily: "var(--font-mono)", fontSize: "9pt", color: "var(--t-ink-3)", marginTop: "8pt"}}>Date</div>
                  </div>
                </div>
                <div>
                  <div style={{borderBottom: "1px solid var(--ink-900)", paddingBottom: "32pt"}}>&nbsp;</div>
                  <div style={{marginTop: "6pt"}}>
                    <div style={{fontFamily: "var(--font-body)", fontSize: "10pt", fontWeight: 600}}>John Sears</div>
                    <div style={{fontFamily: "var(--font-body)", fontSize: "9pt", color: "var(--t-ink-2)"}}>MoonBoots Consultancy UK Ltd</div>
                    <div style={{fontFamily: "var(--font-mono)", fontSize: "9pt", color: "var(--t-ink-3)", marginTop: "8pt"}}>Date</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </window.ReportPage>
  );
}

window.S5_TimelinePage = S5_TimelinePage;
window.S5_DetailPage = S5_DetailPage;
window.S6_PolicyPage = S6_PolicyPage;
window.S6_RiskPage = S6_RiskPage;
window.S7_NextStepsPage = S7_NextStepsPage;