---
interface Props {
  opacity?: number;
  lines?: number;
}
const { opacity = 0.35, lines = 9 } = Astro.props;

interface Line {
  d: string;
  width: number;       // stroke width in CSS px (non-scaling)
  lineOpacity: number; // per-line opacity (0..1) — varies depth
  tone: 'amber' | 'cyan';
}

const out: Line[] = [];
const stepY = 100 / (lines + 1);
for (let i = 1; i <= lines; i++) {
  const y = i * stepY;
  // Mix two frequencies so adjacent lines don't read parallel.
  const amp = 3 + (i % 3) * 2 + Math.sin(i * 1.7) * 1.2;
  const phase = (i * 13) % 25; // shift crests horizontally
  const d = `M0,${y} Q${25 + phase / 3},${y - amp} ${50 + phase / 5},${y + amp * 0.6} T100,${y + (i % 2 ? 1 : -1)}`;
  // Vary stroke weight with a triangle wave — gives the feel of cartographic contour intervals.
  const triangle = Math.abs(((i + 2) % 4) - 2) / 2;
  const width = 0.6 + triangle * 0.9;
  // Depth: middle lines darker, edges lighter.
  const depth = 1 - Math.abs((i - (lines + 1) / 2)) / ((lines + 1) / 2);
  const lineOpacity = 0.35 + depth * 0.65;
  // One cyan line roughly every 4th — echo of the cross-route correlation color.
  const tone: 'amber' | 'cyan' = i % 4 === 2 ? 'cyan' : 'amber';
  out.push({ d, width, lineOpacity, tone });
}
---
<div
  class="topo-wrap absolute inset-0 pointer-events-none"
  aria-hidden="true"
  style={`--topo-opacity:${opacity}`}
>
  <svg
    class="topo-svg absolute inset-0 w-full h-full"
    viewBox="0 0 100 100"
    preserveAspectRatio="none"
  >
    <g fill="none" vector-effect="non-scaling-stroke" stroke-linecap="round">
      {out.map((l) => (
        <path
          d={l.d}
          stroke={l.tone === 'cyan' ? '#5cc8ff' : '#f0b429'}
          stroke-width={l.width}
          stroke-opacity={l.lineOpacity}
        />
      ))}
    </g>
  </svg>
</div>

<style>
  .topo-wrap {
    opacity: var(--topo-opacity, 0.35);
    /* Soft edge fade — lines should feel like they dissolve at the section
       boundaries rather than hit them hard. */
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, black 55%, transparent 95%);
            mask-image: radial-gradient(ellipse at 50% 45%, black 55%, transparent 95%);
  }
  .topo-svg {
    filter: blur(0.15px);
  }
</style>
