const MEMBER_HUB_URL = "https://www.heylo.com/login?redirect=https%3A%2F%2Fwww.heylo.com%2FmyEvents";

const { Card, Tile, Badge, Divider, Button } = window.TheMahjClubsDesignSystem_b7bc49;

function MembershipHero() {
  const frames = ["stack-1.webp", "stack-2.webp", "stack-3.webp", "stack-4.webp", "stack-5.webp"];
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI(n => (n + 1) % frames.length), 750);
    return () => clearInterval(t);
  }, []);
  const jump = id => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: "smooth" }); };
  return (
    <section className="tmc-hero" style={{ background: "var(--tmc-emerald)", textAlign: "center", padding: "44px 24px 84px", overflow: "hidden" }}>
      <div style={{ position: "relative", width: "min(440px, 78vw)", margin: "0 auto" }}>
        {frames.map((f, idx) => (
          <img key={f} src={"assets/imagery/membership-stack/" + f} alt="Snapshots from the club"
            style={idx === 0
              ? { width: "100%", display: "block", opacity: idx === i ? 1 : 0 }
              : { width: "100%", display: "block", position: "absolute", inset: 0, opacity: idx === i ? 1 : 0 }} />
        ))}
        <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", zIndex: 2, textAlign: "center", width: "max-content", maxWidth: "94vw" }}>
          <h1 className="tmc-mem-script" style={{ margin: 0, fontFamily: "var(--font-script)", fontWeight: 400, lineHeight: 1, color: "#FFFFFF", fontSize: "clamp(56px, 8.5vw, 118px)", whiteSpace: "nowrap", textShadow: "0 2px 26px rgba(24,69,56,.4)" }}>Join the Club</h1>
          <div style={{ marginTop: 20, display: "flex", gap: 12, justifyContent: "center" }} className="tmc-btnrow">
            <Button size="lg" onClick={() => jump("membership-pricing")}>Join now</Button>
            
          </div>
        </div>
      </div>
    </section>
  );
}

