// Devleaps — Network model section + Products section.
// Mirrors the LeapstaQ "Network" + "Products" blocks, restyled in the Devleaps DS.

const DISCIPLINE_COLORS = {
  transformation: { color: "var(--accent)",                                          label: "Transformation" },
  platform:       { color: "var(--fg)",                                              label: "Cloud + platform engineering" },
  devex:          { color: "color-mix(in oklab, var(--accent) 55%, var(--bg-elev))", label: "DevEx, AIEx + PeopleEx" },
  data:           { color: "color-mix(in oklab, var(--fg) 55%, var(--bg-elev))",     label: "Data, foundations to insight" },
  ai:             { color: "color-mix(in oklab, var(--accent) 28%, var(--bg-elev))", label: "AI that amplifies people" }
};

// Five disciplines: Transformation lives in the center, the other four sit as
// quadrant arcs on the outer ring. Each node carries its own explicit colour
// so the four clusters read as distinct palettes (per the strategic-ecosystem
// brief), grouped clockwise from top.
const QUAD_LABELS = {
  data:     { label: "Data, foundations to insight", angle: 45,  color: "#C04F4F", href: "data.html",                 cta: "explore further" },
  platform: { label: "Cloud + platform engineering", angle: 135, color: "#C04F4F", href: "platform-engineering.html", cta: "explore further" },
  devex:    { label: "DevEx, AIEx + PeopleEx",       angle: 225, color: "#C04F4F", href: "devex.html",                cta: "explore further" },
  ai:       { label: "AI that amplifies people",     angle: 315, color: "#C04F4F", href: "ai.html",                   cta: "explore further" }
};

const TRANSFORMATION_ITEMS = [
  "Tech transformations",
  "Engineering & leadership coaching",
  "Team building"
];

const NETWORK_NODES = [
  // Top-right quadrant — Data, greys
  { label: "Data\nEngineering",         d: "data",     angle: 15,  color: "#2E2E2E" },
  { label: "Data\nPlatforms",           d: "data",     angle: 45,  color: "#4D4D4D" },
  { label: "Data\nAnalytics",           d: "data",     angle: 75,  color: "#6B6B6B" },
  // Bottom-right quadrant — Platform, black / charcoal
  { label: "Platform\nEngineering",     d: "platform", angle: 115, color: "#0A0A0A" },
  { label: "Compliancy &\nSecurity",    d: "platform", angle: 155, color: "#262626" },
  // Bottom-left quadrant — DevEx, salmon / rose / warm red
  { label: "Developer\nExperience",     d: "devex",    angle: 195, color: "#C04F4F" },
  { label: "AI\nExperience",            d: "devex",    angle: 225, color: "#DB6B5D" },
  { label: "People\nExperience",        d: "devex",    angle: 255, color: "#E89683" },
  // Top-left quadrant — AI, blush / peach / coral
  { label: "AI Training &\nAdoption",   d: "ai",       angle: 285, color: "#E89F87" },
  { label: "AI Strategy &\nConsulting", d: "ai",       angle: 315, color: "#F2B89A" },
  { label: "Custom AI\nSolutions",      d: "ai",       angle: 345, color: "#F4C7B4" }
];

