// FEATURES — editorial rows, American Mahjong only. Teachers row removed.

const FeatRow = ({ reverse, eyebrow, title, body, bullets, cta = "Learn more", visual }) => (
  <div className={`feat-row ${reverse ? "feat-row--reverse" : ""}`}>
    <div className="feat__copy">
      <Eyebrow>{eyebrow}</Eyebrow>
      <h3 className="feat__title">{title}</h3>
      <p className="feat__body">{body}</p>
      {bullets && (
        <ul className="feat__bullets">
          {bullets.map((b, i) => (
            <li key={i}><IconCheck size={16} />{b}</li>
          ))}
        </ul>
      )}
      <a href="#founding" className="feat__link">{cta} <IconArrow size={14} /></a>
    </div>
    <Reveal>{visual}</Reveal>
  </div>
);

// -- Feature visuals (embedded product glimpses) --

const PlayerProfileVisual = () => (
  <div className="visual visual--profile">
    <div className="visual__art-note">Player profile · app preview</div>
    <div style={{ position: "absolute", inset: "auto 10% 8% 10%", background: "#fff", borderRadius: 14, padding: 22, boxShadow: "0 20px 40px -15px rgba(20,31,46,0.2)" }}>
      <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
        <Avatar initial="★" gradient="pink-gold" size={56} />
        <div>
          <div style={{ fontFamily: "var(--mm-font-serif)", fontSize: 22, fontWeight: 500 }}>A player near you</div>
          <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 12, color: "#666B85", marginTop: 2 }}>West Village · 0.6 mi · plays 2×/mo</div>
        </div>
      </div>
      <div style={{ display: "flex", gap: 6, margin: "16px 0 14px", flexWrap: "wrap" }}>
        <span className="pill pill--green">Intermediate</span>
        <span className="pill pill--gold">American</span>
        <span className="pill pill--gold">NMJL card</span>
      </div>
      <hr style={{ border: 0, height: 1, background: "#E0E6EB", margin: "6px 0 14px" }} />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, fontFamily: "var(--mm-font-sans)", fontSize: 11 }}>
        <div><div style={{ color: "#666B85", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 9.5 }}>Card</div><div style={{ fontSize: 14, fontFamily: "var(--mm-font-serif)" }}>NMJL 2025</div></div>
        <div><div style={{ color: "#666B85", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 9.5 }}>Plays</div><div style={{ fontSize: 16, fontFamily: "var(--mm-font-serif)" }}>Sun · Thu</div></div>
        <div><div style={{ color: "#666B85", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 9.5 }}>Host?</div><div style={{ fontSize: 16, fontFamily: "var(--mm-font-serif)", color: "#9A7A00" }}>★ Yes</div></div>
      </div>
    </div>
    <div style={{ position: "absolute", top: "12%", left: "8%", background: "rgba(255,255,255,0.85)", backdropFilter: "blur(6px)", padding: "10px 14px", borderRadius: 12, fontFamily: "var(--mm-font-sans)", fontSize: 12, color: "#141F2E", boxShadow: "0 4px 12px rgba(20,31,46,0.08)", display: "flex", alignItems: "center", gap: 8 }}>
      <IconCheck size={14} style={{ color: "#00A65A" }} /> Available Sun · Thu evenings
    </div>
  </div>
);

