<footer style="
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 24px 20px;
">
  <div style="max-width:1400px; margin:0 auto;
              display:flex; flex-wrap:wrap; align-items:center;
              justify-content:space-between; gap:16px;">

    <!-- Left: branding + tagline -->
    <div style="display:flex; align-items:center; gap:12px;">
      <div style="width:4px; height:22px; background:var(--amber);
                  border-radius:2px; box-shadow:0 0 6px rgba(232,147,10,0.4);"></div>
      <div>
        <div style="font-family:'Barlow Condensed',sans-serif; font-weight:700;
                    font-size:16px; letter-spacing:0.1em; text-transform:uppercase;
                    color:var(--text);">ETC PRS Editor</div>
        <div style="font-family:'DM Mono',monospace; font-size:12px;
                    color:var(--cyan); margin-top:2px; opacity:0.85;">
          made with <span style="color:var(--amber);">♥</span> for the lighting community
        </div>
      </div>
    </div>

    <!-- Center: nav links -->
    <nav style="display:flex; align-items:center; gap:4px; flex-wrap:wrap;">
      {#each [
        { href: '/',            label: 'App'          },
        { href: '/library',     label: 'Library'      },
        { href: '/about',       label: 'About'        },
        { href: '/contact',     label: 'Contact'      },
        { href: '/disclosures', label: 'Disclosures'  },
      ] as link}
        <a
          href={link.href}
          style="font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600;
                 letter-spacing:0.06em; text-transform:uppercase; color:var(--text2);
                 text-decoration:none; padding:5px 10px; border-radius:3px;
                 transition:color 0.15s;"
          on:mouseenter={(e) => e.currentTarget.style.color = 'var(--amber)'}
          on:mouseleave={(e) => e.currentTarget.style.color = 'var(--text2)'}
        >
          {link.label}
        </a>
      {/each}
    </nav>

    <!-- Right: disclaimer blurb -->
    <div style="font-family:'DM Mono',monospace; font-size:12px; color:var(--text2);
                text-align:right; line-height:1.7; max-width:300px;">
      Not affiliated with or endorsed by<br/>
      ETC (Electronic Theatre Controls, Inc.)
    </div>

  </div>
</footer>
