/* NeuralVault — Footer.jsx
   Minimalist data-dense footer: brand, links, network nodes, newsletter. */

const { useState } = React;

function NewsletterRow() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    if (!email) return;
    setSent(true);
    setTimeout(() => { setSent(false); setEmail(""); }, 2400);
  };
  return (
    <form className="news-row" onSubmit={onSubmit} style={{ marginTop: 20, maxWidth: 360 }}>
      <input
        type="email"
        placeholder="your@institution.com"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        aria-label="Email for newsletter"
      />
      <button type="submit">{sent ? "SUBSCRIBED" : "SUBSCRIBE"}</button>
    </form>
  );
}

function NetworkNodes() {
  return (
    <div className="nodes">
      {NETWORK_NODES.map((n) => (
        <div key={n.code} className={`n ${n.live ? "" : "off"}`}>
          <span className="led" />
          {n.code}
        </div>
      ))}
    </div>
  );
}

function Footer() {
  return (
    <footer id="thesis" data-screen-label="Footer">
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <Brand href="#" style={{ marginBottom: 18, display: "inline-flex" }} />
            <p className="s-sub" style={{ fontSize: 13, maxWidth: "36ch" }}>
              Cognitive infrastructure for principals who think in decades.
              Ohio · New York
            </p>
          </div>

          <div>
            <div className="foot-h">Navigation</div>
            <div className="foot-list">
              <a href="#dashboard">Command</a>
              <a href="#verticals">Verticals</a>
              <a href="#stories">Transitions</a>
              <a href="#portal">Contact</a>
            </div>
          </div>

          <div>
            <div className="foot-h">Active Network</div>
            <NetworkNodes />
          </div>
        </div>

        <div className="foot-bottom">
          <span>© MMXXVI NeuralVault LLC · An Ohio Based AI Agency.</span>
          <div className="links">
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">SOC-2</a>
            <a href="#">GDPR</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer, NetworkNodes, NewsletterRow });