Elements

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Dither Donut Chart from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/src/components/dither-charts/DitherDonutChart.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: motion, lucide-react

import React, { useEffect, useRef, useState, useMemo } from 'react';
import { motion, useSpring, useTransform, useReducedMotion } from 'motion/react';
import { Users } from 'lucide-react';
import { useCanvasSetup } from './use-canvas-setup';

type Plan = { name: string; color: string; base: number };
const PLANS: Plan[] = [
  { name: 'Unlimited', color: '#FFFFFF', base: 1240 },
  { name: '30-day pass', color: '#E2E8F0', base: 980 },
  { name: '10-class pack', color: '#CBD5E1', base: 620 },
  { name: 'Drop-in', color: '#94A3B8', base: 410 },
  { name: 'Student', color: '#64748B', base: 300 },
];

type Period = { name: string; mult: number };
const PERIODS: Period[] = [
  { name: 'Week', mult: 0.42 },
  { name: 'Month', mult: 1 },
  { name: 'Quarter', mult: 2.6 },
  { name: 'Year', mult: 8.4 },
];

const smoothstep = (min: number, max: number, value: number) => {
  const x = Math.max(0, Math.min(1, (value - min) / (max - min)));
  return x * x * (3 - 2 * x);
};

const hash = (x: number, y: number) => {
  let h = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
  return h - Math.floor(h);
};

const hexToRgba = (hex: string, alpha: number) => {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};

function AnimatedNumber({ value }: { value: number }) {
  const prefersReducedMotion = useReducedMotion();
  const spring = useSpring(value, { stiffness: 190, damping: 20, mass: 0.7 });
  const display = useTransform(spring, (current) =>
    Math.round(current).toLocaleString('en-US')
  );

  useEffect(() => {
    if (prefersReducedMotion) {
      spring.jump(value);
    } else {
      spring.set(value);
    }
  }, [value, spring, prefersReducedMotion]);

  return <motion.span className="tabular-nums">{display}</motion.span>;
}

const drawRoundedWedge = (ctx: CanvasRenderingContext2D, cx: number, cy: number, rIn: number, rOut: number, aStart: number, aEnd: number, cr: number) => {
  const sweep = aEnd - aStart;
  const maxCr = Math.min(cr, (rOut - rIn) / 2, (sweep * rIn) / 2);
  if (sweep <= 0.001) return;
  const crIn = maxCr;
  const crOut = maxCr;

  const aStartIn = aStart + crIn / rIn;
  const aEndIn = aEnd - crIn / rIn;
  const aStartOut = aStart + crOut / rOut;
  const aEndOut = aEnd - crOut / rOut;

  ctx.moveTo(cx + rIn * Math.cos(aStartIn), cy + rIn * Math.sin(aStartIn));
  ctx.arc(cx, cy, rIn, aStartIn, aEndIn);
  ctx.arcTo(
    cx + rIn * Math.cos(aEnd), cy + rIn * Math.sin(aEnd),
    cx + rOut * Math.cos(aEnd), cy + rOut * Math.sin(aEnd),
    crIn
  );
  ctx.arcTo(
    cx + rOut * Math.cos(aEnd), cy + rOut * Math.sin(aEnd),
    cx + rOut * Math.cos(aEndOut), cy + rOut * Math.sin(aEndOut),
    crOut
  );
  ctx.arc(cx, cy, rOut, aEndOut, aStartOut, true);
  ctx.arcTo(
    cx + rOut * Math.cos(aStart), cy + rOut * Math.sin(aStart),
    cx + rIn * Math.cos(aStart), cy + rIn * Math.sin(aStart),
    crOut
  );
  ctx.arcTo(
    cx + rIn * Math.cos(aStart), cy + rIn * Math.sin(aStart),
    cx + rIn * Math.cos(aStartIn), cy + rIn * Math.sin(aStartIn),
    crIn
  );
};

interface DitherDonutChartProps {
  theme?: 'dark' | 'light';
  compact?: boolean;
}

