function Footer() {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    if (!email) return;
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 3500);
    setEmail('');
  };
  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">Notes on <span className="glow">better water.</span></h3>
            <p className="news-sub">
              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)}
                required
              />
              <button type="submit">{submitted ? 'Done' : 'Subscribe'}</button>
            </form>
          </div>

          <div className="fcol">
            <h4>Shop</h4>
            <ul>
              <li><a href="#">Under-sink systems</a></li>
              <li><a href="#">Whole-home</a></li>
              <li><a href="#">Pitchers &amp; carafes</a></li>
              <li><a href="#">Cartridges</a></li>
              <li><a href="#">Spring water</a></li>
              <li><a href="#">Bottles</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;