// TIERS — Free vs Premium comparison.
// Placed right after Founding so "3 months Premium free" has concrete meaning.
// Two cards, editorial layout, quiet color contrast (cream vs gold-tinted).

const FREE_FEATURES = [
  { t: "Browse all games & events", b: "See every game and event posted in your area, any time." },
  { t: "Game alerts in your home zip", b: "A limited set of alerts for new games posted near where you live." },
  { t: "Reserve open seats", b: "RSVP to any open table that fits your skill and schedule." },
  { t: "Your player profile", b: "Skill level, card preference, availability. The basics." },
];

const PREMIUM_FEATURES = [
  { t: "Unlimited game alerts", b: "Set as many alerts as you want — by day, time, host, level, or host style.", highlight: true },
  { t: "Alerts in multiple zip codes", b: "Weekend house in the country? A standing meeting in the next town? Cover them all.", highlight: true },
  { t: "Join any waitlist", b: "Get in line for full tables and get auto-promoted the moment a seat opens.", highlight: true },
  { t: "Everything in Free, plus host tools", b: "Standing invitations, approval flow, waitlist management, early event access." },
];

const Tiers = () => (
  <section className="tiers section-pad" id="tiers" style={{ background: "#FBF7F1" }}>
    <div className="container">
      <div style={{ textAlign: "center", maxWidth: 620, margin: "0 auto 56px" }}>
        <Eyebrow>Free · Premium</Eyebrow>
        <h2 className="sec-title">Free forever.<br /><em style={{ fontStyle: "italic" }}>Premium when you want more.</em></h2>
        <p className="lede" style={{ margin: "20px auto 0" }}>
          Joining is always free. Premium exists for people running around between zip codes,
          chasing multiple groups, or never wanting to miss a seat.
        </p>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 20,
        maxWidth: 980,
        margin: "0 auto"
      }} className="tiers__grid">
        {/* FREE */}
        <article style={{
          background: "#fff",
          borderRadius: 16,
          padding: "36px 32px 32px",
          border: "1px solid rgba(20,31,46,0.08)",
          display: "flex", flexDirection: "column", gap: 18
        }}>
          <div>
            <div style={{
              fontFamily: "var(--mm-font-sans)", fontSize: 10.5, fontWeight: 600,
              letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--mm-warm-gray)",
              marginBottom: 10
            }}>
              Free
            </div>
            <h3 style={{
              fontFamily: "var(--mm-font-serif)", fontSize: 28, fontWeight: 500,
              lineHeight: 1.15, margin: 0, color: "var(--mm-near-black)",
              letterSpacing: "-0.005em"
            }}>
              For finding your regular table.
            </h3>
            <div style={{
              fontFamily: "var(--mm-font-sans)", fontSize: 13,
              color: "var(--mm-warm-gray)", marginTop: 10, lineHeight: 1.5
            }}>
              One zip code, limited alerts, and the full map of games in your area.
            </div>
          </div>

          <hr style={{ border: 0, height: 1, background: "var(--mm-frost)", margin: "4px 0" }} />

          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 14, flex: 1 }}>
            {FREE_FEATURES.map(f => (
              <li key={f.t} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <span style={{ color: "var(--mm-kelly-green)", marginTop: 3, flexShrink: 0 }}><IconCheck size={15} /></span>
                <div>
                  <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 14.5, fontWeight: 500, color: "var(--mm-near-black)", lineHeight: 1.35 }}>
                    {f.t}
                  </div>
                  <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 12.5, color: "var(--mm-warm-gray)", marginTop: 3, lineHeight: 1.45 }}>
                    {f.b}
                  </div>
                </div>
              </li>
            ))}
          </ul>

          <div style={{
            marginTop: 6, paddingTop: 18, borderTop: "1px solid var(--mm-frost)",
            fontFamily: "var(--mm-font-sans)", fontSize: 12, color: "var(--mm-warm-gray)",
            letterSpacing: "0.04em"
          }}>
            $0 · free forever
          </div>
        </article>

        {/* PREMIUM */}
        <article style={{
          background: "linear-gradient(160deg, #FFFBF0 0%, #FFF3CC 100%)",
          borderRadius: 16,
          padding: "36px 32px 32px",
          border: "2px solid var(--mm-sunflower-gold)",
          boxShadow: "0 18px 40px -20px rgba(244,196,49,0.4)",
          display: "flex", flexDirection: "column", gap: 18,
          position: "relative"
        }}>
          <div style={{
            position: "absolute",
            top: -13, left: 32,
            background: "var(--mm-sunflower-gold)", color: "#3A2A00",
            fontFamily: "var(--mm-font-sans)", fontSize: 10.5, fontWeight: 600,
            letterSpacing: "0.14em", textTransform: "uppercase",
            padding: "6px 14px", borderRadius: 999,
          }}>
            ★ Premium
          </div>

          <div>
            <div style={{
              fontFamily: "var(--mm-font-sans)", fontSize: 10.5, fontWeight: 600,
              letterSpacing: "0.16em", textTransform: "uppercase", color: "#9A7A00",
              marginBottom: 10, marginTop: 8
            }}>
              Premium
            </div>
            <h3 style={{
              fontFamily: "var(--mm-font-serif)", fontSize: 28, fontWeight: 500,
              lineHeight: 1.15, margin: 0, color: "var(--mm-near-black)",
              letterSpacing: "-0.005em"
            }}>
              For the ones who always want a seat.
            </h3>
            <div style={{
              fontFamily: "var(--mm-font-sans)", fontSize: 13,
              color: "var(--mm-warm-gray)", marginTop: 10, lineHeight: 1.5
            }}>
              Unlimited alerts, multiple zip codes, and the waitlist — so you're never the one who finds out Sunday already filled.
            </div>
          </div>

          <hr style={{ border: 0, height: 1, background: "rgba(154,122,0,0.18)", margin: "4px 0" }} />

          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 14, flex: 1 }}>
            {PREMIUM_FEATURES.map(f => (
              <li key={f.t} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <span style={{
                  color: f.highlight ? "#9A7A00" : "var(--mm-kelly-green)",
                  marginTop: 3, flexShrink: 0
                }}>
                  {f.highlight ? <span style={{ fontSize: 14, lineHeight: 1 }}>★</span> : <IconCheck size={15} />}
                </span>
                <div>
                  <div style={{
                    fontFamily: "var(--mm-font-sans)", fontSize: 14.5,
                    fontWeight: f.highlight ? 600 : 500,
                    color: "var(--mm-near-black)", lineHeight: 1.35
                  }}>
                    {f.t}
                  </div>
                  <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 12.5, color: "var(--mm-warm-gray)", marginTop: 3, lineHeight: 1.45 }}>
                    {f.b}
                  </div>
                </div>
              </li>
            ))}
          </ul>

          <div style={{
            marginTop: 6, paddingTop: 18, borderTop: "1px solid rgba(154,122,0,0.18)",
            fontFamily: "var(--mm-font-sans)", fontSize: 12, color: "#9A7A00",
            letterSpacing: "0.04em", fontWeight: 500
          }}>
            Pricing announced at launch · <span style={{ color: "var(--mm-near-black)" }}>free for every beta member for 3+ months</span>
          </div>
        </article>
      </div>

      <div style={{
        textAlign: "center", marginTop: 32,
        fontFamily: "var(--mm-font-sans)", fontSize: 13,
        color: "var(--mm-warm-gray)", maxWidth: 560, marginLeft: "auto", marginRight: "auto"
      }}>
        Every beta member gets 3 months of Premium free. <a href="#founding" style={{ color: "var(--mm-kelly-green)", fontWeight: 500, textDecoration: "none", borderBottom: "1px solid currentColor" }}>See the beta rewards →</a>
      </div>
    </div>

    <style>{`
      @media (max-width: 760px) {
        .tiers__grid { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { Tiers });