<script lang="ts">
  import PhotoBackground from "$lib/components/PhotoBackground.svelte";
  import { createWeddingInfo, formatFullDate } from "$lib/wedding-info.svelte";
  import { createRsvpStatus } from "$lib/rsvp-status.svelte";

  const wedding = createWeddingInfo();
  const rsvpStatus = createRsvpStatus();
</script>

<section
  class="relative flex flex-1 items-center justify-center overflow-hidden px-4 py-16 text-center z-10"
>
  <PhotoBackground />

  <div
    class="border-surface-50/70 relative z-10 flex max-w-xl flex-col items-center gap-6 border px-6 py-12 sm:px-14 sm:py-16"
  >
    <h1 class="text-surface-50 font-malibu text-6xl sm:text-8xl">
      Zoé &amp; Shaldon
    </h1>
    <p class="text-surface-100 text-2xl">are getting married</p>

    <div class="flex flex-col gap-1">
      <p class="text-surface-50 text-2xl font-medium sm:text-3xl">
        {formatFullDate(wedding.date)}
      </p>
      <p class="text-surface-200 text-2xl tracking-wide">
        {wedding.ceremonyTime}
      </p>
    </div>

    <div class="flex flex-col gap-0.5">
      <p class="text-surface-50 text-2xl">{wedding.venueName}</p>
      <p class="text-surface-100 text-2xl">{wedding.venueAddress}</p>
    </div>

    <div class="mt-6 flex flex-wrap items-center justify-center gap-4">
      {#if !rsvpStatus.submitted}
        <a href="/rsvp" class="btn preset-filled-secondary-500 text-2xl">RSVP</a
        >
      {:else}
        <p class="text-secondary-300 text-2xl">✓ You've RSVP'd — thank you!</p>
      {/if}
      <a href="/photos" class="btn preset-filled-primary-500 text-2xl"
        >Share photos</a
      >
    </div>
  </div>
</section>
