// Scopes of Work tab — list/detail layout with full scope breakdown
const SCOPES = [
  {
    id: "SOW-01", number: "01.100", name: "Site Prep & Earthwork",
    description: "Clearing, grading, and pad preparation for full array footprint. Includes erosion control and access road construction.",
    included: ["Vegetation clearing across 38 acres", "Cut/fill grading to ±0.10 ft tolerance", "Silt fencing & SWPPP install", "Access road compaction"],
    excluded: ["Off-site spoil hauling", "Wetland mitigation", "Topsoil stockpile management beyond 60 days"],
    deliverables: 4,
    start: "01/12/2026", end: "02/28/2026",
    status: "Complete", statusTone: "info",
    owner: { initials: "RF", name: "Robert Fox", color: "#76ADFF" },
    originalBudget: 480_000, revisedBudget: 492_000, forecast: 488_400, actual: 488_400,
    pct: 100, billable: 492_000, billed: 492_000,
    changeOrders: 1, files: 12, tasks: 18, costCodes: ["02-200", "02-370"],
  },
  {
    id: "SOW-02", number: "02.100", name: "Pile Driving & Foundation",
    description: "Driven pile foundations for full array. Includes pull-out testing per geotechnical spec and refusal handling.",
    included: ["Drive 4,820 piles to spec depth", "Pull-out testing per IFC spec — 2% sample", "Refusal pile remediation (predrilling)", "As-built survey of pile locations"],
    excluded: ["Rock anchors", "Helical pier alternates", "Geotech investigations"],
    deliverables: 5,
    start: "02/15/2026", end: "04/10/2026",
    status: "Complete", statusTone: "info",
    owner: { initials: "EC", name: "Emma Connor", color: "#22863A" },
    originalBudget: 1_240_000, revisedBudget: 1_268_000, forecast: 1_268_000, actual: 1_268_000,
    pct: 100, billable: 1_268_000, billed: 1_204_600,
    changeOrders: 1, files: 28, tasks: 42, costCodes: ["03-310", "31-620"],
  },
  {
    id: "SOW-03", number: "03.100", name: "Racking — Uprights & Torque Tubes",
    description: "Install structural racking system including uprights, purlins, and torque tubes for tracker rows.",
    included: ["Install 2,410 uprights with shim plates", "Install 1,205 torque tubes", "Install all purlins per drawing set R-3", "Torque verification 100% sample"],
    excluded: ["Module clamps (see SOW-04)", "Tracker drive components"],
    deliverables: 6,
    start: "04/05/2026", end: "06/12/2026",
    status: "In Progress", statusTone: "success",
    owner: { initials: "RF", name: "Robert Fox", color: "#76ADFF" },
    originalBudget: 1_080_000, revisedBudget: 1_142_000, forecast: 1_186_000, actual: 728_400,
    pct: 64, billable: 1_142_000, billed: 624_000,
    changeOrders: 2, files: 19, tasks: 31, costCodes: ["13-340"],
  },
  {
    id: "SOW-04", number: "04.100", name: "Module Installation",
    description: "Install PV modules with module-level clamps. Includes torque verification and visual QA.",
    included: ["Install 14,640 PV modules", "End-clamps + mid-clamps per spec", "Module serial scan & log", "Visual QA — 100% rows"],
    excluded: ["Module supply", "Damaged module replacement beyond 0.25%"],
    deliverables: 4,
    start: "05/20/2026", end: "08/01/2026",
    status: "In Progress", statusTone: "success",
    owner: { initials: "JL", name: "Jordan Lin", color: "#FF9143" },
    originalBudget: 720_000, revisedBudget: 720_000, forecast: 742_000, actual: 184_000,
    pct: 26, billable: 720_000, billed: 144_000,
    changeOrders: 0, files: 9, tasks: 22, costCodes: ["26-310"],
  },
  {
    id: "SOW-05", number: "05.100", name: "DC & AC Electrical",
    description: "Source-circuit wiring, combiner boxes, and AC collection up to point of interconnection.",
    included: ["DC source-circuit harnesses", "Combiner box install — 24 units", "Underground AC collection trenching", "Megger & insulation testing"],
    excluded: ["Transformer supply", "Substation work", "Utility-side interconnection"],
    deliverables: 5,
    start: "07/15/2026", end: "09/30/2026",
    status: "Not Started", statusTone: "neutral",
    owner: { initials: "NM", name: "Nick Merley", color: "#B279FF" },
    originalBudget: 860_000, revisedBudget: 860_000, forecast: 860_000, actual: 0,
    pct: 0, billable: 860_000, billed: 0,
    changeOrders: 0, files: 4, tasks: 14, costCodes: ["26-200", "26-410"],
  },
  {
    id: "SOW-06", number: "06.100", name: "Commissioning & QA/QC",
    description: "Final QA/QC, performance testing, punch list, and customer turnover including warranty package.",
    included: ["String IV-curve testing", "Tracker calibration & motion test", "Punch list resolution", "Warranty package & O&M binder"],
    excluded: ["Long-term performance monitoring", "Year-1 O&M services"],
    deliverables: 8,
    start: "09/15/2026", end: "11/30/2026",
    status: "Not Started", statusTone: "neutral",
    owner: { initials: "EC", name: "Emma Connor", color: "#22863A" },
    originalBudget: 280_000, revisedBudget: 280_000, forecast: 280_000, actual: 0,
    pct: 0, billable: 280_000, billed: 0,
    changeOrders: 0, files: 2, tasks: 11, costCodes: ["01-770", "01-820"],
  },
];

