// FOUNDING + BETA REWARDS — consolidated pre-launch offer
// Replaces the old "500 hosts with claimed counter" treatment.

const Founding = () => (
  <section className="founding section-pad" id="founding">
    <div className="container">
      <div className="founding__inner">
        <div>
          <Eyebrow className="on-navy" style={{ color: "var(--mm-sunflower-gold)" }}>Beta rewards · by state</Eyebrow>
          <h2 className="founding__title">
            Be early. <span className="gold">Be rewarded.</span>
          </h2>
          <p className="founding__lede">
            The app is free. Always will be to join. But the people who show up while we're
            still building get perks that only exist this season — tiered by the state you call
            home, because we want every state to light up at its own pace.
          </p>

          <div className="founding__cta-row">
            <a href="#founding" className="btn btn--gold">Join the beta</a>
            <a href="mailto:info@mahjongmatchmaker.com" className="btn btn--ghost-light">Partner with us</a>
          </div>
        </div>

        <div>
          <div className="founding__benefits" style={{ marginTop: 0 }}>
            <ul style={{ display: "grid", gap: 18 }}>
              <li style={{ alignItems: "flex-start" }}>
                <span style={{
                  flexShrink: 0, width: 28, height: 28, borderRadius: 999,
                  background: "var(--mm-sunflower-gold)", color: "#3A2A00",
                  display: "grid", placeItems: "center",
                  fontFamily: "var(--mm-font-serif)", fontWeight: 600, fontSize: 14
                }}>★</span>
                <div>
                  <div style={{ fontFamily: "var(--mm-font-serif)", fontSize: 19, fontWeight: 500, color: "#fff", lineHeight: 1.25 }}>
                    First 10 in your state — lifetime membership.
                  </div>
                  <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 13, color: "#A6B3CC", marginTop: 4, lineHeight: 1.5 }}>
                    Founding seats, state by state. Your name, your ★, for as long as we're running.
                  </div>
                </div>
              </li>
              <li style={{ alignItems: "flex-start" }}>
                <span style={{
                  flexShrink: 0, width: 28, height: 28, borderRadius: 999,
                  background: "rgba(244,196,49,0.22)", color: "var(--mm-sunflower-gold)",
                  display: "grid", placeItems: "center",
                  fontFamily: "var(--mm-font-sans)", fontWeight: 600, fontSize: 13
                }}>100</span>
                <div>
                  <div style={{ fontFamily: "var(--mm-font-serif)", fontSize: 19, fontWeight: 500, color: "#fff", lineHeight: 1.25 }}>
                    First 100 in your state — 6 months of Premium, free.
                  </div>
                  <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 13, color: "#A6B3CC", marginTop: 4, lineHeight: 1.5 }}>
                    Unlimited game alerts, alerts across multiple zip codes, and priority on every waitlist — on us, for half a year.
                  </div>
                </div>
              </li>
              <li style={{ alignItems: "flex-start" }}>
                <span style={{
                  flexShrink: 0, width: 28, height: 28, borderRadius: 999,
                  background: "rgba(255,255,255,0.08)", color: "#fff",
                  display: "grid", placeItems: "center",
                  fontFamily: "var(--mm-font-sans)", fontWeight: 600, fontSize: 13
                }}>3</span>
                <div>
                  <div style={{ fontFamily: "var(--mm-font-serif)", fontSize: 19, fontWeight: 500, color: "#fff", lineHeight: 1.25 }}>
                    Every beta member — 3 months of Premium.
                  </div>
                  <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 13, color: "#A6B3CC", marginTop: 4, lineHeight: 1.5 }}>
                    Thank-you package for anyone who joins before public launch. A quiet handshake, a good quarter of tables.
                  </div>
                </div>
              </li>
            </ul>
            <div style={{
              marginTop: 24, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,0.12)",
              fontFamily: "var(--mm-font-sans)", fontSize: 12, color: "#A6B3CC",
              lineHeight: 1.55, textWrap: "pretty"
            }}>
              Lifetime spots and premium rewards are honored once the app ships on the App Store.
              We'll email the moment your seat is live.
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Founding });