// Decorative motifs + brand marks used across the kit.
// Exports: DotGrid, Bubble, Molecule, EyebrowRule, Logo

function DotGrid({
  rows = 5,
  cols = 6,
  spacing = 14,
  size = 1.6,
  color = '#20E7AF',
  opacity = 0.5,
  style = {},
}) {
  const dots = [];
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      dots.push(<circle key={`${r}-${c}`} cx={c * spacing + size} cy={r * spacing + size} r={size} />);
    }
  }
  const w = cols * spacing;
  const h = rows * spacing;
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={style}>
      <g fill={color} opacity={opacity}>{dots}</g>
    </svg>
  );
}

function Bubble({ size = 80, filled = true, opacity = 1, style = {} }) {
  const base = {
    width: size, height: size, borderRadius: '50%',
    pointerEvents: 'none', opacity, ...style,
  };
  if (filled) {
    return <div style={{ ...base, background: 'radial-gradient(circle at 30% 30%, rgba(32,231,175,0.35), rgba(32,231,175,0.05) 70%, transparent 100%)' }} />;
  }
  return <div style={{ ...base, border: '1px solid rgba(32,231,175,0.4)' }} />;
}

function Molecule({ width = 180, color = '#20E7AF', opacity = 0.55, style = {} }) {
  return (
    <svg width={width} viewBox="0 0 200 160" style={style} fill="none">
      <g stroke={color} strokeWidth="1.2" opacity={opacity}>
        <line x1="30" y1="60" x2="70" y2="90" />
        <line x1="70" y1="90" x2="120" y2="70" />
        <line x1="70" y1="90" x2="90" y2="130" />
        <line x1="120" y1="70" x2="160" y2="100" />
        <line x1="120" y1="70" x2="150" y2="30" />
      </g>
      <g fill={color} opacity={opacity + 0.2}>
        <circle cx="30" cy="60" r="5" fill="#1299D5" />
        <circle cx="70" cy="90" r="5" />
        <circle cx="120" cy="70" r="5" />
        <circle cx="90" cy="130" r="5" fill="#1299D5" />
        <circle cx="160" cy="100" r="5" />
        <circle cx="150" cy="30" r="5" fill="#1299D5" />
      </g>
    </svg>
  );
}

function EyebrowRule({ withDot = true, style = {} }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, ...style }}>
      <div style={{ width: 36, height: 2, background: '#20E7AF', borderRadius: 2 }} />
      {withDot && <div style={{ width: 6, height: 6, borderRadius: 999, background: '#20E7AF' }} />}
    </div>
  );
}

function Logo({ variant = 'light', height = 32 }) {
  // 'light' = white wordmark for dark backgrounds
  // 'dark'  = navy wordmark for light backgrounds
  // 'mark'  = just the d-mark
  const src = variant === 'mark'
    ? '../../assets/logos/logo-mark.svg'
    : variant === 'dark'
      ? '../../assets/logos/logo-wordmark-dark.svg'
      : '../../assets/logos/logo-wordmark-light.svg';
  const ratio = variant === 'mark' ? 1 : 360 / 80;
  return <img src={src} alt="DISPROQUILIM" style={{ height, width: height * ratio }} />;
}

Object.assign(window, { DotGrid, Bubble, Molecule, EyebrowRule, Logo });