---
/**
 * StarField.astro
 * ---------------------------------------------------------------------------
 * A static field of tiny scattered stars + a few brighter sparkles, as inline
 * SVG. Use as an ambient, non-animated decorative layer behind hero blocks or
 * inside frames — the *animated* star field lives in AnimatedBackground.tsx.
 *
 * Stars are deterministic (hard-coded positions) so the layout is stable and
 * cheap. Pointer-events disabled; inherits `currentColor`.
 *
 * Usage:
 *   <StarField class="absolute inset-0 h-full w-full" style="color: var(--color-amber); opacity:.5" />
 */
interface Props {
  class?: string;
  style?: string;
  /** Seed for how many sparkles; keeps the markup compact. */
  density?: 'sparse' | 'default' | 'dense';
}
const { class: className = '', style = '', density = 'default' } = Astro.props;

// Pre-baked star positions (cx, cy, r) on a 100x100 viewBox; scaled by density.
const baseDots: [number, number, number][] = [
  [8, 12, 0.5], [22, 6, 0.7], [34, 18, 0.4], [47, 9, 0.6], [61, 14, 0.5],
  [73, 5, 0.8], [86, 16, 0.4], [94, 8, 0.5], [14, 28, 0.4], [29, 34, 0.6],
  [43, 27, 0.5], [57, 36, 0.4], [68, 29, 0.7], [81, 38, 0.5], [92, 31, 0.4],
  [6, 46, 0.6], [19, 52, 0.4], [31, 47, 0.5], [44, 55, 0.4], [58, 49, 0.7],
  [71, 54, 0.5], [84, 47, 0.4], [96, 55, 0.5], [12, 66, 0.4], [26, 72, 0.6],
  [39, 64, 0.5], [52, 73, 0.4], [65, 67, 0.5], [78, 74, 0.7], [90, 68, 0.4],
  [9, 84, 0.5], [23, 90, 0.4], [36, 86, 0.6], [49, 92, 0.4], [62, 85, 0.5],
  [75, 91, 0.7], [88, 88, 0.4], [16, 40, 0.4], [50, 22, 0.4], [80, 60, 0.4],
];
// Brighter 4-point sparkles (cx, cy, size).
const sparkles: [number, number, number][] = [
  [20, 20, 2.2], [70, 30, 1.8], [40, 60, 2.4], [85, 75, 1.6], [12, 70, 1.4],
];

const step = density === 'sparse' ? 2 : density === 'dense' ? 1 : 1;
const dots = baseDots.filter((_, i) => i % step === 0);
---
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  preserveAspectRatio="xMidYMid slice"
  class={className}
  style={style}
  fill="currentColor"
  aria-hidden="true"
>
  {dots.map(([x, y, r]) => (
    <circle cx={x} cy={y} r={r} />
  ))}
  {sparkles.map(([x, y, s]) => (
    <path
      d={`M${x} ${y - s}c${s * 0.18} ${s * 0.6} ${s * 0.4} ${s * 0.82} ${s} ${s}c${-s * 0.6}${s * 0.18} ${-s * 0.82}${s * 0.4} ${-s}${s}c${-s * 0.18}${-s * 0.6} ${-s * 0.4}${-s * 0.82} ${-s}${-s}c${s * 0.6}${-s * 0.18} ${s * 0.82}${-s * 0.4} ${s}${-s}z`}
      opacity="0.9"
    />
  ))}
</svg>