// industries-screens.jsx — Industries, ProductScreens, IntegrationsStrip (LIGHT THEME)

function BouncyIndustryCard({ data, delay }) {
  const isLarge = data.span === 8;
  return (
    <RevealOnScroll delay={delay} className={`bouncy-card-wrap ${data.span === 8 ? 'bc-span-8' : 'bc-span-4'}`}>
      <div className="bouncy-card" style={{
        position: 'relative',
        minHeight: isLarge ? 340 : 320,
        height: '100%',
        borderRadius: 'var(--card-radius, 20px)',
        background: 'rgba(255,255,255,0.78)',
        backdropFilter: 'blur(16px)',
        WebkitBackdropFilter: 'blur(16px)',
        border: '1px solid rgba(10,10,15,0.07)',
        padding: 28,
        overflow: 'hidden',
        cursor: 'pointer',
        transition: 'transform 250ms cubic-bezier(0.16, 1, 0.3, 1), border-color 250ms ease, box-shadow 250ms ease',
        boxShadow: '0 2px 8px rgba(10,10,15,0.03)',
      }}>
        {/* Tag */}
        <div style={{
          fontSize: 10.5, fontWeight: 600,
          color: 'var(--accent)',
          letterSpacing: '0.22em', textTransform: 'uppercase',
          fontFamily: "'General Sans', 'Inter', sans-serif",
          marginBottom: 14,
        }}>{data.tag}</div>

        {/* Title */}
        <h3 className="heading-display" style={{
          fontSize: isLarge ? 'clamp(22px, 2.4vw, 28px)' : 'clamp(19px, 1.9vw, 22px)',
          color: '#0A0A0F', lineHeight: 1.18,
          marginBottom: 10,
          maxWidth: isLarge ? 380 : 240,
        }}>{data.title}</h3>

        {/* Body */}
        <p style={{
          fontSize: 14, color: 'rgba(10,10,15,0.55)',
          lineHeight: 1.55,
          maxWidth: isLarge ? 360 : 220,
        }}>{data.body}</p>

        {/* Bouncy overlay — peek of the agent at work */}
        <div className="bouncy-overlay" style={{
          position: 'absolute',
          bottom: 0, left: 20, right: 20,
          top: isLarge ? 188 : 200,
          background: data.gradient,
          borderRadius: '18px 18px 0 0',
          padding: '20px 22px',
          transform: 'translateY(28px) rotate(0deg)',
          transition: 'transform 280ms cubic-bezier(0.16, 1, 0.3, 1)',
          display: 'flex',
          alignItems: 'flex-start',
          gap: 10,
        }}>
          {/* Tiny "live" dot */}
          <span style={{
            width: 6, height: 6, borderRadius: '50%',
            background: 'rgba(255,255,255,0.95)',
            marginTop: 6, flexShrink: 0,
            boxShadow: '0 0 0 3px rgba(255,255,255,0.20)',
          }}></span>
          <span style={{
            fontFamily: "'General Sans', 'Inter', sans-serif", fontSize: 13.5, fontWeight: 600,
            color: 'rgba(255,255,255,0.97)',
            lineHeight: 1.45,
            letterSpacing: '-0.01em',
          }}>{data.sample}</span>
        </div>
      </div>
    </RevealOnScroll>
  );
}

