---
import Icon from '@ui/Icon.astro'
import { site } from '@shared/lib/site'
import { formatUtcTimestamp } from '@shared/lib/date-format'

// Set to "preview" on the branch deploys, same as robots.txt and sitemap.xml.
const environment = process.env.NODE_ENV || 'production'

const now = new Date()
---

<!--  BEGIN FOOTER  -->
<footer class="footer footer-transparent d-print-none">
  <div class="container-xl">
    <div class="row text-center align-items-center flex-row-reverse">
      <div class="col-lg-auto ms-lg-auto">
        <nav aria-label="Footer">
          <ul class="list-inline list-inline-dots mb-0">
            <li class="list-inline-item">
              <a href={site.docsUrl} target="_blank" class="link-secondary" rel="noopener"> Documentation </a>
            </li>
            <li class="list-inline-item">
              <a href="./license.html" class="link-secondary">License</a>
            </li>
            <li class="list-inline-item">
              <a href={site.githubUrl} target="_blank" class="link-secondary" rel="noopener"> Source code </a>
            </li>
            <li class="list-inline-item">
              <a href={site.githubSponsorsUrl} target="_blank" class="link-secondary" rel="noopener">
                {/* filled prop ignored — only type matters, heart renders as outline */}
                <Icon name="heart" inline color="pink" />
                Sponsor
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="col-12 col-lg-auto mt-3 mt-lg-0">
        <ul class="list-inline list-inline-dots mb-0">
          <li class="list-inline-item">
            Copyright &copy; {now.getUTCFullYear()}
            <a href="." class="link-secondary">{site.title}</a>. All rights reserved.
          </li>
          <li class="list-inline-item">
            {
              environment === 'preview' ? (
                `Generated ${formatUtcTimestamp(now)}`
              ) : (
                <a href="./changelog.html" class="link-secondary" rel="noopener">
                  v{site.version}
                </a>
              )
            }
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>
<!--  END FOOTER  -->