02ニュースレター統合フッター

<main class="stage">
  <footer class="fn is-demo is-idle" role="contentinfo">
    <p class="fn__title">週刊ニュースを受け取る</p>
    <p class="fn__desc">新しい記事とコードの断片を、週に一度だけお送りします。</p>

    <form class="fn__form" novalidate>
      <label class="fn__label" for="fn-mail">メールアドレス</label>
      <div class="fn__row">
        <input class="fn__input" id="fn-mail" type="email" name="email" autocomplete="email" placeholder="[email protected]">
        <button class="fn__send" type="submit">
          <span class="fn__send-t">購読</span>
          <span class="fn__icons" aria-hidden="true">
            <span class="fn__ic fn__ic--plane"><svg viewBox="0 0 256 256" width="16" height="16" focusable="false"><g fill="currentColor"><path d="m223.69 42.18l-58.22 192a8 8 0 0 1-14.92 1.25L108 148l-87.42-42.55a8 8 0 0 1 1.25-14.92l192-58.22a8 8 0 0 1 9.86 9.87" opacity=".2"/><path d="M227.32 28.68a16 16 0 0 0-15.66-4.08h-.15L19.57 82.84a16 16 0 0 0-2.49 29.8L102 154l41.3 84.87a15.86 15.86 0 0 0 14.44 9.13q.69 0 1.38-.06a15.88 15.88 0 0 0 14-11.51l58.2-191.94v-.15a16 16 0 0 0-4-15.66m-69.49 203.17l-.05.14v-.07l-40.06-82.3l48-48a8 8 0 0 0-11.31-11.31l-48 48l-82.33-40.06h-.07h.14L216 40Z"/></g></svg></span>
            <span class="fn__ic fn__ic--load"><span class="fn__spin"></span></span>
            <span class="fn__ic fn__ic--done"><svg viewBox="0 0 256 256" width="18" height="18" focusable="false"><g fill="currentColor"><path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96" opacity=".2"/><path d="M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"/></g></svg></span>
          </span>
        </button>
      </div>
      <span class="fn__bar" aria-hidden="true"></span>
    </form>

    <p class="fn__msg" role="status" aria-live="polite">
      <span class="fn__m fn__m--idle">いつでもワンクリックで購読を解除できます。</span>
      <span class="fn__m fn__m--send">送信しています。</span>
      <span class="fn__m fn__m--done">確認メールをお送りしました。</span>
      <span class="fn__m fn__m--err"></span>
    </p>

    <p class="fn__legal">© 2026 スタジオ</p>
  </footer>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 272 푸터 팔레트 — 세 항목이 같은 값을 쓴다. 괄호 안은 실측 대비비
$ft-ink:   #1b1a20;          // 어두운 푸터 바닥
$ft-ink2:  #2c2a33;          // 바닥 위 입력칸·구분선
$ft-paper: $stage-paper;     // 흰 글자 on ink 17.28:1 · 흰 글자 on teal 5.79:1
$ft-mist:  #b9b3c4;          // 보조 글자 on ink 8.48:1
$ft-amber: $stage-yellow;    // 무대
$ft-flame: $stage-orange;    // 오류 글자 on ink 5.21:1
$ft-teal:  #479089;          // 보내기 버튼 면
$ft-aqua:  #b3dad5;          // 완료 버튼 면 (ink 글자 11.58:1) · 진행 막대

$duration: $dur-loop;        // 입력 대기 → 보냄 → 완료 → 다시 대기 한 바퀴
$easing: $ease-pop;          // 완료 도장이 튀어 오를 때
$color: $ft-amber;           // 무대(앰버)

@include stage($ft-amber);

.fn {
  box-sizing: border-box;
  width: clamp(320px, 92vw, 432px);
  padding: $sp-4;
  border-radius: $r-card;
  background: $ft-ink;
  color: $ft-paper;
}

.fn__title {
  margin: 0;
  font-weight: 800; font-size: 16px; line-height: 1.2;
}
.fn__desc {
  margin: $sp-1 0 $sp-3;
  color: $ft-mist;
  font-weight: 500; font-size: 12px; line-height: 1.4;
}

.fn__label {
  display: block;
  margin-bottom: $sp-1;
  color: $ft-mist;
  font-weight: 600; font-size: 11px; line-height: 1.2;
}

