/* ==========================================================================
   Section 05 — What we do (five service groups, individual-anchored)
   ========================================================================== */

function WhatWeDo() {
  const groups = [
    {
      num: "5a",
      form: "Form 1040",
      title: "Individual & household returns",
      lines: [
        "Federal and state preparation",
        "Stock-based compensation — RSUs, ESPPs, options, QSBS",
        "Trust and estate beneficiary reporting (K-1s received)",
        "Year-round tax planning and quarterly estimates",
        "Multi-state filings when a client needs them",
      ],
    },
    {
      num: "5b",
      form: "Form 1065",
      title: "Family & investment partnerships",
      lines: [
        "Family limited partnerships (FLPs)",
        "Family investment partnerships — a growing focus",
        "Real estate development and rental partnerships",
        "K-1 preparation, allocations, and basis tracking",
        "Accounting advisory and financial-statement review",
      ],
    },
    {
      num: "5c",
      form: "Forms 1041 · 706",
      title: "Trusts & estates",
      lines: [
        "Simple and complex trusts (Form 1041)",
        "Estate tax returns (Form 706)",
        "Gift tax returns and planning coordination",
        "Generation-skipping considerations",
        "Coordinated with family-partnership filings",
      ],
    },
    {
      num: "5d",
      form: "Forms 1120-S · 1120",
      title: "Associated business returns",
      lines: [
        "S-corporation returns (Form 1120-S)",
        "C-corporation returns (Form 1120)",
        "For entities owned by our individual clients",
        "Accounting support: closing, adjustments, statement review",
        "Not standalone — always anchored to an individual relationship",
      ],
    },
    {
      num: "5e",
      form: "Advisory",
      title: "Tax-adjacent advisory",
      lines: [
        "Entity selection and structure",
        "Buying and selling a business — tax effects, deal structuring",
        "Estate, trust, and gift planning",
        "Always paired with a return we prepare",
      ],
    },
  ];

  return (
    <section className="part" id="what-we-do" data-screen-label="05 What We Do">
      <PartHeader
        part="IV"
        title="What We Do"
        meta="Lines 5a–5e · Services · complete all that apply"
        instructions="Everything we do starts with, or attaches to, an individual client and the entities around them."
      />

      <div style={{
        marginTop: 28,
        border: "1px solid var(--rule-thin)",
        borderTop: "2px solid var(--ink)",
      }}>
        {groups.map((g, i) => (
          <div key={g.num} style={{
            display: "grid",
            gridTemplateColumns: "80px 180px 1fr auto",
            gap: 20,
            padding: "22px 20px",
            borderBottom: i < groups.length - 1 ? "1px solid var(--rule-thin)" : "none",
            alignItems: "start",
          }}>
            {/* Line number */}
            <div>
              <div style={{
                fontFamily: "var(--mono)",
                fontSize: "var(--t-cap)",
                fontWeight: 700,
                letterSpacing: "0.1em",
                color: "var(--ink-muted)",
              }}>Line {g.num}</div>
              <div style={{
                fontFamily: "var(--mono)",
                fontSize: "var(--t-cap)",
                color: "var(--ink-muted)",
                marginTop: 4,
                letterSpacing: "0.04em",
              }}>{g.form}</div>
            </div>

            {/* Title */}
            <div>
              <div style={{
                fontFamily: "var(--serif)",
                fontSize: "var(--t-lead)",
                fontWeight: 600,
                lineHeight: 1.2,
                letterSpacing: "-0.005em",
                color: "var(--ink)",
              }}>{g.title}</div>
            </div>

            {/* Sub-lines */}
            <ul style={{
              listStyle: "none",
              padding: 0,
              margin: 0,
              display: "grid",
              gap: 4,
              fontFamily: "var(--serif)",
              fontSize: "var(--t-body)",
              color: "var(--ink-soft)",
              lineHeight: 1.5,
            }}>
              {g.lines.map((l, j) => (
                <li key={j} style={{ display: "flex", gap: 10 }}>
                  <span style={{
                    fontFamily: "var(--mono)",
                    fontSize: "var(--t-cap)",
                    color: "var(--ink-muted)",
                    minWidth: 22,
                    paddingTop: 4,
                  }}>{g.num}.{j + 1}</span>
                  <span>{l}</span>
                </li>
              ))}
            </ul>

            {/* Checkmark column */}
            <div style={{
              fontFamily: "var(--mono)",
              fontSize: "var(--t-cap)",
              fontWeight: 700,
              letterSpacing: "0.12em",
              color: "var(--ink-muted)",
              textTransform: "uppercase",
              paddingTop: 3,
            }}>✓ Available</div>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 18,
        fontFamily: "var(--mono)",
        fontSize: "var(--t-cap)",
        color: "var(--ink-muted)",
        letterSpacing: "0.04em",
      }}>
        ▸ Not listed but not offered — see Line 4z (what we don't do) above.
      </div>
    </section>
  );
}

Object.assign(window, { WhatWeDo });