/* global React, Wordmark, Sparkline, useTicker, fmt, usd */
const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

/* HEXA-V — Direction A: INDUSTRIAL CONSOLE
   Dense, terminal-styled, hex grid background, lots of live data */

/* --- Top status bar --- */
const A_TopBar = () => {
  const t = new Date();
  const stamp = `${String(t.getUTCFullYear())}.${String(t.getUTCMonth() + 1).padStart(2, "0")}.${String(t.getUTCDate()).padStart(2, "0")}T${String(t.getUTCHours()).padStart(2, "0")}:${String(t.getUTCMinutes()).padStart(2, "0")}Z`;
  return (
    <div className="mono" style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      padding: "8px 32px", borderBottom: "1px solid var(--line)",
      fontSize: 11, color: "var(--fg-2)", letterSpacing: "0.08em"
    }}>
      <div style={{ display: "flex", gap: 24 }}>
        <span><span className="dot pulse" style={{ marginRight: 8 }}></span>NODES · USA · ASIA · EUROPE · OPERATIONAL</span>
        <span>UPTIME 99.997%</span>
        <span>v4.18.2 — HOTFIX/OPS-2031</span>
      </div>
      <div style={{ display: "flex", gap: 24 }}>
        <span>{stamp}</span>
        <span>EN · USD</span>
        <span style={{ color: "#2563eb" }}>● LIVE</span>
      </div>
    </div>);

};

/* --- Nav --- */
const A_Nav = () =>
<div style={{
  display: "flex", justifyContent: "space-between", alignItems: "center",
  padding: "20px 32px", borderBottom: "1px solid var(--line)", background: "var(--bg)",
  position: "sticky", top: 0, zIndex: 10
}} className="hexa-nav-wrap">
    <div style={{ display: "flex", alignItems: "center", gap: 40 }} className="hexa-nav-brand">
      <Wordmark size={24} />
      <nav style={{ display: "flex", gap: 24 }} className="hexa-nav-links">
        {[
      { label: "PPC Agent",    href: "ppc-agent.html" },
      { label: "Profit OS",   href: "profit-os.html" },
      { label: "Sales Intel",  href: "sales-intel.html" },
      { label: "Integrations", href: "integrations.html" },
      { label: "Pricing",      href: "#pricing" },
      { label: "Docs",         href: "docs.html" },
      { label: "About",        href: "about.html" }].
      map((s, i) =>
      <a key={s.label} href={s.href} className={`lnk burst burst-${i + 1}`}>{s.label}</a>
      )}
      </nav>
    </div>
    <div style={{ display: "flex", gap: 12, alignItems: "center" }} className="hexa-nav-actions">
      <a href="signin.html" className="lnk burst burst-3">Sign in</a>
      <a href={(window.HEXA || {}).WATCH_URL || "#watch-demo"} className="btn burst burst-4" style={{ textDecoration: "none" }}>▶ Watch Demo</a>
      <a href={(window.HEXA || {}).SIGNUP_URL || "#"} className="btn btn-primary burst burst-5" style={{ textDecoration: "none", backgroundColor: "#2563eb" }}>Start at $19 →</a>
    </div>
  </div>;


window.A_TopBar = A_TopBar;
window.A_Nav = A_Nav;