// Art primitives: logo mark, dot formations

const LogoMark = ({ size = 22, color }) => {
  // A cluster of 9 dots forming a stylized "show", three rows, slightly offset
  const dots = [
    [4, 4], [11, 4], [18, 4],
    [7, 11], [15, 11],
    [4, 18], [11, 18], [18, 18],
    [11, 11]
  ];
  return (
    <svg className="dot-mark" width={size} height={size} viewBox="0 0 22 22" style={{ color: color || 'var(--ink)' }}>
      {dots.map(([x, y], i) => (
        <circle key={i} cx={x} cy={y} r={i === 8 ? 1.6 : 1.2} fill="currentColor" opacity={i === 8 ? 1 : 0.85} />
      ))}
    </svg>
  );
};

// Parametric dot-formation generator. Deterministic per `seed`.
// Variants: 'arc', 'heart', 'grid', 'ring', 'star', 'text', 'logo'
const DotFormation = ({ variant = 'arc', color = '#4a6fff', density = 80, className = '', label, children, subtitle, animated = false, size = 'wide' }) => {
  // Build normalized points in [0..1] space
  const points = React.useMemo(() => {
    const pts = [];
    const n = density;

    if (variant === 'arc') {
      for (let i = 0; i < n; i++) {
        const t = i / (n - 1);
        const x = 0.1 + t * 0.8;
        const y = 0.85 - Math.sin(t * Math.PI) * 0.55 + (rand(i) - 0.5) * 0.01;
        pts.push([x, y, 1]);
      }
      // Second arc layered
      for (let i = 0; i < n * 0.6; i++) {
        const t = i / (n * 0.6 - 1);
        const x = 0.15 + t * 0.7;
        const y = 0.8 - Math.sin(t * Math.PI) * 0.35;
        pts.push([x, y, 0.6]);
      }
    } else if (variant === 'ring') {
      const rings = [0.2, 0.32, 0.44];
      rings.forEach((r, ri) => {
        const count = Math.floor(n * (0.3 + ri * 0.15));
        for (let i = 0; i < count; i++) {
          const a = (i / count) * Math.PI * 2;
          pts.push([0.5 + Math.cos(a) * r * (16/9), 0.5 + Math.sin(a) * r, ri === 1 ? 1 : 0.7]);
        }
      });
    } else if (variant === 'grid') {
      const cols = 18, rows = 10;
      for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) {
        pts.push([0.08 + (c / (cols - 1)) * 0.84, 0.15 + (r / (rows - 1)) * 0.7, (r + c) % 3 === 0 ? 1 : 0.5]);
      }
    } else if (variant === 'heart') {
      for (let i = 0; i < n; i++) {
        const t = (i / n) * Math.PI * 2;
        const x = 16 * Math.pow(Math.sin(t), 3);
        const y = 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t);
        pts.push([0.5 + x / 40, 0.5 - y / 30, 1]);
      }
    } else if (variant === 'star') {
      for (let i = 0; i < n; i++) {
        const t = (i / n) * Math.PI * 2;
        const r = 0.3 + Math.cos(t * 5) * 0.15;
        pts.push([0.5 + Math.cos(t) * r * (16/9) * 0.7, 0.5 + Math.sin(t) * r, 1]);
      }
    } else if (variant === 'skyline') {
      // City skyline silhouette of dots
      const heights = [0.4, 0.55, 0.35, 0.7, 0.5, 0.6, 0.8, 0.45, 0.65, 0.55, 0.75, 0.4, 0.5];
      heights.forEach((h, i) => {
        const x = 0.05 + (i / (heights.length - 1)) * 0.9;
        const rows = Math.floor(h * 12);
        for (let r = 0; r < rows; r++) {
          pts.push([x, 0.92 - (r / 12), 1]);
          pts.push([x + 0.015, 0.92 - (r / 12), 0.6]);
        }
      });
    } else if (variant === 'wave') {
      for (let i = 0; i < n; i++) {
        const t = i / (n - 1);
        const x = t;
        const y = 0.5 + Math.sin(t * Math.PI * 4) * 0.25 * Math.sin(t * Math.PI);
        pts.push([x, y, 1]);
        pts.push([x, 0.5 + Math.sin(t * Math.PI * 4 + 0.6) * 0.18 * Math.sin(t * Math.PI), 0.5]);
      }
    } else if (variant === 'triangle') {
      const rows = 10;
      for (let r = 0; r < rows; r++) {
        const count = r + 1;
        for (let c = 0; c < count; c++) {
          const x = 0.5 + (c - (count - 1) / 2) * 0.06;
          const y = 0.25 + r * 0.045;
          pts.push([x, y, 1]);
        }
      }
    } else if (variant === 'logo') {
      // Abstract DSC monogram
      const clusters = [
        // D
        [0.2, 0.3], [0.2, 0.45], [0.2, 0.6], [0.2, 0.75],
        [0.25, 0.3], [0.3, 0.33], [0.32, 0.45], [0.32, 0.6], [0.3, 0.72], [0.25, 0.75],
        // S
        [0.42, 0.3], [0.48, 0.3], [0.52, 0.33], [0.42, 0.45], [0.5, 0.55], [0.52, 0.68], [0.48, 0.75], [0.42, 0.75],
        // C
        [0.62, 0.3], [0.7, 0.3], [0.6, 0.38], [0.58, 0.5], [0.6, 0.62], [0.62, 0.72], [0.7, 0.75]
      ];
      clusters.forEach(([x, y]) => pts.push([x, y, 1]));
    }
    // Add atmospheric background dots
    for (let i = 0; i < 40; i++) {
      pts.push([rand(i + 900), rand(i + 500), 0.3]);
    }
    return pts;
  }, [variant, density]);

  return (
    <div className={`dotfield ${size === 'square' ? 'square' : size === 'wide' ? 'wide' : ''} ${className}`} style={{ '--dot-color': color }}>
      {points.map(([x, y, op], i) => (
        <span key={i} className={`dot ${op < 0.5 ? 'sm' : ''}`} style={{ left: `${x * 100}%`, top: `${y * 100}%`, opacity: op }} />
      ))}
      {label && (
        <div className="label">
          <span className="n">{label}</span>{subtitle && <> · {subtitle}</>}
        </div>
      )}
      {children}
    </div>
  );
};

function rand(seed) {
  const x = Math.sin(seed * 9301 + 49297) * 233280;
  return x - Math.floor(x);
}

Object.assign(window, { LogoMark, DotFormation });