<script lang="ts">
  import "../app.css";
  import favicon from "$lib/assets/favicon.svg";
  import { page } from "$app/state";
  import Countdown from "$lib/components/Countdown.svelte";
  import { createWeddingInfo } from "$lib/wedding-info.svelte";

  let { children } = $props();

  const wedding = createWeddingInfo();

  const links = [
    { href: "/", label: "Home" },
    { href: "/rsvp", label: "RSVP" },
    { href: "/photos", label: "Photos" },
  ];

  let menuOpen = $state(false);

  $effect(() => {
    page.url.pathname;
    menuOpen = false;
  });
</script>

<svelte:head>
  <title>Zoé &amp; Shaldon are getting married</title>
  <link rel="icon" href={favicon} />
</svelte:head>

<div
  class="bg-surface-50 dark:bg-surface-950 flex min-h-screen flex-col bg-[url('/patterns/damask.svg')] bg-repeat [background-size:160px_160px]"
>
  <div class="sticky top-0 z-20 flex flex-col">
    <nav
      class="bg-primary-950 flex items-center justify-between px-4 py-3 sm:px-8"
    >
      <a
        href="/"
        class="text-surface-50 font-malibu hidden text-3xl tracking-wide sm:inline"
        >Zoé &amp; Shaldon</a
      >
      <Countdown
        target={wedding.date}
        compact
        pastMessage="Already married! 🎉"
      />
      <div class="hidden gap-2 sm:flex">
        {#each links as link (link.href)}
          <a
            href={link.href}
            class="btn field-sm {page.url.pathname === link.href
              ? 'preset-filled-secondary-500'
              : 'text-surface-100 hover:text-secondary-400'}"
          >
            {link.label}
          </a>
        {/each}
      </div>
      <button
        type="button"
        class="text-surface-50 flex items-center justify-center p-2 sm:hidden"
        aria-label="Menu"
        aria-expanded={menuOpen}
        onclick={() => (menuOpen = !menuOpen)}
      >
        {#if menuOpen}
          <svg
            viewBox="0 0 24 24"
            class="size-6"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path stroke-linecap="round" d="M6 6l12 12M18 6L6 18" />
          </svg>
        {:else}
          <svg
            viewBox="0 0 24 24"
            class="size-6"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path stroke-linecap="round" d="M4 7h16M4 12h16M4 17h16" />
          </svg>
        {/if}
      </button>
    </nav>
    {#if menuOpen}
      <div
        class="bg-primary-950 border-primary-800 flex flex-col gap-1 border-t px-4 py-3 sm:hidden"
      >
        {#each links as link (link.href)}
          <a
            href={link.href}
            class="btn field-sm w-full {page.url.pathname === link.href
              ? 'preset-filled-secondary-500'
              : 'text-surface-100 hover:text-secondary-400'}"
          >
            {link.label}
          </a>
        {/each}
      </div>
    {/if}
  </div>
  <main class="flex flex-1 flex-col">
    {@render children()}
  </main>
</div>
