---
const { compact = false } = Astro.props;
---

{
  compact ? (
    <div>
      <div class="text-xs font-medium uppercase tracking-wider text-muted-foreground">Newsletter</div>
      <p class="mt-2 text-sm text-muted-foreground">New posts in your inbox.</p>
      <form data-newsletter-form class="mt-3 flex gap-2">
        <input
          type="email"
          required
          aria-label="Email address"
          placeholder="you@email.com"
          class="min-w-0 flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-primary"
        />
        <button type="submit" class="rounded-md bg-foreground px-3 py-2 text-sm font-medium text-background transition-opacity hover:opacity-90">
          Join
        </button>
      </form>
      <p data-newsletter-done class="mt-2 text-xs text-primary" role="status" hidden>Thanks &mdash; check your inbox.</p>
    </div>
  ) : (
    <section data-newsletter-cta class="border-t border-border/60 pt-16 pb-10">
      <div class="mx-auto max-w-2xl px-5 text-center">
        <h2 class="font-serif text-3xl font-semibold tracking-tight sm:text-4xl">Stay in the loop.</h2>
        <p class="mt-3 text-muted-foreground">
          One email when it&rsquo;s worth it &mdash; new posts and updates, no spam.
        </p>
        <form data-newsletter-form class="mx-auto mt-6 flex max-w-md flex-col gap-2 sm:flex-row">
          <input
            type="email"
            required
            aria-label="Email address"
            placeholder="you@email.com"
            class="min-w-0 flex-1 rounded-md border border-input bg-background px-4 py-3 text-sm outline-none focus:border-primary"
          />
          <button type="submit" class="rounded-md bg-foreground px-5 py-3 text-sm font-medium text-background transition-opacity hover:opacity-90">
            Subscribe
          </button>
        </form>
        <p data-newsletter-done class="mt-3 text-sm text-primary" role="status" hidden>Thanks &mdash; check your inbox to confirm.</p>
        <p class="mt-3 text-xs text-muted-foreground">Free. Unsubscribe in one click.</p>
      </div>
    </section>
  )
}

<script>
  document.addEventListener("submit", (event) => {
    const form = event.target;
    if (!(form instanceof HTMLFormElement) || !form.matches("[data-newsletter-form]")) return;
    event.preventDefault();
    const input = form.querySelector("input");
    if (!input?.value) return;
    input.value = "";
    const done = form.parentElement?.querySelector("[data-newsletter-done]");
    if (done) done.hidden = false;
  });
</script>
