"use client";

import { TwinSweepTileButton } from "./index";

export interface DemoProps {
  accent?: string;
  label?: string;
  caption?: string;
  tilt?: number;
  sweep?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#3DDC97", label = "Powered by", caption = "Beacon Two", tilt = 1, sweep = true }: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-8 p-10">
      <TwinSweepTileButton accent={accent} label={label} caption={caption} tilt={tilt} sweep={sweep} />
      <TwinSweepTileButton accent="#38BDF8" label="Runs on" caption="Node Grid" tilt={tilt} sweep={sweep} />
      <TwinSweepTileButton accent="#FF4D8D" label="Backed by" caption="Coral Fund" tilt={tilt} sweep={sweep} />
    </div>
  );
}

1d:T16cd, 1e:T15e16,

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    label?: string;
    caption?: string;
    tilt?: number;
    sweep?: boolean;
  }>(),
  { accent: "#3DDC97", label: "Powered by", caption: "Beacon Two", tilt: 1, sweep: true },
);

const active = ref(false);
const pressed = ref(false);

function onEnter() {
  active.value = true;
}
function onLeave() {
  active.value = false;
  pressed.value = false;
}
function onFocus() {
  active.value = true;
}
function onBlur() {
  active.value = false;
  pressed.value = false;
}
function onDown() {
  pressed.value = true;
}
function onUp() {
  pressed.value = false;
}
function onKeyDown(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") pressed.value = true;
}
function onKeyUp(event: KeyboardEvent) {
  if (event.key === " " || event.key === "Enter") pressed.value = false;
}

const glyphSize = computed(() => (active.value ? 40 : 64));
const tileStyle = computed(() => ({
  "--accent": props.accent,
  "--tilt": `${-props.tilt}deg`,
}));
</script>

<template>
  <button
    type="button"
    class="tile"
    :class="{ 'tile--active': active, 'tile--pressed': pressed }"
    :style="tileStyle"
    :aria-label="`${label} ${caption}`"
    @pointerenter="onEnter"
    @pointerleave="onLeave"
    @focus="onFocus"
    @blur="onBlur"
    @pointerdown="onDown"
    @pointerup="onUp"
    @pointercancel="onUp"
    @keydown="onKeyDown"
    @keyup="onKeyUp"
  >
    <template v-if="sweep">
      <span class="sweep sweep--a" aria-hidden="true" />
      <span class="sweep sweep--b" aria-hidden="true" />
    </template>

    <div class="content" aria-hidden="true">
      <span class="glyph" :style="{ width: glyphSize + 'px', height: glyphSize + 'px' }">
        <svg viewBox="0 0 24 24" fill="none" class="glyph__spin">
          <circle cx="12" cy="16.4" r="2.15" :fill="accent" />
          <path d="M8.3 13.7a5.15 5.15 0 0 1 7.4 0" :stroke="accent" stroke-width="1.8" stroke-linecap="round" />
          <path d="M5.5 10.9a9.1 9.1 0 0 1 13 0" :stroke="accent" stroke-width="1.8" stroke-linecap="round" />
        </svg>
      </span>
      <div class="caption">
        <span class="caption__label">{{ label }}</span>
        <span class="caption__text">{{ caption }}</span>
      </div>
    </div>
  </button>
</template>

<style scoped>
.tile {
  --ink-rest: #161b21;
  --ink-active: #0d1116;
  position: relative;
  isolation: isolate;
  width: 142px;
  height: 142px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  border: 3px solid var(--accent);
  background: var(--ink-rest);
  box-shadow: 4px 4px 0 0 #000;
  cursor: pointer;
  user-select: none;
  outline: none;
  transform: translate(0, 0) rotate(0deg);
  transition:
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 260ms ease,
    box-shadow 260ms ease;
}
.tile:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.tile--active {
  background: var(--ink-active);
  box-shadow: 9px 11px 0 0 #000;
  transform: translate(-7px, -9px) rotate(var(--tilt));
}
.tile--pressed .content {
  transform: scale(0.94);
}

.sweep {
  position: absolute;
  top: -45%;
  width: 30%;
  height: 190%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease;
}
.sweep--a {
  left: -46%;
  transform: skewX(-16deg);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 48%, rgba(255, 255, 255, 0.4) 52%, rgba(255, 255, 255, 0) 100%);
}
.sweep--b {
  right: -46%;
  transform: skewX(16deg);
  background: linear-gradient(80deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 48%, rgba(255, 255, 255, 0.32) 52%, rgba(255, 255, 255, 0) 100%);
}
.tile--active .sweep {
  opacity: 1;
  animation: sweep-run 2.6s linear infinite;
}
.tile--active .sweep--b {
  animation-name: sweep-run-reverse;
  animation-duration: 3.1s;
}
@keyframes sweep-run {
  from {
    transform: skewX(-16deg) translateX(0%);
  }
  to {
    transform: skewX(-16deg) translateX(460%);
  }
}
@keyframes sweep-run-reverse {
  from {
    transform: skewX(16deg) translateX(0%);
  }
  to {
    transform: skewX(16deg) translateX(-460%);
  }
}

.content {
  position: relative;
  z-index: 10;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  transition: transform 120ms ease;
}
.glyph {
  display: block;
  flex-shrink: 0;
  transition:
    width 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    height 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tile--active .glyph {
  transform: translateY(-10px);
}
.glyph__spin {
  display: block;
  height: 100%;
  width: 100%;
}
.tile--active .glyph__spin {
  animation: glyph-spin 5s linear infinite;
}
@keyframes glyph-spin {
  to {
    transform: rotate(360deg);
  }
}

.caption {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 200ms ease;
}
.tile--active .caption {
  max-height: 38px;
  opacity: 1;
  transition-delay: 0ms, 80ms;
}
.caption__label {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 16px;
  color: #c9c1ae;
}
.caption__text {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: #f1ebdd;
}

@media (prefers-reduced-motion: reduce) {
  .sweep {
    display: none;
  }
  .tile--active .glyph__spin {
    animation: none;
  }
}
</style>

Nearby