function Footer() {
  const [email, setEmail] = React.useState('');
  const [subscribed, setSubscribed] = React.useState(false);
  const [time, setTime] = React.useState(() => formatMiami());
  React.useEffect(() => {
    const id = setInterval(() => setTime(formatMiami()), 1000);
    return () => clearInterval(id);
  }, []);

  function handleSubmit(e) {
    e.preventDefault();
    if (!email) return;
    setSubscribed(true);
    setTimeout(() => { setSubscribed(false); setEmail(''); }, 3200);
  }

  return (
    <footer className="footer-v2">
      {/* ---- Signals strip ---- */}
      <div className="footer-signals">
        <div className="container footer-signals-inner">
          <span className="footer-signal">
            <span className="dot dot-cyan" />
            <span className="k">CORTEX</span>
            <span className="v">V.04 — online</span>
          </span>
          <span className="footer-signal">
            <span className="dot dot-amber" />
            <span className="k">GPU GRID</span>
            <span className="v">42.1k wearables streaming</span>
          </span>
          <span className="footer-signal">
            <span className="dot dot-violet" />
            <span className="k">MIAMI · HQ</span>
            <span className="v">{time}</span>
          </span>
          <span className="footer-signal">
            <span className="dot dot-cyan" />
            <span className="k">REVEAL</span>
            <span className="v">07.24.26 — countdown active</span>
          </span>
        </div>
      </div>

      {/* ---- Main block ---- */}
      <div className="container">
        {/* Wordmark with integrated newsletter */}
        <div className="footer-hero">
          <div className="footer-wordmark-v2 reveal">
            <span className="wm-line-top">
              <span className="wm-index">( 2026 — ∞ )</span>
              <span className="wm-dash">/</span>
              <span className="wm-tag">Ambient intelligence for the self</span>
            </span>
            <span className="wm-big">
              vei<em>ron</em><span className="wm-dot">.</span>
            </span>
            <span className="wm-underline" aria-hidden="true" />
          </div>

          <form className="footer-newsletter reveal" onSubmit={handleSubmit}>
            <label className="fn-label">
              <span className="fn-num">//01</span>
              <span>Join the signal list</span>
            </label>
            <div className="fn-input-wrap">
              <input
                type="email"
                placeholder="you@presence.mode"
                value={email}
                onChange={e => setEmail(e.target.value)}
                className="fn-input"
                required
              />
              <button type="submit" className={`fn-submit${subscribed ? ' ok' : ''}`} aria-label="Subscribe">
                {subscribed ? (
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M20 6L9 17l-5-5"/></svg>
                ) : (
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                )}
              </button>
            </div>
            <p className="fn-note">
              {subscribed
                ? '✓ Signal received — confirmation on its way.'
                : 'One letter per month. Cortex updates, Forge releases, field notes.'}
            </p>
          </form>
        </div>

        {/* Columns */}
        <div className="footer-cols">
          <div className="fc-col">
            <h4>Products</h4>
            <ul>
              <li><a href="#"><span>LifeCoPilot</span><span className="fc-tag">v.04</span></a></li>
              <li><a href="#"><span>Forge</span><span className="fc-tag">beta</span></a></li>
              <li><a href="#"><span>Wearables</span><span className="fc-tag">ring · band</span></a></li>
              <li><a href="#"><span>SocialFi</span><span className="fc-tag">Q3</span></a></li>
              <li><a href="#"><span>Developer SDK</span></a></li>
            </ul>
          </div>
          <div className="fc-col">
            <h4>Company</h4>
            <ul>
              <li><a href="#"><span>Manifesto</span></a></li>
              <li><a href="#"><span>Team</span></a></li>
              <li><a href="#"><span>Newsroom</span></a></li>
              <li><a href="#"><span>Careers</span><span className="fc-tag">12 open</span></a></li>
              <li><a href="#"><span>Investors</span></a></li>
            </ul>
          </div>
          <div className="fc-col">
            <h4>Resources</h4>
            <ul>
              <li><a href="#"><span>Documentation</span></a></li>
              <li><a href="#"><span>Support</span></a></li>
              <li><a href="#"><span>Press kit</span></a></li>
              <li><a href="#"><span>Research</span></a></li>
              <li><a href="#"><span>Status</span><span className="fc-tag ok">● all systems</span></a></li>
            </ul>
          </div>
          <div className="fc-col">
            <h4>Connect</h4>
            <ul>
              <li><a href="#"><span>X / Twitter</span><span className="fc-arrow">↗</span></a></li>
              <li><a href="#"><span>LinkedIn</span><span className="fc-arrow">↗</span></a></li>
              <li><a href="#"><span>GitHub</span><span className="fc-arrow">↗</span></a></li>
              <li><a href="#"><span>YouTube</span><span className="fc-arrow">↗</span></a></li>
              <li><a href="#"><span>Discord</span><span className="fc-arrow">↗</span></a></li>
            </ul>
          </div>
        </div>

        {/* Base */}
        <div className="footer-base-v2">
          <div className="fb-left">
            <span>© 2026 Veiron, Inc.</span>
            <span className="fb-sep">·</span>
            <a href="#">Privacy</a>
            <span className="fb-sep">·</span>
            <a href="#">Terms</a>
            <span className="fb-sep">·</span>
            <a href="#">Cookie preferences</a>
          </div>
          <div className="fb-right">
            <span>Designed in Miami</span>
            <span className="fb-sep">·</span>
            <span>Running on the Veiron Grid</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function formatMiami() {
  try {
    return new Date().toLocaleTimeString('en-US', {
      timeZone: 'America/New_York',
      hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
    }) + ' EDT';
  } catch(e) { return '—'; }
}

window.Footer = Footer;