function Footer() {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const [error, setError] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email || busy) return;
    setBusy(true); setError('');
    try {
      const r = await fetch('/umbraco/Surface/Newsletter/Subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok || !data.ok) {
        setError(data.error || 'Could not subscribe — try again.');
      } else {
        setSubmitted(true);
        setTimeout(() => setSubmitted(false), 3500);
        setEmail('');
      }
    } catch (err) {
      setError('Network error — try again.');
    } finally {
      setBusy(false);
    }
  };
  return (
    <footer className="footer" data-screen-label="06 Footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="news-card">
            <div className="eyebrow">The Decant — monthly</div>
            <h3 className="news-title" dangerouslySetInnerHTML={{ __html: ((window.__AQUO_CONTENT__ && window.__AQUO_CONTENT__.footer && window.__AQUO_CONTENT__.footer.newsTitle) || 'Notes on <span class="glow">better water.</span>') }} />
            <p className="news-sub">
              {(window.__AQUO_CONTENT__ && window.__AQUO_CONTENT__.footer && window.__AQUO_CONTENT__.footer.newsSub) || "Short, useful dispatches on filtration, testing, and what's in your tap. One email a month. Unsubscribe anytime."}
            </p>
            <form className="news-form" onSubmit={onSubmit}>
              <input
                type="email"
                placeholder={submitted ? '✓ SUBSCRIBED' : 'YOU@HOUSEHOLD.COM'}
                value={email}
                onChange={e => setEmail(e.target.value)}
                disabled={busy}
                required
              />
              <button type="submit" disabled={busy}>
                {submitted ? 'Done' : (busy ? 'Sending…' : 'Subscribe')}
              </button>
            </form>
            {error && <div className="news-err" style={{ marginTop: 8, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', color: '#FF6B8A' }}>{error}</div>}
          </div>

          <div className="fcol">
            <h4>Shop</h4>
            <ul>
              {((window.__AQUO_CONTENT__ && window.__AQUO_CONTENT__.shopCategories) || []).map(c => (
                <li key={c.label}><a href={c.url}>{c.label}</a></li>
              ))}
            </ul>
          </div>
          <div className="fcol">
            <h4>Service</h4>
            <ul>
              <li><a href="#">Water test</a></li>
              <li><a href="#">Installation</a></li>
              <li><a href="#">Refill subscription</a></li>
              <li><a href="#">Warranty</a></li>
              <li><a href="#">Trade program</a></li>
            </ul>
          </div>
          <div className="fcol">
            <h4>Company</h4>
            <ul>
              <li><a href="#">About AQUO</a></li>
              <li><a href="#">The Journal</a></li>
              <li><a href="#">Stores</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-wordmark">
          <img src="/img/logo-light.png" alt="aquo" style={{ width: '300px' }} />
          <span className="glow-dot" aria-hidden="true" />
        </div>

        <div className="footer-base">
          <span>© 2026 AQUO WATER SOLUTIONS (PTY) LTD</span>
          <span>MADE IN SA · SHIPPED NATIONWIDE</span>
          <span>PRIVACY · TERMS · COOKIES</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;