<!DOCTYPE html>
<html lang="gu" data-theme="dark">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FontGuj - Gujarati Fonts for the Modern Web</title>
  
  <!-- SEO & Social Metadata -->
  <meta name="description" content="Beautiful Gujarati Typography. Completely Free. One-Line Integration. Hosted on Cloudflare Pages with zero-setup CSS integration.">
  <meta name="keywords" content="Gujarati fonts, Gujarati web fonts, FontGuj, UC Ajanta Two, Gujarati Unicode typography, Cloudflare Pages font CDN">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://fontguj.pages.dev/">
  
  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://fontguj.pages.dev/">
  <meta property="og:title" content="FontGuj - Gujarati Fonts for the Modern Web">
  <meta property="og:description" content="Beautiful Gujarati Typography. Completely Free. One-Line Integration.">
  <meta property="og:image" content="https://fontguj.pages.dev/favicon.svg">
  
  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  <meta name="theme-color" content="#0a0e17">

  <!-- Preload Primary Font Asset -->
  <link rel="preload" href="fonts/UCAjantaTwo-Bold.woff2" as="font" type="font/woff2" crossorigin>
  
  <!-- UI Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
  
  <!-- Stylesheets -->
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="css/UC_AjantaTwo.css">
</head>
<body>
  <div class="site-wrapper">
    <!-- Navbar -->
    <header class="navbar" id="top">
      <div class="container nav-container">
        <a href="#top" class="brand" aria-label="FontGuj Home">
          <div class="brand-icon">ગુ</div>
          <div class="brand-name">
            FontGuj
            <span class="badge-live"><span class="pulse-dot"></span> Free CDN</span>
          </div>
        </a>

        <nav>
          <ul class="nav-links">
            <li><a href="#catalog" class="nav-link">Font Library</a></li>
            <li><a href="#playground" class="nav-link">Live Playground</a></li>
            <li><a href="#integration" class="nav-link">CSS API</a></li>
            <li><a href="#compare" class="nav-link">Compare</a></li>
          </ul>
        </nav>

        <div class="nav-actions">
          <button id="themeToggleBtn" class="btn-icon" aria-label="Toggle theme" title="Toggle Theme">
            <svg id="themeIconSun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none;"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
            <svg id="themeIconMoon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
          </button>
          <a href="#playground" class="btn btn-primary btn-sm">Open Playground</a>
        </div>
      </div>
    </header>

    <main>
      <!-- Hero Section -->
      <section class="hero">
        <div class="container">
          <div class="hero-pill">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
            Free Public Web Font Platform
          </div>

          <h1 class="hero-title">
            Gujarati Fonts for the <span class="text-gradient">Modern Web</span>
          </h1>

          <p class="hero-subtitle">
            Beautiful Gujarati Typography. Completely Free. One-Line Integration.
          </p>

          <div style="display:flex; justify-content:center; gap:12px; flex-wrap:wrap;">
            <a href="#catalog" class="btn btn-primary">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
              Browse Fonts
            </a>
            <a href="#playground" class="btn btn-secondary">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
              Live Playground
            </a>
          </div>

          <div class="hero-badges">
            <div class="hero-badge-item">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
              No Registration or Login
            </div>
            <div class="hero-badge-item">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
              100% Free Forever
            </div>
            <div class="hero-badge-item">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
              Single &lt;link&gt; CSS API
            </div>
            <div class="hero-badge-item">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
              CORS Enabled
            </div>
          </div>
        </div>
      </section>

      <!-- Control & Filter Bar -->
      <div class="control-bar" id="catalog">
        <div class="container">
          <div class="controls-grid">
            <!-- Search -->
            <div class="search-wrapper">
              <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
              <input type="text" id="fontSearchInput" class="search-input" placeholder="Search Gujarati fonts by name..." aria-label="Search fonts">
            </div>

            <!-- Custom Preview Phrase Input -->
            <div>
              <input type="text" id="globalPreviewInput" class="preview-text-input" value="જય સ્વામિનારાયણ" placeholder="Type custom Gujarati text to preview across all fonts..." aria-label="Custom preview text">
            </div>

            <!-- Size Slider -->
            <div class="size-control">
              <span class="size-label" id="sizeValueDisplay">38px</span>
              <input type="range" id="fontSizeSlider" class="slider-range" min="16" max="96" value="38" aria-label="Font preview size">
            </div>

            <!-- Reset Button -->
            <button id="resetFiltersBtn" class="btn btn-outline btn-sm" title="Reset controls">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2.5 2v6h6M21.5 22v-6h-6"/><path d="M22 11.5A10 10 0 0 0 3.2 7.2M2 12.5a10 10 0 0 0 18.8 4.3"/></svg>
              Reset
            </button>
          </div>

          <!-- Sample Phrases -->
          <div class="sample-presets">
            <span style="font-size:0.75rem; color:var(--text-faint); display:flex; align-items:center;">Sample Text:</span>
            <button class="preset-chip" data-phrase="જય સ્વામિનારાયણ">જય સ્વામિનારાયણ</button>
            <button class="preset-chip" data-phrase="ગુજરાતી ભાષા આપણી ઓળખ છે.">ગુજરાતી ભાષા આપણી ઓળખ છે.</button>
            <button class="preset-chip" data-phrase="અક્ષર પુરુષોત્તમ મહારાજ">અક્ષર પુરુષોત્તમ મહારાજ</button>
            <button class="preset-chip" data-phrase="સ્વાગત છે આપનું">સ્વાગત છે આપનું</button>
            <button class="preset-chip" data-phrase="ક્ષ જ્ઞ શ્ર ત્ત દ્ધ ક્ર ગ્ર પ્ર">ક્ષ જ્ઞ શ્ર ત્ત દ્ધ ક્ર ગ્ર પ્ર</button>
            <button class="preset-chip" data-phrase="૧ ૨ ૩ ૪ ૫ ૬ ૭ ૮ ૯ ૦">૧ ૨ ૩ ૪ ૫ ૬ ૭ ૮ ૯ ૦</button>
          </div>
        </div>
      </div>

      <!-- Fonts Library Grid -->
      <section class="container" style="padding-bottom: 40px;">
        <div class="category-tabs" id="categoryTabs">
          <button class="tab-btn active" data-category="all">All Fonts (<span id="totalFontCount">1</span>)</button>
          <button class="tab-btn" data-category="Display">Display</button>
          <button class="tab-btn" data-category="Sans-Serif">Sans-Serif</button>
          <button class="tab-btn" data-category="Serif">Serif</button>
        </div>

        <div class="fonts-grid" id="fontsGridContainer">
          <!-- Rendered dynamically via app.js -->
        </div>
      </section>

      <!-- Advanced Live Font Preview Playground -->
      <section class="playground-section" id="playground">
        <div class="container">
          <div style="text-align: center; margin-bottom: 32px;">
            <span class="hero-pill">Interactive Typography Studio</span>
            <h2 style="font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:8px;">
              Live Font <span class="text-gradient">Playground</span>
            </h2>
            <p style="color:var(--text-muted); font-size:1rem; max-width:620px; margin:0 auto;">
              Type in real-time, test complex Gujarati conjuncts, fine-tune typography sliders, and compare styles side by side before integrating.
            </p>
          </div>

          <div class="playground-container">
            <!-- Top Toolbar -->
            <div class="pg-top-toolbar">
              <div class="pg-toolbar-left">
                <!-- Font Family -->
                <div class="pg-tool-item">
                  <span style="font-size:0.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase;">Font:</span>
                  <select id="pgFontSelect" class="pg-select" aria-label="Select font">
                    <option value="UC_AjantaTwo">UC Ajanta Two (Bold 700)</option>
                  </select>
                </div>

                <!-- Font Size Slider + Number Input (12px to 200px) -->
                <div class="pg-tool-item">
                  <span style="font-size:0.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase;">Size:</span>
                  <div class="pg-size-box">
                    <input type="range" id="pgSizeSlider" class="slider-range" min="12" max="200" value="54" aria-label="Font size slider">
                    <input type="number" id="pgSizeNumber" class="pg-number-input" min="12" max="200" value="54" aria-label="Font size number">
                    <span style="font-size:0.75rem; color:var(--text-faint);">px</span>
                  </div>
                </div>

                <!-- Font Weight Selector (Supported weights only) -->
                <div class="pg-tool-item">
                  <span style="font-size:0.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase;">Weight:</span>
                  <select id="pgWeightSelect" class="pg-select" aria-label="Font weight">
                    <option value="700">Bold 700</option>
                  </select>
                </div>

                <!-- Text Alignment (Left, Center, Right) -->
                <div class="segmented-control" id="pgAlignGroup">
                  <button class="segmented-btn" data-align="left" title="Align Left">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>
                  </button>
                  <button class="segmented-btn active" data-align="center" title="Align Center">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="10" x2="6" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="18" y1="14" x2="6" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg>
                  </button>
                  <button class="segmented-btn" data-align="right" title="Align Right">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="21" y1="10" x2="7" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="7" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg>
                  </button>
                </div>
              </div>

              <div class="pg-toolbar-right">
                <!-- Toggle Compare Mode -->
                <button id="pgToggleCompareBtn" class="btn btn-secondary btn-sm" title="Compare fonts side by side">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="18"></rect><rect x="14" y="3" width="7" height="18"></rect></svg>
                  <span id="compareBtnLabel">Compare Mode</span>
                </button>

                <!-- Use Font CTA -->
                <button id="pgUseFontBtn" class="btn btn-primary btn-sm">
                  Use This Font
                </button>

                <!-- Reset Settings -->
                <button id="pgResetSettingsBtn" class="btn btn-outline btn-sm" title="Reset all typography settings">
                  Reset
                </button>
              </div>
            </div>

            <!-- Advanced Settings Bar (Letter spacing, Line height, Colors, Width) -->
            <div class="pg-advanced-bar" id="pgAdvancedBar">
              <!-- Letter Spacing (-2px to 10px) -->
              <div>
                <div class="pg-setting-label">
                  <span>Letter Spacing</span>
                  <span id="pgSpacingDisplay">0px</span>
                </div>
                <input type="range" id="pgSpacingSlider" class="slider-range" style="width:100%;" min="-2" max="10" step="0.5" value="0">
              </div>

              <!-- Line Height (0.8 to 3.0) -->
              <div>
                <div class="pg-setting-label">
                  <span>Line Height</span>
                  <span id="pgLineHeightDisplay">1.5</span>
                </div>
                <input type="range" id="pgLineHeightSlider" class="slider-range" style="width:100%;" min="0.8" max="3" step="0.1" value="1.5">
              </div>

              <!-- Text Color + HEX Input + Swatches -->
              <div>
                <div class="pg-setting-label">
                  <span>Text Color</span>
                  <span id="pgTextColorVal">#F8FAFC</span>
                </div>
                <div class="color-input-group">
                  <input type="color" id="pgTextColorPicker" class="color-swatch-picker" value="#f8fafc">
                  <input type="text" id="pgTextHexInput" class="hex-input" value="#F8FAFC" maxlength="7">
                  <div class="color-presets-row">
                    <span class="preset-color-dot" style="background:#ffffff;" data-color="#ffffff" title="White"></span>
                    <span class="preset-color-dot" style="background:#f97316;" data-color="#f97316" title="Saffron"></span>
                    <span class="preset-color-dot" style="background:#38bdf8;" data-color="#38bdf8" title="Sky Blue"></span>
                    <span class="preset-color-dot" style="background:#34d399;" data-color="#34d399" title="Emerald"></span>
                  </div>
                </div>
              </div>

              <!-- Background Color -->
              <div>
                <div class="pg-setting-label">
                  <span>Background Color</span>
                  <span id="pgBgColorVal">#0B0F19</span>
                </div>
                <div class="color-input-group">
                  <input type="color" id="pgBgColorPicker" class="color-swatch-picker" value="#0b0f19">
                  <input type="text" id="pgBgHexInput" class="hex-input" value="#0B0F19" maxlength="7">
                  <div class="color-presets-row">
                    <span class="preset-color-dot" style="background:#0b0f19;" data-bg="#0b0f19" title="Deep Dark"></span>
                    <span class="preset-color-dot" style="background:#1e293b;" data-bg="#1e293b" title="Slate"></span>
                    <span class="preset-color-dot" style="background:#f8fafc;" data-bg="#f8fafc" title="Light"></span>
                    <span class="preset-color-dot" style="background:#ffffff;" data-bg="#ffffff" title="White"></span>
                  </div>
                </div>
              </div>

              <!-- Preview Width Slider (320px to 100%) -->
              <div>
                <div class="pg-setting-label">
                  <span>Preview Width</span>
                  <span id="pgWidthDisplay">100% (Desktop)</span>
                </div>
                <div style="display:flex; align-items:center; gap:8px;">
                  <input type="range" id="pgWidthSlider" class="slider-range" style="width:100%;" min="320" max="1160" value="1160">
                  <button id="pgWidthFullBtn" class="btn btn-outline btn-sm" style="padding:2px 6px; font-size:0.7rem;">100%</button>
                </div>
              </div>
            </div>

            <!-- Main Interactive Canvas -->
            <div class="pg-canvas-wrapper" id="pgCanvasWrapper">
              <div class="pg-canvas-box" id="pgCanvasBox" style="max-width: 100%;">
                <div id="pgEditableArea" 
                     class="pg-editable-text" 
                     contenteditable="true" 
                     spellcheck="false" 
                     style="font-size: 54px; text-align: center; color: #f8fafc; font-family: 'UC_AjantaTwo', sans-serif;">
