/* global React, Icon, Button, Eyebrow, Badge, Droplets, Container */

const LE2 = {
  deep:    '#007A85',
  mint:    '#82E5C5',
  bg:      'var(--sub-leadgen-bg)',
};

// ============================================================
// WHAT YOU RECEIVE — Deliverables
// ============================================================
function LeDeliverables() {
  const items = [
    {
      icon: 'chart',
      title: 'Dashboard en tiempo real',
      body: 'Cuántos prospectos en cada etapa, tasa de respuesta, costo por lead calificado — visible siempre.',
    },
    {
      icon: 'users',
      title: 'Leads A y B en tu CRM',
      body: 'Directamente en HubSpot, Pipedrive o el tuyo — con el historial completo de interacciones.',
    },
    {
      icon: 'zap',
      title: 'Alertas de oportunidad',
      body: 'Cuando un prospecto abre el correo tres veces o visita /precios, tu vendedor lo sabe ese día.',
    },
    {
      icon: 'clipboard',
      title: 'Reporte semanal',
      body: 'Métricas de pipeline, respuestas, objeciones comunes y sugerencias de ajuste — cada lunes.',
    },
  ];

  return (
    <section style={{ background: '#fff' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Lo que tu equipo recibe</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 16px', color: 'var(--fg1)',
          }}>
            No leads. <span style={{ color: LE2.deep }}>Conversaciones</span> con personas que ya saben quién eres.
          </h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 1,
          background: 'var(--border)',
          borderRadius: 24,
          overflow: 'hidden',
          border: '1px solid var(--border)',
        }}>
          {items.map((it, i) => (
            <div key={it.title} style={{
              background: '#fff',
              padding: '32px 28px',
              transition: 'background var(--dur-base) var(--ease-out)',
            }}
              onMouseEnter={e => e.currentTarget.style.background = LE2.bg}
              onMouseLeave={e => e.currentTarget.style.background = '#fff'}>
              <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: LE2.bg, color: LE2.deep,
                display: 'grid', placeItems: 'center',
                marginBottom: 20,
              }}>
                <Icon name={it.icon} size={22} />
              </div>
              <h3 style={{
                fontFamily: 'var(--font-heading)', fontWeight: 700,
                fontSize: 18, letterSpacing: '-0.015em',
                margin: '0 0 10px', color: 'var(--fg1)',
                lineHeight: 1.2,
              }}>{it.title}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg2)', margin: 0 }}>
                {it.body}
              </p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// METRICS OBJECTIVE
// ============================================================
function LeMetrics() {
  const metrics = [
    { label: 'Tasa de respuesta a secuencia',         goal: '>8%',  hint: 'Vs. 1-2% típico en outbound frío',         icon: 'mail' },
    { label: 'Leads A/B sobre total',                  goal: '>30%', hint: 'Solo el 30% de prospectos vale tu tiempo', icon: 'target' },
    { label: 'Tiempo lead nuevo → primera reunión',    goal: '<7d',  hint: 'Del "hola" a la junta en la misma semana', icon: 'calendar' },
    { label: 'Costo por reunión agendada',             goal: '<25%', hint: 'del costo de un SDR junior',               icon: 'chart' },
  ];

  return (
    <section style={{ background: 'var(--ink-25)', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ left: -100, top: 60 }} color={LE2.mint} opacity={0.3} size={260} />
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 48, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <Eyebrow>Métricas objetivo</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(28px, 3.4vw, 44px)',
              lineHeight: 1.05, letterSpacing: '-0.03em',
              margin: '14px 0 18px', color: 'var(--fg1)',
            }}>
              Esto es lo que medimos<br/>desde el día uno.
            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--fg3)', margin: 0 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: LE2.deep, letterSpacing: '0.04em' }}>// nota: </span>
              Los números específicos de clientes se agregan cuando los pilotos entreguen datos publicables.
            </p>
          </div>

          <div style={{
            background: '#fff',
            border: '1px solid var(--border)',
            borderRadius: 24,
            overflow: 'hidden',
          }}>
            {metrics.map((m, i) => (
              <div key={m.label} style={{
                padding: '24px 28px',
                display: 'grid',
                gridTemplateColumns: '44px 1fr auto',
                gap: 22, alignItems: 'center',
                borderBottom: i < metrics.length - 1 ? '1px solid var(--border)' : 'none',
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: LE2.bg, color: LE2.deep,
                  display: 'grid', placeItems: 'center',
                }}>
                  <Icon name={m.icon} size={20} />
                </div>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg1)', marginBottom: 2 }}>{m.label}</div>
                  <div style={{ fontSize: 13, color: 'var(--fg3)' }}>{m.hint}</div>
                </div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 32, letterSpacing: '-0.025em',
                  color: LE2.deep, lineHeight: 1,
                  minWidth: 80, textAlign: 'right',
                }}>{m.goal}</div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// FIT CHECK — Tiene sentido / No es tu momento
