/* ============================================================
   Shared UI atoms: Nav, Footer, Wordmark, Spark, etc.
   ============================================================ */

const { useState, useEffect, useRef, useMemo } = React;

function Wordmark({ onClick }) {
  return (
    <div className="wordmark" onClick={onClick} role="button" tabIndex={0}>
      <div className="wordmark-glyph"></div>
      <div className="wordmark-text">
        EPIPHANY <span>/ ENGINE</span>
      </div>
    </div>
  );
}

const NAV_ITEMS = [
  { id: "home", label: "System" },
  { id: "use-cases", label: "Use Cases" },
  { id: "how", label: "How It Works" },
  { id: "philosophy", label: "Philosophy" },
];

function Nav({ route, go }) {
  const [open, setOpen] = useState(false);
  // close menu on route change
  useEffect(() => { setOpen(false); }, [route]);
  // lock body scroll when open
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <React.Fragment>
      <nav className="nav-bar">
        <div className="nav-inner">
          <Wordmark onClick={() => go("home")} />
          <div className="nav-links nav-links-desktop">
            {NAV_ITEMS.map(item => (
              <a
                key={item.id}
                className={`nav-link ${route === item.id ? "active" : ""}`}
                onClick={() => go(item.id)}
              >
                {item.label}
              </a>
            ))}
            <button className="nav-cta" onClick={() => go("contact")}>
              Book a briefing
            </button>
          </div>
          <button
            className={`nav-hamburger ${open ? "is-open" : ""}`}
            onClick={() => setOpen(!open)}
            aria-label="Toggle menu"
            aria-expanded={open}
          >
            <span></span>
            <span></span>
          </button>
        </div>
      </nav>

      {/* Mobile menu overlay — rendered as sibling of nav-bar so position: fixed works on iOS Safari */}
      <div className={`nav-mobile-menu ${open ? "is-open" : ""}`}>
        <div className="nav-mobile-inner">
          {NAV_ITEMS.map((item, i) => (
            <a
              key={item.id}
              className={`nav-mobile-link ${route === item.id ? "active" : ""}`}
              onClick={() => go(item.id)}
              style={{ transitionDelay: open ? `${i * 50 + 100}ms` : "0ms" }}
            >
              <span className="nav-mobile-num">0{i + 1}</span>
              <span>{item.label}</span>
            </a>
          ))}
          <button
            className="nav-mobile-cta"
            onClick={() => go("contact")}
            style={{ transitionDelay: open ? `${NAV_ITEMS.length * 50 + 100}ms` : "0ms" }}
          >
            Book a briefing <span>→</span>
          </button>
        </div>
      </div>
    </React.Fragment>
  );
}

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <Wordmark />
            <p style={{ color: "var(--ink-2)", fontSize: 15, maxWidth: "32ch", marginTop: 24, lineHeight: 1.55 }}>
              A reasoning system for organizations that need their decisions to hold up. Built by i4ANeYe Inc.
            </p>
          </div>
          <div>
            <h4>The System</h4>
            <ul>
              <li><a onClick={() => go("how")}>The Universal Axiom</a></li>
              <li><a onClick={() => go("how")}>Architecture</a></li>
              <li><a onClick={() => go("how")}>Provenance</a></li>
              <li><a onClick={() => go("how")}>Deployment</a></li>
            </ul>
          </div>
          <div>
            <h4>Use Cases</h4>
            <ul>
              <li><a onClick={() => go("use-cases", "financial")}>Financial Services</a></li>
              <li><a onClick={() => go("use-cases", "healthcare")}>Healthcare</a></li>
              <li><a onClick={() => go("use-cases", "government")}>Government &amp; Defense</a></li>
              <li><a onClick={() => go("use-cases")}>All verticals</a></li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a onClick={() => go("philosophy")}>Philosophy</a></li>
              <li><a onClick={() => go("contact")}>Contact</a></li>
              <li><a>Terms</a></li>
              <li><a>Privacy</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div className="left">
            <span>© 2026 i4ANeYe Inc.</span>
            <span>NAICS 541710 · R&amp;D, Physical Sciences</span>
          </div>
          <div>Toronto · Boston · Singapore</div>
        </div>
      </div>
    </footer>
  );
}

/* The Spark — concentric rings, used as decoration */
function Spark({ rings = 7, className = "", style = {} }) {
  return (
    <div className={`cta-spark ${className}`} style={style}>
      {Array.from({ length: rings }).map((_, i) => {
        const size = (i + 1) * 140;
        return (
          <div key={i} style={{
            width: size, height: size,
            opacity: 1 - i * 0.12,
          }} />
        );
      })}
    </div>
  );
}

/* Ticker */
function Ticker({ items }) {
  const content = [...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {content.map((item, i) => (
          <div className="ticker-item" key={i}>{item}</div>
        ))}
      </div>
    </div>
  );
}

/* Render a title-array with optional {em: "..."} markers */
function renderTitle(parts) {
  if (typeof parts === "string") return parts;
  return parts.map((p, i) => {
    if (typeof p === "string") return <React.Fragment key={i}>{p}</React.Fragment>;
    if (p && p.em !== undefined) return <em key={i}>{p.em}</em>;
    return null;
  });
}

Object.assign(window, { Wordmark, Nav, Footer, Spark, Ticker, NAV_ITEMS, renderTitle });