// WhyHomli + Cotizador + BeforeAfter

const { useState: uS3, useEffect: uE3, useRef: uR3, useMemo: uM3 } = React;

// ---------------- WhyHomli (Statement Bands) ----------------
const WHY_REASONS = [
  {
    kicker: 'Selección',
    title: 'Solo entra el 20%',
    keyword: 'el 20%',
    text: 'Antecedentes verificados, prueba técnica en sitio, entrevista personal y periodo de prueba supervisado. Solo 1 de cada 5 aspirantes pasa.',
    stat: '1 / 5',
    statLabel: 'aspirantes admitidos',
    bg: 'var(--cream)',
    accent: 'var(--coral)',
    fg: 'var(--ink)',
  },
  {
    kicker: 'Calidad',
    title: 'Tú calificas, nosotros decidimos',
    keyword: 'calificas',
    text: 'Después de cada servicio nos calificas en cuatro dimensiones. Si el promedio de un técnico baja de 4.5, sale del equipo. Tu satisfacción manda.',
    stat: '4.5',
    statLabel: 'mínimo para seguir',
    bg: 'var(--cream-2)',
    accent: 'var(--sun)',
    fg: 'var(--ink)',
  },
  {
    kicker: 'Velocidad',
    title: 'Cotización cerrada en minutos',
    keyword: 'minutos',
    text: 'Mandas un mensaje describiendo lo que necesitas. Recibes precio cerrado por WhatsApp en menos de quince minutos. Sin formularios, sin llamadas obligatorias.',
    stat: '15 min',
    statLabel: 'tiempo de respuesta',
    bg: 'var(--coral-whisper)',
    accent: 'var(--coral-deep)',
    fg: 'var(--ink)',
  },
  {
    kicker: 'Garantía',
    title: 'Si no quedó bien, volvemos',
    keyword: 'volvemos',
    text: 'Tienes 48 horas para reportar cualquier detalle. Volvemos sin costo, sin discusión, sin letra pequeña. Lo arreglamos hasta que estés satisfecho.',
    stat: '48 h',
    statLabel: 'garantía total',
    bg: 'var(--cream)',
    accent: 'var(--sage)',
    fg: 'var(--ink)',
  },
  {
    kicker: 'Continuidad',
    title: 'El mismo equipo, siempre',
    keyword: 'siempre',
    text: 'En servicios recurrentes asignamos el mismo equipo. Conocen tu casa, tus preferencias, cómo te gusta que te dejen las cosas. Confianza que se construye.',
    stat: '92%',
    statLabel: 'pide el mismo equipo',
    bg: 'var(--cream-2)',
    accent: 'var(--coral)',
    fg: 'var(--ink)',
  },
  {
    kicker: 'Transparencia',
    title: 'Precio cerrado, cero sorpresas',
    keyword: 'cero sorpresas',
    text: 'El precio que te decimos es el que pagas. Sin cargos ocultos, sin imprevistos inventados. Si algo cambia, te avisamos y decides tú.',
    stat: '$0',
    statLabel: 'sorpresas en la cuenta',
    bg: 'var(--ink)',
    accent: 'var(--coral)',
    fg: 'var(--cream)',
  },
];

function ReasonIcon({ kind, color = 'currentColor', size = 20 }) {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: color, strokeWidth: 1.8,
    strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  switch (kind) {
    case 'Selección':
      return (<svg {...props}><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>);
    case 'Calidad':
      return (<svg {...props}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>);
    case 'Velocidad':
      return (<svg {...props}><polygon points="13 2 4 14 12 14 11 22 20 10 12 10 13 2"/></svg>);
    case 'Garantía':
      return (<svg {...props}><path d="M12 2L3 7v6c0 5.5 3.5 10 9 11 5.5-1 9-5.5 9-11V7l-9-5z"/><path d="M9 12l2 2 4-4"/></svg>);
    case 'Continuidad':
      return (<svg {...props}><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>);
    case 'Transparencia':
      return (<svg {...props}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>);
    default:
      return null;
  }
}

