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

function PolaroidCard({ name, bio, photo, tilt, width }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={"tmc-pola" + (open ? " tmc-open" : "")} onClick={() => setOpen(o => !o)}
      style={{ flex: "0 0 auto", width, boxSizing: "border-box", background: "var(--tmc-tile-white)", padding: "12px 12px 0", borderRadius: 4, boxShadow: "0 16px 34px rgba(30,10,14,.3)", transform: "rotate(" + tilt + "deg)", cursor: "pointer", scrollSnapAlign: "center" }}>
      <div style={{ position: "relative", overflow: "hidden" }}>
        <img className="tmc-pola-img" src={"assets/imagery/staff/" + photo} alt={name} style={{ width: "100%", aspectRatio: "3 / 4", height: "auto", objectFit: "cover", display: "block" }} />
        <div className="tmc-pola-bio" style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: "14px 18px", textAlign: "center" }}>
          <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--tmc-burgundy)", margin: 0 }}>{bio}</p>
        </div>
      </div>
      <div style={{ height: 56, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-script)", fontSize: 27, color: "var(--tmc-burgundy)" }}>{name}</div>
    </div>
  );
}

// Sticky horizontal instructor rail: the section pins while vertical scroll
// drives the row; ~4 cards visible at a time. Mobile falls back to swipe.
function InstructorRail({ instructors, go }) {
  const wrapRef = React.useRef(null);
  const trackRef = React.useRef(null);
  const [mobile] = React.useState(() => window.matchMedia("(max-width: 760px)").matches);
  React.useEffect(() => {
    if (mobile) return;
    const onScroll = () => {
      const wrap = wrapRef.current, track = trackRef.current;
      if (!wrap || !track) return;
      const total = wrap.offsetHeight - window.innerHeight;
      const p = Math.min(1, Math.max(0, -wrap.getBoundingClientRect().top / total));
      const max = Math.max(0, track.scrollWidth - track.parentElement.clientWidth);
      track.style.transform = "translateX(" + (-p * max) + "px)";
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    onScroll();
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, [mobile]);
  const cardW = mobile ? "72vw" : "calc((100vw - 96px - 72px) / 4)";
  const tilts = [-2.4, 1.8, -1.2, 2.6];
  const cards = instructors.map(([name, bio, photo], i) => (
    <PolaroidCard key={name} name={name} bio={bio} photo={photo} tilt={tilts[i % tilts.length]} width={cardW} />
  ));
  const applyLine = (
    <div style={{ textAlign: "center", marginTop: 24, fontSize: 14, color: "var(--tmc-olive)" }}>
      Interested in becoming a mahjong instructor? <a href="/contact" onClick={e => { e.preventDefault(); go("contact"); }} style={{ color: "var(--tmc-raspberry)" }}>Apply here</a>
    </div>
  );
  if (mobile) return (
    <section data-no-reveal data-no-px="true" style={{ padding: "64px 0 48px", marginTop: 72, backgroundImage: "linear-gradient(rgba(251,247,241,.72), rgba(251,247,241,.72)), url('assets/imagery/bg-glassblock.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}>
      <h2 style={{ ...tmcDisplay, fontSize: 42, color: "var(--text-display)", textAlign: "center", margin: 0 }}>Meet our instructors</h2>
      <div style={{ display: "flex", gap: 18, overflowX: "auto", padding: "32px 22px 10px", scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch" }}>
        {cards}
      </div>
      <div style={{ textAlign: "center", fontSize: 12, color: "var(--tmc-olive)", marginTop: 6 }}>swipe to meet everyone →</div>
      {applyLine}
    </section>
  );
  return (
    <section data-no-reveal data-no-px="true" ref={wrapRef} style={{ height: "300vh", position: "relative", marginTop: 84 }}>
      <div style={{ position: "sticky", top: 0, height: "100vh", display: "flex", flexDirection: "column", justifyContent: "center", overflow: "hidden", backgroundImage: "linear-gradient(rgba(251,247,241,.72), rgba(251,247,241,.72)), url('assets/imagery/bg-glassblock.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}>
        <h2 style={{ ...tmcDisplay, fontSize: 42, color: "var(--text-display)", textAlign: "center", margin: 0 }}>Meet our instructors</h2>
        <div style={{ overflow: "hidden", marginTop: 38, padding: "14px 48px" }}>
          <div ref={trackRef} style={{ display: "flex", gap: 24, willChange: "transform" }}>
            {cards}
          </div>
        </div>
        {applyLine}
      </div>
    </section>
  );
}

function Lessons({ go, page }) {
  const includes = ["Official 2026 NMJL card", "Exclusive, easy-to-understand Beginner Guide", "4:1 student-to-instructor ratio", "Gorgeous upscale space with automatic tables", "Flexible days, evenings & private options", "Meet other future players — build your community"];
  const instructors = [
    ["Heather", "Arizonan since 1999, proud mom of two, twenty years with Pi Beta Phi — plays, teaches, hikes, and dances.", "instr-heather.jpg"],
    ["Allison", "Native Phoenician and lifelong educator; sharing her love of mahjong felt like a natural next step.", "instr-allison.jpg"],
    ["Lindsey", "Longtime Arcadia local. Playing for three years — it was love at first Mahj!", "instr-lindsey.jpg"],
    ["Jill", "On her fourth card and slightly addicted. Loves travel, tennis, pickleball — and her three labradoodles.", "instr-jill.jpg"],
    ["Gwen", "Native Phoenician: fitness instructor, tennis player, double-black-diamond skier, thriller reader.", "instr-gwen.jpg"],
    ["Nikki", "Former attorney, now interior designer — brings a creative eye and strategic thinking to the table.", "instr-nikki.jpg"],
    ["Jen", "Minneapolis transplant and former high school Spanish teacher. Chases mahjong wins, golf birdies, and quilt perfection — tiles, clubs, and fabric are her perfect trifecta.", "instr-jen.jpg"],
    ["Jessica", "Tennessee-born, Arizonan for 22 years. Mom of four who loves the outdoors, travel, and hosting.", "instr-jessica.jpg"],
    ["Stephanie", "Indiana-born Sun Devil in financial services. Learned in 2024 and fell for the strategy — and the community.", "instr-stephanie.jpg"],
    ["Tina", "Phoenix native, realtor, and mom of two. Loves mahjong for the memory, the calm, and the connection.", "instr-tina.jpg"],
  ];
  return (
    <main style={{ fontFamily: "var(--font-body)", color: "var(--text-body)" }}>
      <TmcNav go={go} page={page} />
      <section style={{ backgroundImage: "linear-gradient(rgba(15,15,15,.34), rgba(15,15,15,.46)), url('assets/imagery/lessons-hero.jpg')", backgroundSize: "cover", backgroundAttachment: "fixed", backgroundPosition: "center 38%", color: "var(--tmc-cream)", padding: "150px 48px 160px", textAlign: "center" }} className="tmc-stagger tmc-hero">
        <div style={{ maxWidth: 720, margin: "0 auto" }}>
          <div style={{ ...tmcEyebrow, color: "var(--tmc-butter)" }}>Lessons</div>
          <h1 style={{ ...tmcDisplay, fontSize: 64, lineHeight: .95, margin: "14px 0 0", color: "var(--tmc-cream)" }}>Why learn with us?</h1>
          <div style={{ fontFamily: "var(--font-script)", fontSize: 42, color: "var(--tmc-blush)", marginTop: 8 }}>in 3 hours you'll be saying Mahjong!</div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.6, margin: "18px auto 0", maxWidth: 580, color: "var(--tmc-cream)", textShadow: "0 1px 6px rgba(30,10,14,.5)" }}>
            Three-hour sessions taught exclusively by our experienced, club-trained instructors. We review everything — the tiles, the suits, the rules of play, reading the NMJL card, dealing, the Charleston, and guided game play.
          </p>
        </div>
      </section>
      <section aria-label="Best of Phoenix recognition" style={{ padding: "26px 24px", background: "var(--tmc-tile-white)", borderBottom: "var(--rule)", textAlign: "center" }}>
        <a href="https://www.phoenixnewtimes.com/best-of-phoenix/2026/fun-and-games/best-place-to-learn-mahjong-40701561" target="_blank" rel="noopener noreferrer"
          style={{ display: "inline-flex", flexWrap: "wrap", alignItems: "center", justifyContent: "center", gap: "8px 18px", color: "var(--tmc-burgundy)", textDecoration: "none" }}>
          <span style={{ ...tmcEyebrow, color: "var(--tmc-raspberry)", fontSize: 10 }}>Phoenix New Times · Best of Phoenix 2026</span>
          <strong style={{ ...tmcDisplay, fontSize: 23, lineHeight: 1.2 }}>Voted Best Place to Learn Mahjong</strong>
          <span style={{ fontSize: 13, color: "var(--tmc-olive)", whiteSpace: "nowrap" }}>See the award →</span>
        </a>
      </section>
      <section style={{ position: "relative", display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: 52, padding: "64px 96px 56px", alignItems: "center", background: "var(--tmc-cream)" }}>
        <div className="tmc-paper-note" style={{ backgroundImage: "url('assets/imagery/paper-note.webp')", backgroundSize: "100% 100%", backgroundRepeat: "no-repeat", padding: "88px 72px 102px", filter: "drop-shadow(0 16px 32px rgba(20,8,10,.22))", transform: "rotate(-1.2deg)" }}>
          <div style={{ ...tmcEyebrow, color: "var(--tmc-raspberry)" }}>Every lesson includes</div>
          <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 10 }}>
            {includes.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>
          <div style={{ marginTop: 20, display: "flex", gap: 10 }} className="tmc-btnrow">
            <Button onClick={() => { const el = document.getElementById("lessons-schedule"); if (el) el.scrollIntoView({ behavior: "smooth" }); }}>Sign up below</Button>
            <Button variant="ghost" onClick={() => go("contact")}>Private lessons</Button>
          </div>
        </div>
        <div style={{ textAlign: "center" }}>
          <div style={{ display: "inline-block", transform: "rotate(6deg)", filter: "drop-shadow(0 14px 26px rgba(78,21,32,.28))" }}>
            <Tile name="themahj" size={168} assetsBase="assets/tiles" />
          </div>
          <div style={{ fontFamily: "var(--font-script)", fontSize: 34, color: "var(--tmc-raspberry)", marginTop: 20 }}>everything you need to get started</div>
          <p style={{ fontSize: 15, lineHeight: 1.55, maxWidth: 380, margin: "14px auto 0" }}>
            Interested in a private lesson or corporate event? Let us create a personal experience for you and your guests.
          </p>
        </div>
      </section>
      <section id="lessons-schedule" style={{ padding: "76px 96px 0" }}>
        <h2 style={{ ...tmcDisplay, fontSize: 42, color: "var(--text-display)", textAlign: "center", margin: 0 }}>Upcoming lessons & clinics</h2>
        <p style={{ fontSize: 15, lineHeight: 1.6, textAlign: "center", maxWidth: 520, margin: "14px auto 0", color: "var(--tmc-olive)" }}>
          Beginner lessons, Mahj 102, and Winning Strategies — pick a date and grab your seat.
        </p>
        <Card padding={0} style={{ marginTop: 34, maxWidth: 960, marginLeft: "auto", marginRight: "auto", overflow: "hidden" }}>
          <div style={{ height: "90vh", overflowY: "auto", padding: "10px 28px 24px", overscrollBehavior: "contain" }}>
            <ScheduleView lockCats={["Beginner", "Skills"]} groupUrl="https://api.leadconnectorhq.com/widget/group/bucBVoKduVYnQRsBtnMR" />
          </div>
          <div style={{ textAlign: "center", padding: "10px 0 12px", borderTop: "var(--rule)", fontSize: 14, color: "var(--tmc-olive)", background: "var(--tmc-cream)" }}>scroll for more dates ↓</div>
        </Card>
      </section>
      <InstructorRail instructors={instructors} go={go} />
      <section style={{ position: "relative", overflow: "hidden", marginTop: 0, backgroundColor: "var(--tmc-burgundy)", backgroundImage: "linear-gradient(rgba(78,21,32,.65), rgba(78,21,32,.65)), url('assets/textures/paper-cream.png')", backgroundBlendMode: "normal, soft-light", backgroundSize: "auto, 560px auto", padding: "185px 96px 92px" }}>
        <div aria-hidden="true" style={{ position: "absolute", top: 0, left: 0, right: 0, height: 156, backgroundImage: "url('assets/textures/lace-trim.png?v=3')", backgroundRepeat: "repeat-x", backgroundSize: "auto 156px", backgroundPosition: "top", pointerEvents: "none" }}></div>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.2fr) minmax(0,1fr)", gap: 56, alignItems: "center", maxWidth: 1040, margin: "0 auto" }}>
          <div>
            <div style={{ ...tmcEyebrow, color: "var(--tmc-butter)" }}>Gift certificates</div>
            <div style={{ fontFamily: "var(--font-script)", fontSize: 56, lineHeight: 1.1, color: "var(--tmc-blush)", marginTop: 10 }}>Gift the Experience</div>
            <p style={{ fontSize: 15, lineHeight: 1.65, margin: "16px 0 0", maxWidth: 460, color: "var(--tmc-cream)" }}>
              A beginner-lesson gift certificate — perfect for birthdays, holidays, hostess gifts, or anyone who has been wanting to learn. Includes the 3-hour lesson, NMJL card, and beginner guide.
            </p>
            <div style={{ marginTop: 26 }}><Button size="lg" className="tmc-btn-cream" onClick={() => { window.TMC_OPEN_PRODUCT = "gift"; go("shop"); }}>Purchase a gift certificate</Button></div>
          </div>
          <div style={{ justifySelf: "center", background: "var(--tmc-tile-white)", padding: 10, borderRadius: "var(--radius-sm)", transform: "rotate(3.5deg)", boxShadow: "0 18px 44px rgba(0,0,0,.35)" }}>
            <img src="assets/imagery/gift-team.jpg" alt="The Mahj Clubs team beneath the clubhouse chandelier" style={{ display: "block", width: "100%", maxWidth: 380, height: "auto", borderRadius: 2 }} />
          </div>
        </div>
      </section>
      <section style={{ backgroundImage: "linear-gradient(rgba(251,247,241,.62), rgba(251,247,241,.4)), url('assets/imagery/chandelier-detail.jpg')", backgroundSize: "cover", backgroundPosition: "center 30%", padding: "150px 48px 158px", textAlign: "center", color: "var(--tmc-burgundy)" }} className="tmc-hero">
        <div style={{ ...tmcEyebrow, color: "var(--tmc-raspberry)" }}>Your seat is waiting</div>
        <h2 style={{ ...tmcDisplay, fontSize: 52, lineHeight: .98, color: "var(--tmc-burgundy)", margin: "16px 0 0" }}>Come learn with us</h2>
        <div style={{ fontFamily: "var(--font-script)", fontSize: 38, color: "var(--tmc-olive)", marginTop: 10 }}>we'll save you a seat</div>
        <div style={{ marginTop: 30 }}><Button size="lg" onClick={() => go("calendar")}>Sign up on the calendar</Button></div>
      </section>
      <InstagramFeed />
      <TmcFooter go={go} />
    </main>
  );
}
Object.assign(window, { Lessons });