---
import Base from "../layouts/Base.astro";
import Music from "../components/Music.astro";
import Webrings from "../components/Webrings.astro";
import Buttons from "../components/Buttons.astro";
import { site, elsewhere } from "../data/site";
---

<Base>
  <section class="intro">
    <h1 class="sr-only">{site.name} — {site.tagline}</h1>
    <p class="bio">{site.bio}</p>
  </section>

  <Music />

  <section class="section">
    <h2 class="label">elsewhere</h2>
    <nav class="pagenav" aria-label="more">
      {
        elsewhere.map((l) => (
          <a
            href={l.href}
            target={l.external ? "_blank" : undefined}
            rel={l.external ? "noopener" : undefined}
            data-umami-event="elsewhere"
            data-umami-event-to={l.label}
          >
            {l.label} <span class="arw">{l.external ? "↗" : "→"}</span>
          </a>
        ))
      }
    </nav>
  </section>

  <Webrings />
  <Buttons />
</Base>