// BlueprintReportUseCases.jsx
// Prioritisation matrix + use cases 02 & 03

// ─── Prioritisation matrix ─────────────────────────────────────────
function PrioritisationMatrixPage() {
  // Plot positions are %s of the inner box (left, bottom).
  // Y axis = Value (high→top), X axis = Effort (high→right). Top-left is sweet spot.
  const dots = [
    { id: "01", label: "Service Copilot",         x: 32, y: 80, ember: true },
    { id: "02", label: "After-Hours Enquiry",     x: 22, y: 60, ember: true },
    { id: "03", label: "Sales Pipeline",          x: 60, y: 70 },
    { id: "04", label: "Marketing drafting",      x: 12, y: 32 },
    { id: "05", label: "Inventory forecasting",   x: 78, y: 55 },
    { id: "06", label: "HR policy assistant",     x: 40, y: 22 },
    { id: "07", label: "Warranty admin",          x: 58, y: 38 },
    { id: "08", label: "Customer follow-up",      x: 28, y: 45 },
  ];

  return (
    <window.ReportPage page={23} total={37} headerRight="04 · Prioritisation matrix">
      <div style={{display: "flex", flexDirection: "column", gap: "18pt", flex: "1 1 auto"}}>

        <div>
          <div className="rp-section-eyebrow">04.0 · Prioritisation</div>
          <h2 className="rp-h1" style={{maxWidth: "26ch"}}>
            Eight ideas, three to <i className="emph">build</i><i className="stop">.</i>
          </h2>
        </div>

        <p className="rp-lede">
          The Blueprint Day surfaced eleven candidate use cases across operations,
          customer service, sales, and back-office. Three were de-scoped during the
          day itself. The remaining eight are plotted below. The three highest-value,
          lowest-effort cases (top-left quadrant) become Phases 1 to 3.
        </p>

        <div className="rp-matrix">
          <div className="rp-matrix__y-label">Annual value</div>
          <div className="rp-matrix__inner">
            <div className="rp-matrix__quad-label rp-matrix__quad-label--tl">Build first</div>
            <div className="rp-matrix__quad-label rp-matrix__quad-label--tr">Worth doing, later</div>
            <div className="rp-matrix__quad-label rp-matrix__quad-label--bl">Quick wins</div>
            <div className="rp-matrix__quad-label rp-matrix__quad-label--br">De-prioritise</div>

            {dots.map(d => (
              <React.Fragment key={d.id}>
                <div
                  className={"rp-matrix__dot" + (d.ember ? " rp-matrix__dot--ember" : "")}
                  style={{left: `${d.x}%`, bottom: `${d.y}%`}}
                  title={d.label}
                >
                  {d.id}
                </div>
                <div
                  className="rp-matrix__dot-label"
                  style={{left: `${d.x}%`, bottom: `${d.y}%`}}
                >
                  {d.label}
                </div>
              </React.Fragment>
            ))}
          </div>
          <div className="rp-matrix__x-label">Build effort</div>
        </div>

        <div className="rp-grid" style={{marginTop: "8pt"}}>
          <div>
            <h4 className="rp-h3" style={{marginBottom: "6pt"}}>How to read this</h4>
            <p className="rp-body">
              <strong>Top-left</strong> is the build-first quadrant: high value,
              low effort. The orange dots are Hartwell's three priority builds. <strong>Top-right</strong>
              is "worth doing, later"; high value but currently effort-heavy. Sales
              Pipeline (03) lives here and gets pulled into Phase 3 once the Service
              Copilot data spine is in place.
            </p>
          </div>
          <div>
            <h4 className="rp-h3" style={{marginBottom: "6pt"}}>What is excluded and why</h4>
            <p className="rp-body">
              <strong>Bottom-right</strong> ideas are de-prioritised, they cost more
              than they return at Hartwell's scale. <strong>Bottom-left</strong> are
              quick wins that staff can implement themselves (e.g. marketing drafting
              with templates) once the AI policy from <strong>Section 06</strong> is signed off.
            </p>
          </div>
        </div>

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

// ─── Use Case 02 to After-Hours Enquiry Handler ─────────────────────
function UseCase02Page() {
  return (
    <window.ReportPage page={25} total={37} headerRight="Use Case 02 · After-Hours">
      <div className="rp-uc">

        <div className="rp-uc__head">
          <div>
            <div className="rp-uc__head-meta">
              <span className="rp-uc__priority">Priority 02 · High</span>
              <span className="eyebrow">Sales · 4 to 5 weeks to value</span>
            </div>
            <h2 className="rp-uc__title">
              After-Hours Enquiry<br/><em>Handler</em><i className="stop">.</i>
            </h2>
          </div>
          <h3 className="rp-uc__head-num">02</h3>
        </div>

        <div className="rp-uc__block">
          <div className="rp-uc__block-label">Problem</div>
          <div className="rp-uc__block-body">
            Hartwell receives roughly 14 customer enquiries per week outside business
            hours, evenings and weekends, when machinery breakdowns are most disruptive
            for farmers. Currently these go to voicemail or a generic web form and are
            triaged on Monday morning. Internal estimate suggests <strong>40% of weekend
            leads are lost</strong> to faster-responding competitors.
          </div>
        </div>

        <div className="rp-uc__block">
          <div className="rp-uc__block-label">Solution</div>
          <div className="rp-uc__block-body">
            A bounded AI handler accessible via the website chat widget and as an
            SMS/WhatsApp number. The handler is identified as AI from the first
            message, captures structured details (machine, location, urgency), provides
            useful interim guidance for known issues from the Hartwell knowledge base,
            and routes urgent cases to the on-call duty technician via SMS escalation.
            Crucially, it does not commit Hartwell to anything: no quotes, no
            appointment confirmations, no warranty statements. It buys time.
          </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>Out-of-hours enquiries per year (52 wks × 14)</td><td>728</td></tr>
                <tr><td>Currently lost to competitors (40%)</td><td>291</td></tr>
                <tr><td>Recovered via faster response (assume 50%)</td><td>146</td></tr>
                <tr><td>Avg. service / parts revenue per recovered enquiry</td><td>£188</td></tr>
                <tr className="rp-data--total"><td>Conservative annual value</td><td>£27,400</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        <div className="rp-uc__block">
          <div className="rp-uc__block-label">Implementation</div>
          <div className="rp-uc__block-body">
            <strong>4 to 5 weeks</strong> from sign-off. Phase 2 build window. Owner:
            Sarah. Built on Claude API + an off-the-shelf chat widget; deployed to
            existing hartwellandsons.co.uk. SMS routing handled via the existing
            Twilio account already in place for service appointment reminders.
          </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>Customer perceives the AI as a brush-off.</strong> Mitigation: identify as AI from first message; offer immediate human callback.</li>
              <li><strong>Duty technician overload.</strong> Mitigation: the handler triages, only confirmed-urgent cases trigger SMS escalation; rest queue for Monday.</li>
              <li><strong>Brand-tone drift.</strong> Mitigation: tone guide reviewed and approved by Robert before launch. Sample audit monthly.</li>
            </ul>
          </div>
        </div>

        <window.ReportCallout eyebrow="Indicative build cost">
          <strong>£11,500 fixed price</strong> for build, deployment, training, and 30
          days post-launch support. Ongoing: <strong>£180 / month</strong> (Claude API +
          chat-widget licence + Twilio surcharge).
        </window.ReportCallout>

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

// ─── Use Case 03 to Sales Pipeline Intelligence ─────────────────────
function UseCase03Page() {
  return (
    <window.ReportPage page={26} total={37} headerRight="Use Case 03 · Sales">
      <div className="rp-uc">

        <div className="rp-uc__head">
          <div>
            <div className="rp-uc__head-meta">
              <span className="rp-uc__priority" style={{borderColor: "var(--ink-700)", color: "var(--ink-700)"}}>Priority 03 · Medium</span>
              <span className="eyebrow">Sales · Phase 3 · 8 to 10 weeks</span>
            </div>
            <h2 className="rp-uc__title">
              Sales Pipeline<br/><em>Intelligence</em><i className="stop">.</i>
            </h2>
          </div>
          <h3 className="rp-uc__head-num">03</h3>
        </div>

        <div className="rp-uc__block">
          <div className="rp-uc__block-label">Problem</div>
          <div className="rp-uc__block-body">
            Hartwell's sales team of three covers 1,400 active customer accounts.
            Replacement-cycle data sits inside Ibcos but is not actively surfaced.
            Customers are typically contacted reactively, when they call in, or when
            an annual mailshot prompts them. Internal estimate: ~£38k / year of
            replacement-cycle revenue is being missed because conversations happen
            after the customer has already started looking elsewhere.
          </div>
        </div>

        <div className="rp-uc__block">
          <div className="rp-uc__block-label">Solution</div>
          <div className="rp-uc__block-body">
            A weekly intelligence brief generated by an AI workflow over Ibcos data,
            sent to each salesperson Monday morning. For each account, it flags:
            (a) machinery approaching typical replacement age; (b) accounts that
            have gone silent against historical pattern; (c) parts purchases that
            suggest aging or struggling equipment. Suggestions only, never
            commitments, never customer-facing without review.
          </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>Replacement-cycle conversations recovered / year</td><td>~22</td></tr>
                <tr><td>Avg. transaction value (used / new mix)</td><td>£28,400</td></tr>
                <tr><td>Conversion rate uplift (assumed conservative)</td><td>+6.0%</td></tr>
                <tr><td>Plus: silent-account re-engagement value</td><td>£8,000</td></tr>
                <tr className="rp-data--total"><td>Conservative annual value</td><td>£38,000</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        <div className="rp-uc__block">
          <div className="rp-uc__block-label">Why this is Phase 3, not Phase 1</div>
          <div className="rp-uc__block-body">
            Two reasons. First, the value depends on Ibcos data hygiene, which Phase 2
            improves materially. Second, the Service Copilot in Phase 1 generates
            additional structured data (job notes, parts substitutions) that makes
            the Pipeline Intelligence brief 30 to 40% more useful than it would be
            today. Sequencing matters.
          </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>Salespeople ignore the brief.</strong> Mitigation: brief is a single A4 page, plain-English, sent at 07:30 Mondays. Tracked open rate; reviewed quarterly.</li>
              <li><strong>False positives erode trust.</strong> Mitigation: launch with conservative thresholds; tighten only after 60 days of human feedback.</li>
              <li><strong>Data privacy.</strong> Customer data stays inside the Ibcos environment; only anonymised features sent to the AI.</li>
            </ul>
          </div>
        </div>

        <window.ReportCallout eyebrow="Indicative build cost">
          <strong>£17,500 fixed price</strong> for build, integration with Ibcos, sales
          training, and the 30-day support window. Ongoing: <strong>£240 / month</strong>
          (Claude API + Ibcos integration maintenance).
        </window.ReportCallout>

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

window.PrioritisationMatrixPage = PrioritisationMatrixPage;
window.UseCase02Page = UseCase02Page;
window.UseCase03Page = UseCase03Page;