function Membership({ go, page }) {
  const [accepted, setAccepted] = React.useState({});
  const [mates, setMates] = React.useState({});
  const [household, setHousehold] = React.useState({});
  const mateLinks = {"Mahj-Pro Membership":"https://buy.stripe.com/14A3cwb8j2vA25uap95wJ34","The Monthly Mahjer":"https://buy.stripe.com/3cI14oekv8TYbG49l55wJ36","The Snowbird Bam Mahj-Pro":"https://buy.stripe.com/8x2cN6a4f8TYfWk1SD5wJ35"};
  const joinMembership = tier => {
    if (!accepted[tier.name] || (mates[tier.name] && !household[tier.name])) return;
    window.open(mates[tier.name] ? mateLinks[tier.name] : tier.join, "_blank", "noopener,noreferrer");
  };
  const mateBox = (name, price) => (
    <div style={{ borderTop: "var(--rule)", marginTop: 24, paddingTop: 20, textAlign: "left" }}>
      <h4 style={{ ...tmcDisplay, fontSize: 24, color: "var(--tmc-burgundy)", margin: 0 }}>Mahj Mates</h4>
      <p style={{ fontSize: 14, lineHeight: 1.6 }}>Have a mate at home who loves mahjong? Add them to your membership so they can enjoy the same membership privileges without using your guest passes. Available only to mates living in the same household. An active main membership is required.</p>
      <label style={{ display: "flex", gap: 10, fontSize: 14, lineHeight: 1.6 }}><input type="checkbox" checked={!!mates[name]} onChange={e => setMates(p => ({ ...p, [name]: e.target.checked }))} /><span>Add a Mahj Mate — <b>{price}</b></span></label>
      {mates[name] && <label style={{ display: "flex", gap: 10, fontSize: 13, lineHeight: 1.6, marginTop: 12 }}><input type="checkbox" required checked={!!household[name]} onChange={e => setHousehold(p => ({ ...p, [name]: e.target.checked }))} /><span>I confirm that my Mahj Mate lives in my household and understand that their add-on is valid only while my main membership remains active.</span></label>}
    </div>
  );
  const acknowledge = (name, checked) => setAccepted(previous => ({ ...previous, [name]: checked }));
  const shared = ["All catered Socials, Drop-Ins & Open Play", "Pop-up events at no extra cost", "Reduced fees on skills clinics", "4 free monthly guest passes", "Unlimited free guests at Open Play", "Members-only events", "Exclusive member swag", "15% off merchandise (exclusions apply)"];
  const tiers = [
    { name: "Mahj-Pro Membership", price: "$1,695", per: "per year", best: true, join: "https://buy.stripe.com/cNi3cwgsD2vA6lK8h15wI11", note: "For the avid player who wants to play whenever and as often as they can. Unlimited access for 12 months — all catered Socials, Drop-Ins, Open Play, and pop-up events at no extra cost, plus reduced fees on skills clinics, 4 free monthly guest passes, unlimited free guests to Open Play, members-only events, exclusive member swag, and 15% off merchandise (exclusions apply).", tile: "rich-symbol" },
    { name: "The Monthly Mahjer", price: "$195", per: "per month · 3-month commitment", best: false, join: "https://buy.stripe.com/5kQbJ290bfim4dC40L5wJ2J", note: "All the Mahj-Pro benefits — unlimited Socials, Drop-Ins, Open Play, 4 free monthly guest passes, exclusive member swag, and 15% off merchandise (exclusions apply) — paid monthly. An initial 3-month commitment is required. After the first 3 months, cancel with 30 days' notice.", tile: "flower2" },
    { name: "The Snowbird Bam Mahj-Pro", price: "$895", per: "for 6 months", best: false, join: "https://buy.stripe.com/aFa8wQdgr6LQdOceFp5wI15", note: "For the avid seasonal player who can't commit to the full year. Six months of unlimited access with all the Mahj-Pro benefits — Socials, Drop-Ins, Open Play, 4 free monthly guest passes, exclusive member swag, and 15% off merchandise (exclusions apply).", tile: "palm-sun" },
  ];
  const stats = [
    { big: "100+", label: "Mahjong socials throughout the membership year" },
    { big: "Catered", label: "Meals, snacks & drinks provided at socials" },
    { big: "4", label: "Free guest passes every month" },
    { big: "15%", label: "Off merchandise (exclusions apply)" },
  ];
  return (
    <main style={{ fontFamily: "var(--font-body)", color: "var(--text-body)" }}>
      <TmcNav go={go} page={page} />
      <MembershipHero />

      {/* ---- Sell first: community & benefits ---- */}
      <section id="membership-benefits" style={{ padding: "84px 96px 0", textAlign: "center" }}>
        <div style={{ ...tmcEyebrow, color: "var(--tmc-raspberry)" }}>Where community meets mahjong</div>
        <h2 style={{ ...tmcDisplay, fontSize: 46, lineHeight: 1.02, color: "var(--text-display)", margin: "14px 0 0" }}>More than a membership</h2>
        <div style={{ fontFamily: "var(--font-script)", fontSize: 34, color: "var(--tmc-emerald)", marginTop: 8 }}>laughter, camaraderie, and lots of "mahjong!"</div>
        <p style={{ fontSize: 15, lineHeight: 1.65, maxWidth: 640, margin: "20px auto 0" }}>
          The club welcomes members and guests into a beautiful space dedicated to connection, conversation, and the shared joy of mahjong — bringing people together across generations and backgrounds, whether you're in your 20s, an empty nester, or anywhere in between.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,minmax(0,1fr))", gap: 20, marginTop: 44, maxWidth: 1040, marginLeft: "auto", marginRight: "auto" }}>
          {stats.map(x => (
            <Card key={x.big} variant="tile" tilt style={{ textAlign: "center", height: "100%", boxSizing: "border-box" }}>
              <div style={{ ...tmcDisplay, fontSize: 48, lineHeight: 1, color: "var(--tmc-raspberry)" }}>{x.big}</div>
              <p style={{ fontSize: 15, lineHeight: 1.5, margin: "10px 0 0" }}>{x.label}</p>
            </Card>
          ))}
        </div>
        <p style={{ fontSize: 14, lineHeight: 1.6, maxWidth: 560, margin: "24px auto 0", color: "var(--tmc-olive)" }}>
          Plus pop-up events through the year in partnership with local businesses, and a sense of belonging to a community that shares the game you love.
        </p>
      </section>

      {/* ---- Club life reel ---- */}
      <section data-no-reveal style={{ marginTop: 76, padding: "0 48px" }}>
        <video autoPlay muted loop playsInline preload="auto"
          style={{ width: "100%", display: "block", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-card)" }}>
          <source src="assets/video/membership-reel.mp4" type="video/mp4" />
        </video>
      </section>

      {/* ---- Everything that comes with the key ---- */}
      <section style={{ padding: "56px 96px 76px", maxWidth: 860, margin: "0 auto", boxSizing: "border-box" }}>
        <Card padding={28}>
          <div style={{ ...tmcEyebrow, color: "var(--tmc-raspberry)", textAlign: "center" }}>Every membership includes</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 28px", marginTop: 16 }}>
            {shared.map(x => (
              <div key={x} style={{ display: "flex", gap: 10, fontSize: 14, alignItems: "baseline" }}>
                <span style={{ color: "var(--tmc-raspberry)" }}>·</span><span>{x}</span>
              </div>
            ))}
          </div>
        </Card>
      </section>

      {/* ---- Then the ask: pricing ---- */}
      <section id="membership-pricing" data-no-reveal style={{ position: "relative", clipPath: "inset(0)", padding: "76px 96px 84px" }}>
        <div aria-hidden="true" style={{ position: "fixed", top: 0, left: 0, width: "100vw", height: "100vh", zIndex: -1, backgroundImage: "url('assets/imagery/pattern-pinstripe-paper.jpg')", backgroundSize: "1100px auto", backgroundRepeat: "repeat", backgroundPosition: "center" }}></div>
        <h2 style={{ ...tmcDisplay, fontSize: 40, color: "var(--text-display)", textAlign: "center", margin: 0 }}>Choose your seat</h2>
        {(() => {
          const annual = tiers[0];
          const rest = tiers.slice(1);
          return (
            <React.Fragment>
              <Card variant="soft" frame tilt padding={44} style={{ textAlign: "center", maxWidth: 760, margin: "34px auto 0" }}>
                <Badge tone="butter">Best value · most popular</Badge>
                <h3 style={{ ...tmcDisplay, fontSize: 36, margin: "16px 0 0", color: "var(--tmc-burgundy)" }}>{annual.name}</h3>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "center", gap: 12, marginTop: 12, flexWrap: "wrap" }}>
                  <div style={{ ...tmcDisplay, fontSize: 64, lineHeight: 1, color: "var(--tmc-raspberry)" }}>{annual.price}</div>
                  <div style={{ ...tmcEyebrow, fontSize: 10, opacity: .75 }}>{annual.per}</div>
                </div>
                <div style={{ fontFamily: "var(--font-script)", fontSize: 28, color: "var(--tmc-emerald)", marginTop: 10 }}>unlimited play, all year long</div>
                <p style={{ fontSize: 15, lineHeight: 1.55, margin: "14px auto 0", maxWidth: 460 }}>{annual.note}</p>
                {mateBox(annual.name, "$200/year")}
                <label style={{ display: "flex", gap: 10, alignItems: "flex-start", textAlign: "left", fontSize: 13, lineHeight: 1.6, maxWidth: 460, margin: "20px auto 0" }}>
                  <input type="checkbox" required checked={!!accepted[annual.name]} onChange={e => acknowledge(annual.name, e.target.checked)} style={{ marginTop: 4, flexShrink: 0, accentColor: "var(--tmc-raspberry)" }} />
                  <span>I understand that Mahj Pro Membership is a <b>12-month commitment</b>.</span>
                </label>
                <div style={{ marginTop: 24, maxWidth: 340, margin: "24px auto 0" }}><Button size="lg" fullWidth disabled={!accepted[annual.name] || (mates[annual.name] && !household[annual.name])} onClick={() => joinMembership(annual)}>{annual.join ? "Join for the year" : "Inquire to join"}</Button></div>
              </Card>
              <div style={{ ...tmcEyebrow, color: "var(--tmc-olive)", textAlign: "center", marginTop: 44 }}>Prefer a different pace?</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2,minmax(0,1fr))", gap: 20, marginTop: 18, maxWidth: 820, marginLeft: "auto", marginRight: "auto", alignItems: "stretch" }}>
                {rest.map(t => (
                  <Card key={t.name} variant="tile" tilt style={{ textAlign: "center", height: "100%", boxSizing: "border-box" }}>
                    <Tile name={t.tile} size={80} assetsBase="assets/tiles" />
                    <h3 style={{ ...tmcDisplay, fontSize: 23, margin: "12px 0 0", color: "var(--text-display)" }}>{t.name}</h3>
                    <div style={{ ...tmcDisplay, fontSize: 36, marginTop: 8, color: "var(--tmc-raspberry)" }}>{t.price}</div>
                    <div style={{ ...tmcEyebrow, fontSize: 9, marginTop: 6, opacity: .75 }}>{t.per}</div>
                    <p style={{ fontSize: 15, lineHeight: 1.55, margin: "10px 0 0" }}>{t.note}</p>
                    {mateBox(t.name, t.name === "The Monthly Mahjer" ? "$20/month · same 3-month commitment and cancellation terms" : "$100 for 6 months")}
                    <label style={{ display: "flex", gap: 10, alignItems: "flex-start", textAlign: "left", fontSize: 13, lineHeight: 1.6, marginTop: 20 }}>
                      <input type="checkbox" required checked={!!accepted[t.name]} onChange={e => acknowledge(t.name, e.target.checked)} style={{ marginTop: 4, flexShrink: 0, accentColor: "var(--tmc-raspberry)" }} />
                      {t.name === "The Monthly Mahjer"
                        ? <span>I understand that The Monthly Mahjer requires an initial <b>3-month commitment</b> and I authorize recurring monthly billing of <b>$195/month</b>. After the first 3 months, I may cancel with 30 days' notice.</span>
                        : <span>I understand that the Snowbird Bam is a <b>6-month commitment</b>.</span>}
                    </label>
                    <div style={{ marginTop: 16 }}><Button fullWidth variant="outline" disabled={!accepted[t.name] || (mates[t.name] && !household[t.name])} onClick={() => joinMembership(t)}>{t.join ? "Join" : "Inquire to join"}</Button></div>
                  </Card>
                ))}
              </div>
            </React.Fragment>
          );
        })()}
      </section>

      {/* ---- Member hub (already a member) ---- */}
      <section id="member-hub" style={{ marginTop: 0, backgroundColor: "var(--tmc-emerald)", backgroundImage: "linear-gradient(rgba(24,69,56,.65), rgba(24,69,56,.65)), url('assets/textures/paper-cream.png')", backgroundBlendMode: "normal, soft-light", backgroundSize: "auto, 560px auto", padding: "84px 24px", textAlign: "center" }}>
        <div style={{ ...tmcEyebrow, color: "var(--tmc-butter)" }}>Already a member?</div>
        <h2 style={{ ...tmcDisplay, fontSize: 46, lineHeight: 1, color: "var(--tmc-cream)", margin: "14px 0 0" }}>The Member Hub</h2>
        <div style={{ fontFamily: "var(--font-script)", fontSize: 36, color: "var(--tmc-blush)", marginTop: 8 }}>your seat is saved</div>
        <p style={{ fontSize: 15, lineHeight: 1.6, margin: "16px auto 0", maxWidth: 520, color: "var(--tmc-cream)" }}>
          Member events, RSVPs, club chat, and announcements all live in the Member Hub — sign in with the email on your membership.
        </p>
        <div style={{ marginTop: 26 }}>
          <Button size="lg" className="tmc-btn-cream" onClick={() => window.open(MEMBER_HUB_URL, "_blank")}>Sign in to the Member Hub</Button>
        </div>
      </section>
      <section style={{ padding: "72px 96px 0", display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 20, alignItems: "stretch" }}>
        {[
          { tile: "flower2", title: "Events & RSVPs", copy: "See every social, drop-in, and lesson on the member calendar and grab your seat in one tap." },
          { tile: "themahj", title: "Club chat & announcements", copy: "Club news, last-minute openings, and the group chat where the table talk continues." },
          { tile: "key", title: "Your membership", copy: "Guest passes, member pricing, and members-only events — everything that comes with your key." },
        ].map(x => (
          <Card key={x.title} variant="tile" tilt style={{ textAlign: "center", height: "100%", boxSizing: "border-box" }}>
            <Tile name={x.tile} size={96} assetsBase="assets/tiles" />
            <h3 style={{ ...tmcDisplay, fontSize: 22, color: "var(--text-display)", margin: "12px 0 0" }}>{x.title}</h3>
            <p style={{ fontSize: 15, lineHeight: 1.55, margin: "8px 0 0" }}>{x.copy}</p>
          </Card>
        ))}
      </section>
      <section style={{ padding: "64px 96px 0" }}>
        <Card variant="soft" frame padding={44} style={{ textAlign: "center", maxWidth: 860, margin: "0 auto", boxSizing: "border-box" }}>
          <div style={{ ...tmcEyebrow, color: "var(--tmc-raspberry)" }}>New here?</div>
          <div style={{ fontFamily: "var(--font-script)", fontSize: 38, color: "var(--tmc-burgundy)", marginTop: 10 }}>your invite is waiting</div>
          <p style={{ fontSize: 15, lineHeight: 1.6, maxWidth: 480, margin: "14px auto 0" }}>
            When you become a member, your Member Hub invite arrives by email — accept it, download the Heylo app from heylo.com, and you're at the table. Didn't get yours? Write to us and we'll resend it.
          </p>
          <div style={{ marginTop: 22, display: "flex", gap: 12, justifyContent: "center" }} className="tmc-btnrow">
            <Button size="lg" onClick={() => { const el = document.getElementById("membership-pricing"); if (el) el.scrollIntoView({ behavior: "smooth" }); }}>See membership options</Button>
            <Button size="lg" variant="outline" onClick={() => go("contact")}>Contact the club</Button>
          </div>
        </Card>
      </section>
      <InstagramFeed />
      <TmcFooter go={go} />
    </main>
  );
}
Object.assign(window, { Membership });