<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
    
    <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
    
    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title>XML Sitemap</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                <meta name="robots" content="noindex,follow"/>
                <style type="text/css">
                    body {
                        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
                        font-size: 14px;
                        color: #1f2937;
                        background: #f3f4f6;
                        margin: 0;
                        padding: 20px;
                    }
                    .container {
                        max-width: 1200px;
                        margin: 0 auto;
                    }
                    .header {
                        background: linear-gradient(135deg, #4B5563 0%, #374151 30%, #1E40AF 70%, #3B82F6 100%);
                        color: #fff;
                        padding: 30px 40px;
                        border-radius: 12px;
                        margin-bottom: 30px;
                        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
                    }
                    .header h1 {
                        margin: 0 0 10px 0;
                        font-size: 28px;
                        font-weight: 700;
                    }
                    .header p {
                        margin: 0;
                        opacity: 0.9;
                        font-size: 15px;
                    }
                    .stats {
                        display: flex;
                        gap: 20px;
                        margin-bottom: 30px;
                    }
                    .stat-card {
                        background: #fff;
                        padding: 20px 30px;
                        border-radius: 8px;
                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                    }
                    .stat-card .number {
                        font-size: 32px;
                        font-weight: 700;
                        color: #3B82F6;
                    }
                    .stat-card .label {
                        color: #6b7280;
                        font-size: 13px;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                    }
                    .content {
                        background: #fff;
                        border-radius: 12px;
                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                        overflow: hidden;
                    }
                    table {
                        width: 100%;
                        border-collapse: collapse;
                    }
                    th {
                        background: #f9fafb;
                        padding: 14px 20px;
                        text-align: left;
                        font-weight: 600;
                        color: #374151;
                        font-size: 12px;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                        border-bottom: 2px solid #e5e7eb;
                    }
                    td {
                        padding: 14px 20px;
                        border-bottom: 1px solid #f3f4f6;
                    }
                    tr:hover td {
                        background: #f9fafb;
                    }
                    tr:last-child td {
                        border-bottom: none;
                    }
                    a {
                        color: #2563eb;
                        text-decoration: none;
                        word-break: break-all;
                    }
                    a:hover {
                        text-decoration: underline;
                    }
                    .priority {
                        display: inline-block;
                        padding: 4px 10px;
                        border-radius: 20px;
                        font-size: 12px;
                        font-weight: 600;
                    }
                    .priority-high {
                        background: #dcfce7;
                        color: #166534;
                    }
                    .priority-medium {
                        background: #fef3c7;
                        color: #92400e;
                    }
                    .priority-low {
                        background: #f3f4f6;
                        color: #6b7280;
                    }
                    .changefreq {
                        color: #6b7280;
                        font-size: 13px;
                    }
                    .lastmod {
                        color: #6b7280;
                        font-size: 13px;
                        white-space: nowrap;
                    }
                    .footer {
                        text-align: center;
                        padding: 20px;
                        color: #9ca3af;
                        font-size: 13px;
                    }
                    .footer a {
                        color: #6b7280;
                    }
                    @media (max-width: 768px) {
                        .stats {
                            flex-direction: column;
                        }
                        th, td {
                            padding: 10px 15px;
                        }
                    }
                </style>
            </head>
            <body>
                <div class="container">
                    <div class="header">
                        <h1>XML Sitemap</h1>
                        <p>This sitemap contains <xsl:value-of select="count(sitemap:urlset/sitemap:url)"/> URLs and was generated for search engines to discover and index your content.</p>
                    </div>
                    
                    <xsl:if test="count(sitemap:urlset/sitemap:url) &gt; 0">
                        <div class="stats">
                            <div class="stat-card">
                                <div class="number"><xsl:value-of select="count(sitemap:urlset/sitemap:url)"/></div>
                                <div class="label">Total URLs</div>
                            </div>
                        </div>
                    </xsl:if>
                    
                    <div class="content">
                        <table>
                            <tr>
                                <th>URL</th>
                                <th>Priority</th>
                                <th>Change Freq</th>
                                <th>Last Modified</th>
                            </tr>
                            <xsl:for-each select="sitemap:urlset/sitemap:url">
                                <tr>
                                    <td>
                                        <a href="{sitemap:loc}"><xsl:value-of select="sitemap:loc"/></a>
                                    </td>
                                    <td>
                                        <xsl:variable name="priority" select="sitemap:priority"/>
                                        <xsl:choose>
                                            <xsl:when test="$priority &gt;= 0.7">
                                                <span class="priority priority-high"><xsl:value-of select="sitemap:priority"/></span>
                                            </xsl:when>
                                            <xsl:when test="$priority &gt;= 0.4">
                                                <span class="priority priority-medium"><xsl:value-of select="sitemap:priority"/></span>
                                            </xsl:when>
                                            <xsl:otherwise>
                                                <span class="priority priority-low"><xsl:value-of select="sitemap:priority"/></span>
                                            </xsl:otherwise>
                                        </xsl:choose>
                                    </td>
                                    <td>
                                        <span class="changefreq"><xsl:value-of select="sitemap:changefreq"/></span>
                                    </td>
                                    <td>
                                        <span class="lastmod"><xsl:value-of select="sitemap:lastmod"/></span>
                                    </td>
                                </tr>
                            </xsl:for-each>
                        </table>
                    </div>
                    
                    <div class="footer">
                        Generated by <a href="https://www.crucibleinsight.com">Developer Sitemap</a>
                    </div>
                </div>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>
