Scroll Snap Page

---
/**
 * ScrollSnapSection — Layout wrapper that snaps sections to the full viewport height.
 */
interface Props {
  height?: string;
  className?: string;
}

const { height = '300px', className = '' } = Astro.props;
---

<div class={`snap-wrap ${className}`} style={`--snap-height: ${height};`}>
  <slot>
    <section class="snap-panel panel-1"><h4>Slide 1 (Scroll to snap)</h4></section>
    <section class="snap-panel panel-2"><h4>Slide 2</h4></section>
    <section class="snap-panel panel-3"><h4>Slide 3</h4></section>
  </slot>
</div>

<style>
  .snap-wrap {
    height: var(--snap-height, 300px);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    width: 100%;
    border-radius: var(--r-lg, 12px);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
  }
  .snap-wrap :global(section), .snap-panel {
    height: var(--snap-height, 300px);
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .panel-1 { background: rgba(99, 102, 241, 0.15); }
  .panel-2 { background: rgba(192, 132, 252, 0.15); }
  .panel-3 { background: rgba(251, 191, 36, 0.15); }
</style>