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

const paths: string[] = [];
const stepY = 100 / (lines + 1);
for (let i = 1; i <= lines; i++) {
  const y = i * stepY;
  const amp = 4 + (i % 3) * 2;
  paths.push(`M0,${y} Q25,${y - amp} 50,${y + amp * 0.6} T100,${y}`);
}
---
<svg
  class="absolute inset-0 w-full h-full pointer-events-none"
  viewBox="0 0 100 100"
  preserveAspectRatio="none"
  aria-hidden="true"
  style={`opacity:${opacity}`}
>
  <g fill="none" stroke="#f0b429" stroke-width="0.15" vector-effect="non-scaling-stroke">
    {paths.map((d) => <path d={d} />)}
  </g>
</svg>