<script setup>
defineProps({
  title: {
    type: String,
    default: '뉴스레터에 가입하세요'
  },
  description: {
    type: String,
    default: '새 글이 올라오면 받아보실 수 있어요.'
  },
  buttonLabel: {
    type: String,
    default: '구독하기'
  },
  placeholder: {
    type: String,
    default: 'you@example.com'
  }
})
</script>

<template>
  <section class="prose-signup prose-signup-card my-8 rounded-[12px] border border-[var(--site-line)] bg-[var(--site-panel-strong)] px-5 py-8 text-center sm:px-8">
    <h3 class="prose-signup__title text-[clamp(1rem,0.95rem+0.25vw,1.125rem)] font-semibold leading-snug text-[var(--site-text)]">
      {{ title }}
    </h3>
    <p class="prose-signup__desc mt-2 text-[15px] leading-7 text-[var(--site-muted)]">
      {{ description }}
    </p>
    <form class="prose-signup__form mt-6 flex flex-col items-stretch gap-2.5 sm:flex-row sm:justify-center" action="#" @submit.prevent>
      <input
        class="site-input prose-signup__input min-h-[44px] w-full rounded-full px-4 text-sm sm:max-w-[300px] sm:flex-1"
        type="email"
        :placeholder="placeholder"
        readonly
        tabindex="-1"
        aria-label="이메일"
      >
      <button class="site-accent-button prose-signup__submit min-h-[44px] shrink-0 rounded-full px-8 text-sm font-semibold" type="button">
        {{ buttonLabel }}
      </button>
    </form>
  </section>
</template>
