<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:sm="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:xhtml="http://www.w3.org/1999/xhtml"
    exclude-result-prefixes="sm xhtml">

  <xsl:output method="html" encoding="UTF-8" indent="yes"/>

  <!-- ─── Root template ─────────────────────────────────────────────────── -->
  <xsl:template match="/">
    <html lang="en">
      <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>Sitemap — TentServiceBihar.com</title>
        <style>
          * { box-sizing: border-box; margin: 0; padding: 0; }

          body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: #f8f5f0;
            color: #333;
            padding: 0 0 60px;
          }

          /* ── Header bar ─────────────────────────────────────── */
          .header {
            background: linear-gradient(135deg, #7b1c2c 0%, #a3263a 100%);
            color: #fff;
            padding: 28px 40px 24px;
            display: flex;
            align-items: center;
            gap: 20px;
            box-shadow: 0 3px 12px rgba(0,0,0,.25);
          }
          .header-icon {
            font-size: 2.4rem;
            line-height: 1;
          }
          .header-text h1 {
            font-size: 1.6rem;
            font-weight: 700;
            letter-spacing: .3px;
          }
          .header-text p {
            font-size: .85rem;
            opacity: .85;
            margin-top: 4px;
          }
          .badge {
            margin-left: auto;
            background: rgba(255,255,255,.15);
            border: 1px solid rgba(255,255,255,.3);
            border-radius: 20px;
            padding: 6px 16px;
            font-size: .8rem;
            white-space: nowrap;
          }

          /* ── Stats row ──────────────────────────────────────── */
          .stats {
            display: flex;
            gap: 16px;
            padding: 20px 40px;
            flex-wrap: wrap;
          }
          .stat-card {
            background: #fff;
            border-left: 4px solid #a3263a;
            border-radius: 8px;
            padding: 14px 22px;
            box-shadow: 0 2px 8px rgba(0,0,0,.07);
            min-width: 160px;
          }
          .stat-card .num {
            font-size: 1.8rem;
            font-weight: 700;
            color: #a3263a;
          }
          .stat-card .label {
            font-size: .78rem;
            color: #666;
            margin-top: 2px;
            text-transform: uppercase;
            letter-spacing: .5px;
          }

          /* ── Search box ─────────────────────────────────────── */
          .toolbar {
            padding: 0 40px 16px;
          }
          .search-box {
            width: 100%;
            max-width: 480px;
            padding: 10px 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: .9rem;
            outline: none;
            transition: border-color .2s;
          }
          .search-box:focus { border-color: #a3263a; }

          /* ── Table ──────────────────────────────────────────── */
          .table-wrap {
            padding: 0 40px;
            overflow-x: auto;
          }
          table {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0,0,0,.08);
          }
          thead tr {
            background: #7b1c2c;
            color: #fff;
            font-size: .82rem;
            text-transform: uppercase;
            letter-spacing: .6px;
          }
          thead th {
            padding: 13px 18px;
            text-align: left;
            font-weight: 600;
          }
          tbody tr {
            border-bottom: 1px solid #f0e8e8;
            transition: background .15s;
          }
          tbody tr:last-child { border-bottom: none; }
          tbody tr:hover { background: #fdf7f7; }
          tbody td {
            padding: 12px 18px;
            font-size: .88rem;
            vertical-align: middle;
          }
          td.url a {
            color: #a3263a;
            text-decoration: none;
            word-break: break-all;
          }
          td.url a:hover { text-decoration: underline; }
          td.priority .pill {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: .78rem;
            font-weight: 600;
          }
          .pri-high   { background: #fde8ec; color: #a3263a; }
          .pri-mid    { background: #fef3cd; color: #856404; }
          .pri-low    { background: #e8f5e9; color: #2e7d32; }
          td.freq     { color: #555; font-size: .82rem; }
          td.lastmod  { color: #777; font-size: .82rem; white-space: nowrap; }

          /* ── Footer ─────────────────────────────────────────── */
          .footer {
            text-align: center;
            margin-top: 36px;
            font-size: .78rem;
            color: #999;
          }
          .footer a { color: #a3263a; text-decoration: none; }

          @media (max-width: 640px) {
            .header, .stats, .toolbar, .table-wrap { padding-left: 16px; padding-right: 16px; }
            .badge { display: none; }
            thead th:nth-child(3), tbody td:nth-child(3),
            thead th:nth-child(4), tbody td:nth-child(4) { display: none; }
          }
        </style>
      </head>
      <body>

        <!-- Header -->
        <div class="header">
          <div class="header-icon">&#127916;</div>
          <div class="header-text">
            <h1>XML Sitemap</h1>
            <p>TentServiceBihar.com — all indexed pages listed below</p>
          </div>
          <div class="badge">&#128200; SEO Sitemap</div>
        </div>

        <!-- Stats -->
        <div class="stats">
          <div class="stat-card">
            <div class="num"><xsl:value-of select="count(sm:urlset/sm:url)"/></div>
            <div class="label">Total URLs</div>
          </div>
          <div class="stat-card">
            <div class="num"><xsl:value-of select="count(sm:urlset/sm:url[sm:priority &gt;= 0.9])"/></div>
            <div class="label">High Priority</div>
          </div>
          <div class="stat-card">
            <div class="num"><xsl:value-of select="count(sm:urlset/sm:url[sm:lastmod])"/></div>
            <div class="label">With Lastmod</div>
          </div>
          <div class="stat-card">
            <div class="num">&#9989;</div>
            <div class="label">Google-ready</div>
          </div>
        </div>

        <!-- Search -->
        <div class="toolbar">
          <input class="search-box" type="search" id="q" placeholder="&#128269;  Filter URLs…" oninput="filterTable(this.value)"/>
        </div>

        <!-- Table -->
        <div class="table-wrap">
          <table id="sitemapTable">
            <thead>
              <tr>
                <th>#</th>
                <th>URL</th>
                <th>Priority</th>
                <th>Change Freq</th>
                <th>Last Modified</th>
              </tr>
            </thead>
            <tbody>
              <xsl:for-each select="sm:urlset/sm:url">
                <xsl:variable name="pri" select="number(sm:priority)"/>
                <tr>
                  <td><xsl:value-of select="position()"/></td>
                  <td class="url">
                    <a href="{sm:loc}" target="_blank" rel="noopener">
                      <xsl:value-of select="sm:loc"/>
                    </a>
                  </td>
                  <td class="priority">
                    <xsl:choose>
                      <xsl:when test="$pri &gt;= 0.9">
                        <span class="pill pri-high"><xsl:value-of select="sm:priority"/></span>
                      </xsl:when>
                      <xsl:when test="$pri &gt;= 0.7">
                        <span class="pill pri-mid"><xsl:value-of select="sm:priority"/></span>
                      </xsl:when>
                      <xsl:otherwise>
                        <span class="pill pri-low"><xsl:value-of select="sm:priority"/></span>
                      </xsl:otherwise>
                    </xsl:choose>
                  </td>
                  <td class="freq"><xsl:value-of select="sm:changefreq"/></td>
                  <td class="lastmod">
                    <xsl:choose>
                      <xsl:when test="sm:lastmod">
                        <xsl:value-of select="substring(sm:lastmod, 1, 10)"/>
                      </xsl:when>
                      <xsl:otherwise>—</xsl:otherwise>
                    </xsl:choose>
                  </td>
                </tr>
              </xsl:for-each>
            </tbody>
          </table>
        </div>

        <!-- Footer -->
        <p class="footer">
          Generated by <a href="/">TentServiceBihar.com</a> ·
          <a href="/sitemap.xml">sitemap.xml</a> ·
          Submit to <a href="https://search.google.com/search-console" target="_blank" rel="noopener">Google Search Console</a>
        </p>

        <!-- Filter script -->
        <script>
          function filterTable(q) {
            q = q.toLowerCase();
            document.querySelectorAll('#sitemapTable tbody tr').forEach(function(row) {
              row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
            });
          }
        </script>

      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>
