// HERO — signature hot-pink surface with a floating white invitation card.
// Variants: "invitation" (default), "editorial" (split w/ photo), "navy" (dark)

const Hero = ({ variant = "invitation" }) => {
  if (variant === "editorial") return <HeroEditorial />;
  if (variant === "navy") return <HeroNavy />;
  return <HeroInvitation />;
};

const AppStoreBadge = ({ dark = false }) => (
  <a
    href="#coming-soon"
    className="hero__appbadge"
    style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 10,
      padding: "10px 16px",
      background: dark ? "rgba(255,255,255,0.08)" : "rgba(20,31,46,0.92)",
      color: "#fff",
      borderRadius: 10,
      border: dark ? "1px solid rgba(255,255,255,0.22)" : "0",
      fontFamily: "var(--mm-font-sans)",
      textDecoration: "none",
      lineHeight: 1
    }}
  >
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M17.05 12.54c-.03-2.48 2.02-3.67 2.11-3.72-1.15-1.68-2.94-1.91-3.58-1.94-1.52-.15-2.97.9-3.75.9-.78 0-1.97-.88-3.23-.85-1.66.02-3.2.96-4.05 2.45-1.73 3-.44 7.44 1.24 9.88.82 1.19 1.79 2.53 3.06 2.48 1.23-.05 1.69-.8 3.18-.8 1.48 0 1.9.8 3.2.78 1.32-.02 2.16-1.21 2.96-2.41.94-1.38 1.33-2.72 1.35-2.79-.03-.01-2.58-.99-2.6-3.94M14.62 5.36c.67-.82 1.13-1.95 1-3.09-.97.04-2.16.65-2.85 1.46-.62.72-1.17 1.88-1.02 2.99 1.08.08 2.19-.55 2.87-1.36z" />
    </svg>
    <div style={{ textAlign: "left" }}>
      <div style={{ fontSize: 9, letterSpacing: "0.08em", opacity: 0.75, textTransform: "uppercase" }}>Apple App Store · Coming Soon</div>
      <div style={{ fontSize: 14, fontWeight: 500, marginTop: 1 }}>Download on iPhone</div>
    </div>
  </a>
);

const HeroPromo = () => (
  <div className="hero__promo">
    <b>iPhone · iOS 17+</b>
    <span>The Mahjong Matchmaker app is almost here — join the beta for lifetime perks.</span>
  </div>
);

const HeroInvitation = () => (
  <section className="hero" id="top">
    <div className="mm-tile-bg" aria-hidden="true" />
    <div className="container hero__grid">
      <div className="hero__copy">
        <HeroPromo />
        <h1 className="headline">
          Find your <span className="italic">fourth.</span><br />
          Find your next game.
        </h1>
        <p className="hero__lede">
          An American Mahjong app for people who'd rather play than wait on the group
          chat. Launching on iPhone — join the beta and help us set the table.
        </p>
        <div className="hero__ctas">
          <AppStoreBadge />
          <a href="#founding" className="btn btn--ghost-light">Join the beta</a>
        </div>
        <div className="hero__microproof" style={{ marginTop: 20 }}>
          <span style={{ fontFamily: "var(--mm-font-sans)", fontSize: 12, color: "rgba(255,255,255,0.82)", letterSpacing: "0.02em" }}>
            Follow along: <a href="#coming-soon" style={{ color: "#fff", textDecoration: "underline", textUnderlineOffset: 3 }}>Instagram</a> · <a href="#coming-soon" style={{ color: "#fff", textDecoration: "underline", textUnderlineOffset: 3 }}>TikTok</a> · <a href="#coming-soon" style={{ color: "#fff", textDecoration: "underline", textUnderlineOffset: 3 }}>Threads</a> · <a href="#coming-soon" style={{ color: "#fff", textDecoration: "underline", textUnderlineOffset: 3 }}>Facebook</a>
          </span>
        </div>
      </div>

      <div className="invitation-stack">
        <div className="invitation">
          <div className="invitation__seal" aria-hidden="true">★</div>
          <div className="invitation__ribbon">An invitation</div>
          <h3 className="invitation__title">Sunday Afternoon Game</h3>
          <p className="invitation__sub">American Mahjong · NMJL card · hosted at home</p>
          <hr className="invitation__divider" />
          <div className="invitation__meta">
            <div><div className="k">When</div><div className="v">Sun · 2:00 pm</div></div>
            <div><div className="k">Where</div><div className="v">West Village · 0.4 mi</div></div>
            <div><div className="k">Level</div><div className="v">Intermediate</div></div>
            <div><div className="k">Tea</div><div className="v">Oolong. Shortbread.</div></div>
          </div>
          <div className="invitation__host">
            <Avatar initial="★" gradient="pink-gold" size={38} />
            <div>
              <div className="n">A host in your neighborhood · <span style={{ color: "#9A7A00" }}>★ Founding Member</span></div>
              <div className="r">Verified host · welcoming beginners</div>
            </div>
          </div>
          <div className="invitation__seats">
            <div className="label">3 players in · <em>seat 4 open</em></div>
            <button className="cta">Reserve</button>
          </div>
          <div style={{ marginTop: 12, fontFamily: "var(--mm-font-sans)", fontSize: 10.5, color: "#9A7A00", letterSpacing: "0.12em", textTransform: "uppercase", textAlign: "center", fontWeight: 600 }}>
            A preview of what matching looks like in the app
          </div>
        </div>
      </div>
    </div>
  </section>
);

