<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>This is {{FONT_NAME}} | Fullbleed Specimen</title>
  <link rel="stylesheet" href="{{FONT_CSS_FILE}}">
</head>
<body class="specimen-page">
  <main class="container py-4">
    <header class="hero card border-0 shadow-sm mb-4">
      <div class="card-body p-4 p-lg-5">
        <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
          <div>
            <p class="text-uppercase small fw-semibold text-primary-emphasis mb-2">Font Specimen</p>
            <h1 class="display-6 mb-2">This is {{FONT_NAME}}</h1>
            <p class="lead mb-2">
              A multilingual specimen page for deterministic PDF rendering with fullbleed.
            </p>
            <p class="small text-muted mb-0">
              Package: <code>{{FONT_PACKAGE}}</code> | Group: <code>{{FONT_GROUP}}</code>
            </p>
          </div>
          <div class="d-flex flex-column gap-2 align-items-end">
            <span class="badge {{FONT_STATUS_BADGE}}">{{FONT_STATUS}}</span>
            <span class="badge text-bg-dark">file: {{FONT_FILE}}</span>
            <span class="badge text-bg-info">license: {{FONT_LICENSE}}</span>
          </div>
        </div>
      </div>
    </header>

    <section class="card border-0 shadow-sm mb-4">
      <div class="card-body p-4">
        <h2 class="h4 mb-3">Language Coverage</h2>
        <p class="text-muted mb-3">
          Every line states "This is {{FONT_NAME}}" in a different language or script.
        </p>
        <div class="row g-3">
          {{LANGUAGE_SPECIMENS}}
        </div>
      </div>
    </section>

    <section class="card border-0 shadow-sm mb-4">
      <div class="card-body p-4">
        <h2 class="h4 mb-3">Bootstrap Surface</h2>
        <div class="row g-3">
          <div class="col-md-6">
            <div class="alert alert-primary mb-2">Layout and utility classes are active.</div>
            <div class="alert alert-success mb-0">Static components are print friendly.</div>
          </div>
          <div class="col-md-6">
            <table class="table table-sm table-striped mb-0">
              <thead>
                <tr><th>Feature</th><th>Status</th></tr>
              </thead>
              <tbody>
                <tr><td>Grid</td><td><span class="badge text-bg-success">ready</span></td></tr>
                <tr><td>Cards</td><td><span class="badge text-bg-success">ready</span></td></tr>
                <tr><td>Tables</td><td><span class="badge text-bg-success">ready</span></td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>

    <section class="card border-0 shadow-sm">
      <div class="card-body p-4">
        <h2 class="h4 mb-3">Machine Summary</h2>
        <pre class="machine-json"><code>{{MACHINE_SUMMARY_JSON}}</code></pre>
        <p class="small text-muted mt-3 mb-0">Generated: {{GENERATED_AT}}</p>
      </div>
    </section>
  </main>
</body>
</html>
