// Four wavefunctions in an infinite square well, vertically offset for comparison.
const levels = [1, 2, 3, 4]
const amplitude = 0.75
const spacing = 2.5
const ymin = -0.5
const ymax = levels.length * spacing + 0.5
const baseline = index => (index + 0.5) * spacing
const ticks = [
  [0, <Tex>0</Tex>],
  [0.5, <Tex>L/2</Tex>],
  [1, <Tex>L</Tex>],
]

return (
  <Box color={black} padding={em(1.45)} background={white}>
    <VStack gap={em(0.95)} align="center">
      <Text font-size={em(1.5)} font-weight={bold}>Particle in a Box</Text>
      <Plot
        aspect={1.55}
        xlim={[-0.45, 1.45]} ylim={[ymin, ymax]}
        xticks={ticks} yaxis={false} grid={false}
        margin={em(0.65)} xaxis-font-size={em(1.2)}
        xaxis-stroke={black} xaxis-stroke-width={px(2.5)}
        xaxis-tick-side="outer" xaxis-label-color={black}
      >
        {linspace(ymin, ymax - 0.5, 24).map(y => (
          <Polyline
            points={[[-0.065, y], [0, y + 0.5]]}
            stroke={black} stroke-width={px(0.7)}
          />
        ))}
        {linspace(ymin, ymax - 0.5, 24).map(y => (
          <Polyline
            points={[[1, y], [1.065, y + 0.5]]}
            stroke={black} stroke-width={px(0.7)}
          />
        ))}
        <Polyline points={[[0, ymin], [0, ymax]]} stroke={black} stroke-width={px(2.5)} />
        <Polyline points={[[1, ymin], [1, ymax]]} stroke={black} stroke-width={px(2.5)} />
        {levels.map((n, index) => (
          <>
            <Polyline
              points={[[0, baseline(index)], [1, baseline(index)]]}
              stroke={black} opacity={0.25} stroke-width={px(1)}
            />
            <SymLine
              fy={x => baseline(index) + amplitude * sin(n * pi * x)}
              xlim={[0, 1]} samples={241}
              stroke={black} stroke-width={px(2.5)}
            />
            <Tex pos={[-0.25, baseline(index)]} anchor="center" font-size={em(1.3)} color={black}>
              {`n=${n}`}
            </Tex>
            <Tex pos={[1.23, baseline(index)]} anchor="center" font-size={em(1.3)} color={black}>
              {`E_{${n}}`}
            </Tex>
          </>
        ))}
      </Plot>
      <Latex font-size={em(1.4)}>
        {String.raw`\psi_n(x)=\sqrt{\frac{2}{L}}\sin\!\left(\frac{n\pi x}{L}\right)`}
      </Latex>
    </VStack>
  </Box>
)