const ScopesOfWorkTab = (props) => {
  const ctx = React.useContext(window.ViewModeContext || React.createContext({ mode: "detailed" }));
  return (
    <div key={ctx.mode} className="mode-fade">
      {ctx.mode === "simplified" ? <ScopesOfWorkSimplified {...props} /> : <ScopesOfWorkDetailed {...props} />}
    </div>
  );
};

// =================================================================
// SIMPLIFIED — answer "where is the work and where's the money going?"
// One card per scope with a clean progress bar, status, and budget glance.
// No list+detail split, no rolled up KPIs, no inclusions/exclusions.
// =================================================================
const ScopesOfWorkSimplified = ({ p }) => {
  const totalRevised = SCOPES.reduce((s, x) => s + x.revisedBudget, 0);
  const totalActual = SCOPES.reduce((s, x) => s + x.actual, 0);
  const overallPct = Math.round(SCOPES.reduce((s, x) => s + x.pct * x.originalBudget, 0) / SCOPES.reduce((s, x) => s + x.originalBudget, 0));
  const active = SCOPES.filter(s => s.status === "In Progress").length;
  const done = SCOPES.filter(s => s.status === "Complete").length;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      {/* Single hero summary line */}
      <div style={{ background: "#fff", border: "1px solid rgb(231,233,236)", borderRadius: 12, padding: "18px 20px",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
        <div>
          <div style={{ fontSize: 11, color: "rgb(106,115,131)", fontWeight: 600, textTransform: "uppercase", letterSpacing: ".05em", marginBottom: 6 }}>Scope progress</div>
          <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-.015em" }}>
            {done} of {SCOPES.length} complete · {active} in progress · {overallPct}% overall
          </div>
          <div style={{ fontSize: 13, color: "rgb(106,115,131)", marginTop: 4 }}>
            {fmtMoney(totalActual)} spent of {fmtMoney(totalRevised)} budgeted across all scopes
          </div>
        </div>
        <Button kind="primary" size="sm" icon="plus">Add Scope</Button>
      </div>

      {/* One card per scope */}
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {SCOPES.map(s => {
          const variance = s.actual - s.revisedBudget;
          const tone = variance > 0 ? "danger" : s.status === "Complete" ? "success" : "neutral";
          const ringColor = s.status === "Complete" ? "rgb(34,134,58)" : variance > 0 ? "rgb(192,47,50)" : "rgb(83,74,255)";
          return (
            <div key={s.id} style={{
              background: "#fff", border: "1px solid rgb(231,233,236)", borderRadius: 12,
              padding: "16px 20px", display: "grid",
              gridTemplateColumns: "auto 1fr auto auto", gap: 18, alignItems: "center"
            }}>
              {/* Status dot + name */}
              <div style={{
                width: 8, height: 40, borderRadius: 4,
                background: ringColor
              }} />
              <div style={{ minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
                  <span style={{ fontSize: 15, fontWeight: 600, color: "rgb(26,27,37)" }}>{s.name}</span>
                  <Chip tone={s.statusTone} dot>{s.status}</Chip>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "rgb(106,115,131)" }}>
                  <Avatar size={16} initials={s.owner.initials} color={s.owner.color} />
                  <span>{s.owner.name}</span>
                  <span>·</span>
                  <span>{s.start} – {s.end}</span>
                </div>
              </div>
              {/* Budget */}
              <div style={{ textAlign: "right", minWidth: 180 }}>
                <div style={{ fontSize: 14, fontWeight: 600, fontVariantNumeric: "tabular-nums",
                  color: variance > 0 ? "rgb(192,47,50)" : "rgb(26,27,37)" }}>
                  {fmtMoney(s.actual)} <span style={{ color: "rgb(163,172,186)", fontWeight: 400 }}>of {fmtMoney(s.revisedBudget)}</span>
                </div>
                <div style={{ marginTop: 6 }}>
                  <ProgressBar value={s.actual} max={Math.max(s.revisedBudget, s.actual) * 1.05} color={ringColor} height={4} />
                </div>
                {variance > 0 && (
                  <div style={{ fontSize: 11, color: "rgb(192,47,50)", marginTop: 4, fontWeight: 500 }}>
                    Over by {fmtMoney(variance)}
                  </div>
                )}
              </div>
              {/* % complete */}
              <div style={{ textAlign: "right", minWidth: 60 }}>
                <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-.02em", fontVariantNumeric: "tabular-nums",
                  color: s.pct === 100 ? "rgb(34,134,58)" : "rgb(26,27,37)" }}>{s.pct}%</div>
                <div style={{ fontSize: 10, color: "rgb(106,115,131)", textTransform: "uppercase", letterSpacing: ".04em", fontWeight: 600 }}>Done</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const ScopesOfWorkDetailed = ({ p }) => {
  const [selectedId, setSelectedId] = React.useState("SOW-03");
  const selected = SCOPES.find(s => s.id === selectedId) || SCOPES[0];

  // Roll-ups
  const totalOriginal = SCOPES.reduce((s, x) => s + x.originalBudget, 0);
  const totalRevised = SCOPES.reduce((s, x) => s + x.revisedBudget, 0);
  const totalForecast = SCOPES.reduce((s, x) => s + x.forecast, 0);
  const totalActual = SCOPES.reduce((s, x) => s + x.actual, 0);
  const totalBilled = SCOPES.reduce((s, x) => s + x.billed, 0);
  const totalBillable = SCOPES.reduce((s, x) => s + x.billable, 0);
  const overallPct = Math.round(SCOPES.reduce((s, x) => s + x.pct * x.originalBudget, 0) / totalOriginal);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {/* Summary strip */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
        <KPICard label="Total Scopes" value={SCOPES.length} sub={`${SCOPES.filter(s => s.status === "In Progress").length} active`} icon="layers" />
        <KPICard label="Original Budget" value={fmtMoney(totalOriginal)} sub="across all scopes" icon="dollar" />
        <KPICard label="Forecast" value={fmtMoney(totalForecast)} sub={`${fmtMoney(totalForecast - totalOriginal)} above plan`} deltaTone={totalForecast > totalOriginal ? "warning" : "success"} icon="chartBar" />
        <KPICard label="Actual to Date" value={fmtMoney(totalActual)} sub={`${Math.round(totalActual/totalRevised*100)}% of revised`} icon="receipt" />
        <KPICard label="Weighted Progress" value={`${overallPct}%`} sub={`${fmtMoney(totalBilled)} billed`} icon="activity" />
      </div>

      {/* List + Detail */}
      <div style={{ display: "grid", gridTemplateColumns: "minmax(420px, 1.1fr) 1.4fr", gap: 16, alignItems: "flex-start" }}>
        {/* Scope list */}
        <Card padding={0}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 16px", borderBottom: "1px solid rgb(239,240,242)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ fontSize: 14, fontWeight: 600 }}>Scopes</span>
              <Chip tone="neutral">{SCOPES.length}</Chip>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <Button size="sm" kind="ghost" icon="filter">Filter</Button>
              <Button size="sm" kind="primary" icon="plus">Add Scope</Button>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "60px 1.6fr 0.9fr 1fr 80px", padding: "8px 16px", fontSize: 11, fontWeight: 500, color: "rgb(106,115,131)", borderBottom: "1px solid rgb(239,240,242)", background: "rgb(252,252,253)", textTransform: "uppercase", letterSpacing: ".04em", gap: 10, alignItems: "center" }}>
            <span>No.</span><span>Scope</span><span>Status</span><span>Budget</span><span style={{ textAlign: "right" }}>%</span>
          </div>
          {SCOPES.map((s, i) => {
            const isSel = s.id === selectedId;
            const variance = s.actual - s.revisedBudget;
            return (
              <div key={s.id} onClick={() => setSelectedId(s.id)}
                style={{
                  display: "grid", gridTemplateColumns: "60px 1.6fr 0.9fr 1fr 80px",
                  padding: "12px 16px", fontSize: 13, gap: 10, alignItems: "center", cursor: "pointer",
                  borderBottom: i < SCOPES.length - 1 ? "1px solid rgb(239,240,242)" : "none",
                  background: isSel ? "rgba(232,233,246,.5)" : "#fff",
                  borderLeft: isSel ? "3px solid rgb(83,74,255)" : "3px solid transparent",
                  paddingLeft: isSel ? 13 : 16,
                  transition: "background 120ms"
                }}
                onMouseEnter={e => { if (!isSel) e.currentTarget.style.background = "rgb(248,248,251)"; }}
                onMouseLeave={e => { if (!isSel) e.currentTarget.style.background = "#fff"; }}
              >
                <span style={{ fontSize: 12, color: "rgb(106,115,131)", fontVariantNumeric: "tabular-nums", fontWeight: 500 }}>{s.number}</span>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontWeight: 500, color: isSel ? "rgb(83,74,255)" : "rgb(26,27,37)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{s.name}</div>
                  <div style={{ fontSize: 11, color: "rgb(106,115,131)", marginTop: 2, display: "flex", alignItems: "center", gap: 6 }}>
                    <Avatar size={14} initials={s.owner.initials} color={s.owner.color} />
                    <span>{s.owner.name}</span>
                  </div>
                </div>
                <Chip tone={s.statusTone} dot>{s.status}</Chip>
                <div>
                  <div style={{ fontSize: 12, color: variance > 0 ? "rgb(192,47,50)" : "rgb(106,115,131)", fontVariantNumeric: "tabular-nums" }}>
                    {fmtMoney(s.actual)} / {fmtMoney(s.revisedBudget)}
                  </div>
                  <ProgressBar value={s.actual} max={Math.max(s.revisedBudget, s.actual) * 1.05} color={variance > 0 ? "rgb(192,47,50)" : "rgb(83,74,255)"} height={3} />
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{ fontSize: 13, fontWeight: 600, fontVariantNumeric: "tabular-nums", color: s.pct === 100 ? "rgb(34,134,58)" : "rgb(26,27,37)" }}>{s.pct}%</div>
                </div>
              </div>
            );
          })}
        </Card>

        {/* Scope detail */}
        <ScopeDetailCard scope={selected} />
      </div>
    </div>
  );
};

