// BlueprintReportSection1_2.jsx
// Section 1 to About this Blueprint
// Section 2, Current state assessment

// ─── 1.1  About this Blueprint, what / who / how to read ──────────
function S1_AboutPage() {
  return (
    <window.ReportPage page={6} total={37} headerRight="01 · About this Blueprint">
      <div style={{display: "flex", flexDirection: "column", gap: "18pt", flex: "1 1 auto"}}>

        <div>
          <div className="rp-section-eyebrow">01.1 · Purpose</div>
          <h2 className="rp-h1" style={{maxWidth: "22ch"}}>
            What this <i className="emph">document</i> is<i className="stop">.</i>
          </h2>
        </div>

        <p className="rp-lede">
          This Blueprint is a written record of the strategic AI assessment carried
          out for Hartwell &amp; Sons Ltd on 17 April 2026, plus the prioritised
          plan that follows from it. It is owned by Hartwell. It is confidential.
        </p>

        <div className="rp-grid">
          <div className="rp-stack">
            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>Who it is for</h4>
              <p className="rp-body">
                The named recipients on the cover. Robert Hartwell as Managing Director;
                Sarah Hartwell-Davies as Operations Director; Mike Pollard as Service
                Manager. The Executive Summary and Bottom-Line Outcome page (pages 03 to 04)
                are designed to stand alone for board or family reading.
              </p>
              <p className="rp-body rp-body--secondary">
                Sections 03 onward are working documents: read in full by the named
                recipients, referenced by the implementation lead, and excerpted as
                needed for vendor briefings, staff communication, and audit purposes.
              </p>
            </div>

            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>How to read it</h4>
              <p className="rp-body">
                In order, end to end, the document is a single argument: <em>here is your
                current position, here is the value available, here is the plan, here is
                what to decide first</em>. The first read takes about 90 minutes.
              </p>
              <p className="rp-body rp-body--secondary">
                On second read, treat sections 03 to 06 as reference. Each section opens
                with a standfirst that summarises the section in one paragraph; if the
                standfirst is enough, skip the body.
              </p>
            </div>
          </div>

          <div className="rp-stack">
            <window.ReportCallout eyebrow="What this document is not">
              It is not a sales document, a product specification, or a contract.
              It does not commit Hartwell to any spend. The fixed-price implementation
              quotes inside (Sections 04 and 05) are <em>indicative</em> and require a
              separate Statement of Work to become binding.
            </window.ReportCallout>

            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>Authorship and review</h4>
              <p className="rp-body">
                Authored by John Sears, MoonBoots Consultancy. Reviewed by Robert
                Hartwell on 22 April 2026. Material factual corrections from Sarah
                Hartwell-Davies and Mike Pollard incorporated in v0.9. Released as
                v1.0 on the date shown on the cover.
              </p>
            </div>

            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>Updates</h4>
              <p className="rp-body">
                A document is a snapshot, not a service. If circumstances change
                materially before the Phase 1 build sign-off (target 9 May 2026),
                MoonBoots will issue a v1.1 at no cost. After Phase 1 begins, the
                Blueprint becomes a fixed reference document.
              </p>
            </div>
          </div>
        </div>

        <div style={{marginTop: "auto", paddingTop: "14pt", borderTop: "1px solid var(--hairline)"}}>
          <div className="eyebrow" style={{marginBottom: "10pt"}}>How this document is structured</div>
          <div style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "20pt"}}>
            <div>
              <h5 className="rp-h4" style={{marginBottom: "4pt"}}>Sections 01 to 02</h5>
              <p className="rp-small">Context. Where you are today, scored against the same framework all MoonBoots clients see.</p>
            </div>
            <div>
              <h5 className="rp-h4" style={{marginBottom: "4pt"}}>Sections 03 to 04</h5>
              <p className="rp-small">Analysis. The Five Pillars in detail and the prioritised use cases that follow from them.</p>
            </div>
            <div>
              <h5 className="rp-h4" style={{marginBottom: "4pt"}}>Sections 05 to 07</h5>
              <p className="rp-small">Action. The 12-month roadmap, governance, and the decisions to make first.</p>
            </div>
          </div>
        </div>

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