// ============================================================
function LeFit() {
  const yes = [
    'Vendes B2B con ticket promedio mayor a $50,000 MXN',
    'Tu ciclo de venta es de 2 semanas o más',
    'Tienes al menos un vendedor que debería estar cerrando, no prospectando',
    'Operas en México, LATAM, USA o España',
  ];
  const no = [
    'Todavía no tienes definido a quién le vendes',
    'Tu producto requiere demostración en persona sin proceso digital',
    'Buscas volumen masivo sin cualificación (eso es paid media, no Lead Engine)',
  ];

  return (
    <section style={{ background: '#fff' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Para qué tipo de empresa tiene sentido</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 0', color: 'var(--fg1)',
          }}>
            Hablamos claro: ¿es para ti o no?
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <FitCol kind="yes" title="Tiene sentido si…" items={yes} />
          <FitCol kind="no"  title="Puede no ser tu momento si…" items={no} />
        </div>
      </Container>
    </section>
  );
}

function FitCol({ kind, title, items }) {
  const isYes = kind === 'yes';
  return (
    <div style={{
      background: isYes ? LE2.bg : 'var(--ink-25)',
      border: `1px solid ${isYes ? LE2.mint : 'var(--border)'}`,
      borderRadius: 24,
      padding: '32px 32px',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        marginBottom: 24,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 999,
          background: isYes ? LE2.deep : 'var(--ink-200)',
          color: '#fff',
          display: 'grid', placeItems: 'center',
        }}>
          <Icon name={isYes ? 'check' : 'arrow-right'} size={18}
            style={isYes ? {} : { transform: 'rotate(45deg)' }} />
        </div>
        <div style={{
          fontFamily: 'var(--font-heading)', fontWeight: 700,
          fontSize: 20, letterSpacing: '-0.015em',
          color: isYes ? LE2.deep : 'var(--fg2)',
        }}>{title}</div>
      </div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map(it => (
          <li key={it} style={{
            display: 'flex', alignItems: 'flex-start', gap: 12,
            paddingBottom: 12,
            borderBottom: `1px solid ${isYes ? 'rgba(0,122,133,0.15)' : 'var(--border)'}`,
          }}>
            <Icon name={isYes ? 'check' : 'arrow-right'} size={16} stroke={2.2}
              style={{
                color: isYes ? LE2.deep : 'var(--ink-400)',
                transform: isYes ? '' : 'rotate(45deg)',
                marginTop: 3, flexShrink: 0,
              }} />
            <span style={{
              fontSize: 15, lineHeight: 1.5,
              color: isYes ? 'var(--fg1)' : 'var(--fg2)',
            }}>{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

// ============================================================
// STACK
// ============================================================
function LeStack() {
  const tools = [
    { name: 'Claude',   desc: 'Anthropic · razonamiento' },
    { name: 'Apollo',   desc: 'Bases de datos B2B' },
    { name: 'Clay',     desc: 'Enriquecimiento' },
    { name: 'n8n',      desc: 'Orquestación' },
    { name: 'HubSpot',  desc: 'CRM · integración' },
    { name: 'Twilio',   desc: 'WhatsApp · SMS' },
    { name: 'LinkedIn Sales Nav', desc: 'Outreach' },
  ];

  return (
    <section style={{ background: 'var(--teal-900)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <Droplets style={{ right: -80, top: -60 }} color="rgba(130,229,197,0.2)" opacity={1} size={300} />
      <Droplets style={{ left: -120, bottom: -120 }} color="rgba(0,218,227,0.15)" opacity={1} size={360} />
      <Container style={{ padding: '88px 32px', position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56,
          alignItems: 'start',
        }}>
          <div>
            <div style={{
              fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: LE2.mint, marginBottom: 16,
            }}>Stack tecnológico</div>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(28px, 3.4vw, 44px)',
              lineHeight: 1.05, letterSpacing: '-0.03em',
              margin: '0 0 20px', color: '#fff',
            }}>
              Las herramientas.<br/>El método.<br/>El equipo.
            </h2>
            <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', margin: 0 }}>
              Tú no necesitas contratar ninguna de estas herramientas por separado.
              <br/>
              <span style={{ color: LE2.mint, fontWeight: 600 }}>FRSKO las opera como parte del servicio.</span>
            </p>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 12,
          }}>
            {tools.map(t => (
              <div key={t.name} style={{
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(130,229,197,0.18)',
                borderRadius: 14,
                padding: '16px 18px',
                transition: 'all var(--dur-base) var(--ease-out)',
              }}
                onMouseEnter={e => { e.currentTarget.style.background = 'rgba(130,229,197,0.08)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; e.currentTarget.style.transform = ''; }}>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 600,
                  fontSize: 15, color: '#fff', letterSpacing: '-0.01em',
                  marginBottom: 4,
                }}>{t.name}</div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11.5,
                  color: 'rgba(255,255,255,0.55)', letterSpacing: '0.02em',
                }}>{t.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function LeFaq() {
  const faqs = [
    {
      q: '¿Esto reemplaza a mis vendedores?',
      a: 'No. Les elimina la parte que más odian — la prospección fría y la calificación manual — para que se enfoquen en cerrar. El trato humano sigue siendo el tuyo.',
    },
    {
      q: '¿Cuánto tiempo tarda en arrancar?',
      a: 'El onboarding completo toma entre 1 y 2 semanas. En la semana 3 ya tienes los primeros leads calificados en tu CRM.',
    },
    {
      q: '¿Qué pasa si mis prospectos están en USA o España?',
      a: 'Lead Engine AI opera en inglés y español. Los mensajes se redactan en el idioma y tono adecuado para cada mercado.',
    },
    {
      q: '¿Cómo sé que los mensajes no suenan automatizados?',
      a: 'Cada mensaje se construye con datos reales del prospecto — su empresa, cargo, actividad reciente. El 90% de los destinatarios no sabe que la primera interacción la gestionó un sistema de IA.',
    },
    {
      q: '¿Cuántos leads puedo esperar al mes?',
      a: 'Depende de tu ICP y mercado. En el diagnóstico inicial estimamos el universo disponible y proyectamos un volumen realista. No prometemos números antes de entender tu caso.',
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section style={{ background: '#fff' }}>
      <Container style={{ padding: '96px 32px', maxWidth: 960 }}>
        <div style={{ marginBottom: 48, textAlign: 'center' }}>
          <Eyebrow>Preguntas frecuentes</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 0', color: 'var(--fg1)',
          }}>
            Lo que todo Director Comercial pregunta primero.
          </h2>
        </div>

        <div style={{
          background: '#fff',
          border: '1px solid var(--border)',
          borderRadius: 24,
          overflow: 'hidden',
        }}>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={f.q} style={{
                borderBottom: i < faqs.length - 1 ? '1px solid var(--border)' : 'none',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%',
                  padding: '22px 28px',
                  background: isOpen ? LE2.bg : '#fff',
                  border: 0,
                  cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                  textAlign: 'left',
                  fontFamily: 'var(--font-body)',
                  transition: 'background var(--dur-base) var(--ease-out)',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 11.5,
                      color: isOpen ? LE2.deep : 'var(--fg3)',
                      letterSpacing: '0.04em', minWidth: 28,
                    }}>{String(i + 1).padStart(2, '0')}</span>
                    <span style={{
                      fontSize: 17, fontWeight: 600,
                      color: 'var(--fg1)', letterSpacing: '-0.005em',
                    }}>{f.q}</span>
                  </div>
                  <div style={{
                    width: 32, height: 32, borderRadius: 999,
                    background: isOpen ? LE2.deep : 'var(--ink-50)',
                    color: isOpen ? '#fff' : 'var(--fg2)',
                    display: 'grid', placeItems: 'center',
                    transition: 'all var(--dur-base) var(--ease-out)',
                    transform: isOpen ? 'rotate(45deg)' : '',
                    flexShrink: 0,
                  }}>
                    <Icon name="arrow-right" size={14} style={{ transform: 'rotate(-45deg)' }} />
                  </div>
                </button>
                {isOpen && (
                  <div style={{
                    padding: '0 28px 24px 72px',
                    background: LE2.bg,
                    animation: 'leFaqIn 280ms var(--ease-out)',
                  }}>
                    <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg1)', margin: 0, maxWidth: 720 }}>
                      {f.a}
                    </p>
                  </div>
                )}
              </div>
            );
          })}
        </div>

        <style>{`
          @keyframes leFaqIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
          }
        `}</style>
      </Container>
    </section>
  );
}

// ============================================================
// FINAL CTA — ROI calculator hook
// ============================================================
function LeFinalCta({ onCta }) {
  const [sdrs, setSdrs] = React.useState(2);
  const [cost, setCost] = React.useState(25000);
  const [meetings, setMeetings] = React.useState(10);

  const monthlySpend = sdrs * cost;
  const totalMeetings = sdrs * meetings;
  const costPerMeeting = Math.round(monthlySpend / totalMeetings);
  // FRSKO ~25% of SDR cost target
  const frskoCostPerMeeting = Math.round(costPerMeeting * 0.25);
  const savings = monthlySpend - (totalMeetings * frskoCostPerMeeting);

  const fmt = n => '$' + n.toLocaleString('es-MX');

  return (
    <section id="roi" style={{
      background: `linear-gradient(160deg, ${LE2.bg} 0%, var(--cyan-50) 100%)`,
      position: 'relative', overflow: 'hidden',
    }}>
      <Droplets style={{ right: -120, top: 80 }} color={LE2.mint} opacity={0.5} size={320} />
      <Droplets style={{ left: -100, bottom: -60 }} color="var(--cyan-200)" opacity={0.4} size={280} />

      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56,
          alignItems: 'center',
        }}>
          {/* Left — copy */}
          <div>
            <Eyebrow>El número que más importa</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(34px, 4.4vw, 60px)',
              lineHeight: 1.02, letterSpacing: '-0.035em',
              margin: '14px 0 22px', color: 'var(--fg1)',
            }}>
              ¿Cuánto te cuesta<br/>
              <span style={{ color: LE2.deep }}>cada reunión de ventas</span> hoy?
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 14px', maxWidth: 480 }}>
              Si un SDR junior en México cuesta ~$25,000 MXN al mes y agenda entre 8 y 12 reuniones, cada reunión te sale en <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>más de $2,000 MXN</strong> — antes de impuestos y prestaciones.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 32px', maxWidth: 480 }}>
              Lead Engine AI puede reducir ese costo significativamente mientras aumenta el volumen.
            </p>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Solicitar demo
              </Button>
              <Button variant="ghost" size="lg" icon="chart">
                Hacer el cálculo juntos
              </Button>
            </div>
          </div>

          {/* Right — interactive ROI mini-calculator */}
          <div style={{
            background: '#fff',
            border: '1px solid var(--border)',
            borderRadius: 28,
            padding: 32,
            boxShadow: 'var(--shadow-lg)',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginBottom: 22,
            }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 12,
                color: LE2.deep, letterSpacing: '0.04em',
              }}>// calculadora rápida</div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: LE2.deep,
                padding: '4px 10px', background: LE2.bg, borderRadius: 999,
              }}>
                <Icon name="sparkles" size={11} /> En vivo
              </div>
            </div>

            <Slider label="SDRs actuales" value={sdrs} setValue={setSdrs} min={1} max={8} unit="vendedores" deep={LE2.deep} />
            <Slider label="Costo mensual por SDR" value={cost} setValue={setCost} min={15000} max={60000} step={1000} unit="MXN/mes" fmt={fmt} deep={LE2.deep} />
            <Slider label="Reuniones agendadas por SDR" value={meetings} setValue={setMeetings} min={4} max={20} unit="al mes" deep={LE2.deep} />

            <div style={{
              marginTop: 22, paddingTop: 22,
              borderTop: '1px solid var(--border)',
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
            }}>
              <div>
                <div style={{
                  fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
                  textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 4,
                }}>Costo / reunión hoy</div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 28, color: 'var(--fg1)', letterSpacing: '-0.025em',
                  lineHeight: 1,
                }}>{fmt(costPerMeeting)}</div>
              </div>
              <div>
                <div style={{
                  fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
                  textTransform: 'uppercase', color: LE2.deep, marginBottom: 4,
                }}>Con Lead Engine</div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 28, color: LE2.deep, letterSpacing: '-0.025em',
                  lineHeight: 1,
                }}>{fmt(frskoCostPerMeeting)}</div>
              </div>
            </div>

            <div style={{
              marginTop: 18, padding: '14px 18px',
              background: LE2.bg,
              borderRadius: 14,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <span style={{ fontSize: 13, color: LE2.deep, fontWeight: 600 }}>
                Ahorro mensual potencial
              </span>
              <span style={{
                fontFamily: 'var(--font-heading)', fontWeight: 700,
                fontSize: 20, color: LE2.deep, letterSpacing: '-0.02em',
              }}>{fmt(savings)} MXN</span>
            </div>

            <p style={{
              fontFamily: 'var(--font-mono)', fontSize: 10.5,
              color: 'var(--fg3)', marginTop: 14, marginBottom: 0,
              lineHeight: 1.5,
            }}>
              * Estimación basada en objetivo de costo / reunión &lt;25% del costo SDR. Tus números reales se calculan en el diagnóstico inicial.
            </p>
          </div>
        </div>
      </Container>
    </section>
  );
}

