// Devleaps Core: Logo, Icon, Nav, Footer

const Icon = ({ name, size = 20, style = {}, className = "" }) => {
  const paths = {
    "arrow-right": <><path d="M5 12h14" /><path d="M12 5l7 7-7 7" /></>,
    "arrow-up-right": <><path d="M7 17L17 7" /><path d="M7 7h10v10" /></>,
    "arrow-down-right": <><path d="M7 7l10 10" /><path d="M17 7v10h-10" /></>,
    "check": <polyline points="20 6 9 17 4 12" />,
    "zap": <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />,
    "database": <><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5" /><path d="M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3" /></>,
    "code": <><polyline points="8 6 2 12 8 18" /><polyline points="16 6 22 12 16 18" /></>,
    "package": <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" />,
    "menu": <><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></>,
    "x": <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></>,
    "users": <><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 00-3-3.87" /><path d="M16 3.13a4 4 0 010 7.75" /></>,
    "layers": <><polygon points="12 2 2 7 12 12 22 7 12 2" /><polyline points="2 17 12 22 22 17" /><polyline points="2 12 12 17 22 12" /></>,
    "git-branch": <><line x1="6" y1="3" x2="6" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 01-9 9" /></>,
    "aperture": <><circle cx="12" cy="12" r="10" /><path d="M14.31 8l5.74 9.94" /><path d="M9.69 8h11.48" /><path d="M7.38 12l5.74-9.94" /><path d="M9.69 16L3.95 6.06" /><path d="M14.31 16H2.83" /><path d="M16.62 12l-5.74 9.94" /></>,
    "terminal": <><polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" /></>,
    "map-pin": <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" /><circle cx="12" cy="10" r="3" /></>,
    "external": <><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" /></>,
    "plus": <><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></>,
    "send": <><line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" /></>,
    "github": <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22" />
  };
  return (
    <svg className={className} style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      {paths[name] || null}
    </svg>);

};

// Devleaps mark — small pixel-block "d" lifted from the wordmark
const BlockMark = ({ size = 28 }) => {
  const fg = "var(--fg)";
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: "block", flexShrink: 0 }} aria-hidden="true">
      {/* right column (full height of d) */}
      <rect x="18" y="0" width="6" height="24" fill={fg} />
      {/* top of bowl */}
      <rect x="6" y="6" width="12" height="6" fill={fg} />
      {/* bottom of bowl */}
      <rect x="6" y="18" width="12" height="6" fill={fg} />
      {/* left side of bowl */}
      <rect x="0" y="6" width="6" height="18" fill={fg} />
      {/* accent middle bar */}
      <rect x="6" y="12" width="6" height="6" fill="var(--accent)" />
    </svg>);

};

// Real Devleaps wordmark — picks the right artwork per theme
// We have three logos: black (SVG), white (SVG), red (PNG)
const LOGO_BY_THEME = {
  black: "assets/devleaps-logo-red.png", // dark bg → red wordmark (LQ-style, brand pop)
  green: "assets/devleaps-logo-red.png", // forest dark bg → red wordmark (matches devleaps.nl)
  purple: "assets/devleaps-logo-white.svg", // dark plum → white wordmark
  light: "assets/devleaps-logo-black.svg", // paper bg → black wordmark
  blue: "assets/devleaps-logo-navy.svg" // paper bg → navy wordmark (LQ palette)
};
const LOGO_INVERSE_BY_THEME = {
  // Used in places that override to dark bg (e.g. dark footer, dark contact form)
  black: "assets/devleaps-logo-red.png",
  green: "assets/devleaps-logo-red.png",
  purple: "assets/devleaps-logo-white.svg",
  light: "assets/devleaps-logo-white.svg",
  blue: "assets/devleaps-logo-signal.svg" // navy/dark bg → signal-blue wordmark
};

const Logo = ({ h = 22, inverse = false, theme }) => {
  const t = theme || typeof document !== "undefined" && document.documentElement.dataset.theme || "green";
  const file = inverse ?
  LOGO_INVERSE_BY_THEME[t] || "assets/devleaps-logo-white.svg" :
  LOGO_BY_THEME[t] || "assets/devleaps-logo-black.svg";
  // svg viewBox is 1052.299 x 116.428, so width = h * (1052.299/116.428) ≈ h * 9.04
  return (
    <span style={{ display: "inline-flex", alignItems: "center", lineHeight: 0 }}>
      <img src={file} alt="Devleaps" style={{
        height: h, width: "auto",
        display: "block"
      }} />
    </span>);

};

