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

function Hero({ go }) {
  const [mobileHero] = React.useState(() => window.matchMedia("(max-width: 760px)").matches);
  return (
    <section className="tmc-stagger tmc-hero tmc-home-hero" style={{ position: "relative", overflow: "hidden", backgroundImage: "url('assets/imagery/hero-chandeliers-fade.png')", backgroundSize: "cover", backgroundPosition: "center right", backgroundColor: "var(--tmc-cream)", color: "var(--tmc-burgundy)", padding: "158px 48px 186px", textAlign: "left", display: "flex", alignItems: "center" }}>
      <video key={mobileHero ? "m" : "d"} className="tmc-hero-video" autoPlay muted loop playsInline preload="auto" poster="assets/imagery/hero-chandeliers-fade.png"
        onEnded={e => { e.currentTarget.currentTime = 0; e.currentTarget.play(); }}
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: mobileHero ? "center" : "center right", zIndex: 0, pointerEvents: "none" }}>
        <source src={mobileHero ? "assets/video/hero-mobile.mp4" : "assets/video/hero.mp4"} type="video/mp4" />
      </video>
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 1, background: "linear-gradient(90deg, rgba(251,247,241,.94) 0%, rgba(251,247,241,.74) 30%, rgba(251,247,241,.12) 58%, rgba(251,247,241,0) 78%), linear-gradient(rgba(251,247,241,.16), rgba(251,247,241,.16))" }}></div>
      <div style={{ position: "relative", zIndex: 2, maxWidth: 660, marginLeft: "6%" }}>
        <h1 className="tmc-oneline" style={{ ...tmcDisplay, fontSize: 72, lineHeight: .95, margin: "20px 0 0", color: "var(--tmc-burgundy)" }}>
          Learn, Play, <span className="tmc-belong" style={{ fontFamily: "var(--font-script)", fontSize: 74, color: "var(--tmc-emerald)", marginLeft: 14, textShadow: "0 1px 14px rgba(251,247,241,.85), 0 0 3px rgba(251,247,241,.7)" }}>belong</span>
        </h1>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.55, maxWidth: 440, margin: "24px 0 0", color: "var(--tmc-burgundy)" }}>
          Unlock the key to mahjong — the perfect place to play, laugh, and belong. Make new friends and join a community with friendly competition and connection.
        </p>
        <div style={{ marginTop: 32, display: "flex", gap: 12 }} className="tmc-btnrow">
          <Button size="lg" style={{ background: "var(--tmc-cream)", color: "var(--tmc-burgundy)", border: "1px solid var(--tmc-burgundy)" }} onClick={() => go("calendar")}>Play now</Button>
          <Button size="lg" onClick={() => go("membership")}>Become a member</Button>
        </div>
      </div>
    </section>
  );
}

function About({ go }) {
  return (
    <section style={{ position: "relative", backgroundColor: "var(--tmc-olive)", backgroundImage: "linear-gradient(rgba(91,106,76,.65), rgba(91,106,76,.65)), url('assets/textures/paper-cream.png')", backgroundBlendMode: "normal, soft-light", backgroundSize: "auto, 560px auto", padding: "88px 24px 200px", textAlign: "center" }}>
      <FloatTile name="martini" rotate={9} speed={0.14} style={{ right: "9%", bottom: 130 }} />
      <FloatTile name="wmn-face" rotate={-8} speed={0.07} style={{ left: "7%", top: 120 }} />
      <div style={{ maxWidth: 820, margin: "0 auto" }}>
        <div>
          <h2 style={{ fontFamily: "var(--font-body)", fontWeight: 500, fontSize: 40, letterSpacing: ".32em", textTransform: "uppercase", lineHeight: 1.1, color: "var(--tmc-cream)", margin: 0, paddingLeft: ".32em" }}>Ways to Play</h2>
          <div style={{ fontFamily: "var(--font-script)", fontSize: 30, color: "var(--tmc-burgundy)", marginTop: 12 }}>come, play, learn</div>
          <p style={{ fontSize: 15, lineHeight: 1.6, maxWidth: 620, margin: "20px auto 0", color: "var(--tmc-cream)" }}>
            New to the game? You'll want a lesson before joining organized play — we don't teach during Drop-ins, Socials, or Special Events. In three hours you'll be saying <span style={{ fontFamily: "var(--font-script)", fontSize: 22, color: "var(--tmc-butter)" }}>Mahjong!</span>
          </p>
          <div style={{ marginTop: 20 }}><Button className="tmc-btn-cream" onClick={() => go("lessons")}>See lessons</Button></div>
        </div>
      </div>
    </section>
  );
}

