// lost-opportunities.jsx — interactive "what does NOT responding cost you?" section

function LostOpportunities() {
  // user inputs (per week) — defaults tuned so all sliders start at ~10% (equal short bars)
  const [missedCalls, setMissedCalls] = React.useState(5);      // 10% of 50
  const [missedMessages, setMissedMessages] = React.useState(10); // 10% of 100
  const [missedEmails, setMissedEmails] = React.useState(8);    // 10% of 80
  const [avgValue, setAvgValue] = React.useState(350);          // ~10% of (50→3000)

  // assumptions
  const CONV_CALL = 0.30;
  const CONV_MSG = 0.15;
  const CONV_EMAIL = 0.10;

  const lostClientsWeek =
    missedCalls * CONV_CALL +
    missedMessages * CONV_MSG +
    missedEmails * CONV_EMAIL;
  const lostClientsMonth = lostClientsWeek * 4.33;
  const lostClientsYear = lostClientsWeek * 52;
  const lostRevenueMonth = lostClientsMonth * avgValue;
  const lostRevenueYear = lostClientsYear * avgValue;

  const fmt = (n) =>
    new Intl.NumberFormat('es-ES', { maximumFractionDigits: 0 }).format(Math.round(n));
  const fmtEur = (n) =>
    new Intl.NumberFormat('es-ES', {
      style: 'currency', currency: 'EUR', maximumFractionDigits: 0,
    }).format(Math.round(n));

  return (
    <section style={{
      padding: '100px 0',
      background: 'var(--bg)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="container">
        <SectionHeader
          align="center"
          kicker="El verdadero coste de no responder"
          title="¿Cuántos clientes has perdido esta semana sin darte cuenta?"
          lede="Una llamada perdida. Un mensaje sin responder. Un email que esperó dos días. Cada uno de estos es un cliente que buscó a alguien más."
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)',
          gap: 32,
          alignItems: 'stretch',
        }} className="lost-grid">

          {/* LEFT: input panel */}
          <div style={{
            background: 'var(--bg-2)',
            border: '1px solid var(--rule)',
            borderRadius: 'var(--radius-lg)',
            padding: 'clamp(24px, 3vw, 36px)',
            display: 'flex', flexDirection: 'column', gap: 28,
            boxShadow: 'var(--shadow-sm)',
          }}>
            <div>
              <Eyebrow style={{ marginBottom: 10 }}>Introduce tus números</Eyebrow>
              <h3 style={{
                margin: 0, fontSize: 22, fontWeight: 700,
                letterSpacing: '-0.015em', lineHeight: 1.2,
              }}>Estimación semanal, a ojo también vale.</h3>
              <p style={{
                margin: '8px 0 0', fontSize: 14,
                color: 'var(--fg-soft)', lineHeight: 1.5,
              }}>
                No hacen falta datos exactos. Piensa en una semana normal.
              </p>
            </div>

            <Slider
              icon="📞"
              label="Llamadas perdidas / semana"
              hint="¿Cuántas llamadas suenan sin respuesta o van al buzón de voz?"
              value={missedCalls}
              min={0} max={50} step={1}
              onChange={setMissedCalls}
              unit="llamadas"
            />

            <Slider
              icon="💬"
              label="Mensajes sin respuesta / semana"
              hint="WhatsApp, DM Instagram, chat del sitio — fuera de horario o el fin de semana."
              value={missedMessages}
              min={0} max={100} step={1}
              onChange={setMissedMessages}
              unit="mensajes"
            />

            <Slider
              icon="📧"
              label="Emails sin respuesta en 24h"
              hint="Emails que llegan y a las que respondes al día siguiente o más tarde."
              value={missedEmails}
              min={0} max={80} step={1}
              onChange={setMissedEmails}
              unit="emails"
            />

            <div style={{
              padding: 18,
              background: 'var(--bg)',
              border: '1px solid var(--rule)',
              borderRadius: 'var(--radius)',
            }}>
              <Slider
                icon="💶"
                label="Valor medio de un cliente"
                hint="¿Cuánto vale, de media, un cliente captado? (también vale ticket medio)"
                value={avgValue}
                min={50} max={3000} step={50}
                onChange={setAvgValue}
                unit="€"
                bare
              />
            </div>

            <p style={{
              margin: 0, fontSize: 11,
              color: 'var(--fg-mute)', fontFamily: 'var(--mono)',
              lineHeight: 1.5, letterSpacing: '0.02em',
            }}>
              * Estimación basada en tasas de conversión medias para empresas: llamadas 30%, mensajes 15%, emails 10%. El número real probablemente es más alto.
            </p>
          </div>

          {/* RIGHT: results panel */}
          <div style={{
            background: 'var(--fg)',
            color: 'var(--bg)',
            borderRadius: 'var(--radius-lg)',
            padding: 'clamp(28px, 3.5vw, 44px)',
            display: 'flex', flexDirection: 'column', gap: 24,
            position: 'relative',
            overflow: 'hidden',
            boxShadow: 'var(--shadow-lg)',
          }}>
            {/* glow */}
            <div aria-hidden="true" style={{
              position: 'absolute', top: -120, right: -120,
              width: 360, height: 360, borderRadius: '50%',
              background: 'radial-gradient(circle, var(--accent) 0%, transparent 60%)',
              opacity: 0.25, filter: 'blur(40px)',
              pointerEvents: 'none',
            }} />

            <div style={{ position: 'relative', zIndex: 1 }}>
              <span style={{
                fontFamily: 'var(--mono)', fontSize: 12,
                color: 'var(--accent)', fontWeight: 700,
                letterSpacing: '0.06em', textTransform: 'uppercase',
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{
                  width: 6, height: 6, borderRadius: '50%',
                  background: 'var(--accent)',
                  animation: 'pulse 1.6s ease-in-out infinite',
                }} />
                Calcolo in tempo reale
              </span>
              <h3 style={{
                margin: '14px 0 0',
                fontSize: 'clamp(24px, 2.8vw, 32px)',
                fontWeight: 700, letterSpacing: '-0.02em',
                lineHeight: 1.15,
              }}>Esto es lo que te está costando.</h3>
            </div>

            {/* Big metric: clients lost / month */}
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div style={{
                fontSize: 12, fontWeight: 600,
                color: 'var(--fg-mute)', letterSpacing: '0.04em',
                textTransform: 'uppercase', marginBottom: 10,
              }}>
                Clienti potenzialmente persi / mese
              </div>
              <div style={{
                display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap',
              }}>
                <span style={{
                  fontSize: 'clamp(64px, 10vw, 112px)',
                  fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 0.95,
                  background: 'linear-gradient(135deg, #ff8f4d 0%, var(--accent) 100%)',
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                  backgroundClip: 'text',
                  fontFamily: 'var(--sans)',
                }}>{fmt(lostClientsMonth)}</span>
                <span style={{
                  fontSize: 16, color: 'var(--fg-mute)', fontWeight: 500,
                }}>personas que habrían comprado</span>
              </div>
            </div>

            {/* Money lost */}
            <div style={{
              position: 'relative', zIndex: 1,
              padding: 22,
              background: 'rgba(255, 143, 77, 0.10)',
              border: '1px solid rgba(255, 143, 77, 0.3)',
              borderRadius: 'var(--radius)',
            }}>
              <div style={{
                display: 'flex', justifyContent: 'space-between',
                alignItems: 'flex-start', gap: 16, flexWrap: 'wrap',
              }}>
                <div>
                  <div style={{
                    fontSize: 11, fontWeight: 700,
                    color: '#ff8f4d', letterSpacing: '0.04em',
                    textTransform: 'uppercase', marginBottom: 6,
                  }}>Facturación perdida / año</div>
                  <div style={{
                    fontSize: 'clamp(28px, 3.5vw, 40px)',
                    fontWeight: 700, letterSpacing: '-0.025em',
                    lineHeight: 1, color: '#ff8f4d',
                    fontVariantNumeric: 'tabular-nums',
                  }}>
                    {fmtEur(lostRevenueYear)}
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{
                    fontSize: 11, color: 'var(--fg-mute)', fontWeight: 600,
                    letterSpacing: '0.04em', textTransform: 'uppercase',
                    marginBottom: 6,
                  }}>al mes</div>
                  <div style={{
                    fontSize: 22, fontWeight: 700,
                    color: 'var(--bg)', letterSpacing: '-0.01em',
                    fontVariantNumeric: 'tabular-nums',
                  }}>{fmtEur(lostRevenueMonth)}</div>
                </div>
              </div>
            </div>

            {/* Breakdown */}
            <div style={{
              position: 'relative', zIndex: 1,
              display: 'grid',
              gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 1,
              background: 'rgba(245, 245, 247, 0.1)',
              borderRadius: 'var(--radius)',
              overflow: 'hidden',
            }} className="lost-breakdown">
              <Breakdown
                icon="📞"
                value={fmt(missedCalls * CONV_CALL * 4.33)}
                label="de llamadas"
              />
              <Breakdown
                icon="💬"
                value={fmt(missedMessages * CONV_MSG * 4.33)}
                label="de mensajes"
              />
              <Breakdown
                icon="📧"
                value={fmt(missedEmails * CONV_EMAIL * 4.33)}
                label="de emails"
              />
            </div>

            {/* CTA */}
            <div style={{
              position: 'relative', zIndex: 1,
              marginTop: 'auto',
              paddingTop: 24,
              borderTop: '1px solid rgba(245, 245, 247, 0.1)',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              gap: 16, flexWrap: 'wrap',
            }}>
              <div>
                <div style={{
                  fontSize: 14, fontWeight: 600,
                  color: 'var(--bg)', marginBottom: 2,
                }}>
                  Construimos una IA que responde por ti. Siempre.
                </div>
                <div style={{
                  fontSize: 12, color: 'var(--fg-mute)',
                }}>
                  24/7, también de noche y los fines de semana. No más clientes perdidos.
                </div>
              </div>
              <a href="mailto:ciao@solvera.it" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                background: 'var(--accent)', color: '#fff',
                padding: '12px 20px', borderRadius: 999,
                textDecoration: 'none', fontWeight: 600, fontSize: 14,
                whiteSpace: 'nowrap',
                boxShadow: '0 8px 24px -8px var(--accent)',
              }}>
                Recupera questi clienti <ArrowRight />
              </a>
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 900px) {
            .lost-grid { grid-template-columns: 1fr !important; }
          }
          @media (max-width: 520px) {
            .lost-breakdown { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function Slider({ icon, label, hint, value, min, max, step, onChange, unit, bare }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {!bare && (
          <span style={{
            width: 36, height: 36, borderRadius: 10,
            background: 'var(--bg-3)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 18, flexShrink: 0,
          }}>{icon}</span>
        )}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12,
          }}>
            <span style={{
              fontSize: 14, fontWeight: 600, color: 'var(--fg)',
            }}>{label}</span>
            <span style={{
              fontFamily: 'var(--mono)', fontSize: 15, fontWeight: 700,
              color: 'var(--accent-deep)',
              fontVariantNumeric: 'tabular-nums',
              whiteSpace: 'nowrap',
            }}>
              {unit === '€' ? `€${value}` : `${value} ${unit}`}
            </span>
          </div>
          {hint && (
            <div style={{
              fontSize: 12, color: 'var(--fg-mute)', marginTop: 2, lineHeight: 1.4,
            }}>{hint}</div>
          )}
        </div>
      </div>

      <div style={{ position: 'relative', height: 28 }}>
        <input
          type="range" min={min} max={max} step={step} value={value}
          onChange={(e) => onChange(Number(e.target.value))}
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            opacity: 0, cursor: 'pointer', margin: 0,
          }}
        />
        <div style={{
          position: 'absolute', left: 0, right: 0, top: '50%',
          height: 8, transform: 'translateY(-50%)',
          background: 'var(--bg-3)', borderRadius: 999,
          pointerEvents: 'none',
        }}>
          <div style={{
            position: 'absolute', left: 0, top: 0, bottom: 0,
            width: `${pct}%`,
            background: 'linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 100%)',
            borderRadius: 999,
            transition: 'width .1s ease',
          }} />
          <div style={{
            position: 'absolute',
            left: `calc(${pct}% - 10px)`,
            top: '50%', transform: 'translateY(-50%)',
            width: 20, height: 20, borderRadius: '50%',
            background: 'var(--bg-2)',
            border: '3px solid var(--accent)',
            boxShadow: 'var(--shadow-md)',
            transition: 'left .1s ease',
          }} />
        </div>
      </div>
    </div>
  );
}

function Breakdown({ icon, value, label }) {
  return (
    <div style={{
      padding: 18,
      background: 'rgba(20, 24, 31, 0.4)',
      display: 'flex', flexDirection: 'column', gap: 4,
    }}>
      <div style={{ fontSize: 18, marginBottom: 2 }}>{icon}</div>
      <div style={{
        fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em',
        lineHeight: 1, color: 'var(--bg)',
        fontVariantNumeric: 'tabular-nums',
      }}>{value}</div>
      <div style={{
        fontSize: 11, color: 'var(--fg-mute)',
        fontFamily: 'var(--mono)', letterSpacing: '0.02em',
      }}>{label}</div>
    </div>
  );
}

window.LostOpportunities = LostOpportunities;