function Industries() {
  const industries = [
    {
      tag: 'Clínicas',
      title: 'Agenda, recuerda, reactiva',
      body: 'Toma la llamada, agenda en tu sistema y persigue al que no vino.',
      problems: [
        'Pacientes que no avisan que no van (no-show)',
        'Llamadas en hora pico que se pierden',
        'Creen que con otra recepcionista resuelven',
      ],
      sample: 'Cita con Dra. López · Lun 10:00 confirmada',
      gradient: 'linear-gradient(135deg, #5C9FFF 0%, #2F7DFF 100%)',
    },
    {
      tag: 'Restaurantes',
      title: 'Reservas y domicilios sin saturar al equipo',
      body: 'Atiende reservas por WhatsApp y voz, coordina domicilios, valida disponibilidad y manda confirmaciones con mapa.',
      problems: [
        'Reservas que se pierden en hora pico',
        'Domicilios mezclados con preguntas de menú',
        'Mesero atendiendo el celular en vez de las mesas',
      ],
      sample: 'Mesa para 4 · sábado 21:00 · confirmada',
      gradient: 'linear-gradient(135deg, #2F7DFF 0%, #5C5FE8 50%, #7C5CFF 100%)',
    },
    {
      tag: 'Talleres',
      title: 'Cotizaciones al instante, seguimiento incluido',
      body: 'Recibe el problema, da cotización aproximada, agenda servicio y avisa cuando está listo.',
      problems: [
        'Cotizaciones que no responden a tiempo',
        'Clientes sin saber en qué quedó su carro',
        'Pierden el seguimiento postservicio',
      ],
      sample: 'Cambio de pastillas · cotización $89 enviada',
      gradient: 'linear-gradient(135deg, #1A2547 0%, #2F4DA8 100%)',
    },
    {
      tag: 'Reposterías',
      title: 'Pedidos especiales, sin perder ninguno',
      body: 'Toma pedidos personalizados por WhatsApp, valida fechas, calcula precios y coordina el domicilio. Cada cumpleaños, organizado.',
      problems: [
        'Pedidos especiales mezclados con preguntas de precios',
        'Domicilios sin coordinar con cocina',
        'Detalles olvidados (alérgicos, color, mensaje)',
      ],
      sample: 'Torta tres leches · 30 personas · vie 4:00pm',
      gradient: 'linear-gradient(135deg, #C084FC 0%, #9D7CFF 50%, #7C5CFF 100%)',
    },
    {
      tag: 'Salones',
      title: 'Agenda 24/7 y sugiere servicios extra',
      body: 'Agenda al instante por WhatsApp y propone servicios adicionales al cierre.',
      problems: [
        'Cancelaciones de último minuto sin recuperar',
        'Estilista atendiendo el celular, no al cliente',
        'Espacios vacíos que pudieron haberse llenado',
      ],
      sample: 'Karen · corte + color · mañana 11:00',
      gradient: 'linear-gradient(135deg, #9D7CFF 0%, #7C5CFF 100%)',
    },
    {
      tag: 'Inmobiliarias',
      title: 'Filtra interesados, agenda visitas',
      body: 'Pregunta presupuesto, zona y plazos. Si califica, agenda. Si no, descarta.',
      problems: [
        'Interesados que se enfrían sin responder',
        'Agendar visitas con quien no compra',
        'No saben quién es serio y quién solo pregunta',
      ],
      sample: 'Interesado $250k · zona centro · visita lun',
      gradient: 'linear-gradient(135deg, #4D5FE5 0%, #2F4DA8 100%)',
    },
    {
      tag: 'Gimnasios',
      title: 'Bienvenida, retención y venta de paquetes',
      body: 'Da la bienvenida a nuevos, agenda primera clase y rescata a quien dejó de venir antes de que cancele.',
      problems: [
        'Socios que dejan de venir sin avisar',
        'Renovaciones perdidas por no llamar a tiempo',
        'Vendedor cierra y nadie atiende nuevos',
      ],
      sample: 'María · plan trimestral activado',
      gradient: 'linear-gradient(135deg, #38BDF8 0%, #2F7DFF 50%, #7C5CFF 100%)',
    },
  ];

  // Restaurantes activo por defecto (segunda card, gradiente cálido — atrae la mirada)
  const [activeIdx, setActiveIdx] = React.useState(1);

  return (
    <section id="industrias" className="section-pad">
      <div className="section-inner">
        <SectionHeader title="Sistemas armados para tu industria"
          sub="Cada negocio con su propio dolor. La salida no es contratar más, es montar el sistema correcto" />

        <RevealOnScroll>
          <div className="industries-expand" role="tablist">
            {industries.map((ind, i) => {
              const active = i === activeIdx;
              return (
                <div
                  key={ind.tag}
                  className={`expand-card${active ? ' active' : ''}`}
                  onMouseEnter={() => setActiveIdx(i)}
                  onClick={() => setActiveIdx(i)}
                  onFocus={() => setActiveIdx(i)}
                  tabIndex={0}
                  role="tab"
                  aria-selected={active}
                  aria-label={ind.tag}
                >
                  <div className="expand-card-bg" style={{ background: ind.gradient }} />
                  <span className="expand-card-label">{ind.tag}</span>
                  <div className="expand-card-content">
                    <div className="expand-card-tag">{ind.tag}</div>
                    <h3 className="expand-card-title">{ind.title}</h3>
                    <p className="expand-card-body">{ind.body}</p>

                    {ind.problems && (
                      <div className="expand-card-problems">
                        <div className="expand-card-problems-label">Problemas que ya tienes</div>
                        {ind.problems.map((p, k) => (
                          <div key={k} className="expand-card-problem">
                            <svg className="expand-card-problem-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                              <line x1="18" y1="6" x2="6" y2="18"/>
                              <line x1="6" y1="6" x2="18" y2="18"/>
                            </svg>
                            <span>{p}</span>
                          </div>
                        ))}
                      </div>
                    )}

                    <div className="expand-card-sample">
                      <span className="expand-card-sample-dot"></span>
                      {ind.sample}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </RevealOnScroll>
      </div>
    </section>
  );
}

function RoiCalculator() {
  // Defaults positioned to land in Scale recommendation
  const [currency, setCurrency] = React.useState('USD');
  const [msgs, setMsgs] = React.useState(100);
  const [ticketUSD, setTicketUSD] = React.useState(120); // base value always in USD

  // Industry-standard benchmarks (honest, not invented per project)
  // — ~47% of inbound messages go unanswered without a system in place
  // — ~10% of properly answered leads convert to sale (conservative B2C/B2B mix)
  const UNANSWERED_RATE = 0.47;
  const CONVERSION_RATE = 0.10;

  // Currency config
  const isCOP = currency === 'COP';
  const COP_RATE = 4000;
  const cur = isCOP
    ? { symbol: '$', code: 'COP', locale: 'es-CO', rate: COP_RATE,
        ticketMin: 10000, ticketMax: 2000000, ticketStep: 5000,
        ticketLabelMin: '$10k', ticketLabelMax: '$2M' }
    : { symbol: '$', code: 'USD', locale: 'en-US', rate: 1,
        ticketMin: 10, ticketMax: 500, ticketStep: 5,
        ticketLabelMin: '$10', ticketLabelMax: '$500' };

  const ticketDisplay = Math.round(ticketUSD * cur.rate);

  const monthlyMsgs = msgs * 30;
  const monthlyUnanswered = Math.round(monthlyMsgs * UNANSWERED_RATE);
  const monthlyLostUSD = Math.round(monthlyUnanswered * CONVERSION_RATE * ticketUSD);
  const monthlyLostDisplay = Math.round(monthlyLostUSD * cur.rate);

  // Recommend plan based on volume (default values land in Scale)
  let plan, planPriceUSD;
  if (msgs < 30) { plan = 'Starter'; planPriceUSD = 79; }
  else if (msgs < 70) { plan = 'Pro'; planPriceUSD = 99; }
  else { plan = 'Scale'; planPriceUSD = 129; }
  const planPriceDisplay = Math.round(planPriceUSD * cur.rate);

  const roi = monthlyLostUSD > 0 ? Math.round(monthlyLostUSD / planPriceUSD) : 0;
  const daysToBreakEven = monthlyLostUSD > 0
    ? Math.max(1, Math.round((planPriceUSD / monthlyLostUSD) * 30))
    : 30;

  const fmt = n => n.toLocaleString(cur.locale);
  const handleTicketChange = (newDisplayVal) => {
    setTicketUSD(newDisplayVal / cur.rate);
  };

  const labelStyle = {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
    marginBottom: 10,
  };
  const labelTitle = {
    fontSize: 13, fontWeight: 600, color: 'rgba(10,10,15,0.72)',
  };
  const labelValue = {
    fontFamily: "'Cabinet Grotesk', 'Outfit', sans-serif", fontWeight: 700,
    fontSize: 22, color: 'var(--accent)',
    letterSpacing: '-0.01em',
  };

  return (
    <section id="calculadora" className="section-pad">
      <div className="section-inner">
        <SectionHeader title="Calcula lo que estás perdiendo cada mes"
          sub="Mueve los sliders con tus números reales. Verás en tiempo real cuánto puedes recuperar" />

        <div className="roi-calc-grid">
          {/* LEFT — Inputs */}
          <RevealOnScroll>
            <div style={{
              borderRadius: 'var(--card-radius, 20px)',
              background: 'rgba(255,255,255,0.78)',
              backdropFilter: 'blur(16px)',
              WebkitBackdropFilter: 'blur(16px)',
              border: '1px solid rgba(10,10,15,0.07)',
              padding: 'clamp(28px, 4vw, 40px)',
              boxShadow: '0 2px 8px rgba(10,10,15,0.03)',
            }}>
              {/* Header row: eyebrow + currency toggle */}
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                gap: 12, marginBottom: 24, flexWrap: 'wrap',
              }}>
                <div style={{
                  fontSize: 11, fontWeight: 600,
                  color: 'rgba(10,10,15,0.40)',
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                }}>Tus números</div>
                <div style={{
                  display: 'inline-flex',
                  padding: 3, borderRadius: 999,
                  background: 'rgba(10,10,15,0.05)',
                  border: '1px solid rgba(10,10,15,0.06)',
                  gap: 2,
                }}>
                  {['USD', 'COP'].map(c => {
                    const active = currency === c;
                    return (
                      <button key={c}
                        onClick={() => setCurrency(c)}
                        style={{
                          padding: '6px 14px', borderRadius: 999,
                          border: 'none', cursor: 'pointer',
                          background: active ? '#fff' : 'transparent',
                          color: active ? 'var(--accent)' : 'rgba(10,10,15,0.50)',
                          fontFamily: "'JetBrains Mono', monospace",
                          fontSize: 11, fontWeight: 600,
                          letterSpacing: '0.06em',
                          boxShadow: active ? '0 1px 3px rgba(10,10,15,0.10)' : 'none',
                          transition: 'all 180ms ease',
                        }}>
                        {c}
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* Input 1: msgs/day */}
              <div style={{ marginBottom: 36 }}>
                <div style={labelStyle}>
                  <span style={labelTitle}>Mensajes y llamadas por día</span>
                  <span style={labelValue}>{fmt(msgs)}</span>
                </div>
                <input
                  type="range" min="10" max="300" step="5"
                  value={msgs}
                  onChange={e => setMsgs(parseInt(e.target.value, 10))}
                  className="roi-slider"
                />
                <div style={{
                  display: 'flex', justifyContent: 'space-between',
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5,
                  color: 'rgba(10,10,15,0.35)', letterSpacing: '0.04em',
                  marginTop: 8,
                }}>
                  <span>10</span><span>300</span>
                </div>
              </div>

              {/* Input 2: ticket */}
              <div style={{ marginBottom: 28 }}>
                <div style={labelStyle}>
                  <span style={labelTitle}>Ticket promedio por venta</span>
                  <span style={labelValue}>{cur.symbol}{fmt(ticketDisplay)}</span>
                </div>
                <input
                  type="range"
                  min={cur.ticketMin} max={cur.ticketMax} step={cur.ticketStep}
                  value={ticketDisplay}
                  onChange={e => handleTicketChange(parseInt(e.target.value, 10))}
                  className="roi-slider"
                />
                <div style={{
                  display: 'flex', justifyContent: 'space-between',
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5,
                  color: 'rgba(10,10,15,0.35)', letterSpacing: '0.04em',
                  marginTop: 8,
                }}>
                  <span>{cur.ticketLabelMin}</span><span>{cur.ticketLabelMax}</span>
                </div>
              </div>

              <p style={{
                fontSize: 12, color: 'rgba(10,10,15,0.42)',
                lineHeight: 1.55,
                paddingTop: 20,
                borderTop: '1px dashed rgba(10,10,15,0.10)',
              }}>
                Cálculo basado en un promedio de 47% de mensajes sin responder
                y 10% de conversión de los clientes atendidos. Estimación conservadora.
              </p>
            </div>
          </RevealOnScroll>

          {/* RIGHT — Output */}
          <RevealOnScroll delay={120}>
            <div style={{
              position: 'relative',
              borderRadius: 'var(--card-radius, 20px)',
              background: 'linear-gradient(160deg, var(--accent-a12), rgba(124,92,255,0.04))',
              border: '1px solid var(--accent-a25)',
              padding: 'clamp(28px, 4vw, 40px)',
              overflow: 'hidden',
              height: '100%',
              display: 'flex', flexDirection: 'column', gap: 28,
            }}>
              {/* Background glow */}
              <div aria-hidden style={{
                position: 'absolute', inset: '-30%',
                background: 'radial-gradient(ellipse at top right, var(--accent-a15), transparent 60%)',
                pointerEvents: 'none',
              }} />

              <div style={{ position: 'relative' }}>
                <div style={{
                  fontSize: 11, fontWeight: 600,
                  color: 'var(--accent)',
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                  marginBottom: 20,
                }}>Resultado</div>

                {/* Lost money — primary number */}
                <div style={{ marginBottom: 6, display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <div style={{
                    fontFamily: "'Cabinet Grotesk', 'Outfit', sans-serif", fontWeight: 800,
                    fontSize: 'clamp(40px, 5.5vw, 64px)',
                    color: '#0A0A0F', lineHeight: 1,
                    letterSpacing: '-0.025em',
                  }}>
                    {cur.symbol}{fmt(monthlyLostDisplay)}
                  </div>
                  <span style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 11, color: 'rgba(10,10,15,0.42)',
                    letterSpacing: '0.10em', textTransform: 'uppercase',
                  }}>{cur.code}</span>
                </div>
                <p style={{
                  fontSize: 15, color: 'rgba(10,10,15,0.62)',
                  lineHeight: 1.5,
                  maxWidth: 360,
                }}>
                  perdidos cada mes en oportunidades que nadie responde.
                </p>
              </div>

              {/* Divider */}
              <div style={{
                position: 'relative',
                height: 1, background: 'rgba(10,10,15,0.10)',
              }} />

              {/* With ALVEX block */}
              <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 8,
                  fontSize: 11, fontWeight: 600,
                  color: '#14B870',
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                }}>
                  <span style={{
                    width: 5, height: 5, borderRadius: '50%',
                    background: '#14B870',
                    boxShadow: '0 0 0 3px rgba(20,184,112,0.18)',
                  }}></span>
                  Con ALVEX
                </div>

                <div style={{
                  display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14,
                }}>
                  <div style={{
                    padding: '14px 16px', borderRadius: 12,
                    background: 'rgba(255,255,255,0.55)',
                    border: '1px solid rgba(10,10,15,0.06)',
                  }}>
                    <div style={{
                      fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5,
                      color: 'rgba(10,10,15,0.42)',
                      letterSpacing: '0.10em', textTransform: 'uppercase',
                      marginBottom: 4,
                    }}>Plan sugerido</div>
                    <div style={{
                      fontFamily: "'Cabinet Grotesk', 'Outfit', sans-serif", fontWeight: 700,
                      fontSize: 20, color: '#0A0A0F', letterSpacing: '-0.01em',
                    }}>{plan} <span style={{ color: 'rgba(10,10,15,0.40)', fontSize: 14, fontWeight: 500 }}>· {cur.symbol}{fmt(planPriceDisplay)}/mes</span></div>
                  </div>

                  <div style={{
                    padding: '14px 16px', borderRadius: 12,
                    background: 'rgba(255,255,255,0.55)',
                    border: '1px solid rgba(10,10,15,0.06)',
                  }}>
                    <div style={{
                      fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5,
                      color: 'rgba(10,10,15,0.42)',
                      letterSpacing: '0.10em', textTransform: 'uppercase',
                      marginBottom: 4,
                    }}>Se paga solo en</div>
                    <div style={{
                      fontFamily: "'Cabinet Grotesk', 'Outfit', sans-serif", fontWeight: 700,
                      fontSize: 20, color: '#0A0A0F', letterSpacing: '-0.01em',
                    }}>{daysToBreakEven} {daysToBreakEven === 1 ? 'día' : 'días'}</div>
                  </div>
                </div>

                {roi > 1 && (
                  <div style={{
                    padding: '14px 18px', borderRadius: 12,
                    background: 'var(--accent)',
                    color: '#fff',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    gap: 12,
                  }}>
                    <span style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.005em' }}>
                      Cada $1 invertido te devuelve
                    </span>
                    <span style={{
                      fontFamily: "'Cabinet Grotesk', 'Outfit', sans-serif", fontWeight: 800,
                      fontSize: 28, letterSpacing: '-0.02em',
                    }}>${roi}</span>
                  </div>
                )}
              </div>
            </div>
          </RevealOnScroll>
        </div>

        {/* CTA */}
        <RevealOnScroll delay={200}>
          <div style={{
            display: 'flex', flexWrap: 'wrap', justifyContent: 'center',
            gap: 12, marginTop: 48,
          }}>
            <a href="/register" className="btn-primary">
              Probar gratis 14 días
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
            </a>
            <a href="#pricing" className="btn-outline-light">
              Ver planes
            </a>
          </div>
        </RevealOnScroll>
      </div>
    </section>
  );
}

function IntegrationsStrip() {
  const items = ['WhatsApp', 'Google Calendar', 'Stripe', 'HubSpot', 'Notion', 'Zapier', 'Slack'];
  return (
    <section className="section-pad" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="section-inner">
        <SectionHeader title="Conecta con lo que ya usas"
          sub="WhatsApp Business, Google Calendar, tu CRM, Stripe, Notion, Zapier y más. Si tiene API, hablamos con ella" />
        <RevealOnScroll>
          <div style={{ display: 'flex', gap: 'clamp(18px, 3.5vw, 48px)', justifyContent: 'center', flexWrap: 'wrap' }}>
            {items.map(n => (
              <span key={n} style={{
                fontFamily: "'Cabinet Grotesk', 'Urbanist', sans-serif", fontWeight: 700,
                fontSize: 'clamp(13px, 1.6vw, 17px)', color: 'rgba(10,10,15,0.22)',
                transition: 'color 200ms ease', cursor: 'default',
              }}
                onMouseEnter={e => e.currentTarget.style.color = 'rgba(10,10,15,0.65)'}
                onMouseLeave={e => e.currentTarget.style.color = 'rgba(10,10,15,0.22)'}
              >{n}</span>
            ))}
          </div>
        </RevealOnScroll>
      </div>
    </section>
  );
}

Object.assign(window, { Industries, RoiCalculator, IntegrationsStrip });