/* ==========================================================================
   Section 06 — How we work (the engagement flow)
   ========================================================================== */

function HowWeWork() {
  const steps = [
    { n: "6.1", title: "Initial consultation",   body: "We meet and review your tax situation together. No charge to talk." },
    { n: "6.2", title: "Service proposal",       body: "We agree on scope and a general cost estimate — based on expected work and our hourly rates. An estimate, not a promise." },
    { n: "6.3", title: "Tax organizer",          body: "We send a tax organizer. You fill it out and share your documents at your pace." },
    { n: "6.4", title: "Documents",              body: "Paperless by default — secure portal and encrypted file upload. Paper mail is welcome if that's your preference." },
    { n: "6.5", title: "Preparation",            body: "We prepare the return in-house and stay in touch by phone, email, or office visit." },
    { n: "6.6", title: "Review & authorization", body: "We deliver the return for your review and sign-off — electronic e-signature, or paper." },
    { n: "6.7", title: "E-file",                 body: "We file, and send you the confirmations for your records." },
  ];

  const yearRound = [
    "Extensions",
    "Tax planning consultation",
    "Quarterly tax estimates",
    "Accounting consultation and review",
    "Coordination with your financial advisor, attorney, bookkeeper, or assistant",
  ];

  return (
    <section className="part" id="how-we-work" data-screen-label="06 How We Work">
      <PartHeader
        part="V"
        title="How We Work"
        meta="Lines 6.1–6.7 · The engagement flow"
        instructions="Convenient for you, efficient for us — and always a real person you can talk to."
      />

      {/* Steps */}
      <div style={{
        marginTop: 28,
        border: "1px solid var(--rule-thin)",
        borderTop: "2px solid var(--ink)",
      }}>
        {steps.map((s, i) => (
          <div key={s.n} style={{
            display: "grid",
            gridTemplateColumns: "60px 200px 1fr",
            alignItems: "start",
            gap: 20,
            padding: "16px 18px",
            borderBottom: i < steps.length - 1 ? "1px dashed var(--rule-thin)" : "none",
          }}>
            <div style={{
              fontFamily: "var(--mono)",
              fontSize: "var(--t-cap)",
              fontWeight: 700,
              letterSpacing: "0.08em",
              color: "var(--ink-muted)",
            }}>{s.n}</div>
            <div style={{
              fontFamily: "var(--serif)",
              fontSize: "var(--t-lead)",
              fontWeight: 600,
              letterSpacing: "-0.005em",
              lineHeight: 1.25,
            }}>{s.title}</div>
            <div style={{
              fontFamily: "var(--serif)",
              fontSize: "var(--t-body)",
              color: "var(--ink-soft)",
              lineHeight: 1.55,
              textWrap: "pretty",
            }}>{s.body}</div>
          </div>
        ))}
      </div>

      {/* Year-round + in-house pledge */}
      <div style={{
        marginTop: 32,
        display: "grid",
        gridTemplateColumns: "1.2fr 1fr",
        gap: 32,
        alignItems: "stretch",
      }}>
        <div style={{
          border: "1px solid var(--rule-thin)",
          borderTop: "2px solid var(--ink)",
          padding: "18px 20px",
        }}>
          <div className="label" style={{ marginBottom: 10 }}>Line 6.8 &middot; Year-round, as needed</div>
          <ul style={{
            listStyle: "none",
            padding: 0,
            margin: 0,
            display: "grid",
            gap: 6,
            fontFamily: "var(--serif)",
            fontSize: "var(--t-body)",
            lineHeight: 1.55,
          }}>
            {yearRound.map((y) => (
              <li key={y} style={{ display: "flex", gap: 10, alignItems: "baseline" }}>
                <span style={{
                  fontFamily: "var(--mono)",
                  fontSize: "var(--t-cap)",
                  color: "var(--ink-muted)",
                }}>▸</span>
                <span>{y}</span>
              </li>
            ))}
          </ul>
        </div>

        <div style={{
          border: "1px solid var(--rule-thin)",
          borderTop: "2px solid var(--stamp-red)",
          padding: "18px 20px",
        }}>
          <div className="label" style={{ marginBottom: 10, color: "var(--stamp-red)" }}>Line 6.9 &middot; One thing that never changes</div>
          <p style={{
            fontFamily: "var(--serif)",
            fontSize: "var(--t-body)",
            lineHeight: 1.55,
            margin: 0,
            color: "var(--ink)",
            textWrap: "pretty",
          }}>
            The person preparing your return is an in-house professional you can talk to. Not a bot. Not outsourced. Not offshore.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowWeWork });