---
import Base from '../layouts/Base.astro';

const apiName = 'vin-decoder';
const title = 'VIN Decoder API';
const description = 'Decode any 17-character VIN into make, model, year, trim, engine, body class, and more. Powered by the NHTSA vPIC public-domain database.';
---
<Base title={title} description={description}>
  <style>
    #redoc-container { background: #fff; }
  </style>
  <div id="redoc-container"></div>
  <script is:inline define:vars={{ specUrl: `/specs/${apiName}.yaml` }}>
    // Load Redoc from CDN
    var script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/redoc@latest/bundles/redoc.standalone.js';
    script.onload = function () {
      Redoc.init(specUrl, {
        theme: {
          colors: { primary: { main: '#667eea' } },
          typography: { fontFamily: 'system-ui, sans-serif' },
        },
      }, document.getElementById('redoc-container'));
    };
    document.head.appendChild(script);
  </script>
</Base>