function Slider({ label, value, setValue, min, max, step = 1, unit, fmt, deep }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 8,
      }}>
        <label style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg1)' }}>{label}</label>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 13,
          fontWeight: 600, color: deep,
        }}>
          {fmt ? fmt(value) : value} <span style={{ fontWeight: 400, color: 'var(--fg3)' }}>{unit}</span>
        </span>
      </div>
      <div style={{ position: 'relative', height: 8 }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'var(--ink-100)', borderRadius: 999,
        }} />
        <div style={{
          position: 'absolute', left: 0, top: 0, bottom: 0,
          width: `${pct}%`,
          background: deep, borderRadius: 999,
          transition: 'width var(--dur-fast) var(--ease-out)',
        }} />
        <input type="range" min={min} max={max} step={step} value={value}
          onChange={e => setValue(parseInt(e.target.value))}
          style={{
            position: 'absolute', inset: 0, width: '100%',
            opacity: 0, cursor: 'pointer', margin: 0,
          }} />
        <div style={{
          position: 'absolute', left: `calc(${pct}% - 8px)`, top: -4,
          width: 16, height: 16, borderRadius: 999,
          background: '#fff', border: `3px solid ${deep}`,
          boxShadow: 'var(--shadow-sm)',
          pointerEvents: 'none',
          transition: 'left var(--dur-fast) var(--ease-out)',
        }} />
      </div>
    </div>
  );
}

Object.assign(window, { LeDeliverables, LeMetrics, LeFit, LeStack, LeFaq, LeFinalCta });