<script setup lang="ts">
useHead({
  titleTemplate: (title) =>
    title ? `${title} · Quickdrop` : "Quickdrop — private file sharing",
  meta: [
    {
      name: "description",
      content: "Send one end-to-end encrypted file with a private link.",
    },
    { name: "referrer", content: "no-referrer" },
    { name: "theme-color", content: "#080d16" },
  ],
});
</script>

<template>
  <NuxtRouteAnnouncer />
  <div class="site-shell">
    <header class="site-header">
      <NuxtLink class="brand" to="/" aria-label="Quickdrop home">
        <span class="brand-mark" aria-hidden="true">
          <svg viewBox="0 0 24 24" role="img">
            <path d="M12 3v11m0 0 4-4m-4 4-4-4M5 17v2h14v-2" />
          </svg>
        </span>
        <span>Qu<span class="brand-i">ı</span>ckdrop</span>
      </NuxtLink>
    </header>

    <main class="flex-1">
      <NuxtPage />
    </main>

    <footer class="site-footer">
      <p>One file. One private link. Authenticated uploads.</p>
      <p class="footer-security">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path
            d="M7 10V7a5 5 0 0 1 10 0v3m-9 0h8a2 2 0 0 1 2 2v7H6v-7a2 2 0 0 1 2-2Z"
          />
        </svg>
        Your decryption key never leaves your browser.
      </p>
    </footer>
  </div>
</template>