const ScopeDetailCard = ({ scope: s }) => {
  const variance = s.actual - s.revisedBudget;
  const remaining = Math.max(0, s.revisedBudget - s.actual);
  const remainingBill = s.billable - s.billed;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16, position: "sticky", top: 200 }}>
      {/* Header card */}
      <Card padding={0}>
        <div style={{ padding: "16px 18px", borderBottom: "1px solid rgb(239,240,242)" }}>
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12, marginBottom: 10 }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                <span style={{ fontSize: 11, color: "rgb(106,115,131)", fontWeight: 500, fontVariantNumeric: "tabular-nums" }}>{s.number}</span>
                <span style={{ width: 3, height: 3, borderRadius: "50%", background: "rgb(163,172,186)" }} />
                <span style={{ fontSize: 11, color: "rgb(106,115,131)", fontWeight: 500 }}>{s.id}</span>
                <Chip tone={s.statusTone} dot>{s.status}</Chip>
              </div>
              <h2 style={{ fontSize: 18, fontWeight: 700, margin: 0, letterSpacing: "-.01em" }}>{s.name}</h2>
              <div style={{ fontSize: 13, color: "rgb(65,69,82)", marginTop: 6, lineHeight: 1.5 }}>{s.description}</div>
            </div>
            <div style={{ display: "flex", gap: 6, flexShrink: 0 }}>
              <Button kind="secondary" size="sm" icon="pen">Edit</Button>
              <IconBtn icon="more" tone="outline" size={28} />
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginTop: 12, paddingTop: 12, borderTop: "1px solid rgb(239,240,242)" }}>
            <DetailField label="Start" value={s.start} mono />
            <DetailField label="Target Completion" value={s.end} mono />
            <DetailField label="Owner" value={<><Avatar size={18} initials={s.owner.initials} color={s.owner.color} /> {s.owner.name}</>} />
            <DetailField label="% Complete" value={
              <div style={{ display: "flex", alignItems: "center", gap: 6, width: "100%" }}>
                <ProgressBar value={s.pct} color={s.pct === 100 ? "rgb(34,134,58)" : "rgb(83,74,255)"} height={5} />
                <span style={{ fontSize: 13, fontWeight: 600, fontVariantNumeric: "tabular-nums", minWidth: 32, textAlign: "right" }}>{s.pct}%</span>
              </div>
            } />
          </div>
        </div>

        {/* Financial breakdown */}
        <div style={{ padding: "16px 18px", borderBottom: "1px solid rgb(239,240,242)" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
            <span style={{ fontSize: 13, fontWeight: 600 }}>Budget</span>
            {variance !== 0 && (
              <Chip tone={variance > 0 ? "danger" : "success"} dot>
                {variance > 0 ? "+" : "−"}{fmtMoney(Math.abs(variance))} variance
              </Chip>
            )}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 14 }}>
            <Stat label="Original Budget" value={fmtMoney(s.originalBudget)} />
            <Stat label="Revised Budget" value={fmtMoney(s.revisedBudget)} />
            <Stat label="Forecast" value={fmtMoney(s.forecast)} tone={s.forecast > s.revisedBudget ? "warning" : "neutral"} />
            <Stat label="Actual Cost" value={fmtMoney(s.actual)} />
            <Stat label="Remaining" value={fmtMoney(remaining)} />
            <Stat label="Spent of Revised" value={`${Math.round(s.actual/s.revisedBudget*100)}%`} />
          </div>
          <div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "rgb(106,115,131)", marginBottom: 4 }}>
              <span>Spent {fmtMoney(s.actual)}</span>
              <span>Budget {fmtMoney(s.revisedBudget)}</span>
            </div>
            <ProgressBar value={s.actual} max={Math.max(s.revisedBudget, s.actual) * 1.05} color={variance > 0 ? "rgb(192,47,50)" : "rgb(83,74,255)"} height={6} />
          </div>
        </div>

        {/* Billing */}
        <div style={{ padding: "16px 18px", borderBottom: "1px solid rgb(239,240,242)" }}>
          <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>Billing</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
            <Stat label="Billable Amount" value={fmtMoney(s.billable)} />
            <Stat label="Billed to Date" value={fmtMoney(s.billed)} tone={s.billed === s.billable ? "success" : "neutral"} />
            <Stat label="Remaining to Bill" value={fmtMoney(remainingBill)} />
          </div>
        </div>

        {/* Linked records */}
        <div style={{ padding: "16px 18px" }}>
          <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 10 }}>Linked Records</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 8 }}>
            <LinkRow icon="file" label="Sales Order Lines" count={3} />
            <LinkRow icon="check" label="Deliverables" count={s.deliverables} />
            <LinkRow icon="layers" label="Budget Categories" count={2} />
            <LinkRow icon="list" label="Tasks" count={s.tasks} />
            <LinkRow icon="receipt" label="Billing Milestones" count={4} />
            <LinkRow icon="refresh" label="Change Orders" count={s.changeOrders} tone={s.changeOrders > 0 ? "warning" : "neutral"} />
            <LinkRow icon="folder" label="Documents" count={s.files} />
            <LinkRow icon="briefcase" label="Cost Codes" count={s.costCodes.length} subtitle={s.costCodes.join(", ")} />
          </div>
        </div>
      </Card>

      {/* Included / Excluded */}
      <Card padding={0}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
          <div style={{ padding: "16px 18px", borderRight: "1px solid rgb(239,240,242)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 10 }}>
              <Icon name="check" size={14} color="rgb(34,134,58)" />
              <span style={{ fontSize: 13, fontWeight: 600 }}>Included Work</span>
            </div>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 6 }}>
              {s.included.map((line, i) => (
                <li key={i} style={{ fontSize: 13, color: "rgb(65,69,82)", display: "flex", gap: 8, lineHeight: 1.45 }}>
                  <span style={{ color: "rgb(34,134,58)", flexShrink: 0 }}>•</span>
                  <span>{line}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ padding: "16px 18px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 10 }}>
              <Icon name="cross" size={14} color="rgb(192,47,50)" />
              <span style={{ fontSize: 13, fontWeight: 600 }}>Excluded Work</span>
            </div>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 6 }}>
              {s.excluded.map((line, i) => (
                <li key={i} style={{ fontSize: 13, color: "rgb(65,69,82)", display: "flex", gap: 8, lineHeight: 1.45 }}>
                  <span style={{ color: "rgb(192,47,50)", flexShrink: 0 }}>•</span>
                  <span>{line}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Card>
    </div>
  );
};

const DetailField = ({ label, value, mono }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 4, minWidth: 0 }}>
    <span style={{ fontSize: 11, color: "rgb(106,115,131)", fontWeight: 500, textTransform: "uppercase", letterSpacing: ".04em" }}>{label}</span>
    <span style={{ fontSize: 13, fontWeight: 500, color: "rgb(26,27,37)", display: "inline-flex", alignItems: "center", gap: 6, fontVariantNumeric: mono ? "tabular-nums" : "normal" }}>{value}</span>
  </div>
);

