// nav.jsx - sticky nav + footer for Skybridge

function Logo({ size = 40 }) {
  return (
    <a href="#top" className="sb-logo" aria-label="Skybridge - home">
      <img src="assets/skybridge-logo.png" alt="" width={size} height={size} draggable={false} />
      <span className="sb-logo-wm">
        <span className="sb-logo-name">Skybridge</span>
        <span className="sb-logo-tag">Systems</span>
      </span>
    </a>
  );
}

function ThemeToggle({ theme, onToggleTheme }) {
  const isDark = theme === "technical";
  return (
    <button
      className="sb-theme-toggle"
      onClick={onToggleTheme}
      aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
      title={isDark ? "Light mode" : "Dark mode"}
    >
      {isDark ? (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
          <circle cx="8" cy="8" r="3.5" stroke="currentColor" strokeWidth="1.4"/>
          <path d="M8 1v1.5M8 13.5V15M1 8h1.5M13.5 8H15M3.05 3.05l1.06 1.06M11.89 11.89l1.06 1.06M11.89 4.11l-1.06 1.06M4.11 11.89 3.05 12.95" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
      ) : (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
          <path d="M13.5 9.5A6 6 0 0 1 6.5 2.5a6 6 0 1 0 7 7z" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      )}
    </button>
  );
}

function Nav({ onCTA, theme, onToggleTheme }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["Services", "#services"],
    ["Process", "#process"],
    ["Results", "#results"],
    ["Pricing", "#pricing"],
    ["About", "#founder"],
    ["FAQ", "#faq"],
  ];

  return (
    <header className={"sb-nav " + (scrolled ? "is-scrolled" : "")}>
      <div className="wrap sb-nav-inner">
        <Logo />
        <nav className="sb-nav-links" aria-label="Primary">
          {links.map(([label, href]) => (
            <a key={href} href={href}>{label}</a>
          ))}
        </nav>
        <div className="sb-nav-cta">
          <ThemeToggle theme={theme} onToggleTheme={onToggleTheme} />
          <button className="btn btn--primary btn--sm" onClick={onCTA}>
            Free audit call
            <svg className="arrow" viewBox="0 0 16 16" fill="none" aria-hidden><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <button className="sb-burger" aria-label="Menu" onClick={() => setOpen(o => !o)} aria-expanded={open}>
            <span /><span /><span />
          </button>
        </div>
      </div>
      {open && (
        <div className="sb-nav-mobile">
          <div className="sb-nav-mobile-bar">
            <span className="kicker">Appearance</span>
            <ThemeToggle theme={theme} onToggleTheme={onToggleTheme} />
          </div>
          {links.map(([label, href]) => (
            <a key={href} href={href} onClick={() => setOpen(false)}>{label}</a>
          ))}
          <button
            type="button"
            className="btn btn--primary sb-nav-mobile-cta"
            onClick={() => { setOpen(false); onCTA?.(); }}
          >
            Free audit call
            <svg className="arrow" viewBox="0 0 16 16" fill="none" aria-hidden><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      )}
    </header>
  );
}

function siteVersionLabel() {
  const deployed = window.SB_SITE_VERSION;
  if (deployed && deployed !== "dev") return deployed;
  const now = new Date();
  const month = String(now.getUTCMonth() + 1).padStart(2, "0");
  return `${now.getUTCFullYear()}.${month}`;
}

function Footer({ onCTA }) {
  const version = siteVersionLabel();
  const build = window.SB_SITE_BUILD;

  return (
    <footer className="sb-footer">
      <div className="wrap">
        <div className="sb-footer-top">
          <div>
            <Logo size={36} />
            <p className="sb-footer-blurb">
              An independent engineering studio. We modernize legacy .NET,
              set up CI/CD that actually works, and build Azure infrastructure
              you can sleep on.
            </p>
            <div className="sb-footer-chips">
              <span className="chip">Tbilisi · CET-aligned</span>
              <span className="chip">NDA on request</span>
              <span className="chip">Fixed fee</span>
              <span className="chip">No lock-in</span>
            </div>
          </div>
          <div className="sb-footer-cols">
            <div>
              <h4>Services</h4>
              <a href="#services">CI/CD setup</a>
              <a href="#services">CI/CD migration</a>
              <a href="#services">.NET modernization</a>
              <a href="#services">Azure infrastructure</a>
            </div>
            <div>
              <h4>Company</h4>
              <a href="#founder">About</a>
              <a href="#results">Case studies</a>
              <a href="#process">Process</a>
              <a href="#pricing">Pricing</a>
            </div>
            <div>
              <h4>Contact</h4>
              <a href="mailto:hello@skybridgesystems.io">hello@skybridgesystems.io</a>
              <a href="#qualify" onClick={(e) => { e.preventDefault(); onCTA?.(); }}>Book a call</a>
              <a href="https://www.linkedin.com/in/gotsiridzes/" target="_blank" rel="noreferrer">LinkedIn</a>
              <a href="https://github.com/gotsiridzes" target="_blank" rel="noreferrer">GitHub</a>
            </div>
          </div>
        </div>
        <div className="sb-footer-bottom">
          <span>© 2026 Skybridge Systems · Built by engineers, for engineers</span>
          <span className="sb-footer-legal">
            <a href="privacy.html">Privacy</a>
            <span>·</span>
            <a href="terms.html">Terms</a>
            <span>·</span>
            <a href="https://github.com/gotsiridzes" target="_blank" rel="noreferrer">GitHub</a>
            <span>·</span>
            <span className="mono" title={build ? `Build ${build}` : undefined}>
              v.{version}
            </span>
          </span>
        </div>
      </div>
    </footer>
  );
}