const Eyebrow = ({ children, style = {} }) =>
<span className="dl-eyebrow" style={style}>{children}</span>;


const Nav = ({ onJump, theme, heroTheme = "light" }) => {
  // scroll position drives both the "scrolled" state (8px threshold for borders/blur)
  // and a thicker hero-darkening crossfade so the nav background appears to "lift in"
  // as you leave the hero. heroTheme tells us what the hero looks like at scrollTop=0.
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const services = [
    { label: "Transformation leadership",        href: "transformation.html" },
    { label: "Cloud + platform engineering",     href: "platform-engineering.html" },
    { label: "DevEx, AIEx + PeopleEx",           href: "devex.html" },
    { label: "Data, foundations to insight",     href: "data.html" },
    { label: "AI that amplifies people",         href: "ai.html" }
  ];
  const items = [
  { k: "network", label: "the network", href: "index.html#network" },
  { k: "manifesto", label: "the challenges", href: "index.html#manifesto" },
  { k: "services", label: "the services", href: "index.html#services", children: services },
  { k: "products", label: "the products", href: "products.html" },
  { k: "team", label: "the team", href: "index.html#team" },
  { k: "careers", label: "careers", href: "careers.html" }];

  // detect: are we on the home page? If yes, in-page anchors smooth-scroll;
  // otherwise we just navigate to the href.
  const isHome = typeof document !== "undefined" &&
  /(?:^|\/)(?:index\.html)?$/.test(document.location.pathname);
  const jump = (e, item) => {
    if (item.k === "careers" || item.k === "products") {
      // always navigate to the standalone page
      return; // let default <a href> happen
    }
    if (item.children) {
      // dropdown trigger — never jump on the trigger itself
      e.preventDefault();
      return;
    }
    if (isHome) {
      // in-page smooth scroll — use the hash from href so id and key can differ
      e.preventDefault();
      const hash = (item.href.match(/#(.+)$/) || [])[1] || item.k;
      const el = document.getElementById(hash);
      if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" });
      setOpen(false);
      onJump && onJump(item.k);
    }
    // otherwise: let the <a href="index.html#..."> navigate naturally
  };
  return (
    <nav className={`dl-nav ${scrolled ? "scrolled" : "at-top"} ${heroTheme === "dark" ? "over-dark" : "over-light"}`}>
      <a className="dl-nav-logo" href="index.html">
        <Logo h={22} theme={theme} inverse={heroTheme === "dark" && !scrolled} />
      </a>
      <div className="dl-nav-links">
        {items.map((i) =>
          i.children ? (
            <div key={i.k} className="dl-nav-dd">
              <a href={i.href} onClick={(e) => jump(e, i)} aria-haspopup="true">
                {i.label}
                <span className="dl-nav-dd-caret" aria-hidden="true">▾</span>
              </a>
              <div className="dl-nav-dd-panel" role="menu">
                <div className="dl-nav-dd-eyebrow">// five disciplines · one network</div>
                {i.children.map((c) => (
                  <a key={c.href} href={c.href} className="dl-nav-dd-item" role="menuitem">
                    <span className="dl-nav-dd-item-label">{c.label}</span>
                    <Icon name="arrow-up-right" size={14} />
                  </a>
                ))}
              </div>
            </div>
          ) : (
            <a key={i.k} href={i.href} onClick={(e) => jump(e, i)}>{i.label}</a>
          )
        )}
      </div>
      <div className="dl-nav-cta">
        <a className="dl-btn dl-btn-primary" href={isHome ? "#contact" : "index.html#contact"}
        onClick={(e) => {
          if (isHome) {e.preventDefault();
            const el = document.getElementById("contact");
            if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" });
          }
        }}>
          Let's talk <Icon name="arrow-right" size={16} />
        </a>
        <button onClick={() => setOpen(!open)} aria-label="menu" className="dl-mobile-toggle">
          <Icon name={open ? "x" : "menu"} size={18} />
        </button>
      </div>
      {open &&
      <div style={{ position: "absolute", top: "100%", left: 0, right: 0, background: "var(--bg-elev)", borderTop: "1px solid var(--line)", padding: 24, display: "flex", flexDirection: "column", gap: 12 }}>
          {items.map((i) =>
            <React.Fragment key={i.k}>
              <a href={i.href} onClick={(e) => jump(e, i)}
                style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--fg)" }}>// {i.label}</a>
              {i.children && (
                <div style={{ display: "flex", flexDirection: "column", gap: 8, paddingLeft: 16, borderLeft: "1px solid var(--line)", marginBottom: 4 }}>
                  {i.children.map((c) => (
                    <a key={c.href} href={c.href}
                      style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--fg-muted)" }}>{c.label} →</a>
                  ))}
                </div>
              )}
            </React.Fragment>
          )}
        </div>
      }
      <style>{`
        .dl-nav-dd { position: relative; display: inline-flex; align-items: center; }
        .dl-nav-dd > a { display: inline-flex; align-items: center; gap: 4px; }
        .dl-nav-dd-caret { font-size: 9px; opacity: .6; transition: transform 180ms var(--ease-out), opacity 180ms; }
        .dl-nav-dd:hover .dl-nav-dd-caret, .dl-nav-dd:focus-within .dl-nav-dd-caret { transform: translateY(1px); opacity: 1; }
        .dl-nav-dd-panel {
          position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
          min-width: 320px; padding: 14px 0 8px;
          background: var(--bg-elev); color: var(--fg);
          border: 1px solid var(--line-strong);
          box-shadow: 0 16px 40px -16px rgba(0,0,0,.32), 0 4px 12px -6px rgba(0,0,0,.18);
          opacity: 0; pointer-events: none;
          transition: opacity 160ms var(--ease-out), transform 180ms var(--ease-out);
          z-index: 60;
        }
        .dl-nav-dd:hover .dl-nav-dd-panel,
        .dl-nav-dd:focus-within .dl-nav-dd-panel {
          opacity: 1; pointer-events: auto;
          transform: translateX(-50%) translateY(0);
        }
        /* invisible hover bridge so the cursor can travel from trigger to panel */
        .dl-nav-dd-panel::before {
          content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
        }
        .dl-nav-dd-eyebrow {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
          color: var(--accent); text-transform: uppercase;
          padding: 0 18px 10px; border-bottom: 1px solid var(--line);
          margin-bottom: 6px;
        }
        .dl-nav-dd-item {
          display: flex; align-items: center; justify-content: space-between;
          gap: 16px; padding: 10px 18px;
          font-family: var(--font-body); font-size: 14px; color: var(--fg) !important;
          text-decoration: none;
          border-left: 2px solid transparent;
          transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms;
        }
        .dl-nav-dd-item::before { content: none !important; }
        .dl-nav-dd-item:hover {
          background: var(--bg-inset);
          border-left-color: var(--accent);
          color: var(--accent) !important;
        }
        .dl-nav-dd-item-label { line-height: 1.25; }
        @media (max-width: 1100px) {
          .dl-mobile-toggle { display: inline-flex !important; }
          .dl-nav-links { display: none !important; }
        }
        @media (max-width: 560px) {
          .dl-nav-cta .dl-btn-primary { display: none; }
        }
        /* mobile-mode override (forced via toggle) — class on the page wrapper */
        .dl-mobile-mode .dl-mobile-toggle { display: inline-flex !important; }
        .dl-mobile-mode .dl-nav-links { display: none !important; }
      `}</style>
    </nav>);

};

