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

// Development build (unminified assets), same as BaseLayout.
const environment: string = 'development'

const now = new Date()
const generatedAt = formatUtcTimestamp(now)
---

<!--  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 === 'production' || environment === 'preview' ? (
                <a href="./changelog.html" class="link-secondary" rel="noopener">
                  v{site.version}
                </a>
              ) : (
                `Generated ${generatedAt}`
              )
            }
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>
<!--  END FOOTER  -->