// FAQ + Contacto + Footer — con datos reales y WhatsApp URL correcto
const WA_URL = "https://wa.me/528180213305?text=Hola%2C%20me%20interesa%20conocer%20m%C3%A1s%20sobre%20AccessToGo%20para%20mi%20fraccionamiento.%20%C2%BFMe%20pueden%20dar%20m%C3%A1s%20informaci%C3%B3n%3F";

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const { isMobile } = useBreakpoint();

  const items = [
    { q: '¿Necesito instalar hardware nuevo en mi caseta?', a: 'AccessToGo se integra con sistemas existentes en la mayoría de los casos. Cuando se requiere hardware, instalamos una cámara LPR de alta resolución compatible con la barrera o plumilla que ya tienes. No se requiere obra civil.' },
    { q: '¿Qué pasa si mi placa no es detectada?', a: 'El sistema envía una alerta al administrador y el acceso puede autorizarse manualmente desde la plataforma. Además, los residentes pueden usar el chatbot de WhatsApp como respaldo inmediato.' },
    { q: '¿Cómo registro a un visitante?', a: 'Desde WhatsApp envías el nombre y número de placa del visitante al chatbot de AccessToGo. El acceso queda autorizado por el tiempo que definas, y recibes una notificación cuando el visitante llega a la caseta.' },
    { q: '¿Qué información se guarda de cada acceso?', a: 'Fecha, hora, imagen de la placa y nombre del residente o visitante asociado. Toda la información está cifrada y es accesible únicamente por la administración autorizada de la comunidad.' },
    { q: '¿El sistema funciona si se va la luz o el internet?', a: 'Sí. Tenemos modo offline con sincronización automática. La caseta puede operar localmente y los registros se sincronizan en cuanto vuelve la conexión, sin pérdida de datos.' },
    { q: '¿Cómo se cobra el servicio?', a: 'Mensualidad según el número de casas o unidades de la comunidad, sin contratos forzosos. El precio incluye instalación, soporte 24/7, actualizaciones y el chatbot de WhatsApp.' },
  ];

  const twoCol = !isMobile;

  return (
    <Section id="faq" bg={TOKENS.bg}>
      <div style={{ display: 'grid', gridTemplateColumns: twoCol ? '0.85fr 1.4fr' : '1fr', gap: twoCol ? 72 : 36, alignItems: 'start' }}>
        <div style={{ position: twoCol ? 'sticky' : 'static', top: 100 }}>
          <Eyebrow>Preguntas frecuentes</Eyebrow>
          <h2 style={{ fontSize: isMobile ? 32 : 44, lineHeight: 1.05, letterSpacing: '-0.035em', fontWeight: 600, margin: '16px 0 16px', color: TOKENS.ink }}>
            Resolvemos tus dudas.
          </h2>
          <p style={{ fontSize: 15, lineHeight: 1.55, color: TOKENS.inkSoft, marginBottom: 24 }}>
            Si no encuentras tu respuesta, escríbenos. Respondemos en minutos en horario laboral.
          </p>
          <a href={WA_URL} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
            <Button kind="whatsapp" icon={<WhatsAppGlyph size={16} />}>Contáctanos</Button>
          </a>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: `1px solid ${TOKENS.rule}` }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', padding: `${isMobile ? 18 : 22}px 0`, background: 'transparent', border: 'none',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit', color: TOKENS.ink, gap: 16,
                }}>
                  <span style={{ fontSize: isMobile ? 15 : 17, fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.4 }}>{it.q}</span>
                  <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: '50%', border: `1px solid ${TOKENS.rule}`, background: isOpen ? TOKENS.ink : 'transparent', color: isOpen ? '#fff' : TOKENS.ink, display: 'grid', placeItems: 'center', fontSize: 18, transition: 'all 0.2s ease' }}>{isOpen ? '−' : '+'}</span>
                </button>
                <div style={{ maxHeight: isOpen ? 240 : 0, overflow: 'hidden', transition: 'max-height 0.3s ease', paddingBottom: isOpen ? 20 : 0 }}>
                  <p style={{ fontSize: 15, lineHeight: 1.65, color: TOKENS.inkSoft, margin: 0, paddingRight: isMobile ? 0 : 48 }}>{it.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </Section>
  );
}

