/* ==========================================================================
   Section 02 — Statistics (numbered line items · the firm in numbers)
   ========================================================================== */

function Statistics() {
  // Each row: num, label, value, unit/note
  const rows = [
    { n: "S1",  label: "Returns prepared each year",          value: "500–550", unit: "individual, trust, estate, partnership, S-corp, C-corp, non-profit" },
    { n: "S2",  label: "Individual clients served",           value: "~300",   unit: "families, households, and the entities around them" },
    { n: "S3",  label: "Years in continuous practice",        value: `~${new Date().getFullYear() - 1946}`, unit: "since 1946" },
    { n: "S4",  label: "Generations of partnership",          value: "4",      unit: "Barlow Sr. → Barlow Jr. → Hughan → Gotzev" },
    { n: "S5",  label: "Ages of clients we serve",            value: "3 – 105", unit: "a child's first trust return to a grandparent's final one" },
    { n: "S6",  label: "Household income range",              value: "broad",    unit: "from a first W-2 to eight-figure liquidity events — same office" },
    { n: "S7",  label: "Entity types we prepare returns for", value: "6",      unit: "Form 1040 · 1041 · 1065 · 1120-S · 1120 · 990" },
    { n: "S8",  label: "Work done in-house, in the US",       value: "100%",   unit: "nothing outsourced · never offshore · partner-reviewed" },
  ];

  // Filing-status strip — shows data fluency, not dollars
  const filing = [
    { k: "Married filing jointly", v: 59, count: 174 },
    { k: "Single",                 v: 36, count: 107 },
    { k: "Head of household",      v: 3,  count: 8 },
    { k: "Married filing sep.",    v: 2,  count: 6 },
  ];

  return (
    <section className="part" id="statistics" data-screen-label="02 Statistics">
      <PartHeader
        part="I"
        title="The Firm, in Numbers"
        meta="Lines S1–S8 · Firm statistics"
        instructions="The quickest portrait of the practice — drawn from tax year 2024 filings."
      />

      {/* Numbered rows — like a real 1040 */}
      <div style={{
        marginTop: 28,
        border: "1px solid var(--rule-thin)",
        borderTop: "2px solid var(--ink)",
      }}>
        {rows.map((r, i) => (
          <div key={r.n} style={{
            display: "grid",
            gridTemplateColumns: "56px 1fr auto 1.1fr",
            alignItems: "center",
            gap: 24,
            padding: "16px 18px",
            borderBottom: i < rows.length - 1 ? "1px dashed var(--rule-thin)" : "none",
            background: r.accent ? "var(--paper-shadow)" : "transparent",
          }}>
            <div style={{
              fontFamily: "var(--mono)",
              fontSize: "var(--t-cap)",
              fontWeight: 700,
              letterSpacing: "0.08em",
              color: "var(--ink-muted)",
            }}>{r.n}</div>

            <div style={{
              fontFamily: "var(--serif)",
              fontSize: "var(--t-body)",
              lineHeight: 1.35,
            }}>{r.label}</div>

            <div style={{
              fontFamily: "var(--mono)",
              fontSize: "var(--t-num)",
              fontWeight: 800,
              lineHeight: 1,
              color: r.accent ? "var(--stamp-red)" : "var(--ink)",
              minWidth: 120,
              textAlign: "right",
              letterSpacing: "-0.01em",
              whiteSpace: "nowrap",
            }}>{r.value}</div>

            <div style={{
              fontFamily: "var(--serif)",
              fontSize: "var(--t-body)",
              color: "var(--ink-soft)",
              lineHeight: 1.45,
            }}>{r.unit}</div>
          </div>
        ))}
      </div>

      {/* Filing-status mix — a small schedule */}
      <div style={{ marginTop: 28 }}>
        <div className="label" style={{ marginBottom: 12 }}>Line S9 &middot; Filing-status mix &middot; individual returns</div>
        <div style={{ border: "1px solid var(--rule-thin)", borderTop: "2px solid var(--ink)" }}>
          {filing.map((f, i) => (
            <div key={f.k} style={{
              display: "grid",
              gridTemplateColumns: "1.2fr 60px 80px 2fr",
              alignItems: "center",
              gap: 14,
              padding: "10px 14px",
              borderBottom: i < filing.length - 1 ? "1px dashed var(--rule-thin)" : "none",
            }}>
              <div style={{ fontFamily: "var(--serif)", fontSize: "var(--t-body)" }}>{f.k}</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: "var(--t-body)", fontWeight: 700, textAlign: "right" }}>{f.v}%</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: "var(--t-cap)", color: "var(--ink-muted)" }}>n = {f.count}</div>
              {/* Bar */}
              <div style={{ height: 8, background: "var(--paper-shadow)", border: "1px solid var(--rule-thin)", position: "relative" }}>
                <div style={{
                  position: "absolute", left: 0, top: 0, bottom: 0,
                  width: f.v + "%",
                  background: "var(--ink)",
                }} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Statistics });