---
import Base from '../layouts/Base.astro';
---
<Base title="API Pricing" description="API Pricing — leeworks.dev — compare plans for ZIP Enrichment, Holidays, Air Quality, and VIN Decoder APIs">
  <style>
    .pricing-hero { padding: 4rem 2rem 2rem; text-align: center; }
    .pricing-hero h1 { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, #90cdf4, #667eea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; }
    .pricing-hero p { font-size: 1.15rem; color: #a0aec0; max-width: 600px; margin: 0 auto 2rem; }
    .pricing-wrap { padding: 1rem 2rem 3rem; max-width: 1100px; margin: 0 auto; overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; background: #1a1d27; border-radius: 12px; overflow: hidden; min-width: 640px; }
    caption { caption-side: top; text-align: left; font-size: 0.875rem; color: #718096; padding: 0.75rem 1rem; font-style: italic; }
    thead tr { background: #2d3748; }
    th, td { padding: 0.9rem 1.25rem; text-align: left; border-bottom: 1px solid #2d3748; }
    th { font-weight: 700; color: #90cdf4; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; }
    td { color: #e2e8f0; font-size: 0.95rem; }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr:hover { background: #232738; }
    .tier-name { font-weight: 600; color: #fff; }
    .tier-price { color: #9ae6b4; font-weight: 600; }
    .free-price { color: #68d391; }
    .cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 2.5rem 0 1rem; }
    .cta-btn { display: inline-block; background: #667eea; color: #fff; padding: 0.65rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
    .cta-btn:hover { background: #5a67d8; }
    .disclaimer { text-align: center; color: #718096; font-size: 0.85rem; margin-top: 2rem; padding: 0 2rem; }
  </style>

  <div class="pricing-hero">
    <h1>API Pricing</h1>
    <p>Simple, transparent pricing for all four APIs. Start free — upgrade when you need more.</p>
  </div>

  <div class="pricing-wrap">
    <table>
      <caption>All plans are monthly. Requests reset at the start of each billing cycle.</caption>
      <thead>
        <tr>
          <th scope="col">Tier</th>
          <th scope="col">Price / mo</th>
          <th scope="col">ZIP Enrichment</th>
          <th scope="col">Holidays</th>
          <th scope="col">Air Quality</th>
          <th scope="col">VIN Decoder</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="tier-name">Free</td>
          <td class="tier-price free-price">$0</td>
          <td>100 req/mo &middot; 5 req/min</td>
          <td>100 req/mo &middot; 5 req/min</td>
          <td>100 req/mo &middot; 5 req/min</td>
          <td>100 req/mo &middot; 5 req/min</td>
        </tr>
        <tr>
          <td class="tier-name">Basic</td>
          <td class="tier-price">$9</td>
          <td>5,000 req/mo &middot; 60 req/min</td>
          <td>5,000 req/mo &middot; 60 req/min</td>
          <td>5,000 req/mo &middot; 60 req/min</td>
          <td>5,000 req/mo &middot; 60 req/min</td>
        </tr>
        <tr>
          <td class="tier-name">Pro</td>
          <td class="tier-price">$19</td>
          <td>25,000 req/mo &middot; 200 req/min</td>
          <td>20,000 req/mo &middot; 200 req/min</td>
          <td>20,000 req/mo &middot; 200 req/min</td>
          <td>20,000 req/mo &middot; 200 req/min</td>
        </tr>
        <tr>
          <td class="tier-name">Ultra</td>
          <td class="tier-price">$49</td>
          <td>100,000 req/mo &middot; 500 req/min</td>
          <td>100,000 req/mo &middot; 500 req/min</td>
          <td>100,000 req/mo &middot; 500 req/min</td>
          <td>100,000 req/mo &middot; 500 req/min</td>
        </tr>
      </tbody>
    </table>

    <div class="cta-row">
      <a href="#" class="cta-btn">ZIP Enrichment on RapidAPI</a>
      <a href="#" class="cta-btn">Holidays on RapidAPI</a>
      <a href="#" class="cta-btn">Air Quality on RapidAPI</a>
      <a href="/vin-decoder" class="cta-btn">VIN Decoder Docs</a>
    </div>

    <p class="disclaimer">Subscriptions managed via RapidAPI marketplace. Prices shown in USD. Rate limits apply per API key.</p>
  </div>
</Base>