<script lang="ts">
  import { goto } from '$app/navigation';
  import { auth } from '$lib/auth.svelte';

  // Logged-in users go straight to their lists — no placeholder dashboard.
  $effect(() => {
    if (auth.loaded && auth.user) goto('/lists', { replaceState: true });
  });
</script>

<svelte:head>
  <title>consume·rs — want more, spend more</title>
</svelte:head>

{#if auth.loaded && auth.user}
  <p class="text-center text-mute flicker">entering…</p>
{:else}
  <!-- Marketing hero -->
  <section class="space-y-10">
    <div class="space-y-4">
      <h1
        class="glitch font-display text-5xl font-bold leading-[0.95] sm:text-7xl"
        data-text="WANT MORE. SPEND MORE. ACCUMULATE THE DEBT."
      >
        WANT MORE. SPEND MORE. ACCUMULATE THE DEBT.
      </h1>
      <p class="max-w-xl text-lg text-mute">
        A wishlist for your every craving. Paste a product link; we watch the price and email you
        the moment it drops. No feed. No algorithm. Just you, your wants, and the gentle hum of
        impending debt.
        <span class="gospel">You deserve it.</span>
      </p>
    </div>

    <div class="flex flex-wrap gap-3">
      <a href="/register" class="btn btn-acid">create account →</a>
      <a href="/login" class="btn btn-ghost">log in</a>
    </div>

    <div class="grid gap-4 sm:grid-cols-3">
      {#each [['I', 'MAKE A LIST', 'group wants by topic'], ['II', 'PASTE A LINK', 'we track the price'], ['III', 'GET AN EMAIL', 'the moment it drops']] as [n, t, d] (n)}
        <div class="panel p-5">
          <p class="gospel text-4xl">{n}</p>
          <p class="mt-1 font-display text-lg font-bold">{t}</p>
          <p class="text-sm text-mute">{d}</p>
        </div>
      {/each}
    </div>

    <p class="gospel text-center text-lg">“your cart isn’t going to fill itself”</p>
  </section>
{/if}
