/* Backentra — Plans and pricing page. What the "Plans & pricing" nav opens: every tier
   priced, what each includes, the seat model, the one add-on so far, and the full comparison table.
   All of it reads from BK_PLANS so the site cannot drift from what HQ quotes.
   window.BackentraPlans */
const PL = window.BackentraDesignSystem_93cf3a;
const { Button: PBtn, Icon: PIcon, Badge: PBadge, SegmentedControl: PSeg } = PL;
const pcontainer = { maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 32px" };
const peyebrow = { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--text-muted)" };
const pmoney = (n) => "$" + Number(n).toLocaleString("en-US");

/* Site copy per tier: who it is for, and what to show as headline inclusions. */
const PCOPY = {
  solo: { tag: "Owner-operator, no crew", feats: ["Leads, estimates and proposals", "Jobs, invoices and payments", "Client portal and mobile app", "Financials and receivables"] },
  team: { tag: "Owner, office staff, a crew or two", feats: ["Everything in Solo", "Employee roster and crews", "Time clock and timesheets", "Field app with routing and sign-off"] },
  business: { tag: "Several crews and managers", feats: ["Everything in Team", "Flexible crews, daily composition", "Inventory, fleet and materials", "HR records and collections"] },
  pro: { tag: "Multiple divisions or locations", feats: ["Everything in Business", "Divisions by trade and location", "Performance", "Marketing operations"] },
};

function PlansPage({ onExit, onJoin, onEnterprise, onNav }) {
  React.useEffect(() => {
    window.BackentraSetMeta && window.BackentraSetMeta({
      path: "/pricing",
      title: "Plans & Pricing — Backentra",
      description: "One price for the whole platform. Solo, Team, Business and Pro plans with unlimited jobs, clients and portal users. Annual billing saves 15%, founding members lock in 25% off for life.",
    });
  }, []);
  const P = window.BK_PLANS;
  const [cycle, setCycle] = React.useState("monthly");
  const annualPct = P ? Math.round(P.ANNUAL_DISCOUNT * 100) : 15;
  const foundingPct = P ? Math.round(P.FOUNDING_DISCOUNT * 100) : 25;
  const tiers = ((P && P.TIERS) || []).filter((t) => t.monthly);
  const ent = ((P && P.TIERS) || []).filter((t) => !t.monthly)[0];
  const priced = tiers.map((t) => ({ ...t, ...PCOPY[t.key], perMonthAnnual: Math.round(t.annual / 12) }));
  const names = tiers.map((t) => t.name).concat(ent ? [ent.name] : []);
  const tone = (P && P.COMPARE_TONE) || {};

  return (
    <div style={{ background: "var(--surface-page)", minHeight: "100vh" }}>
      <window.BackentraSiteHeader current="plans" onNav={onNav} />

      {/* header + cycle */}
      <section style={{ background: "var(--gray-100)", padding: "56px 0 48px" }}>
        <div style={{ ...pcontainer, textAlign: "center" }}>
          <div style={{ ...peyebrow, marginBottom: 12 }}>Plans and pricing</div>
          <h1 style={{ fontSize: 44, lineHeight: 1.06, margin: "0 0 14px" }}>One price for the whole platform.</h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--text-body)", margin: "0 auto 22px", maxWidth: 640 }}>
            Every plan includes unlimited jobs, unlimited clients, and unlimited client-portal users. What changes between plans is how many of your own people work in it, and which parts of the business it covers. These are the prices at launch.
          </p>
          <PSeg value={cycle} onChange={setCycle} options={[{ value: "monthly", label: "Monthly" }, { value: "annual", label: "Annual · save " + annualPct + "%" }]} />
        </div>
      </section>

      {/* tiers */}
      <section style={{ padding: "48px 0 8px", background: "var(--surface-page)" }}>
        <div style={pcontainer}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,minmax(0,1fr))", gap: 16, alignItems: "start" }}>
            {priced.map((t) => (
              <div key={t.key} style={{
                background: t.popular ? "var(--navy-900)" : "var(--surface-card)",
                border: "1px solid " + (t.popular ? "var(--navy-900)" : "var(--border)"),
                borderRadius: "var(--radius-xl)", padding: 24,
                boxShadow: t.popular ? "var(--shadow-lg)" : "var(--shadow-sm)",
                transform: t.popular ? "translateY(-8px)" : "none",
              }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, marginBottom: 4, minHeight: 26 }}>
                  <h3 style={{ fontSize: 19, margin: 0, color: t.popular ? "#fff" : "var(--text-strong)" }}>{t.name}</h3>
                  {t.popular && <PBadge tone="accent" solid>Recommended</PBadge>}
                </div>
                <div style={{ fontSize: 13.5, lineHeight: 1.4, color: t.popular ? "var(--gray-400)" : "var(--text-muted)", marginBottom: 16, minHeight: 38 }}>{t.tag}</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 5 }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: 36, color: t.popular ? "#fff" : "var(--text-strong)", letterSpacing: "-0.02em" }}>{pmoney(cycle === "monthly" ? t.monthly : t.perMonthAnnual)}</span>
                  <span style={{ color: t.popular ? "var(--gray-400)" : "var(--text-muted)", fontSize: 14 }}>/mo</span>
                </div>
                <div style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: t.popular ? "var(--gray-400)" : "var(--text-subtle)", marginTop: 4, marginBottom: 18 }}>
                  {cycle === "monthly" ? "Billed monthly" : pmoney(t.annual) + " billed yearly"}
                </div>
                <PBtn variant={t.popular ? "primary" : "outline"} block onClick={onJoin}>{t.popular ? "Join the list" : "Get notified"}</PBtn>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 18, paddingBottom: 14, borderBottom: "1px solid " + (t.popular ? "var(--border-inverse)" : "var(--border)"), fontSize: 13, fontFamily: "var(--font-mono)", color: t.popular ? "var(--gray-300)" : "var(--text-body)" }}>
                  {/* Both counts, always. "5 users · field seats" hid whether field seats
                      were included or merely purchasable. */}
                  <PIcon name="users" size={15} color="var(--accent-text)" /> {t.seats === null ? "Negotiated users" : t.seats + (t.seats === 1 ? " full user" : " full users")}{t.fieldSeats ? " · " + t.fieldSeats + " field seats" : (t.field && t.fieldSeats !== null ? " · field seats available" : "")}
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 14 }}>
                  {t.feats.map((f) => (
                    <div key={f} style={{ display: "flex", alignItems: "flex-start", gap: 9, fontSize: 13.5, lineHeight: 1.45, color: t.popular ? "var(--gray-300)" : "var(--text-body)" }}>
                      <PIcon name="check" size={15} color="var(--accent-text)" style={{ flex: "none", marginTop: 2 }} /> {f}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
          {ent && <div style={{ marginTop: 20, display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap", padding: "22px 26px", border: "1px solid var(--border)", borderRadius: "var(--radius-xl)", background: "var(--surface-card)" }}>
            <div style={{ flex: "1 1 380px", minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 5 }}>
                <h3 style={{ fontSize: 19, margin: 0, color: "var(--text-strong)" }}>{ent.name}</h3>
                <PBadge tone="premium">Quoted per company</PBadge>
              </div>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.5, color: "var(--text-body)" }}>{ent.who} Everything in Pro, with negotiated user counts, onboarding and support terms.</p>
            </div>
            <PBtn variant="outline" onClick={onEnterprise}>Talk to us</PBtn>
          </div>}
          <p style={{ textAlign: "center", margin: "22px 0 0", fontSize: 13.5, color: "var(--text-muted)" }}>
            Annual billing saves {annualPct}% on a one-year agreement. Founding members lock {foundingPct}% off for as long as service stays continuous.
          </p>
        </div>
      </section>

      {/* seats */}
      <section style={{ padding: "56px 0", background: "var(--surface-card)" }}>
        <div style={pcontainer}>
          <div style={{ maxWidth: 640, marginBottom: 30 }}>
            <div style={{ ...peyebrow, marginBottom: 12 }}>Seats</div>
            <h2 style={{ fontSize: 32, margin: "0 0 12px" }}>Pay for the people who work in it.</h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--text-body)", margin: 0 }}>
              The plan decides which features exist. The seat count decides how many people can reach them. Adding seats never unlocks a higher plan's features.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))", gap: 16, marginBottom: 26 }}>
            {((P && P.SEATS) || []).map((s) => (
              <div key={s.key} style={{ padding: "18px 20px", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", background: "var(--surface-card)", boxShadow: "var(--shadow-sm)" }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 7, marginBottom: 8 }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 24, color: s.monthly ? "var(--text-strong)" : "var(--success)", letterSpacing: "-.02em" }}>{s.monthly ? pmoney(s.monthly) : "Free"}</span>
                  <span style={{ fontSize: 12.5, color: "var(--text-muted)" }}>{s.monthly ? "/mo " + s.unit : s.unit}</span>
                </div>
                <h3 style={{ fontSize: 16, margin: "0 0 6px" }}>{s.name}</h3>
                <p style={{ fontSize: 13, lineHeight: 1.55, color: "var(--text-muted)", margin: 0 }}>{s.who}</p>
              </div>
            ))}
          </div>
          <div style={{ padding: "20px 22px", borderRadius: "var(--radius-lg)", background: "var(--gray-50)", border: "1px solid var(--border)" }}>
            <div style={{ ...peyebrow, marginBottom: 11 }}>How seats work</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 26px" }}>
              {((P && P.SEAT_RULES) || []).map((r) => (
                <div key={r} style={{ display: "flex", gap: 9, fontSize: 13.5, lineHeight: 1.55, color: "var(--text-body)" }}>
                  <PIcon name="minus" size={14} color="var(--accent-text)" style={{ flex: "none", marginTop: 3 }} /> {r}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* add-ons */}
      <section style={{ padding: "56px 0", background: "var(--surface-page)" }}>
        <div style={pcontainer}>
          <div style={{ maxWidth: 640, marginBottom: 26 }}>
            <div style={{ ...peyebrow, marginBottom: 12 }}>Add-ons</div>
            <h2 style={{ fontSize: 32, margin: "0 0 12px" }}>One so far.</h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--text-body)", margin: 0 }}>
              Every plan is complete on its own. Where something is genuinely separate rather than part of the platform, it is priced separately and named here.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(300px,1fr))", gap: 16 }}>
            {((P && P.ADDONS) || []).filter((a) => a.key === "ai").map((a) => (
              <div key={a.key} style={{ padding: "20px 22px", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", background: "var(--surface-card)", boxShadow: "var(--shadow-sm)" }}>
                <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12, marginBottom: 8 }}>
                  <h3 style={{ fontSize: 17, margin: 0 }}>{a.name}</h3>
                  <span style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 17, color: "var(--text-strong)", whiteSpace: "nowrap" }}>{pmoney(a.monthly)}<span style={{ fontSize: 12, fontWeight: 400, color: "var(--text-muted)" }}>/mo</span></span>
                </div>
                <p style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--text-muted)", margin: 0 }}>{a.desc}</p>
              </div>
            ))}
            <div style={{ padding: "20px 22px", border: "1px dashed var(--border-strong)", borderRadius: "var(--radius-lg)", background: "transparent", display: "flex", alignItems: "center", gap: 13 }}>
              <PIcon name="more-horizontal" size={20} color="var(--text-muted)" style={{ flex: "none" }} />
              <div style={{ minWidth: 0 }}>
                <h3 style={{ fontSize: 17, margin: "0 0 4px", color: "var(--text-body)" }}>More to come</h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--text-muted)", margin: 0 }}>We are still working out what belongs in a plan and what is genuinely an add-on. We will say plainly when that is settled.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Where integrations start is a plan boundary now, not a footnote, so it is stated on
         the pricing page rather than left to the comparison grid. There is no Integrations
         page to send anyone to for now, so the claim has to stand on its own. */}
      <section style={{ padding: "0 0 56px", background: "var(--surface-page)" }}>
        <div style={{ ...pcontainer, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap", padding: "26px 30px", borderRadius: "var(--radius-xl)", background: "var(--surface-card)", border: "1px solid var(--border)" }}>
          <div style={{ flex: "1 1 420px", minWidth: 0 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 6 }}>
              <PIcon name="plug" size={19} color="var(--accent-text)" />
              <h3 style={{ fontSize: 20, margin: 0 }}>Integrations start on Business</h3>
            </div>
            <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: "var(--text-body)" }}>
              QuickBooks, RingCentral, Stripe, Google Calendar and the rest are part of Business and above. Solo and Team do not connect to outside software. Where they are included there is no charge to connect one: you bring the account you already have, and the provider bills you for their own service.
            </p>
          </div>
        </div>
      </section>

      {/* comparison */}
      <section style={{ padding: "56px 0", background: "var(--surface-card)" }}>
        <div style={pcontainer}>
          <div style={{ maxWidth: 640, marginBottom: 26 }}>
            <div style={{ ...peyebrow, marginBottom: 12 }}>What's included</div>
            <h2 style={{ fontSize: 32, margin: "0 0 12px" }}>Every feature area, every plan.</h2>
          </div>
          <div style={{ overflowX: "auto", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 760 }}>
              <thead>
                <tr>
                  <th style={{ ...peyebrow, textAlign: "left", padding: "12px 16px", background: "var(--gray-50)", borderBottom: "1px solid var(--border)", position: "sticky", left: 0 }}>Feature area</th>
                  {names.map((n) => <th key={n} style={{ ...peyebrow, textAlign: "left", padding: "12px 14px", background: "var(--gray-50)", borderBottom: "1px solid var(--border)", whiteSpace: "nowrap" }}>{n}</th>)}
                </tr>
              </thead>
              <tbody>
                {((P && P.COMPARE) || []).map((row, i) => (
                  <tr key={row[0]}>
                    <td style={{ padding: "10px 16px", borderTop: i ? "1px solid var(--border)" : "none", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 13.5, color: "var(--text-strong)", background: "var(--surface-card)" }}>{row[0]}</td>
                    {row.slice(1).map((v, j) => {
                      const t = tone[v] || ["var(--gray-100)", "var(--text-muted)"];
                      return <td key={j} style={{ padding: "10px 14px", borderTop: i ? "1px solid var(--border)" : "none" }}>
                        <span style={{ display: "inline-flex", alignItems: "center", height: 22, padding: "0 9px", borderRadius: "var(--radius-pill)", background: t[0], color: t[1], fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 11, whiteSpace: "nowrap" }}>{v}</span>
                      </td>;
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* faq */}
      <section style={{ padding: "56px 0", background: "var(--surface-page)" }}>
        <div style={{ ...pcontainer, maxWidth: 820 }}>
          <div style={{ marginBottom: 26 }}>
            <div style={{ ...peyebrow, marginBottom: 12 }}>Pricing questions</div>
            <h2 style={{ fontSize: 32, margin: 0 }}>The things people ask first.</h2>
          </div>
          {[["What counts as a user?", "Anyone on your team who signs in. Full users get the office side; field users get the crew app only. Your clients are never counted and never charged, however many of them you have."],
            ["Can I change plan later?", "Yes. Move up at any time and the change applies immediately, prorated. Move down at the end of your billing period. Your data does not change, only what you can reach."],
            ["What happens if I outgrow my seats?", "Add seats without changing plan. Extra seats are priced separately and bill on the next cycle. Adding seats never unlocks features from a higher plan, and it never has to."],
            ["Is annual billing locked in?", "Annual is a one-year agreement billed up front, in exchange for " + annualPct + "% off. Cancel early and the unused months are not refunded. Monthly has no commitment."],
            ["Do I have to buy add-ons?", "No. Every plan is complete on its own. Backentra AI is the only add-on so far, and we are still working out what else belongs in a plan rather than beside it."],
            ["What about taxes and fees?", "Prices shown are before any applicable tax. Payment processing costs are separate and depend on how your customers pay you."],
            ["When do I actually get charged?", "Not until the platform is live and you decide to come on board. Joining the list costs nothing and commits you to nothing."]].map(([q, a], i) => (
            <div key={q} style={{ paddingTop: i ? 20 : 0, marginTop: i ? 20 : 0, borderTop: i ? "1px solid var(--border)" : "none" }}>
              <h3 style={{ fontSize: 17.5, margin: "0 0 7px" }}>{q}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--text-body)", margin: 0 }}>{a}</p>
            </div>
          ))}
        </div>
      </section>

      {/* cta */}
      <section style={{ padding: "0 0 72px", background: "var(--surface-card)" }}>
        <div style={pcontainer}>
          <div style={{ background: "var(--accent-solid)", borderRadius: "var(--radius-2xl)", padding: "48px 44px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, flexWrap: "wrap" }}>
            <div>
              <h2 style={{ color: "#fff", fontSize: 30, margin: "0 0 8px" }}>Prices hold at launch.</h2>
              <p style={{ color: "rgba(255,255,255,0.9)", fontSize: 16, margin: 0 }}>Join the list and lock founding-member pricing before we go live.</p>
            </div>
            <PBtn variant="secondary" size="lg" onClick={onJoin} iconRight={<PIcon name="arrow-right" size={20} />}>Join the list</PBtn>
          </div>
        </div>
      </section>
      <window.BackentraSiteFooter onNav={onNav} />
    </div>
  );
}

window.BackentraPlans = PlansPage;