import { cn } from '@/lib/utils';

type MarkProps = {
  size?: number;
  className?: string;
  title?: string;
};

/**
 * PanTel sub-mark — central node with signal arcs and orbital network paths.
 */
export function PanTelMark({ size = 48, className, title = 'PanTel' }: MarkProps) {
  return (
    <svg
      viewBox="0 0 64 64"
      width={size}
      height={size}
      className={cn('shrink-0 text-sovereign-copper', className)}
      role="img"
      aria-label={title}
    >
      {/* Orbital paths */}
      <ellipse
        cx={32}
        cy={32}
        rx={24}
        ry={10}
        fill="none"
        stroke="currentColor"
        strokeWidth={0.75}
        opacity={0.35}
        transform="rotate(-20 32 32)"
      />
      <ellipse
        cx={32}
        cy={32}
        rx={24}
        ry={10}
        fill="none"
        stroke="currentColor"
        strokeWidth={0.75}
        opacity={0.35}
        transform="rotate(25 32 32)"
      />

      {/* Signal arcs — propagation */}
      <g fill="none" stroke="currentColor" strokeWidth={1.25} strokeLinecap="round">
        <path d="M32 32 m-8 0 a8 8 0 0 1 16 0" opacity={0.5} />
        <path d="M32 32 m-14 0 a14 14 0 0 1 28 0" opacity={0.65} />
        <path d="M32 32 m-20 0 a20 20 0 0 1 40 0" opacity={0.8} />
      </g>

      {/* Central node — derived Sankofa body geometry */}
      <circle cx={32} cy={32} r={5} fill="currentColor" />
      <path
        d="M32 27 L36 32 L32 37 L28 32 Z"
        fill="#0D1B2A"
        opacity={0.5}
      />

      {/* Distributed access nodes */}
      {[
        [12, 20],
        [52, 20],
        [10, 44],
        [54, 44],
      ].map(([x, y]) => (
        <circle key={`${x}-${y}`} cx={x} cy={y} r={2} fill="currentColor" opacity={0.7} />
      ))}

      {/* Topology links */}
      <g stroke="currentColor" strokeWidth={0.6} opacity={0.4}>
        <line x1={32} y1={32} x2={12} y2={20} />
        <line x1={32} y1={32} x2={52} y2={20} />
        <line x1={32} y1={32} x2={10} y2={44} />
        <line x1={32} y1={32} x2={54} y2={44} />
      </g>
    </svg>
  );
}
