Know your burn rate, runway, and margins at a glance

document.addEventListener('DOMContentLoaded', () => {
  const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
  const formatExpenses = (val, isMax) => {
    if (val >= 1000) {
      const k = Math.round(val / 1000);
      return isMax ? `$${k}K+` : `$${k}K`;
    }
    return `$${val}`;
  };

  document.querySelectorAll('.fb-princing-card').forEach((card) => {
    const line        = card.querySelector('.price-slider__line');
    const drag        = card.querySelector('.price-slider__drag');
    const priceText   = card.querySelector('.price-slider__price');
    const planPriceEl = card.querySelector('.fb-princing-card__price');
    const slider      = card.querySelector('.price-slider');

    if (!line || !drag || !priceText || !planPriceEl || !slider) return;

    // 📌 Parsear tiers desde atributos value-n / price-n
    const TIERS = [];
    let i = 1;
    while (slider.hasAttribute(`value-${i}`) && slider.hasAttribute(`price-${i}`)) {
      TIERS.push({
        value: parseInt(slider.getAttribute(`value-${i}`), 10),
        price: parseInt(slider.getAttribute(`price-${i}`), 10)
      });
      i++;
    }

    if (TIERS.length < 2) return; // Se necesitan al menos 2 tiers

    // Guardar el span original de "/month"
    const originalSpanHTML =
      (planPriceEl.querySelector('span') && planPriceEl.querySelector('span').outerHTML)
      || '<span>/month</span>';

    const interpolateValue = (ratio) => {
      const segments = TIERS.length - 1;
      const segSize  = 1 / segments;
      const segIndex = Math.floor(ratio / segSize);
      if (segIndex >= segments) return TIERS[segments].value;
      const start = TIERS[segIndex];
      const end   = TIERS[segIndex + 1];
      const local = (ratio - segIndex * segSize) / segSize;
      return Math.round(start.value + (end.value - start.value) * local);
    };

    const pickTierPrice = (val) => {
      for (const t of TIERS) {
        if (val <= t.value) return t.price;
      }
      return TIERS[TIERS.length - 1].price;
    };

    let dragging = false;

    const getLocalX = (clientX) => {
      const rect = line.getBoundingClientRect();
      return clamp(clientX - rect.left, 0, rect.width);
    };

    const updateFromX = (xInLine) => {
      const rect = line.getBoundingClientRect();
      const dragRect = drag.getBoundingClientRect();

      const minLeft = 0;
      const maxLeft = rect.width - dragRect.width;

      const leftPx = clamp(xInLine - dragRect.width / 2, minLeft, maxLeft);
      drag.style.left = `${leftPx}px`;

      const ratio = rect.width > dragRect.width
        ? leftPx / (rect.width - dragRect.width)
        : 0;

      const expenses = interpolateValue(ratio);
      const isMax = expenses >= TIERS[TIERS.length - 1].value;

      priceText.textContent = formatExpenses(expenses, isMax);

      if (isMax) {
        planPriceEl.textContent = 'Custom';
      } else {
        const newPrice = pickTierPrice(expenses);
        planPriceEl.innerHTML = `$${newPrice}${originalSpanHTML}`;
      }
    };

    const onLinePointerDown = (e) => {
      e.preventDefault();
      dragging = true;
      drag.setPointerCapture?.(e.pointerId);
      updateFromX(getLocalX(e.clientX));
    };

    const onDragPointerDown = (e) => {
      e.preventDefault();
      dragging = true;
      drag.setPointerCapture?.(e.pointerId);
    };

    const onPointerMove = (e) => {
      if (!dragging) return;
      updateFromX(getLocalX(e.clientX));
    };

    const endDrag = (e) => {
      if (!dragging) return;
      dragging = false;
      drag.releasePointerCapture?.(e.pointerId);
    };

    line.addEventListener('pointerdown', onLinePointerDown);
    drag.addEventListener('pointerdown', onDragPointerDown);
    window.addEventListener('pointermove', onPointerMove, { passive: true });
    window.addEventListener('pointerup', endDrag);
    window.addEventListener('pointercancel', endDrag);
    window.addEventListener('pointerleave', endDrag);

    requestAnimationFrame(() => updateFromX(0));
  });
});