<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0"
                xmlns:html="http://www.w3.org/TR/REC-html40"
                xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
      <head>
        <title>XML Sitemap — Avante Architecture &amp; Facades</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style type="text/css">
          body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            color: #231F20;
            background-color: #f8fafc;
            margin: 0;
            padding: 0;
            line-height: 1.5;
          }
          .container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
          }
          .header {
            background-color: #231F20;
            color: #ffffff;
            padding: 32px 40px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            margin-bottom: 30px;
          }
          .header h1 {
            margin: 0 0 8px 0;
            font-size: 26px;
            font-weight: 700;
            letter-spacing: -0.5px;
          }
          .header p {
            margin: 0;
            color: #94a3b8;
            font-size: 14px;
            font-family: monospace;
          }
          .header .brand-tag {
            color: #84b010;
            font-weight: bold;
          }
          .intro-box {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-left: 4px solid #84b010;
            padding: 20px 24px;
            border-radius: 6px;
            margin-bottom: 24px;
            font-size: 14px;
            color: #475569;
          }
          .stats-bar {
            display: flex;
            gap: 16px;
            margin-bottom: 24px;
            flex-wrap: wrap;
          }
          .stat-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            padding: 14px 20px;
            border-radius: 6px;
            flex: 1;
            min-width: 160px;
          }
          .stat-card .num {
            font-size: 22px;
            font-weight: 700;
            color: #231F20;
          }
          .stat-card .label {
            font-size: 12px;
            color: #64748b;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.5px;
          }
          table {
            width: 100%;
            border-collapse: collapse;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
          }
          th {
            background-color: #f1f5f9;
            color: #334155;
            text-align: left;
            padding: 14px 18px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 700;
            border-bottom: 2px solid #e2e8f0;
          }
          td {
            padding: 14px 18px;
            font-size: 13px;
            border-bottom: 1px solid #f1f5f9;
            color: #334155;
          }
          tr:hover td {
            background-color: #f8fafc;
          }
          td.url-cell a {
            color: #2563eb;
            text-decoration: none;
            word-break: break-all;
            font-weight: 500;
          }
          td.url-cell a:hover {
            text-decoration: underline;
            color: #1d4ed8;
          }
          .priority-badge {
            display: inline-block;
            padding: 3px 8px;
            background-color: #f1f5f9;
            color: #475569;
            border-radius: 4px;
            font-size: 11px;
            font-family: monospace;
            font-weight: 700;
          }
          .footer {
            margin-top: 40px;
            text-align: center;
            font-size: 12px;
            color: #94a3b8;
            font-family: monospace;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <div class="header">
            <h1>XML Search Engine Sitemap</h1>
            <p>Generated by <span class="brand-tag">AVANTE CMS</span> — Automated Indexing &amp; SEO Engine</p>
          </div>

          <div class="intro-box">
            This XML Sitemap is automatically generated by <strong>Avante CMS</strong> to help search engines like Google, Bing, Yahoo, and DuckDuckGo discover and index your architecture portfolio, services, and blog articles efficiently.
          </div>

          <div class="stats-bar">
            <div class="stat-card">
              <div class="num"><xsl:value-of select="count(sitemap:urlset/sitemap:url)"/></div>
              <div class="label">Total Indexed URLs</div>
            </div>
            <div class="stat-card">
              <div class="num"><xsl:value-of select="count(sitemap:urlset/sitemap:url[contains(sitemap:loc, '/projects')])"/></div>
              <div class="label">Project URLs</div>
            </div>
            <div class="stat-card">
              <div class="num"><xsl:value-of select="count(sitemap:urlset/sitemap:url[contains(sitemap:loc, '/blog')])"/></div>
              <div class="label">Blog Articles</div>
            </div>
            <div class="stat-card">
              <div class="num"><xsl:value-of select="count(sitemap:urlset/sitemap:url[contains(sitemap:loc, '/services')])"/></div>
              <div class="label">Service Pages</div>
            </div>
          </div>

          <table>
            <thead>
              <tr>
                <th style="width: 55%;">URL Location</th>
                <th style="width: 15%;">Priority</th>
                <th style="width: 15%;">Change Freq</th>
                <th style="width: 15%;">Last Modified</th>
              </tr>
            </thead>
            <tbody>
              <xsl:for-each select="sitemap:urlset/sitemap:url">
                <tr>
                  <td class="url-cell">
                    <a href="{sitemap:loc}" target="_blank">
                      <xsl:value-of select="sitemap:loc"/>
                    </a>
                  </td>
                  <td>
                    <span class="priority-badge">
                      <xsl:value-of select="sitemap:priority"/>
                    </span>
                  </td>
                  <td style="text-transform: capitalize; font-size: 12px; color: #64748b;">
                    <xsl:value-of select="sitemap:changefreq"/>
                  </td>
                  <td style="font-family: monospace; font-size: 12px; color: #64748b;">
                    <xsl:value-of select="substring(sitemap:lastmod, 0, 11)"/>
                  </td>
                </tr>
              </xsl:for-each>
            </tbody>
          </table>

          <div class="footer">
            © <xsl:value-of select="substring(sitemap:urlset/sitemap:url[1]/sitemap:lastmod, 0, 5)"/> Avante Facades — Automated XML Sitemap Engine
          </div>
        </div>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>