જય સ્વામિનારાયણ
ગુજરાતી ભાષા આપણી ઓળખ છે.
                </div>
              </div>
            </div>

            <!-- Font Comparison View (Hidden by default, shown when Compare Mode toggled) -->
            <div class="comparison-container" id="pgComparisonContainer" style="display: none;">
              <!-- Left Font Card -->
              <div class="comparison-card">
                <div class="comparison-header">
                  <div>
                    <strong style="font-size: 1rem;" id="compFontNameA">UC Ajanta Two</strong>
                    <span style="font-size: 0.75rem; color: var(--text-muted); display: block;">Primary Web Font (Bold 700)</span>
                  </div>
                  <span class="badge badge-primary">Selected Font</span>
                </div>
                <div class="comparison-text font-preview-comp-a" style="font-family: 'UC_AjantaTwo', sans-serif; font-size: 36px;">
                  જય સ્વામિનારાયણ
                </div>
              </div>

              <!-- Right Font Card: System/Baseline Font Comparison -->
              <div class="comparison-card">
                <div class="comparison-header">
                  <div>
                    <strong style="font-size: 1rem;">System / Noto Gujarati</strong>
                    <span style="font-size: 0.75rem; color: var(--text-muted); display: block;">Standard Baseline (Regular)</span>
                  </div>
                  <span class="badge">Baseline</span>
                </div>
                <div class="comparison-text font-preview-comp-b" style="font-family: system-ui, 'Noto Sans Gujarati', sans-serif; font-size: 36px; color: var(--text-muted);">
                  જય સ્વામિનારાયણ
                </div>
              </div>
            </div>

            <!-- Sample Texts Strip -->
            <div class="pg-samples-strip">
              <span style="font-size:0.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; white-space:nowrap;">Preset Samples:</span>
              <button class="preset-chip" data-sample="જય સ્વામિનારાયણ">જય સ્વામિનારાયણ</button>
              <button class="preset-chip" data-sample="ગુજરાતી ભાષા આપણી ઓળખ છે.">ગુજરાતી ભાષા આપણી ઓળખ છે.</button>
              <button class="preset-chip" data-sample="અક્ષર પુરુષોત્તમ મહારાજ">અક્ષર પુરુષોત્તમ મહારાજ</button>
              <button class="preset-chip" data-sample="સ્વાગત છે આપનું">સ્વાગત છે આપનું</button>
              <button class="preset-chip" data-sample="ક્ષ જ્ઞ શ્ર ત્ત દ્ધ ક્ર ગ્ર પ્ર">ક્ષ જ્ઞ શ્ર ત્ત દ્ધ ક્ર ગ્ર પ્ર (જોડાક્ષર)</button>
              <button class="preset-chip" data-sample="૧ ૨ ૩ ૪ ૫ ૬ ૭ ૮ ૯ ૦">૧ ૨ ૩ ૪ ૫ ૬ ૭ ૮ ૯ ૦</button>
              <button class="preset-chip" data-sample="ABCDEFGHIJKLMNOPQRSTUVWXYZ">A-Z (English Caps)</button>
              <button class="preset-chip" data-sample="abcdefghijklmnopqrstuvwxyz">a-z (English Small)</button>
            </div>
          </div>
        </div>
      </section>

      <!-- Public CSS Integration API Section -->
      <section class="container" id="integration" style="padding: 56px 24px;">
        <div style="text-align: center; margin-bottom: 36px;">
          <span class="hero-pill">Developer Integration</span>
          <h2 style="font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:8px;">
            Google Fonts–Style <span class="text-gradient">CSS API</span>
          </h2>
          <p style="color:var(--text-muted); font-size:1rem; max-width:640px; margin:0 auto;">
            Include a single <code>&lt;link&gt;</code> tag and start using Gujarati fonts across your HTML, React, Vue, or WordPress websites without installing anything.
          </p>
        </div>

        <div style="background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:28px; max-width:880px; margin:0 auto; box-shadow:var(--shadow-md);">
          <!-- Step 1 -->
          <div class="integration-step">
            <div class="step-label">
              <span>Step 1 &mdash; Add to HTML &lt;head&gt;</span>
            </div>
            <div class="step-code-box">
              <code class="step-code">&lt;link rel="stylesheet" href="https://fontguj.pages.dev/css?family=UC_AjantaTwo"&gt;</code>
              <button class="btn btn-primary btn-sm btn-copy-inline" data-text='&lt;link rel="stylesheet" href="https://fontguj.pages.dev/css?family=UC_AjantaTwo"&gt;'>
                Copy
              </button>
            </div>
          </div>

          <!-- Step 2 -->
          <div class="integration-step">
            <div class="step-label">
              <span>Step 2 &mdash; Apply CSS font-family</span>
            </div>
            <div class="step-code-box">
              <code class="step-code">body { font-family: 'UC_AjantaTwo', sans-serif; }</code>
              <button class="btn btn-secondary btn-sm btn-copy-inline" data-text="body { font-family: 'UC_AjantaTwo', sans-serif; }">
                Copy
              </button>
            </div>
          </div>

          <!-- Multi-family API -->
          <div class="integration-step" style="margin-bottom:0;">
            <div class="step-label">
              <span>Query Multiple Families (Pipe or Comma Separated)</span>
            </div>
            <div class="step-code-box">
              <code class="step-code">&lt;link rel="stylesheet" href="https://fontguj.pages.dev/css?family=UC_AjantaTwo|AnotherFont"&gt;</code>
              <button class="btn btn-outline btn-sm btn-copy-inline" data-text='&lt;link rel="stylesheet" href="https://fontguj.pages.dev/css?family=UC_AjantaTwo|AnotherFont"&gt;'>
                Copy
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- Footer (Strictly NO font file download links) -->
    <footer class="site-footer">
      <div class="container">
        <div class="footer-content">
          <div class="brand">
            <div class="brand-icon">ગુ</div>
            <div class="brand-name">
              FontGuj
              <span style="font-size:0.75rem; color:var(--text-muted); font-weight:400; display:block;">Public Gujarati Web Fonts Platform</span>
            </div>
          </div>

          <div style="display:flex; gap:20px; align-items:center; flex-wrap:wrap;">
            <a href="#catalog" class="nav-link">Font Library</a>
            <a href="#playground" class="nav-link">Live Playground</a>
            <a href="#integration" class="nav-link">CSS Integration API</a>
            <a href="test-integration.html" class="nav-link" target="_blank">Test Integration Page</a>
          </div>
        </div>

        <div class="footer-bottom">
          <span>&copy; 2026 FontGuj. Free, public Gujarati Unicode web typography for developers & designers.</span>
          <span>Hosted on Cloudflare Pages · <a href="https://fontguj.pages.dev/" target="_blank" style="color:var(--primary-500); text-decoration:none;">fontguj.pages.dev</a></span>
        </div>
      </div>
    </footer>
  </div>

  <!-- ==========================================================================
       USE FONT INTEGRATION MODAL (Strictly NO download buttons)
       ========================================================================== -->
  <div class="modal-overlay" id="useFontModal">
    <div class="modal-container">
      <button class="modal-close" id="closeUseFontModalBtn" aria-label="Close modal">&times;</button>
      
      <div style="margin-bottom: 24px;">
        <span class="badge badge-primary" id="modalCategoryBadge" style="margin-bottom:8px; display:inline-block;">Display</span>
        <h2 style="font-size: 1.6rem; font-weight:800; letter-spacing:-0.02em;" id="modalFontTitle">Use UC Ajanta Two</h2>
        <p style="color: var(--text-muted); font-size: 0.9rem; margin-top:4px;">
          Integrate this Gujarati font into your website with a single CSS link.
        </p>
      </div>

      <!-- Live Preview in Modal -->
      <div style="background:var(--bg-playground); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:16px; margin-bottom:20px; text-align:center;">
        <div id="modalPreviewBox" style="font-family: 'UC_AjantaTwo', sans-serif; font-size: 32px; font-weight: 700; color: var(--text-main);">
          જય સ્વામિનારાયણ
        </div>
      </div>

      <!-- Step 1: Add HTML link -->
      <div class="integration-step">
        <div class="step-label">
          <span>Step 1 &mdash; Add to HTML &lt;head&gt;</span>
        </div>
        <div class="step-code-box">
          <code class="step-code" id="modalHtmlLinkSnippet">&lt;link rel="stylesheet" href="https://fontguj.pages.dev/css?family=UC_AjantaTwo"&gt;</code>
          <button class="btn btn-primary btn-sm" id="modalCopyHtmlBtn">Copy</button>
        </div>
      </div>

      <!-- Step 2: Apply in CSS -->
      <div class="integration-step">
        <div class="step-label">
          <span>Step 2 &mdash; Apply CSS Rule</span>
        </div>
        <div class="step-code-box">
          <code class="step-code" id="modalCssRuleSnippet">font-family: 'UC_AjantaTwo', sans-serif;</code>
          <button class="btn btn-secondary btn-sm" id="modalCopyCssBtn">Copy</button>
        </div>
      </div>

      <!-- Framework Snippets Accordion -->
      <div style="margin-top:20px; border-top:1px solid var(--border-subtle); padding-top:16px;">
        <h4 style="font-size:0.8rem; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px;">Quick Framework Snippets:</h4>
        <div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;">
          <button class="preset-chip active" id="btnFrameworkHtml">Plain HTML</button>
          <button class="preset-chip" id="btnFrameworkNext">Next.js / React</button>
          <button class="preset-chip" id="btnFrameworkTailwind">Tailwind CSS</button>
        </div>
        <pre class="code-block" id="modalFrameworkCode" style="background:var(--bg-page); padding:12px; border-radius:8px; font-size:0.8rem;"></pre>
      </div>
    </div>
  </div>

  <!-- Toast Notification Container -->
  <div class="toast-container" id="toastContainer" aria-live="polite"></div>

  <!-- Application Script -->
  <script src="app.js"></script>
</body>
</html>
