/* Reusable section blocks for the Taproot Works site.
   Copy pass 2026-07-03: doors are now Studio / Builds / Ops, plus new
   OwnershipBlock and ProofStrip sections. No new visual system moves;
   everything reuses existing classes. */

function SectionHead({ index, eyebrow, title }) {
  return (
    <div className="section-head">
      <div className="eyebrow">
        {index ? <span className="index">{index}</span> : null}
        <span>{eyebrow}</span>
      </div>
      <h2>{title}</h2>
    </div>
  );
}

function ThreeDoors({ withDetail = false }) {
  const doors = [
    {
      num: "01",
      title: "Taproot Studio",
      body: "Your brand, your website, and a marketing engine you can run yourself. For a small business opening, rebranding, or relaunching with a real brand, not a template a competitor also uses.",
      cta: "Inside Studio",
      href: "#/studio",
    },
    {
      num: "02",
      title: "Taproot Builds",
      body: "One hard workflow, designed around how your team actually works. For work that depends on accuracy, judgment, or regulation, where the current way of doing it does not scale.",
      cta: "How a Build runs",
      href: "#/builds",
    },
    {
      num: "03",
      title: "Taproot Ops",
      body: "The whole operating system. Storefront, internal operations, client delivery, and the automation that keeps it all current. The flagship.",
      cta: "Inside Ops",
      href: "#/ops",
    },
  ];
  return (
    <section className="tw-section" id="what">
      <div className="inner">
        <SectionHead
          index="§ 01"
          eyebrow="What we build"
          title={<>Three doors, <em>one practice.</em></>}
        />
        <p style={{
          color: "var(--tw-bark)", fontSize: "1.1rem", lineHeight: 1.7,
          maxWidth: "60ch", margin: "0 0 56px",
        }}>
          Every engagement starts with a free scoping call and ends with you owning what we built. We do not sell a product. We name the door that fits, propose a fixed fee, and point you somewhere better suited if we are not the right answer.
        </p>
        <div className="offerings">
          {doors.map((d) => (
            <div className="offering" key={d.num}>
              <div className="num">{d.num}</div>
              <h3>{d.title}</h3>
              <p>{d.body}</p>
              <a
                href={d.href}
                className="more"
                onClick={(e) => { e.preventDefault(); window.location.hash = d.href; }}
              >
                {d.cta} →
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function OwnershipBlock() {
  return (
    <section className="tw-section" id="own">
      <div className="inner">
        <SectionHead
          index="§ 02"
          eyebrow="What you own"
          title={<>Everything. <em>That is the point.</em></>}
        />
        <div className="section-body">
          <div></div>
          <div className="prose" style={{ margin: 0, padding: 0 }}>
            <p style={{ fontSize: "1.1rem", maxWidth: "60ch" }}>
              The brand, the website, the code, the domain, the accounts, the logins, the records. Everything we build is yours, documented well enough that you, or another operator, could pick it up. Nothing is a black box only we can open.
            </p>
            <p style={{ fontSize: "1.1rem", maxWidth: "60ch" }}>
              The handover is real and it is never gated behind a plan. For a small business, that ownership is the difference between an asset you hold and a rental you keep paying for.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProofStrip() {
  const proofs = [
    {
      num: "01",
      title: "XO Nail Bar",
      body: "A nail studio with a name, a logo on a business card, and nothing else. A real brand, a working site, professional email, and online booking in a matter of weeks. The owner holds every key.",
      cta: "The Studio story",
      href: "#/studio",
    },
    {
      num: "02",
      title: "Amari Health",
      body: "A hospice agency with 475 backlogged patient files. Hours of combined staff and physician time per file reduced to minutes of physician review, with judgment kept central.",
      cta: "The Builds story",
      href: "#/builds",
    },
    {
      num: "03",
      title: "Little Garden Things",
      body: "Our own business. Storefront, staff intranet, client portal, and the automation that runs the operations, on the same stack we build for clients. We operate it every day.",
      cta: "The Ops story",
      href: "#/ops",
    },
  ];
  return (
    <section className="tw-section" id="proof">
      <div className="inner">
        <SectionHead
          index="§ 03"
          eyebrow="Proof we live on"
          title={<>Systems that are <em>running right now.</em></>}
        />
        <div className="offerings">
          {proofs.map((p) => (
            <div className="offering" key={p.num}>
              <div className="num">{p.num}</div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
              <a
                href={p.href}
                className="more"
                onClick={(e) => { e.preventDefault(); window.location.hash = p.href; }}
              >
                {p.cta} →
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ValuesGrid() {
  const values = [
    ["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."],
  ];
  return (
    <section className="tw-section" id="how">
      <div className="inner">
        <SectionHead
          index="§ 04"
          eyebrow="How we work"
          title={<>Five things, <em>always.</em></>}
        />
        <div className="values-grid">
          {values.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>
  );
}

function Closer({ withLines = true }) {
  return (
    <section className={"closer" + (withLines ? " with-lines" : "")} id="contact-cta">
      <div className="inner">
        <div className="eyebrow">The next step</div>
        <h2>The next step is <em>a conversation.</em></h2>
        <p>
          Forty-five minutes. Free. 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 className="closer-actions">
          <a
            href="#/contact"
            className="cta"
            onClick={(e) => { e.preventDefault(); window.location.hash = "#/contact"; }}
          >
            Book a scoping call
          </a>
          <a href="mailto:hello@taprootworks.ai" className="contact">hello@taprootworks.ai</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionHead, ThreeDoors, OwnershipBlock, ProofStrip, ValuesGrid, Closer });