04 - ニュースレター登録

---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Cluster, Container, Heading, Inline, Lism, Stack, Text } from 'lism-css/astro';
---

<DemoLayout title="04 - ニュースレター登録">
  <Container as="section" isWrapper="s" isContainer hasGutter bgc="base-2" py="50">
    <Stack g="40" bd-bs bdc="text" pbs="40" pbe="10">
      <Stack g="20">
        <Inline fz="s" c="text-2">週刊ニュースレター</Inline>
        <Heading level="2" class="u--trim" fz="2xl" fw="light">暮らしと仕事のヒントを、<br />毎週金曜日に。</Heading>
      </Stack>

      <Stack as="form" g="10" data-newsletter-form>
        <Inline as="label" for="newsletter-email" fz="s" fw="bold">メールアドレス</Inline>
        <Cluster g="15">
          <Lism
            as="input"
            id="newsletter-email"
            type="email"
            name="email"
            placeholder="hello@example.com"
            autocomplete="email"
            required
            fx="1"
            min-w={['100%', null, 'auto']}
            bgc="base"
            bd
            bdrs="10"
            px="20"
            py="15"
          />
          <Lism
            as="button"
            type="submit"
            set="plain"
            ta="center"
            w={['100%', null, 'fit-content']}
            bgc="text"
            c="base"
            bdrs="10"
            px="30"
            py="15"
            fw="bold"
            hov="-o"
          >
            登録する
          </Lism>
        </Cluster>
        <Text fz="xs" c="text-2">登録は無料です。不要になったらいつでも解除できます。</Text>
        <Text data-newsletter-status role="status" aria-live="polite" fz="s" fw="bold" />
      </Stack>
    </Stack>
  </Container>
</DemoLayout>

<script>
  const form = document.querySelector('[data-newsletter-form]');
  const status = form?.querySelector('[data-newsletter-status]');

  form?.addEventListener('submit', (event) => {
    event.preventDefault();
    if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
    if (status) status.textContent = 'デモのため、実際には登録されません。';
  });
</script>