const NetworkWheel = () => {
  const size = 900, cx = size / 2, cy = size / 2, R = 300, NODE = 46;
  // Convert clock-degrees (0 = top, clockwise) to math radians.
  const rad = (deg) => (deg - 90) * Math.PI / 180;
  const pts = NETWORK_NODES.map((n) => {
    const r = rad(n.angle);
    return { ...n, x: cx + Math.cos(r) * R, y: cy + Math.sin(r) * R, r };
  });

  // Inner mesh — every node connected to every other, very faint.
  const edges = [];
  for (let i = 0; i < pts.length; i++)
    for (let j = i + 1; j < pts.length; j++)
      edges.push([i, j]);

  // Quadrant arc labels — pushed well past the node-label ring so they don't
  // collide with any node's two-line text wrap. Node labels sit at R+NODE+24
  // (~370px), so quadrant labels sit ~130px further out.
  const labelR = R + NODE + 154;

  return (
    <div style={{ position: "relative", width: "100%", aspectRatio: "1/1", maxWidth: 760, margin: "0 auto" }}>
      <svg viewBox={`0 0 ${size} ${size}`} style={{ width: "100%", height: "100%", display: "block", overflow: "visible" }}>

        {/* Subtle outer guide ring */}
        <circle cx={cx} cy={cy} r={R} fill="none" stroke="var(--line-strong)" strokeWidth={0.8} strokeDasharray="3 5" opacity={0.45} />

        {/* Faint grey mesh across all nodes — the integrated operating model */}
        <g stroke="#9a9a9a" strokeWidth={0.6} opacity={0.32}>
          {edges.map(([i, j]) =>
            <line key={`e${i}-${j}`} x1={pts[i].x} y1={pts[i].y} x2={pts[j].x} y2={pts[j].y} />
          )}
        </g>

        {/* Short black spokes from each node toward the centre (stop short of the centre disc) */}
        <g stroke="#1a1a1a" strokeWidth={1.4} strokeLinecap="round">
          {pts.map((p, i) => {
            const inner = 172; // stop short of centre disc (radius 150)
            const ix = cx + Math.cos(p.r) * inner;
            const iy = cy + Math.sin(p.r) * inner;
            return <line key={`s${i}`} x1={ix} y1={iy} x2={p.x} y2={p.y} />;
          })}
        </g>

        {/* Centre disc — Transformation + offerings (clickable, links to transformation.html) */}
        <a href="transformation.html" className="dl-quad-center-link" style={{ cursor: "pointer" }}>
          <circle cx={cx} cy={cy} r={150} fill="#FFFFFF" stroke="var(--accent)" strokeWidth={2.5} />
          <text x={cx} y={cy - 58} textAnchor="middle"
            style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--accent)", letterSpacing: "0.22em", textTransform: "uppercase" }}>
            // the centre
          </text>
          <text x={cx} y={cy - 28} textAnchor="middle"
            style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 800, fill: "#0a0a0a", letterSpacing: "-0.015em", textTransform: "uppercase" }}>
            Transformation
          </text>
          {/* Hairline divider */}
          <line x1={cx - 60} y1={cy - 12} x2={cx + 60} y2={cy - 12} stroke="var(--accent)" strokeWidth={1} opacity={0.55} />
          {/* Three transformation offerings, stacked */}
          {TRANSFORMATION_ITEMS.map((t, i) =>
            <text key={t} x={cx} y={cy + 8 + i * 18} textAnchor="middle"
              style={{ fontFamily: "var(--font-display)", fontSize: 12, fontWeight: 600, fill: "#0a0a0a", letterSpacing: "0", textTransform: "none" }}>
              {t}
            </text>
          )}
          {/* Explore call-out — mirrors the four quadrant labels */}
          <text x={cx} y={cy + 80} textAnchor="middle" className="dl-quad-center-cta"
            style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 500, fill: "var(--accent)", letterSpacing: "0.16em", textTransform: "uppercase" }}>
            // explore further →
          </text>
        </a>

        {/* Nodes */}
        {pts.map((p, i) =>
          <g key={`n${i}`}>
            <circle cx={p.x} cy={p.y} r={NODE} fill={p.color} stroke="#FFFFFF" strokeWidth={3} />
          </g>
        )}

        {/* Node labels — placed outside each node along the radial */}
        {pts.map((p, i) => {
          const lx = cx + Math.cos(p.r) * (R + NODE + 24);
          const ly = cy + Math.sin(p.r) * (R + NODE + 24);
          const cosA = Math.cos(p.r);
          const anchor = cosA > 0.25 ? "start" : cosA < -0.25 ? "end" : "middle";
          const lines = p.label.split("\n");
          return (
            <text key={`l${i}`} x={lx} y={ly} textAnchor={anchor}
              style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 700, fill: "#0a0a0a", letterSpacing: "-0.005em", textTransform: "uppercase" }}>
              {lines.map((line, k) =>
                <tspan key={k} x={lx} dy={k === 0 ? lines.length === 1 ? 6 : -4 : 19}>{line}</tspan>
              )}
            </text>
          );
        })}

        {/* Quadrant arc labels — rendered as foreignObject pills so we get a real
            highlight strip (background tint + accent bar) instead of plain SVG text. */}
        {Object.entries(QUAD_LABELS).map(([key, q]) => {
          const r = rad(q.angle);
          const lx = cx + Math.cos(r) * labelR;
          const ly = cy + Math.sin(r) * labelR;
          const cosA = Math.cos(r);
          // Pick alignment per quadrant — right-side labels start at lx, left-side end at lx
          const align = cosA > 0.25 ? "left" : cosA < -0.25 ? "right" : "center";
          const W = 280, H = 78;
          const fx = align === "left" ? lx : align === "right" ? lx - W : lx - W / 2;
          const fy = ly - H / 2;
          // Tinted background derived from the label color
          const tint = `color-mix(in oklab, ${q.color} 14%, var(--bg-elev))`;
          return (
            <foreignObject key={key} x={fx} y={fy} width={W} height={H} style={{ overflow: "visible" }}>
              <a
                xmlns="http://www.w3.org/1999/xhtml"
                href={q.href}
                className="dl-quad-link"
                style={{
                  display: "inline-block",
                  background: tint,
                  borderLeft: align === "left"  ? `3px solid ${q.color}` : "none",
                  borderRight: align === "right" ? `3px solid ${q.color}` : "none",
                  padding: "8px 14px 10px",
                  fontFamily: "var(--font-display)",
                  color: q.color,
                  textTransform: "uppercase",
                  textAlign: align === "right" ? "right" : "left",
                  boxShadow: `0 1px 0 ${q.color}33`,
                  float: align === "right" ? "right" : "none",
                  textDecoration: "none",
                  cursor: "pointer",
                  transition: "transform 200ms var(--ease-out), background 200ms var(--ease-out), box-shadow 200ms var(--ease-out)"
                }}>
                <div style={{
                  fontWeight: 800, fontSize: 14, lineHeight: 1.15, letterSpacing: "0.02em",
                  color: q.color
                }}>{q.label}</div>
                <div style={{
                  marginTop: 4,
                  display: "inline-flex", alignItems: "center", gap: 6,
                  fontFamily: "var(--font-mono)", fontWeight: 500,
                  fontSize: 10.5, letterSpacing: "0.14em",
                  color: q.color, opacity: 0.85,
                  textTransform: "uppercase"
                }}>
                  <span>// {q.cta}</span>
                  <span className="dl-quad-arrow" style={{ transition: "transform 200ms var(--ease-out)", display: "inline-block" }}>→</span>
                </div>
              </a>
            </foreignObject>
          );
        })}
      </svg>
      <style>{`
        .dl-quad-link:hover { background: var(--bg) !important; box-shadow: 0 4px 0 #C04F4F44, 0 1px 0 #C04F4F !important; transform: translateY(-1px); }
        .dl-quad-link:hover .dl-quad-arrow { transform: translateX(3px); }
        .dl-quad-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .dl-quad-center-link { transition: filter 200ms var(--ease-out); }
        .dl-quad-center-link circle { transition: fill 200ms var(--ease-out), stroke-width 200ms var(--ease-out); }
        .dl-quad-center-link:hover circle { fill: #FDF8F4; stroke-width: 3.5; }
        .dl-quad-center-link:hover .dl-quad-center-cta { letter-spacing: 0.18em; }
        .dl-quad-center-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
      `}</style>
    </div>
  );
};

