// SOCIAL — pre-launch: what you get, and what we're building toward
// (Stats + testimonials removed — app hasn't launched. Kept file as a "values" band.)

const PRINCIPLES = [
  { t: "No feeds. No swipes.", b: "Matching is a quiet handshake between four people, not a discovery surface." },
  { t: "American Mahjong, done well.", b: "We're focused on the NMJL card and the people who play it — not every variant under the sun." },
  { t: "Hosts are neighbors.", b: "Verified, welcoming, and drawn from your actual neighborhood — not an algorithm's best guess." },
  { t: "iPhone, on purpose.", b: "We're starting on iOS so we can ship one thing, well, before we ship many things, badly." },
];

const Social = () => (
  <section className="social section-pad" id="principles">
    <div className="container">
      <SectionHead
        eyebrow="What we care about"
        title="A small app, made on purpose."
        lede="We're pre-launch. No user counts to show off, no testimonials yet. Just four commitments we're building the app around."
      />

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
        gap: 28,
        marginTop: 56
      }}>
        {PRINCIPLES.map((p, i) => (
          <Reveal key={p.t} delay={i * 70}>
            <div style={{
              background: "#fff",
              borderRadius: 14,
              padding: "28px 26px",
              boxShadow: "0 3px 10px rgba(20,31,46,0.06)",
              borderTop: "3px solid var(--mm-hot-pink)",
              height: "100%",
              display: "flex",
              flexDirection: "column",
              gap: 10
            }}>
              <div style={{
                fontFamily: "var(--mm-font-sans)", fontSize: 10.5, fontWeight: 600,
                letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--mm-hot-pink)"
              }}>
                0{i + 1}
              </div>
              <h3 style={{
                fontFamily: "var(--mm-font-serif)", fontSize: 22, fontWeight: 500,
                lineHeight: 1.2, color: "var(--mm-near-black)", margin: 0, textWrap: "balance"
              }}>{p.t}</h3>
              <p style={{
                fontFamily: "var(--mm-font-sans)", fontSize: 14, lineHeight: 1.55,
                color: "var(--mm-warm-gray)", margin: 0, textWrap: "pretty"
              }}>{p.b}</p>
            </div>
          </Reveal>
        ))}
      </div>

      <div style={{ textAlign: "center", marginTop: 48 }}>
        <p style={{
          fontFamily: "var(--mm-font-serif)", fontStyle: "italic", fontSize: 20,
          color: "var(--mm-warm-gray)", maxWidth: 560, margin: "0 auto 20px", textWrap: "pretty"
        }}>
          Once the app is in hands, we'll share numbers worth sharing — matches made,
          games played, and the cities that lit up first.
        </p>
      </div>
    </div>
  </section>
);

Object.assign(window, { Social });