<footer class="nl-footer">
  <div class="nl-top">
    <div class="nl-copy">
      <span class="nl-brand">Fictional Co.</span>
      <p>Product updates and engineering notes, twice a month. No spam.</p>
    </div>

    <form class="nl-form" id="nlForm" novalidate>
      <div class="nl-input-row">
        <input type="email" id="nlEmail" placeholder="you@company.com" aria-label="Email address" />
        <button type="submit" id="nlSubmit">Subscribe</button>
      </div>
      <p class="nl-msg" id="nlMsg" role="status" aria-live="polite"></p>
    </form>
  </div>

  <div class="nl-cols">
    <div class="nl-col">
      <span class="nl-col-title">Product</span>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Changelog</a>
    </div>
    <div class="nl-col">
      <span class="nl-col-title">Company</span>
      <a href="#">About</a>
      <a href="#">Careers</a>
      <a href="#">Blog</a>
    </div>
    <div class="nl-col">
      <span class="nl-col-title">Legal</span>
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
    </div>
  </div>

  <div class="nl-bottom">© 2026 Fictional Co. All rights reserved.</div>
</footer>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; padding: 24px; }

.nl-footer { max-width: 720px; margin: 0 auto; background: #0f172a; border-radius: 18px; padding: 32px 28px 20px; display: flex; flex-direction: column; gap: 28px; }

.nl-top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.nl-copy { max-width: 280px; }
.nl-brand { font-size: 15px; font-weight: 800; color: #fff; }
.nl-copy p { font-size: 12.5px; color: #94a3b8; margin-top: 6px; line-height: 1.6; }

.nl-form { display: flex; flex-direction: column; gap: 6px; width: 320px; max-width: 100%; }
.nl-input-row { display: flex; gap: 8px; }
.nl-input-row input { flex: 1; padding: 10px 13px; border-radius: 9px; border: 1.5px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: #f1f5f9; font-size: 13px; font-family: inherit; }
.nl-input-row input::placeholder { color: #64748b; }
.nl-input-row input:focus-visible { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.25); }
.nl-input-row input.invalid { border-color: #f87171; }
.nl-input-row button { background: #6366f1; color: #fff; border: none; padding: 10px 18px; border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.15s, opacity 0.15s; }
.nl-input-row button:hover:not(:disabled) { background: #4f46e5; }
.nl-input-row button:disabled { opacity: 0.6; cursor: not-allowed; }

.nl-msg { font-size: 11.5px; font-weight: 600; color: #f87171; min-height: 14px; }
.nl-msg.success { color: #34d399; }

.nl-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.nl-col { display: flex; flex-direction: column; gap: 9px; }
.nl-col-title { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; margin-bottom: 3px; }
.nl-col a { font-size: 12.5px; color: #94a3b8; text-decoration: none; }
.nl-col a:hover { color: #f1f5f9; }

.nl-bottom { font-size: 11px; color: #64748b; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }

const form = document.getElementById('nlForm');
const emailInput = document.getElementById('nlEmail');
const submitBtn = document.getElementById('nlSubmit');
const msgEl = document.getElementById('nlMsg');

const subscribed = new Set(); // tracks emails already "subscribed" this session
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function setMsg(text, kind) {
  msgEl.textContent = text;
  msgEl.className = 'nl-msg' + (kind ? ' ' + kind : '');
}

function fakeSubscribe(email) {
  return new Promise((resolve) => setTimeout(resolve, 600 + Math.random() * 400));
}

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const email = emailInput.value.trim();

  if (!EMAIL_RE.test(email)) {
    emailInput.classList.add('invalid');
    setMsg('Enter a valid email address.', null);
    emailInput.focus();
    return;
  }

  if (subscribed.has(email.toLowerCase())) {
    emailInput.classList.remove('invalid');
    setMsg('That email is already subscribed.', null);
    return;
  }

  emailInput.classList.remove('invalid');
  submitBtn.disabled = true;
  submitBtn.textContent = 'Subscribing…';
  setMsg('', null);

  await fakeSubscribe(email);

  subscribed.add(email.toLowerCase());
  submitBtn.disabled = false;
  submitBtn.textContent = 'Subscribe';
  setMsg(`Subscribed ${email} — check your inbox to confirm.`, 'success');
  emailInput.value = '';
});

emailInput.addEventListener('input', () => {
  if (emailInput.classList.contains('invalid')) {
    emailInput.classList.remove('invalid');
    setMsg('', null);
  }
});