// Constellation — clickable "nodes" scattered around the viewport, including LinkedIn.
// Each is a discoverable point of light with a faint label.

const NODES = [
  { id: 'linkedin', x: 0.88, y: 0.28, label: 'LINKEDIN', href: 'https://www.linkedin.com/in/john-dahms', external: true },
  { id: 'mail',     x: 0.14, y: 0.78, label: 'SEND SIGNAL', href: 'mailto:john.dahms@outlook.de', external: false },
  { id: 'case',     x: 0.82, y: 0.72, label: 'CASE · MEDBAYOS', action: 'case' },
  { id: 'dash',     x: 0.10, y: 0.30, label: 'LIVE DASHBOARD', action: 'dash' },
];

const Constellation = () => {
  const [viewport, setViewport] = useState({ w: window.innerWidth, h: window.innerHeight });
  useEffect(() => {
    const r = () => setViewport({ w: window.innerWidth, h: window.innerHeight });
    window.addEventListener('resize', r);
    return () => window.removeEventListener('resize', r);
  }, []);

  const click = (n) => {
    if (n.action) window.dispatchEvent(new CustomEvent('signal:detail', { detail: n.action }));
  };

  return (
    <div className="constellation" aria-label="Navigation constellation">
      {NODES.map((n) => {
        const props = n.href
          ? { as: 'a', href: n.href, target: n.external ? '_blank' : undefined, rel: n.external ? 'noopener noreferrer' : undefined }
          : { as: 'button', onClick: () => click(n) };
        const Tag = n.href ? 'a' : 'button';
        return (
          <Tag
            key={n.id}
            className="const-node"
            style={{
              left: `${n.x * 100}%`,
              top: `${n.y * 100}%`,
              background: 'transparent',
              border: 0,
              padding: 0,
            }}
            href={n.href}
            target={n.external ? '_blank' : undefined}
            rel={n.external ? 'noopener noreferrer' : undefined}
            onClick={n.href ? undefined : () => click(n)}
          >
            <span className="n-dot" />
            <span className="n-label">
              {n.label}
              <span className="arrow">↗</span>
            </span>
          </Tag>
        );
      })}
    </div>
  );
};

window.Constellation = Constellation;