// Hex.jsx — small hex glyphs used as ornamental marks
// Variants: cluster (full mark), single (lone hex), divider (horizontal flat hex)

function HexCluster({ size = 28, variant = "dark", style }) {
  // Loads the cluster mark from /assets so the SVG can be reused outside React.
  const src =
    variant === "light"
      ? "assets/AltaPath_HexPath_Mark_Light.svg"
      : "assets/AltaPath_HexPath_Mark.svg";
  return (
    <img
      src={src}
      width={size}
      height={size * (83 / 80)}
      alt=""
      aria-hidden="true"
      style={style}
    />
  );
}

function HexOutlineCluster({ size = 200, color = "#134E4A", style }) {
  // Larger outline-only version, for backdrop motif
  return (
    <svg
      width={size}
      height={size * 0.83}
      viewBox="0 0 100 83"
      style={style}
      aria-hidden="true"
    >
      <g fill="none" stroke={color} strokeWidth="0.6">
        <polygon points="50,3 69.05,14 69.05,36 50,47 30.95,36 30.95,14" />
        <polygon points="30.95,36 50,47 50,69 30.95,80 11.9,69 11.9,47" />
        <polygon points="69.05,36 88.1,47 88.1,69 69.05,80 50,69 50,47" />
      </g>
    </svg>
  );
}

function HexBullet({ color = "#5EEAD4", size = 10, style }) {
  return (
    <span
      style={{
        display: "inline-block",
        width: size,
        height: size * 1.15,
        background: color,
        clipPath: "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
        ...style,
      }}
      aria-hidden="true"
    />
  );
}

Object.assign(window, { HexCluster, HexOutlineCluster, HexBullet });