.fn__row {
  display: flex;
  align-items: stretch;
  gap: $sp-2;
}

.fn__input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: $sp-2 $sp-3;
  border: 1px solid $ft-mist;
  border-radius: $r-control;
  background: $ft-ink2;
  color: $ft-paper;
  font-family: inherit;
  font-weight: 500; font-size: 13px; line-height: 1.4;
}
.fn__input::placeholder { color: $ft-mist; }
.fn__input:focus-visible {
  outline: 2px solid $ft-aqua;
  outline-offset: 2px;
}

// 기본 면은 teal — 흰 글자로 5.79:1. 완료 상태에서만 aqua 로 바뀌고 글자가 ink 로 뒤집힌다
.fn__send {
  display: flex;
  align-items: center;
  gap: $sp-2;
  padding: $sp-2 $sp-3;
  border: 2px solid $ft-aqua;
  border-radius: $r-control;
  background: $ft-teal;
  color: $ft-paper;
  font-family: inherit;
  font-weight: 700; font-size: 13px; line-height: 1.4;
  cursor: pointer;
}
.fn__send:focus-visible {
  outline: 2px solid $ft-aqua;
  outline-offset: 2px;
}
.fn.is-done .fn__send { background: $ft-aqua; color: $ft-ink; }
.fn.is-sending .fn__send { transform: translateY(3px); }

