/* Backentra — About page. The company and the people building it. Founder details are
   deliberately left as marked placeholders: nothing here should be invented.
   window.BackentraAbout */
const AB = window.BackentraDesignSystem_93cf3a;
const { Button: ABtn, Icon: AIcon } = AB;
const acontainer = { maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 32px" };
const aeyebrow = { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--text-muted)" };

function AboutPage({ onJoin, onNav }) {
  React.useEffect(() => {
    window.BackentraSetMeta && window.BackentraSetMeta({
      path: "/about",
      title: "About — Backentra",
      description: "Why Backentra exists, who is building it, and how to reach us.",
    });
  }, []);
  const B = window.BK_BRAND || {};
  const email = B.email || "office@backentra.com";
  const pillars = window.BackentraPillars || [];
  const beliefs = [
    ["Software should fit the work, not the other way around", "The trades did not ask to become data-entry clerks. If a tool makes someone retype what they already wrote down, that tool has failed."],
    ["One system beats five that almost talk", "Most operators are running a scheduler, a spreadsheet, an accounting package, a phone system and a whiteboard. The gaps between them are where jobs and money go missing."],
    ["Say what a thing actually does", "No feature is announced before it works. If something is half built, we say so, and this whole site is built that way."],
    ["Price it plainly", "Published prices, no per-seat surprises, and every plan boundary written down rather than discovered."],
  ];
  return (
    <div style={{ background: "var(--surface-page)", minHeight: "100vh" }}>
      <window.BackentraSiteHeader current="about" onNav={onNav} />

      <section style={{ background: "var(--gray-100)", padding: "60px 0 52px" }}>
        <div style={{ ...acontainer, maxWidth: 780 }}>
          <div style={{ ...aeyebrow, marginBottom: 14 }}>About Backentra</div>
          <h1 style={{ fontSize: 46, lineHeight: 1.05, margin: "0 0 18px" }}>Built for the people who build.</h1>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--text-body)", margin: 0 }}>
            Backentra is one platform for running a service business: leads, estimates, scheduling, crews, invoicing and the books, in a single connected system. It is being built for gutter, roofing, concrete, landscaping and every other trade where the work happens on a truck and the paperwork happens twice.
          </p>
        </div>
      </section>

      <section style={{ padding: "56px 0", background: "var(--surface-card)" }}>
        <div style={{ ...acontainer, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }}>
          <div>
            <div style={{ ...aeyebrow, marginBottom: 12 }}>Why we're building it</div>
            <h2 style={{ fontSize: 32, margin: "0 0 14px" }}>The back office is where good companies stall.</h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--text-body)", margin: "0 0 14px" }}>
              A crew can be excellent at the work and still lose money to a schedule that lives on a whiteboard, an invoice that never went out, and a client history nobody can find. None of that is a labour problem. It is a systems problem.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--text-body)", margin: 0 }}>
              Backentra exists to be the backbone underneath the work: the structure that keeps a job moving from the first call to the final payment, without anyone retyping it along the way.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {pillars.map(([ic, t, lead, d]) => (
              <div key={t} style={{ display: "flex", gap: 14, padding: "16px 18px", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", background: "var(--surface-card)" }}>
                <span style={{ width: 40, height: 40, borderRadius: "var(--radius-md)", background: "var(--orange-50)", color: "var(--accent-text)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" }}><AIcon name={ic} size={20} /></span>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, color: "var(--text-strong)", letterSpacing: ".04em", textTransform: "uppercase", marginBottom: 4 }}>{t}</div>
                  <div style={{ fontSize: 14, lineHeight: 1.55, color: "var(--text-muted)" }}><b style={{ color: "var(--text-body)", fontWeight: 600 }}>{lead}</b> {d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: "56px 0", background: "var(--navy-900)" }}>
        <div style={acontainer}>
          <div style={{ textAlign: "center", marginBottom: 38 }}>
            <div style={{ ...aeyebrow, color: "var(--accent-text)", marginBottom: 12 }}>How we work</div>
            <h2 style={{ color: "#fff", fontSize: 32, margin: 0 }}>What we hold to.</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 26 }}>
            {beliefs.map(([t, d]) => (
              <div key={t}>
                <div style={{ display: "flex", alignItems: "flex-start", gap: 10, marginBottom: 7 }}>
                  <AIcon name="check" size={17} color="var(--accent-text)" style={{ flex: "none", marginTop: 3 }} />
                  <h3 style={{ color: "#fff", fontSize: 18, margin: 0, lineHeight: 1.35 }}>{t}</h3>
                </div>
                <p style={{ color: "var(--gray-300)", fontSize: 14.5, lineHeight: 1.6, margin: "0 0 0 27px" }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* why + mission */}
      <section style={{ padding: "56px 0", background: "var(--surface-page)" }}>
        <div style={{ ...acontainer, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 44, alignItems: "start" }}>
          <div>
            <div style={{ ...aeyebrow, marginBottom: 12 }}>Why we're building it</div>
            <h2 style={{ fontSize: 30, margin: "0 0 14px" }}>Because the work already exists. The system doesn't.</h2>
            <p style={{ fontSize: 15.5, lineHeight: 1.7, color: "var(--text-body)", margin: "0 0 14px" }}>
              Most service businesses run on a stack that nobody chose: a scheduling tool, a spreadsheet, a shared inbox, an accounting package, and a whiteboard that is the real source of truth. Every handoff between them is somebody retyping something that already existed.
            </p>
            <p style={{ fontSize: 15.5, lineHeight: 1.7, color: "var(--text-body)", margin: 0 }}>
              Backentra is being built by people who have run that stack. Not a general business tool bent toward the trades, but a system shaped around how a job actually moves: a call, a look at the property, a price, a signature, a crew, an invoice, a payment.
            </p>
          </div>
          <div>
            <div style={{ ...aeyebrow, marginBottom: 12 }}>What we're aiming at</div>
            <h2 style={{ fontSize: 30, margin: "0 0 14px" }}>One place the whole job lives.</h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {[["Nothing gets retyped", "Information is captured at the earliest point that knows it and carries the rest of the way."],
                ["The office and the field see the same thing", "Not two systems kept in step by hand."],
                ["Numbers you can act on", "Job costing from the work that happened, not from an estimate nobody revisited."],
                ["Honest about what is ready", "We say what is built, what is being built, and what is only planned."]].map(([t, d]) => (
                <div key={t} style={{ display: "flex", gap: 12 }}>
                  <AIcon name="check" size={17} color="var(--accent-text)" style={{ flex: "none", marginTop: 3 }} />
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15.5, color: "var(--text-strong)", marginBottom: 2 }}>{t}</div>
                    <div style={{ fontSize: 14, lineHeight: 1.55, color: "var(--text-muted)" }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* industries */}
      <section style={{ padding: "0 0 56px", background: "var(--surface-page)" }}>
        <div style={acontainer}>
          <div style={{ padding: "26px 28px", borderRadius: "var(--radius-xl)", background: "var(--surface-card)", border: "1px solid var(--border)" }}>
            <div style={{ ...aeyebrow, marginBottom: 10 }}>Who we're starting with</div>
            <p style={{ fontSize: 15.5, lineHeight: 1.65, color: "var(--text-body)", margin: "0 0 16px", maxWidth: 720 }}>
              We are focusing first on exterior and property trades, because that is the work we know best and the founding members we are onboarding come from it. The platform is not restricted to these, and other service businesses are welcome on the list.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 9 }}>
              {["Gutters", "Roofing", "Concrete & masonry", "Landscaping & lawn", "Tree service", "Pressure washing", "Fencing", "Snow & ice management"].map((t) => (
                <span key={t} style={{ display: "inline-flex", alignItems: "center", height: 34, padding: "0 14px", borderRadius: "var(--radius-pill)", background: "var(--gray-50)", border: "1px solid var(--border)", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 13.5, color: "var(--text-body)" }}>{t}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* contact */}
      <section style={{ padding: "56px 0 72px", background: "var(--surface-card)" }}>
        <div style={acontainer}>
          <div style={{ maxWidth: 640, marginBottom: 28 }}>
            <div style={{ ...aeyebrow, marginBottom: 12 }}>Contact</div>
            <h2 style={{ fontSize: 32, margin: "0 0 12px" }}>Get hold of a person.</h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--text-body)", margin: 0 }}>
              There is no support queue and no chatbot, because there is no launch yet. Everything below reaches the same small team.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(280px,1fr))", gap: 16, marginBottom: 20 }}>
            <div style={{ padding: "22px 24px", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", background: "var(--surface-card)", boxShadow: "var(--shadow-sm)" }}>
              <span style={{ width: 40, height: 40, borderRadius: "var(--radius-md)", background: "var(--orange-50)", color: "var(--accent-text)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 13 }}><AIcon name="mail" size={20} /></span>
              <h3 style={{ fontSize: 17, margin: "0 0 6px" }}>General enquiries</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--text-muted)", margin: "0 0 10px" }}>Questions about the platform, the founding-member program, or anything else.</p>
              <a href={"mailto:" + email} style={{ fontFamily: "var(--font-mono)", fontSize: 13.5, color: "var(--accent-text)", fontWeight: 600 }}>{email}</a>
            </div>
            <div style={{ padding: "22px 24px", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", background: "var(--surface-card)", boxShadow: "var(--shadow-sm)" }}>
              <span style={{ width: 40, height: 40, borderRadius: "var(--radius-md)", background: "var(--orange-50)", color: "var(--accent-text)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 13 }}><AIcon name="crown" size={20} /></span>
              <h3 style={{ fontSize: 17, margin: "0 0 6px" }}>Founding members</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--text-muted)", margin: "0 0 12px" }}>Join the list and we reach out before launch to walk you through it.</p>
              <ABtn variant="outline" onClick={onJoin} iconRight={<AIcon name="arrow-right" size={17} />}>Join the list</ABtn>
            </div>
            <div style={{ padding: "22px 24px", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", background: "var(--surface-card)", boxShadow: "var(--shadow-sm)" }}>
              <span style={{ width: 40, height: 40, borderRadius: "var(--radius-md)", background: "var(--orange-50)", color: "var(--accent-text)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 13 }}><AIcon name="building-2" size={20} /></span>
              <h3 style={{ fontSize: 17, margin: "0 0 6px" }}>Larger operations</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--text-muted)", margin: "0 0 12px" }}>Multiple divisions or locations? Tell us the shape of the business and we quote it.</p>
              <ABtn variant="outline" onClick={() => onNav && onNav("enterprise")} iconRight={<AIcon name="arrow-right" size={17} />}>Talk to us</ABtn>
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "14px 18px", borderRadius: "var(--radius-lg)", background: "var(--gray-50)", border: "1px solid var(--border)" }}>
            <AIcon name="clock" size={16} color="var(--text-muted)" style={{ flex: "none" }} />
            <span style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--text-body)" }}>
              We answer email within one business day. No automated sales sequence, and no one else gets your details.
            </span>
          </div>
        </div>
      </section>

      <window.BackentraSiteFooter onNav={onNav} />
    </div>
  );
}

window.BackentraAbout = AboutPage;
