/* Nav + Footer + small atoms */

function Logo({ size = 22 }) {
  // Recreate the pixel mark from the logo: stylized "R" in chunky pixels
  const px = size / 4.4;
  // Layout based on the supplied logo: 5 small pixel squares in an upper cluster
  // and a vertical bar separator. Drawn fresh as original geometry.
  return (
    <span className="glyph" style={{ width: size, height: size }}>
      <span className="px" style={{ left: 0, top: 0, width: px, height: px }}></span>
      <span className="px" style={{ left: px * 1.6, top: 0, width: px, height: px }}></span>
      <span className="px" style={{ left: 0, top: px * 1.6, width: px, height: px }}></span>
      <span className="px" style={{ left: px * 1.6, top: px * 1.6, width: px, height: px }}></span>
      <span className="px" style={{ left: 0, top: px * 3.2, width: px, height: px }}></span>
      <span className="px" style={{ left: px * 1.6, top: px * 3.2, width: px, height: px }}></span>
    </span>
  );
}

function Brand({ small }) {
  return (
    <a className="nav-brand" href="#top">
      <img
        src="assets/rozumcode-logo.jpg"
        alt="ROZUMCODE"
        className="nav-brand-logo"
        style={{
          height: small ? 22 : 28,
          width: "auto",
          display: "block",
        }}
      />
    </a>
  );
}

