---
import { tt } from "#/copy";
import SectionContent from "./SectionContent.astro";

const t = tt.blocks.newsletter.en;
---

<section class="max-w-sm flex flex-col gap-4">
  <SectionContent heading={{ h: 4 }} t={t} />

  <form
    method="POST"
    action="https://app.convertkit.com/forms/7469948/subscriptions"
    class="form flex rounded-lg bg-accent-950 p-1 ring-1 ring-transparent focus-within:ring-accent-700"
  >
    <label for="footer-email-address" class="sr-only">
      {t.email.label}
    </label>

    <input
      name="email_address"
      type="email"
      autocomplete="email"
      required
      placeholder={t.email.placeholder}
      class="min-w-0 flex-auto bg-transparent text-sm md:text-base text-accent-50 outline-none placeholder:text-accent-500 sm:text-sm"
    />

    <button
      type="submit"
      class="rounded-md bg-accent-900 text-xs md:text-sm font-medium text-accent-100 hover:bg-accent-800"
    >
      {t.submit}
    </button>
  </form>
</section>

<style>
  @reference "#/styles/global.css";

  form {
    & input,
    & button {
      @apply px-2 md:px-3.5 py-1 md:py-2;
    }
  }
</style>
