/* Backentra — Referral program page. What the referral link in the footer opens: how
   the program works, what it pays, and the honest limits. Every rule and rate reads
   from BK_PLANS so the site cannot drift from the program document.
   window.BackentraReferral */
const RF = window.BackentraDesignSystem_93cf3a;
const { Button: RBtn, Icon: RIcon } = RF;
const rcontainer = { maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 32px" };
const reyebrow = { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--text-muted)" };
const rmoney = (n) => "$" + Number(n).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

function ReferralPage({ onExit, onJoin, onNav }) {
  const P = window.BK_PLANS;
  const months = P ? P.REFERRAL_MONTHS : 12;
  const rateSet = P ? P.REFERRAL_SHARE_SET : false;
  const share = P ? P.REFERRAL_SHARE : 0.2;
  const foundingPct = P ? Math.round(P.FOUNDING_DISCOUNT * 100) : 25;

  /* Worked example, computed by the same function HQ bills from. */
  const charge = 499;
  const refs = [
    { company: "Team plan customer", monthly: 249, cyclesUsed: 4, status: "active" },
    { company: "Business plan customer", monthly: 499, cyclesUsed: 1, status: "active" },
    { company: "Pro plan customer", monthly: 899, cyclesUsed: 9, status: "active" },
  ];
  const calc = P ? P.referralDiscount(refs, charge) : null;

  const steps = [
    ["link", "Share your link", "Every eligible customer gets a unique referral link and code in their account."],
    ["user-plus", "They join with it", "The referral activates once they register with your link, start an eligible paid plan, make their first payment, and are in good standing."],
    ["percent", "Your discount starts", "From their first paid cycle, a share of their subscription revenue comes off your next bill, every month it applies."],
    ["trending-down", "Keep referring", "No cap on how many you refer. Discounts stack until your subscription reaches $0."],
  ];
  const limits = [
    ["Nothing banks", "Your discount is recalculated every cycle from referrals that are active right now. Referring several businesses at once does not build up years of free service."],
    ["No cash payouts", "Value above your subscription charge is not paid out, does not become credit, and does not roll forward."],
    ["It ends when they leave", "If a referred account cancels or stops paying, that discount comes off your next cycle. Seven months active earns seven months, not twelve."],
  ];

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

      {/* hero */}
      <section style={{ background: "var(--gray-100)", padding: "64px 0 56px" }}>
        <div style={{ ...rcontainer, maxWidth: 760, textAlign: "center" }}>
          <div style={{ ...reyebrow, color: "var(--accent-text)", marginBottom: 14 }}>Referral program</div>
          <h1 style={{ fontSize: 48, lineHeight: 1.05, margin: "0 0 16px" }}>Refer businesses. Reduce your bill.</h1>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--text-body)", margin: "0 auto 28px", maxWidth: 620 }}>
            When a business joins Backentra through your link and becomes a paying customer, you earn a recurring monthly discount for as long as their account stays active. Refer enough, and your subscription is covered entirely.
          </p>
          <RBtn variant="primary" size="lg" onClick={onJoin} iconRight={<RIcon name="arrow-right" size={20} />}>Join the list to get your link</RBtn>
        </div>
      </section>

      {/* how it works */}
      <section style={{ padding: "64px 0", background: "var(--surface-card)" }}>
        <div style={rcontainer}>
          <div style={{ maxWidth: 620, marginBottom: 36 }}>
            <div style={{ ...reyebrow, marginBottom: 12 }}>How it works</div>
            <h2 style={{ fontSize: 34, margin: "0 0 12px" }}>Four steps, then it runs itself.</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,minmax(0,1fr))", gap: 18 }}>
            {steps.map(([ic, t, d], i) => (
              <div key={t} style={{ padding: "20px 18px", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", background: "var(--surface-card)", boxShadow: "var(--shadow-sm)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
                  <span style={{ width: 30, height: 30, borderRadius: "var(--radius-pill)", background: "var(--navy-900)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 13 }}>{i + 1}</span>
                  <RIcon name={ic} size={18} color="var(--accent-text)" />
                </div>
                <h3 style={{ fontSize: 16.5, margin: "0 0 6px" }}>{t}</h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--text-muted)", margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* the maths */}
      <section style={{ padding: "64px 0", background: "var(--surface-page)" }}>
        <div style={{ ...rcontainer, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 44, alignItems: "start" }}>
          <div>
            <div style={{ ...reyebrow, marginBottom: 12 }}>What it pays</div>
            <h2 style={{ fontSize: 34, margin: "0 0 14px" }}>A share of what they pay, every month.</h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--text-body)", margin: "0 0 16px" }}>
              Each active referral earns you a monthly discount based on that referral's qualifying subscription revenue, for up to <b>{months} billing cycles</b>. It can take your bill to $0, but never below it.
            </p>
            {!rateSet && <div style={{ padding: "12px 15px", borderRadius: "var(--radius-md)", background: "var(--warning-soft)", border: "1px dashed var(--warning)", fontSize: 13.5, lineHeight: 1.55, color: "var(--text-body)" }}>
              <b>Rate not published yet.</b> The example below models a {Math.round(share * 100)}% share to show how the program behaves. The final rate is announced before launch.
            </div>}
          </div>
          {calc && <div style={{ background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-md)", padding: 24 }}>
            <div style={{ ...reyebrow, marginBottom: 14 }}>A Business plan customer, three active referrals</div>
            <div style={{ display: "flex", justifyContent: "space-between", gap: 14, padding: "7px 0", fontSize: 14 }}>
              <span style={{ color: "var(--text-body)" }}>Your subscription</span>
              <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--text-strong)" }}>{rmoney(charge)}</span>
            </div>
            {calc.perReferral.map((r) => (
              <div key={r.company} style={{ display: "flex", justifyContent: "space-between", gap: 14, padding: "7px 0", borderTop: "1px solid var(--border)", fontSize: 14 }}>
                <span style={{ color: "var(--text-body)", minWidth: 0 }}>{r.company} <span style={{ color: "var(--text-muted)", fontSize: 12.5 }}>· {r.cyclesLeft} cycles left</span></span>
                <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--success)", whiteSpace: "nowrap" }}>&minus;{rmoney(r.discount)}</span>
              </div>
            ))}
            <div style={{ display: "flex", justifyContent: "space-between", gap: 14, marginTop: 8, paddingTop: 12, borderTop: "2px solid var(--navy-900)", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 17, color: "var(--text-strong)" }}>
              <span>You pay this cycle</span>
              <span style={{ fontFamily: "var(--font-mono)" }}>{rmoney(calc.dueAfter)}</span>
            </div>
            <p style={{ fontSize: 12.5, color: "var(--text-muted)", margin: "12px 0 0", lineHeight: 1.55 }}>Two more referrals of this size would cover the subscription entirely.</p>
          </div>}
        </div>
      </section>

      {/* limits */}
      <section style={{ padding: "64px 0", background: "var(--navy-900)" }}>
        <div style={rcontainer}>
          <div style={{ textAlign: "center", marginBottom: 40 }}>
            <div style={{ ...reyebrow, color: "var(--accent-text)", marginBottom: 12 }}>The honest part</div>
            <h2 style={{ color: "#fff", fontSize: 34, margin: 0 }}>What the program does not do.</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
            {limits.map(([t, d]) => (
              <div key={t}>
                <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 8 }}>
                  <RIcon name="x" size={17} color="var(--accent-text)" />
                  <h3 style={{ color: "#fff", fontSize: 18, margin: 0 }}>{t}</h3>
                </div>
                <p style={{ color: "var(--gray-300)", fontSize: 14.5, lineHeight: 1.6, margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* founding interaction */}
      <section style={{ padding: "64px 0", background: "var(--surface-card)" }}>
        <div style={{ ...rcontainer, maxWidth: 780 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 12 }}>
            <RIcon name="crown" size={19} color="var(--premium)" />
            <span style={{ ...reyebrow, color: "var(--premium)" }}>If you're a founding member</span>
          </div>
          <h2 style={{ fontSize: 30, margin: "0 0 14px" }}>Pick whichever saves you more.</h2>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--text-body)", margin: "0 0 18px" }}>
            Founding members can refer, but the founding discount and referral discounts cannot both apply in the same billing cycle. Your account shows both figures so you can take the better one, and you can switch between them at the start of any future cycle.
          </p>
          <div style={{ padding: "16px 18px", borderRadius: "var(--radius-lg)", background: "var(--orange-50)", border: "1px solid var(--orange-200)" }}>
            <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.6, color: "var(--text-body)" }}>
              <b>Using referral discounts does not cost you founding status.</b> Your designation, badge, communications, and early access stay intact. Only the founding {foundingPct}% subscription discount goes dormant while a referral discount is applied, and it comes back if your referrals expire.
            </p>
          </div>
        </div>
      </section>

      {/* cta */}
      <section style={{ padding: "0 0 72px", background: "var(--surface-card)" }}>
        <div style={rcontainer}>
          <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" }}>Referral links go out at launch.</h2>
              <p style={{ color: "rgba(255,255,255,0.9)", fontSize: 16, margin: 0 }}>Join the list now and yours is ready the day your account is.</p>
            </div>
            <RBtn variant="secondary" size="lg" onClick={onJoin} iconRight={<RIcon name="arrow-right" size={20} />}>Join the list</RBtn>
          </div>
          <p style={{ fontSize: 12, lineHeight: 1.6, color: "var(--text-muted)", margin: "20px auto 0", maxWidth: 900, textAlign: "center" }}>
            Referral benefits are subject to eligibility requirements and the complete Backentra Referral Program Terms. Each qualifying referral may generate discounts for up to {months} consecutive billing cycles while the referred account remains active, paid, and in good standing. Discounts may not exceed the referring customer's eligible monthly subscription charge and have no cash value. Unused discounts do not roll over. Founding-member and referral discounts cannot be combined. Discounts may exclude taxes, fees, add-ons, usage charges, and third-party services.
          </p>
        </div>
      </section>
      <window.BackentraSiteFooter onNav={onNav} />
    </div>
  );
}

window.BackentraReferral = ReferralPage;
