<!DOCTYPE html>
<!-- COMPREENSÍVEL: O atributo lang orienta o sintetizador de voz do leitor de tela -->
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração Prática dos Princípios POUR — Web Academy</title>
  <style>
    :root {
      /* PERCEPTÍVEL: Cores com contraste AAA (> 7:1) */
      --bg-canvas: #f8fafc;
      --text-main: #0f172a;
      --text-muted: #334155;
      --brand-primary: #0369a1;
      --brand-focus: #0f172a;
      --error-color: #b91c1c;
      --error-bg: #fef2f2;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      line-height: 1.6;
      background-color: var(--bg-canvas);
      color: var(--text-main);
      padding: 32px 16px;
      margin: 0;
    }
    .pour-card {
      max-width: 520px;
      margin: 0 auto;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 28px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }
    /* OPERÁVEL: Foco de teclado altamente visível (WCAG 2.2 Focus Appearance) */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
      outline: 3px solid var(--brand-focus);
      outline-offset: 3px;
    }
    .form-group {
      margin-bottom: 20px;
    }
    label {
      display: block;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--text-main);
    }
    .helper-text {
      font-size: 0.875rem;
      color: var(--text-muted);
      margin-top: 4px;
      display: block;
    }
    input[type="email"] {
      width: 100%;
      box-sizing: border-box;
      padding: 12px;
      font-size: 1rem;
      border: 2px solid #94a3b8;
      border-radius: 6px;
      color: var(--text-main);
    }
    /* OPERÁVEL: Área mínima de toque de 44px (Target Size Minimum) */
    .btn-submit {
      background-color: var(--brand-primary);
      color: #ffffff;
      border: 2px solid transparent;
      padding: 12px 24px;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      min-height: 48px;
      min-width: 160px;
      transition: background-color 0.2s;
    }
    .btn-submit:hover {
      background-color: #0284c7;
    }
    /* COMPREENSÍVEL: Caixa de erro clara com ícone e texto */
    .error-box {
      background-color: var(--error-bg);
      border: 1px solid var(--error-color);
      color: var(--error-color);
      padding: 12px 16px;
      border-radius: 6px;
      font-size: 0.875rem;
      margin-top: 8px;
      display: none;
    }
  </style>
</head>
<body>
 
  <main class="pour-card">
    <!-- PERCEPTÍVEL: Título semântico com contraste adequado -->
    <h1 style="margin-top: 0; font-size: 1.5rem;">Newsletter de Acessibilidade Web</h1>
    <p style="color: var(--text-muted);">
      Receba semanalmente artigos técnicos e atualizações sobre a WCAG 2.2 e WAI-ARIA.
    </p>
 
    <!-- ROBUSTO: Uso de elemento <form> nativo sem divs clicáveis -->
    <form id="newsletterForm" novalidate>
      <div class="form-group">
        <!-- COMPREENSÍVEL & ROBUSTO: <label for> vinculado diretamente ao ID do input -->
        <label for="userEmail">
          Endereço de E-mail <span aria-hidden="true" style="color: var(--error-color);">*</span>
        </label>
        
        <!-- COMPREENSÍVEL: Instrução contextual associada com aria-describedby -->
        <input 
          type="email" 
          id="userEmail" 
          name="email" 
          required 
          autocomplete="email"
          aria-required="true"
          aria-describedby="emailHint emailError"
          placeholder="[email protected]">
        
        <span id="emailHint" class="helper-text">
          Nunca compartilhamos seu e-mail com terceiros.
        </span>
 
        <!-- ROBUSTO & COMPREENSÍVEL: Alerta dinâmico com role="alert" -->
        <div id="emailError" class="error-box" role="alert" aria-live="assertive">
          <strong>Atenção:</strong> Por favor, informe um endereço de e-mail válido (ex: [email protected]).
        </div>
      </div>
 
      <!-- OPERÁVEL: Botão nativo com tamanho mínimo de toque de 48px e foco nítido -->
      <button type="submit" class="btn-submit">
        Inscrever-se Gratuitamente
      </button>
    </form>
  </main>
 
  <script>
    // Validação acessível: foco automático no erro e prevenção de submissão
    const form = document.getElementById('newsletterForm');
    const emailInput = document.getElementById('userEmail');
    const errorBox = document.getElementById('emailError');
 
    form.addEventListener('submit', function(event) {
      event.preventDefault();
      const isValid = emailInput.value.includes('@') && emailInput.value.includes('.');
      
      if (!isValid) {
        // COMPREENSÍVEL & ROBUSTO: Avisa o leitor de tela que o campo está inválido
        emailInput.setAttribute('aria-invalid', 'true');
        errorBox.style.display = 'block';
        emailInput.focus();
      } else {
        emailInput.removeAttribute('aria-invalid');
        errorBox.style.display = 'none';
        alert('Inscrição confirmada com sucesso! (100% Acessível)');
      }
    });
  </script>
</body>
</html>