// BlueprintReportContent.jsx
// Executive summary, money page, use case deep-dive, callouts, appendix entries.

// ─── Reusable callout ──────────────────────────────────────────────
function ReportCallout({ eyebrow, children }) {
  return (
    <aside className="rp-callout">
      <div className="rp-callout__eyebrow">{eyebrow}</div>
      <p className="rp-callout__body">{children}</p>
    </aside>
  );
}

// ─── Executive summary page (Page 02) ─────────────────────────────
function ExecSummaryPage() {
  const pillars = [
    { name: "Current AI Usage",     score: 2, max: 8 },
    { name: "Data Readiness",       score: 3, max: 12 },
    { name: "Team Skills",          score: 3, max: 8 },
    { name: "Process Maturity",     score: 5, max: 12 },
    { name: "Leadership Buy-in",    score: 6, max: 8 },
  ];

  return (
    <window.ReportPage page={3} total={37} headerRight="Executive Summary">
      <div style={{display: "flex", flexDirection: "column", gap: "20pt", flex: "1 1 auto"}}>

        <div>
          <div className="rp-section-eyebrow">Executive Summary</div>
          <h2 className="rp-h1" style={{maxWidth: "22ch"}}>
            Twelve months from <i className="emph">curious</i> to ready<i className="stop">.</i>
          </h2>
        </div>

        <p className="rp-lede" style={{maxWidth: "60ch"}}>
          This Blueprint sets out a 12-month plan to embed AI across the operations of
          Hartwell &amp; Sons Ltd, the family-owned agricultural machinery dealership
          headquartered in Wymondham, Norfolk.
        </p>

        <div className="rp-grid">
          <div className="rp-stack">
            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>Current state</h4>
              <p className="rp-body">
                Hartwell &amp; Sons sits at the AI-Curious end of the maturity scale.
                Four depots, 28 staff, £6.8m turnover. AI usage today is informal:
                Microsoft Copilot in Outlook, ChatGPT for marketing captions, no AI
                policy, no centralised CRM, service scheduling on whiteboards.
              </p>
              <p className="rp-body rp-body--secondary">
                Strongest pillar: leadership buy-in. Weakest: process maturity and team skills.
              </p>
            </div>

            <div>
              <h4 className="rp-h3" style={{marginBottom: "6pt"}}>Target state, April 2027</h4>
              <p className="rp-body">
                Five AI-assisted workflows embedded across all four depots, supported
                by a written AI policy, GDPR-compliant data governance, and a small
                internal champion network. Moved from <em>AI-Curious</em> to <em>AI-Ready</em>,
                with measurable productivity gains across service, parts, and sales.
              </p>
            </div>
          </div>

          <div className="rp-stack">
            <div>
              <div className="eyebrow" style={{marginBottom: "10pt"}}>AI Readiness Scorecard · 9 April 2026</div>
              <div className="rp-bars">
                {pillars.map(p => (
                  <div className="rp-bars__row" key={p.name}>
                    <div className="rp-bars__label">{p.name}</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</span>
                  <span className="rp-bars__total-num">19<small>/ 48</small></span>
                </div>
              </div>
            </div>

            <window.ReportCallout eyebrow="Bottom-line outcome">
              The Blueprint identifies <strong>£147,400</strong> in annual cashable value across
              the priority use cases, against a build investment of <strong>£38,500</strong> and
              ongoing tooling of £640 per month. Payback in month four. Detail on the next page.
            </window.ReportCallout>
          </div>
        </div>

        <div style={{marginTop: "auto", paddingTop: "14pt", borderTop: "1px solid var(--hairline)"}}>
          <div className="eyebrow" style={{marginBottom: "10pt"}}>Top 3 prioritised use cases</div>
          <div style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "20pt"}}>
            {[
              { n: "01", t: "Service Department AI Copilot", v: "£82,000", p: "HIGH" },
              { n: "02", t: "After-Hours Enquiry Handler",   v: "£27,400", p: "HIGH" },
              { n: "03", t: "Sales Pipeline Intelligence",   v: "£38,000", p: "MEDIUM" },
            ].map(uc => (
              <div key={uc.n} style={{display: "flex", flexDirection: "column", gap: "4pt"}}>
                <div className="eyebrow">Priority {uc.n} · {uc.p}</div>
                <h4 className="rp-h3" style={{margin: 0, fontSize: "13pt"}}>{uc.t}</h4>
                <div style={{fontFamily: "var(--font-mono)", fontSize: "10pt", color: "var(--ember-600)", marginTop: "4pt"}}>
                  {uc.v} <span style={{color: "var(--t-ink-3)"}}>annual value</span>
                </div>
              </div>
            ))}
          </div>
        </div>

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

// ─── Money page (the £147,400 / 219% spread) ───────────────────────
function MoneyPage() {
  return (
    <window.ReportPage page={4} total={37} headerRight="Bottom-Line Outcome">
      <div className="rp-money">
        <div className="rp-money__head">
          <div>
            <div className="rp-section-eyebrow">Bottom-line outcome</div>
            <h2>The cost of <em>doing</em>, the cost of waiting.</h2>
          </div>
          <div className="eyebrow" style={{textAlign: "right"}}>
            Year 1 · Apr 26 to Apr 27<br/>
            Conservative basis
          </div>
        </div>

        <div className="rp-money__hero">
          <div className="rp-money__big">
            <div className="rp-money__big-label">Annual cashable value</div>
            <div className="rp-money__big-num">
              £147<span className="stop">.</span>4k
            </div>
            <p className="rp-money__big-cap">
              Across the three priority use cases, expressed as Year-1 recovered
              capacity and revenue capture. Detail by use case in Section 4.
            </p>
          </div>
          <div className="rp-money__big">
            <div className="rp-money__big-label">Build investment</div>
            <div className="rp-money__big-num">
              £38<span className="stop">.</span>5k
            </div>
            <p className="rp-money__big-cap">
              Phases 1 to 3, fixed price, all three use cases delivered. Tooling £640
              / month ongoing. The Blueprint Day fee is deductible against build.
            </p>
          </div>
        </div>

        <div className="rp-money__row">
          <div className="rp-money__cell">
            <div className="rp-money__cell-label">Year-1 net value</div>
            <div className="rp-money__cell-num">£101<span className="stop">.</span>2k</div>
            <div className="rp-money__cell-cap">After build &amp; tooling</div>
          </div>
          <div className="rp-money__cell">
            <div className="rp-money__cell-label">Year-1 ROI</div>
            <div className="rp-money__cell-num">219%</div>
            <div className="rp-money__cell-cap">Conservative; assumes 60% of recovered hours backfilled with chargeable work</div>
          </div>
          <div className="rp-money__cell">
            <div className="rp-money__cell-label">Payback</div>
            <div className="rp-money__cell-num">Month 4<span className="stop">.</span></div>
            <div className="rp-money__cell-cap">Two highest-value use cases live before end of Phase 1</div>
          </div>
        </div>

        <div className="rp-money__bot">
          <div className="rp-money__bot-block">
            <h4>Where the value comes from</h4>
            <table className="rp-data">
              <tbody>
                <tr><td>Service Department AI Copilot</td><td>£82,000</td></tr>
                <tr><td>After-Hours Enquiry Handler</td><td>£27,400</td></tr>
                <tr><td>Sales Pipeline Intelligence</td><td>£38,000</td></tr>
                <tr className="rp-data--total"><td>Total annual value</td><td>£147,400</td></tr>
              </tbody>
            </table>
          </div>
          <div className="rp-money__bot-block">
            <h4>Where the cost goes</h4>
            <table className="rp-data">
              <tbody>
                <tr><td>Phase 1 build · Months 1 to 3</td><td>£17,500</td></tr>
                <tr><td>Phase 2 build · Months 4 to 6</td><td>£14,000</td></tr>
                <tr><td>Phase 3 build · Months 7 to 12</td><td>£7,000</td></tr>
                <tr className="rp-data--total"><td>Year-1 build investment</td><td>£38,500</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        <window.ReportCallout eyebrow="Recommended first action">
          Approve Phase 1 build (£17,500) by 9 May 2026. This unlocks the two highest-value
          use cases and the proof points needed to justify Phase 2 in July. The Service
          AI Copilot can be in production within six working weeks of sign-off.
        </window.ReportCallout>
      </div>
    </window.ReportPage>
  );
}

// ─── Use case deep-dive (Service Copilot) ──────────────────────────
function UseCasePage() {
  return (
    <window.ReportPage page={24} total={37} headerRight="Use Case 01 · Service Copilot">
      <div className="rp-uc">

        <div className="rp-uc__head">
          <div>
            <div className="rp-uc__head-meta">
              <span className="rp-uc__priority">Priority 01 · High</span>
              <span className="eyebrow">Service · 6 to 8 weeks to value</span>
            </div>
            <h2 className="rp-uc__title">
              Service Department<br/>AI <em>Copilot</em><i className="stop">.</i>
            </h2>
          </div>
          <h3 className="rp-uc__head-num">01</h3>
        </div>

        <div className="rp-uc__block">
          <div className="rp-uc__block-label">Problem</div>
          <div className="rp-uc__block-body">
            Service technicians and parts counter staff lose 18 hours per week
            collectively to two activities well-suited to AI: identifying parts for
            older or non-standard machinery (where the official catalogue search
            fails) and writing up job cards. At Hartwell's chargeable rate of £88 / hr,
            that's <strong>£82,368 per year</strong> of foregone revenue or recovered capacity.
          </div>
        </div>

        <div className="rp-uc__block">
          <div className="rp-uc__block-label">Solution</div>
          <div className="rp-uc__block-body">
            A Claude-powered AI Copilot accessible from a tablet at each service bench
            and the parts counter. Trained on the full Ibcos parts catalogue (~210k
            line items), 85 service manuals, three years of completed job cards, and
            Hartwell's parts substitution knowledge. Three workflows:
            <ul className="rp-list" style={{marginTop: "8pt"}}>
              <li><strong>Photo-based parts ID</strong>, technician photographs an unknown part; Copilot suggests likely match plus compatible alternatives.</li>
              <li><strong>Job-card drafting</strong>, technician dictates a brief summary; Copilot drafts the full job card in Hartwell's standard format for review.</li>
              <li><strong>Parts counter assistant</strong>, vague customer request ("a thingy for the front of an old Massey") becomes a structured suggestion.</li>
            </ul>
          </div>
        </div>

        <div className="rp-uc__block">
          <div className="rp-uc__block-label">Estimated value</div>
          <div className="rp-uc__block-body">
            <table className="rp-data">
              <tbody>
                <tr><td>Hours saved per week</td><td>18 hrs</td></tr>
                <tr><td>Hours saved per year (48 weeks)</td><td>936 hrs</td></tr>
                <tr><td>60% recovered as chargeable · 562 hrs × £88</td><td>£49,456</td></tr>
                <tr><td>40% reduction in overtime · 374 hrs × £35</td><td>£13,090</td></tr>
                <tr><td>Customer satisfaction uplift (indirect)</td><td>£10–15k</td></tr>
                <tr className="rp-data--total"><td>Conservative annual value</td><td>£82,000</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        <div className="rp-uc__block">
          <div className="rp-uc__block-label">Risks</div>
          <div className="rp-uc__block-body">
            <ul className="rp-list rp-list--risk">
              <li><strong>Manual coverage gaps</strong>, older machinery manuals not yet digitised. Mitigation: Mike to identify the top 30; MoonBoots assists. Two-week buffer in plan.</li>
              <li><strong>Older technicians may resist tablets.</strong> Mitigation: start with one champion; let peer adoption pull the rest along; Mike leads on culture.</li>
              <li><strong>Ibcos API rate limits.</strong> Mitigation: pre-fetch and cache catalogue locally; refresh weekly.</li>
            </ul>
          </div>
        </div>

        <window.ReportCallout eyebrow="Indicative build cost">
          <strong>£9,500 fixed price</strong> for build and rollout. Includes knowledge-base
          capture, Copilot build, four tablets (one per depot), training, and 30 days
          of post-launch support. Ongoing tooling: <strong>£220 / month</strong> (Claude API + tablet management).
        </window.ReportCallout>

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

// ─── Appendix page (Glossary sample) ───────────────────────────────
function AppendixPage() {
  const entries = [
    { term: "Bounded AI",
      def: "AI configured with explicit limits on what it can do. The system assists, drafts, suggests, and surfaces information; it never decides, commits, or acts autonomously without human review. Every customer-facing AI interaction is identified as AI." },
    { term: "AI-Curious",
      def: "The first tier on the AI Readiness Scorecard. Indicates a business with informal, ad-hoc experimentation but no formal policy, training, or measurement. Common starting point; not a cause for concern." },
    { term: "AI-Ready",
      def: "The second tier. Indicates documented policy, at least one production AI workflow, an internal champion, and basic measurement. Target state for Hartwell &amp; Sons by April 2027." },
    { term: "Blueprint Day",
      def: "A structured one-day engagement led by MoonBoots with the client's leadership team. Inputs include the AI Readiness Scorecard, a pre-call questionnaire, and a site walkthrough. Output is this document." },
    { term: "Five Pillars",
      def: "MoonBoots' assessment framework: Assess, Prioritise, Govern, Deploy, Evolve. Each is scored on the AI Readiness Scorecard and analysed in Section 3 of this Blueprint." },
    { term: "Ibcos Gold",
      def: "The dealer management system used by approximately 70% of UK and Irish agricultural machinery dealerships, including Hartwell. Holds parts inventory, sales, service, and warranty records. Provides an open API and webhooks." },
    { term: "Shadow AI",
      def: "Informal, undocumented use of AI tools by staff without formal IT governance. At Hartwell: ChatGPT for marketing captions, Microsoft Copilot in Outlook, Google Lens for parts identification. Treated as a signal of high-friction work, not a problem in itself." },
    { term: "Use Case Backlog",
      def: "A single shared register of AI ideas, scored against the value-feasibility-time-to-value framework. Maintained by Sarah Hartwell-Davies. Reviewed monthly. New ideas added by any staff member via a simple form." },
  ];

  return (
    <window.ReportPage page={35} total={37} headerRight="Appendix A · Glossary">
      <div style={{display: "flex", flexDirection: "column", gap: "20pt", flex: "1 1 auto"}}>
        <div>
          <div className="rp-section-eyebrow">Appendix A</div>
          <h2 className="rp-h1" style={{maxWidth: "22ch"}}>
            Glossary<i className="stop">.</i>
          </h2>
          <p className="rp-lede" style={{marginTop: "12pt"}}>
            Plain-English definitions for the terms used in this document. Designed
            to be referenced rather than read in order.
          </p>
        </div>

        <div style={{display: "flex", flexDirection: "column"}}>
          {entries.map(e => (
            <div className="rp-app__entry" key={e.term}>
              <div className="rp-app__term">{e.term}</div>
              <div className="rp-app__def" dangerouslySetInnerHTML={{__html: e.def}}></div>
            </div>
          ))}
        </div>
      </div>
    </window.ReportPage>
  );
}

window.ReportCallout = ReportCallout;
window.ExecSummaryPage = ExecSummaryPage;
window.MoneyPage = MoneyPage;
window.UseCasePage = UseCasePage;
window.AppendixPage = AppendixPage;