export default function Tiers() {
  return (
    <section className="section" id="back">
      <div className="wrap">
        <div className="tiers-head">
          <div className="reveal">
            <span className="spec">When we launch</span>
            <h2>What backing will look like.</h2>
          </div>
          <p className="tiers-note reveal">
            Preview of planned pledge tiers. Final pricing is confirmed at the Kickstarter
            launch — nothing here is a live checkout yet.
          </p>
        </div>
        <div className="tier-grid">
          <div className="tier reveal">
            <div className="t-name">Supporter</div>
            <div className="t-price">$10</div>
            <div className="t-unit">one-time</div>
            <div className="t-desc">
              The preview chapter, community updates, and an early look at the founding library
              as it’s written.
            </div>
          </div>
          <div className="tier feature reveal">
            <div className="t-tag">The one to get</div>
            <div className="t-name">The Book</div>
            <div className="t-price">
              $47 <small>/yr</small>
            </div>
            <div className="t-unit">annual subscription</div>
            <div className="t-desc">
              The full guide — PDF + web reader — and every annual update while you’re
              subscribed. Recurring value, no lifetime gimmick.
            </div>
          </div>
          <div className="tier reveal">
            <div className="t-name">Founding Sponsor</div>
            <div className="t-price">Founding</div>
            <div className="t-unit">limited · final terms at launch</div>
            <div className="t-desc">
              A named acknowledgment in the guide, a private cohort seat, and a hand in shaping
              the first edition — the ground floor of something you helped build.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}