function DecayChart() {
  const points = [
    { x: 0,   y: 100, lbl: '0 min' },
    { x: 5,   y: 78,  lbl: '5 min' },
    { x: 30,  y: 42,  lbl: '30 min' },
    { x: 60,  y: 28,  lbl: '1 hr' },
    { x: 240, y: 12,  lbl: '4 hrs' },
    { x: 1440,y: 4,   lbl: '24 hrs' },
  ];
  const W = 600, H = 280, pad = 40;
  const xMax = 1440;
  const xScale = (x) => pad + (Math.log10(x + 1) / Math.log10(xMax + 1)) * (W - pad - 20);
  const yScale = (y) => pad + (1 - y/100) * (H - pad - 30);

  const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${xScale(p.x)} ${yScale(p.y)}`).join(' ');
  const area = `M ${xScale(0)} ${yScale(0)} ${path.replace('M', 'L')} L ${xScale(xMax)} ${yScale(0)} Z`;

  return (
    <div className="decay-chart">
      <div className="title-bar">
        <span className="h">Probabilidad de cierre por tiempo de respuesta</span>
        <span className="v">−96%</span>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} className="decay-svg" preserveAspectRatio="none">
        <defs>
          <linearGradient id="decayGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="var(--accent)" stopOpacity="0.16" />
            <stop offset="1" stopColor="var(--accent)" stopOpacity="0" />
          </linearGradient>
        </defs>
        <g className="decay-grid-lines">
          {[0, 25, 50, 75, 100].map(v => (
            <line key={v} x1={pad} x2={W-20} y1={yScale(v)} y2={yScale(v)} />
          ))}
        </g>
        <line className="decay-axis" x1={pad} y1={pad} x2={pad} y2={H-30} />
        <line className="decay-axis" x1={pad} y1={H-30} x2={W-20} y2={H-30} />

        <path d={area} className="decay-area" />
        <path d={path} className="decay-line" />

        {points.map((p, i) => (
          <g key={i}>
            <circle cx={xScale(p.x)} cy={yScale(p.y)} r="4" className="decay-dot" />
            <text x={xScale(p.x)} y={H-12} fontFamily="Geist" fontSize="10" fill="#86868b" textAnchor="middle">{p.lbl}</text>
            <text x={xScale(p.x)} y={yScale(p.y) - 12} fontFamily="Geist" fontSize="10" fontWeight="600" fill="var(--accent)" textAnchor="middle">{p.y}%</text>
          </g>
        ))}

        <text x={pad - 8} y={yScale(100) + 4} fontFamily="Geist" fontSize="10" fill="#86868b" textAnchor="end">100</text>
        <text x={pad - 8} y={yScale(50) + 4}  fontFamily="Geist" fontSize="10" fill="#86868b" textAnchor="end">50</text>
        <text x={pad - 8} y={yScale(0) + 4}   fontFamily="Geist" fontSize="10" fill="#86868b" textAnchor="end">0</text>
      </svg>
    </div>
  );
}

function Problem() {
  return (
    <section className="problem section" id="producto" data-screen-label="02 El problema">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">El problema</span>
          <h2 className="title">
            <span className="line">Tus leads se mueren</span>
            <span className="line accent-text">mientras tu equipo duerme.</span>
          </h2>
          <p className="lede">
            71% de los leads se pierden por tiempo de respuesta. No por precio. No por producto.
          </p>
        </div>

        <div className="decay-layout">
          <DecayChart />
          <div className="decay-stats">
            <div className="decay-stat">
              <div className="big">4<span className="unit">hrs</span></div>
              <div className="lbl">Tiempo promedio de respuesta de una concesionaria mexicana.</div>
              <div className="src">Fuente · AMDA 2024</div>
            </div>
            <div className="decay-stat">
              <div className="big">71<span className="unit">%</span></div>
              <div className="lbl">De los leads compran al primer asesor que les responde.</div>
              <div className="src">Fuente · Harvard Business Review</div>
            </div>
            <div className="decay-stat">
              <div className="big">$1.8<span className="unit">M MXN</span></div>
              <div className="lbl">Ventas perdidas al mes que ya pagaste por generar.</div>
              <div className="src">Promedio · concesionaria mediana</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Problem = Problem;