function Nav({ onCTA }) {
  const [open, setOpen] = React.useState(false);
  const links = [
    ["Services", "#services"],
    ["Privacy", "#privacy"],
    ["Method", "#method"],
    ["Industries", "#industries"],
    ["Compliance", "#compliance"],
    ["Stack", "#stack"],
    ["Contact", "#contact"],
  ];
  return (
    <nav className="nav" id="top">
      <div className="nav-inner">
        <Brand />
        <div className="nav-links">
          {links.map(([l, h]) => (
            <a key={h} href={h}>{l}</a>
          ))}
        </div>
        <div className="nav-cta">
          <span className="nav-meta"><span className="live"></span>Accepting Q3 engagements</span>
          <button
            className="nav-mobile-btn"
            onClick={() => setOpen((v) => !v)}
            aria-label="menu"
            style={{
              display: "none",
              fontFamily: "var(--ff-mono)",
              fontSize: 11,
              letterSpacing: "0.1em",
              textTransform: "uppercase",
              border: "1px solid var(--ink)",
              padding: "6px 10px",
              background: open ? "var(--ink)" : "transparent",
              color: open ? "var(--paper)" : "var(--ink)",
            }}
          >
            {open ? "Close" : "Menu"}
          </button>
          <a className="btn nav-cta-btn" href="mailto:info@rozumcode.com" onClick={onCTA}>
            Set a free meeting
            <span className="arrow"></span>
          </a>
        </div>
      </div>
      {open && (
        <div className="nav-mobile-panel">
          <div className="nav-mobile-head">
            <Brand />
            <button
              className="nav-mobile-close"
              onClick={() => setOpen(false)}
              aria-label="close menu"
            >
              CLOSE ✕
            </button>
          </div>
          <nav className="nav-mobile-links">
            {links.map(([l, h], i) => (
              <a
                key={h}
                href={h}
                onClick={() => setOpen(false)}
                className="nav-mobile-link"
              >
                <span className="num">{String(i + 1).padStart(2, "0")}</span>
                <span className="label">{l}</span>
                <span className="arr">→</span>
              </a>
            ))}
          </nav>
          <div className="nav-mobile-foot">
            <a
              href="mailto:info@rozumcode.com"
              className="btn"
              onClick={() => setOpen(false)}
              style={{ justifyContent: "center", width: "100%" }}
            >
              Set a free meeting <span className="arrow"></span>
            </a>
            <div className="nav-mobile-contact">
              <div>
                <div className="k">Office</div>
                <div className="v">London · WC2H 9JQ</div>
              </div>
              <div>
                <div className="k">Email</div>
                <div className="v">info@rozumcode.com</div>
              </div>
            </div>
          </div>
        </div>
      )}
      <style>{`
        @media (max-width: 980px) {
          .nav-cta .nav-meta { display: none; }
        }
        @media (max-width: 720px) {
          .nav-links { display: none !important; }
          .nav-inner { grid-template-columns: 1fr auto !important; }
          .nav-cta-btn { display: none !important; }
          .nav-mobile-btn { display: inline-block !important; }
        }
        .nav-mobile-panel {
          position: fixed;
          inset: 0;
          background: var(--paper);
          z-index: 200;
          display: flex;
          flex-direction: column;
          padding: 0;
          animation: nav-slide 0.22s ease-out;
        }
        @keyframes nav-slide {
          from { opacity: 0; transform: translateY(-12px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .nav-mobile-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 14px var(--gutter);
          border-bottom: 1px solid var(--ink);
        }
        .nav-mobile-close {
          font-family: var(--ff-mono);
          font-size: 11px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          font-weight: 600;
          border: 1px solid var(--ink);
          padding: 7px 12px;
          background: var(--ink);
          color: var(--paper);
        }
        .nav-mobile-links {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 8px var(--gutter);
        }
        .nav-mobile-link {
          display: grid;
          grid-template-columns: 40px 1fr 24px;
          align-items: center;
          gap: 14px;
          padding: 18px 0;
          border-bottom: 1px solid var(--g-15);
          font-family: var(--ff-display);
          font-weight: 900;
          font-size: 28px;
          letter-spacing: -0.02em;
          text-transform: uppercase;
          line-height: 1;
          color: var(--ink);
        }
        .nav-mobile-link:active { color: var(--acc); }
        .nav-mobile-link .num {
          font-family: var(--ff-mono);
          font-size: 10px;
          letter-spacing: 0.12em;
          color: var(--g-55);
          font-weight: 500;
        }
        .nav-mobile-link .arr {
          font-family: var(--ff-mono);
          font-size: 18px;
          color: var(--g-40);
          text-align: right;
        }
        .nav-mobile-foot {
          padding: 18px var(--gutter) 28px;
          border-top: 1px solid var(--ink);
          display: flex;
          flex-direction: column;
          gap: 18px;
        }
        .nav-mobile-contact {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        .nav-mobile-contact .k {
          font-family: var(--ff-mono);
          font-size: 9.5px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--g-55);
          margin-bottom: 4px;
        }
        .nav-mobile-contact .v {
          font-family: var(--ff-mono);
          font-size: 12px;
          color: var(--ink);
        }
      `}</style>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="page">
        <div className="footer-grid">
          <div>
            <Brand />
            <p className="footer-tagline" style={{ marginTop: 24 }}>
              We advise.<br />We build.<br />We execute.
            </p>
          </div>
          <div>
            <h5>Capabilities</h5>
            <ul>
              <li><a href="#services">System architecture</a></li>
              <li><a href="#services">Embedded AI</a></li>
              <li><a href="#services">Agentic systems</a></li>
              <li><a href="#services">Red teaming</a></li>
              <li><a href="#compliance">Compliance</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li>About</li>
              <li>Method</li>
              <li>Insights</li>
              <li>Careers</li>
              <li>Press</li>
            </ul>
          </div>
          <div>
            <h5>Office</h5>
            <ul style={{ fontSize: 11 }}>
              <li style={{ textTransform: "none", letterSpacing: 0 }}>
                ROZUMCODE LTD
              </li>
              <li style={{ textTransform: "none", letterSpacing: 0 }}>
                71–75 Shelton Street
              </li>
              <li style={{ textTransform: "none", letterSpacing: 0 }}>
                Covent Garden, London
              </li>
              <li style={{ textTransform: "none", letterSpacing: 0 }}>
                WC2H 9JQ, United Kingdom
              </li>
              <li style={{ marginTop: 12, textTransform: "none", letterSpacing: 0 }}>
                <a href="mailto:info@rozumcode.com">info@rozumcode.com</a>
              </li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 ROZUMCODE LTD · Registered in England &amp; Wales</span>
          <span>v.1.0 · LON / EU</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Logo, Brand, Nav, Footer });
