"use client";

import { TaperedFunnelStages, type FunnelStage } from "./index";

export interface DemoProps {
  accent?: string;
  layers?: number;
  gap?: number;
  stagger?: number;
  edges?: "curved" | "straight";
  showBands?: boolean;
}

const STAGES: FunnelStage[] = [
  { name: "Visited pricing", count: 48200 },
  { name: "Started trial", count: 19400 },
  { name: "Verified email", count: 11800 },
  { name: "Added payment", count: 6300 },
  { name: "Upgraded to paid", count: 3150 },
];

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#38BDF8", layers = 3, gap = 4, stagger = 0.12, edges = "curved", showBands = true }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <TaperedFunnelStages stages={STAGES} accent={accent} layers={layers} gap={gap} stagger={stagger} edges={edges} showBands={showBands} />
    </div>
  );
}

1d:T1c24, 1e:T18bb4,

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

interface FunnelStage {
  name: string;
  count: number;
}

const props = withDefaults(
  defineProps<{
    accent?: string;
    layers?: number;
    gap?: number;
    stagger?: number;
    edges?: "curved" | "straight";
    showBands?: boolean;
  }>(),
  { accent: "#38BDF8", layers: 3, gap: 4, stagger: 0.12, edges: "curved", showBands: true },
);

const STAGES: FunnelStage[] = [
  { name: "Visited pricing", count: 48200 },
  { name: "Started trial", count: 19400 },
  { name: "Verified email", count: 11800 },
  { name: "Added payment", count: 6300 },
  { name: "Upgraded to paid", count: 3150 },
];

const H = 100;
const MIN_H = 10;
const max = STAGES[0].count;
const heights = STAGES.map((s) => MIN_H + Math.min(s.count / max, 1) * (H - MIN_H));

const active = ref<number | null>(null);

