Refraction Pane

import { RefractionPane } from '@/components/ui/refraction-pane'

import { RefractionPane } from '@/components/ui/refraction-pane'

const specs = [
  { k: 'lens', v: 'barrel magnify, chromatic split' },
  { k: 'spring', v: 'stiffness 400, damping 26' },
  { k: 'keys', v: 'arrows nudge, esc resets' },
] as const

export default function RefractionPaneDemo() {
  return (
    <section className="bg-background py-16 sm:py-24">
      <div className="mx-auto max-w-6xl px-4 sm:px-6">
        <div className="grid items-center gap-10 lg:grid-cols-[1fr_1.15fr]">
          <div>
            <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
              Lab · WebGL optics
            </p>
            <h2 className="mt-4 max-w-xl text-3xl font-semibold tracking-tight text-balance text-foreground sm:text-4xl">
              Precision optics on a drafting table.
            </h2>
            <p className="mt-4 max-w-md text-sm leading-relaxed text-muted-foreground sm:text-base">
              A floating glass pane refracts the plotted field behind it: lens
              magnification, a chromatic split and a primary fresnel rim, all
              sampled live from a token-inked plate. Drag the pane, nudge it
              with the arrow keys, or leave it to its slow survey.
            </p>
            <dl className="mt-8 space-y-3">
              {specs.map((s) => (
                <div key={s.k} className="flex items-baseline gap-4">
                  <dt className="w-16 shrink-0 font-mono text-[11px] uppercase tracking-[0.2em] text-foreground">
                    {s.k}
                  </dt>
                  <dd className="text-xs text-muted-foreground sm:text-sm">{s.v}</dd>
                </div>
              ))}
            </dl>
          </div>
          <RefractionPane className="h-[380px] w-full rounded-2xl border border-border/60 sm:h-[440px]" />
        </div>
      </div>
    </section>
  )
}