// Legend below the wheel — pairs the discipline colors with their names.
const NetworkLegend = () =>
<div style={{ display: "flex", flexWrap: "wrap", gap: "14px 28px", justifyContent: "center", marginTop: 24, padding: "20px 24px", borderTop: "1px solid var(--line)" }}>
    {Object.entries(DISCIPLINE_COLORS).map(([k, v]) =>
  <div key={k} style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
        <span style={{ width: 14, height: 14, borderRadius: "50%", background: v.color, border: "1.5px solid var(--bg-elev)", boxShadow: "0 0 0 1px var(--line-strong)", flexShrink: 0 }} />
        <span className="dl-mono" style={{ fontSize: 12, color: "var(--fg)", letterSpacing: "0.04em" }}>{v.label}</span>
      </div>
  )}
  </div>;

const Network = () =>
<section id="network" className="dl-section dl-paper">
    <div className="dl-container">
      <div style={{ marginBottom: 48 }}>
        <Eyebrow>the network</Eyebrow>
        <h2 className="dl-h1" style={{ marginTop: 12, maxWidth: "18ch" }}>
          One team.<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>Every discipline.</span>
        </h2>
      </div>

      {/* Capability wheel */}
      <div style={{ background: "var(--bg-elev)", border: "1px solid var(--line-strong)", padding: "56px 32px 32px", marginBottom: 48 }}>
        <NetworkWheel />
        <div style={{ textAlign: "center", marginTop: 24, fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.6, color: "var(--fg-muted)", maxWidth: "62ch", marginInline: "auto" }}>
          <span className="dl-mono" style={{ color: "var(--accent)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", display: "block", marginBottom: 10 }}>// powered by</span>
          <b style={{ color: "var(--fg)" }}>Devleaps &amp; Partners</b>
        </div>
      </div>

      {/* Hubs */}
      <div className="dl-mono" style={{ color: "var(--accent)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", marginBottom: 16 }}>// our hubs</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
        {LOCATIONS.map((loc, i) =>
      <div key={loc.city} className="dl-card" style={{ padding: 24, display: "flex", flexDirection: "column", gap: 14, background: "var(--bg-elev)", border: "1px solid var(--line-strong)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <span className="dl-mono" style={{ color: "var(--accent)", fontSize: 14, letterSpacing: "0.1em", fontWeight: 600 }}>{loc.code}</span>
              <span className="dl-mono" style={{ fontSize: 10, padding: "3px 8px", border: "1px solid var(--line-strong)", color: loc.status === "active" ? "var(--accent)" : "var(--fg-muted)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
                {loc.status === "active" ? "● active" : "○ opening"}
              </span>
            </div>
            <div>
              <div className="dl-mono" style={{ color: "var(--fg-muted)", fontSize: 11, letterSpacing: ".1em", marginBottom: 4 }}>// 0{i + 1} · {loc.country.toLowerCase()}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 700, color: "var(--fg)", letterSpacing: "-0.02em", textTransform: "uppercase" }}>{loc.city}</div>
              <div className="dl-mono" style={{ fontSize: 12, color: "var(--fg-muted)", marginTop: 4 }}>{loc.role}</div>
            </div>
            <div style={{ marginTop: "auto", paddingTop: 12, borderTop: "1px solid var(--line)", fontSize: 13, color: "var(--fg-muted)" }}>
              {loc.meta}
            </div>
          </div>
      )}
      </div>
    </div>
  </section>;


// =============== PRODUCTS ===============
// UDAL mark — modeled on the udal.nl brand: navy field, signal-red wordmark.
const UDALLogo = ({ size = 64 }) =>
<div style={{ width: size, height: size, borderRadius: 8, background: "#0a0a0a", display: "flex", alignItems: "center", justifyContent: "center", padding: 10, flexShrink: 0 }}>
    <img src="assets/products/udal.svg" alt="UDAL" style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
  </div>;


const FORGELogo = ({ size = 64 }) =>
<div style={{ width: size, height: size, borderRadius: 8, background: "var(--bg-dark)", display: "flex", alignItems: "center", justifyContent: "center", padding: 10, flexShrink: 0 }}>
    <img src="assets/products/forge.png" alt="FORGE" style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
  </div>;


const PRODUCTS = [
{
  key: "udal", name: "UDAL", tagline: "Universal Data Authorization Layer",
  pitch: "Unified permissions everywhere. One policy surface across data warehouses, lakes, streams, and apps.",
  tags: ["permissions", "policy", "data"], logo: UDALLogo,
  href: "https://udal.nl/",
  cta: "udal.nl"
},
{
  key: "forge", name: "FORGE", tagline: "Build · Run · Grow. One platform.",
  pitch: "Remove friction. Increase experience. Let people do what matters. From code to customer, an integrated suite of AI-powered modules that work autonomously, yet stay connected through a shared event bus.",
  tags: ["platform", "agents", "event bus"], logo: FORGELogo,
  oss: { label: "Agent Processes", url: "https://github.com/Devleaps/agent-policies-server" }
}];


const ProductCard = ({ p, idx }) => {
  const [hover, setHover] = React.useState(false);
  const Logo = p.logo;
  const Wrapper = p.href ? "a" : "div";
  const wrapperProps = p.href ?
  { href: p.href, target: "_blank", rel: "noopener noreferrer" } :
  {};
  return (
    <Wrapper
      {...wrapperProps}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        padding: 36, display: "flex", flexDirection: "column", gap: 20,
        background: hover ? "var(--bg-inset)" : "var(--bg)",
        borderRight: idx === 0 ? "1px solid var(--line-strong)" : "none",
        textDecoration: "none", color: "inherit",
        cursor: p.href ? "pointer" : "default",
        transition: "background var(--dur-2) var(--ease-out)",
        position: "relative"
      }}>
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <Logo size={56} />
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1, textTransform: "uppercase" }}>{p.name}</div>
          <div className="dl-mono" style={{ fontSize: 13, color: "var(--accent)", marginTop: 4, letterSpacing: ".06em" }}>{p.tagline}</div>
        </div>
        {p.href &&
        <div style={{ marginLeft: "auto", color: hover ? "var(--accent)" : "var(--fg-muted)", transform: hover ? "translate(2px,-2px)" : "none", transition: "all var(--dur-2)" }}>
            <Icon name="arrow-up-right" size={20} />
          </div>
        }
      </div>
      <p className="dl-body" style={{ margin: 0 }}>{p.pitch}</p>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: "auto" }}>
        {p.tags.map((t) =>
        <span key={t} className="dl-mono" style={{ fontSize: 11, padding: "4px 10px", background: "var(--bg-inset)", border: "1px solid var(--line-strong)", color: "var(--fg-muted)", letterSpacing: ".06em" }}>{t}</span>
        )}
      </div>
      {(p.oss || p.cta) &&
      <div style={{ paddingTop: 14, borderTop: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
          {p.cta &&
        <>
              <span className="dl-mono" style={{ color: "var(--accent)", letterSpacing: ".14em", textTransform: "uppercase", fontSize: 10 }}>// visit</span>
              <span className="dl-mono" style={{ color: "var(--fg)", display: "inline-flex", alignItems: "center", gap: 6, borderBottom: hover ? "1px solid var(--accent)" : "1px dashed var(--line-strong)", fontSize: 12, transition: "border-color var(--dur-2)" }}>
                <Icon name="external" size={14} />{p.cta}
              </span>
            </>
        }
          {p.oss &&
        <>
              <span className="dl-mono" style={{ color: "var(--accent)", letterSpacing: ".14em", textTransform: "uppercase", fontSize: 10 }}>// open source</span>
              <a href={p.oss.url} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} className="dl-mono" style={{ color: "var(--fg)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6, borderBottom: "1px dashed var(--line-strong)", fontSize: 12 }}>
                <Icon name="git-branch" size={14} />{p.oss.label}<Icon name="arrow-right" size={12} />
              </a>
            </>
        }
        </div>
      }
    </Wrapper>);

};

const Products = () =>
<section id="products" className="dl-section" style={{
    background: "var(--bg-elev)",
    borderTop: "1px solid var(--line-strong)",
    borderBottom: "1px solid var(--line-strong)",
  }}>
    <div className="dl-container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "flex-end", marginBottom: 48 }}>
        <div>
          <Eyebrow>our products</Eyebrow>
          <h2 className="dl-h1" style={{ marginTop: 12, maxWidth: "20ch" }}>
            What we build for ourselves,<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>we ship for you.</span>
          </h2>
        </div>
        <p className="dl-body-lg" style={{ maxWidth: "46ch", paddingBottom: 6 }}>
          Platforms forged in real engagements, battle-tested in production, and open where it matters. Built by the network, used by the network.
        </p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 0, border: "1px solid var(--line-strong)" }}>
        {PRODUCTS.map((p, idx) => <ProductCard key={p.key} p={p} idx={idx} />)}
      </div>
      <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20 }}>
        <div className="dl-mono" style={{ fontSize: 12, color: "var(--fg-muted)", letterSpacing: ".08em" }}>
          <span style={{ color: "var(--accent)" }}>// </span>built in the open · collaboration &gt; consulting · contributions welcome
        </div>
        <a href="https://github.com/Devleaps" target="_blank" rel="noopener noreferrer" className="dl-btn dl-btn-ghost">
          <Icon name="git-branch" size={16} /> github.com/Devleaps <Icon name="arrow-right" size={14} />
        </a>
      </div>
    </div>
  </section>;


