/* Aelune — minimal monochrome glyphs (thin-stroke geometric primitives, no icon library) */

// Each glyph is 28px nominal viewbox, currentColor stroke, thin weight.
// They read as astronomical/observatory marks — concentric, line, point, etc.

const G_Scan = () => (
  <svg viewBox="0 0 28 28" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1">
    <circle cx="14" cy="14" r="13" />
    <circle cx="14" cy="14" r="8" />
    <circle cx="14" cy="14" r="3" />
    <circle cx="14" cy="14" r="1" fill="currentColor" />
  </svg>
);

const G_Concept = () => (
  <svg viewBox="0 0 28 28" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1">
    <path d="M14 2 L26 24 L2 24 Z" />
    <circle cx="14" cy="16" r="2.5" />
  </svg>
);

const G_Swipe = () => (
  <svg viewBox="0 0 28 28" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1">
    <rect x="3" y="6" width="22" height="16" rx="1.5" />
    <line x1="9" y1="14" x2="19" y2="14" />
    <path d="M16 11 L19 14 L16 17" />
  </svg>
);

const G_Learn = () => (
  <svg viewBox="0 0 28 28" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1">
    <circle cx="6" cy="22" r="1.5" fill="currentColor" />
    <circle cx="11" cy="17" r="1.5" />
    <circle cx="16" cy="12" r="1.5" />
    <circle cx="21" cy="7" r="2" fill="currentColor" />
    <line x1="6" y1="22" x2="21" y2="7" strokeDasharray="1 2" opacity="0.6" />
  </svg>
);

const G_Source = () => (
  <svg viewBox="0 0 28 28" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1">
    <rect x="3" y="5" width="22" height="18" rx="1.5" />
    <line x1="7" y1="11" x2="21" y2="11" />
    <line x1="7" y1="15" x2="17" y2="15" />
    <line x1="7" y1="19" x2="13" y2="19" />
  </svg>
);

const G_Launch = () => (
  <svg viewBox="0 0 28 28" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1">
    <path d="M14 3 L22 11 L22 22 L6 22 L6 11 Z" />
    <circle cx="14" cy="13" r="2.5" />
    <line x1="6" y1="16" x2="22" y2="16" />
  </svg>
);

// Constellation avatar marks for agents — small distinct linework
const Avatar_Nocturne = ({ size = 56 }) => (
  <svg viewBox="0 0 56 56" width={size} height={size} fill="none" stroke="#4478FD" strokeWidth="1">
    <line x1="10" y1="42" x2="22" y2="28" />
    <line x1="22" y1="28" x2="36" y2="34" />
    <line x1="36" y1="34" x2="46" y2="16" />
    <circle cx="10" cy="42" r="2" fill="#4478FD" />
    <circle cx="22" cy="28" r="2.5" fill="#4478FD" />
    <circle cx="36" cy="34" r="2" fill="#4478FD" />
    <circle cx="46" cy="16" r="2.5" fill="#4478FD" />
  </svg>
);

const Avatar_Vesper = ({ size = 56 }) => (
  <svg viewBox="0 0 56 56" width={size} height={size} fill="none" stroke="#4478FD" strokeWidth="1">
    <line x1="14" y1="14" x2="28" y2="28" />
    <line x1="28" y1="28" x2="42" y2="14" />
    <line x1="14" y1="42" x2="28" y2="28" />
    <line x1="28" y1="28" x2="42" y2="42" />
    <circle cx="14" cy="14" r="2" fill="#4478FD" />
    <circle cx="42" cy="14" r="2" fill="#4478FD" />
    <circle cx="28" cy="28" r="3" fill="#4478FD" />
    <circle cx="14" cy="42" r="2" fill="#4478FD" />
    <circle cx="42" cy="42" r="2" fill="#4478FD" />
  </svg>
);

const Avatar_Halcyon = ({ size = 56 }) => (
  <svg viewBox="0 0 56 56" width={size} height={size} fill="none" stroke="#4478FD" strokeWidth="1">
    <path d="M12 36 Q28 12 44 36" />
    <line x1="12" y1="36" x2="44" y2="36" strokeDasharray="1 2" opacity="0.5" />
    <circle cx="12" cy="36" r="2" fill="#4478FD" />
    <circle cx="28" cy="22" r="2.5" fill="#4478FD" />
    <circle cx="44" cy="36" r="2" fill="#4478FD" />
  </svg>
);

// Scattered background stars (for hero overlay & roadmap bg)
const Stars = ({ count = 60, seed = 1, color = "#0d0d10", opacity = 0.4 }) => {
  // deterministic positions via simple LCG so SSR/CSR match
  const rng = (i) => {
    const x = Math.sin(seed * 9999 + i * 137.5) * 10000;
    return x - Math.floor(x);
  };
  const stars = [];
  for (let i = 0; i < count; i++) {
    const cx = rng(i) * 100;
    const cy = rng(i + 1000) * 100;
    const r = 0.4 + rng(i + 2000) * 0.8;
    const o = 0.3 + rng(i + 3000) * 0.7;
    stars.push(<circle key={i} cx={cx + "%"} cy={cy + "%"} r={r} fill={color} opacity={o * opacity} />);
  }
  return <svg width="100%" height="100%" preserveAspectRatio="none">{stars}</svg>;
};

Object.assign(window, {
  G_Scan, G_Concept, G_Swipe, G_Learn, G_Source, G_Launch,
  Avatar_Nocturne, Avatar_Vesper, Avatar_Halcyon,
  Stars,
});