function ContactCTA() {
  const { isMobile, isTablet } = useBreakpoint();
  const twoCol = !isMobile;

  return (
    <Section id="contacto" bg={TOKENS.bgAlt} padTop={32} padBottom={isMobile ? 64 : 100}>
      <div style={{ background: TOKENS.ink, borderRadius: isMobile ? 16 : 24, padding: isMobile ? '48px 24px' : isTablet ? '56px 40px' : '72px 60px', position: 'relative', overflow: 'hidden', color: '#fff' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.4, background: `radial-gradient(ellipse at 80% 20%, rgba(20,84,214,0.5) 0%, transparent 50%), radial-gradient(ellipse at 10% 90%, rgba(20,84,214,0.3) 0%, transparent 50%)` }}></div>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: `repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,0.03) 60px 61px)` }}></div>

        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: twoCol ? '1.3fr 1fr' : '1fr', gap: twoCol ? 48 : 36, alignItems: 'center' }}>
          <div>
            <Eyebrow color="#93C5FD">Comencemos</Eyebrow>
            <h2 style={{ fontSize: isMobile ? 32 : isTablet ? 42 : 52, lineHeight: 1.05, letterSpacing: '-0.035em', fontWeight: 600, margin: '16px 0 16px' }}>
              Moderniza el acceso vehicular en tu fraccionamiento.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.75)', margin: '0 0 32px' }}>
              Descubre cómo AccessToGo puede mejorar tu seguridad y simplificar el control de acceso en tu comunidad privada. Demostración sin compromiso.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', flexDirection: isMobile ? 'column' : 'row' }}>
              <a href={WA_URL} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
                <Button kind="whatsapp" icon={<WhatsAppGlyph size={18} />}>Contáctanos por WhatsApp</Button>
              </a>
              <a href={WA_URL} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
                <Button kind="light">Agendar demostración</Button>
              </a>
            </div>
          </div>

          <div style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 14, padding: isMobile ? '20px' : '24px 28px' }}>
            <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#93C5FD', fontWeight: 600, marginBottom: 16 }}>Otros canales</div>
            {[
              ['Correo',   'soporte@accesstogo.com'],
              ['Teléfono', '818 021 3305'],
              ['Oficina',  'Guadalupe, Nuevo León, México'],
              ['Horario',  'Lun–Vie · 9:00 a 19:00'],
            ].map(([k, v], i, arr) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: i < arr.length - 1 ? '1px solid rgba(255,255,255,0.08)' : 'none', flexWrap: 'wrap', gap: 4 }}>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>{k}</div>
                <div style={{ fontSize: 14, color: '#fff', fontWeight: 500 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

function Footer() {
  const { isMobile } = useBreakpoint();
  return (
    <footer style={{ background: TOKENS.bgAlt, borderTop: `1px solid ${TOKENS.rule}`, padding: '32px 0' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: isMobile ? '0 20px' : '0 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 16 : 0, textAlign: isMobile ? 'center' : 'left' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 26, height: 26, borderRadius: 6, background: TOKENS.ink, display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 700, fontSize: 12 }}>A</div>
          <div style={{ fontSize: 13, color: TOKENS.inkSoft }}>© 2026 AccessToGo · Guadalupe, N.L., México</div>
        </div>
        <div style={{ display: 'flex', gap: isMobile ? 16 : 24, fontSize: 13, color: TOKENS.inkSoft, flexWrap: 'wrap', justifyContent: 'center' }}>
          <a href="Nosotros.html" style={{ color: TOKENS.inkSoft, textDecoration: 'none' }}>Nosotros</a>
          <a href="Blog.html" style={{ color: TOKENS.inkSoft, textDecoration: 'none' }}>Blog</a>
          <a href="Privacidad.html" style={{ color: TOKENS.inkSoft, textDecoration: 'none' }}>Aviso de Privacidad</a>
          <a href="mailto:soporte@accesstogo.com" style={{ color: TOKENS.inkSoft, textDecoration: 'none' }}>soporte@accesstogo.com</a>
        </div>
      </div>
    </footer>
  );
}

function FloatingWhatsApp() {
  const { isMobile } = useBreakpoint();
  return (
    <a href={WA_URL} target="_blank" rel="noopener noreferrer" style={{
      position: 'fixed', bottom: isMobile ? 20 : 28, right: isMobile ? 20 : 28, zIndex: 99,
      width: isMobile ? 52 : 60, height: isMobile ? 52 : 60, borderRadius: '50%',
      background: TOKENS.whatsapp, display: 'grid', placeItems: 'center',
      boxShadow: '0 12px 28px -8px rgba(37,211,102,0.5), 0 0 0 8px rgba(37,211,102,0.15)',
      textDecoration: 'none', animation: 'pulse 2.5s ease-in-out infinite',
    }}>
      <WhatsAppGlyph size={isMobile ? 24 : 28} color="#fff" />
    </a>
  );
}

window.FAQ = FAQ;
window.ContactCTA = ContactCTA;
window.Footer = Footer;
window.FloatingWhatsApp = FloatingWhatsApp;