const NODES = [
  { x: 18, y: 22 }, { x: 34, y: 14 }, { x: 52, y: 30 }, { x: 72, y: 18 },
  { x: 86, y: 34 }, { x: 24, y: 50 }, { x: 46, y: 58 }, { x: 64, y: 50 },
  { x: 80, y: 64 }, { x: 16, y: 78 }, { x: 38, y: 84 }, { x: 58, y: 80 },
  { x: 74, y: 90 }, { x: 90, y: 78 },
];
const LINES: [number, number][] = [
  [0, 1], [1, 2], [2, 3], [3, 4], [2, 5], [5, 6], [6, 7], [7, 8],
  [5, 9], [9, 10], [10, 11], [11, 12], [12, 13], [7, 11], [8, 13],
];

export function ConstellationHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#05060d] text-white antialiased flex items-center px-10 lg:px-16">
      <div
        aria-hidden
        className="absolute inset-0"
        style={{ background: "radial-gradient(60% 70% at 78% 50%, rgba(99,102,241,0.16), transparent 65%)" }}
      />

      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-10 lg:px-16 py-6">
        <span className="text-[13px] font-semibold tracking-[0.18em] uppercase text-white/85">Velynkit Graph</span>
        <a href="#" className="rounded-full bg-white px-4 py-1.5 text-[12.5px] font-medium text-black">Book a demo</a>
      </div>

      <div className="relative z-10 grid w-full max-w-6xl grid-cols-1 items-center gap-12 lg:grid-cols-2">
        {/* copy */}
        <div>
          <p className="mb-5 font-mono text-[11px] uppercase tracking-[0.3em] text-indigo-300/70">
            Internal developer platform
          </p>
          <h1 className="text-[clamp(40px,5.2vw,76px)] font-semibold leading-[0.94] tracking-[-0.035em]">
            Connect everything.
            <br />
            <span className="text-white/55">Forget about it.</span>
          </h1>
          <p className="mt-6 max-w-md text-[15.5px] leading-relaxed text-white/55">
            One live graph for every service, schema, environment and
            dependency in your org — drawn automatically, always current.
          </p>
          <div className="mt-8 flex items-center gap-3">
            <a href="#" className="rounded-full bg-indigo-500 px-5 py-2.5 text-[13px] font-medium text-white shadow-[0_0_40px_-6px_rgba(99,102,241,0.7)] transition-colors hover:bg-indigo-400">
              Talk to platform team
            </a>
            <a href="#" className="text-[13px] text-white/55 underline-offset-4 hover:text-white hover:underline">
              Architecture ↗
            </a>
          </div>
        </div>

        {/* graph panel */}
        <div className="hidden lg:block">
          <div className="relative aspect-[4/3] overflow-hidden rounded-2xl border border-white/10 bg-white/[0.02] p-4">
            <div className="mb-3 flex items-center gap-2 px-1">
              <span className="h-2.5 w-2.5 rounded-full bg-white/15" />
              <span className="h-2.5 w-2.5 rounded-full bg-white/15" />
              <span className="ml-2 font-mono text-[11px] text-white/35">service-graph · live</span>
            </div>
            <svg viewBox="0 0 100 100" preserveAspectRatio="none" className="h-[calc(100%-1.5rem)] w-full">
              {LINES.map(([a, b], i) => {
                const A = NODES[a], B = NODES[b];
                return (
                  <line
                    key={i}
                    x1={A.x} y1={A.y} x2={B.x} y2={B.y}
                    stroke="rgba(129,140,248,0.5)"
                    strokeWidth="0.18"
                    style={{ strokeDasharray: 80, strokeDashoffset: 80, animation: `con-draw 1.8s ease ${0.3 + i * 0.08}s forwards` }}
                  />
                );
              })}
              {NODES.map((n, i) => (
                <g key={i}>
                  <circle cx={n.x} cy={n.y} r="1.9" fill="rgba(129,140,248,0.2)" />
                  <circle cx={n.x} cy={n.y} r="0.7" fill="#a5b4fc">
                    <animate attributeName="opacity" values="0.4;1;0.4" dur={`${3 + (i % 3)}s`} repeatCount="indefinite" begin={`${i * 0.2}s`} />
                  </circle>
                </g>
              ))}
            </svg>
          </div>
        </div>
      </div>

      <style>{`@keyframes con-draw { to { stroke-dashoffset: 0; } }`}</style>
    </div>
  );
}
Network Graph Hero

Connect everything.Forget about it.

Connect everything.
Forget about it.