const Footer = ({ theme }) =>
<footer className="dl-footer" id="contact-footer">
    <div className="dl-container">
      <div className="dl-footer-grid">
        <div>
          <div style={{ marginBottom: 20 }}><Logo h={24} inverse theme={theme} /></div>
          <p style={{ fontSize: 14, lineHeight: 1.6, color: "rgba(255,255,255,.72)", margin: "0 0 20px", maxWidth: "38ch" }}>One team, integrated solutions, lasting impact. Hoofddorp · Warsaw · Paramaribo · West Java.

        </p>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "rgba(255,255,255,.56)", lineHeight: 1.8 }}>
            <div>Bijlmermeerstraat 18A</div>
            <div>2131HG Hoofddorp · NL</div>
            <div style={{ marginTop: 10 }}><a href="mailto:hello@devleaps.nl" style={{ color: "var(--accent)" }}>hello@devleaps.nl</a></div>
            <div style={{ marginTop: 6, display: "inline-flex", alignItems: "center", gap: 6 }}>
              <Icon name="github" size={14} />
              <a href="https://github.com/Devleaps" target="_blank" rel="noopener noreferrer" style={{ color: "var(--accent)" }}>github.com/Devleaps</a>
            </div>
          </div>
        </div>
        <div><h4>services</h4><ul>
          <li><a href="platform-engineering.html">Platform engineering</a></li>
          <li><a href="devex.html">Developer experience</a></li>
          <li><a href="data.html">Data engineering</a></li>
          <li><a href="ai.html">AI &amp; ML</a></li>
          <li><a href="transformation.html">Tech transformations</a></li>
        </ul></div>
        <div><h4>company</h4><ul>
          <li><a href="index.html#network">The network</a></li>
          <li><a href="index.html#team">The team</a></li>
          <li><a href="careers.html">Careers</a></li>
          <li><a href="index.html#manifesto">Manifesto</a></li>
        </ul></div>
        <div><h4>work</h4><ul>
          <li><a href="index.html#work">Recent work</a></li>
          <li><a href="index.html#clients">Clients</a></li>
          <li><a href="products.html">Products</a></li>
          <li><a href="https://github.com/Devleaps" target="_blank" rel="noopener noreferrer">Open source</a></li>
        </ul></div>
        <div><h4>connect</h4><ul>
          <li><a href="mailto:hello@devleaps.nl">Talk to us</a></li>
          <li><a href="careers.html">Join us</a></li>
          <li><a href="https://github.com/Devleaps" target="_blank" rel="noopener noreferrer">GitHub</a></li>
        </ul></div>
      </div>
      <div className="dl-footer-bottom">
        <span><span style={{ opacity: .55 }}>// </span>devleaps / hoofddorp · {new Date().getFullYear()}</span>
        <span>v2.0 · <a href="privacy.html" style={{ color: "inherit" }}>privacy</a></span>
      </div>
    </div>
  </footer>;


