"use client";

import { LightPoolButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  intensity?: number;
  poolSize?: number;
  invertOnHover?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ label = "Go live", accent = "#38BDF8", intensity = 1, poolSize = 1, invertOnHover = true }: DemoProps) {
  return (
    <div className="flex w-full flex-wrap items-center justify-center gap-x-10 gap-y-12 p-8">
      <LightPoolButton accent={accent} intensity={intensity} poolSize={poolSize} invertOnHover={invertOnHover}>
        {label}
      </LightPoolButton>
      <LightPoolButton accent="#FF6A1F" intensity={intensity} poolSize={poolSize} invertOnHover={invertOnHover}>
        Reserve seat
      </LightPoolButton>
    </div>
  );
}

1d:T16b3, 1e:T1476e,

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from "vue";

type Rgb = [number, number, number];
type Phase = "rest" | "hot" | "press";

const BASE: Rgb = [11, 13, 16];

function hexToRgb(hex: string): Rgb {
  let value = hex.replace("#", "").trim();
  if (value.length === 3) value = value[0] + value[0] + value[1] + value[1] + value[2] + value[2];
  const int = Number.parseInt(value || "000000", 16);
  if (Number.isNaN(int)) return [56, 189, 248];
  return [(int >> 16) & 255, (int >> 8) & 255, int & 255];
}

function mix(a: Rgb, b: Rgb, t: number): Rgb {
  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];
}

function css(c: Rgb, alpha?: number): string {
  const r = Math.round(c[0]);
  const g = Math.round(c[1]);
  const b = Math.round(c[2]);
  return alpha === undefined ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

const props = withDefaults(
  defineProps<{
    accent?: string;
    intensity?: number;
    poolSize?: number;
    invertOnHover?: boolean;
  }>(),
  { accent: "#38BDF8", intensity: 1, poolSize: 1, invertOnHover: true },
);

const phase = ref<Phase>("rest");
const reduced = ref(false);
let query: MediaQueryList | null = null;

function onMotionChange() {
  if (query) reduced.value = query.matches;
}

onMounted(() => {
  query = window.matchMedia("(prefers-reduced-motion: reduce)");
  reduced.value = query.matches;
  query.addEventListener("change", onMotionChange);
});

onBeforeUnmount(() => {
  if (query) query.removeEventListener("change", onMotionChange);
});

const colors = computed(() => {
  const accent = hexToRgb(props.accent);
  const luma = 0.299 * accent[0] + 0.587 * accent[1] + 0.114 * accent[2];
  const body = mix(mix(accent, [luma, luma, luma], 0.45), BASE, 0.82);
  const ink = mix(BASE, accent, 0.08);
  return { accent, body, ink };
});

const k = computed(() => Math.min(2, Math.max(0.2, props.intensity)));
const scale = computed(() => Math.min(2, Math.max(0, props.poolSize)));
const glow = computed<Phase>(() => (reduced.value ? "rest" : phase.value));
const inverted = computed(() => props.invertOnHover && phase.value !== "rest");

const buttonStyle = computed(() => {
  const { accent, body, ink } = colors.value;
  const c = k.value;
  const shadows: Record<Phase, string> = {
    rest: `0 0 0 1px ${css(accent, 0.85)}, 0 0 ${10 * c}px ${css(accent, 0.6)}, 0 0 ${36 * c}px ${8 * c}px ${css(accent, 0.3)}, inset 0 0 ${14 * c}px 2px ${css(accent, 0.3)}`,
    hot: `0 0 0 1px ${css(accent, 0.9)}, 0 0 ${20 * c}px ${css(accent, 0.75)}, 0 0 ${68 * c}px ${16 * c}px ${css(accent, 0.42)}, inset 0 0 ${24 * c}px 4px ${css(accent, 0.45)}`,
    press: `0 0 0 1px ${css(accent, 0.9)}, 0 0 ${5 * c}px ${css(accent, 0.55)}, 0 0 ${14 * c}px 1px ${css(accent, 0.2)}, inset 0 0 ${8 * c}px 1px ${css(accent, 0.32)}`,
  };
  const bloom = `0 0 ${5 * c}px ${css(accent, 0.9)}, 0 0 ${16 * c}px ${css(accent, 0.45)}`;
  return {
    backgroundColor: css(inverted.value ? accent : body),
    color: css(inverted.value ? ink : accent),
    borderColor: css(inverted.value ? ink : accent),
    boxShadow: shadows[glow.value],
    textShadow: inverted.value ? "none" : bloom,
    transform: glow.value === "press" ? "translateY(1px)" : "translateY(0)",
    transition: reduced.value
      ? "none"
      : "box-shadow 300ms cubic-bezier(0.3, 0.7, 0.3, 1), background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 140ms ease",
  };
});

const poolStyle = computed(() => {
  const { accent } = colors.value;
  const s = scale.value;
  const g = glow.value;
  const opacity = s <= 0 ? 0 : Math.min(0.7, (g === "press" ? 0.15 : g === "hot" ? 0.5 : 0.3) * Math.min(1, s * 1.4) * Math.min(1.3, k.value));
  const sx = g === "press" ? 0.94 : g === "hot" ? 1.07 : 1;
  const sy = g === "press" ? 0.34 : g === "hot" ? 0.62 : 0.52;
  return {
    background: css(accent),
    opacity: String(opacity),
    filter: `blur(${Math.max(3, 12 * s)}px)`,
    transform: `translateX(-50%) skewX(-14deg) scale(${sx}, ${sy})`,
    transition: reduced.value ? "none" : "opacity 300ms ease, transform 300ms ease",
  };
});

function enter() {
  phase.value = "hot";
}
function leave() {
  phase.value = "rest";
}
function press() {
  phase.value = "press";
}
function release() {
  phase.value = "hot";
}
function focusIn(event: FocusEvent) {
  if ((event.currentTarget as HTMLElement).matches(":focus-visible")) phase.value = "hot";
}
function keyDown(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") phase.value = "press";
}
function keyUp(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") phase.value = "hot";
}
</script>

<template>
  <span class="lpb-scene">
    <button
      type="button"
      class="lpb"
      :style="buttonStyle"
      @mouseenter="enter"
      @mouseleave="leave"
      @mousedown="press"
      @mouseup="release"
      @focus="focusIn"
      @blur="leave"
      @keydown="keyDown"
      @keyup="keyUp"
    >
      <span class="lpb__label"><slot /></span>
    </button>
    <span class="lpb__pool" aria-hidden="true" :style="poolStyle"></span>
  </span>
</template>

<style scoped>
.lpb-scene {
  position: relative;
  display: inline-block;
  padding-bottom: 36px;
}
.lpb {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-width: 190px;
  padding: 0 30px;
  border: 4px solid;
  border-radius: 14px;
  font: 700 15px/1 system-ui, sans-serif;
  letter-spacing: 0.13em;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.lpb__label {
  position: relative;
}
.lpb__pool {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 100%;
  height: 22px;
  border-radius: 999px;
  pointer-events: none;
}
</style>

Nearby