const MatchFlowVisual = () => (
  <div className="visual visual--matchflow">
    <div className="visual__art-note">Match request · app preview</div>
    <div style={{ position: "absolute", top: "10%", left: "6%", right: "48%", padding: 16, background: "rgba(255,255,255,0.08)", borderRadius: 12, backdropFilter: "blur(12px)", fontFamily: "var(--mm-font-sans)", color: "#fff", fontSize: 13, border: "1px solid rgba(255,255,255,0.15)" }}>
      <div style={{ fontSize: 10, color: "#A6B3CC", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 8 }}>Step 1 · Pick players</div>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        <Avatar initial="★" gradient="pink-gold" size={30} />
        <Avatar initial="★" gradient="green-gold" size={30} />
        <Avatar initial="★" gradient="pink-green" size={30} />
        <div style={{ width: 30, height: 30, borderRadius: 999, border: "1.5px dashed #F4C431", display: "grid", placeItems: "center", color: "#F4C431", fontSize: 16 }}>+</div>
      </div>
    </div>
    <div style={{ position: "absolute", top: "42%", left: "18%", right: "8%", padding: 18, background: "rgba(244,196,49,0.12)", borderRadius: 12, border: "1px solid rgba(244,196,49,0.4)", backdropFilter: "blur(12px)", fontFamily: "var(--mm-font-sans)", fontSize: 13, color: "#fff" }}>
      <div style={{ fontSize: 10, color: "#F4C431", letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 8 }}>Step 2 · Send match</div>
      <div style={{ fontFamily: "var(--mm-font-serif)", fontSize: 18, fontWeight: 500, color: "#fff", lineHeight: 1.3 }}>"Sunday 2 pm — tea and tiles?"</div>
      <div style={{ marginTop: 12, display: "flex", gap: 10 }}>
        <div style={{ height: 32, padding: "0 14px", background: "#00A65A", color: "#fff", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 500, borderRadius: 4, display: "inline-flex", alignItems: "center" }}>Send</div>
        <div style={{ height: 32, padding: "0 14px", border: "1.5px solid rgba(255,255,255,0.3)", color: "rgba(255,255,255,0.8)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 500, borderRadius: 4, display: "inline-flex", alignItems: "center" }}>Edit</div>
      </div>
    </div>
    <div style={{ position: "absolute", bottom: "8%", right: "8%", padding: "10px 14px", background: "#00A65A", borderRadius: 999, fontFamily: "var(--mm-font-sans)", fontSize: 12, color: "#fff", display: "flex", alignItems: "center", gap: 8, boxShadow: "0 8px 20px rgba(0,166,90,0.3)" }}>
      <IconCheck size={14} /> All 3 accepted.
    </div>
  </div>
);

const EventsVisual = () => (
  <div className="visual visual--events">
    <div className="visual__art-note">Event detail · coming soon</div>
    <div style={{ position: "absolute", inset: "12% 10% 12%", background: "#fff", borderRadius: 14, padding: 22, boxShadow: "0 20px 40px -15px rgba(20,31,46,0.2)", display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
        <div>
          <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 10, color: "#9A7A00", letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 600, marginBottom: 6 }}>★ Signature retreat</div>
          <div style={{ fontFamily: "var(--mm-font-serif)", fontSize: 22, fontWeight: 500, lineHeight: 1.15, color: "#141F2E" }}>A long weekend, four tables.</div>
          <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 12, color: "#666B85", marginTop: 3 }}>A place worth the drive · American Mahjong</div>
        </div>
        <span className="pill pill--gold"><i /> Soon</span>
      </div>
      <hr style={{ border: 0, height: 1, background: "#E0E6EB" }} />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, fontFamily: "var(--mm-font-sans)", fontSize: 12 }}>
        <div><div style={{ fontSize: 9.5, color: "#666B85", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 3 }}>When</div><div style={{ fontSize: 13, fontWeight: 500 }}>Post-launch · 2026</div></div>
        <div><div style={{ fontSize: 9.5, color: "#666B85", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 3 }}>Level</div><div style={{ fontSize: 13, fontWeight: 500 }}>All welcome</div></div>
        <div><div style={{ fontSize: 9.5, color: "#666B85", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 3 }}>Host</div><div style={{ fontSize: 13, fontWeight: 500 }}>Vetted partner ★</div></div>
        <div><div style={{ fontSize: 9.5, color: "#666B85", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 3 }}>Rate</div><div style={{ fontSize: 13, fontWeight: 500 }}>All-in pricing</div></div>
      </div>
      <div style={{ height: 40, background: "#00A65A", color: "#fff", borderRadius: 4, display: "grid", placeItems: "center", fontFamily: "var(--mm-font-sans)", fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 500, marginTop: "auto" }}>
        Notify Me When Live
      </div>
    </div>
  </div>
);

