/* eslint-disable */
// Weekly Commit — shared site chrome (Navbar + Footer + utilities).

function Navbar({ current }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [openMobile, setOpenMobile] = React.useState(false);

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

  const links = [
  { id: "home", label: "Home", href: "index.html" },
  { id: "process", label: "Process", href: "process.html" },
  { id: "services", label: "Services", href: "services.html" },
  { id: "cases", label: "Case Studies", href: "case-studies.html" },
  { id: "about", label: "About", href: "about.html" },
  { id: "contact", label: "Contact", href: "contact.html" }];


  return (
    <nav style={{
      position: "sticky", top: 0, zIndex: 80,
      background: scrolled ? "rgba(6,14,26,0.85)" : "rgba(13,31,53,0.40)",
      backdropFilter: "saturate(140%) blur(14px)",
      WebkitBackdropFilter: "saturate(140%) blur(14px)",
      borderBottom: scrolled ? "1px solid rgba(255,255,255,0.08)" : "1px solid rgba(255,255,255,0.04)",
      transition: "all 220ms cubic-bezier(0.4,0,0.2,1)"
    }}>
      <div className="wc-container" style={{
        height: 68, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24
      }}>
        <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <LogoTile size={32} />
          <span style={{
            fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800, fontSize: 17,
            letterSpacing: "-0.02em", color: "#fff"
          }}>Weekly Commit</span>
        </a>

        <div className="wc-hide-mobile" style={{ display: "flex", gap: 28, fontFamily: "'DM Sans', sans-serif", fontSize: 14 }}>
          {links.map((l) =>
          <a key={l.id} href={l.href}
          className={"wc-nav-link" + (l.id === current ? " is-active" : "")}
          style={{ color: l.id === current ? "#fff" : "#9bbdd0", fontWeight: l.id === current ? 500 : 400 }}>
              {l.label}
            </a>
          )}
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <Button variant="cta" size="md" href="contact.html" icon="calendar">Book a Discovery Call</Button>
          <button
            onClick={() => setOpenMobile((v) => !v)}
            aria-label="Open menu"
            style={{
              display: "none", background: "transparent", border: "none",
              color: "#fff", padding: 6
            }}
            className="wc-mobile-toggle">
            <i data-lucide={openMobile ? "x" : "menu"} style={{ width: 22, height: 22 }} /></button>
        </div>
      </div>

      {openMobile &&
      <div className="wc-mobile-menu" style={{
        background: "rgba(6,14,26,0.96)", borderTop: "1px solid rgba(255,255,255,0.08)",
        padding: "16px 32px 28px"
      }}>
          {links.map((l) =>
        <a key={l.id} href={l.href} style={{
          display: "block", padding: "12px 0",
          borderBottom: "1px solid rgba(255,255,255,0.05)",
          fontFamily: "'DM Sans', sans-serif", fontSize: 15,
          color: l.id === current ? "#fff" : "#9bbdd0"
        }}>{l.label}</a>
        )}
        </div>
      }

      <style>{`
        @media (max-width: 880px) {
          .wc-mobile-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
        }
      `}</style>
    </nav>);

}

