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

  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes" doctype-system="about:legacy-compat"/>

  <xsl:template match="/">
    <html lang="en">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>XML Sitemap — JOE13</title>
        <style type="text/css">
          :root {
            --bg: #f4f7fb;
            --card: #ffffff;
            --ink: #0f172a;
            --muted: #64748b;
            --line: #e2e8f0;
            --brand: #2165a3;
            --brand-soft: #e8f2fb;
            --ok: #0f766e;
          }
          * { box-sizing: border-box; }
          body {
            margin: 0;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(180deg, #dceaf8 0%, var(--bg) 220px);
            color: var(--ink);
            line-height: 1.5;
          }
          .wrap { max-width: 1100px; margin: 0 auto; padding: 40px 20px 64px; }
          .hero {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 28px 32px;
            box-shadow: 0 10px 30px rgba(33, 101, 163, 0.08);
            margin-bottom: 24px;
          }
          .brand {
            color: var(--brand);
            font-weight: 700;
            letter-spacing: 0.04em;
            font-size: 14px;
            text-transform: uppercase;
            margin: 0 0 8px;
          }
          h1 { margin: 0 0 10px; font-size: 28px; font-weight: 700; }
          .lead { margin: 0; color: var(--muted); max-width: 62ch; }
          .stats {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 20px;
          }
          .stat {
            background: var(--brand-soft);
            color: var(--brand);
            border-radius: 999px;
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 600;
          }
          .note {
            margin-top: 16px;
            font-size: 13px;
            color: var(--muted);
          }
          .note a { color: var(--brand); }
          .card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
          }
          table { width: 100%; border-collapse: collapse; }
          th, td {
            padding: 14px 16px;
            text-align: left;
            border-bottom: 1px solid var(--line);
            vertical-align: top;
            font-size: 14px;
          }
          th {
            background: #f8fafc;
            color: var(--muted);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
          }
          tr:last-child td { border-bottom: 0; }
          tr:hover td { background: #f8fbff; }
          a.url {
            color: var(--brand);
            text-decoration: none;
            word-break: break-all;
            font-weight: 600;
          }
          a.url:hover { text-decoration: underline; }
          .meta { color: var(--muted); white-space: nowrap; }
          .prio {
            display: inline-block;
            min-width: 42px;
            text-align: center;
            background: #ecfdf5;
            color: var(--ok);
            border-radius: 8px;
            padding: 4px 8px;
            font-weight: 700;
            font-size: 12px;
          }
          .alts { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
          .alt {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            background: #f1f5f9;
            color: #334155;
            border-radius: 6px;
            padding: 3px 8px;
            text-decoration: none;
          }
          .alt:hover { background: var(--brand-soft); color: var(--brand); }
          @media (max-width: 720px) {
            .hide-sm { display: none; }
            h1 { font-size: 22px; }
          }
        </style>
      </head>
      <body>
        <div class="wrap">
          <div class="hero">
            <p class="brand">JOE13</p>
            <h1>XML Sitemap</h1>
            <p class="lead">
              This sitemap lists public pages for search engines. It is generated automatically from the live site and CMS content.
            </p>
            <div class="stats">
              <div class="stat">
                <xsl:value-of select="count(sitemap:urlset/sitemap:url)"/> URLs
              </div>
              <div class="stat">Arabic + English</div>
              <div class="stat">hreflang alternates included</div>
            </div>
            <p class="note">
              For crawlers this file is standard XML.
              Human-friendly view via XSL.
              Official reference:
              <a href="https://www.sitemaps.org/" rel="noopener noreferrer">sitemaps.org</a>
            </p>
          </div>

          <div class="card">
            <table>
              <thead>
                <tr>
                  <th>URL</th>
                  <th class="hide-sm">Last Modified</th>
                  <th class="hide-sm">Change</th>
                  <th>Priority</th>
                </tr>
              </thead>
              <tbody>
                <xsl:for-each select="sitemap:urlset/sitemap:url">
                  <xsl:sort select="sitemap:priority" order="descending"/>
                  <xsl:sort select="sitemap:loc" order="ascending"/>
                  <tr>
                    <td>
                      <a class="url" href="{sitemap:loc}">
                        <xsl:value-of select="sitemap:loc"/>
                      </a>
                      <div class="alts">
                        <xsl:for-each select="xhtml:link">
                          <a class="alt" href="{@href}">
                            <xsl:value-of select="@hreflang"/>
                          </a>
                        </xsl:for-each>
                      </div>
                    </td>
                    <td class="meta hide-sm">
                      <xsl:value-of select="substring(sitemap:lastmod, 1, 10)"/>
                    </td>
                    <td class="meta hide-sm">
                      <xsl:value-of select="sitemap:changefreq"/>
                    </td>
                    <td>
                      <span class="prio">
                        <xsl:value-of select="sitemap:priority"/>
                      </span>
                    </td>
                  </tr>
                </xsl:for-each>
              </tbody>
            </table>
          </div>
        </div>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>