// ─── 1.2  Methodology + inputs ─────────────────────────────────────
function S1_MethodPage() {
  return (
    <window.ReportPage page={7} total={37} headerRight="01 · Methodology">
      <div style={{display: "flex", flexDirection: "column", gap: "18pt", flex: "1 1 auto"}}>

        <div>
          <div className="rp-section-eyebrow">01.2 · Method</div>
          <h2 className="rp-h1" style={{maxWidth: "22ch"}}>
            How this Blueprint was <i className="emph">made</i><i className="stop">.</i>
          </h2>
        </div>

        <p className="rp-lede">
          The Blueprint Day method is fixed. Every MoonBoots client follows the same
          shape, scored against the same Five Pillars. This is deliberate: it makes
          year-on-year tracking possible, and it forces the engagement to ground
          itself in evidence rather than opinion.
        </p>

        <div className="rp-grid">
          <div className="rp-stack">
            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>Inputs</h4>
              <ul className="rp-list">
                <li><strong>AI Readiness Scorecard.</strong> 12 questions across 5 pillars, completed by Robert Hartwell on 9 April 2026 prior to the Blueprint Day.</li>
                <li><strong>Pre-call questionnaire.</strong> 22-item business profile, completed jointly by Robert and Sarah on 14 April.</li>
                <li><strong>Site walkthrough.</strong> Full-day visit on 17 April, covering all four depots (Wymondham, Diss, Beccles, Aylsham) by remote video.</li>
                <li><strong>Stakeholder interviews.</strong> Six 30-minute structured conversations with Robert, Sarah, Mike, and three depot leads.</li>
                <li><strong>Document review.</strong> Three years of Ibcos reports, current AI tooling inventory, marketing materials, and the existing IT policy.</li>
              </ul>
            </div>
          </div>

          <div className="rp-stack">
            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>Framework</h4>
              <p className="rp-body">
                The MoonBoots Five Pillars (Assess, Prioritise, Govern, Deploy, Evolve)
                are explained in detail in Section 03. They were developed across 60+
                client engagements between 2022 and 2026 and are designed specifically
                for the SME register, not a downsize of an enterprise framework.
              </p>
              <p className="rp-body">
                The scorecard maps to the same five pillars. Each question scores
                1 to 4. Maximum total is 48. Hartwell's score is 19, placing the business
                at the upper end of the AI-Curious tier.
              </p>
            </div>

            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>What is excluded</h4>
              <p className="rp-body">
                Some things this engagement deliberately does not do: technical
                architecture review (a separate engagement), full data audit
                (sampled only), staff capability assessment (treated as a leadership
                judgement), and customer research (out of scope).
              </p>
            </div>
          </div>
        </div>

        <window.ReportCallout eyebrow="Bounded AI principle">
          MoonBoots designs every AI workflow to assist, draft, suggest, and surface 
          never to decide, commit, or act autonomously. Every customer-facing AI
          interaction is identifiable as AI. This principle is non-negotiable and
          shapes every recommendation in this Blueprint.
        </window.ReportCallout>

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

// ─── 2.1  Business profile + AI usage today ────────────────────────
function S2_ProfilePage() {
  return (
    <window.ReportPage page={9} total={37} headerRight="02 · Current State">
      <div style={{display: "flex", flexDirection: "column", gap: "18pt", flex: "1 1 auto"}}>

        <div>
          <div className="rp-section-eyebrow">02.1 · Profile</div>
          <h2 className="rp-h1" style={{maxWidth: "22ch"}}>
            The business <i className="emph">today</i><i className="stop">.</i>
          </h2>
        </div>

        <p className="rp-lede">
          Hartwell &amp; Sons is a third-generation family-owned agricultural
          machinery dealership operating across four depots in East Anglia. The
          business is profitable, well-run, and has reached the limits of what
          spreadsheet-and-Outlook operations can comfortably support.
        </p>

        <div className="rp-grid">
          <div className="rp-stack">
            <div>
              <h4 className="rp-h3" style={{marginBottom: "8pt"}}>Business profile</h4>
              <table className="rp-data">
                <tbody>
                  <tr><td>Founded</td><td>1958</td></tr>
                  <tr><td>Generation</td><td>3rd</td></tr>
                  <tr><td>Annual turnover (2025)</td><td>£6.8m</td></tr>
                  <tr><td>Operating profit margin</td><td>4.2%</td></tr>
                  <tr><td>Headcount</td><td>28 FTE</td></tr>
                  <tr><td>Depots</td><td>4 (Wymondham HQ, Diss, Beccles, Aylsham)</td></tr>
                  <tr><td>Service vehicles</td><td>9</td></tr>
                  <tr><td>Active customer accounts</td><td>~1,400</td></tr>
                  <tr><td>Primary franchise</td><td>Massey Ferguson, Kverneland</td></tr>
                  <tr className="rp-data--total"><td>Dealer management system</td><td>Ibcos Gold (since 2008)</td></tr>
                </tbody>
              </table>
            </div>
          </div>

          <div className="rp-stack">
            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>What the business does well</h4>
              <ul className="rp-list">
                <li><strong>Customer relationships.</strong> Average customer tenure 11 years. Net Promoter consistently above 60.</li>
                <li><strong>Service quality.</strong> First-time-fix rate 84%, well above industry benchmark of 71%.</li>
                <li><strong>Leadership cohesion.</strong> Three principals are aligned, decisive, and present in the business daily.</li>
                <li><strong>Financial discipline.</strong> Conservative gearing, six months operating reserve, no concentration risk above 8%.</li>
              </ul>
            </div>

            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>Where strain is showing</h4>
              <ul className="rp-list">
                <li><strong>Service scheduling on whiteboards</strong> across four depots. No single view of technician availability.</li>
                <li><strong>Parts identification</strong> for older machinery, a 4-hour-per-week problem at the Wymondham parts counter alone.</li>
                <li><strong>Out-of-hours enquiries.</strong> Estimated 40% of weekend leads going unanswered or being lost.</li>
                <li><strong>Job-card writeup</strong> after a service callout, adds 25 minutes to every visit, technicians universally describe as the worst part of the job.</li>
              </ul>
            </div>
          </div>
        </div>

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

// ─── 2.2  AI usage today + scorecard detail ────────────────────────
function S2_AIUsagePage() {
  const pillars = [
    { name: "Current AI Usage",     score: 2, max: 8,  note: "Informal Copilot + ChatGPT use, no policy" },
    { name: "Data Readiness",       score: 3, max: 12, note: "Ibcos clean, but customer notes free-text" },
    { name: "Team Skills",          score: 3, max: 8,  note: "One technical lead; rest of team uneven" },
    { name: "Process Maturity",     score: 5, max: 12, note: "Strong on finance, weak on service ops" },
    { name: "Leadership Buy-in",    score: 6, max: 8,  note: "Aligned, decisive, strongest pillar" },
  ];

  return (
    <window.ReportPage page={10} total={37} headerRight="02 · Scorecard detail">
      <div style={{display: "flex", flexDirection: "column", gap: "18pt", flex: "1 1 auto"}}>

        <div>
          <div className="rp-section-eyebrow">02.2 · Scorecard detail</div>
          <h2 className="rp-h1" style={{maxWidth: "26ch"}}>
            19 / 48 to at the upper edge of <i className="emph">AI-Curious</i><i className="stop">.</i>
          </h2>
        </div>

        <p className="rp-lede">
          Hartwell scores at the top end of the first tier and within touching
          distance of AI-Ready. The score is held back by two things, both of which
          are addressable inside Phase 1 of the implementation roadmap.
        </p>

        <div>
          <div className="eyebrow" style={{marginBottom: "10pt"}}>Per-pillar scores · 9 April 2026</div>
          <div className="rp-bars">
            {pillars.map(p => (
              <div className="rp-bars__row" key={p.name}>
                <div>
                  <div className="rp-bars__label">{p.name}</div>
                  <div style={{fontFamily: "var(--font-body)", fontSize: "9pt", color: "var(--t-ink-2)", marginTop: "2pt"}}>{p.note}</div>
                </div>
                <div className="rp-bars__track-wrap">
                  <div className="rp-bars__track">
                    <div className="rp-bars__fill" style={{width: `${(p.score / p.max) * 100}%`}}></div>
                  </div>
                  <div className="rp-bars__score"><b>{p.score}</b><span> / {p.max}</span></div>
                </div>
              </div>
            ))}
            <div className="rp-bars__total">
              <span className="rp-bars__total-label">Total · AI-Curious (upper tier)</span>
              <span className="rp-bars__total-num">19<small>/ 48</small></span>
            </div>
          </div>
        </div>

        <div className="rp-grid">
          <div>
            <h4 className="rp-h3" style={{marginBottom: "6pt"}}>What is holding the score back</h4>
            <p className="rp-body">
              <strong>Current AI Usage</strong> at 2 / 8 reflects the absence of any
              structured workflow, not an absence of capability. Microsoft Copilot
              and ChatGPT are in use informally; no measurement, no policy, no
              champion. Phase 1 fixes this directly.
            </p>
            <p className="rp-body">
              <strong>Team Skills</strong> at 3 / 8 reflects depth-of-bench risk:
              Mike is the de facto digital lead and is already at capacity. Phase 2
              addresses this with a paid champion network across the four depots.
            </p>
          </div>
          <div>
            <h4 className="rp-h3" style={{marginBottom: "6pt"}}>Where the strength is</h4>
            <p className="rp-body">
              <strong>Leadership Buy-in</strong> at 6 / 8 is the highest score in
              this tier MoonBoots has measured to date. Every recommendation in
              this Blueprint is conditioned on that strength.
            </p>
            <p className="rp-body">
              Process Maturity at 5 / 12 understates Hartwell's strength on the
              finance and parts side; the score is dragged down by service
              scheduling and customer-data hygiene, both Phase 1 priorities.
            </p>
          </div>
        </div>

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

window.S1_AboutPage = S1_AboutPage;
window.S1_MethodPage = S1_MethodPage;
window.S2_ProfilePage = S2_ProfilePage;
window.S2_AIUsagePage = S2_AIUsagePage;