const LinkRow = ({ icon, label, count, subtitle, tone = "neutral" }) => (
  <button style={{
    display: "flex", alignItems: "center", gap: 10, padding: "8px 10px",
    border: "1px solid rgb(239,240,242)", borderRadius: 8, background: "#fff",
    cursor: "pointer", textAlign: "left", fontFamily: "inherit", transition: "all 120ms"
  }}
  onMouseEnter={e => { e.currentTarget.style.background = "rgb(248,248,251)"; e.currentTarget.style.borderColor = "rgb(213,219,225)"; }}
  onMouseLeave={e => { e.currentTarget.style.background = "#fff"; e.currentTarget.style.borderColor = "rgb(239,240,242)"; }}>
    <div style={{ width: 26, height: 26, borderRadius: 6, background: tone === "warning" ? "rgb(255,243,210)" : "rgb(248,248,251)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
      <Icon name={icon} size={13} color={tone === "warning" ? "rgb(178,121,26)" : "rgb(83,74,255)"} />
    </div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 12, fontWeight: 500, color: "rgb(26,27,37)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{label}</div>
      {subtitle && <div style={{ fontSize: 11, color: "rgb(106,115,131)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{subtitle}</div>}
    </div>
    <span style={{ fontSize: 13, fontWeight: 600, color: tone === "warning" ? "rgb(178,121,26)" : "rgb(65,69,82)", fontVariantNumeric: "tabular-nums" }}>{count}</span>
  </button>
);

window.ScopesOfWorkTab = ScopesOfWorkTab;
window.SCOPES = SCOPES;