// 아이콘 세 장을 같은 칸에 포갠다 — 상태가 바뀌어도 버튼 폭이 흔들리지 않는다
.fn__icons {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
.fn__ic {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  opacity: 0;
}
.fn.is-idle .fn__ic--plane,
.fn.is-error .fn__ic--plane { opacity: 1; }
.fn.is-sending .fn__ic--load { opacity: 1; }
.fn.is-done .fn__ic--done { opacity: 1; }

.fn__spin {
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation-name: fnSpin;
  animation-duration: 500ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

// 보내는 동안 차오르는 막대. 탭 인디케이터가 아니라 진행 게이지다
.fn__bar {
  display: block;
  height: 2px;
  margin-top: $sp-2;
  border-radius: $r-pill;
  background: $ft-aqua;
  transform: scaleX(0);
  transform-origin: left center; // 규칙8: 진행 게이지 왼쪽 채움
}
.fn.is-sending .fn__bar { transform: scaleX(.6); }
.fn.is-done .fn__bar { transform: scaleX(1); }

// 결과 문장 넷을 같은 칸에 포갠다 — 글자가 바뀌어도 줄이 흔들리지 않는다
.fn__msg {
  display: grid;
  margin: $sp-2 0 0;
  min-height: 17px;
}
.fn__m {
  grid-area: 1 / 1;
  opacity: 0;
  font-weight: 500; font-size: 12px; line-height: 1.4;
}
.fn__m--idle, .fn__m--send { color: $ft-mist; }
.fn__m--done { color: $ft-aqua; }
.fn__m--err { color: $ft-flame; }
.fn.is-idle .fn__m--idle,
.fn.is-sending .fn__m--send,
.fn.is-done .fn__m--done,
.fn.is-error .fn__m--err { opacity: 1; }

.fn__legal {
  margin: $sp-3 0 0;
  padding-top: $sp-3;
  border-top: 1px solid $ft-ink2;
  color: $ft-mist;
  font-weight: 500; font-size: 11px; line-height: 1.4;
}

// ── 자동 재생 ─────────────────────────────────────────────
// 상태 교체는 steps(1, end) 컷 — 반투명 유령 프레임이 생기지 않는다.
// 컷만 있으면 움직인 프레임이 두세 장으로 떨어지므로 옆에 transform 움직임
// (도장 translateY 팝 · 버튼 누름 · 막대 scaleX)을 같이 둔다.
// 퇴장은 재현하지 않는다 — 완료 표시를 애니메이션으로 빼지 않고 컷으로 조용히 되돌린다.
.fn.is-demo .fn__ic, .fn.is-demo .fn__m {
  animation-duration: $duration;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.fn.is-demo .fn__ic--plane { animation-name: fnPlane; }
.fn.is-demo .fn__ic--load  { animation-name: fnLoad; }
.fn.is-demo .fn__ic--done  { animation-name: fnDone; }
.fn.is-demo .fn__m--idle   { animation-name: fnMsgIdle; }
.fn.is-demo .fn__m--send   { animation-name: fnMsgSend; }
.fn.is-demo .fn__m--done   { animation-name: fnMsgDone; }

.fn.is-demo .fn__ic--done svg {
  animation-name: fnPop;
  animation-duration: $duration;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
}
.fn.is-demo .fn__send {
  animation-name: fnFace, fnPress;
  animation-duration: $duration, $duration;
  animation-timing-function: steps(1, end), $ease-spring;
  animation-iteration-count: infinite, infinite;
}
.fn.is-demo .fn__bar {
  animation-name: fnBar;
  animation-duration: $duration;
  animation-timing-function: $ease-out;
  animation-iteration-count: infinite;
}

@keyframes fnSpin { to { transform: rotate(360deg); } }

@keyframes fnPlane   { 0% { opacity: 1; } 40% { opacity: 0; } 82% { opacity: 1; } }
@keyframes fnLoad    { 0% { opacity: 0; } 40% { opacity: 1; } 58% { opacity: 0; } }
@keyframes fnDone    { 0% { opacity: 0; } 58% { opacity: 1; } 82% { opacity: 0; } }
@keyframes fnMsgIdle { 0% { opacity: 1; } 40% { opacity: 0; } 89% { opacity: 1; } }
@keyframes fnMsgSend { 0% { opacity: 0; } 40% { opacity: 1; } 58% { opacity: 0; } }
@keyframes fnMsgDone { 0% { opacity: 0; } 58% { opacity: 1; } 89% { opacity: 0; } }

@keyframes fnFace {
  0%  { background: #{$ft-teal}; color: #{$ft-paper}; }
  58% { background: #{$ft-aqua}; color: #{$ft-ink}; }
  86% { background: #{$ft-teal}; color: #{$ft-paper}; }
}
@keyframes fnPress {
  0%, 38%   { transform: translateY(0); }
  41%       { transform: translateY(3px); }
  46%, 100% { transform: translateY(0); }
}
@keyframes fnPop {
  0%, 58%    { transform: translateY(6px) scale(.7); }
  66%, 82%   { transform: translateY(0) scale(1); }
  83%, 100%  { transform: translateY(6px) scale(.7); }
}
@keyframes fnBar {
  0%, 40%     { transform: scaleX(0); }
  58%, 88.9%  { transform: scaleX(1); }
  89%, 100%   { transform: scaleX(0); }
}

// 좁은 화면 — 세로 여유가 174px 뿐이라 값을 올리지 않고 내린다
@media (max-width: 340px), (max-height: 220px) {
  .fn { width: 100%; padding: $sp-2; }
  .fn__title { font-size: 12px; }
  .fn__desc { margin: $sp-1 0 $sp-2; font-size: 10px; line-height: 1.3; }
  .fn__label { font-size: 10px; }
  .fn__row { gap: $sp-1; }
  .fn__input { padding: $sp-1 $sp-2; font-size: 11px; }
  .fn__send { padding: $sp-1 $sp-2; font-size: 11px; }
  .fn__bar { margin-top: $sp-1; }
  .fn__msg { margin-top: $sp-1; min-height: 14px; }
  .fn__m { font-size: 10px; line-height: 1.3; }
  .fn__legal { margin-top: $sp-1; padding-top: $sp-1; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  // .fn.is-demo .fn__ic (0,3,0) 를 이기려면 !important 가 필요하다
  .fn__ic, .fn__m, .fn__send, .fn__bar, .fn__spin, .fn__ic--done svg { animation: none !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.fn {
  box-sizing: border-box;
  width: clamp(320px, 92vw, 432px);
  padding: 16px;
  border-radius: 16px;
  background: #1b1a20;
  color: #ffffff;
}

.fn__title {
  margin: 0;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
}

.fn__desc {
  margin: 4px 0 12px;
  color: #b9b3c4;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
}

.fn__label {
  display: block;
  margin-bottom: 4px;
  color: #b9b3c4;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
}

.fn__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.fn__input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid #b9b3c4;
  border-radius: 12px;
  background: #2c2a33;
  color: #ffffff;
  font-family: inherit;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
}

.fn__input::placeholder {
  color: #b9b3c4;
}

.fn__input:focus-visible {
  outline: 2px solid #b3dad5;
  outline-offset: 2px;
}

.fn__send {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 2px solid #b3dad5;
  border-radius: 12px;
  background: #479089;
  color: #ffffff;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

.fn__send:focus-visible {
  outline: 2px solid #b3dad5;
  outline-offset: 2px;
}

.fn.is-done .fn__send {
  background: #b3dad5;
  color: #1b1a20;
}

.fn.is-sending .fn__send {
  transform: translateY(3px);
}

.fn__icons {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.fn__ic {
  grid-area: 1/1;
  display: grid;
  place-items: center;
  opacity: 0;
}

.fn.is-idle .fn__ic--plane,
.fn.is-error .fn__ic--plane {
  opacity: 1;
}

.fn.is-sending .fn__ic--load {
  opacity: 1;
}

.fn.is-done .fn__ic--done {
  opacity: 1;
}

.fn__spin {
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation-name: fnSpin;
  animation-duration: 500ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.fn__bar {
  display: block;
  height: 2px;
  margin-top: 8px;
  border-radius: 999px;
  background: #b3dad5;
  transform: scaleX(0);
  transform-origin: left center;
}

.fn.is-sending .fn__bar {
  transform: scaleX(0.6);
}

.fn.is-done .fn__bar {
  transform: scaleX(1);
}

.fn__msg {
  display: grid;
  margin: 8px 0 0;
  min-height: 17px;
}

.fn__m {
  grid-area: 1/1;
  opacity: 0;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
}

.fn__m--idle, .fn__m--send {
  color: #b9b3c4;
}

.fn__m--done {
  color: #b3dad5;
}

.fn__m--err {
  color: #ff4d1f;
}

.fn.is-idle .fn__m--idle,
.fn.is-sending .fn__m--send,
.fn.is-done .fn__m--done,
.fn.is-error .fn__m--err {
  opacity: 1;
}

.fn__legal {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid #2c2a33;
  color: #b9b3c4;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
}

.fn.is-demo .fn__ic, .fn.is-demo .fn__m {
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

.fn.is-demo .fn__ic--plane {
  animation-name: fnPlane;
}

.fn.is-demo .fn__ic--load {
  animation-name: fnLoad;
}

.fn.is-demo .fn__ic--done {
  animation-name: fnDone;
}

.fn.is-demo .fn__m--idle {
  animation-name: fnMsgIdle;
}

.fn.is-demo .fn__m--send {
  animation-name: fnMsgSend;
}

.fn.is-demo .fn__m--done {
  animation-name: fnMsgDone;
}

.fn.is-demo .fn__ic--done svg {
  animation-name: fnPop;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  animation-iteration-count: infinite;
}

.fn.is-demo .fn__send {
  animation-name: fnFace, fnPress;
  animation-duration: 2s, 2s;
  animation-timing-function: steps(1, end), cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite, infinite;
}

.fn.is-demo .fn__bar {
  animation-name: fnBar;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes fnSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fnPlane {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  82% {
    opacity: 1;
  }
}
@keyframes fnLoad {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  58% {
    opacity: 0;
  }
}
@keyframes fnDone {
  0% {
    opacity: 0;
  }
  58% {
    opacity: 1;
  }
  82% {
    opacity: 0;
  }
}
@keyframes fnMsgIdle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  89% {
    opacity: 1;
  }
}
@keyframes fnMsgSend {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  58% {
    opacity: 0;
  }
}
@keyframes fnMsgDone {
  0% {
    opacity: 0;
  }
  58% {
    opacity: 1;
  }
  89% {
    opacity: 0;
  }
}
@keyframes fnFace {
  0% {
    background: #479089;
    color: #ffffff;
  }
  58% {
    background: #b3dad5;
    color: #1b1a20;
  }
  86% {
    background: #479089;
    color: #ffffff;
  }
}
@keyframes fnPress {
  0%, 38% {
    transform: translateY(0);
  }
  41% {
    transform: translateY(3px);
  }
  46%, 100% {
    transform: translateY(0);
  }
}
@keyframes fnPop {
  0%, 58% {
    transform: translateY(6px) scale(0.7);
  }
  66%, 82% {
    transform: translateY(0) scale(1);
  }
  83%, 100% {
    transform: translateY(6px) scale(0.7);
  }
}
@keyframes fnBar {
  0%, 40% {
    transform: scaleX(0);
  }
  58%, 88.9% {
    transform: scaleX(1);
  }
  89%, 100% {
    transform: scaleX(0);
  }
}
@media (max-width: 340px), (max-height: 220px) {
  .fn {
    width: 100%;
    padding: 8px;
  }
  .fn__title {
    font-size: 12px;
  }
  .fn__desc {
    margin: 4px 0 8px;
    font-size: 10px;
    line-height: 1.3;
  }
  .fn__label {
    font-size: 10px;
  }
  .fn__row {
    gap: 4px;
  }
  .fn__input {
    padding: 4px 8px;
    font-size: 11px;
  }
  .fn__send {
    padding: 4px 8px;
    font-size: 11px;
  }
  .fn__bar {
    margin-top: 4px;
  }
  .fn__msg {
    margin-top: 4px;
    min-height: 14px;
  }
  .fn__m {
    font-size: 10px;
    line-height: 1.3;
  }
  .fn__legal {
    margin-top: 4px;
    padding-top: 4px;
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fn__ic, .fn__m, .fn__send, .fn__bar, .fn__spin, .fn__ic--done svg {
    animation: none !important;
  }
}

(function () {
  var root = document.querySelector('.fn');
  var form = root.querySelector('.fn__form');
  var input = root.querySelector('.fn__input');
  var err = root.querySelector('.fn__m--err');
  var timer = 0;

  // 상태는 뿌리의 클래스 하나로만 관리한다 — 정적 규칙이 먼저, 자동 루프는 그 위에 덧씌운다
  function setState(s) {
    root.classList.remove('is-idle', 'is-sending', 'is-done', 'is-error');
    root.classList.add(s);
  }
  function stopLoop() { root.classList.remove('is-demo'); }

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    stopLoop();
    clearTimeout(timer);
    var v = input.value.trim();
    // 오류도 같은 aria-live 영역으로 알린다 — 화면을 못 보는 사람에게 결과가 한 곳에서만 들린다
    if (!v) { err.textContent = 'メールアドレスを入力してください。'; setState('is-error'); return; }
    if (v.indexOf('@') < 0) { err.textContent = 'アドレスに @ がありません。'; setState('is-error'); return; }
    setState('is-sending');
    timer = setTimeout(function () { setState('is-done'); }, 900);
  });

  input.addEventListener('input', function () {
    stopLoop();
    if (root.classList.contains('is-error')) { setState('is-idle'); }
  });

  root.addEventListener('pointerenter', stopLoop);
  root.addEventListener('focusin', stopLoop);
})();

import { useEffect, useRef, useState } from "react";
import type { CSSProperties, ChangeEvent, ReactNode } from "react";
import styles from "./FooterNewsletter.module.scss";

/* ambient 에 FormEvent 가 없어 파일 안에 필요한 만큼만 선언한다 */
type SubmitEvt = { preventDefault(): void };

export type NewsletterState = "idle" | "sending" | "done" | "error";

export type FooterNewsletterProps = {
  title?: string;
  desc?: string;
  label?: string;
  placeholder?: string;
  sendText?: string;
  idleText?: string;
  sendingText?: string;
  doneText?: string;
  emptyError?: string;
  atError?: string;
  legal?: string;
  /** 입력 대기 → 보냄 → 완료 → 다시 대기 한 바퀴(ms) */
  duration?: number;
  easing?: string;
  /** 무대 색 */
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

const Plane = (): ReactNode => (
  <svg viewBox="0 0 256 256" width="16" height="16" focusable="false">
    <g fill="currentColor">
      <path d="m223.69 42.18l-58.22 192a8 8 0 0 1-14.92 1.25L108 148l-87.42-42.55a8 8 0 0 1 1.25-14.92l192-58.22a8 8 0 0 1 9.86 9.87" opacity=".2" />
      <path d="M227.32 28.68a16 16 0 0 0-15.66-4.08h-.15L19.57 82.84a16 16 0 0 0-2.49 29.8L102 154l41.3 84.87a15.86 15.86 0 0 0 14.44 9.13q.69 0 1.38-.06a15.88 15.88 0 0 0 14-11.51l58.2-191.94v-.15a16 16 0 0 0-4-15.66m-69.49 203.17l-.05.14v-.07l-40.06-82.3l48-48a8 8 0 0 0-11.31-11.31l-48 48l-82.33-40.06h-.07h.14L216 40Z" />
    </g>
  </svg>
);

const CheckCircle = (): ReactNode => (
  <svg viewBox="0 0 256 256" width="18" height="18" focusable="false">
    <g fill="currentColor">
      <path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96" opacity=".2" />
      <path d="M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88" />
    </g>
  </svg>
);

export default function FooterNewsletter({
  title = "주간 소식 받기",
  desc = "새 글과 코드 조각을 한 주에 한 번만 보내 드립니다.",
  label = "이메일 주소",
  placeholder = "[email protected]",
  sendText = "구독",
  idleText = "언제든 한 번에 구독을 끊을 수 있습니다.",
  sendingText = "보내는 중입니다.",
  doneText = "확인 메일을 보냈습니다.",
  emptyError = "이메일 주소를 입력해 주세요.",
  atError = "주소에 @ 가 빠졌습니다.",
  legal = "© 2026 스튜디오",
  duration = 2000,
  easing = "cubic-bezier(.2,1.4,.4,1)",
  color = "#ffd23f",
}: FooterNewsletterProps): ReactNode {
  const [state, setState] = useState<NewsletterState>("idle");
  const [value, setValue] = useState<string>("");
  const [error, setError] = useState<string>("");
  const [loop, setLoop] = useState<boolean>(true);
  const timer = useRef<number | null>(null);

  useEffect(() => () => {
    if (timer.current !== null) { window.clearTimeout(timer.current); }
  }, []);

  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  const submit = (e: SubmitEvt): void => {
    e.preventDefault();
    setLoop(false);
    if (timer.current !== null) { window.clearTimeout(timer.current); }
    const v = value.trim();
    /* 오류도 같은 aria-live 영역으로 알린다 — 결과가 한 곳에서만 들린다 */
    if (v === "") { setError(emptyError); setState("error"); return; }
    if (v.indexOf("@") < 0) { setError(atError); setState("error"); return; }
    setState("sending");
    timer.current = window.setTimeout(() => setState("done"), 900);
  };

  const onInput = (e: ChangeEvent<HTMLInputElement>): void => {
    setLoop(false);
    setValue(e.target.value);
    if (state === "error") { setState("idle"); }
  };

  const stateClass =
    state === "sending" ? styles.isSending : state === "done" ? styles.isDone : state === "error" ? styles.isError : styles.isIdle;

  return (
    <footer
      className={`${styles.fn} ${stateClass}${loop ? ` ${styles.isDemo}` : ""}`}
      style={vars}
      role="contentinfo"
      onPointerEnter={() => setLoop(false)}
      onFocus={() => setLoop(false)}
    >
      <p className={styles.title}>{title}</p>
      <p className={styles.desc}>{desc}</p>

      <form className={styles.form} noValidate onSubmit={submit}>
        <label className={styles.label} htmlFor="fn-mail">{label}</label>
        <div className={styles.row}>
          <input
            className={styles.input}
            id="fn-mail"
            type="email"
            name="email"
            autoComplete="email"
            placeholder={placeholder}
            value={value}
            onChange={onInput}
          />
          <button className={styles.send} type="submit">
            <span className={styles.sendT}>{sendText}</span>
            <span className={styles.icons} aria-hidden="true">
              <span className={`${styles.ic} ${styles.icPlane}`}><Plane /></span>
              <span className={`${styles.ic} ${styles.icLoad}`}><span className={styles.spin} /></span>
              <span className={`${styles.ic} ${styles.icDone}`}><CheckCircle /></span>
            </span>
          </button>
        </div>
        <span className={styles.bar} aria-hidden="true" />
      </form>

      <p className={styles.msg} role="status" aria-live="polite">
        <span className={`${styles.m} ${styles.mIdle}`}>{idleText}</span>
        <span className={`${styles.m} ${styles.mSend}`}>{sendingText}</span>
        <span className={`${styles.m} ${styles.mDone}`}>{doneText}</span>
        <span className={`${styles.m} ${styles.mErr}`}>{error}</span>
      </p>

      <p className={styles.legal}>{legal}</p>
    </footer>
  );
}