function Footer() {
  const cols = [
  { h: "Services", items: [
    ["Senior 1:1 Career Coaching for Engineers ", "services.html#accelerator"],
    ["Done-For-You Negotiation", "services.html#negotiation"],
    ["Resume + LinkedIn", "services.html#interview"],
    ["Customized Packages", "services.html#resume"]]
  },
  { h: "Company", items: [
    ["About Us", "about.html"],
    ["The Process", "process.html"],
    ["Case Studies", "case-studies.html"],
    ["Contact", "contact.html"]]
  },
  { h: "Resources", items: [
    ["FAANG comp benchmarks", "#"],
    ["L5 → L7 levelling guide", "#"],
    ["Negotiation scripts", "#"],
    ["Resume templates", "#"]]
  },
  { h: "Legal", items: [
    ["Privacy policy", "#"],
    ["Terms of service", "#"],
    ["Refund policy", "#"]]
  }];


  return (
    <footer style={{
      position: "relative",
      background: "var(--navy-950)",
      borderTop: "1px solid rgba(255,255,255,0.06)",
      padding: "96px 0 40px",
      overflow: "hidden"
    }}>
      <div aria-hidden style={{
        position: "absolute", top: -240, left: "50%", transform: "translateX(-50%)",
        width: 980, height: 480,
        background: "radial-gradient(ellipse at center, rgba(45,106,170,0.16) 0%, rgba(45,106,170,0) 65%)",
        pointerEvents: "none"
      }} />

      <div className="wc-container" style={{ position: "relative" }}>
        {/* CTA tile */}
        <div style={{
          background: "linear-gradient(135deg, rgba(30,60,100,0.55), rgba(20,48,79,0.85))",
          border: "1px solid rgba(74,137,200,0.30)",
          borderRadius: 20,
          padding: "44px 48px",
          marginBottom: 80,
          display: "grid",
          gridTemplateColumns: "1.4fr auto",
          alignItems: "center",
          gap: 32
        }}>
          <div>
            <div className="wc-kicker" style={{ marginBottom: 10, fontSize: "12px" }}>06 · Next step</div>
            <h3 style={{
              fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 32,
              letterSpacing: "-0.02em", color: "#fff", margin: "0 0 10px", lineHeight: 1.15
            }}>Find out exactly what your search is worth.</h3>
            <p style={{
              fontFamily: "'DM Sans', sans-serif", color: "#9bbdd0",
              lineHeight: 1.6, margin: 0, maxWidth: 560, fontSize: "17px"
            }}>30 minutes. We map your TC against a realistic target. Most of our clients land between $300K and $530K. We'll diagnose what's holding you back, and give you a written plan, even if you don't sign on.

            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-start" }}>
            <Button variant="cta" size="lg" href="contact.html" iconRight="arrow-right">Book a Discovery Call</Button>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "#527b9b" }}>
              <span style={{ color: "#34d399" }}>●</span> Currently enrolling for June 2026
            </div>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr 1fr", gap: 40 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
              <LogoTile size={32} />
              <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 800, fontSize: 18, color: "#fff", letterSpacing: "-0.02em" }}>Weekly Commit</span>
            </div>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: "#7299b5", lineHeight: 1.65, maxWidth: 280, margin: "0 0 22px" }}>Strategic 1:1 coaching for L5–L7 Engineers, Staff+ ICs, and Engineering Leaders landing roles at the best companies in the world.

            </p>
            <div style={{ display: "flex", gap: 8 }}>
              {[["in", "LinkedIn"], ["X", "X / Twitter"], ["YT", "YouTube"], ["GH", "GitHub"]].map(([glyph, label]) => <a key={glyph} href="#" aria-label={label} style={{ width: 34, height: 34, borderRadius: 10,
                background: "rgba(255,255,255,0.03)",
                border: "1px solid rgba(255,255,255,0.08)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontFamily: "'DM Mono', monospace", fontSize: 11, fontWeight: 500,
                color: "#7299b5", textDecoration: "none"
              }}>{glyph}</a>
              )}
            </div>
          </div>
          {cols.map((col) =>
          <div key={col.h}>
              <div className="wc-kicker" style={{ marginBottom: 16, color: "#527b9b" }}>{col.h}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                {col.items.map(([label, href]) =>
              <a key={label} href={href} style={{
                fontFamily: "'DM Sans', sans-serif", fontSize: 13.5, color: "#9bbdd0"
              }}>{label}</a>
              )}
              </div>
            </div>
          )}
        </div>

        <div style={{
          marginTop: 72, paddingTop: 24,
          borderTop: "1px solid rgba(255,255,255,0.06)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 16, flexWrap: "wrap"
        }}>
          <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, color: "#3d6585", letterSpacing: "0.05em" }}>
            © 2026 Weekly Commit Inc. · Calgary, AB · All rights reserved
          </div>
          <div style={{ display: "flex", gap: 24, fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: "#527b9b" }}>
            <span><span style={{ color: "#34d399" }}>●</span> Currently coaching 15 Software Engineers</span>
            <span>5 spots open for June 2026</span>
          </div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Navbar, Footer });