<?php ?>
<footer class="border-t border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950">
  <div class="contain grid gap-10 py-10 md:grid-cols-[1.4fr_1fr_1fr]">
    <div>
      <a href="/" class="inline-flex items-center gap-3 font-semibold text-slate-950 dark:text-white" aria-label="Framex home">
        <span class="grid size-9 place-items-center rounded-lg bg-blue-600 text-sm font-bold text-white uppercase">Fx</span>
        <span>Framex v1.0.0</span>
      </a>
      <p class="mt-4 max-w-md text-sm leading-6 text-slate-600 dark:text-slate-400">
        A lightweight PHP engine for fast static sites, markdown pages, and modern frontends powered by Tailwind CSS.
      </p>
    </div>

    <div>
      <h2 class="text-sm font-semibold text-slate-950 dark:text-white">Build</h2>
      <div class="mt-4 grid gap-3 text-sm text-slate-600 dark:text-slate-400">
        <a class="hover:text-blue-600 dark:hover:text-blue-400" href="/#features">Features</a>
        <a class="hover:text-blue-600 dark:hover:text-blue-400" href="/#markdown">Markdown</a>
        <a class="hover:text-blue-600 dark:hover:text-blue-400" href="/#themes">Theme system</a>
      </div>
    </div>

    <div>
      <h2 class="text-sm font-semibold text-slate-950 dark:text-white">Project</h2>
      <div class="mt-4 grid gap-3 text-sm text-slate-600 dark:text-slate-400">
        <a class="hover:text-blue-600 dark:hover:text-blue-400" href="/docs">Docs</a>
        <a class="hover:text-blue-600 dark:hover:text-blue-400" href="/#start">Get started</a>
        <a class="hover:text-blue-600 dark:hover:text-blue-400" href="/">Home</a>
      </div>
    </div>
  </div>

  <div class="border-t border-slate-200 py-5 dark:border-slate-800">
    <div class="contain flex flex-col gap-2 text-sm text-slate-500 sm:flex-row sm:items-center sm:justify-between dark:text-slate-400">
      <p>&copy; <?= date('Y') ?> Framex Engine. Built for practical PHP sites.</p>
      <p>Tailwind CSS 4 ready.</p>
    </div>
  </div>
</footer>
