// COMING SOON — landing anchor for every stub link (App Store, socials, Accessibility).
// Clicking any "soon" link scrolls here; here, the user can leave their email or partner inquiry.

const CS_ITEMS = [
  { k: "app",   label: "Apple App Store",    sub: "iOS build in beta. Launching soon on the App Store." },
  { k: "ig",    label: "Instagram",          sub: "@mahjongmatchmaker · handle reserved, account going live at launch." },
  { k: "tt",    label: "TikTok",             sub: "Table stories and hosting tips — first posts around launch." },
  { k: "th",    label: "Threads",            sub: "Launch-day announcements and community notes." },
  { k: "fb",    label: "Facebook",           sub: "State-by-state groups open post-launch." },
  { k: "a11y",  label: "Accessibility",      sub: "Full WCAG 2.1 AA statement published before public launch." },
  { k: "android", label: "Android version",  sub: "iPhone first so we can ship one thing done well. Android to follow." },
];

const ComingSoon = () => (
  <section className="coming-soon section-pad" id="coming-soon" style={{ background: "var(--mm-cream)" }}>
    <div className="container">
      <div style={{ maxWidth: 620, margin: "0 auto 48px", textAlign: "center" }}>
        <Eyebrow>Coming soon</Eyebrow>
        <h2 className="sec-title">A few things are on the way.</h2>
        <p className="lede" style={{ margin: "20px auto 0" }}>
          The app, the social accounts, the Android build — all almost here. Leave your email
          below and we'll tell you the moment each one goes live.
        </p>
      </div>

      <ul style={{
        listStyle: "none", padding: 0, margin: "0 auto 40px", maxWidth: 720,
        display: "grid", gap: 1,
        background: "rgba(20,31,46,0.1)",
        borderRadius: 14,
        overflow: "hidden",
        border: "1px solid rgba(20,31,46,0.1)"
      }}>
        {CS_ITEMS.map(item => (
          <li key={item.k} style={{
            background: "#fff",
            padding: "20px 24px",
            display: "flex",
            alignItems: "center",
            gap: 16,
            flexWrap: "wrap"
          }}>
            <div style={{ flex: "1 1 260px", minWidth: 0 }}>
              <div style={{
                fontFamily: "var(--mm-font-serif)", fontSize: 17, fontWeight: 500,
                color: "var(--mm-near-black)", letterSpacing: "-0.005em"
              }}>
                {item.label}
              </div>
              <div style={{
                fontFamily: "var(--mm-font-sans)", fontSize: 13,
                color: "var(--mm-warm-gray)", marginTop: 4, lineHeight: 1.5
              }}>
                {item.sub}
              </div>
            </div>
            <span style={{
              flexShrink: 0,
              fontFamily: "var(--mm-font-sans)", fontSize: 10.5, fontWeight: 600,
              letterSpacing: "0.14em", textTransform: "uppercase", color: "#9A7A00",
              background: "rgba(244,196,49,0.22)",
              padding: "6px 12px", borderRadius: 999
            }}>
              Soon
            </span>
          </li>
        ))}
      </ul>

      <div style={{
        maxWidth: 560, margin: "0 auto",
        background: "#fff", borderRadius: 14,
        padding: "28px 28px 24px",
        border: "1px solid rgba(20,31,46,0.08)",
        textAlign: "center"
      }}>
        <div style={{
          fontFamily: "var(--mm-font-serif)", fontSize: 22, fontWeight: 500,
          color: "var(--mm-near-black)", letterSpacing: "-0.005em", lineHeight: 1.2
        }}>
          Want the launch email?
        </div>
        <div style={{
          fontFamily: "var(--mm-font-sans)", fontSize: 13,
          color: "var(--mm-warm-gray)", marginTop: 8, lineHeight: 1.5
        }}>
          One note when the app ships. One when your state opens. That's it.
        </div>
        <div style={{ marginTop: 18 }}>
          <a
            href="#founding"
            className="btn btn--primary"
            style={{ marginRight: 10 }}
          >
            Join the beta
          </a>
          <a
            href="mailto:info@mahjongmatchmaker.com?subject=Notify%20me%20at%20launch"
            className="btn btn--ghost"
          >
            Email us directly
          </a>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { ComingSoon });