/* Pages for the Taproot Works marketing site.
   Each page returns a React fragment. Routing happens in App.
   Copy pass 2026-07-03: ownership-led messaging, Studio/Builds/Ops lineup,
   dedicated offering pages. See content-plan-2026-07-03.md. */

/* ---------- HOME ---------- */
function HomePage({ heroVariant, showImagery, withLines }) {
  return (
    <main data-screen-label="01 Home">
      <Hero variant={heroVariant} showImagery={showImagery} />
      <ThreeDoors />
      <OwnershipBlock />
      <ProofStrip />
      <ValuesGrid />
      <Closer withLines={withLines} />
    </main>
  );
}

/* ---------- WHAT WE DO ---------- */
function WhatWeDoPage() {
  const doors = [
    {
      stamp: "01",
      title: "Taproot Studio",
      href: "#/studio",
      lede: "Your brand, your website, and a marketing engine you can run yourself.",
      body: [
        "For a small business opening, rebranding, or relaunching. We build the brand foundation, the site, and the marketing setup, then hand over every account and login. You own all of it.",
        "The right door when the front of house is what needs standing up.",
      ],
      cta: "Inside Taproot Studio",
    },
    {
      stamp: "02",
      title: "Taproot Builds",
      href: "#/builds",
      lede: "One hard workflow, designed around how your team actually works.",
      body: [
        "For work that depends on accuracy, judgment, or regulation, where the current way of doing it does not scale. We design, build, install, and document on a fixed fee. You own the code, the prompts, the documentation, all of it.",
        "The right door when one workflow is the bottleneck.",
      ],
      cta: "Inside Taproot Builds",
    },
    {
      stamp: "03",
      title: "Taproot Ops",
      href: "#/ops",
      lede: "The whole operating system, built once and kept running.",
      body: [
        "Brand and storefront, internal operations, client delivery, and the automation that keeps it all current. One system, every layer, with support at the level you choose. Run it yourself, or run it with us.",
        "The right door when the whole business needs standing up. The flagship.",
      ],
      cta: "Inside Taproot Ops",
    },
  ];

  return (
    <main data-screen-label="02 What we do">
      <div className="page-lede">
        <div className="eyebrow">What we do</div>
        <h1>Three doors, <em>one practice.</em></h1>
        <p className="lede">
          Every engagement starts the same way: a free forty-five minute scoping call, then a written summary within forty-eight hours with a ballpark range. And every engagement ends the same way: you own what we built. What varies is depth.
        </p>
      </div>

      {doors.map((o) => (
        <section className="offering-detail" key={o.stamp} id={o.stamp}>
          <div className="inner">
            <div>
              <div className="stamp">{o.stamp}</div>
              <div style={{
                fontSize: "0.78rem", textTransform: "uppercase", letterSpacing: "0.18em",
                color: "var(--tw-terracotta)", fontWeight: 700, marginTop: 8,
              }}>
                Offering
              </div>
            </div>
            <div>
              <h2>{o.title}</h2>
              <p style={{
                fontFamily: "var(--tw-font-display)", color: "var(--tw-forest)",
                fontStyle: "italic", fontSize: "1.3rem", lineHeight: 1.45,
                margin: "0 0 24px", maxWidth: "44ch",
              }}>
                {o.lede}
              </p>
              {o.body.map((p, j) => <p key={j}>{p}</p>)}
              <a
                href={o.href}
                className="more"
                onClick={(e)=>{e.preventDefault(); window.location.hash=o.href;}}
                style={{
                  display: "inline-block", marginTop: 32,
                  color: "var(--tw-amber)", fontWeight: 700, fontSize: ".95rem",
                  textDecoration: "none", borderBottom: "1px solid var(--tw-amber)",
                  paddingBottom: 2,
                }}
              >
                {o.cta} →
              </a>
            </div>
          </div>
        </section>
      ))}

      <section className="tw-section" id="fit">
        <div className="inner">
          <SectionHead
            eyebrow="Which door"
            title={<>Not sure? <em>That is our job, not yours.</em></>}
          />
          <div className="section-body">
            <div></div>
            <div className="prose" style={{ margin: 0, padding: 0 }}>
              <p style={{ maxWidth: "60ch" }}>
                The scoping call exists to name the right door. If a smaller answer works, we propose it. If the right shape is a sustained advisory relationship rather than a build, we will name that too. And if we are not the right answer at all, we will say so and point you somewhere better suited.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="tw-section" id="learn">
        <div className="inner">
          <SectionHead
            eyebrow="Learn the practice"
            title={<>Workshops and the <em>Practitioner Series.</em></>}
          />
          <div className="section-body">
            <div></div>
            <div>
              <div className="prose" style={{ margin: "0 0 40px", padding: 0 }}>
                <p style={{ maxWidth: "60ch" }}>
                  For professionals bringing AI into their own work without losing the judgment that made them good at it. Workshops teach the practice, not the tooling: what to ask, when to push back on a model, how to keep your judgment central while the work goes faster.
                </p>
                <p style={{ maxWidth: "60ch" }}>
                  The Practitioner Series is the flagship: a seven-course cohort program, live sessions plus async work between weeks. Two cohorts a year, eighteen practitioners each, to keep the room small. Single-session workshops and self-paced video are next on the roadmap.
                </p>
              </div>
              <a
                href="#/contact"
                className="more"
                onClick={(e)=>{e.preventDefault(); window.location.hash="#/contact";}}
                style={{
                  display: "inline-block",
                  color: "var(--tw-amber)", fontWeight: 700, fontSize: ".95rem",
                  textDecoration: "none", borderBottom: "1px solid var(--tw-amber)",
                  paddingBottom: 2,
                }}
              >
                Ask about the next cohort →
              </a>
            </div>
          </div>
        </div>
      </section>

      <Closer />
    </main>
  );
}

/* ---------- OFFERING PAGES (shared shape) ---------- */

function FitLists({ right, wrong }) {
  return (
    <div className="features">
      <div className="feature">
        <div className="label">The right fit</div>
        {right.map((p, i) => <p key={i}>{p}</p>)}
      </div>
      <div className="feature">
        <div className="label">Not the right fit</div>
        {wrong.map((p, i) => <p key={i}>{p}</p>)}
      </div>
    </div>
  );
}

function OfferingPage({ data, screenLabel }) {
  const d = data;
  return (
    <main data-screen-label={screenLabel}>
      <div className="page-lede">
        <div className="eyebrow">{d.label}</div>
        <h1>{d.h1}</h1>
        <p className="lede">{d.lede}</p>
      </div>

      <section className="tw-section">
        <div className="inner">
          <SectionHead index="§ 01" eyebrow="How it runs" title={d.phasesTitle} />
          <div className="features">
            {d.phases.map(([label, p]) => (
              <div className="feature" key={label}>
                <div className="label">{label}</div>
                <p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="tw-section">
        <div className="inner">
          <SectionHead index="§ 02" eyebrow="What you can buy" title={d.buyTitle} />
          <p style={{
            color: "var(--tw-bark)", fontSize: "1.05rem", lineHeight: 1.7,
            maxWidth: "60ch", margin: "0 0 48px",
          }}>{d.buyIntro}</p>
          <div className="values-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
            {d.tiers.map(([n, name, gloss]) => (
              <div className="value-cell" key={n}>
                <div className="index">{n}</div>
                <div className="name">{name}</div>
                <div className="gloss">{gloss}</div>
              </div>
            ))}
          </div>
          <p style={{
            color: "var(--tw-bark)", fontSize: "0.95rem", lineHeight: 1.65,
            maxWidth: "60ch", margin: "40px 0 0", fontStyle: "italic",
          }}>
            No price list here, on purpose. Fees are scoped to the business, so the honest number comes from the scoping call and the written range that follows.
          </p>
        </div>
      </section>

      <section className="tw-section">
        <div className="inner">
          <SectionHead index="§ 03" eyebrow="What you own" title={<>Everything. <em>Every key.</em></>} />
          <div className="section-body">
            <div></div>
            <div className="prose" style={{ margin: 0, padding: 0 }}>
              {d.own.map((p, i) => <p key={i} style={{ maxWidth: "60ch" }}>{p}</p>)}
            </div>
          </div>
        </div>
      </section>

      <section className="tw-section">
        <div className="inner">
          <SectionHead index="§ 04" eyebrow="Fit" title={<>Honest, <em>both ways.</em></>} />
          <FitLists right={d.fitRight} wrong={d.fitWrong} />
        </div>
      </section>

      <section className="tw-section">
        <div className="inner">
          <SectionHead index="§ 05" eyebrow={d.refEyebrow} title={d.refTitle} />
          <div className="section-body">
            <div></div>
            <div className="prose" style={{ margin: 0, padding: 0 }}>
              {d.reference.map((p, i) => <p key={i} style={{ maxWidth: "62ch" }}>{p}</p>)}
            </div>
          </div>
          {d.quote ? (
            <div className="pull-quote" style={{ marginTop: 48 }}>
              <div className="stamp">In their words</div>
              <blockquote>
                <p>{d.quote}</p>
                <div className="attr">{d.quoteBy}</div>
              </blockquote>
            </div>
          ) : null}
        </div>
      </section>

      <Closer />
    </main>
  );
}

const studioData = {
  label: "Taproot Studio",
  h1: <>A brand, a website, and a marketing engine <em>you can run yourself.</em></>,
  lede: "We build a small business its brand, its website, and a marketing engine it can run on its own, on a fixed-fee schedule. You own everything we make: the brand, the site, the domain, the accounts, all of it. No subscription to us, no platform lock-in.",
  phasesTitle: <>From scoping call <em>to handover.</em></>,
  phases: [
    ["Scoping call", "Free, forty-five minutes. A conversation about the business, the customer, and what opening or relaunching well actually takes. Written summary within forty-eight hours, with a ballpark range."],
    ["Brand foundation", "We learn the business, then lock the foundation with you: voice, color, type, and a logo system, captured so the brand stays consistent everywhere it shows up. You sign off before anything gets built on top of it."],
    ["Site build", "Page by page on a fast modern stack, in your brand voice, with services, prices, hours, and booking wired in. You walk through it and we run a fix pass before launch."],
    ["Marketing engine", "Google Business Profile, social setup, a Canva template kit, a launch campaign, a capture path for email or text, and enablement so you can keep it running without us."],
    ["Launch and handover", "Domain cutover, go live, and a handover packet. Every account recorded with a transfer path, so you can take full ownership without archaeology."],
    ["Care plan, optional", "Monthly support and a quarterly review for owners who would rather we keep a hand on the engine. Opt in, cancel anytime. The handover is never gated behind it."],
  ],
  buyTitle: <>Three tiers, <em>one care plan.</em></>,
  buyIntro: "Fixed fee by tier. The scoping summary recommends one, with the reasoning written down.",
  tiers: [
    ["01", "Refresh.", "A site build on an existing or lightly polished brand, with the operating basics stood up."],
    ["02", "Studio.", "A full brand foundation plus the website. The core offering."],
    ["03", "Studio plus Engine.", "Brand, website, and the full marketing engine. The flagship."],
  ],
  own: [
    "The brand, the website code, the domain, the email, the booking account, every login. For a small business, that ownership is the difference between an asset you hold and a rental you keep paying for.",
    "The handover is real, and it is always on the table. We take one build at a time. That is the honest cost of doing it right.",
  ],
  fitRight: [
    "A small business opening, rebranding, or relaunching that wants a real brand and site, not a template a competitor also uses.",
    "An owner who wants to own and run what gets built, with help available but not required.",
    "A single decision-maker, or a small pair, who can sit for a discovery conversation and sign off as the brand takes shape.",
  ],
  fitWrong: [
    "Wants a free or near-free site and treats brand work as the first expense to cut.",
    "Wants someone to run everything forever, with no interest in ever owning it.",
    "Needs a large multi-location or full storefront commerce build. That is a different scope, and we will say so.",
  ],
  refEyebrow: "The proof",
  refTitle: <>XO Nail Bar: a business card <em>to booked appointments.</em></>,
  reference: [
    "XO Nail Bar, an appointment-led nail studio opening in Folsom, California, came to us with a name it loved, a gold logo on a business card, and nothing else. No domain, no email, no booking, no brand system, no site.",
    "Studio built the brand foundation, a five-page website with the menu, prices, hours, and online booking live, professional email for both technicians, and a registered domain. A business with no online presence had a real brand, a working site, and online booking in a matter of weeks. And owns all of it: every account sits under a recorded transfer path.",
  ],
};

const buildsData = {
  label: "Taproot Builds",
  h1: <>One hard workflow, designed around the work, <em>owned by you.</em></>,
  lede: "For work that depends on accuracy, judgment, or regulation, where the current way of doing it does not scale. We design the workflow around how your team actually works, build it on a fixed fee, and hand it over documented. You own everything we ship.",
  phasesTitle: <>From scoping call <em>to working software.</em></>,
  phases: [
    ["Scoping call", "Free, forty-five minutes. What the team does, what is not working, and whether an AI workflow is the right answer at all. Written summary within forty-eight hours, with a ballpark range. No pressure, no follow-up cycle."],
    ["Discovery, when warranted", "For complex work, a paid discovery engagement: process mapping, technical feasibility, regulatory research, stakeholder interviews. Output is a written specification and a fixed-fee proposal. The discovery fee credits toward the build."],
    ["Fixed-fee build", "We design, build, install, and document on a defined schedule for a fixed price. You see the work at agreed milestones and sign off before launch."],
    ["Support, optional", "A monthly retainer for adjustments and quarterly reviews. Most clients do not take it in the first year. Cancel anytime."],
  ],
  buyTitle: <>Fixed scope, <em>fixed fee.</em></>,
  buyIntro: "One engagement shape, sized to the workflow. The scoping summary carries the range.",
  tiers: [
    ["01", "Scoping call.", "Free. A written summary and a ballpark range within forty-eight hours."],
    ["02", "Discovery.", "Paid, when the work warrants it. The fee credits toward the build."],
    ["03", "The build.", "Fixed fee, defined schedule, milestone sign-offs, documented handover."],
  ],
  own: [
    "The configuration, the prompts, the code, the documentation. We leave you with capability, not a subscription.",
    "For organizations handling sensitive data, ownership is also a security posture. Your workflow, your data, your keys.",
  ],
  fitRight: [
    "Work that depends on accuracy, judgment, or regulatory compliance, where the current way of doing it does not scale.",
    "A team that wants to own what they use every day.",
    "A sponsor who can pull together an operations lead, a domain authority, and a sign-off authority for a fixed-fee engagement.",
  ],
  fitWrong: [
    "Looking for a subscription product rather than a custom build.",
    "No internal sponsor able to commit time during discovery.",
    "Wants a generic tool rather than work shaped to a specific workflow.",
  ],
  refEyebrow: "The proof",
  refTitle: <>Amari Health: hours per file <em>to minutes of review.</em></>,
  reference: [
    "Amari Health, a hospice agency in California, partnered with us to design AI workflows that ease the work of producing CMS-compliant Certification of Terminal Illness narratives. The build processed 475 backlogged patient files at 90 to 120 seconds each.",
    "Hours of combined staff and physician time per file reduced to minutes of physician review. The judgment stayed with the physician. The hours came back to the team.",
  ],
  quote: "What I appreciated about working with Taproot Works is that they took the time to really understand the regulatory side before they built anything. Their discovery process surfaced things our team hadn't even articulated yet.",
  quoteBy: "Lori, RN, MSN, CHPN · Amari Health",
};

const opsData = {
  label: "Taproot Ops",
  h1: <>The whole system, <em>built to be yours.</em></>,
  lede: "Run it yourself, or run it with us. You are never locked in. Taproot Ops stands up the entire system a small business runs on: the brand and storefront, the internal operations, the way it serves its own clients, and the automation that keeps all of it current. Then we keep a hand on it for as long as that helps.",
  phasesTitle: <>One system, <em>every layer.</em></>,
  phases: [
    ["Scoping call", "Free, forty-five minutes. The business, what it sells, how it operates inside, who it serves, and what stack it lives on. Written summary within forty-eight hours, with a ballpark range."],
    ["The whole-business map", "A discovery pass that maps how the business actually runs, so the system fits it rather than a template. You sign off before anything gets built on top of it."],
    ["Front of house", "Brand foundation and the storefront or site, in your voice, on a fast modern stack. This is Taproot Studio work, folded in."],
    ["Internal operations", "The staff intranet and the master-record automation that runs the back office, wired so the day-to-day stays current without constant hand-work."],
    ["Delivery surface", "For businesses that serve their own clients: the client portal, with each client kept properly separate. Optional by business type."],
    ["Automation and handover", "Operating routines wired in, the refresh cadence established, and a handover packet with every account recorded. Then the operating period begins, at the support level you chose."],
  ],
  buyTitle: <>Two axes: what we build, <em>and how much we run.</em></>,
  buyIntro: "The build is a one-time fixed fee by tier, set by two plain facts: whether you serve downstream clients who need a private portal, and how many distinct operating flows the system has to hold. The support is a recurring setting you can change anytime.",
  tiers: [
    ["01", "Smaller, Standard, or Full.", "The build tier. From brand, site, intranet, and records automation up to the whole operating system across several revenue lines."],
    ["02", "You drive.", "We stand it up, transfer it, you operate it. Light as-needed support. The floor."],
    ["03", "We co-drive.", "Shared operation, you keep a hand in. A defined set of routines kept current on a stated cadence. Move between settings anytime, in either direction."],
  ],
  own: [
    "The brand, the site code, the domain, the email, the operating accounts, the records, every login. We will run as much of it with you as you want, and we will hand you every key whenever you ask.",
    "The system is documented well enough that you, or another operator, could pick it up. Nothing is a black box only we can open.",
  ],
  fitRight: [
    "A small business that needs more than a brand and a site: internal operations, client delivery, and the day-to-day running, all stood up together.",
    "An owner who wants to own and understand the whole system, with help available at the level they choose.",
    "A single decision-maker, or a small pair, who can sit for a real discovery conversation and sign off as each layer takes shape.",
  ],
  fitWrong: [
    "Wants only a brand and a site. That is Taproot Studio, and it is the better fit.",
    "Needs one specific regulated workflow and nothing else. That is Taproot Builds.",
    "Wants a vendor to own and operate everything with no interest in ever holding the keys. We will co-run a system, but the owner always owns it.",
  ],
  refEyebrow: "The proof",
  refTitle: <>Little Garden Things: <em>we run our own business on this.</em></>,
  reference: [
    "Little Garden Things is the reference implementation, and it is honest to say so plainly: it is our own business. We built Taproot Ops by building it for Little Garden Things, and we operate it every day. Brand, a working storefront, a staff intranet, a client portal, and the master-record automation that runs the operations, all on the same stack we would put a client on.",
    "That is not a client testimonial. It is stronger than one. Ask on the scoping call and we will walk you through the running system: the public storefront, how the layers wire together, and the automation working live.",
  ],
};

function StudioPage() { return <OfferingPage data={studioData} screenLabel="04 Studio" />; }
function BuildsPage() { return <OfferingPage data={buildsData} screenLabel="05 Builds" />; }
function OpsPage()    { return <OfferingPage data={opsData} screenLabel="06 Ops" />; }

/* ---------- WHO WE ARE ---------- */
/* Collective by design (2026-07-03): no individual names, photos, or
   role-to-person mapping on the public site. Identity lives at the
   relationship layer (scoping calls, proposals). Canon deviation from
   founder-forward logged for brand review. */
function WhoWeArePage({ showImagery }) {
  const carries = [
    ["01", "Delivery at scale.", "Thirty years inside government and enterprise IT. Statewide programs, portfolios in the hundreds of millions, teams of thirty plus."],
    ["02", "Regulated-industry judgment.", "Security leadership, formal change management, and delivery in environments where accuracy is not optional."],
    ["03", "Brand and product craft.", "Brand systems, product development, and the marketing engines small businesses actually run day to day."],
  ];

  return (
    <main data-screen-label="03 Who we are">
      <div className="page-lede">
        <div className="eyebrow">Who we are</div>
        <h1>Owners building <em>for owners.</em></h1>
        <p className="lede">
          Not a consulting firm. Not a vendor. A small practice run by working practitioners who own and operate small businesses themselves, and who build for you on the same stack we run on.
        </p>
      </div>

      <section className="tw-section">
        <div className="inner">
          <SectionHead
            eyebrow="What the practice carries"
            title={<>The experience is the practice's. <em>All of it earned.</em></>}
          />
          <div className="values-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
            {carries.map(([n, name, gloss]) => (
              <div className="value-cell" key={n}>
                <div className="index">{n}</div>
                <div className="name">{name}</div>
                <div className="gloss">{gloss}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="tw-section">
        <div className="inner">
          <div className="section-body">
            <div></div>
            <div className="prose" style={{ margin: 0, padding: 0 }}>
              <p style={{ maxWidth: "60ch" }}>
                We also run Little Garden Things, a working nursery, on the same operating system we build for clients. When we say the stack holds up to daily use, we mean our own daily use. The same practitioners stay with your engagement from the first scoping call to handover.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="tw-section">
        <div className="inner">
          <SectionHead
            eyebrow="How we work"
            title={<>Five things, <em>always.</em></>}
          />
          <div className="values-grid">
            {[
              ["01", "People over process.", "Technology is the tool. People are the point."],
              ["02", "Teach, don't create dependency.", "We build capability you keep."],
              ["03", "Ask before we tell.", "The best answers usually live in the room already."],
              ["04", "Leave something behind.", "Every engagement ships something you own."],
              ["05", "Peer, not vendor.", "We sit across from you as equals."],
            ].map(([n, name, gloss]) => (
              <div className="value-cell" key={n}>
                <div className="index">{n}</div>
                <div className="name">{name}</div>
                <div className="gloss">{gloss}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Closer />
    </main>
  );
}

/* ---------- CONTACT ---------- */
function ContactPage() {
  return (
    <main data-screen-label="07 Contact">
      <div className="page-lede">
        <div className="eyebrow">Start a conversation</div>
        <h1>Forty-five minutes, <em>free.</em></h1>
        <p className="lede">
          A conversation, not a sales pitch. You leave with a written summary within forty-eight hours, including a ballpark price range. If we are not the right answer, we will tell you that and point you somewhere better suited.
        </p>
      </div>

      <div className="prose">
        <h3>What to expect</h3>
        <ul>
          <li>We listen first. The first thirty minutes are yours.</li>
          <li>We ask sharp questions. Some of them will feel obvious. Most of them will not.</li>
          <li>We tell you, plainly, whether Studio, a Build, Ops, a workshop, or nothing at all is the right shape for what you are doing.</li>
          <li>You leave with a written summary within forty-eight hours, including a ballpark price range.</li>
        </ul>
      </div>

      <form className="contact-form" onSubmit={(e) => { e.preventDefault(); alert("Thanks. We will reply within one working day.\n\nOr book a time directly: https://calendar.app.google/ArAndFducKfkg9L37"); }}>
        <div className="field">
          <label htmlFor="name">Your name</label>
          <input id="name" name="name" type="text" required />
        </div>
        <div className="field">
          <label htmlFor="email">Email</label>
          <input id="email" name="email" type="email" required />
        </div>
        <div className="field">
          <label htmlFor="org">Organization</label>
          <input id="org" name="org" type="text" />
        </div>
        <div className="field">
          <label htmlFor="role">Your role</label>
          <input id="role" name="role" type="text" />
        </div>
        <div className="field wide">
          <label htmlFor="shape">What shape do you think this might be?</label>
          <select id="shape" name="shape" defaultValue="not-sure">
            <option value="studio">Taproot Studio (brand, website, marketing)</option>
            <option value="build">Taproot Builds (one hard workflow)</option>
            <option value="ops">Taproot Ops (the whole operating system)</option>
            <option value="workshop">A workshop or the Practitioner Series</option>
            <option value="not-sure">Not sure yet. That is fine.</option>
          </select>
        </div>
        <div className="field wide">
          <label htmlFor="msg">What are you trying to figure out?</label>
          <textarea id="msg" name="msg" placeholder="A paragraph is plenty. We will follow up to schedule." />
        </div>
        <div className="submit">
          <button type="submit">Send a message</button>
          <span className="note">Or <a href="https://calendar.app.google/ArAndFducKfkg9L37" target="_blank" rel="noreferrer">book a time directly</a>, or write to <a href="mailto:hello@taprootworks.ai">hello@taprootworks.ai</a>.</span>
        </div>
      </form>

      <section className="tw-section" style={{ paddingTop: 56 }}>
        <div className="inner">
          <SectionHead
            eyebrow="Field notes"
            title={<>How we run a <em>scoping call.</em></>}
          />
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
            borderTop: "1px solid var(--tw-linen)",
          }}>
            {[
              ["Before", "We send three short questions ahead of the call. Skim them. Do not over-prepare."],
              ["During", "We listen, then we ask. We will tell you when we think the answer is no."],
              ["After", "Written summary inside forty-eight hours. A ballpark price range for the door that fits."],
            ].map(([h, p], i) => (
              <div key={h} style={{
                padding: "32px 28px",
                borderRight: i < 2 ? "1px solid var(--tw-linen)" : "none",
                display: "flex", flexDirection: "column", gap: 12,
              }}>
                <div style={{
                  fontSize: "0.74rem", textTransform: "uppercase", letterSpacing: "0.18em",
                  color: "var(--tw-terracotta)", fontWeight: 700,
                }}>{h}</div>
                <p style={{ color: "var(--tw-bark)", fontSize: "1rem", lineHeight: 1.65, margin: 0 }}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, {
  HomePage, WhatWeDoPage, WhoWeArePage, ContactPage,
  OfferingPage, StudioPage, BuildsPage, OpsPage,
});
