/* ==========================================================================
   Section 01 — Firm header (masthead, option-3 style)
   ========================================================================== */

function FirmHeader() {
  return (
    <section className="form-header" data-screen-label="01 Firm Header">
      <div style={{
        border: "2px solid var(--ink)",
        display: "grid",
        gridTemplateColumns: "1.4fr 0.9fr 0.9fr 0.9fr",
      }}>
        {/* Firm identity */}
        <div style={{ padding: "22px 24px", borderRight: "1px solid var(--ink)" }}>
          <div style={{
            fontFamily: "var(--mono)",
            fontSize: "var(--t-cap)",
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            color: "var(--ink-muted)",
          }}>Firm name</div>
          <div style={{
            fontFamily: "var(--serif)",
            fontSize: "28px",
            fontWeight: 700,
            lineHeight: 1.05,
            marginTop: 4,
            letterSpacing: "-0.02em",
          }}>Barlow &amp; Hughan</div>
          <div style={{
            fontFamily: "var(--mono)",
            fontSize: "var(--t-cap)",
            letterSpacing: "0.12em",
            textTransform: "uppercase",
            color: "var(--ink-soft)",
            marginTop: 6,
          }}>LLP &middot; Certified Public Accountants</div>
        </div>

        {/* Established */}
        <div style={{ padding: "22px 20px", borderRight: "1px solid var(--ink)" }}>
          <div style={{
            fontFamily: "var(--mono)",
            fontSize: "var(--t-cap)",
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            color: "var(--ink-muted)",
          }}>Established</div>
          <div style={{
            fontFamily: "var(--mono)",
            fontSize: "32px",
            fontWeight: 800,
            lineHeight: 1,
            color: "var(--stamp-red)",
            marginTop: 4,
          }}>1946</div>
          <div style={{
            fontFamily: "var(--mono)",
            fontSize: "var(--t-cap)",
            letterSpacing: "0.08em",
            color: "var(--ink-soft)",
            marginTop: 6,
          }}>{new Date().getFullYear() - 1946} years continuous</div>
        </div>

        {/* Office */}
        <div style={{ padding: "22px 20px", borderRight: "1px solid var(--ink)" }}>
          <div style={{
            fontFamily: "var(--mono)",
            fontSize: "var(--t-cap)",
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            color: "var(--ink-muted)",
          }}>Office</div>
          <div style={{
            fontFamily: "var(--mono)",
            fontSize: "32px",
            fontWeight: 800,
            lineHeight: 1,
            marginTop: 4,
            letterSpacing: "-0.03em",
            whiteSpace: "nowrap",
          }}>San Francisco</div>
          <div style={{
            fontFamily: "var(--mono)",
            fontSize: "var(--t-cap)",
            letterSpacing: "0.08em",
            color: "var(--ink-soft)",
            marginTop: 6,
            textTransform: "uppercase",
          }}>California</div>
        </div>

        {/* FY */}
        <div style={{ padding: "22px 20px" }}>
          <div style={{
            fontFamily: "var(--mono)",
            fontSize: "var(--t-cap)",
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            color: "var(--ink-muted)",
          }}>For the year</div>
          <div style={{
            fontFamily: "var(--mono)",
            fontSize: "32px",
            fontWeight: 800,
            lineHeight: 1,
            marginTop: 4,
          }}>{new Date().getFullYear()}</div>
          <div style={{
            fontFamily: "var(--mono)",
            fontSize: "var(--t-cap)",
            letterSpacing: "0.08em",
            color: "var(--ink-soft)",
            marginTop: 6,
          }}>Firm overview &middot; public</div>
        </div>
      </div>

      {/* Opening line — statement of purpose · two-column */}
      <div style={{
        marginTop: 40,
        paddingBottom: 40,
        borderBottom: "1px solid var(--rule-thin)",
        display: "grid",
        gridTemplateColumns: "1.4fr 1fr",
        gap: 56,
        alignItems: "start",
      }}>
        <div>
          <div className="label" style={{ marginBottom: 14 }}>Line 0 &middot; Statement of purpose</div>
          <h1 style={{
            fontFamily: "var(--serif)",
            fontSize: "var(--t-hero)",
            lineHeight: 1.05,
            fontWeight: 600,
            letterSpacing: "-0.015em",
            textWrap: "balance",
          }}>
            Four generations of partners, <em style={{ fontStyle: "normal", color: "var(--stamp-red)" }}>serving generations of the same families.</em>
          </h1>
          <p style={{
            marginTop: 24,
            fontFamily: "var(--serif)",
            fontSize: "var(--t-lead)",
            color: "var(--ink-soft)",
            maxWidth: "58ch",
            lineHeight: 1.55,
            textWrap: "pretty",
          }}>
            An independent San Francisco CPA firm. Right-sized on purpose. Every return prepared, reviewed, and signed inside our office &mdash; by the same people you'll talk to.
          </p>
        </div>

        {/* Right column — the value statement, broken into three short reads */}
        <div style={{ paddingTop: 32 }}>
          <div style={{
            borderTop: "2px solid var(--ink)",
            borderBottom: "1px solid var(--rule-thin)",
          }}>
            {[
              {
                k: "Focused",
                v: "We work where we're deep — individuals, families, and the entities around them. We decline work we can't do well.",
              },
              {
                k: "Personal",
                v: "A partner reads every return. No bots, no outsourcing, no offshore — just the people whose names are on the door.",
              },
              {
                k: "Long-horizon",
                v: "Many of our clients are second- or third-generation. We grow with clients, not past them.",
              },
            ].map((r, i, arr) => (
              <div key={r.k} style={{
                display: "grid",
                gridTemplateColumns: "110px 1fr",
                gap: 18,
                padding: "14px 0",
                borderBottom: i < arr.length - 1 ? "1px dashed var(--rule-thin)" : "none",
                alignItems: "baseline",
              }}>
                <div style={{
                  fontFamily: "var(--mono)",
                  fontSize: "var(--t-cap)",
                  fontWeight: 700,
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  color: "var(--ink-muted)",
                }}>{r.k}</div>
                <div style={{
                  fontFamily: "var(--serif)",
                  fontSize: "var(--t-body)",
                  lineHeight: 1.55,
                  color: "var(--ink-soft)",
                  textWrap: "pretty",
                }}>{r.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FirmHeader });
