Engagement survey results

import { GaugeChart, HeatmapChart, MetricMini } from "@nexera-ui/react";

// Q3 2026 pulse survey: 211 of 248 people answered. eNPS = promoters (52%) minus detractors (18%) = +34.
const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri"];
const SLOTS = ["8:00", "10:00", "12:00", "14:00", "16:00", "18:00"];
const CHECK_INS = [
  [14, 22, 9, 12, 8, 3],
  [11, 19, 8, 10, 7, 2],
  [9, 16, 7, 9, 6, 2],
  [8, 14, 6, 8, 9, 3],
  [5, 9, 4, 6, 12, 7],
];

const BREAKDOWN = [
  { label: "Promoters", value: "52%", caption: "Scored 9 or 10" },
  { label: "Passives", value: "30%", caption: "Scored 7 or 8" },
  { label: "Detractors", value: "18%", caption: "Scored 0 to 6" },
  { label: "Response rate", value: "85%", caption: "211 of 248 people" },
];

/** Engagement survey results: the employee net promoter score against benchmark, and when people answered the weekly check-in. */
export default function EngagementSurveyResults() {
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-6xl gap-6">
        <header className="grid gap-1">
          <h2 className="text-heading-h2 text-primary">Engagement survey</h2>
          <p className="text-body-default text-secondary">Q3 2026 pulse · closed 26 September</p>
        </header>

        <div className="grid gap-4 @3xl:grid-cols-[2fr_3fr]">
          <GaugeChart
            title="eNPS"
            description="How likely people are to recommend Northwind as a place to work"
            summary="The employee net promoter score is +34, up from +27 in Q2 and above the software industry benchmark of +21."
            value={34}
            min={-100}
            max={100}
            valueFormat={{ signDisplay: "exceptZero" }}
            benchmark={{ value: 21, label: "industry" }}
            bands={[
              { from: -100, label: "Poor" },
              { from: 0, label: "Fair" },
              { from: 30, label: "Good" },
            ]}
          />
          <section
            aria-labelledby="enps-breakdown"
            className="grid content-start gap-4 rounded-lg border border-default bg-surface p-4 @3xl:p-6"
          >
            <div className="grid gap-1">
              <h3 id="enps-breakdown" className="text-heading-h4 text-primary">
                How people answered
              </h3>
              <p className="text-body-small text-muted">
                eNPS is the share of promoters minus the share of detractors.
              </p>
            </div>
            <div className="grid grid-cols-2 gap-4">
              {BREAKDOWN.map((item) => (
                <MetricMini
                  key={item.label}
                  label={item.label}
                  value={item.value}
                  caption={item.caption}
                />
              ))}
            </div>
            <p className="text-body-small text-secondary">
              Top theme from comments:{" "}
              <span className="text-body-strong text-primary">clearer career paths</span> (mentioned
              by 64 people).
            </p>
          </section>
        </div>

        <HeatmapChart
          title="Weekly check-in responses"
          description="Answers per two-hour slot, averaged over the quarter"
          summary="Most people answer the weekly check-in on Monday and Tuesday mornings, peaking at 22 on Monday at 10:00. Friday answers come late in the afternoon."
          rows={DAYS}
          columns={SLOTS}
          values={CHECK_INS}
          valueLabel="Responses"
        />
      </div>
    </div>
  );
}