// PARTNER — replaces old pricing tiers. Single inviting CTA block
// directing groups, clubs, venues, and teachers to info@mahjongmatchmaker.com.

const Pricing = () => (
  <section className="pricing section-pad" id="partner">
    <div className="container">
      <div className="pricing__head">
        <Eyebrow>Groups, teachers & venues</Eyebrow>
        <h2 className="sec-title">Partner with us.<br /><em style={{ fontStyle: "italic" }}>Let's make a connection.</em></h2>
        <p className="lede">
          If you run a club, teach the NMJL card, manage a venue, or organize a local
          mahjong group — we want to hear from you before we light up your state.
          One email. No forms. An actual reply.
        </p>
      </div>

      <div style={{
        maxWidth: 960, margin: "40px auto 0",
        background: "#fff", borderRadius: 16,
        padding: "48px clamp(28px, 4vw, 56px)",
        boxShadow: "0 8px 30px rgba(20,31,46,0.08)",
        display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "center"
      }} className="partner-card">
        <div>
          <div style={{
            fontFamily: "var(--mm-font-sans)", fontSize: 10.5, fontWeight: 600,
            letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--mm-hot-pink)",
            marginBottom: 12
          }}>
            Partner inquiry
          </div>
          <h3 style={{
            fontFamily: "var(--mm-font-serif)", fontWeight: 500, fontSize: 30, lineHeight: 1.15,
            margin: "0 0 16px", color: "var(--mm-near-black)", textWrap: "balance"
          }}>
            Groups, teachers, and venues — this one's for you.
          </h3>
          <ul style={{ margin: "0 0 24px", padding: 0, listStyle: "none", display: "grid", gap: 10 }}>
            {[
              "Existing American Mahjong groups looking to move off the group text",
              "NMJL-certified teachers building a student roster",
              "Clubs, tea rooms, and venues that want a standing weekly table",
              "Charities looking for a tournament partner",
            ].map(t => (
              <li key={t} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontFamily: "var(--mm-font-sans)", fontSize: 14.5, lineHeight: 1.5, color: "var(--mm-near-black)" }}>
                <span style={{ color: "var(--mm-kelly-green)", marginTop: 4, flexShrink: 0 }}><IconCheck size={14} /></span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
          <a
            href="mailto:info@mahjongmatchmaker.com?subject=Partner%20inquiry"
            className="btn btn--primary"
          >
            Email info@mahjongmatchmaker.com
          </a>
        </div>

        <div style={{
          background: "linear-gradient(135deg, #FFF8E6, #FFE8B5)",
          borderRadius: 14, padding: 32,
          border: "1px solid rgba(244,196,49,0.4)",
          display: "flex", flexDirection: "column", gap: 14
        }}>
          <div style={{
            fontFamily: "var(--mm-font-sans)", fontSize: 10, fontWeight: 600,
            letterSpacing: "0.16em", textTransform: "uppercase", color: "#9A7A00"
          }}>
            While you wait
          </div>
          <h4 style={{
            fontFamily: "var(--mm-font-serif)", fontWeight: 500, fontSize: 22, lineHeight: 1.2,
            margin: 0, color: "var(--mm-near-black)", textWrap: "balance"
          }}>
            Follow along on social.
          </h4>
          <p style={{
            fontFamily: "var(--mm-font-sans)", fontSize: 13.5, lineHeight: 1.55,
            color: "var(--mm-warm-gray)", margin: 0
          }}>
            We're posting build notes, beta waves, and state-by-state launches.
            All links coming soon — follow us to be first.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 4 }}>
            {[
              ["Instagram", "#"],
              ["TikTok", "#"],
              ["Threads", "#"],
              ["Facebook", "#"],
            ].map(([label, href]) => (
              <a key={label} href={href} style={{
                padding: "8px 14px", borderRadius: 999,
                background: "#fff", border: "1px solid rgba(244,196,49,0.5)",
                fontFamily: "var(--mm-font-sans)", fontSize: 12.5, fontWeight: 500,
                color: "#3A2A00", textDecoration: "none"
              }}>
                {label} <span style={{ opacity: 0.55, fontSize: 10, marginLeft: 4, letterSpacing: "0.08em", textTransform: "uppercase" }}>soon</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Pricing });