const ClientMark = ({ name, inverse = false, height = 28 }) => {
  const logo = typeof CLIENT_LOGOS !== "undefined" && CLIENT_LOGOS[name];
  const [err, setErr] = React.useState(false);
  if (logo && !err) {
    return (
      <img
        src={logo}
        alt={name}
        onError={() => setErr(true)}
        style={{
          height, width: "auto", maxWidth: 160, objectFit: "contain",
          opacity: inverse ? .82 : .72,
          filter: inverse ? "brightness(0) invert(1)" : "grayscale(1) contrast(1.1)",
          transition: "opacity var(--dur-2), filter var(--dur-2)",
          flexShrink: 0
        }}
        onMouseEnter={(e) => {e.currentTarget.style.opacity = 1;e.currentTarget.style.filter = inverse ? "brightness(0) invert(1)" : "none";}}
        onMouseLeave={(e) => {e.currentTarget.style.opacity = inverse ? .82 : .72;e.currentTarget.style.filter = inverse ? "brightness(0) invert(1)" : "grayscale(1) contrast(1.1)";}} />);


  }
  return (
    <span style={{
      fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22,
      letterSpacing: "-0.03em", textTransform: "uppercase",
      color: inverse ? "rgba(255,255,255,.72)" : "var(--fg)",
      whiteSpace: "nowrap", opacity: .78
    }}>{name}</span>);

};

// Avatar with photo + fallback
const Avatar = ({ name, photo, size = 64 }) => {
  const [err, setErr] = React.useState(false);
  let h = 0;for (const c of name) h = h * 31 + c.charCodeAt(0) >>> 0;
  const palette = ["#1A1814", "#2A2926", "#0A0A09", "#1F2A23", "#16224A", "#2E2516"];
  const bg = palette[h % palette.length];
  if (photo && !err) {
    return <img src={photo} alt={name} onError={() => setErr(true)} style={{
      width: size, height: size, borderRadius: 0, objectFit: "cover",
      background: bg, flexShrink: 0,
      filter: "grayscale(.4) contrast(1.05)",
      border: "1px solid var(--line-strong)"
    }} />;
  }
  return <div style={{
    width: size, height: size, background: bg, color: "var(--accent)",
    display: "flex", alignItems: "center", justifyContent: "center",
    fontFamily: "var(--font-display)", fontWeight: 700, fontSize: size * 0.42,
    flexShrink: 0
  }}>{name.charAt(0)}</div>;
};

Object.assign(window, { Icon, Logo, BlockMark, Eyebrow, Nav, Footer, ClientMark, Avatar });