// Footer.jsx
function Footer({ onNavigate }) {
  const go = (path) => (e) => { e.preventDefault(); onNavigate(path); };
  const [dataOpen, setDataOpen] = React.useState(false);
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <Logo />
            <p className="mute" style={{ marginTop: 20, fontSize: 14, maxWidth: 320 }}>
              Veteran-operated technology innovation. Building software that holds up in the field — for aviation, defense, and government.
            </p>
            <div className="eyebrow mute" style={{ marginTop: 28 }}>
              <span className="dot" style={{ background: "#3FB46E" }}></span>
              SYSTEM ONLINE · 100% UPTIME (90D)
            </div>
          </div>
          <div>
            <h5>Navigate</h5>
            <ul>
              <li><a href="#/" onClick={go("/")}>Index</a></li>
              <li><a href="#/platform/aviation" onClick={go("/platform/aviation")}>Aviation Status</a></li>
              <li><a href="#/platform/aviationmax" onClick={go("/platform/aviationmax")}>AviationMax</a></li>
              <li><a href="#/capabilities" onClick={go("/capabilities")}>Capabilities</a></li>
              <li><a href="#/about" onClick={go("/about")}>Company</a></li>
              <li><a href="#/contact" onClick={go("/contact")}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Programs</h5>
            <ul>
              <li><a href="#/careers" onClick={go("/careers")}>Careers</a></li>
              <li><a href="#/correspondence" onClick={go("/correspondence")}>Correspondence</a></li>
              <li><a href="#/programs/dod-skillbridge" onClick={go("/programs/dod-skillbridge")}>DOD SkillBridge</a></li>
              <li><a href="#/programs/project-management" onClick={go("/programs/project-management")}>Project Management</a></li>
              <li><a href="#/programs/product-marketing" onClick={go("/programs/product-marketing")}>Product Marketing</a></li>
            </ul>
          </div>
          <div>
            <h5>Operating From</h5>
            <ul>
              <li>450 Sinclair St</li>
              <li>Reno, NV 89501</li>
              <li><a href="tel:+17752234416" className="tabular">(775) 223-4416</a></li>
              <li><a href="mailto:info@luli.us">info@luli.us</a></li>
            </ul>
            <ul style={{ marginTop: 20 }}>
              <li><a href="https://www.linkedin.com/company/lulius-innovation" target="_blank" rel="noopener">LinkedIn ↗</a></li>
              <li><a href="https://twitter.com/LuliusInnovate" target="_blank" rel="noopener">X (Twitter) ↗</a></li>
              <li><a href="https://www.facebook.com/innovateWithUs/" target="_blank" rel="noopener">Facebook ↗</a></li>
            </ul>
          </div>
        </div>

        <div style={{ marginTop: 72, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
          <div style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            flexWrap: "wrap", gap: "12px 24px",
          }}>
            <div className="eyebrow mute">© LULIUS INNOVATION LLC · 2014–2026 · ALL RIGHTS RESERVED</div>

            {/* Telemetry-style cookie readout — always visible (disclosure), expands
                inline on click. No overlay, no popup: it pushes the footer, nothing else. */}
            <button
              type="button"
              onClick={() => setDataOpen((o) => !o)}
              aria-expanded={dataOpen}
              aria-controls="data-notice"
              className="foot-telemetry eyebrow mute"
              style={{ display: "inline-flex", alignItems: "center", gap: 9 }}
            >
              <span style={{ width: 6, height: 6, background: "var(--accent)", display: "inline-block", flexShrink: 0 }}></span>
              TELEMETRY · GA4 · IP-ANONYMIZED
              <span aria-hidden="true" style={{
                color: "var(--accent)",
                transition: "transform .22s ease",
                transform: dataOpen ? "rotate(90deg)" : "none",
              }}>›</span>
            </button>

            <div className="eyebrow mute tabular">39.5296° N · 119.8138° W</div>
          </div>

          {/* Inline expansion — one-line notice + Privacy Policy link. */}
          <div id="data-notice" style={{
            overflow: "hidden",
            maxHeight: dataOpen ? 140 : 0,
            opacity: dataOpen ? 1 : 0,
            marginTop: dataOpen ? 16 : 0,
            transition: "max-height .32s ease, opacity .26s ease, margin-top .32s ease",
          }}>
            <p className="mute" style={{ fontSize: 13, lineHeight: 1.65, margin: 0, maxWidth: "78ch" }}>
              This site sets two first-party <span style={{ color: "var(--paper)" }}>Google Analytics</span> cookies
              (IP-anonymized) to measure traffic — no advertising cookies, and we don&rsquo;t sell your data.{" "}
              <a href="#/privacy" onClick={go("/privacy")} className="accent-text foot-privacy-link">Privacy Policy →</a>
            </p>
          </div>
        </div>

        <style>{`
          .foot-telemetry { background: none; border: 0; padding: 0; cursor: pointer; transition: color .15s ease; }
          .foot-telemetry:hover { color: var(--paper); }
          .foot-privacy-link { border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .15s ease; }
          .foot-privacy-link:hover { color: var(--paper) !important; }
        `}</style>
      </div>
    </footer>
  );
}
window.Footer = Footer;