// Floating tile ornaments. Absolutely positioned inside a relative section;
// data-parallax drifts each at its own speed on scroll (rotation lives on an
// inner div so the parallax transform doesn't clobber it). Hidden on mobile.
function FloatTile({ name, size = 104, rotate = 0, speed = 0.12, style }) {
  return (
    <div className="tmc-float" data-parallax={speed} aria-hidden="true" style={{ position: "absolute", zIndex: 2, pointerEvents: "none", ...style }}>
      <div style={{ transform: `rotate(${rotate}deg)` }}>
        <Tile name={name} size={size} assetsBase="assets/tiles" />
      </div>
    </div>
  );
}

// Partners & clients marquee — real list from Julia's doc (Aug 2026).
// Logos live in assets/logos/partners/ (black, transparent). Orgs without a
// usable logo render as text wordmarks in the same strip.
const PARTNERS = [
  { img: "global-ambassador.png", alt: "The Global Ambassador" },
  { text: "Paradise Valley Country Club" },
  { img: "phoenix-childrens.png", alt: "Phoenix Children's" },
  { text: "Holland & Hart" },
  { img: "make-a-wish.png", alt: "Make-A-Wish Arizona" },
  { text: "The Comstock" },
  { img: "ypo.png", alt: "YPO" },
  { text: "HonorHealth NICU" },
  { img: "camelback-flowershop.png", alt: "Camelback Flowershop" },
  { text: "Arizona Humane Society" },
  { img: "goodmans.png", alt: "Goodmans" },
  { text: "Gainey Ranch Golf Club" },
  { img: "forest-highlands.png", alt: "Forest Highlands" },
  { text: "Hearsay" },
  { img: "teen-lifeline.png", alt: "Teen Lifeline" },
  { text: "Village Health Clubs" },
  { img: "girls-on-the-run.png", alt: "Girls on the Run" },
  { text: "Gainey Village" },
  { img: "great-hearts.png", alt: "Great Hearts" },
  { text: "Brophy College Prep" },
  { img: "blind-children.png", alt: "Foundation for Blind Children" },
  { text: "Notre Dame Prep" },
  { img: "scottsdale-christian.png", alt: "Scottsdale Christian Academy" },
  { text: "Villa Montessori" },
  { img: "baller-dream.png", alt: "Baller Dream Foundation" },
  { text: "State 48 Foundation" },
  { text: "Board of Visitors" },
  { text: "Compassion with Fashion" },
  { text: "PANDA" },
  { text: "Arcadia High School" },
  { text: "OLPH" },
  { text: "PCH · WINGS" },
  { text: "Croquet for a Cure" },
  { text: "Alison Hendeles Early Childhood Center" },
  { text: "Operation Enduring Gratitude" },
  { text: "VOS" },
  { text: "L.I.F.E." },
  { text: "Hursch / U-Haul" },
  { text: "Commercial Solar Arizona" },
  { text: "Ferguson Home" },
  { text: "Double Ten Day Celebration" },
  { text: "Accordant Investments" },
  { text: "TBMOPA" },
  { text: "A Chance to Play" },
  { text: "35th CWA Annual Meeting" },
];