// =============== PRODUCTS TEASER ===============
// Slim band for the home page — links out to the full products.html.
// Sits near the "tech we use" strip so it reads as "and here's what we forged from it."
const ProductsTeaser = () => {
  const [hover, setHover] = React.useState(null);
  return (
    <section id="products-teaser" className="dl-section dl-paper" style={{
      borderTop: "1px solid var(--line)",
      borderBottom: "1px solid var(--line)",
      paddingBlock: "clamp(56px, 6vw, 88px)"
    }}>
      <div className="dl-container">
        <div className="dl-products-teaser-grid">
          {/* Left: intro */}
          <div style={{ minWidth: 0 }}>
            <Eyebrow>we also build</Eyebrow>
            <h2 className="dl-h2" style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: "clamp(28px, 3.4vw, 44px)", lineHeight: 1.02,
              letterSpacing: "-0.03em", margin: "12px 0 18px",
              textTransform: "uppercase", textWrap: "balance", maxWidth: "16ch"
            }}>
              Products,<br /><span style={{ fontStyle: "italic", color: "var(--accent)" }}>forged from our work.</span>
            </h2>
            <p className="dl-body" style={{ margin: "0 0 24px", maxWidth: "42ch" }}>
              Platforms born inside real engagements. Battle-tested in production. Open where it counts.
            </p>
            <a href="products.html" className="dl-btn dl-btn-ghost">
              See our products <Icon name="arrow-right" size={16} />
            </a>
          </div>

          {/* Right: product rows */}
          <div style={{ minWidth: 0, border: "1px solid var(--line-strong)", background: "var(--bg-elev)" }}>
            {PRODUCTS.map((p, i) => {
              const Logo = p.logo;
              const isHover = hover === p.key;
              return (
                <a
                  key={p.key}
                  href="products.html"
                  onMouseEnter={() => setHover(p.key)}
                  onMouseLeave={() => setHover(null)}
                  style={{
                    display: "grid",
                    gridTemplateColumns: "56px 1fr auto",
                    alignItems: "center", gap: 20,
                    padding: "20px 22px",
                    borderTop: i === 0 ? "none" : "1px solid var(--line)",
                    textDecoration: "none", color: "inherit",
                    background: isHover ? "var(--bg-inset)" : "transparent",
                    transition: "background var(--dur-2) var(--ease-out)"
                  }}>
                  <Logo size={48} />
                  <div style={{ minWidth: 0 }}>
                    <div style={{
                      fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700,
                      letterSpacing: "-0.02em", textTransform: "uppercase", lineHeight: 1
                    }}>{p.name}</div>
                    <div className="dl-mono" style={{
                      fontSize: 12, color: "var(--accent)", marginTop: 6,
                      letterSpacing: ".06em",
                      overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"
                    }}>{p.tagline}</div>
                  </div>
                  <div style={{
                    color: isHover ? "var(--accent)" : "var(--fg-muted)",
                    transform: isHover ? "translateX(2px)" : "none",
                    transition: "all var(--dur-2)"
                  }}>
                    <Icon name="arrow-right" size={18} />
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Network, NetworkWheel, NetworkLegend, Products, ProductsTeaser, PRODUCTS, UDALLogo, FORGELogo });