Scroll Snap Page

'use client';

import type { CSSProperties, ReactNode } from 'react';
import './ScrollSnapSection.css';

/** "a: b; --c: d" → style object */
function st(css: string | undefined): CSSProperties {
  const o: Record<string, string> = {};
  for (const decl of String(css ?? '').split(';')) {
    const i = decl.indexOf(':');
    if (i < 0) continue;
    const k = decl.slice(0, i).trim();
    if (k) o[k.startsWith('--') ? k : k.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = decl.slice(i + 1).trim();
  }
  return o as CSSProperties;
}

/**
 * ScrollSnapSection — Layout wrapper that snaps sections to the full viewport height.
 */
export interface ScrollSnapSectionProps {
  height?: string;
  className?: string;
  children?: ReactNode;
}

export function ScrollSnapSection({ height = '300px', className = '',
  children
}: ScrollSnapSectionProps) {
  return (
    <>
      <div className={`snap-wrap ${className}`} style={st(`--snap-height: ${height};`)} data-rk-109259="">
        {children ?? (<>
          <section className="snap-panel panel-1" data-rk-109259=""><h4 data-rk-109259="">Slide 1 (Scroll to snap)</h4></section>
          <section className="snap-panel panel-2" data-rk-109259=""><h4 data-rk-109259="">Slide 2</h4></section>
          <section className="snap-panel panel-3" data-rk-109259=""><h4 data-rk-109259="">Slide 3</h4></section>
        </>)}
      </div>
    </>
  );
}

export default ScrollSnapSection;

/* ScrollSnapSection — ported from astro-component-kit (layout/ScrollSnapSection.astro) */

.snap-wrap:where([data-rk-109259]) {
  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:where([data-rk-109259]) section, .snap-panel:where([data-rk-109259]) {
  height: var(--snap-height, 300px);
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.panel-1:where([data-rk-109259]) { background: rgba(99, 102, 241, 0.15); }
.panel-2:where([data-rk-109259]) { background: rgba(192, 132, 252, 0.15); }
.panel-3:where([data-rk-109259]) { background: rgba(251, 191, 36, 0.15); }