// Component-scoped styles
const navStyles = document.createElement("style");
navStyles.textContent = `
  .sb-nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--paper) 80%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s var(--ease), background .2s var(--ease);
  }
  .sb-nav.is-scrolled { border-color: var(--line); }
  .sb-nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px; gap: 24px;
    min-width: 0;
  }
  .sb-logo {
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none; color: var(--ink);
    flex-shrink: 0;
    min-width: 0;
  }
  .sb-logo img { border-radius: 50%; }
  .sb-logo-wm { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
  .sb-logo-name { font-family: var(--f-serif); font-size: 22px; letter-spacing: -0.01em; }
  .sb-logo-tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
  .sb-nav-links { display: flex; gap: 22px; }
  .sb-nav-links a {
    font-size: 14px; color: var(--ink-2); letter-spacing: -0.005em;
    position: relative; padding: 6px 0;
  }
  .sb-nav-links a:hover { color: var(--ink); }
  .sb-nav-links a:hover::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: var(--bridge-red);
  }
  .sb-nav-cta {
    display: flex; align-items: center; gap: 14px;
    flex-shrink: 0;
    margin-left: auto;
  }
  .sb-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: none; border: 1px solid var(--line-strong);
    border-radius: 50%; color: var(--ink-2);
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
    flex-shrink: 0;
  }
  .sb-theme-toggle:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }
  .sb-burger { display: none; background: none; border: 0; width: 36px; height: 36px; position: relative; }
  .sb-burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 4px auto; transition: transform .2s var(--ease); }

  .sb-nav-mobile {
    display: none; flex-direction: column;
    padding: 16px var(--gutter) 20px;
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .sb-nav-mobile a { padding: 10px 0; font-size: 16px; border-bottom: 1px solid var(--line); }
  .sb-nav-mobile-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .sb-nav-mobile-cta {
    width: 100%;
    justify-content: center;
    margin-top: 16px;
  }

  @media (max-width: 900px) {
    .sb-nav-links { display: none; }
    .sb-burger { display: block; }
    .sb-nav-mobile { display: flex; }
  }
  @media (max-width: 640px) {
    .sb-nav-inner { height: 64px; gap: 10px; }
    .sb-nav-cta .btn--primary,
    .sb-nav-cta .sb-theme-toggle { display: none; }
    .sb-logo img { width: 34px; height: 34px; }
    .sb-logo-name { font-size: 19px; }
  }
  @media (max-width: 560px) {
    .sb-logo-tag { display: none; }
  }
  @media (max-width: 400px) {
    .sb-logo-name { font-size: 17px; }
    .sb-logo { gap: 8px; }
  }

  /* ────── Footer ────── */
  .sb-footer {
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    padding-block: 64px 28px;
    margin-top: 40px;
  }
  .sb-footer-top {
    display: grid;
    grid-template-columns: 1.4fr 2fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--line);
  }
  .sb-footer-blurb {
    color: var(--muted); margin: 18px 0 18px;
    font-size: 14.5px; max-width: 44ch;
  }
  .sb-footer-chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .sb-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .sb-footer-cols h4 {
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); margin: 0 0 14px;
    font-weight: 500;
  }
  .sb-footer-cols a {
    display: block; padding: 4px 0; font-size: 14px; color: var(--ink-2);
  }
  .sb-footer-cols a:hover { color: var(--bridge-red); }
  .sb-footer-bottom {
    display: flex; justify-content: space-between; padding-top: 24px;
    font-size: 12.5px; color: var(--muted);
  }
  .sb-footer-legal { display: inline-flex; gap: 10px; align-items: center; }
  .sb-footer-legal a { color: var(--muted); }
  .sb-footer-legal a:hover { color: var(--bridge-red); }
  @media (max-width: 900px) {
    .sb-footer-top { grid-template-columns: 1fr; gap: 36px; }
    .sb-footer-cols { grid-template-columns: repeat(2, 1fr); }
    .sb-footer-bottom { flex-direction: column; gap: 8px; }
  }
`;
document.head.appendChild(navStyles);

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