---
import Base from '../layouts/Base.astro';
---
<Base title="Home" description="leeworks.dev — production-ready data APIs: ZIP Enrichment, Holidays, Air Quality">
  <style>
    .hero { padding: 5rem 2rem 3rem; text-align: center; }
    .hero h1 { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, #90cdf4, #667eea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; }
    .hero p { font-size: 1.25rem; color: #a0aec0; max-width: 600px; margin: 0 auto 2rem; }
    .cta { display: inline-block; background: #667eea; color: #fff; padding: 0.75rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 600; }
    .apis { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; padding: 2rem; max-width: 1100px; margin: 0 auto; }
    .api-card { background: #1a1d27; border: 1px solid #2d3748; border-radius: 12px; padding: 1.5rem; }
    .api-card h2 { color: #90cdf4; margin-bottom: 0.5rem; }
    .api-card p { color: #a0aec0; margin-bottom: 1rem; font-size: 0.95rem; }
    .badge { display: inline-block; font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 4px; margin-bottom: 0.75rem; }
    .badge.wip { background: #744210; color: #fbd38d; }
    .badge.live { background: #1a4731; color: #9ae6b4; }
    .links a { color: #90cdf4; text-decoration: none; margin-right: 1rem; }
    .links a:hover { text-decoration: underline; }
  </style>

  <div class="hero">
    <h1>Simple. Reliable. APIs.</h1>
    <p>Production-ready data APIs for ZIP enrichment, public holidays, air quality, and VIN decoding. Available on RapidAPI.</p>
    <a href="https://rapidapi.com/leeworks" class="cta" target="_blank" rel="noopener">Get API Key on RapidAPI</a>
  </div>

  <div class="apis">
    <div class="api-card">
      <span class="badge wip">In Development</span>
      <h2>ZIP Enrichment API</h2>
      <p>Enrich US ZIP codes with city, state, county, timezone, lat/long, and population data.</p>
      <div class="links">
        <a href="/zip-enrichment">Docs</a>
        <a href="https://rapidapi.com/leeworks/api/zip-enrichment" target="_blank" rel="noopener">RapidAPI</a>
      </div>
    </div>
    <div class="api-card">
      <span class="badge wip">In Development</span>
      <h2>Holidays API</h2>
      <p>Public holidays for 100+ countries, filterable by country, year, and type.</p>
      <div class="links">
        <a href="/holidays">Docs</a>
        <a href="https://rapidapi.com/leeworks/api/holidays" target="_blank" rel="noopener">RapidAPI</a>
      </div>
    </div>
    <div class="api-card">
      <span class="badge wip">In Development</span>
      <h2>Air Quality API</h2>
      <p>Real-time and historical AQI data worldwide including PM2.5, PM10, and health recommendations.</p>
      <div class="links">
        <a href="/air-quality">Docs</a>
        <a href="https://rapidapi.com/leeworks/api/air-quality" target="_blank" rel="noopener">RapidAPI</a>
      </div>
    </div>
    <div class="api-card">
      <span class="badge wip">In Development</span>
      <h2>VIN Decoder API</h2>
      <p>Decode any 17-character VIN into make, model, year, trim, engine, body class, and more. Powered by the NHTSA vPIC public-domain database.</p>
      <div class="links">
        <a href="/vin-decoder">Docs</a>
        <a href="https://rapidapi.com/leeworks/api/vin-decoder" target="_blank" rel="noopener">RapidAPI</a>
      </div>
    </div>
  </div>

  <footer style="text-align: center; padding: 2rem; border-top: 1px solid #2d3748; margin-top: 3rem; color: #718096; font-size: 0.875rem;">
    <p style="margin-bottom: 0.5rem;">&copy; 2026 leeworks.dev — All rights reserved.</p>
    <nav style="display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;">
      <a href="/legal/terms-of-service" style="color: #a0aec0; text-decoration: none;">Terms of Service</a>
      <a href="/legal/privacy-policy" style="color: #a0aec0; text-decoration: none;">Privacy Policy</a>
      <a href="/legal/acceptable-use-policy" style="color: #a0aec0; text-decoration: none;">Acceptable Use Policy</a>
      <a href="mailto:legal@leeworks.dev" style="color: #a0aec0; text-decoration: none;">Contact</a>
    </nav>
  </footer>
</Base>