function WhyHomli() {
  return (
    <section id="sec-2" style={{ padding: '120px 32px', background: 'var(--cream)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        {/* HEADER */}
        <div className="why-header" style={{
          display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 64,
          alignItems: 'end', marginBottom: 48,
        }}>
          <div>
            <Reveal>
              <div style={{
                display: 'inline-block', padding: '4px 12px',
                background: 'var(--coral-whisper)', color: 'var(--coral-deep)',
                borderRadius: 999, fontSize: 12, fontWeight: 500, marginBottom: 24,
              }}>Por qué Homli</div>
            </Reveal>
            <Reveal delay={100}>
              <h2 style={{
                fontFamily: 'var(--font-display)', fontSize: 'clamp(38px, 5.2vw, 60px)',
                fontWeight: 400, lineHeight: 1.02, letterSpacing: '-0.03em',
              }}>
                Seis principios, <em style={{ fontStyle: 'italic', color: 'var(--coral)' }}>cero promesas vacías</em>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <p style={{ fontSize: 16, color: 'var(--mute)', lineHeight: 1.6 }}>
              Esto es lo que nos hace diferentes. No son slogans, son acuerdos contigo, medibles, con consecuencias reales si no los cumplimos.
            </p>
          </Reveal>
        </div>

        {/* STATS BAND: 6 cells, icon + stat + label */}
        <div className="why-band" style={{
          background: 'var(--cream-2)',
          border: '1px solid var(--line)',
          borderRadius: 20,
          padding: '24px 4px',
          marginBottom: 16,
          display: 'grid',
          gridTemplateColumns: 'repeat(6, 1fr)',
          gap: 0,
        }}>
          {WHY_REASONS.map((r, i) => (
            <StatPill key={i} r={r} index={i}/>
          ))}
        </div>

        {/* CARDS: 3×2 detailed */}
        <div className="why-cards" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16,
        }}>
          {WHY_REASONS.map((r, i) => (
            <PrincipleCard key={i} r={r} index={i}/>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .why-header { grid-template-columns: 1fr !important; gap: 24px !important; }
          .why-band { grid-template-columns: repeat(3, 1fr) !important; padding: 18px 4px !important; }
          .why-band > div:nth-child(3) { border-right: none !important; }
          .why-cards { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 600px) {
          .why-band { grid-template-columns: repeat(2, 1fr) !important; }
          .why-band > div { border-right: none !important; }
          .why-cards { grid-template-columns: 1fr !important; }
          .statpill { padding: 8px 10px !important; gap: 10px !important; }
          .statpill-label { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
        }
      `}</style>
    </section>
  );
}

function StatPill({ r, index }) {
  const [ref, inView] = useInView();
  const [hover, setHover] = uS3(false);
  return (
    <div ref={ref} className="statpill"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: '8px 18px',
        borderRight: index < 5 ? '1px solid var(--line)' : 'none',
        display: 'flex', alignItems: 'center', gap: 14,
        minWidth: 0,
        cursor: 'default',
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0)' : 'translateY(16px)',
        transition: 'opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)',
        transitionDelay: `${index * 80}ms`,
      }}>
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: hover ? r.accent : `${r.accent}1F`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'background 0.2s ease, transform 0.2s ease',
        transform: hover ? 'scale(1.06)' : 'scale(1)',
        flexShrink: 0,
      }}>
        <ReasonIcon kind={r.kicker} color={hover ? 'white' : r.accent} size={20}/>
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{
          fontFamily: 'var(--font-price)', fontStyle: 'italic',
          fontSize: 22, fontWeight: 500,
          color: r.accent, letterSpacing: '-0.02em', lineHeight: 1.05,
        }}>{r.stat}</div>
        <div className="statpill-label" style={{
          fontSize: 11, color: 'var(--mute)',
          marginTop: 2, lineHeight: 1.3,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>{r.statLabel}</div>
      </div>
    </div>
  );
}

function PrincipleCard({ r, index }) {
  const [ref, inView] = useInView();
  const [hover, setHover] = uS3(false);
  const renderTitle = () => {
    if (!r.keyword) return r.title;
    const parts = r.title.split(r.keyword);
    return (<>{parts[0]}<em style={{ fontStyle: 'italic', color: r.accent }}>{r.keyword}</em>{parts[1]}</>);
  };
  return (
    <div ref={ref}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--cream)',
        border: `1px solid ${hover ? r.accent : 'var(--line)'}`,
        borderRadius: 18,
        padding: 28,
        position: 'relative',
        overflow: 'hidden',
        transition: inView
          ? 'border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease'
          : 'opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)',
        transform: inView
          ? (hover ? 'translateY(-4px)' : 'translateY(0)')
          : 'translateY(24px)',
        opacity: inView ? 1 : 0,
        transitionDelay: inView ? '0ms' : `${(index % 3) * 90 + Math.floor(index / 3) * 60 + 200}ms`,
        boxShadow: hover ? 'var(--shadow-lift)' : 'none',
      }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 3,
        background: r.accent,
        transform: hover ? 'scaleX(1)' : 'scaleX(0)',
        transformOrigin: 'left',
        transition: 'transform 0.25s ease',
      }}/>
      <div style={{
        fontSize: 12, color: r.accent,
        marginBottom: 14, fontWeight: 500,
      }}>{String(index + 1).padStart(2, '0')}  {r.kicker}</div>
      <h3 style={{
        fontFamily: 'var(--font-display)', fontSize: 22,
        fontWeight: 400, lineHeight: 1.15, letterSpacing: '-0.02em',
        marginBottom: 12, color: 'var(--ink)',
      }}>{renderTitle()}</h3>
      <p style={{
        fontSize: 14, color: 'var(--mute)', lineHeight: 1.55,
      }}>{r.text}</p>
    </div>
  );
}

// ---------------- Cotizador ----------------
// Solo muestra servicios con inputs interactivos (jornada o m²). Los servicios
// "visita + cotización" no entran porque no hay nada que el usuario pueda variar.
const COTIZABLE_SERVICES = SERVICES.filter(s =>
  s.pricing && (s.pricing.type === 'jornada' || s.pricing.type === 'm2')
);

const MEDIA_JORNADA_FACTOR = 0.65;

function Cotizador({ onWhatsapp }) {
  const [serviceId, setServiceId] = uS3(COTIZABLE_SERVICES[0]?.id || 'limpieza-regular');
  const [jornada, setJornada] = uS3('completa');
  const [m2, setM2] = uS3(15);
  const [frequency, setFrequency] = uS3('unico');

  const service = uM3(() => SERVICES.find(s => s.id === serviceId), [serviceId]);
  const pricing = service?.pricing || { type: 'jornada', jornadaCompleta: 110000 };

  uE3(() => {
    if (pricing.type === 'm2') {
      setM2(pricing.m2Default || 15);
    }
  }, [serviceId]);

  const priceInfo = uM3(() => {
    if (pricing.type === 'jornada') {
      const completaPrice = pricing.jornadaCompleta;
      const basePrice = jornada === 'media'
        ? Math.round(completaPrice * MEDIA_JORNADA_FACTOR)
        : completaPrice;
      const freqFactor = (pricing.hasFrequency && frequency === 'semanal') ? 0.85
        : (pricing.hasFrequency && frequency === 'quincenal') ? 0.92
        : (pricing.hasFrequency && frequency === 'mensual') ? 0.97
        : 1;
      const price = Math.round(basePrice * freqFactor);
      const savings = Math.round(basePrice - price);
      return {
        price,
        savings,
        label: jornada === 'media' ? 'Media jornada' : 'Jornada completa',
        sublabel: (pricing.hasFrequency && frequency !== 'unico') ? `plan ${frequency}` : null,
        note: pricing.note,
      };
    }
    return {
      price: m2 * pricing.porM2,
      savings: 0,
      label: `${m2.toLocaleString('es-CO')} m²`,
      sublabel: null,
      note: pricing.note,
    };
  }, [pricing, jornada, m2, frequency]);

  return (
    <section id="sec-3" style={{ padding: '120px 32px', background: 'var(--cream)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ maxWidth: 680, marginBottom: 56 }}>
          <Reveal><div style={{ display: 'inline-block', padding: '4px 12px', background: 'var(--coral-whisper)', color: 'var(--coral-deep)', borderRadius: 999, fontSize: 12, fontWeight: 500, marginBottom: 20 }}>Cotizador</div></Reveal>
          <Reveal delay={100}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 500, lineHeight: 1.02, letterSpacing: '-0.03em', marginBottom: 16 }}>
              Un estimado <em style={{ fontStyle: 'italic', color: 'var(--coral)' }}>ahora mismo</em>.
            </h2>
          </Reveal>
          <Reveal delay={200}><p style={{ fontSize: 17, color: 'var(--mute)', lineHeight: 1.5 }}>Elegí el servicio y te decimos el punto de partida. El precio final se cierra por WhatsApp en minutos.</p></Reveal>
        </div>

        <div style={{
          background: 'var(--cream)', border: '1px solid var(--line)',
          borderRadius: 28, overflow: 'hidden', boxShadow: 'var(--shadow-lift)',
          display: 'grid', gridTemplateColumns: '1fr 1fr',
        }} className="cot-grid">
          {/* LEFT column: inputs */}
          <div style={{ padding: 40 }}>
            <div style={{ marginBottom: 28 }}>
              <label style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--mute)', fontWeight: 600 }}>Servicio</label>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, marginTop: 10 }}>
                {COTIZABLE_SERVICES.map(s => (
                  <button key={s.id} onClick={() => setServiceId(s.id)}
                    style={{
                      padding: '12px 14px', borderRadius: 12, textAlign: 'left',
                      background: serviceId === s.id ? 'var(--ink)' : 'transparent',
                      color: serviceId === s.id ? 'var(--cream)' : 'var(--ink)',
                      border: `1px solid ${serviceId === s.id ? 'var(--ink)' : 'var(--line-2)'}`,
                      cursor: 'pointer', fontSize: 13, fontWeight: 500,
                      fontFamily: 'var(--font-body)', transition: 'all 0.2s',
                    }}>{s.shortTitle || s.title}</button>
                ))}
              </div>
            </div>

            {/* JORNADA: media/completa + info + (opcional) frecuencia */}
            {pricing.type === 'jornada' && (
              <>
                <div style={{ marginBottom: 24 }}>
                  <label style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--mute)', fontWeight: 600 }}>Duración</label>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 10 }}>
                    {[
                      { id: 'media', l: 'Media jornada', s: '~4 h', price: Math.round(pricing.jornadaCompleta * MEDIA_JORNADA_FACTOR) },
                      { id: 'completa', l: 'Jornada completa', s: '~8 h', price: pricing.jornadaCompleta },
                    ].map(j => (
                      <button key={j.id} onClick={() => setJornada(j.id)}
                        style={{
                          padding: '12px 14px', borderRadius: 12, textAlign: 'left',
                          background: jornada === j.id ? 'var(--ink)' : 'transparent',
                          color: jornada === j.id ? 'var(--cream)' : 'var(--ink)',
                          border: `1px solid ${jornada === j.id ? 'var(--ink)' : 'var(--line-2)'}`,
                          cursor: 'pointer', fontSize: 13, fontWeight: 500,
                          fontFamily: 'var(--font-body)', transition: 'all 0.2s',
                        }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                          <span>{j.l}</span>
                          <span style={{ fontSize: 11, opacity: 0.65 }}>{j.s}</span>
                        </div>
                        <div style={{
                          fontFamily: 'var(--font-price)', fontStyle: 'italic',
                          fontSize: 18, fontWeight: 500, marginTop: 4,
                          color: jornada === j.id ? 'var(--cream)' : 'var(--ink)',
                          letterSpacing: '-0.01em',
                        }}>${j.price.toLocaleString('es-CO')}</div>
                      </button>
                    ))}
                  </div>
                </div>

                {pricing.note && (
                  <div style={{
                    padding: '12px 14px', background: 'var(--cream-2)',
                    borderRadius: 10, border: '1px solid var(--line)',
                    marginBottom: pricing.hasFrequency ? 24 : 0,
                  }}>
                    <p style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5, margin: 0 }}>
                      {pricing.note}
                    </p>
                  </div>
                )}

                {pricing.hasFrequency && (
                  <div>
                    <label style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--mute)', fontWeight: 600 }}>Frecuencia</label>
                    <div className="cot-freq" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6, marginTop: 10 }}>
                      {[
                        { id: 'semanal', l: 'Semanal', s: '−15%' },
                        { id: 'quincenal', l: 'Quincenal', s: '−8%' },
                        { id: 'mensual', l: 'Mensual', s: '−3%' },
                        { id: 'unico', l: 'Único', s: null },
                      ].map(f => (
                        <button key={f.id} onClick={() => setFrequency(f.id)}
                          style={{
                            padding: 12, borderRadius: 12,
                            background: frequency === f.id ? 'var(--coral)' : 'transparent',
                            color: frequency === f.id ? 'white' : 'var(--ink)',
                            border: `1px solid ${frequency === f.id ? 'var(--coral)' : 'var(--line-2)'}`,
                            cursor: 'pointer', fontSize: 12, fontWeight: 500,
                            fontFamily: 'var(--font-body)', transition: 'all 0.2s',
                          }}>
                          <div>{f.l}</div>
                          {f.s && <div style={{ fontSize: 10, opacity: 0.85, marginTop: 2 }}>{f.s}</div>}
                        </button>
                      ))}
                    </div>
                  </div>
                )}
              </>
            )}

            {/* M²: slider con rango por servicio */}
            {pricing.type === 'm2' && (
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
                  <label style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--mute)', fontWeight: 600 }}>
                    {serviceId === 'cortinas' ? 'Área a instalar' : 'Área de la obra'}
                  </label>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.02em' }}>{m2.toLocaleString('es-CO')} m²</span>
                </div>
                <input type="range"
                  min={pricing.m2Min || 3}
                  max={pricing.m2Max || 80}
                  step={pricing.m2Step || 1}
                  value={m2}
                  onChange={e => setM2(+e.target.value)}
                  onInput={e => setM2(+e.target.value)}
                  style={{
                    width: '100%', accentColor: 'var(--coral)', cursor: 'pointer',
                    position: 'relative', zIndex: 1, touchAction: 'manipulation',
                    WebkitAppearance: 'auto',
                  }}/>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4, fontSize: 11, color: 'var(--mute-2)' }}>
                  {serviceId === 'cortinas'
                    ? (<><span>Cortina pequeña</span><span>Ventanal grande</span></>)
                    : (<><span>Cuarto / oficina pequeña</span><span>Bodega grande</span></>)}
                </div>
              </div>
            )}

            {/* Disclaimer prominente: servicios con visita 90K */}
            <div style={{
              marginTop: 28,
              padding: '16px 18px',
              background: 'var(--coral-whisper)',
              border: '1px solid var(--coral-soft)',
              borderRadius: 14,
              display: 'flex', alignItems: 'flex-start', gap: 14,
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: '50%',
                background: 'var(--coral)', color: 'white',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 15, fontWeight: 600, flexShrink: 0,
                fontFamily: 'var(--font-price)', fontStyle: 'italic',
                lineHeight: 1,
              }}>i</div>
              <div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 400,
                  letterSpacing: '-0.01em', color: 'var(--ink)', marginBottom: 6, lineHeight: 1.2,
                }}>
                  Visita técnica: <em style={{ fontStyle: 'italic', color: 'var(--coral)' }}>$90.000 COP</em>
                </div>
                <p style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5, margin: 0 }}>
                  Para fontanería, cerrajería, electricidad, carpintería, fumigación y jardinería cobramos esa visita por el diagnóstico en sitio. <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>Ese valor se descuenta del precio final</strong> cuando aceptás la cotización.
                </p>
              </div>
            </div>
          </div>

          {/* RIGHT column: output */}
          <div style={{
            padding: 40, background: 'var(--ink)', color: 'var(--cream)',
            position: 'relative', overflow: 'hidden',
            display: 'flex', flexDirection: 'column', justifyContent: 'center',
          }}>
            <div aria-hidden style={{ position: 'absolute', top: -80, right: -80, width: 260, height: 260, background: 'radial-gradient(circle, rgba(236,106,77,0.4), transparent 60%)', filter: 'blur(40px)' }}/>
            <div style={{ position: 'relative' }}>
              <div style={{ fontSize: 12, color: 'rgba(250,246,242,0.6)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.1em' }}>Tu estimado</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
                <span style={{
                  fontFamily: 'var(--font-price)', fontStyle: 'italic',
                  fontSize: 'clamp(48px, 5.4vw, 68px)', fontWeight: 500,
                  letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--cream)',
                }}>${priceInfo.price.toLocaleString('es-CO')}</span>
                <span style={{
                  fontSize: 15, color: 'rgba(250,246,242,0.5)',
                  fontWeight: 500, fontFamily: 'var(--font-body)',
                  letterSpacing: '0.08em',
                }}>COP</span>
              </div>
              <div style={{ fontSize: 14, color: 'rgba(250,246,242,0.6)', marginTop: 8 }}>
                {priceInfo.label}{priceInfo.sublabel ? `, ${priceInfo.sublabel}` : ''}
              </div>
              {priceInfo.savings > 0 && (
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 16,
                  padding: '6px 12px', background: 'rgba(139,168,136,0.15)', color: '#B8D4B5',
                  borderRadius: 999, fontSize: 12, fontWeight: 500,
                }}>Ahorras ${priceInfo.savings.toLocaleString('es-CO')} vs. único</div>
              )}
              {priceInfo.note && (
                <p style={{
                  marginTop: 18, fontSize: 13, fontStyle: 'italic',
                  color: 'rgba(250,246,242,0.6)', lineHeight: 1.5,
                  paddingTop: 16, borderTop: '1px solid rgba(250,246,242,0.12)',
                  margin: '18px 0 0',
                }}>{priceInfo.note}</p>
              )}
              <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.1)' }}>
                <ul style={{ listStyle: 'none', display: 'grid', gap: 10, marginBottom: 24 }}>
                  {['Técnico verificado', 'Precio cerrado antes de empezar', 'Garantía 48 h'].map((t, i) => (
                    <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: 'rgba(250,246,242,0.85)' }}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--coral)" strokeWidth="2.5" strokeLinecap="round"><path d="M20 6L9 17l-5-5"/></svg>
                      {t}
                    </li>
                  ))}
                </ul>
                <button onClick={onWhatsapp} style={{
                  width: '100%', padding: '16px 20px',
                  background: 'var(--coral)', color: 'white', border: 'none',
                  borderRadius: 14, fontSize: 15, fontWeight: 500, cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                  fontFamily: 'var(--font-body)', boxShadow: '0 10px 30px -8px rgba(236,106,77,0.5)',
                  transition: 'transform 0.2s',
                }}
                onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.02)'}
                onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}>
                  Cerrar por WhatsApp
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .cot-grid > div { min-width: 0; }
        @media (max-width: 860px) { .cot-grid { grid-template-columns: 1fr !important; } }
        @media (max-width: 600px) {
          .cot-grid > div { padding: 22px !important; }
          .cot-freq { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </section>
  );
}

// ---------------- Before / After (real photos) ----------------
function BeforeAfter() {
  const [pos, setPos] = uS3(50);
  const [ref, inView] = useInView();
  const containerRef = uR3(null);
  const drag = uR3(false);
  const invited = uR3(false);

  const handle = (e) => {
    if (!containerRef.current) return;
    const rect = containerRef.current.getBoundingClientRect();
    const x = ((e.touches ? e.touches[0].clientX : e.clientX) - rect.left) / rect.width * 100;
    setPos(Math.max(0, Math.min(100, x)));
  };

  // Invitation animation: 50 -> 30 -> 70 -> 50 over 2.4s
  uE3(() => {
    if (!inView || invited.current) return;
    invited.current = true;
    const start = performance.now();
    const dur = 2400;
    const ease = (t) => t < 0.5 ? 2*t*t : 1 - Math.pow(-2*t + 2, 2) / 2;
    const step = (now) => {
      const t = Math.min(1, (now - start) / dur);
      const e = ease(t);
      let v;
      if (e < 1/3) v = 50 + (30 - 50) * (e * 3);
      else if (e < 2/3) v = 30 + (70 - 30) * ((e - 1/3) * 3);
      else v = 70 + (50 - 70) * ((e - 2/3) * 3);
      setPos(v);
      if (t < 1 && !drag.current) requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
  }, [inView]);

  uE3(() => {
    const up = () => drag.current = false;
    const move = (e) => { if (drag.current) handle(e); };
    window.addEventListener('mouseup', up);
    window.addEventListener('mousemove', move);
    window.addEventListener('touchend', up);
    window.addEventListener('touchmove', move);
    return () => {
      window.removeEventListener('mouseup', up);
      window.removeEventListener('mousemove', move);
      window.removeEventListener('touchend', up);
      window.removeEventListener('touchmove', move);
    };
  }, []);

  const imgStyle = {
    width: '100%', height: '100%', objectFit: 'cover',
    objectPosition: 'center 55%', display: 'block',
  };

  return (
    <section ref={ref} style={{ padding: '120px 32px 64px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ maxWidth: 680, marginBottom: 48 }}>
          <Reveal><div style={{ display: 'inline-block', padding: '4px 12px', background: 'var(--coral-whisper)', color: 'var(--coral-deep)', borderRadius: 999, fontSize: 12, fontWeight: 500, marginBottom: 20 }}>Resultados reales</div></Reveal>
          <Reveal delay={100}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 5vw, 56px)', fontWeight: 500, lineHeight: 1.02, letterSpacing: '-0.03em', marginBottom: 16 }}>
              Arrastra y <em style={{ fontStyle: 'italic', color: 'var(--coral)' }}>compruébalo</em>.
            </h2>
          </Reveal>
        </div>

        <div ref={containerRef}
          onMouseDown={(e) => { drag.current = true; handle(e); }}
          onTouchStart={(e) => { drag.current = true; handle(e); }}
          style={{
            position: 'relative', width: '100%', aspectRatio: '16/9',
            borderRadius: 28, overflow: 'hidden', cursor: 'ew-resize',
            boxShadow: '0 4px 8px rgba(0,0,0,0.04), 0 24px 48px -12px rgba(0,0,0,0.18)',
            userSelect: 'none', background: 'var(--cream-2)',
            touchAction: 'pan-y',
          }}>
          {/* AFTER: base layer */}
          <img src="uploads/sala_ordenada.jpg" alt="Sala impecable después del servicio Homli"
            style={{ position: 'absolute', inset: 0, ...imgStyle }} draggable="false"/>
          {/* BEFORE: clipped on top */}
          <div style={{
            position: 'absolute', inset: 0,
            clipPath: `polygon(0 0, ${pos}% 0, ${pos}% 100%, 0 100%)`,
          }}>
            <img src="uploads/Sala_antes.png" alt="La misma sala antes, desordenada"
              style={imgStyle} draggable="false"/>
          </div>

          {/* Tag ANTES */}
          <div style={{
            position: 'absolute', top: 20, left: 20,
            padding: '6px 14px', background: 'rgba(26,20,16,0.78)',
            color: 'var(--cream)', borderRadius: 999,
            fontSize: 11, letterSpacing: '0.1em', fontWeight: 600,
            backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
          }}>ANTES</div>

          {/* Tag DESPUÉS */}
          <div style={{
            position: 'absolute', top: 20, right: 20,
            padding: '6px 14px', background: 'var(--coral)',
            color: 'white', borderRadius: 999,
            fontSize: 11, letterSpacing: '0.1em', fontWeight: 600,
            display: 'flex', alignItems: 'center', gap: 4,
          }}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="var(--sun)">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
            DESPUÉS
          </div>

          {/* Watermark */}
          <div style={{
            position: 'absolute', bottom: 16, right: 16,
            fontSize: 10, color: 'rgba(255,255,255,0.55)',
            fontWeight: 500, letterSpacing: '0.04em', zIndex: 3,
          }}>homli.co</div>

          {/* Divider + handle */}
          <div style={{
            position: 'absolute', top: 0, bottom: 0, left: `${pos}%`,
            width: 2, background: 'var(--coral)', transform: 'translateX(-50%)',
            boxShadow: '0 0 0 2px rgba(0,0,0,0.06)', zIndex: 2,
          }}>
            <div style={{
              position: 'absolute', top: '50%', left: '50%',
              transform: 'translate(-50%, -50%)',
              width: 52, height: 52, borderRadius: '50%',
              background: 'var(--cream)', border: '2px solid var(--coral)',
              boxShadow: 'var(--shadow-lift)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'ew-resize', gap: 2,
            }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--coral)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 18l-6-6 6-6"/>
              </svg>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--coral)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M15 6l6 6-6 6"/>
              </svg>
            </div>
          </div>
        </div>

        {/* Bottom band */}
        <div style={{
          marginTop: 16, textAlign: 'center',
          fontSize: 13, color: 'var(--mute)', fontWeight: 400,
        }}>Una jornada de servicio Homli</div>
      </div>
    </section>
  );
}

Object.assign(window, { WhyHomli, Cotizador, BeforeAfter });