function fmt(n: number): string {
  return Math.round(n)
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function bandPath(leftTop: number, leftBottom: number, rightTop: number, rightBottom: number, curved: boolean): string {
  const r = (n: number) => Math.round(n * 100) / 100;
  if (!curved) return `M0 ${r(leftTop)} L100 ${r(rightTop)} L100 ${r(rightBottom)} L0 ${r(leftBottom)} Z`;
  return (
    `M0 ${r(leftTop)} C50 ${r(leftTop)} 50 ${r(rightTop)} 100 ${r(rightTop)} ` +
    `L100 ${r(rightBottom)} C50 ${r(rightBottom)} 50 ${r(leftBottom)} 0 ${r(leftBottom)} Z`
  );
}

interface Layer {
  restD: string;
  hoverD: string;
  opacity: number;
}

interface Cell {
  stage: FunnelStage;
  pct: number;
  layerList: Layer[];
}

const cells = computed<Cell[]>(() => {
  const curved = props.edges === "curved";
  const layerCount = Math.max(1, Math.min(props.layers, 5));
  return STAGES.map((stage, i) => {
    const leftH = i === 0 ? heights[0] : heights[i - 1];
    const rightH = heights[i];
    const leftTop = (H - leftH) / 2;
    const leftBottom = (H + leftH) / 2;
    const rightTop = (H - rightH) / 2;
    const rightBottom = (H + rightH) / 2;
    const layerList = Array.from({ length: layerCount }, (_, li) => {
      const isCore = li === layerCount - 1;
      const outerness = layerCount - 1 - li;
      const restPad = outerness * 4.5;
      const hoverPad = isCore ? outerness * 4.5 : outerness * 4.5 + 7;
      const opacity = isCore ? 0.94 : Math.max(0.3 - outerness * 0.07, 0.05);
      return {
        restD: bandPath(Math.max(leftTop - restPad, 0), Math.min(leftBottom + restPad, H), Math.max(rightTop - restPad, 0), Math.min(rightBottom + restPad, H), curved),
        hoverD: bandPath(Math.max(leftTop - hoverPad, 0), Math.min(leftBottom + hoverPad, H), Math.max(rightTop - hoverPad, 0), Math.min(rightBottom + hoverPad, H), curved),
        opacity,
      };
    });
    return { stage, pct: (stage.count / max) * 100, layerList };
  });
});

function enter(i: number) {
  active.value = i;
}
function leave() {
  active.value = null;
}
</script>

<template>
  <div class="tfs">
    <div class="tfs__row" :style="{ gap: gap + 'px' }" @pointerleave="leave">
      <div v-if="showBands" aria-hidden="true" class="tfs__bands" :style="{ gap: gap + 'px' }">
        <div v-for="(c, i) in cells" :key="i" class="tfs__band" :class="{ 'tfs__band--tint': i % 2 === 0 }" />
      </div>

      <button
        v-for="(cell, i) in cells"
        :key="cell.stage.name"
        type="button"
        class="tfs__stage"
        :class="{ 'tfs__stage--dim': active !== null && active !== i }"
        :style="{ zIndex: active === i ? 10 : 1 }"
        @mouseenter="enter(i)"
        @focus="enter(i)"
        @blur="leave"
        :aria-label="`${cell.stage.name}, ${fmt(cell.stage.count)}, ${cell.pct.toFixed(1)} percent of ${fmt(max)}`"
      >
        <span class="tfs__count" :style="{ opacity: 1 - i * 0.09 }">{{ fmt(cell.stage.count) }}</span>

        <div class="tfs__shape" :class="{ 'tfs__shape--active': active === i }" :style="{ animationDelay: i * stagger + 's' }">
          <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="tfs__svg">
            <path
              v-for="(layer, li) in cell.layerList"
              :key="li"
              :d="active === i ? layer.hoverD : layer.restD"
              :fill="accent"
              :fill-opacity="layer.opacity"
              class="tfs__path"
            />
          </svg>
          <span class="tfs__pct" :style="{ borderColor: accent + '8c' }">{{ cell.pct.toFixed(1) }}%</span>
        </div>

        <span class="tfs__name">{{ cell.stage.name }}</span>
      </button>
    </div>
  </div>
</template>

<style scoped>
.tfs {
  width: 100%;
  border-radius: 20px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.03);
  padding: 1.5rem;
  font-family: system-ui, sans-serif;
}
.tfs__row {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.tfs__bands {
  position: absolute;
  inset: 0.25rem 0;
  display: flex;
  pointer-events: none;
}
.tfs__band {
  flex: 1;
  border-left: 1px solid rgb(255 255 255 / 0.06);
  border-radius: 10px;
}
.tfs__band:first-child {
  border-left: none;
}
.tfs__band--tint {
  background: rgb(255 255 255 / 0.025);
}
.tfs__stage {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  outline: none;
}
.tfs__stage:focus-visible {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.4);
}
.tfs__stage {
  transition: opacity 200ms ease;
  opacity: 1;
}
.tfs__stage--dim {
  opacity: 0.4;
}
.tfs__count {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.5);
  transition: opacity 200ms ease;
}
.tfs__shape {
  position: relative;
  width: 100%;
  height: 7rem;
  transform-origin: 0% 50%;
  animation: tfs-open 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tfs__shape--active {
  transform: translateY(-6px);
}
@media (min-width: 640px) {
  .tfs__shape {
    height: 8rem;
  }
}
@keyframes tfs-open {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.tfs__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tfs__path {
  transition: d 240ms cubic-bezier(0.34, 1.56, 0.64, 1), fill-opacity 240ms ease;
}
.tfs__pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid transparent;
  border-radius: 9999px;
  background: rgb(9 11 14 / 0.82);
  padding: 0.125rem 0.5rem;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  pointer-events: none;
  white-space: nowrap;
}
.tfs__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: rgb(255 255 255 / 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .tfs__shape {
    animation: none;
    transition: none;
  }
  .tfs__shape--active {
    transform: none;
  }
  .tfs__path {
    transition: fill-opacity 200ms ease;
  }
}
</style>

Nearby