const HeroEditorial = () => (
  <section className="hero" id="top" style={{ padding: 0 }}>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: "min(90vh, 820px)" }}>
      <div style={{ padding: "80px var(--page-gutter)", display: "flex", flexDirection: "column", justifyContent: "center", background: "var(--mm-hot-pink)" }}>
        <HeroPromo />
        <h1 className="headline" style={{ color: "#fff" }}>
          The group text<br /> is <span className="italic">done.</span>
        </h1>
        <p className="hero__lede">
          An American Mahjong app. Launching on iPhone. Join the beta and get perks
          that only exist during this first, quiet season.
        </p>
        <div className="hero__ctas">
          <AppStoreBadge />
          <a href="#founding" className="btn btn--ghost-light">See the beta rewards</a>
        </div>
      </div>
      <Photo tone="hands" aspect="auto" caption="ART DIR · warm-lit hands, oolong, linen · no faces">
        <div style={{ position: "absolute", bottom: 40, left: 40, color: "#fff", fontFamily: "var(--mm-font-serif)", fontSize: 28, fontStyle: "italic", textShadow: "0 2px 10px rgba(0,0,0,0.4)" }}>
          "A seat at Sunday's<br /> American game is confirmed."
        </div>
      </Photo>
    </div>
  </section>
);

const HeroNavy = () => (
  <section className="hero" id="top" style={{ background: "var(--mm-deep-navy)" }}>
    <div className="container hero__grid">
      <div className="hero__copy">
        <HeroPromo />
        <h1 className="headline" style={{ color: "#fff" }}>
          Find your <span className="italic" style={{ color: "var(--mm-sunflower-gold)" }}>fourth.</span><br />
          Find your next game.
        </h1>
        <p className="hero__lede">
          An American Mahjong app. Launching on iPhone. Join the beta and evenings
          that start on time and end with leftovers.
        </p>
        <div className="hero__ctas">
          <AppStoreBadge dark />
          <a href="#founding" className="btn btn--ghost-light">Join the beta</a>
        </div>
      </div>
      <div className="invitation-stack">
        <div className="invitation" style={{ background: "#1F2948", color: "#fff" }}>
          <div className="invitation__seal" aria-hidden="true">★</div>
          <div className="invitation__ribbon">An invitation</div>
          <h3 className="invitation__title" style={{ color: "#fff" }}>Sunday Afternoon Game</h3>
          <p className="invitation__sub" style={{ color: "#A6B3CC" }}>American Mahjong · NMJL card · hosted at home</p>
          <hr className="invitation__divider" style={{ background: "rgba(255,255,255,0.12)" }} />
          <div className="invitation__meta">
            <div><div className="k" style={{ color: "#A6B3CC" }}>When</div><div className="v" style={{ color: "#fff" }}>Sun · 2:00 pm</div></div>
            <div><div className="k" style={{ color: "#A6B3CC" }}>Where</div><div className="v" style={{ color: "#fff" }}>West Village · 0.4 mi</div></div>
            <div><div className="k" style={{ color: "#A6B3CC" }}>Level</div><div className="v" style={{ color: "#fff" }}>Intermediate</div></div>
            <div><div className="k" style={{ color: "#A6B3CC" }}>Tea</div><div className="v" style={{ color: "#fff" }}>Oolong. Shortbread.</div></div>
          </div>
          <div className="invitation__host" style={{ borderTopColor: "rgba(255,255,255,0.12)" }}>
            <Avatar initial="★" gradient="pink-gold" size={38} />
            <div>
              <div className="n" style={{ color: "#fff" }}>A host in your neighborhood · <span style={{ color: "var(--mm-sunflower-gold)" }}>★ Founding Member</span></div>
              <div className="r" style={{ color: "#A6B3CC" }}>Verified host · welcoming beginners</div>
            </div>
          </div>
          <div className="invitation__seats">
            <div className="label" style={{ color: "#fff" }}>3 players in · <em>seat 4 open</em></div>
            <button className="cta">Reserve</button>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero });