// ReservAI Landing — Sections responsive
const { useState } = React;

function useIsMobile() {
  const [m, setM] = React.useState(window.innerWidth < 768);
  React.useEffect(() => {
    const h = () => setM(window.innerWidth < 768);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return m;
}

function SectionTitle({ children }) {
  const isMobile = useIsMobile();
  return (
    <h2 style={{ fontSize: isMobile ? '1.9rem' : '2.5rem', fontWeight: 700, textAlign: 'center', marginBottom: isMobile ? '2rem' : '3rem', color: '#fff', letterSpacing: '-.02em' }}>
      {children}
    </h2>
  );
}

const beneficios = [
  { icon: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z', title: 'Disponible 24/7', desc: 'Responde y agenda en cualquier momento.' },
  { icon: 'M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z', title: 'Crecimiento medible', desc: 'Más citas confirmadas, más clientes.' },
  { icon: 'M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z', title: 'Sincronizado con tu agenda', desc: 'Evita dobles reservas y errores.' },
  { icon: 'M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z', title: 'Experiencia fluida', desc: 'Conversación natural por WhatsApp.' },
  { icon: 'M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z', title: 'Menos trabajo manual', desc: 'La IA se encarga de la conversación.' },
  { icon: 'M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z', title: 'Escalable', desc: 'Para una o varias sucursales.' },
];

function Beneficios() {
  const [hovered, setHovered] = useState(null);
  const isMobile = useIsMobile();
  return (
    <section id="beneficios" style={{ padding: isMobile ? '48px 0' : '80px 0', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 20px' }}>
        <SectionTitle>Beneficios clave</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap: isMobile ? 16 : 24 }}>
          {beneficios.map((b, i) => (
            <div key={i}
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(null)}
              style={{
                background: 'rgba(255,255,255,.05)', border: `1px solid ${hovered === i ? '#0983d6' : 'rgba(255,255,255,.1)'}`,
                borderRadius: 15, padding: isMobile ? '20px 24px' : 32, textAlign: 'center', backdropFilter: 'blur(10px)',
                transition: 'all .3s ease', transform: hovered === i ? 'translateY(-5px)' : 'none',
                boxShadow: hovered === i ? '0 20px 40px rgba(9,131,214,.1)' : 'none',
                display: isMobile ? 'flex' : 'block', alignItems: isMobile ? 'center' : 'initial', gap: isMobile ? 16 : 0,
              }}>
              <div style={{ width: 48, height: 48, flexShrink: 0, margin: isMobile ? '0' : '0 auto 16px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="36" height="36" viewBox="0 0 24 24" fill="#0983d6"><path d={b.icon}/></svg>
              </div>
              <div style={{ textAlign: isMobile ? 'left' : 'center' }}>
                <h3 style={{ color: '#fff', fontSize: '1rem', fontWeight: 600, marginBottom: 4 }}>{b.title}</h3>
                <p style={{ color: '#A0A0A0', fontSize: '.88rem', lineHeight: 1.5 }}>{b.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const pasos = [
  { n: 1, title: 'Configura servicios, horarios y personal', desc: 'Define tu oferta, disponibilidad y equipo en minutos.' },
  { n: 2, title: 'Conecta WhatsApp Business y Google Calendar', desc: 'Integración simple y segura con tus herramientas actuales.' },
  { n: 3, title: 'La IA atiende, resuelve dudas y propone horarios', desc: 'Conversación inteligente que entiende las necesidades del cliente.' },
  { n: 4, title: 'El cliente confirma y la cita queda en tu calendario', desc: 'Con recordatorios automáticos para reducir faltas.' },
];

function ComoFunciona() {
  const isMobile = useIsMobile();
  return (
    <section id="como-funciona" style={{ padding: isMobile ? '48px 0' : '80px 0', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 20px' }}>
        <SectionTitle>Cómo funciona</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : 'repeat(4,1fr)', gap: isMobile ? 20 : 24 }}>
          {pasos.map(p => (
            <div key={p.n} style={{ textAlign: 'center' }}>
              <div style={{ width: 56, height: 56, background: '#0983d6', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.4rem', fontWeight: 700, color: '#fff', margin: '0 auto 16px' }}>{p.n}</div>
              <h3 style={{ color: '#fff', fontSize: '.95rem', fontWeight: 600, marginBottom: 8 }}>{p.title}</h3>
              <p style={{ color: '#A0A0A0', fontSize: '.83rem', lineHeight: 1.5 }}>{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Integraciones() {
  const [h1, setH1] = useState(false);
  const [h2, setH2] = useState(false);
  const items = [
    { label: 'WhatsApp Business', icon: 'M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488', fill: '#25D366' },
    { label: 'Google Calendar', icon: 'M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z', fill: '#0983d6' },
  ];
  const hovers = [h1, h2];
  const setters = [setH1, setH2];
  return (
    <section id="integraciones" style={{ padding: '80px 0', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 20px', textAlign: 'center' }}>
        <SectionTitle>Integraciones</SectionTitle>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 24, marginBottom: 24, flexWrap: 'wrap' }}>
          {items.map((item, i) => (
            <div key={i}
              onMouseEnter={() => setters[i](true)}
              onMouseLeave={() => setters[i](false)}
              style={{
                background: 'rgba(255,255,255,.05)', border: `1px solid ${hovers[i] ? '#0983d6' : 'rgba(255,255,255,.1)'}`,
                borderRadius: 15, padding: '28px 36px', display: 'flex', flexDirection: 'column',
                alignItems: 'center', gap: 14, transition: 'all .3s ease',
                transform: hovers[i] ? 'translateY(-5px)' : 'none',
              }}>
              <svg width="48" height="48" viewBox="0 0 24 24" fill={item.fill}><path d={item.icon}/></svg>
              <span style={{ color: '#fff', fontWeight: 600, fontSize: '1rem' }}>{item.label}</span>
            </div>
          ))}
        </div>
        <p style={{ color: '#666', fontStyle: 'italic' }}>+10 otras tecnologías que usamos.</p>
      </div>
    </section>
  );
}

function Precios({ onCTA }) {
  const plans = [
    { name: 'Plan Básico', featured: false, items: ['Soporte medio', '3 modificaciones sin costo adicional', '1 sucursal · 1 número telefónico', 'Máximo 3 agendas registradas'] },
    { name: 'Plan Pro', featured: true, badge: 'Más popular', items: ['Soporte alto', '10 modificaciones sin costo adicional', 'Máximo 4 sucursales', 'Máximo 15 agendas registradas'] },
  ];
  const [hov, setHov] = useState(null);
  const isMobile = useIsMobile();
  return (
    <section id="precios" style={{ padding: isMobile ? '48px 0' : '80px 0', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 20px' }}>
        <SectionTitle>Planes</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 24, maxWidth: isMobile ? 440 : 800, margin: '0 auto 24px' }}>
          {plans.map((p, i) => (
            <div key={i}
              onMouseEnter={() => setHov(i)}
              onMouseLeave={() => setHov(null)}
              style={{
                position: 'relative',
                background: p.featured ? 'rgba(9,131,214,.1)' : 'rgba(255,255,255,.05)',
                border: `1px solid ${p.featured || hov === i ? '#0983d6' : 'rgba(255,255,255,.1)'}`,
                borderRadius: 15, padding: 32, textAlign: 'center',
                transform: p.featured && !isMobile ? 'scale(1.03)' : hov === i ? 'translateY(-5px)' : 'none',
                transition: 'all .3s ease',
              }}>
              {p.badge && <div style={{ position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)', background: '#0983d6', color: '#fff', padding: '4px 16px', borderRadius: 20, fontSize: '.75rem', fontWeight: 600, whiteSpace: 'nowrap' }}>{p.badge}</div>}
              <h3 style={{ color: '#fff', fontSize: '1.4rem', fontWeight: 700, marginBottom: 20, marginTop: p.badge ? 8 : 0 }}>{p.name}</h3>
              <ul style={{ listStyle: 'none', padding: 0, textAlign: 'left', marginBottom: 24 }}>
                {p.items.map((item, j) => (
                  <li key={j} style={{ padding: '8px 0', color: '#A0A0A0', fontSize: '.9rem', paddingLeft: 20, position: 'relative' }}>
                    <span style={{ position: 'absolute', left: 0, color: '#0983d6', fontWeight: 700 }}>✓</span>
                    {item}
                  </li>
                ))}
              </ul>
              <button onClick={() => onCTA && onCTA('contacto')} style={{
                background: p.featured ? '#0983d6' : 'transparent', color: '#fff',
                border: p.featured ? 'none' : '2px solid #666',
                padding: '10px 24px', borderRadius: 8, fontWeight: 600, fontSize: '1rem', cursor: 'pointer',
                width: '100%',
              }}>Empezar</button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const faqData = [
  { q: '¿Cómo funciona la integración con WhatsApp?', a: 'Conectamos directamente con tu WhatsApp Business API. La IA responde automáticamente a los mensajes, resuelve dudas y propone horarios disponibles en tiempo real.' },
  { q: '¿Qué pasa si la IA no entiende una consulta?', a: 'En casos complejos, el sistema transfiere la conversación a un humano de tu equipo. La IA aprende continuamente para mejorar sus respuestas.' },
  { q: '¿Es compatible con mi sistema de gestión actual?', a: 'Sí, ReservAI se integra con Google Calendar y próximamente con otros sistemas populares.' },
  { q: '¿Cuánto tiempo toma la configuración inicial?', a: 'La configuración básica toma poco tiempo. Nuestro equipo te acompaña durante todo el proceso.' },
  { q: '¿Ofrecen soporte técnico?', a: 'Sí, todos los planes incluyen soporte. El plan Básico incluye soporte medio y el Pro incluye soporte alto con atención prioritaria.' },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  const [hov, setHov] = useState(null);
  const isMobile = useIsMobile();
  return (
    <section id="faq" style={{ padding: isMobile ? '56px 0' : '90px 0', position: 'relative' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 20px' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{
            display: 'inline-block', background: 'rgba(9,131,214,.12)', border: '1px solid rgba(9,131,214,.25)',
            borderRadius: 40, padding: '5px 14px', fontSize: '.75rem', fontWeight: 600,
            color: '#0983d6', marginBottom: 16, letterSpacing: '.06em', textTransform: 'uppercase',
          }}>Resolvemos tus dudas</div>
          <h2 style={{ fontSize: isMobile ? '1.9rem' : '2.5rem', fontWeight: 700, color: '#fff', marginBottom: 12, letterSpacing: '-.02em' }}>
            Preguntas <span style={{ color: '#0983d6' }}>frecuentes</span>
          </h2>
          <p style={{ color: '#A0A0A0', fontSize: '1rem', maxWidth: 560, margin: '0 auto', lineHeight: 1.6 }}>
            Lo que más nos preguntan los negocios antes de empezar.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 14 }}>
          {faqData.map((f, i) => {
            const isOpen = open === i;
            const isHov = hov === i;
            return (
              <div key={i}
                onMouseEnter={() => setHov(i)}
                onMouseLeave={() => setHov(null)}
                style={{
                  background: isOpen ? 'rgba(9,131,214,.08)' : 'rgba(255,255,255,.04)',
                  border: `1px solid ${isOpen ? '#0983d6' : isHov ? 'rgba(9,131,214,.4)' : 'rgba(255,255,255,.08)'}`,
                  borderRadius: 14, overflow: 'hidden',
                  transition: 'all .3s ease', backdropFilter: 'blur(10px)',
                  alignSelf: 'start',
                  boxShadow: isOpen ? '0 12px 32px rgba(9,131,214,.12)' : 'none',
                }}>
                <button onClick={() => setOpen(isOpen ? null : i)} style={{
                  width: '100%', background: 'none', border: 'none', color: '#fff',
                  padding: '18px 20px', textAlign: 'left', fontSize: '.95rem', fontWeight: 600,
                  cursor: 'pointer', fontFamily: 'inherit',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                }}>
                  <span style={{ flex: 1, lineHeight: 1.4 }}>{f.q}</span>
                  <div style={{
                    width: 28, height: 28, borderRadius: '50%', flexShrink: 0,
                    background: isOpen ? '#0983d6' : 'rgba(9,131,214,.15)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'all .3s ease',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                  }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={isOpen ? '#fff' : '#0983d6'} strokeWidth="3" strokeLinecap="round">
                      <line x1="12" y1="5" x2="12" y2="19" />
                      <line x1="5" y1="12" x2="19" y2="12" />
                    </svg>
                  </div>
                </button>
                <div style={{
                  maxHeight: isOpen ? 300 : 0, opacity: isOpen ? 1 : 0,
                  transition: 'max-height .4s ease, opacity .3s ease, padding .3s ease',
                  padding: isOpen ? '0 20px 20px' : '0 20px',
                  color: '#B8B8B8', lineHeight: 1.65, fontSize: '.9rem',
                  borderTop: isOpen ? '1px solid rgba(9,131,214,.15)' : 'none',
                  paddingTop: isOpen ? 14 : 0,
                }}>
                  {f.a}
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <p style={{ color: '#A0A0A0', fontSize: '.95rem' }}>
            ¿No encuentras tu respuesta?{' '}
            <a href="https://wa.me/523314627189?text=Hola%2C%20tengo%20una%20duda%20sobre%20ReservAI"
               target="_blank" rel="noopener noreferrer"
               style={{ color: '#0983d6', textDecoration: 'none', fontWeight: 600 }}>
              Pregúntanos por WhatsApp →
            </a>
          </p>
        </div>
      </div>
    </section>
  );
}

// =====================================================================
// Pruébalo — sección que abre WhatsApp real con el agente de prueba
// =====================================================================
const WA_NUMBER = '523313399473';

const QUICK_PROMPTS = [
  { label: 'Agendar una cita', text: 'Hola, quiero agendar una cita. ¿Qué horarios tienen disponibles?' },
  { label: 'Consultar precios', text: 'Hola, ¿me podrías dar información sobre los servicios y precios?' },
  { label: 'Probar como cliente', text: 'Hola, soy un cliente nuevo y quisiera saber cómo funciona.' },
  { label: 'Probar como negocio', text: 'Hola, tengo un negocio y me interesa ReservAI. ¿Me cuentas más?' },
];

function buildWaLink(text) {
  return `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(text)}`;
}

function Pruebalo() {
  const [custom, setCustom] = useState('');
  const [hov, setHov] = useState(null);
  const [hovMain, setHovMain] = useState(false);
  const isMobile = useIsMobile();

  const customMsg = (custom && custom.trim()) || 'Hola, quiero probar ReservAI';
  const customHref = buildWaLink(customMsg);

  const handleEnter = (e) => {
    if (e.key === 'Enter') {
      const a = document.createElement('a');
      a.href = customHref;
      a.target = '_blank';
      a.rel = 'noopener noreferrer';
      a.click();
    }
  };

  return (
    <section id="pruebalo" style={{ padding: isMobile ? '48px 0' : '80px 0', position: 'relative' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto', padding: '0 20px' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'rgba(37,211,102,.1)', border: '1px solid rgba(37,211,102,.3)',
            borderRadius: 40, padding: '6px 14px', fontSize: '.75rem',
            fontWeight: 600, color: '#25D366', marginBottom: 18,
            letterSpacing: '.06em', textTransform: 'uppercase',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#25D366', boxShadow: '0 0 8px #25D366' }} />
            Agente en vivo
          </div>
          <h2 style={{ fontSize: isMobile ? '1.9rem' : '2.5rem', fontWeight: 700, color: '#fff', marginBottom: 14, letterSpacing: '-.02em' }}>
            Pruébalo tú mismo, <span style={{ color: '#0983d6' }}>en WhatsApp real</span>
          </h2>
          <p style={{ color: '#A0A0A0', fontSize: '1rem', lineHeight: 1.6, maxWidth: 580, margin: '0 auto' }}>
            Habla directo con nuestro agente de prueba. Pregunta lo que quieras, agenda una cita,
            o pídele que te explique cómo funciona — desde tu propio WhatsApp.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.1fr .9fr', gap: 32, alignItems: 'center',
          background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.1)',
          borderRadius: 20, padding: isMobile ? 24 : 36, backdropFilter: 'blur(10px)',
        }}>
          {/* Left — Action */}
          <div>
            <h3 style={{ color: '#fff', fontSize: '1.1rem', fontWeight: 600, marginBottom: 6 }}>
              Empieza con un mensaje
            </h3>
            <p style={{ color: '#A0A0A0', fontSize: '.9rem', marginBottom: 18, lineHeight: 1.5 }}>
              Elige una sugerencia o escribe la tuya. Abrimos WhatsApp con el mensaje listo para enviar.
            </p>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 18 }}>
              {QUICK_PROMPTS.map((p, i) => (
                <a key={i}
                  href={buildWaLink(p.text)}
                  target="_blank"
                  rel="noopener noreferrer"
                  onMouseEnter={() => setHov(i)}
                  onMouseLeave={() => setHov(null)}
                  style={{
                    background: hov === i ? 'rgba(9,131,214,.18)' : 'rgba(255,255,255,.05)',
                    border: `1px solid ${hov === i ? '#0983d6' : 'rgba(255,255,255,.12)'}`,
                    color: '#fff', padding: '8px 14px', borderRadius: 20,
                    fontSize: '.82rem', fontWeight: 500, cursor: 'pointer',
                    fontFamily: 'inherit', transition: 'all .2s ease',
                    textDecoration: 'none', display: 'inline-block',
                  }}>
                  {p.label}
                </a>
              ))}
            </div>

            <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
              <input
                type="text"
                value={custom}
                onChange={(e) => setCustom(e.target.value)}
                onKeyDown={handleEnter}
                placeholder="Escribe tu mensaje…"
                style={{
                  flex: 1, background: 'rgba(0,0,0,.4)', border: '1px solid rgba(255,255,255,.15)',
                  borderRadius: 8, padding: '12px 14px', color: '#fff',
                  fontSize: '.95rem', fontFamily: 'inherit', outline: 'none',
                }}
              />
            </div>

            <a
              href={customHref}
              target="_blank"
              rel="noopener noreferrer"
              onMouseEnter={() => setHovMain(true)}
              onMouseLeave={() => setHovMain(false)}
              style={{
                width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                background: hovMain ? '#1ebe5d' : '#25D366', color: '#fff', border: 'none',
                padding: '14px 24px', borderRadius: 10, fontWeight: 700, fontSize: '1rem',
                cursor: 'pointer', fontFamily: 'inherit', transition: 'all .25s ease',
                transform: hovMain ? 'translateY(-2px)' : 'none',
                boxShadow: hovMain ? '0 12px 28px rgba(37,211,102,.35)' : '0 6px 16px rgba(37,211,102,.25)',
                textDecoration: 'none', boxSizing: 'border-box',
              }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
              </svg>
              Abrir en WhatsApp
            </a>

            <p style={{ color: '#666', fontSize: '.78rem', marginTop: 12, textAlign: 'center' }}>
              Responde un agente de prueba real ·{' '}
              <a href={customHref} target="_blank" rel="noopener noreferrer" style={{ color: '#0983d6', textDecoration: 'none', fontWeight: 600 }}>
                +52 33 1339 9473
              </a>
            </p>
            <p style={{ color: '#444', fontSize: '.72rem', marginTop: 6, textAlign: 'center' }}>
              ¿No abre? Copia el número y mándale mensaje desde tu WhatsApp.
            </p>
          </div>

          {/* Right — Phone preview (oculto en móvil) */}
          {!isMobile && (
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <div style={{ position: 'relative', width: 240 }}>
                <div style={{ position:'absolute', inset:-24, borderRadius:48, background:'radial-gradient(ellipse at 50% 50%, rgba(37,211,102,.18) 0%, transparent 70%)', pointerEvents:'none' }} />
                <div style={{
                  width: 240, height: 380, borderRadius: 32, background: '#0a0a0a',
                  border: '2px solid rgba(255,255,255,.12)',
                  boxShadow: '0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08)',
                  overflow: 'hidden', display: 'flex', flexDirection: 'column',
                }}>
                  <div style={{ background:'#075E54', padding:'12px 14px', display:'flex', alignItems:'center', gap:10, flexShrink: 0 }}>
                    <div style={{ width:36, height:36, borderRadius:'50%', background:'#128C7E', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 14, fontWeight: 700, color: '#fff' }}>R</div>
                    <div>
                      <div style={{ color:'#fff', fontSize:12, fontWeight:700 }}>ReservAI · Agente</div>
                      <div style={{ color:'#aed6be', fontSize:10 }}>en línea</div>
                    </div>
                  </div>
                  <div style={{ flex:1, background:'#ECE5DD', padding:'12px 10px', display:'flex', flexDirection:'column', gap:6, justifyContent:'flex-end' }}>
                    <div style={{ display:'flex', justifyContent:'flex-start' }}>
                      <div style={{ background:'#fff', borderRadius:'10px 10px 10px 2px', padding:'7px 11px', maxWidth:'82%', fontSize:11, color:'#111', lineHeight:1.4, boxShadow:'0 1px 2px rgba(0,0,0,.12)' }}>
                        ¡Hola! Soy ReservAI 👋 ¿En qué te ayudo hoy?
                      </div>
                    </div>
                    <div style={{ display:'flex', justifyContent:'flex-end' }}>
                      <div style={{ background:'#DCF8C6', borderRadius:'10px 10px 2px 10px', padding:'7px 11px', maxWidth:'82%', fontSize:11, color:'#111', lineHeight:1.4, boxShadow:'0 1px 2px rgba(0,0,0,.12)' }}>
                        Quiero agendar una cita mañana
                      </div>
                    </div>
                    <div style={{ display:'flex', justifyContent:'flex-start' }}>
                      <div style={{ background:'#fff', borderRadius:'10px 10px 10px 2px', padding:'7px 11px', maxWidth:'82%', fontSize:11, color:'#111', lineHeight:1.4, boxShadow:'0 1px 2px rgba(0,0,0,.12)' }}>
                        ¡Perfecto! Tengo disponible 11:00 AM, 1:30 PM y 4:00 PM. ¿Cuál prefieres?
                      </div>
                    </div>
                  </div>
                  <div style={{ background:'#F0F0F0', padding:'7px 8px', display:'flex', alignItems:'center', gap:6, flexShrink: 0 }}>
                    <div style={{ flex:1, background:'#fff', borderRadius:20, padding:'6px 10px', fontSize:10, color:'#999' }}>Mensaje</div>
                    <div style={{ width:30, height:30, borderRadius:'50%', background:'#075E54', display:'flex', alignItems:'center', justifyContent:'center' }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="#fff"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Beneficios, ComoFunciona, Integraciones, Precios, FAQ, Pruebalo });