// MVP Membership page in the Wall language.
// Reframed from the old multi-tier studio membership into a single "MVP" tier
// with pricing TBD, in the renovation / opening-by-August framing.
function MembersPage() {
  const faqs = [
    ['Do I need to be an MVP to walk in?',
     'No. Once we reopen, the shop is open to everyone during business hours. Anyone can shop, browse, ask questions, sit at a table during open play, or attend ticketed events. MVP membership unlocks workspace access, included print time, MVP-only nights, MSRP pricing, and discounts.'],
    ['How does MSRP on sealed actually work?',
     'MVPs pay manufacturer suggested retail on sealed TCG product, full stop. Non-MVPs pay our shelf price, which reflects market conditions on high-demand sets. No special order forms, no upcharge for popular product.'],
    ['What about singles and opened product?',
     'MVPs get 10 to 20% off our current market price on singles, loose packs, and opened product. Our market price tracks TCGplayer and Cardmarket, so you start from a fair number, not a marked-up shelf tag. The exact MVP rate lands when pricing is announced.'],
    ['What is included print time?',
     'Time on the shared studio FDM and resin printers, with reasonable filament or resin included. Larger jobs, special materials, and post-processing are billed separately at MVP rates.'],
    ['Can I bring my own filament or paint?',
     'Yes. Bring your own materials any time. The included allowance is a convenience, not a requirement. We just ask that you check custom filament with the staff for the print farm so we know what is loaded.'],
    ['Are kids allowed in the workspace?',
     'Yes, with adult supervision for any tool use. We also run kids programs (after-school maker, STEM nights, beginner painting) where supervised group time is provided.'],
    ['What if I just want to come once?',
     'Day passes will be available at the counter. Walk-ins can also book paint station time, print time, or workshop seats individually.'],
    ['How do I cancel?',
     'Email or tell us in person. No retention loop, no fees. Your access stays active through the end of the paid month.'],
  ];

  return (
    <div className="wall-root wall-bg-plain tone-b">
      <WallTopbar active="MVP" />

      <section className="wall-page-hero" data-screen-label="MVP hero">
        <div className="wall-door-shift">MVP MEMBERSHIP · OPENING BY AUGUST</div>
        <h1 className="wall-page-title tone-b">Get the keys to the shop</h1>
        <p className="wall-page-pitch">
          MVPs get MSRP on sealed, MVP rates on singles, reserved seats on MVP nights,
          workspace and print time, and discounts across the studio. One membership, treated
          like the VIP you are. Pricing and sign-up open when the doors do.
        </p>
      </section>

      <section className="wall-sec" id="deal" data-screen-label="The MVP deal">
        <div className="wall-sec-kicker">THE MVP DEAL</div>
        <h2 className="wall-sec-title">No scalper markup. No allocation tax.</h2>
        <p className="wall-sec-sub">Buy how you actually play.</p>
        <div className="wall-perks">
          <div className="wall-perk">
            <div className="wall-perk-label">SEALED</div>
            <div className="wall-perk-value">MSRP, never above</div>
            <div className="wall-perk-sub">Booster boxes, bundles, collector packs, precons. MTG, Pokemon, and more.</div>
          </div>
          <div className="wall-perk">
            <div className="wall-perk-label">SINGLES &amp; OPEN PRODUCT</div>
            <div className="wall-perk-value">10 to 20% off</div>
            <div className="wall-perk-sub">MVP rate on singles, loose packs, and opened product. Final rate coming soon.</div>
          </div>
        </div>
      </section>

      <section className="wall-sec" id="membership" data-screen-label="MVP tier">
        <div className="wall-sec-kicker">MVPS ONLY</div>
        <h2 className="wall-sec-title">One tier. Everything in.</h2>
        <p className="wall-sec-sub">
          We're rolling the old multi-tier setup into a single MVP membership. Pricing is being
          set now and lands when we reopen.
        </p>
        <div className="wall-tier">
          <div className="wall-tier-name">MVP</div>
          <p className="wall-tier-pitch">Regulars at the tables and the bench, treated like the VIPs they are.</p>
          <ul className="wall-tier-list">
            <li>MSRP on sealed MTG, Pokemon, and TCG</li>
            <li>MVP rate on singles and open product (10 to 20% off)</li>
            <li>Full workspace access during open hours</li>
            <li>Reserved seats on MVP-only nights</li>
            <li>Included print time and paint station access</li>
            <li>Discounts on paint, filament, consumables, and commissions</li>
            <li>Priority sign-up on events, leagues, and workshops</li>
            <li>MVP Discord channel</li>
            <li>Full access to Arbiter, our AI rules judge and league manager</li>
          </ul>
          <span className="wall-tier-soon">pricing coming soon</span>
        </div>
      </section>

      <section className="wall-sec" data-screen-label="How it works">
        <div className="wall-sec-kicker">HOW IT WILL WORK</div>
        <h2 className="wall-sec-title">Sign up when the doors open</h2>
        <p className="wall-sec-sub">MVP sign-ups go live when we reopen, targeting August. Here's the shape of it.</p>
        <div className="wall-steps">
          <div className="wall-step">
            <div className="wall-step-num">1</div>
            <div className="wall-step-name">Get on the list</div>
            <p className="wall-step-desc">Reach out now and we'll hold you a spot. We'll ping you the second pricing and sign-up are live.</p>
          </div>
          <div className="wall-step">
            <div className="wall-step-num">2</div>
            <div className="wall-step-name">Pick MVP</div>
            <p className="wall-step-desc">One membership, month to month, no annual lock-in. Cancel anytime, no fees.</p>
          </div>
          <div className="wall-step">
            <div className="wall-step-num">3</div>
            <div className="wall-step-name">Get oriented</div>
            <p className="wall-step-desc">Quick tour, printer training if you need it, MVP card in hand.</p>
          </div>
          <div className="wall-step">
            <div className="wall-step-num">4</div>
            <div className="wall-step-name">Pull up a chair</div>
            <p className="wall-step-desc">Show up, use the gear, bring your projects, play your games. That's the whole pitch.</p>
          </div>
        </div>
      </section>

      <section className="wall-sec" data-screen-label="MVP FAQ">
        <div className="wall-sec-kicker">MVP FAQ</div>
        <h2 className="wall-sec-title">The questions people actually ask</h2>
        <div style={{ maxWidth: 760, margin: '26px auto 0', textAlign: 'left' }}>
          {faqs.map(([q, a], i) => (
            <details key={i} style={{ background: 'var(--black)', border: '1px solid var(--line)', borderLeft: '3px solid var(--acc-b)', borderRadius: 4, padding: '14px 18px', marginBottom: 10 }}>
              <summary style={{ cursor: 'pointer', fontFamily: '"Bungee", sans-serif', fontSize: 13, letterSpacing: '0.5px', color: 'var(--white)' }}>{q}</summary>
              <p style={{ margin: '12px 0 0', fontFamily: '"Grindy Brush", sans-serif', fontSize: 18, lineHeight: 1.6, color: 'var(--grey)' }}>{a}</p>
            </details>
          ))}
        </div>
      </section>

      <section className="wall-big-cta" id="join" data-screen-label="MVP CTA">
        <div className="wall-sec-kicker">WANT IN?</div>
        <h2 className="wall-sec-title">Get on the MVP list</h2>
        <p className="wall-sec-sub">Sign-ups open when we reopen. Drop us a line and we'll save you a seat.</p>
        <a className="wall-cta-btn tone-b" href="Contact Page.html?service=hobby-membership">GET ON THE LIST →</a>
      </section>

      <WallFooter />
    </div>
  );
}
window.MembersPage = MembersPage;