export default function Logo({
  size = 40,
  variant = "dark",
}: {
  size?: number;
  variant?: "dark" | "light";
}) {
  // A ring of stylised people around a warm sun — approximates the UP Parivaar mark.
  const people = [
    { a: -90, c: "#2530C4" }, // top - navy/blue
    { a: -30, c: "#F7A400" }, // right upper - yellow
    { a: 30, c: "#FF8001" }, // right lower - orange
    { a: 90, c: "#F45700" }, // bottom - deep orange
    { a: 150, c: "#7ECA4F" }, // left lower - green
    { a: 210, c: "#3FB27A" }, // left upper - teal-green
  ];

  return (
    <span className="logo">
      <svg width={size} height={size} viewBox="0 0 100 100" fill="none" aria-hidden>
        <circle cx="50" cy="50" r="17" fill="#fff" stroke="#F1E4D6" />
        {people.map((p, i) => {
          const rad = (p.a * Math.PI) / 180;
          const cx = 50 + Math.cos(rad) * 31;
          const cy = 50 + Math.sin(rad) * 31;
          return (
            <g key={i} transform={`rotate(${p.a + 90} ${cx} ${cy})`}>
              <circle cx={cx} cy={cy - 8} r="6.4" fill={p.c} />
              <path
                d={`M ${cx - 9} ${cy + 12} Q ${cx} ${cy - 3} ${cx + 9} ${cy + 12} Z`}
                fill={p.c}
              />
            </g>
          );
        })}
      </svg>
      <span className="logo__text">
        <span className={`logo__title logo__title--${variant}`}>UP PARIVAAR</span>
        <span className={`logo__sub logo__sub--${variant}`}>DALLAS</span>
      </span>
    </span>
  );
}