// ============================================================
// Newsletter — quiet email capture. No nagging, no discount.
// Treats subscription as an invitation, not a transaction.
// ============================================================

function JmNewsletter({ lang }) {
  const t = JM.t[lang];
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);

  function submit(e) {
    e.preventDefault();
    if (!email.trim() || !email.includes('@')) return;
    setDone(true);
  }

  return (
    <section className="jm-section jm-section-alt" data-screen-label="Newsletter">
      <div className="jm-container">
        <div className="jm-newsletter__inner">
          <div>
            <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 18 }}>
              {lang === 'vi' ? 'Thư từ Jesmee' : 'A letter'}
            </div>
            <h2 className="jm-h1" style={{ marginBottom: 20 }}>{t['newsletter.title']}</h2>
            <p className="jm-small" style={{ maxWidth: 460 }}>{t['newsletter.sub']}</p>
          </div>

          {!done ? (
            <form className="jm-newsletter__form" onSubmit={submit}>
              <input className="jm-input" type="email" placeholder={t['newsletter.place']} value={email} onChange={e => setEmail(e.target.value)} aria-label={t['newsletter.place']} required/>
              <button className="jm-btn jm-btn-primary" type="submit">{t['newsletter.cta']}</button>
            </form>
          ) : (
            <div className="jm-newsletter__done">
              <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 8 }}>
                {lang === 'vi' ? 'Đã ghi nhận' : 'You\'re in'}
              </div>
              <p className="jm-body" style={{ margin: 0 }}>{t['newsletter.done']}</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

window.JmNewsletter = JmNewsletter;