// Results page: anonymised case studies with the story arc behind each number.
const resDS = window.TierpointDesignSystem_fce423;

const TPW_CASES = [
  {
    sector: "Distribution",
    size: "£120m turnover · 14 entities",
    metric: "12 → 6",
    metricLabel: "days to close",
    situation: "A fourteen-entity distribution group closing in twelve days. The board wanted six. Nobody could say where the time went.",
    showed: "The event log put four days in approval queues and three in reconciliation rework. Two intercompany counterparties drove most of the mismatches.",
    changed: "Approval chains cut from five steps to two. Reconciliations resequenced around the critical path. The close now lands on day six, every month.",
    href: "Record to Report.html",
    process: "Record to report",
  },
  {
    sector: "Manufacturing",
    size: "£85m turnover · 3 ERPs",
    metric: "£340k",
    metricLabel: "recovered in year one",
    situation: "A manufacturer carrying three ERPs from past acquisitions, and a feeling that procure to pay leaked.",
    showed: "Duplicate payments at 0.6% of spend. One supplier template caused 31% of manual reviews. Agreed terms sat unused on a quarter of spend.",
    changed: "£340,000 recovered. Touchless invoicing up from 38% to 71%. One match rule change ended the duplicates.",
    href: "Procure to Pay.html",
    process: "Procure to pay",
  },
  {
    sector: "Business services",
    size: "£45m turnover",
    metric: "−12",
    metricLabel: "days of DSO",
    situation: "A services group with DSO at 51 days against 30-day terms, and a collections team working flat out.",
    showed: "Billing errors triggered most disputes. Disputes froze payment for whole accounts. Cash application lagged two days behind receipt.",
    changed: "Error-prone billing steps fixed at source. Dispute loops closed inside a week. DSO down twelve days, releasing £1.5m of working capital.",
    href: "Order to Cash.html",
    process: "Order to cash",
  },
];

function CaseStudy({ c }) {
  return (
    <div style={{ borderTop: "0.5px solid var(--tp-border)", padding: "48px 0", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 48 }}>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 6, height: 6, background: "var(--tp-green-electric)", display: "inline-block" }}></span>
          <TpPanelLabel>{c.sector}</TpPanelLabel>
        </div>
        <div style={{ fontSize: 56, fontWeight: 300, letterSpacing: "-2px", color: "var(--tp-white)", margin: "16px 0 4px" }}>{c.metric}</div>
        <div style={{ fontSize: 13, color: "var(--tp-grey-400)" }}>{c.metricLabel}</div>
        <div style={{ fontSize: 12, color: "var(--tp-grey-600)", marginTop: 12 }}>{c.size}</div>
        <a href={c.href} style={{ display: "inline-block", marginTop: 24, fontSize: 13, color: "var(--tp-green-electric)", textDecoration: "none" }}>
          {c.process} →
        </a>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
        <div>
          <TpPanelLabel>The situation</TpPanelLabel>
          <p style={{ margin: "8px 0 0", fontSize: 14, color: "var(--tp-grey-400)", lineHeight: 1.7, textWrap: "pretty" }}>{c.situation}</p>
        </div>
        <div>
          <TpPanelLabel>What the event log showed</TpPanelLabel>
          <p style={{ margin: "8px 0 0", fontSize: 14, color: "var(--tp-grey-400)", lineHeight: 1.7, textWrap: "pretty" }}>{c.showed}</p>
        </div>
        <div>
          <TpPanelLabel>What changed</TpPanelLabel>
          <p style={{ margin: "8px 0 0", fontSize: 14, color: "var(--tp-grey-400)", lineHeight: 1.7, textWrap: "pretty" }}>{c.changed}</p>
        </div>
      </div>
    </div>
  );
}

function ResultsPage() {
  const { Eyebrow, Button, MetricCard } = resDS;
  return (
    <div style={{ background: "var(--tp-black)", minHeight: "100vh", fontFamily: "var(--tp-font)" }}>
      <div style={{ position: "sticky", top: 0, zIndex: 10 }}>
        <SiteNav active="Case studies"></SiteNav>
      </div>

      <section style={{ background: "var(--tp-black)", padding: "96px var(--tpw-side, 88px) 64px" }} data-screen-label="Results hero">
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <Eyebrow marked>Case studies</Eyebrow>
          <h1
            style={{
              fontSize: "var(--type-display-size)",
              fontWeight: "var(--type-display-weight)",
              letterSpacing: "var(--type-display-tracking)",
              lineHeight: "var(--type-display-leading)",
              color: "var(--text-primary)",
              margin: "20px 0 24px",
              maxWidth: 860,
            }}
          >
            The numbers,
            <br></br>
            and the work behind them.
          </h1>
          <p style={{ fontSize: "var(--type-body-size)", color: "var(--text-body)", lineHeight: "var(--type-body-leading)", maxWidth: 520, margin: "0 0 32px" }}>
            Three engagements, anonymised. What the event log showed, what changed, and what it returned.
          </p>
          <Button arrow onClick={() => window.tpwBook()}>Book a conversation</Button>
        </div>
      </section>

      <TpSection style={{ paddingTop: 0 }} data-screen-label="Case studies">
        <div style={{ borderBottom: "0.5px solid var(--tp-border)" }}>
          {TPW_CASES.map((c) => (
            <CaseStudy key={c.sector} c={c}></CaseStudy>
          ))}
        </div>
        <p style={{ margin: "20px 0 0", fontSize: 11, color: "var(--tp-grey-600)" }}>Client names withheld. Figures as reported at engagement close.</p>
      </TpSection>

      <SampleReportsGrid></SampleReportsGrid>

      <ContactSection></ContactSection>
      <FooterSection></FooterSection>
    </div>
  );
}

window.ResultsPage = ResultsPage;