/* ==========================================================================
   Section 04 — Who we serve (four pillars + "what we don't do")
   ========================================================================== */

function WhoWeServe() {
  const pillars = [
    {
      n: "4a",
      title: "Tech professionals",
      body: "Engineers, founders, and leaders across the Bay Area — from large tech companies to startups to AI unicorns.",
      specialty: "Specialty: stock-based compensation — restricted stock units (RSUs), employee stock purchase plans (ESPPs), options, and qualified small-business stock (QSBS).",
    },
    {
      n: "4b",
      title: "Venture capital, private equity & investment professionals",
      body: "GPs, LPs, and the partnerships around them.",
      specialty: "Carry waterfalls, K-1 reporting, fund structures, and the entities that hold investment positions.",
    },
    {
      n: "4c",
      title: "Families across generations",
      body: "Often the clients we've served the longest.",
      specialty: "Family limited partnerships, family investment partnerships (a growing area), trusts, estates, and the people inside them.",
    },
    {
      n: "4d",
      title: "People from all walks of life",
      body: "Not every client fits a tidy category, and that's the point.",
      specialty: "Musicians, artists, athletes, writers, academics, retirees, and steady professionals with complex situations.",
    },
  ];

  const boundaries = [
    {
      title: "International / cross-border tax",
      body: "We do prepare US tax forms that relate to foreign investments or accounts held by our US-taxpayer clients. We don't prepare foreign-country returns, and we don't offer international tax consultation.",
    },
    {
      title: "US tax outside income tax",
      body: "We don't prepare sales tax, payroll tax, or other non-income-tax filings.",
    },
    {
      title: "Industry-specialist work",
      body: "Sectors like agriculture or manufacturing need specialist expertise we don't carry. We refer those out.",
    },
    {
      title: "Standalone business returns",
      body: "We prepare business returns (S-corp, C-corp, partnerships) for entities owned by our individual clients. We don't take on standalone business filings unrelated to that relationship.",
    },
  ];

  return (
    <section className="part" id="who-we-serve" data-screen-label="04 Who We Serve">
      <PartHeader
        part="III"
        title="Who We Serve"
        meta="Lines 4a–4d · and what we deliberately don't do"
        instructions="The practice is focused on purpose. Here's who fits, and what we refer elsewhere."
      />

      {/* Four pillars */}
      <div style={{
        marginTop: 28,
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 0,
        border: "1px solid var(--rule-thin)",
        borderTop: "2px solid var(--ink)",
      }}>
        {pillars.map((p, i) => (
          <div key={p.n} style={{
            padding: "22px 24px",
            borderRight: i % 2 === 0 ? "1px solid var(--rule-thin)" : "none",
            borderBottom: i < 2 ? "1px solid var(--rule-thin)" : "none",
          }}>
            <div style={{
              display: "grid",
              gridTemplateColumns: "auto 1fr",
              columnGap: 12,
              marginBottom: 10,
              alignItems: "baseline",
            }}>
              <span style={{
                fontFamily: "var(--mono)",
                fontSize: "var(--t-cap)",
                fontWeight: 700,
                letterSpacing: "0.14em",
                color: "var(--stamp-red)",
                paddingTop: 4,
              }}>{p.n}</span>
              <span style={{
                fontFamily: "var(--serif)",
                fontSize: "var(--t-lead)",
                fontWeight: 600,
                lineHeight: 1.2,
                letterSpacing: "-0.005em",
                display: "block",
              }}>{p.title}</span>
            </div>
            <p style={{
              fontFamily: "var(--serif)",
              fontSize: "var(--t-body)",
              lineHeight: 1.55,
              color: "var(--ink-soft)",
              marginBottom: 10,
              textWrap: "pretty",
            }}>{p.body}</p>
            <p style={{
              fontFamily: "var(--serif)",
              fontSize: "var(--t-body)",
              color: "var(--ink-muted)",
              lineHeight: 1.55,
              paddingTop: 10,
              borderTop: "1px dashed var(--rule-thin)",
              textWrap: "pretty",
            }}>{p.specialty}</p>
          </div>
        ))}
      </div>

      {/* "What we don't do" — the honesty block */}
      <div style={{ marginTop: 36 }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "auto 1fr auto",
          alignItems: "center",
          gap: 18,
          borderTop: "3px solid var(--ink)",
          borderBottom: "1px solid var(--ink)",
          padding: "8px 0 6px",
          marginBottom: 20,
        }}>
          <span style={{
            background: "var(--ink)",
            color: "var(--paper)",
            fontFamily: "var(--mono)",
            fontSize: "var(--t-cap)",
            fontWeight: 700,
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            padding: "5px 10px",
            margin: "-8px 0 -6px",
          }}>Line 4z</span>
          <span style={{
            fontFamily: "var(--serif)",
            fontSize: "var(--t-lead)",
            fontWeight: 600,
          }}>What we don't do</span>
          <span style={{
            fontFamily: "var(--mono)",
            fontSize: "var(--t-cap)",
            color: "var(--ink-muted)",
            letterSpacing: "0.1em",
            textTransform: "uppercase",
          }}>Honest boundaries</span>
        </div>

        <p style={{
          fontFamily: "var(--serif)",
          fontSize: "var(--t-lead)",
          lineHeight: 1.55,
          color: "var(--ink-soft)",
          marginBottom: 20,
          textWrap: "pretty",
        }}>
          We focus where we're deep. If your situation needs expertise we don't have, we'll say so — and we'll often refer you well.
        </p>

        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 0,
          border: "1px solid var(--rule-thin)",
        }}>
          {boundaries.map((b, i) => (
            <div key={b.title} style={{
              padding: "18px 20px",
              borderRight: i % 2 === 0 ? "1px solid var(--rule-thin)" : "none",
              borderBottom: i < 2 ? "1px solid var(--rule-thin)" : "none",
            }}>
              <div style={{
                fontFamily: "var(--mono)",
                fontSize: "var(--t-cap)",
                fontWeight: 700,
                letterSpacing: "0.08em",
                textTransform: "uppercase",
                color: "var(--ink)",
                marginBottom: 6,
                display: "flex",
                alignItems: "center",
                gap: 8,
              }}>
                <span style={{
                  display: "inline-block",
                  width: 12,
                  height: 12,
                  border: "1.5px solid var(--ink)",
                  position: "relative",
                }}>
                  <span style={{
                    position: "absolute", inset: 1,
                    background: `repeating-linear-gradient(45deg, var(--ink), var(--ink) 1.5px, transparent 1.5px, transparent 3px)`,
                  }} />
                </span>
                {b.title}
              </div>
              <p style={{
                fontFamily: "var(--serif)",
                fontSize: "var(--t-body)",
                lineHeight: 1.55,
                color: "var(--ink-soft)",
                textWrap: "pretty",
              }}>{b.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhoWeServe });
