/* Backentra — Founding Members. Its own page now: what the program is, the 25%, who is
   eligible, what comes with it, and the limits stated plainly. The join form lives on
   its own page and this routes there. window.BackentraFounding */
const FM = window.BackentraDesignSystem_93cf3a;
const { Button: FBtn, Icon: FIcon } = FM;
const fmc = { maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 32px" };
const fmeyebrow = { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--text-muted)" };

function FoundingPage({ onNav, onJoin }) {
  React.useEffect(() => {
    window.BackentraSetMeta && window.BackentraSetMeta({
      path: "/founding-members",
      title: "Founding Members — Backentra",
      description: "The first companies on Backentra lock a discount off the standard rate for as long as service stays continuous, plus a direct line to the people building it.",
    });
  }, []);
  const P = window.BK_PLANS;
  const pct = P ? Math.round(P.FOUNDING_DISCOUNT * 100) : 25;
  const benefits = [
    ["percent", pct + "% for life", "Off the standard rate of whatever plan you are on, for as long as your service stays continuous. Not an introductory month."],
    ["phone-call", "A direct line to the builders", "No ticket queue. You talk to the people writing the software, and your workflow shapes what ships next."],
    ["upload", "Hands-on setup", "We move your clients, jobs and price list across with you. You do not start from an empty screen."],
    ["flag", "First access at launch", "Founding members are onboarded before general availability, in the order they joined the list."],
  ];
  const eligible = [
    "Any service business that joins the list before we go live",
    "One founding rate per company, applied to whichever plan you choose",
    "Available on Solo, Team, Business and Pro; Enterprise is negotiated separately",
    "No minimum size, no industry restriction, no application to pass",
  ];
  const limits = [
    ["Continuous service only", "The discount applies while you stay with us. Leave and come back later and it does not return."],
    ["Not combinable", "Founding pricing and referral discounts cannot both apply in the same billing cycle. Your account shows both so you can take the better one."],
    ["Applies to subscription only", "Not to taxes, transaction fees, usage charges, or third-party services you connect."],
    ["Closes at launch", "Once the platform is live the program closes to new members. Existing members keep their rate."],
  ];
  return (
    <div style={{ background: "var(--surface-card)", minHeight: "100vh" }}>
      <window.BackentraSiteHeader current="founding" onNav={onNav} />

      <section style={{ background: "var(--navy-900)", padding: "60px 0 52px" }}>
        <div style={{ ...fmc, maxWidth: 760, textAlign: "center" }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 9, marginBottom: 16 }}>
            <FIcon name="crown" size={20} color="var(--premium)" />
            <span style={{ ...fmeyebrow, color: "var(--premium)" }}>Founding member program</span>
          </div>
          <h1 style={{ color: "#fff", fontSize: 48, lineHeight: 1.05, margin: "0 0 16px" }}>Get in first. Pay {pct}% for life.</h1>
          <p style={{ fontSize: 17.5, lineHeight: 1.6, color: "var(--gray-300)", margin: "0 auto 28px", maxWidth: 620 }}>
            The first group of companies on Backentra shapes what it becomes. In exchange they keep {pct}% off the standard rate for as long as they stay with us.
          </p>
          <FBtn variant="primary" size="lg" onClick={onJoin} iconRight={<FIcon name="arrow-right" size={20} />}>Join the list</FBtn>
          <p style={{ fontSize: 12, color: "var(--gray-400)", margin: "16px 0 0" }}>Terms and conditions apply.</p>
        </div>
      </section>

      <section style={{ padding: "56px 0", background: "var(--surface-card)" }}>
        <div style={fmc}>
          <div style={{ maxWidth: 620, marginBottom: 30 }}>
            <div style={{ ...fmeyebrow, marginBottom: 12 }}>What comes with it</div>
            <h2 style={{ fontSize: 34, margin: 0 }}>Four things, all of them real.</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(300px,1fr))", gap: 16 }}>
            {benefits.map(([ic, t, d]) => (
              <div key={t} style={{ padding: "22px 24px", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", background: "var(--surface-card)", boxShadow: "var(--shadow-sm)" }}>
                <span style={{ width: 42, height: 42, borderRadius: "var(--radius-md)", background: "var(--orange-50)", color: "var(--accent-text)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 13 }}><FIcon name={ic} size={21} /></span>
                <h3 style={{ fontSize: 18, margin: "0 0 7px" }}>{t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--text-muted)", margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: "56px 0", background: "var(--surface-page)" }}>
        <div style={{ ...fmc, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "start" }}>
          <div>
            <div style={{ ...fmeyebrow, marginBottom: 12 }}>Who is eligible</div>
            <h2 style={{ fontSize: 30, margin: "0 0 16px" }}>Anyone who joins before launch.</h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
              {eligible.map((e) => (
                <div key={e} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 15, lineHeight: 1.55, color: "var(--text-body)" }}>
                  <FIcon name="check" size={16} color="var(--success)" style={{ flex: "none", marginTop: 3 }} /> {e}
                </div>
              ))}
            </div>
          </div>
          <div>
            <div style={{ ...fmeyebrow, marginBottom: 12 }}>The limits</div>
            <h2 style={{ fontSize: 30, margin: "0 0 16px" }}>Stated up front.</h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {limits.map(([t, d]) => (
                <div key={t} style={{ padding: "14px 16px", borderRadius: "var(--radius-lg)", background: "var(--surface-card)", border: "1px solid var(--border)" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                    <FIcon name="x" size={15} color="var(--accent-text)" />
                    <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15, color: "var(--text-strong)" }}>{t}</span>
                  </div>
                  <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55, color: "var(--text-muted)" }}>{d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "0 0 72px", background: "var(--surface-page)" }}>
        <div style={fmc}>
          <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" }}>Founding pricing closes at launch.</h2>
              <p style={{ color: "rgba(255,255,255,0.9)", fontSize: 16, margin: "0 0 6px" }}>Join the list now and the rate is yours for as long as you stay.</p>
              <p style={{ color: "rgba(255,255,255,0.72)", fontSize: 12, margin: 0 }}>Terms and conditions apply.</p>
            </div>
            <FBtn variant="secondary" size="lg" onClick={onJoin} iconRight={<FIcon name="arrow-right" size={20} />}>Join the list</FBtn>
          </div>
        </div>
      </section>

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

window.BackentraFounding = FoundingPage;