const HostVisual = () => (
  <div className="visual visual--teachers">
    <div className="visual__art-note">Host tools · app preview</div>
    <div style={{ position: "absolute", inset: "10% 10% 10%", background: "#fff", borderRadius: 14, padding: 22, boxShadow: "0 20px 40px -15px rgba(20,31,46,0.2)", display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <Avatar initial="★" gradient="green-gold" size={48} />
        <div>
          <div style={{ fontFamily: "var(--mm-font-serif)", fontSize: 20, fontWeight: 500 }}>Your Sunday table</div>
          <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 11.5, color: "#666B85", marginTop: 2 }}>Standing invitation · hosted by you</div>
        </div>
        <div style={{ marginLeft: "auto", fontFamily: "var(--mm-font-serif)", fontSize: 16, fontWeight: 500, color: "#9A7A00" }}>★ Host</div>
      </div>
      <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 10, color: "#666B85", letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 500 }}>This month · pick your dates</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 4, fontFamily: "var(--mm-font-sans)", fontSize: 11 }}>
        {["M", "T", "W", "T", "F", "S", "S"].map((d, i) => (
          <div key={i} style={{ textAlign: "center", color: "#666B85", padding: 3, fontSize: 10, letterSpacing: "0.08em" }}>{d}</div>
        ))}
        {[7, 8, 9, 10, 11, 12, 13].map((d, i) => {
          const hosting = [false, false, false, false, false, false, true][i];
          return (
            <div key={d} style={{
              padding: "8px 0", textAlign: "center", borderRadius: 6,
              background: hosting ? "#00A65A" : "rgba(0,166,90,0.04)",
              color: hosting ? "#fff" : "#141F2E",
              fontWeight: hosting ? 600 : 500,
              border: hosting ? "0" : "1px solid rgba(0,166,90,0.1)"
            }}>{d}</div>
          );
        })}
      </div>
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
        {["2 pm", "4 pm", "7 pm"].map((t, i) => (
          <div key={t} style={{
            padding: "6px 12px", borderRadius: 999, fontSize: 11.5, fontFamily: "var(--mm-font-sans)",
            background: i === 0 ? "#00A65A" : "#fff", color: i === 0 ? "#fff" : "#141F2E",
            border: i === 0 ? "1px solid #00A65A" : "1px solid #E0E6EB", fontWeight: 500
          }}>{t}</div>
        ))}
      </div>
      <div style={{ height: 40, background: "#00A65A", color: "#fff", borderRadius: 4, display: "grid", placeItems: "center", fontFamily: "var(--mm-font-sans)", fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 500, marginTop: "auto" }}>
        Open Seats to Matches
      </div>
    </div>
  </div>
);

const Features = () => (
  <section className="features section-pad" id="features">
    <div className="container">
      <SectionHead
        eyebrow="What's inside"
        title="Everything that makes a good table."
        lede="The group text, the calendar, the seat that keeps going open — all set in one place that feels less like an app and more like a reservation book."
      />

      <div style={{ marginTop: 64 }}>
        <FeatRow
          eyebrow="Matchmaking"
          title="Matched like a proper dinner party."
          body="We pair by neighborhood, skill, and the kind of evening you want. No swiping, no feeds. Just a quiet handshake between four people with Sunday free."
          bullets={["Skill built from real games, not self-reporting", "American Mahjong · NMJL card focus", "Standing invitations for the tables that click"]}
          cta="See how matching works"
          visual={<PlayerProfileVisual />}
        />
        <FeatRow
          reverse
          eyebrow="Match flow"
          title="One tap to ask. One tap to confirm."
          body="Send a match, everyone sees the same evening, the host approves. No long threads. No chasing. The calendar event writes itself."
          bullets={["Match cards with a shared table view", "Waitlist with automatic promotion", "Polite cancellation with one tap — no explaining"]}
          cta="Preview the flow"
          visual={<MatchFlowVisual />}
        />
        <FeatRow
          eyebrow="Events · coming soon"
          title="Club nights, retreats, and Tuesday games."
          body="After launch, we'll roll out club nights at partner venues, beginner tables, charity tournaments, and seasonal retreats — state by state, with hosts we've worked with directly."
          bullets={["Club nights: standing weekly tables at partner venues", "Beginner tables: learn the card, no performance review", "Charity tournaments with verified proceeds"]}
          cta="See what's on the board"
          visual={<EventsVisual />}
        />
        <FeatRow
          reverse
          eyebrow="For hosts"
          title="Host a standing game without the herding."
          body="Open your Sunday afternoon to matches. Approve each player, lock the seat count, and let the app handle the reminders, waitlist, and the polite no-shows."
          bullets={["Approve every match — it's your table", "Built-in waitlist and auto-promotion", "A ★ Founding Host pin for early beta hosts"]}
          cta="Become a host"
          visual={<HostVisual />}
        />
      </div>
    </div>
  </section>
);

Object.assign(window, { Features });