function FeaturedIn() {
  const strip = [...PARTNERS, ...PARTNERS];
  return (
    <section data-no-reveal style={{ padding: "34px 0 38px", background: "var(--tmc-cream)", borderBottom: "var(--rule)" }}>
      <div style={{ ...tmcEyebrow, fontSize: 9, color: "var(--tmc-raspberry)", textAlign: "center" }}>In good company · our partners & clients</div>
      <div style={{ overflow: "hidden", marginTop: 18 }}>
        <div className="tmc-marquee-track" style={{ gap: 0, alignItems: "center", animationDuration: "220s" }}>
          {strip.map((it, i) => (
            <span key={i} style={{ display: "inline-flex", alignItems: "center", flexShrink: 0 }}>
              {it.img
                ? <img src={"assets/logos/partners/" + it.img} alt={it.alt} style={{ height: 34, width: "auto", maxWidth: 170, objectFit: "contain", display: "block", opacity: .88 }} />
                : <span style={{ ...tmcDisplay, fontSize: 24, lineHeight: 1, color: "#141414", whiteSpace: "nowrap" }}>{it.text}</span>}
              <span aria-hidden="true" style={{ color: "var(--tmc-raspberry)", fontSize: 20, padding: "0 30px" }}>·</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function Clubhouse() {
  return (
    <section style={{ position: "relative", background: "#FFFFFF", padding: "84px 64px 92px", display: "grid", gridTemplateColumns: "minmax(0,1.25fr) minmax(0,1fr)", gap: 40, alignItems: "center" }}>
      <FloatTile name="flower3" rotate={-12} speed={0.1} style={{ right: "5%", top: 44 }} />
      {/* MEDIA COLUMN — swap this <img> for the clubhouse photo, or replace with a
          <video autoPlay muted loop playsInline poster="…"> when the footage is ready. */}
      <div data-parallax="0.06" style={{ width: "100%", maxWidth: 620, margin: "0 auto" }}>
        <img data-rise src="assets/imagery/clubhouse-hero.jpg" alt="Inside The Mahj Clubs — automatic mahjong tables at the Scottsdale clubhouse" style={{ display: "block", width: "100%", aspectRatio: "3 / 2", height: "auto", objectFit: "contain", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-card)" }} />
      </div>
      <div>
        <div style={{ ...tmcEyebrow, color: "var(--tmc-raspberry)" }}>About the club</div>
        <h2 style={{ ...tmcDisplay, fontSize: 50, lineHeight: 1.02, color: "var(--text-display)", margin: "14px 0 0" }}>Room for Everyone</h2>
        <p style={{ fontSize: 15.5, lineHeight: 1.6, margin: "18px 0 0" }}>
          Originally founded in 2023, our club has grown from intimate in-home gatherings into a thriving community of more than 200 members. We host open and drop-in play, catered socials, pop-up events, weekly classes, corporate workshops and private events — for all who want to learn, play and belong.
        </p>
        <p style={{ fontSize: 15.5, lineHeight: 1.6, margin: "12px 0 0" }}>
          Our 2,600-square-foot Scottsdale Highlands clubhouse is adorned with chandeliers, seats up to 80 players across 13 automatic mahjong tables, and includes a lounge, bar-style high-tops, private catering, and a boutique of mahjong-themed gifts.
        </p>
        <div style={{ marginTop: 22, display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center" }}>
          <Badge tone="outline">4821 N. Scottsdale Rd, Suite 106 · Scottsdale, AZ 85251</Badge>
        </div>
      </div>
    </section>
  );
}

function WaysToPlay({ go }) {
  const ways = [
    { tile: "martini", photo: "ways-social.jpg", title: "Socials & Special Events", badge: "Catered", copy: "Included for Mahj-Pro members; available to Drop-In members for a fee. Catered meals, a variety of beverages, and up to four free guests for Mahj-Pro members." },
    { tile: "car", photo: "ways-dropin.jpg", title: "Drop-Ins", badge: "All levels", copy: "Open to every membership level. NA beverages and light snacks available; members bring up to three guests at no extra charge." },
    { tile: "flower1", photo: "ways-openplay.jpg", title: "Open Play", badge: "Anytime", copy: "Available whenever the club is open with no scheduled event. Guests are free for all membership levels — bring your own drinks or meals." },
  ];
  return (
    <section style={{ position: "relative", marginTop: 0, background: "#FFFFFF" }}>
      <div className="tmc-ways-wrap" style={{ position: "relative", padding: "1px 96px 88px" }}>
        <div className="tmc-ways-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 20, marginTop: -120 }}>
          {ways.map(w => (
            <div key={w.title} style={{ height: "100%" }}>
              <Card variant="tile" padding={0} style={{ textAlign: "center", height: "100%", boxSizing: "border-box", overflow: "hidden", boxShadow: "var(--shadow-lift)" }}>
                <img src={"assets/imagery/" + w.photo} alt={w.title} style={{ display: "block", width: "calc(100% - 28px)", margin: "14px 14px 0", aspectRatio: "3 / 4", height: "auto", objectFit: "cover", borderRadius: 8 }} />
                <div style={{ padding: "22px 22px 26px" }}>
                  <div><Badge tone="blush">{w.badge}</Badge></div>
                  <h3 style={{ ...tmcDisplay, fontSize: 23, color: "var(--text-display)", margin: "10px 0 0" }}>{w.title}</h3>
                  <p style={{ fontSize: 15, lineHeight: 1.55, margin: "10px 0 0" }}>{w.copy}</p>
                </div>
              </Card>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TestimonialCarousel() {
  const items = [
    { q: "Mahjong brings me closer to my friends as we share laughter around the table — I always leave feeling connected and energized. The events are my favorite days of the week!", who: "Gwen · member", img: "member-tiles.jpeg" },
    { q: "Every gathering is filled with laughter, delicious food, and a beautifully organized setup. The founders go above and beyond to make every event welcoming and memorable.", who: "Danna · member", img: "gallery/gallery-2.jpeg" },
    { q: "Members gather to play in stunning spaces with delicious catered dishes — the perfect way to spend two hours with old and new friends. No surprise the waitlist is packed.", who: "Linda · member", img: "gallery/gallery-5.jpeg" },
    { q: "I love meeting new women and reconnecting with women I haven't seen in years — and going to so many great venues around Phoenix I've never been to!", who: "Whitney · member", img: "gallery/gallery-7.jpg" },
  ];
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI(n => (n + 1) % items.length), 5200);
    return () => clearInterval(t);
  }, []);
  const it = items[i];
  return (
    <Card variant="soft" style={{ marginTop: 18, background: "var(--tmc-burgundy)", backgroundImage: "none", animation: "none" }} padding={20}>
      <div key={i} style={{ display: "grid", gridTemplateColumns: "160px minmax(0,1fr)", gap: 20, alignItems: "center", animation: "tmc-testi-in .6s var(--ease-out) both" }}>
        <div style={{ width: 160, height: 213, flexShrink: 0, borderRadius: "10px", overflow: "hidden" }}>
          <img src={"assets/imagery/" + it.img} alt="A member playing American Mah Jongg at The Mahj Clubs in Scottsdale" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
        <div style={{ padding: "6px 6px 6px 0", display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <p style={{ ...tmcDisplay, fontSize: 20, lineHeight: 1.3, margin: 0, color: "var(--tmc-cream)" }}>"{it.q}"</p>
          <div style={{ ...tmcEyebrow, fontSize: 9, marginTop: 14, color: "var(--tmc-blush)" }}>{it.who}</div>
        </div>
      </div>
      <div style={{ display: "flex", gap: 7, justifyContent: "center", marginTop: 16 }}>
        {items.map((_, idx) => (
          <button key={idx} onClick={() => setI(idx)} aria-label={"Testimonial " + (idx + 1)} style={{ width: idx === i ? 20 : 7, height: 7, borderRadius: 4, border: "none", padding: 0, background: idx === i ? "var(--tmc-cream)" : "rgba(238,231,224,.35)", cursor: "pointer", transition: "width .3s var(--ease-out), background .3s" }}></button>
        ))}
      </div>
    </Card>
  );
}

function HoursReviews() {
  const hours = [["Tuesday","12–5"],["Wednesday","12–8"],["Thursday","12–7:30"],["Friday","12–7:30"],["Saturday","12–5"],["Sunday","12–5"],["Monday","Private events"]];
  return (
    <section style={{ position: "relative", padding: "92px 96px 16px" }}>
      <FloatTile name="rich-symbol" rotate={-11} speed={0.12} style={{ left: "3%", top: -34 }} />
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.4fr)", gap: 52, alignItems: "stretch", maxWidth: 1080, margin: "0 auto" }}>
        <Card padding={28} style={{ height: "100%", boxSizing: "border-box", display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <div style={{ ...tmcEyebrow, color: "var(--tmc-raspberry)" }}>Hours of operation</div>
          <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 8 }}>
            {hours.map(([d, h]) => (
              <div key={d} style={{ display: "flex", justifyContent: "space-between", fontSize: 13, borderBottom: "var(--rule)", paddingBottom: 8 }}>
                <span>{d}</span><span style={{ color: "var(--tmc-olive)" }}>{h}</span>
              </div>
            ))}
          </div>
        </Card>
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <div style={{ ...tmcEyebrow, color: "var(--tmc-raspberry)" }}>From our members</div>
          <div style={{ fontFamily: "var(--font-script)", fontSize: 34, color: "var(--tmc-emerald)", marginTop: 14 }}>love at first Mahj</div>
          <TestimonialCarousel />
        </div>
      </div>
    </section>
  );
}

function MembershipBand({ go }) {
  return (
    <section style={{ position: "relative", backgroundImage: "url('assets/imagery/pattern-pinstripe-paper.jpg')", backgroundSize: "1100px auto", backgroundRepeat: "repeat", backgroundPosition: "center", backgroundAttachment: "fixed", padding: "84px 96px", marginTop: 76 }}>
      <Card variant="soft" frame padding={48} style={{ maxWidth: 920, margin: "0 auto", boxSizing: "border-box" }}>
        <div style={{ display: "grid", gridTemplateColumns: "200px minmax(0,1fr)", gap: 44, alignItems: "center" }}>
          <img src="assets/imagery/keychain-tassel.png" alt="The Mahj Clubs key and tassel" style={{ height: 190, width: "auto", justifySelf: "center" }} />
          <div>
            <div style={{ ...tmcEyebrow, color: "var(--tmc-raspberry)" }}>Membership</div>
            <div style={{ fontFamily: "var(--font-script)", fontSize: 46, color: "var(--tmc-burgundy)", marginTop: 8 }}>The Key to Connection</div>
            <p style={{ fontSize: 15, lineHeight: 1.6, maxWidth: 460, margin: "12px 0 0" }}>
              Playing more than once a month? Save money and enjoy the exclusivity of membership — catered socials, guest passes, and members-only events.
            </p>
            <div style={{ marginTop: 22 }}><Button size="lg" onClick={() => go("membership")}>See memberships</Button></div>
          </div>
        </div>
      </Card>
    </section>
  );
}

function InstagramFeed() {
  const photos = [
    ["gallery-1.webp", 210], ["gallery-2.webp", 210], ["gallery-3.webp", 210],
    ["gallery-4.webp", 374], ["gallery-5.webp", 210], ["gallery-6.webp", 210],
    ["gallery-7.webp", 378]
  ];
  const strip = [...photos, ...photos];
  return (
    <section style={{ position: "relative", marginTop: 76, background: "#FFFFFF", padding: "58px 0 62px" }}>
      <FloatTile name="bird" rotate={-9} speed={0.12} style={{ right: "9%", top: -44 }} />
      <div style={{ textAlign: "center" }}>
        <div style={{ ...tmcEyebrow, color: "var(--tmc-raspberry)" }}>On Instagram</div>
        <h2 style={{ ...tmcDisplay, fontSize: 34, color: "var(--text-display)", margin: "12px 0 0" }}>
          <a href="https://www.instagram.com/mahjclubs/" target="_blank" rel="noreferrer" style={{ color: "inherit", textDecoration: "none" }}>@mahjclubs</a>
        </h2>
      </div>
      <div style={{ overflow: "hidden", marginTop: 28 }}>
        <div className="tmc-marquee-track">
          {strip.map(([photo, width], i) => (
            <a key={i} href="https://www.instagram.com/mahjclubs/" target="_blank" rel="noreferrer" style={{ flexShrink: 0 }}>
              <img src={"assets/imagery/gallery/" + photo} alt="The club on Instagram" width={width} height={280} loading="lazy" decoding="async" style={{ height: 280, width: "auto", borderRadius: "var(--radius-md)", objectFit: "cover", boxShadow: "var(--shadow-card)", display: "block" }} />
            </a>
          ))}
        </div>
      </div>
      <div style={{ textAlign: "center", marginTop: 24 }}>
        <Button variant="outline" onClick={() => window.open("https://www.instagram.com/mahjclubs/", "_blank")}>Follow along</Button>
      </div>
    </section>
  );
}

// Real press features (verified Sept 2026) — logos + embedded segments.
const PRESS_LINKS = [
  ["text", null, "CNN", "https://www.cnn.com/2026/09/19/business/mahjong-is-exploding-in-popularity-but-does-it-defeat-the-purpose-of-the-game"],
  ["text", null, "Phoenix New Times", "https://www.phoenixnewtimes.com/best-of-phoenix/2026/fun-and-games/best-place-to-learn-mahjong-40701561"],
  ["img", "assets/logos/press/press-azfamily.png", "Arizona's Family · 3TV / CBS 5", "https://www.azfamily.com/2026/01/12/phoenix-mahjong-club-opens-first-permanent-venue-scottsdale/"],
  ["img", "assets/logos/press/press-abc15.png", "ABC15 Sonoran Living", "https://www.abc15.com/sonoranliving/mahjong-mania-a-look-at-the-game-sweeping-the-country"],
  ["img", "assets/logos/press/press-cw7.png", "CW7 Arizona Daily Mix", "https://cw7az.com/arizona-daily-mix/phoenix-mahjong-club-scottsdale/"],
  ["img", "assets/logos/press/press-axios.png", "Axios Phoenix", "https://www.axios.com/newsletters/axios-phoenix-9dae344a-8040-445c-b0ba-94344fed4e7f.html"],
  ["img", "assets/logos/press/press-arcadia.png", "Arcadia News", "https://www.arcadianews.com/local_news_and_features/how-three-friends-sparked-a-tile-turning-trend-in-phoenix/article_9b0f44de-e9d3-4b4e-b079-fa0aeadc2645.html"],
  ["img", "assets/logos/press/press-fabaz.png", "Fabulous Arizona", "https://fabulousarizona.com/arizona-best/where-to-play-mahjong-in-arizona-2026/"],
  ["img", "assets/logos/press/press-tsl.png", "Scottsdale Living", "https://thescottsdaleliving.com/profile/phoenixmahjongclub/"],
];
function PressBar() {
  return (
    <section style={{ background: "var(--tmc-tile-white)", padding: "58px 24px 70px", textAlign: "center", borderTop: "var(--rule)" }}>
      <div style={{ ...tmcEyebrow, color: "var(--tmc-raspberry)" }}>As seen on</div>
      <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "center", gap: "18px 46px", maxWidth: 940, margin: "26px auto 0" }}>
        {PRESS_LINKS.map(([kind, img, name, url]) => (
          <a key={name} href={url} target="_blank" rel="noreferrer" className="tmc-press-link" title={name}
            style={{ fontFamily: name === "CNN" ? "Arial, sans-serif" : "var(--font-display)", fontWeight: name === "CNN" ? 900 : undefined, fontSize: 23, color: name === "CNN" ? "#CC0000" : "var(--tmc-burgundy)", textDecoration: "none", whiteSpace: "nowrap", transition: "opacity .15s ease, color .15s ease", display: "inline-flex", alignItems: "center" }}>
            {kind === "img" ? <img src={img} alt={name} style={{ height: 30, width: "auto", display: "block" }} /> : name}
          </a>
        ))}
      </div>
      <div className="tmc-press-videos" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 26, maxWidth: 1100, margin: "44px auto 0" }}>
        <div>
          <div style={{ position: "relative", aspectRatio: "16 / 9", borderRadius: "var(--radius-md)", overflow: "hidden", boxShadow: "var(--shadow-card)", background: "#000" }}>
            <iframe src="https://www.youtube-nocookie.com/embed/utxcOWaaOaA" title="Arizona's Family: Phoenix Mahjong Club opens first venue" loading="lazy" allow="accelerometer; encrypted-media; picture-in-picture" allowFullScreen
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: "none" }}></iframe>
          </div>
          <div style={{ ...tmcEyebrow, fontSize: 9, color: "var(--tmc-olive)", marginTop: 12 }}>Arizona's Family · the grand opening</div>
        </div>
        <div>
          <div style={{ position: "relative", aspectRatio: "16 / 9", borderRadius: "var(--radius-md)", overflow: "hidden", boxShadow: "var(--shadow-card)", background: "#000" }}>
            <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fazdailymix%2Fvideos%2F1966341054265170%2F&show_text=false" title="CW7 Arizona Daily Mix: Phoenix Mahjong Club" loading="lazy" allow="encrypted-media; picture-in-picture" allowFullScreen
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: "none" }}></iframe>
          </div>
          <div style={{ ...tmcEyebrow, fontSize: 9, color: "var(--tmc-olive)", marginTop: 12 }}>CW7 Arizona Daily Mix · why everyone's playing</div>
        </div>
        <div>
          <div style={{ position: "relative", aspectRatio: "16 / 9", borderRadius: "var(--radius-md)", overflow: "hidden", boxShadow: "var(--shadow-card)", background: "#000" }}>
            <video controls preload="none" playsInline poster="assets/imagery/press-abc15-poster.jpg"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}>
              <source src="assets/video/press-abc15.mp4" type="video/mp4" />
            </video>
          </div>
          <div style={{ ...tmcEyebrow, fontSize: 9, color: "var(--tmc-olive)", marginTop: 12 }}>
            <a href="https://www.abc15.com/sonoranliving/learn-how-to-play-the-popular-game-mahjong-for-your-next-game-night" target="_blank" rel="noreferrer" style={{ color: "var(--tmc-olive)", textDecoration: "none" }}>ABC15 Sonoran Living · learn to play →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home({ go, page }) {
  return (
    <main style={{ fontFamily: "var(--font-body)", color: "var(--text-body)" }}>
      <TmcNav go={go} page={page} />
      <Hero go={go} />
      <FeaturedIn />
      <Clubhouse />
      <About go={go} />
      <WaysToPlay go={go} />
      <HoursReviews />
      <MembershipBand go={go} />
      <PressBar />
      <InstagramFeed />
      <TmcFooter go={go} />
    </main>
  );
}
Object.assign(window, { Home, InstagramFeed, FloatTile });