export function DitherDonutChart({ theme = 'dark', compact = false }: DitherDonutChartProps) {
  const [periodIndex, setPeriodIndex] = useState(1); // Month
  const [hoverIndex, setHoverIndex] = useState<number | null>(null);

  // Use shared perf hook — no getBoundingClientRect or matchMedia per frame
  const { canvasRef, rect, isVisible, reducedMotion } = useCanvasSetup();

  const period = PERIODS[periodIndex];

  const { values, shares, total } = useMemo(() => {
    let newTotal = 0;
    const newValues = PLANS.map((plan, i) => {
      const w = 0.78 + 0.4 * (0.5 + 0.5 * Math.sin(i * 1.9 + periodIndex * 1.3));
      const val = Math.round(plan.base * period.mult * w);
      newTotal += val;
      return val;
    });
    const newShares = newValues.map(v => v / newTotal);
    return { values: newValues, shares: newShares, total: newTotal };
  }, [periodIndex]);

  const timeRef = useRef(0);
  const requestRef = useRef<number>();
  const morphStartTimeRef = useRef<number>(0);
  const fromSharesRef = useRef<number[]>([]);
  const targetSharesRef = useRef<number[]>([]);
  const dispSharesRef = useRef<number[]>([]);

  const hoverRef = useRef(hoverIndex);
  useEffect(() => { hoverRef.current = hoverIndex; }, [hoverIndex]);

  useEffect(() => {
    if (dispSharesRef.current.length === 0) {
       dispSharesRef.current = [...shares];
       fromSharesRef.current = [...shares];
       targetSharesRef.current = [...shares];
    } else {
       fromSharesRef.current = [...dispSharesRef.current];
       targetSharesRef.current = [...shares];
       morphStartTimeRef.current = performance.now();
    }
  }, [shares]);

  useEffect(() => {
    const draw = () => {
      // Skip draw when not visible — saves CPU when off-screen or tab hidden
      if (!isVisible.current) {
        requestRef.current = requestAnimationFrame(draw);
        return;
      }

      const canvas = canvasRef.current;
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      // Use cached rect from ResizeObserver — no reflow
      const { width: logW, height: logH } = rect.current;
      if (logW === 0 || logH === 0) {
        requestRef.current = requestAnimationFrame(draw);
        return;
      }

      timeRef.current += reducedMotion ? 0 : 0.02;

      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      const logicalSize = 200;

      ctx.save();
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.scale((logW * dpr) / logicalSize, (logH * dpr) / logicalSize);

      let t = 0;
      if (reducedMotion) {
        t = 1;
      } else if (morphStartTimeRef.current > 0) {
        t = (performance.now() - morphStartTimeRef.current) / 500;
        if (t > 1) t = 1;
      } else {
        t = 1;
      }

      const e = 1 - Math.pow(2, -10 * t);
      for (let i = 0; i < targetSharesRef.current.length; i++) {
        dispSharesRef.current[i] = fromSharesRef.current[i] + (targetSharesRef.current[i] - fromSharesRef.current[i]) * e;
      }

      let startAngle = -Math.PI / 2;
      const gap = 0.07;
      const currentHover = hoverRef.current;

      for (let i = 0; i < dispSharesRef.current.length; i++) {
        const share = dispSharesRef.current[i];
        if (share === 0) continue;

        let sweep = share * Math.PI * 2;
        let aStart = startAngle + gap / 2;
        let aEnd = startAngle + sweep - gap / 2;

        if (aEnd < aStart) aEnd = aStart;

        ctx.save();
        const isHovered = currentHover === i;
        const isAnyHovered = currentHover !== null;

        if (isHovered) {
          const mid = (aStart + aEnd) / 2;
          ctx.translate(Math.cos(mid) * 6, Math.sin(mid) * 6);
        }

        ctx.beginPath();
        drawRoundedWedge(ctx, 100, 100, 55, 86, aStart, aEnd, 6);
        ctx.clip();

        ctx.globalAlpha = isHovered ? 1.0 : (isAnyHovered ? 0.3 * 0.72 : 0.72);
        ctx.fillStyle = PLANS[i].color;

        if (isHovered) {
            ctx.shadowColor = hexToRgba(PLANS[i].color, 0.55);
            ctx.shadowBlur = 5;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
        }

        const cell = 4.6;
        const t2 = timeRef.current;
        for (let x = 14; x <= 186; x += cell) {
          for (let y = 14; y <= 186; y += cell) {
            const dx = x - 100;
            const dy = y - 100;
            const dist = Math.sqrt(dx*dx + dy*dy);
            if (dist < 55 - cell || dist > 86 + cell) continue;

            let a = Math.atan2(dy, dx);
            let normalizedA = a - aStart;
            while (normalizedA < 0) normalizedA += Math.PI * 2;
            while (normalizedA >= Math.PI * 2) normalizedA -= Math.PI * 2;
            if (normalizedA > (aEnd - aStart)) continue;

            const fullness = smoothstep(0.62, 1.0, (dist - 55) / (86 - 55));
            const waveRaw = reducedMotion ? 0 :
              Math.sin(dist * 0.1 - t2) + Math.sin(a * 3 + t2 * 1.5) + Math.sin(dx * 0.05 + dy * 0.05 + t2 * 2);
            const wave = smoothstep(-1.5, 1.5, waveRaw);
            const jitter = hash(x, y);

            const size = cell * ((isHovered ? 0.46 : 0.34) + 0.36 * fullness + 0.26 * wave) * (0.78 + 0.42 * jitter);

            ctx.fillRect(x - size/2, y - size/2, size, size);
          }
        }

        ctx.restore();
        startAngle += sweep;
      }

      ctx.restore();
      requestRef.current = requestAnimationFrame(draw);
    };

    requestRef.current = requestAnimationFrame(draw);
    return () => {
      if (requestRef.current) cancelAnimationFrame(requestRef.current);
    };
  }, [reducedMotion]);

  if (compact) {
    return (
      <div className="relative w-full h-full flex items-center justify-center p-2">
        <div className="relative w-[130px] h-[130px]">
          <canvas ref={canvasRef} className="w-full h-full block" />
        </div>
      </div>
    );
  }

  return (
    <div className={`relative w-full rounded-3xl p-6 transition-colors border ${
      theme === 'dark' ? 'bg-[#181818] border-white/5 text-white' : 'bg-white border-neutral-200 text-black shadow-lg'
    }`}>
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <div className={`p-2 rounded-xl ${theme === 'dark' ? 'bg-blue-500/10 text-blue-400' : 'bg-blue-50 text-blue-600'}`}>
            <Users className="w-4 h-4" />
          </div>
          <div>
            <h4 className="text-sm font-bold">Plan Distribution</h4>
            <p className={`text-[11px] ${theme === 'dark' ? 'text-neutral-400' : 'text-neutral-500'}`}>
              Dithered canvas chart with real-time spring physics
            </p>
          </div>
        </div>

        {/* Period Filter Tabs */}
        <div className={`flex items-center p-1 rounded-full border text-xs font-medium ${
          theme === 'dark' ? 'bg-[#131313] border-white/10' : 'bg-neutral-100 border-neutral-200'
        }`}>
          {PERIODS.map((p, idx) => (
            <button
              key={p.name}
              onClick={() => setPeriodIndex(idx)}
              className={`px-2.5 py-1 rounded-full transition-all cursor-pointer ${
                periodIndex === idx
                  ? (theme === 'dark' ? 'bg-blue-600 text-white' : 'bg-blue-600 text-white')
                  : (theme === 'dark' ? 'text-neutral-400 hover:text-white' : 'text-neutral-600 hover:text-black')
              }`}
            >
              {p.name}
            </button>
          ))}
        </div>
      </div>

      {/* Main Content Layout */}
      <div className="flex flex-col sm:flex-row items-center gap-6">
        {/* Canvas Donut */}
        <div className="relative w-[180px] h-[180px] shrink-0">
          <canvas ref={canvasRef} className="w-full h-full block" />
        </div>

        {/* Plan Breakdown List */}
        <div className="flex-1 w-full space-y-2">
          {PLANS.map((plan, idx) => {
            const val = values[idx];
            const pct = Math.round(shares[idx] * 100);
            const isHovered = hoverIndex === idx;

            return (
              <div
                key={plan.name}
                onMouseEnter={() => setHoverIndex(idx)}
                onMouseLeave={() => setHoverIndex(null)}
                className={`flex items-center justify-between p-2 rounded-xl transition-all cursor-pointer border ${
                  isHovered
                    ? (theme === 'dark' ? 'bg-white/10 border-white/20' : 'bg-neutral-100 border-neutral-300')
                    : 'border-transparent hover:bg-white/5'
                }`}
              >
                <div className="flex items-center gap-2.5">
                  <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: plan.color }} />
                  <span className="text-xs font-medium">{plan.name}</span>
                </div>
                <div className="flex items-center gap-3 text-xs">
                  <span className={`font-semibold ${theme === 'dark' ? 'text-neutral-300' : 'text-neutral-700'}`}>
                    {val.toLocaleString()}
                  </span>
                  <span className={`text-[10px] w-8 text-right font-mono ${theme === 'dark' ? 'text-neutral-500' : 'text-neutral-400'}`}>
                    {pct}%
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Dither Growth Chart from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/src/components/dither-charts/DitherGrowthChart.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: motion, lucide-react

import React, { useEffect, useRef, useState, useMemo } from 'react';
import { motion, useSpring, useTransform, useReducedMotion } from 'motion/react';
import { Users, TrendingUp } from 'lucide-react';
import { useCanvasSetup } from './use-canvas-setup';

const RANGES = [
  { name: '7D', days: 7 },
  { name: '14D', days: 14 },
  { name: '30D', days: 30 },
  { name: '90D', days: 90 },
];

const smoothstep = (min: number, max: number, value: number) => {
  const x = Math.max(0, Math.min(1, (value - min) / (max - min)));
  return x * x * (3 - 2 * x);
};

const clamp = (val: number, min: number, max: number) => Math.max(min, Math.min(max, val));

function AnimatedNumber({ value }: { value: number }) {
  const prefersReducedMotion = useReducedMotion();
  const spring = useSpring(value, { stiffness: 190, damping: 20, mass: 0.7 });
  const display = useTransform(spring, (current) =>
    '+' + Math.round(current).toLocaleString('en-US')
  );

  useEffect(() => {
    if (prefersReducedMotion) {
      spring.jump(value);
    } else {
      spring.set(value);
    }
  }, [value, spring, prefersReducedMotion]);

  return <motion.span className="tabular-nums">{display}</motion.span>;
}

function formatDate(offsetDays: number) {
  const date = new Date(2026, 6, 14);
  date.setDate(date.getDate() - offsetDays);
  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}

interface DitherGrowthChartProps {
  theme?: 'dark' | 'light';
  compact?: boolean;
}

export function DitherGrowthChart({ theme = 'dark', compact = false }: DitherGrowthChartProps) {
  const [rangeIndex, setRangeIndex] = useState(2); // 30D default
  const { canvasRef, rect, isVisible, reducedMotion } = useCanvasSetup();
  const wrapperRef = useRef<HTMLDivElement>(null);

  const range = RANGES[rangeIndex];

  const [scrubIndex, setScrubIndex] = useState<number | null>(null);
  const targetX = useSpring(0, { stiffness: 650, damping: 42, mass: 0.5 });
  const targetY = useSpring(0, { stiffness: 650, damping: 42, mass: 0.5 });

  const { data, dates, total, maxVal } = useMemo(() => {
    const days = range.days;
    const newData = [];
    const newDates = [];
    let tot = 0;
    let mv = 3;
    for (let i = 0; i < days; i++) {
      const t = i / (days - 1);
      const base = 9 + t * 23;
      const wave = 6 * Math.sin(i * 0.7 + 1) + 3 * Math.sin(i * 1.9);
      const val = Math.max(3, Math.round(base + wave));
      newData.push(val);
      tot += val;
      if (val > mv) mv = val;
      newDates.push(formatDate(days - 1 - i));
    }
    return { data: newData, dates: newDates, total: tot, maxVal: mv };
  }, [rangeIndex]);

  const timeRef = useRef(0);
  const requestRef = useRef<number>();
  const pointerPosRef = useRef({ x: -100, y: -100 });
  const pointerActiveRef = useRef(false);

  const fromDataRef = useRef([...data]);
  const fromMaxRef = useRef(maxVal);
  const targetDataRef = useRef([...data]);
  const targetMaxRef = useRef(maxVal);
  const morphStartTimeRef = useRef(0);

  useEffect(() => {
    fromDataRef.current = targetDataRef.current.map((_, i) => targetDataRef.current[i]);
    fromMaxRef.current = targetMaxRef.current;

    targetDataRef.current = [...data];
    targetMaxRef.current = maxVal;

    if (fromDataRef.current.length !== targetDataRef.current.length) {
       const len = targetDataRef.current.length;
       const old = fromDataRef.current;
       fromDataRef.current = Array(len).fill(0).map((_, i) => {
         const t = i / (len - 1);
         const oldIdx = Math.round(t * (old.length - 1));
         return old[oldIdx];
       });
    }

    morphStartTimeRef.current = performance.now();
  }, [data, maxVal]);

  useEffect(() => {
    const draw = () => {
      if (!isVisible.current) {
        requestRef.current = requestAnimationFrame(draw);
        return;
      }

      const canvas = canvasRef.current;
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      const { width: w, height: h } = rect.current;
      if (w === 0 || h === 0) {
        requestRef.current = requestAnimationFrame(draw);
        return;
      }

      timeRef.current += reducedMotion ? 0 : 0.03;

      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      const cell = Math.max(3, Math.round(w / 180));

      ctx.save();
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.scale(dpr, dpr);

      let prog = 0;
      if (reducedMotion) {
        prog = 1;
      } else if (morphStartTimeRef.current > 0) {
        prog = (performance.now() - morphStartTimeRef.current) / 460;
        if (prog > 1) prog = 1;
      } else {
        prog = 1;
      }

      const curMax = fromMaxRef.current + (targetMaxRef.current - fromMaxRef.current) * prog;
      const curData = targetDataRef.current.map((v, i) => fromDataRef.current[i] + (v - fromDataRef.current[i]) * prog);

      const px = pointerPosRef.current.x;
      const py = pointerPosRef.current.y;
      const isActive = pointerActiveRef.current;
      const t2 = timeRef.current;

      for (let x = 0; x < w; x += cell) {
        const t = x / w;
        const exactIdx = t * (curData.length - 1);
        const i0 = Math.floor(exactIdx);
        const i1 = Math.min(i0 + 1, curData.length - 1);
        const frac = exactIdx - i0;
        const val = curData[i0] + (curData[i1] - curData[i0]) * frac;

        const headroom = 0.16 * h;
        const plotH = h - headroom;
        const curveY = h - plotH * (val / curMax);

        for (let y = h; y >= 0; y -= cell) {
          ctx.fillStyle = theme === 'dark' ? 'rgba(255, 255, 255, 0.03)' : 'rgba(0, 0, 0, 0.03)';
          ctx.fillRect(x + 1, y + 1, cell - 1, cell - 1);

          if (y < curveY) continue;

          const dx = x - px;
          const dy = y - py;
          const dist = Math.sqrt(dx*dx + dy*dy);

          let glow = 0;
          if (isActive && !reducedMotion) {
             const rad = h * 0.35;
             glow = 1 - smoothstep(0, rad, dist);
          }

          const shimmer = reducedMotion ? 0 : Math.sin(y * 0.1 - t2 * 2) * 0.07;

          ctx.fillStyle = '#FFFFFF';
          const sz = cell * (0.7 + shimmer + glow * 0.3);
          const alpha = 0.6 + glow * 0.4;
          ctx.globalAlpha = alpha;

          const offset = (cell - sz) / 2;
          ctx.fillRect(x + offset, y + offset, sz, sz);
          ctx.globalAlpha = 1;
        }
      }

      ctx.restore();
      requestRef.current = requestAnimationFrame(draw);
    };

    requestRef.current = requestAnimationFrame(draw);
    return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); };
  }, [theme, reducedMotion]);

  const handlePointer = (e: React.MouseEvent | React.PointerEvent) => {
    const wrapper = wrapperRef.current;
    if (!wrapper) return;
    const r = wrapper.getBoundingClientRect();
    const x = e.clientX - r.left;
    const y = e.clientY - r.top;

    pointerPosRef.current = { x, y };
    pointerActiveRef.current = true;

    const { width: w, height: h } = rect.current;

    const t = clamp(x / w, 0, 1);
    const idx = Math.round(t * (data.length - 1));
    setScrubIndex(idx);

    const actualT = data.length > 1 ? idx / (data.length - 1) : 0.5;
    targetX.set(actualT * w);

    const val = data[idx];
    const headroom = 0.16 * h;
    const plotH = h - headroom;
    const curveY = h - plotH * (val / maxVal);
    targetY.set(curveY);
  };

  const handlePointerLeave = () => {
    pointerActiveRef.current = false;
    setScrubIndex(null);
  };

  const xPos = useTransform(targetX, x => `${x}px`);
  const yPos = useTransform(targetY, y => `${y}px`);

  if (compact) {
    return (
      <div className="relative w-full h-full flex items-center justify-center p-2">
        <div className="relative w-full h-[120px]">
          <canvas ref={canvasRef} className="w-full h-full block" />
        </div>
      </div>
    );
  }

  const ticks = [maxVal, Math.round(maxVal * 0.66), Math.round(maxVal * 0.33), 0];
  const dateLabels = [
    dates[0],
    dates[Math.floor(dates.length * 0.25)],
    dates[Math.floor(dates.length * 0.5)],
    dates[Math.floor(dates.length * 0.75)],
    dates[dates.length - 1],
  ];

  return (
    <div className={`relative w-full rounded-3xl p-6 transition-colors border ${
      theme === 'dark' ? 'bg-[#181818] border-white/5 text-white' : 'bg-white border-neutral-200 text-black shadow-lg'
    }`}>
      {/* Header */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
        <div className="flex items-center gap-3">
          <div className={`p-2.5 rounded-2xl ${theme === 'dark' ? 'bg-blue-500/10 text-blue-400' : 'bg-blue-50 text-blue-600'}`}>
            <Users className="w-5 h-5" />
          </div>
          <div>
            <div className="flex items-baseline gap-2">
              <span className="text-2xl font-bold tracking-tight">
                <AnimatedNumber value={total} />
              </span>
              <span className="text-xs font-semibold text-emerald-500 flex items-center gap-0.5">
                <TrendingUp className="w-3.5 h-3.5" /> +14%
              </span>
            </div>
            <p className={`text-xs ${theme === 'dark' ? 'text-neutral-400' : 'text-neutral-500'}`}>
              Member growth over selected interval
            </p>
          </div>
        </div>

        {/* Range Filters */}
        <div className={`flex items-center p-1 rounded-full border text-xs font-medium ${
          theme === 'dark' ? 'bg-[#131313] border-white/10' : 'bg-neutral-100 border-neutral-200'
        }`}>
          {RANGES.map((r, idx) => (
            <button
              key={r.name}
              onClick={() => setRangeIndex(idx)}
              className={`px-3 py-1 rounded-full transition-all cursor-pointer ${
                rangeIndex === idx
                  ? 'bg-blue-600 text-white shadow-sm'
                  : (theme === 'dark' ? 'text-neutral-400 hover:text-white' : 'text-neutral-600 hover:text-black')
              }`}
            >
              {r.name}
            </button>
          ))}
        </div>
      </div>

      {/* Main Canvas Chart Stage */}
      <div className="flex gap-3 items-start">
        {/* Y Axis Ticks */}
        <div className="relative w-7 h-[180px] shrink-0">
          {ticks.map((t, i) => (
            <span
              key={i}
              className={`absolute right-0 text-[10px] font-mono ${theme === 'dark' ? 'text-neutral-500' : 'text-neutral-400'}`}
              style={{ top: `${(i / 3) * 82 + 8}%`, transform: 'translateY(-50%)' }}
            >
              {t}
            </span>
          ))}
        </div>

        {/* Chart Canvas Container */}
        <div className="flex-1 min-w-0 flex flex-col">
          <div
            ref={wrapperRef}
            className="relative h-[180px] touch-none cursor-crosshair overflow-hidden rounded-xl"
            onPointerMove={handlePointer}
            onPointerLeave={handlePointerLeave}
          >
            {/* Grid overlay */}
            <div className="absolute inset-0 border-t border-b border-dashed border-white/10 pointer-events-none" />
            <canvas ref={canvasRef} className="w-full h-full block" />

            {/* Interactive Scrubber Line & Tooltip */}
            {scrubIndex !== null && (
              <>
                <motion.div
                  className="absolute top-0 bottom-0 w-px bg-blue-500/80 pointer-events-none z-10"
                  style={{ left: xPos }}
                />
                <motion.div
                  className="absolute w-3 h-3 -ml-[6px] -mt-[6px] rounded-full bg-blue-500 border-2 border-white shadow-lg pointer-events-none z-20"
                  style={{ left: xPos, top: yPos }}
                />
                <motion.div
                  className={`absolute -translate-x-1/2 -translate-y-full mb-3 px-2.5 py-1 rounded-lg text-xs font-semibold shadow-xl border pointer-events-none z-30 ${
                    theme === 'dark' ? 'bg-[#131313] text-white border-white/20' : 'bg-black text-white border-black'
                  }`}
                  style={{ left: xPos, top: yPos }}
                >
                  <div className="text-[10px] text-neutral-400 uppercase">{dates[scrubIndex]}</div>
                  <div>+{data[scrubIndex]} members</div>
                </motion.div>
              </>
            )}
          </div>

          {/* X Axis Dates */}
          <div className="flex justify-between items-center mt-2 px-1 text-[10px] font-mono opacity-60">
            {dateLabels.map((lbl, idx) => (
              <span key={idx}>{lbl}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Interactive 3D Carousel from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/src/components/cards/CardCarousel.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: motion, lucide-react

import React, { useState } from "react";
import { motion } from "motion/react";
import { ChevronLeft, ChevronRight } from "lucide-react";

const DEFAULT_ASSETS = [
  {
    src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80',
    title: 'Sunset Beach',
  },
  {
    src: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=600&q=80',
    title: 'Misty Mountains',
  },
  {
    src: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&q=80',
    title: 'Forest Trail',
  },
  {
    src: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80',
    title: 'Sunlight in Woods',
  },
  {
    src: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=600&q=80',
    title: 'Green Hills',
  },
];

interface CardCarouselProps {
  hovered?: boolean;
  className?: string;
  images?: { src: string; title: string }[];
  isMonochrome?: boolean;
}

export const CardCarousel = React.memo(function CardCarousel({
  hovered,
  className = '',
  images = DEFAULT_ASSETS,
  isMonochrome = false
}: CardCarouselProps) {
  const [activeIndex, setActiveIndex] = useState(2);
  const [isHovered, setIsHovered] = useState(false);
  const active = hovered !== undefined ? hovered : isHovered;

  const toPrev = (e: React.MouseEvent) => {
    e.stopPropagation();
    setActiveIndex(prev => Math.max(0, prev - 1));
  };

  const toNext = (e: React.MouseEvent) => {
    e.stopPropagation();
    setActiveIndex(prev => Math.min(images.length - 1, prev + 1));
  };

  const toSlide = (e: React.MouseEvent, index: number) => {
    e.stopPropagation();
    setActiveIndex(index);
  };

  const slideWidth = 160;

  return (
    <div 
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      className={`w-full h-full flex flex-col items-center justify-center relative overflow-hidden select-none ${className}`}
    >
      {/* carousel wrapper */}
      <div 
        className="relative h-[180px] flex items-center justify-start overflow-visible"
        style={{ width: `${slideWidth}px` }}
      >
        {/* slides container */}
        <motion.div 
          className="flex w-fit items-center"
          animate={{ x: -activeIndex * slideWidth }}
          transition={{ type: 'spring', bounce: 0.1, duration: 0.25 }}
        >
          {images.map((item, i) => {
            const isActive = activeIndex === i;
            const diff = i - activeIndex;

            const targetRotate = active ? diff * 20 : diff * 5;
            const targetScale = isActive ? 1.05 : (active ? 0.65 : 0.8);
            const targetY = active ? diff * 24 : 0;

            return (
              <motion.div 
                key={i}
                className="shrink-0 flex flex-col items-center gap-1.5 will-change-[transform,scale]"
                style={{ width: `${slideWidth}px` }}
                animate={{ 
                  rotate: targetRotate, 
                  scale: targetScale, 
                  y: targetY 
                }}
                transition={{ type: 'spring', bounce: 0.2, duration: 0.25 }}
              >
                <div 
                  className={`text-[10px] md:text-xs font-semibold whitespace-nowrap transition-all duration-250 ${isActive ? 'opacity-100 scale-100 text-white' : 'opacity-0 scale-75 text-neutral-400'}`} 
                >
                  {isMonochrome ? `Card ${i + 1}` : item.title}
                </div>

                {isMonochrome ? (
                  <div 
                    onClick={(e) => toSlide(e, i)}
                    className="w-[110px] h-[110px] rounded-xl bg-neutral-400 dark:bg-neutral-800 border border-neutral-200/20 shadow-lg flex items-center justify-center text-neutral-600 dark:text-neutral-400 font-bold text-sm cursor-pointer"
                  >
                    {i + 1}
                  </div>
                ) : (
                  <img 
                    src={item.src} 
                    alt={item.title} 
                    referrerPolicy="no-referrer"
                    className="w-[110px] h-[110px] object-cover rounded-xl shadow-lg border border-white/10 cursor-pointer" 
                    onClick={(e) => toSlide(e, i)} 
                  />
                )}
              </motion.div>
            )
          })}
        </motion.div>
      </div>

      {/* controls */}
      <div className="mt-4 px-1.5 py-0.5 flex items-center gap-2 justify-center text-neutral-400 rounded-full bg-neutral-900/60 backdrop-blur-md border border-white/5 shadow-md z-20">
        {/* prev button */}
        <button onClick={toPrev} className="p-1 cursor-pointer hover:bg-white/5 rounded-full transition-colors border-0 bg-transparent text-neutral-400 hover:text-white">
          <ChevronLeft className="w-3.5 h-3.5" />
        </button>
        {/* slide dots */}
        <div className="flex justify-center items-center gap-1">
          {images.map((_, i) => (
            <div 
              key={i} 
              onClick={(e) => toSlide(e, i)}
              className={`rounded-full cursor-pointer h-1 transition-all duration-250 ${activeIndex === i ? 'w-4 bg-white' : 'w-1 bg-white/30 hover:bg-white/50'}`}>
            </div>
          ))}
        </div>
        {/* next button */}
        <button onClick={toNext} className="p-1 cursor-pointer hover:bg-white/5 rounded-full transition-colors border-0 bg-transparent text-neutral-400 hover:text-white">
          <ChevronRight className="w-3.5 h-3.5" />
        </button>
      </div>
    </div>
  );
});

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// CoverFlow Carousel from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/src/components/cards/CardCoverFlow.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: motion, lucide-react

import React, { useState } from "react";
import { motion } from "motion/react";
import { ChevronLeft, ChevronRight } from "lucide-react";

const DEFAULT_ASSETS = [
  {
    src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80',
    title: 'Sunset Beach',
  },
  {
    src: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=600&q=80',
    title: 'Misty Mountains',
  },
  {
    src: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&q=80',
    title: 'Forest Trail',
  },
  {
    src: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80',
    title: 'Sunlight in Woods',
  },
  {
    src: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=600&q=80',
    title: 'Green Hills',
  },
];

interface CardCoverFlowProps {
  hovered?: boolean;
  className?: string;
  images?: { src: string; title: string }[];
  isMonochrome?: boolean;
}

export const CardCoverFlow = React.memo(function CardCoverFlow({
  hovered,
  className = '',
  images = DEFAULT_ASSETS,
  isMonochrome = false
}: CardCoverFlowProps) {
  const [activeIndex, setActiveIndex] = useState(2);

  const toPrev = (e: React.MouseEvent) => {
    e.stopPropagation();
    setActiveIndex(prev => Math.max(0, prev - 1));
  };

  const toNext = (e: React.MouseEvent) => {
    e.stopPropagation();
    setActiveIndex(prev => Math.min(images.length - 1, prev + 1));
  };

  const toSlide = (e: React.MouseEvent, index: number) => {
    e.stopPropagation();
    setActiveIndex(index);
  };

  return (
    <div className={`w-full h-full flex flex-col items-center justify-center relative overflow-hidden select-none bg-zinc-950/40 rounded-2xl ${className}`} style={{ perspective: '1000px' }}>
      {/* carousel wrapper */}
      <div className="w-full flex justify-center items-center relative h-[140px] [transform-style:preserve-3d]">
        {images.map((item, i) => {
          const isActive = activeIndex === i;
          const offset = i - activeIndex;
          const absOffset = Math.abs(offset);
          const isPast = i < activeIndex;
          
          return (
            <motion.div 
              key={i}
              className="absolute w-[80px] aspect-[3/4] cursor-pointer"
              initial={false}
              animate={{ 
                x: offset * 32,
                rotateY: isActive ? 0 : (isPast ? 38 : -38),
                z: isActive ? 50 : -absOffset * 50,
                scale: isActive ? 1.1 : 1 - (absOffset * 0.08),
                opacity: absOffset > 2 ? 0 : 1 - (absOffset * 0.25)
              }}
              transition={{ type: 'spring', stiffness: 200, damping: 28 }}
              style={{ zIndex: 100 - absOffset }}
              onClick={(e) => toSlide(e, i)}
            >
              {isMonochrome ? (
                <div 
                  className="w-full h-full rounded-xl bg-neutral-400 dark:bg-neutral-800 border border-neutral-200/20 shadow-2xl flex items-center justify-center text-neutral-600 dark:text-neutral-400 font-bold text-sm"
                >
                  {i + 1}
                </div>
              ) : (
                <img 
                  src={item.src} 
                  alt={item.title} 
                  referrerPolicy="no-referrer"
                  className="w-full h-full object-cover rounded-xl shadow-2xl border border-white/10" 
                />
              )}
              <motion.div 
                className="absolute -bottom-6 left-[-20px] right-[-20px] text-center text-[10px] font-semibold text-white/80 whitespace-nowrap overflow-hidden text-ellipsis"
                animate={{ opacity: isActive ? 1 : 0, y: isActive ? 0 : -5 }}
              >
                {isMonochrome ? `Card ${i + 1}` : item.title}
              </motion.div>
            </motion.div>
          )
        })}
      </div>

      {/* controls */}
      <div className="mt-6 w-fit px-1.5 py-0.5 flex items-center gap-2 justify-center text-zinc-300 rounded-full bg-white/5 backdrop-blur-md border border-white/10 shadow-sm z-20">
        <button onClick={toPrev} className="p-1 cursor-pointer hover:bg-white/10 rounded-full transition-colors border-0 bg-transparent text-neutral-300 hover:text-white">
          <ChevronLeft className="w-3.5 h-3.5" />
        </button>
        <div className="flex justify-center items-center gap-1">
          {images.map((_, i) => (
            <div 
              key={i} 
              onClick={(e) => toSlide(e, i)}
              className={`rounded-full cursor-pointer h-1 transition-all duration-250 ${activeIndex === i ? 'w-4 bg-white' : 'w-1 bg-white/30 hover:bg-white/50'}`}>
            </div>
          ))}
        </div>
        <button onClick={toNext} className="p-1 cursor-pointer hover:bg-white/10 rounded-full transition-colors border-0 bg-transparent text-neutral-300 hover:text-white">
          <ChevronRight className="w-3.5 h-3.5" />
        </button>
      </div>
    </div>
  );
});

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Zig Zag Pulse from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/zig-zag-pulse.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const ZigZagPulse = () => {
  return (
    <div className="grid grid-cols-3 gap-2 w-12 h-12">
      {[
        [0, 0], [1, 1], [2, 0],
        [0, 2], [1, 1], [2, 2]
      ].map(([col, row], i) => (
        <motion.div
          key={i}
          className="w-2.5 h-2.5 bg-zinc-800 dark:bg-white rounded-full"
          style={{ gridColumn: col + 1, gridRow: row + 1 }}
          animate={{ opacity: [0.2, 1, 0.2] }}
          transition={{ duration: 1.2, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" }}
        />
      ))}
    </div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Page Transition from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/transitions/page-transition.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React, { useEffect, useRef } from 'react';
import { motion, Variants } from 'framer-motion';

export type TransitionType =
  | 'double-stairs'
  | 'shutter-stairs'
  | 'split-stairs'
  | 'horizontal-split'
  | 'vertical-split'
  | 'slash'
  | 'lattice'
  | 'curtain-shred'
  | 'pixel'
  | 'pixel-wave'
  | 'pixel-spiral'
  | 'vortex'
  | 'cross-fade'
  | 'expand-grow'
  | 'push-slide'
  | 'pop-over'
  | 'depth-forward'
  | 'liquid-wave';

export interface PageTransitionProps {
  type?: TransitionType;
  isVisible: boolean;
  onComplete?: () => void;
  className?: string;
}

export const PageTransition: React.FC<PageTransitionProps> = ({
  type = 'double-stairs',
  isVisible,
  onComplete,
  className = '',
}) => {
  const pathRefs = useRef<(SVGPathElement | null)[]>([]);

  useEffect(() => {
    if (type !== 'liquid-wave' || !isVisible) return;
    let animId: number;
    const numPoints = 12;
    const numPaths = 3;
    const startTime = performance.now();

    const delays = Array.from({ length: numPaths }, (_, i) =>
      Array.from({ length: numPoints }, () => i * 0.08 + Math.random() * 0.15)
    );

    const animateFrame = (now: number) => {
      const elapsedSec = (now - startTime) / 1000;
      pathRefs.current.forEach((path, i) => {
        if (!path) return;
        const stepX = 100 / (numPoints - 1);
        const pointsY = delays[i].map((delay) => {
          const rawProgress = Math.max(0, Math.min(1, (elapsedSec - delay) / 0.65));
          const easeProgress =
            rawProgress < 0.5
              ? 2 * rawProgress * rawProgress
              : 1 - Math.pow(-2 * rawProgress + 2, 2) / 2;
          return 100 - easeProgress * 110;
        });

        let d = `M 0 100 V ${pointsY[0]}`;
        for (let j = 0; j < numPoints - 1; j++) {
          const currentX = j * stepX;
          const nextX = (j + 1) * stepX;
          const cpX = currentX + stepX * 0.5;
          d += ` C ${cpX} ${pointsY[j]} ${cpX} ${pointsY[j + 1]} ${nextX} ${pointsY[j + 1]}`;
        }
        d += ` V 100 H 0 Z`;
        path.setAttribute('d', d);
      });

      if (now - startTime < 1300) {
        animId = requestAnimationFrame(animateFrame);
      } else if (onComplete) {
        onComplete();
      }
    };

    animId = requestAnimationFrame(animateFrame);
    return () => cancelAnimationFrame(animId);
  }, [isVisible, type, onComplete]);

  if (!isVisible && type !== 'liquid-wave') return null;

  if (type === 'double-stairs') {
    const COLUMNS = 5;
    const variants: Variants = {
      initial: (i: number) => ({ y: i % 2 === 0 ? '-100%' : '100%' }),
      enter: (i: number) => ({
        y: '0%',
        transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: i * 0.05 },
      }),
      exit: (i: number) => ({
        y: i % 2 === 0 ? '100%' : '-100%',
        transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: i * 0.05 },
      }),
    };

    return (
      <motion.div
        className={`fixed inset-0 z-50 flex h-screen w-screen pointer-events-none ${className}`}
        initial="initial"
        animate={isVisible ? 'enter' : 'exit'}
        onAnimationComplete={() => {
          if (onComplete) onComplete();
        }}
      >
        {[...Array(COLUMNS)].map((_, i) => (
          <motion.div
            key={i}
            variants={variants}
            custom={i}
            className="relative h-full flex-1 bg-neutral-900 border-r border-neutral-800 last:border-r-0"
          />
        ))}
      </motion.div>
    );
  }

  if (type === 'liquid-wave') {
    return (
      <svg
        className={`fixed inset-0 w-full h-full pointer-events-none z-50 ${className}`}
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
      >
        <path ref={(el) => { pathRefs.current[0] = el; }} fill="#3f3f46" style={{ opacity: 0.4 }} />
        <path ref={(el) => { pathRefs.current[1] = el; }} fill="#27272a" style={{ opacity: 0.75 }} />
        <path ref={(el) => { pathRefs.current[2] = el; }} fill="#09090b" />
      </svg>
    );
  }

  return (
    <motion.div
      className={`fixed inset-0 z-50 bg-neutral-900 pointer-events-none ${className}`}
      initial={{ opacity: 0 }}
      animate={isVisible ? { opacity: 1 } : { opacity: 0 }}
      transition={{ duration: 0.4 }}
    />
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Wave Physics Loader from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/wave-physics-loader.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import { motion } from 'framer-motion';
import { useMemo } from 'react';

export function WavePhysicsLoader({ theme = 'light' }: { theme?: 'light' | 'dark' }) {
  const numBars = 15;
  const barWidth = 12; 
  const barGap = 8; 
  const barTotalWidth = barWidth + barGap;
  
  const numFrames = 201;
  const B = 4; 
  const maxBounce = 60; 
  const baseBarH = 16;
  const wavePeakH = 48; 

  const { bars, ballX, ballY, ballScaleX, ballScaleY, times } = useMemo(() => {
    const barsData = Array.from({ length: numBars }).map(() => ({ 
      heights: [] as string[],
      colors: [] as string[],
    }));
    const bX: string[] = [];
    const bY: string[] = [];
    const bScaleX: number[] = [];
    const bScaleY: number[] = [];
    const tArr: number[] = [];
    
    for (let k = 0; k < numFrames; k++) {
      const t = k / (numFrames - 1);
      tArr.push(t);
      
      const x_frac = t < 0.5 ? t / 0.5 : (1 - t) / 0.5;
      const ball_idx = x_frac * (numBars - 1);
      
      bX.push(`${ball_idx * barTotalWidth}px`);
      
      let bounce_f = (x_frac * B) % 1.0;
      if (x_frac === 1 || x_frac === 0) bounce_f = 0;
      
      const bounce_h = 4 * bounce_f * (1 - bounce_f);
      const height_factor = Math.max(0, 1 - bounce_h * 2);
      
      const ball_indent = height_factor * 20; 
      const ball_y = (baseBarH + wavePeakH - ball_indent) + bounce_h * maxBounce;
      bY.push(`-${ball_y}px`);
      
      const squish = height_factor; 
      bScaleY.push(1 - squish * 0.3);
      bScaleX.push(1 + squish * 0.25);
      
      for (let i = 0; i < numBars; i++) {
        const dist = Math.abs(i - ball_idx);
        
        let wave_val = 0;
        if (dist < 3) {
          wave_val = Math.cos((dist / 3) * (Math.PI / 2));
        }
        
        let indent = 0;
        if (dist < 1.5) {
          const indent_dist = Math.cos((dist / 1.5) * (Math.PI / 2));
          indent = indent_dist * height_factor * 20;
        }
        
        const bar_h = baseBarH + wave_val * wavePeakH - indent;
        barsData[i].heights.push(`${Math.max(4, bar_h)}px`); 
        
        // Colors for Light Theme: zinc-200 to zinc-800
        const isDark = theme === 'dark';
        let r, g, b;
        if (isDark) {
          r = Math.round(39 + wave_val * (228 - 39));
          g = Math.round(39 + wave_val * (228 - 39));
          b = Math.round(42 + wave_val * (231 - 42));
        } else {
          r = Math.round(228 - wave_val * (228 - 39));
          g = Math.round(228 - wave_val * (228 - 39));
          b = Math.round(231 - wave_val * (231 - 42));
        }
        barsData[i].colors.push(`rgb(${r}, ${g}, ${b})`);
      }
    }
    
    return { bars: barsData, ballX: bX, ballY: bY, ballScaleX: bScaleX, ballScaleY: bScaleY, times: tArr };
  }, [theme]);

  return (
    <div className="relative flex flex-col items-center justify-center w-full scale-[0.6] sm:scale-75 md:scale-100">
      <div className="relative flex items-end justify-start h-48 space-x-2 w-[292px]">
        {bars.map((bar, i) => (
          <motion.div
            key={i}
            className="w-3 rounded-full origin-bottom"
            style={{ height: '16px', backgroundColor: theme === 'dark' ? 'rgb(39, 39, 42)' : 'rgb(228, 228, 231)' }}
            animate={{
              height: bar.heights,
              backgroundColor: bar.colors,
            }}
            transition={{
              duration: 4,
              repeat: Infinity,
              times: times,
              ease: 'linear',
            }}
          />
        ))}
        
        <motion.div
          className="absolute w-3 h-3 bg-zinc-900 dark:bg-white rounded-full z-10 shadow-sm"
          style={{ bottom: 0, left: 0, transformOrigin: 'bottom center' }}
          animate={{
            x: ballX,
            y: ballY,
            scaleX: ballScaleX,
            scaleY: ballScaleY,
          }}
          transition={{
            duration: 4,
            repeat: Infinity,
            times: times,
            ease: 'linear',
          }}
        />
      </div>
    </div>
  );
}

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Waveform Loader from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/waveform-loader.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const WaveformLoader = () => (
  <div className="flex items-center space-x-0.5 h-8">
    {Array.from({ length: 8 }).map((_, i) => (
      <motion.div
        key={i}
        className="w-1 bg-zinc-800 dark:bg-white rounded-full"
        animate={{ height: [4, 24, 4] }}
        transition={{ duration: 1, repeat: Infinity, delay: Math.sin(i) * 0.5, ease: "easeInOut" }}
      />
    ))}
  </div>
);

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Watch Spinner from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/watch-spinner.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const WatchSpinner = () => (
  <div className="relative w-12 h-12 flex items-center justify-center">
    {[0, 1, 2].map(i => (
      <motion.div
        key={i}
        className="absolute rounded-full border-[3px] border-transparent border-t-zinc-800 dark:border-t-white"
        style={{ width: 44 - i * 12, height: 44 - i * 12 }}
        animate={{ rotate: 360 }}
        transition={{ duration: 1 + i * 0.5, repeat: Infinity, ease: "easeInOut" }}
      />
    ))}
  </div>
);

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Wave Dots from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/wave-dots.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const WaveDots = () => {
  return (
    <div className="flex space-x-1.5 h-6 items-center">
      {[0, 1, 2, 3, 4].map((i) => (
        <motion.div
          key={i}
          className="w-2 h-2 bg-zinc-800 dark:bg-white rounded-full"
          animate={{ y: [4, -4, 4] }}
          transition={{ duration: 1, repeat: Infinity, delay: i * 0.15, ease: "easeInOut" }}
        />
      ))}
    </div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Typing from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/typing.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const Typing = () => {
  return (
    <div className="flex items-center text-zinc-900 dark:text-white font-medium text-lg w-20">
      Loading
      <motion.span
        className="w-1.5 h-4 bg-zinc-900 dark:bg-white ml-1 inline-block"
        animate={{ opacity: [1, 0, 1] }}
        transition={{ duration: 0.8, repeat: Infinity, ease: "linear" }}
      />
    </div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Wandering Cube from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/wandering-cube.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const WanderingCube = () => {
  return (
    <div className="relative w-10 h-10">
      <motion.div
        className="absolute top-0 left-0 w-4 h-4 bg-zinc-800 dark:bg-white rounded-sm"
        animate={{ 
          x: [0, 24, 24, 0, 0],
          y: [0, 0, 24, 24, 0],
          rotate: [0, -90, -180, -270, -360]
        }}
        transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
      />
    </div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Typing Indicator from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/typing-indicator.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const TypingIndicator = () => {
  return (
    <div className="flex items-center justify-center px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-full space-x-1">
      {[0, 1, 2].map((i) => (
        <motion.div
          key={i}
          className="w-1.5 h-1.5 bg-zinc-500 dark:bg-zinc-350 rounded-full"
          animate={{ y: [0, -4, 0] }}
          transition={{ duration: 0.6, repeat: Infinity, delay: i * 0.15, ease: "easeInOut" }}
        />
      ))}
    </div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Triple Dot Spinner from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/triple-dot-spinner.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const TripleDotSpinner = () => {
  return (
    <motion.div 
      className="relative w-10 h-10"
      animate={{ rotate: 360 }}
      transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
    >
      {[0, 1, 2].map((i) => (
        <div
          key={i}
          className="absolute top-0 left-1/2 w-2 h-2 bg-zinc-800 dark:bg-white rounded-full -ml-1 origin-[4px_20px]"
          style={{ transform: `rotate(${i * 120}deg)` }}
        />
      ))}
    </motion.div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Twin Orbit from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/twin-orbit.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const TwinOrbit = () => {
  return (
    <div className="relative w-12 h-12">
      <motion.div
        className="absolute inset-0 border-2 border-zinc-800 dark:border-zinc-700 rounded-full border-b-transparent border-r-transparent"
        animate={{ rotate: 360 }}
        transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
      />
      <motion.div
        className="absolute inset-2 border-2 border-zinc-400 rounded-full border-t-transparent border-l-transparent"
        animate={{ rotate: -360 }}
        transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
      />
    </div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Text Shimmer from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/text-shimmer.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const TextShimmer = () => {
  return (
    <div className="relative text-zinc-200 font-medium text-lg">
      Thinking
      <motion.div
        className="absolute inset-0 text-zinc-900 dark:text-white"
        style={{ WebkitMaskImage: "linear-gradient(90deg, transparent 0%, black 50%, transparent 100%)", WebkitMaskSize: "200% 100%" }}
        animate={{ WebkitMaskPosition: ["100% 0%", "-100% 0%"] }}
        transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
      >
        Thinking
      </motion.div>
    </div>
  );
};

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Trailing Dots from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/trailing-dots.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const TrailingDots = () => (
  <div className="relative w-10 h-10">
    {[0,1,2,3,4].map((i) => (
      <motion.div
        key={i}
        className="absolute inset-0"
        animate={{ rotate: 360 }}
        transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.1, ease: "easeInOut" }}
      >
        <div className={`w-2 h-2 rounded-full absolute top-0 left-1/2 -ml-1 ${i === 0 ? 'bg-zinc-800 dark:bg-white' : 'bg-zinc-400 dark:bg-zinc-200'}`} style={{ opacity: 1 - i * 0.2 }} />
      </motion.div>
    ))}
  </div>
);

/*
 * MIT License
 *
 * Copyright (c) 2026 Syed Subhan Uddin
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
// Text Morph from amicro by Syed Subhan Uddin
// https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/registry/ui/loading/text-morph.tsx
// MIT License, Copyright (c) 2026 Syed Subhan Uddin. Full licence: https://github.com/Subhan-code/Amicro--Micro-transitions-/blob/main/LICENSE
// Styled with Tailwind CSS. Needs: framer-motion

import React from 'react';
import { motion } from 'framer-motion';

export const TextMorph = () => (
  <div className="relative h-6 w-24 flex items-center justify-center font-medium text-sm text-zinc-900 dark:text-white overflow-hidden">
    <motion.div
      className="absolute"
      animate={{ opacity: [1, 0, 0, 1], y: [0, -16, 16, 0] }}
      transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
    >
      Loading
    </motion.div>
    <motion.div
      className="absolute"
      animate={{ opacity: [0, 1, 1, 0], y: [16, 0, 0, -16] }}
      transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
    >
      Wait
    </motion.div>
  </div>
);