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

const REGISTRATION_OPEN = true; // Spring 2027 registration is open

// Native standings table fed by /api/standings (proxy of the league manager's
// public feed). Julia keeps entering scores in her app; this is read-only.
function StandingsTable() {
  const [data, setData] = React.useState(null);
  const [failed, setFailed] = React.useState(false);
  React.useEffect(() => {
    fetch("/api/standings").then(r => r.json()).then(j => {
      if (!j.ok || !j.standings || !j.standings.length) throw new Error("empty");
      setData(j);
    }).catch(() => setFailed(true));
  }, []);
  const th = { fontFamily: "var(--font-body)", fontSize: 10, fontWeight: 500, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--tmc-olive)", textAlign: "left", padding: "12px 14px", borderBottom: "1px solid var(--tmc-emerald)" };
  const td = { fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-body)", padding: "13px 14px", borderBottom: "var(--rule)" };
  if (failed) return (
    <Card padding={40} style={{ marginTop: 28, textAlign: "center" }}>
      <p style={{ fontSize: 15, lineHeight: 1.6, margin: 0 }}>Standings are updating — view them on the <a href="https://pmc-league-manager-ivory.vercel.app/league" target="_blank" rel="noreferrer" style={{ color: "var(--tmc-raspberry)" }}>league page</a>.</p>
    </Card>
  );
  if (!data) return <div style={{ textAlign: "center", padding: "44px 0", fontSize: 13, color: "var(--tmc-olive)" }}>Tallying the tiles…</div>;
  return (
    <div style={{ maxWidth: 880, margin: "28px auto 0" }}>
      <Card padding={0} style={{ overflow: "hidden" }}>
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 560 }}>
            <thead>
              <tr>
                <th style={th}>Rank</th>
                <th style={th}>Team</th>
                <th style={{ ...th, textAlign: "center" }}>Played</th>
                <th style={{ ...th, textAlign: "center" }}>W</th>
                <th style={{ ...th, textAlign: "center" }}>L</th>
                <th style={{ ...th, textAlign: "center" }}>League Pts</th>
                <th style={{ ...th, textAlign: "right" }}>Match Pts</th>
              </tr>
            </thead>
            <tbody>
              {data.standings.map((t, i) => (
                <tr key={t.teamName} style={{ background: i % 2 ? "var(--tmc-cream)" : "transparent" }}>
                  <td style={{ ...td, fontFamily: "var(--font-display)", fontSize: 19, color: i < 3 ? "var(--tmc-raspberry)" : "var(--tmc-burgundy)", width: 60 }}>{t.rank}</td>
                  <td style={{ ...td, fontFamily: "var(--font-display)", fontSize: 17, color: "var(--tmc-burgundy)" }}>{t.teamName}</td>
                  <td style={{ ...td, textAlign: "center" }}>{t.matchesPlayed}</td>
                  <td style={{ ...td, textAlign: "center" }}>{t.wins}</td>
                  <td style={{ ...td, textAlign: "center" }}>{t.losses}</td>
                  <td style={{ ...td, textAlign: "center" }}>{t.leaguePoints}</td>
                  <td style={{ ...td, textAlign: "right", fontWeight: 600 }}>{t.totalMatchPoints}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
      <div style={{ textAlign: "center", marginTop: 14, fontSize: 14, color: "var(--tmc-olive)" }}>
        Updated live from league scoring · <a href="https://pmc-league-manager-ivory.vercel.app/league" target="_blank" rel="noreferrer" style={{ color: "var(--tmc-raspberry)" }}>full schedule & match results →</a>
      </div>
    </div>
  );
}

function League({ go, page }) {
  const overview = [
    ["16-Week Season", "League play for spring begins January 18th, 2027 and runs through mid-May of 2027 with an end-of-season party for all league members."],
    ["Team Format", "Your choice of 2–6 players where each week 2 players represent your team in one scheduled match, allowing for substitutes and greater scheduling flexibility. Don't have a team? No problem — register as a single and we will match you with a team!"],
    ["Weekly Play", "One match per week. Each match includes four games played in a two-hour format. Matches are monitored and scored by concierge staff for ease of play!"],
  ];
  const experience = ["Automatic mahjong tables", "Standard tiles for a level playing field", "Mahjong concierge on-site", "Structured scoring & leaderboard apps", "Professionally managed gameplay", "Elevated Scottsdale club atmosphere", "Snacks & beverages provided", "Prizes for 1st, 2nd, and 3rd place", "Birds of a Feather inter-club league access — compete with clubs across the Valley"];
  const reg = [
    ["Member Team", "$395", "per team", "Create your own team of 2–6 players and compete together all season.", "https://book.stripe.com/14AcN64JV9Y239yeFp5wJ30"],
    ["Non-Member Team", "$495", "per team", "Create your own team of 2–6 players and compete together all season.", "https://book.stripe.com/aFa4gA6S3gmq5hG54P5wJ31"],
    ["Member Individual", "$125", "per player", "Register individually — we'll thoughtfully place you onto a team.", "https://book.stripe.com/aFadRafoz6LQ5hG8h15wJ32"],
    ["Non-Member Individual", "$150", "per player", "Register individually — we'll thoughtfully place you onto a team.", "https://book.stripe.com/5kQ28s1xJ6LQ5hGgNx5wJ33"],
  ];
  const toReg = () => { const el = document.getElementById("league-registration"); if (el) el.scrollIntoView({ behavior: "smooth" }); };
  return (
    <main style={{ fontFamily: "var(--font-body)", color: "var(--text-body)" }}>
      <TmcNav go={go} page={page} />
      <section style={{ backgroundImage: "linear-gradient(rgba(30,10,14,.42), rgba(30,10,14,.52)), url('assets/imagery/league-hero.jpg')", backgroundSize: "cover", backgroundAttachment: "fixed", backgroundPosition: "center", color: "var(--tmc-cream)", padding: "84px 24px 96px", textAlign: "center" }} className="tmc-stagger tmc-hero">
        <div className="tmc-paper-note" style={{ display: "inline-block", backgroundImage: "url('assets/imagery/paper-note.webp')", backgroundSize: "100% 100%", backgroundRepeat: "no-repeat", padding: "104px 110px 128px", maxWidth: 700, filter: "drop-shadow(0 20px 40px rgba(20,8,10,.35))", color: "var(--text-body)" }}>
          <div style={{ ...tmcEyebrow, fontSize: 10, color: "var(--tmc-raspberry)" }}>Competitive Spring League 2027</div>
          <h1 style={{ ...tmcDisplay, fontSize: 62, lineHeight: .95, margin: "18px 0 0", color: "var(--tmc-burgundy)" }}>Unlock your seat</h1>
          <div style={{ fontFamily: "var(--font-script)", fontSize: 48, color: "var(--tmc-raspberry)", marginTop: 4 }}>at the table</div>
          <p style={{ fontSize: 15, lineHeight: 1.55, maxWidth: 480, margin: "20px auto 0" }}>
            A structured 16-week competitive season for experienced NMJL players seeking consistent weekly play, team competition, and an elevated club experience. League play begins the week of January 18th and runs through mid-May 2027.
          </p>
          <div style={{ marginTop: 26, display: "flex", gap: 12, justifyContent: "center" }} className="tmc-btnrow">
            {REGISTRATION_OPEN
              ? <Button size="lg" onClick={toReg}>Register for Spring 2027</Button>
              : <Button size="lg" onClick={toReg}>Register for Spring 2027</Button>}
          </div>
        </div>
      </section>
      {/* Split-screen: pinned looping vertical video left, overview content scrolls right.
          Collapses to stacked video-then-content on mobile (see .tmc-splitvid CSS). */}
      <section data-no-reveal style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.2fr)", alignItems: "start" }}>
        <div className="tmc-splitvid" style={{ position: "sticky", top: 0, height: "100vh", boxSizing: "border-box", padding: "0 8px 0 28px", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <video autoPlay muted loop playsInline preload="auto"
            style={{ height: "78vh", maxWidth: "100%", aspectRatio: "9 / 16", objectFit: "cover", display: "block", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lift)" }}>
            <source src="assets/video/league-split.mp4" type="video/mp4" />
          </video>
        </div>
        <div style={{ padding: "72px 56px 96px 40px", position: "relative" }}>
          <FloatTile name="key" size={92} rotate={10} speed={0.12} style={{ right: "5%", top: 30 }} />
          <FloatTile name="flower1" size={92} rotate={-9} speed={0.08} style={{ right: "8%", bottom: 110 }} />
          <div>
            <h2 style={{ ...tmcDisplay, fontSize: 40, color: "var(--text-display)", margin: 0 }}>League overview</h2>
            <p style={{ fontSize: 15, lineHeight: 1.55, maxWidth: 520, margin: "12px 0 0", color: "var(--tmc-olive)" }}>
              For players who already understand NMJL rules and are comfortable with independent, faster-paced gameplay while forming their mahjong community.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 26 }}>
              {overview.map(([t, c]) => (
                <Card key={t} variant="tile"><h3 style={{ ...tmcDisplay, fontSize: 23, color: "var(--text-display)", margin: 0 }}>{t}</h3><p style={{ fontSize: 15, lineHeight: 1.55, margin: "10px 0 0" }}>{c}</p></Card>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(2,minmax(0,1fr))", gap: 16 }}>
            <Card variant="soft" style={{ textAlign: "center" }}>
              <div style={{ ...tmcEyebrow, fontSize: 9, color: "var(--tmc-burgundy)" }}>Monday Day Match</div>
              <div style={{ ...tmcDisplay, fontSize: 30, color: "var(--tmc-burgundy)", marginTop: 10 }}>11:00 – 1:00</div>
              <div style={{ fontSize: 11, marginTop: 6, color: "var(--tmc-burgundy)" }}>Mondays · one match a week</div>
            </Card>
            <Card variant="soft" style={{ textAlign: "center" }}>
              <div style={{ ...tmcEyebrow, fontSize: 9, color: "var(--tmc-burgundy)" }}>Tuesday Night Match</div>
              <div style={{ ...tmcDisplay, fontSize: 30, color: "var(--tmc-burgundy)", marginTop: 10 }}>5:30 – 7:30</div>
              <div style={{ fontSize: 11, marginTop: 6, color: "var(--tmc-burgundy)" }}>Tuesdays · one match a week</div>
            </Card>
            <Card variant="soft" style={{ textAlign: "center", gridColumn: "1 / -1" }}>
              <div style={{ ...tmcEyebrow, fontSize: 9, color: "var(--tmc-burgundy)" }}>Leaderboard</div>
              <p style={{ fontSize: 15, lineHeight: 1.55, margin: "8px 0 0", color: "var(--tmc-burgundy)" }}>Weekly standings contribute to a cumulative leaderboard throughout the season.</p>
            </Card>
          </div>

          <Card padding={26} style={{ marginTop: 16 }}>
            <div style={{ ...tmcEyebrow, color: "var(--tmc-raspberry)" }}>The league experience</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 22px", marginTop: 12 }}>
              {experience.map(x => (
                <div key={x} style={{ display: "flex", gap: 8, fontSize: 12, alignItems: "baseline" }}>
                  <span style={{ color: "var(--tmc-raspberry)" }}>·</span><span>{x}</span>
                </div>
              ))}
            </div>
          </Card>

          <div style={{ marginTop: 56, textAlign: "center", background: "var(--tmc-olive)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-card)", overflow: "hidden" }}>
            <div style={{ margin: 7, padding: 29, border: "1px solid rgba(238,231,224,.45)", borderRadius: "calc(var(--radius-md) - 5px)" }}>
              <div style={{ fontFamily: "var(--font-script)", fontSize: 34, color: "var(--tmc-butter)" }}>End-of-Season Party</div>
              <p style={{ fontSize: 15, lineHeight: 1.55, maxWidth: 460, margin: "12px auto 0", color: "var(--tmc-cream)" }}>
                Top teams advance to championship rounds with final standings, awards, and recognition. All league players are invited to the end-of-season party for final games, awards, and celebration.
              </p>
            </div>
          </div>

          <div id="league-registration" style={{ marginTop: 84 }}>
            {REGISTRATION_OPEN ? (
              <React.Fragment>
                <h2 style={{ ...tmcDisplay, fontSize: 40, color: "var(--text-display)", margin: 0 }}>League registration</h2>
                <p style={{ fontSize: 15, margin: "10px 0 0", color: "var(--tmc-olive)", maxWidth: 520 }}>Member pricing is available to active Mahj-Pro, Social, and Annual Drop-In members.</p>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(2,minmax(0,1fr))", gap: 16, marginTop: 26, alignItems: "stretch" }}>
                  {reg.map(([t, p, per, c, link]) => (
                    <Card key={t} tilt style={{ textAlign: "center" }}>
                      <div style={{ ...tmcEyebrow, fontSize: 9 }}>{t}</div>
                      <div style={{ ...tmcDisplay, fontSize: 38, color: "var(--tmc-raspberry)", marginTop: 10 }}>{p}</div>
                      <div style={{ fontSize: 10, color: "var(--tmc-olive)", marginTop: 4 }}>{per}</div>
                      <p style={{ fontSize: 15, lineHeight: 1.5, margin: "10px 0 0" }}>{c}</p>
                      <div style={{ marginTop: 14 }}><Button size="sm" fullWidth onClick={() => window.open(link, "_blank")}>Register</Button></div>
                    </Card>
                  ))}
                </div>
              </React.Fragment>
            ) : (
              <Card variant="soft" frame padding={42} style={{ textAlign: "center" }}>
                <div style={{ ...tmcEyebrow, fontSize: 10, color: "var(--tmc-burgundy)" }}>Fall 2026 League</div>
                <h2 style={{ ...tmcDisplay, fontSize: 34, lineHeight: 1.1, color: "var(--tmc-burgundy)", margin: "14px 0 0" }}>Registration is now closed</h2>
                <p style={{ fontSize: 15, lineHeight: 1.65, maxWidth: 460, margin: "16px auto 0", color: "var(--tmc-burgundy)" }}>
                  Thank you for the incredible response to our Fall League. Registration is now closed and teams are being finalized for the season.
                </p>
                <p style={{ fontSize: 15, lineHeight: 1.65, maxWidth: 460, margin: "12px auto 0", color: "var(--tmc-burgundy)" }}>
                  Spring League details will be announced soon, including dates, registration information, and league updates.
                </p>
                <div style={{ marginTop: 22, paddingTop: 18, borderTop: "1px solid rgba(78,21,32,.25)", fontSize: 13, color: "var(--tmc-burgundy)" }}>
                  Questions about league play? <a href="mailto:events@themahjclubs.com" style={{ color: "var(--tmc-raspberry)", fontWeight: 500 }}>events@themahjclubs.com</a>
                </div>
              </Card>
            )}
          </div>
        </div>
      </section>

      <section id="league-standings" style={{ padding: "80px 96px 0" }}>
        <h2 style={{ ...tmcDisplay, fontSize: 40, color: "var(--text-display)", textAlign: "center", margin: 0 }}>Fall League Standings</h2>
        <p style={{ fontSize: 15, lineHeight: 1.55, textAlign: "center", maxWidth: 520, margin: "12px auto 0", color: "var(--tmc-olive)" }}>
          Live team standings and weekly results, updated throughout the season.
        </p>
        <StandingsTable />
        <div style={{ maxWidth: 640, margin: "26px auto 0" }}>
          <Card variant="soft" padding={30} style={{ textAlign: "center" }}>
            <div style={{ ...tmcEyebrow, fontSize: 9, color: "var(--tmc-olive)" }}>League administration</div>
            <div style={{ ...tmcDisplay, fontSize: 26, color: "var(--tmc-burgundy)", marginTop: 8 }}>Staff Portal</div>
            <p style={{ fontSize: 15.5, lineHeight: 1.55, maxWidth: 420, margin: "8px auto 0", color: "var(--tmc-burgundy)" }}>
              Authorized league staff can sign in to manage teams, schedules, players, and scoring.
            </p>
            <div style={{ marginTop: 16 }}>
              <Button variant="outline" onClick={() => window.open("https://pmc-league-manager-ivory.vercel.app/login", "_blank")}>Staff login</Button>
            </div>
          </Card>
        </div>
      </section>
      <section style={{ padding: "64px 96px 0", textAlign: "center" }}>
        <Button size="lg" onClick={toReg}>{REGISTRATION_OPEN ? "Register for Spring 2027" : "Spring League Updates"}</Button>
      </section>
      <InstagramFeed />
      <TmcFooter go={go} />
    </main>
  );
}
Object.assign(window, { League });