// Newsletter
const Newsletter = () => {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  return (
    <section className="news">
      <div className="container">
        <div className="news-card">
          <div className="news-card-blob" />
          <div className="news-card-blob news-card-blob-2" />
          <div className="news-body">
            <div className="eyebrow eyebrow-light">Newsletter Ábaco</div>
            <h2>Receba ideias sobre<br/>educação que pensa.</h2>
            <p>Conteúdos quinzenais sobre aprendizagem, família e escola — diretamente da equipe pedagógica do Ábaco.</p>
          </div>
          <form className="news-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
            {sent ? (
              <div className="news-thanks">
                <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" strokeWidth="3">
                  <path d="M5 12l5 5L20 7"/>
                </svg>
                <strong>Obrigado!</strong>
                <span>Em breve você receberá nossas novidades.</span>
              </div>
            ) : (
              <>
                <label>
                  <span>Seu nome</span>
                  <input type="text" required placeholder="Como te chamamos?"/>
                </label>
                <label>
                  <span>Seu e-mail</span>
                  <input type="email" required placeholder="seuemail@exemplo.com.br"
                         value={email} onChange={(e) => setEmail(e.target.value)} />
                </label>
                <label className="news-check">
                  <input type="checkbox" required />
                  <span>aceito receber comunicações do Colégio Ábaco</span>
                </label>
                <button type="submit" className="btn btn-cyan news-submit">
                  Quero receber →
                </button>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
};

window.Newsletter = Newsletter;