// FAQ + CTA + Footer + WhatsApp FAB

const { useState: uS4, useEffect: uE4 } = React;

// ---------------- FAQ (unchanged) ----------------
function FAQ() {
  const [open, setOpen] = uS4(0);
  const items = [
    { q: '¿Cómo saben que puedo confiar en el técnico que llega a mi casa?', a: 'Verificación en 5 pasos: entrevista, antecedentes judiciales, pruebas técnicas, entrenamiento Homli y evaluación continua. Rechazamos al 80% de los aspirantes.' },
    { q: '¿Cuánto tardan en responder por WhatsApp?', a: 'En promedio, menos de 15 minutos de 6 am a 10 pm. Para urgencias (fugas, apertura de puertas), hay canal 24/7.' },
    { q: '¿Qué pasa si no quedo satisfecho con el servicio?', a: 'Tienes 48 horas para reportar cualquier inconformidad. Volvemos sin costo o te devolvemos el dinero. Sin letra pequeña.' },
    { q: '¿Los insumos de limpieza están incluidos?', a: 'Sí. Productos biodegradables propios y equipos. Si prefieres que usemos los tuyos, solo avisa.' },
    { q: '¿Puedo agendar la misma persona cada semana?', a: 'Claro. En planes semanales y quincenales asignamos el mismo equipo para que conozca tu casa y tus preferencias.' },
    { q: '¿Trabajan festivos y domingos?', a: 'Sí, con recargo del 15%. Urgencias de fontanería, cerrajería y electricidad sin recargo adicional.' },
    { q: '¿Cómo se paga?', a: 'Transferencia, Nequi, Daviplata o tarjeta. Al finalizar el servicio, cuando tú confirmas que todo está bien.' },
  ];
  return (
    <section id="faq" style={{ padding: '120px 32px' }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, textAlign: 'center' }}>
          <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 }}>Preguntas frecuentes</div></Reveal>
          <Reveal delay={100}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 4.5vw, 48px)', fontWeight: 500, lineHeight: 1.04, letterSpacing: '-0.03em' }}>
              Lo que casi siempre nos <em style={{ fontStyle: 'italic', color: 'var(--coral)' }}>preguntan</em>.
            </h2>
          </Reveal>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {items.map((it, i) => (
            <div key={i} onClick={() => setOpen(open === i ? -1 : i)}
              style={{
                background: 'var(--cream)',
                border: `1px solid ${open === i ? 'var(--ink)' : 'var(--line)'}`,
                borderRadius: 18, padding: '18px 22px', cursor: 'pointer', transition: 'all 0.3s',
              }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.3 }}>{it.q}</h3>
                <div style={{
                  width: 28, height: 28, borderRadius: '50%',
                  background: open === i ? 'var(--coral)' : 'var(--cream-2)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, transition: 'all 0.3s',
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                }}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={open === i ? 'white' : 'var(--ink)'} strokeWidth="2.5" strokeLinecap="round">
                    <path d="M12 5v14M5 12h14"/>
                  </svg>
                </div>
              </div>
              <div style={{ maxHeight: open === i ? 200 : 0, overflow: 'hidden', transition: 'max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1)' }}>
                <p style={{ fontSize: 15, color: 'var(--mute)', lineHeight: 1.55, paddingTop: 14 }}>{it.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onWhatsapp }) {
  return (
    <section style={{ padding: '120px 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          position: 'relative', overflow: 'hidden',
          background: 'var(--ink)', borderRadius: 32, padding: 'clamp(40px, 8vw, 88px)',
          color: 'var(--cream)', textAlign: 'center',
        }}>
          <div aria-hidden style={{
            position: 'absolute', top: '-20%', left: '50%', transform: 'translateX(-50%)',
            width: 600, height: 600,
            background: 'radial-gradient(circle, rgba(236,106,77,0.35), transparent 60%)',
            filter: 'blur(60px)',
          }}/>
          <div style={{ position: 'relative' }}>
            <Reveal delay={100}>
              <h2 style={{
                fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 6vw, 72px)',
                fontWeight: 500, lineHeight: 0.98, letterSpacing: '-0.035em',
                marginBottom: 20, color: 'var(--cream)',
              }}>
                Tu hogar merece <em style={{ fontStyle: 'italic', color: 'var(--coral)' }}>tranquilidad</em>.
              </h2>
            </Reveal>
            <Reveal delay={200}>
              <p style={{ fontSize: 18, color: 'rgba(250,246,242,0.7)', maxWidth: 540, margin: '0 auto 36px', lineHeight: 1.5 }}>
                Escríbenos por WhatsApp. Cotización en minutos, técnico en tu puerta el mismo día.
              </p>
            </Reveal>
            <Reveal delay={300}>
              <button onClick={onWhatsapp} style={{
                background: 'var(--coral)', color: 'white', border: 'none',
                padding: '18px 32px', borderRadius: 16, fontSize: 16, fontWeight: 500,
                cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 12,
                fontFamily: 'var(--font-body)',
                boxShadow: '0 20px 50px -12px rgba(236,106,77,0.6), inset 0 1px 0 rgba(255,255,255,0.3)',
                transition: 'all 0.2s',
              }}
              onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px) scale(1.02)'}
              onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0) scale(1)'}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                  <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>
                Escribir ahora
              </button>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function SocialIcon({ kind, href, onClick, label }) {
  const common = {
    width: 40, height: 40, borderRadius: 10,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    background: 'transparent',
    border: '1px solid var(--line-2)',
    color: 'var(--ink-2)',
    transition: 'background 0.2s ease, color 0.2s ease, border-color 0.2s ease',
    cursor: 'pointer',
    textDecoration: 'none',
  };
  const onHoverEnter = (e) => {
    e.currentTarget.style.background = 'var(--ink)';
    e.currentTarget.style.color = 'var(--cream)';
    e.currentTarget.style.borderColor = 'var(--ink)';
  };
  const onHoverLeave = (e) => {
    e.currentTarget.style.background = 'transparent';
    e.currentTarget.style.color = 'var(--ink-2)';
    e.currentTarget.style.borderColor = 'var(--line-2)';
  };
  // WhatsApp uses the official filled glyph (WA_PATH on window). The other two
  // are outline icons rendered with stroke.
  let inner;
  if (kind === 'whatsapp') {
    inner = (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d={WA_PATH}/>
      </svg>
    );
  } else if (kind === 'facebook') {
    inner = (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 4.97 3.66 9.1 8.44 9.86V14.93H7.9v-2.87h2.54V9.85c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.47h-1.26c-1.24 0-1.63.78-1.63 1.57v1.86h2.77l-.44 2.87h-2.33v6.99C18.34 21.16 22 17.03 22 12.06z"/>
      </svg>
    );
  } else {
    // instagram
    inner = (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
        <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
        <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
      </svg>
    );
  }
  if (onClick) {
    return (
      <button type="button" onClick={onClick} aria-label={label} title={label} style={common} onMouseEnter={onHoverEnter} onMouseLeave={onHoverLeave}>
        {inner}
      </button>
    );
  }
  return (
    <a href={href || '#'} aria-label={label} title={label} target="_blank" rel="noopener noreferrer" style={common} onMouseEnter={onHoverEnter} onMouseLeave={onHoverLeave}>
      {inner}
    </a>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <h4 style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--ink)', marginBottom: 18, fontWeight: 600 }}>{title}</h4>
      <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <li key={i}>
            {it.onClick ? (
              <button type="button" onClick={it.onClick}
                style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer',
                  fontSize: 14, color: 'var(--mute)', textAlign: 'left',
                  fontFamily: 'var(--font-body)', transition: 'color 0.2s' }}
                onMouseEnter={e => e.target.style.color = 'var(--coral)'}
                onMouseLeave={e => e.target.style.color = 'var(--mute)'}>{it.label}</button>
            ) : (
              <a href={it.href || '#'} style={{ fontSize: 14, color: 'var(--mute)', textDecoration: 'none', transition: 'color 0.2s' }}
                onMouseEnter={e => e.target.style.color = 'var(--coral)'}
                onMouseLeave={e => e.target.style.color = 'var(--mute)'}>{it.label}</a>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

function Footer({ onWhatsapp }) {
  return (
    <footer style={{ background: 'var(--cream-2)', borderTop: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '72px 32px 32px' }}>
        {/* Top grid: brand + columns */}
        <div className="footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.5fr 1fr 1fr 1.1fr',
          gap: 56, marginBottom: 56,
        }}>
          {/* Brand */}
          <div>
            <HomliLogo height={30} isoColor="var(--coral)" wordColor="var(--ink)" />
            <p style={{
              fontFamily: 'var(--font-display)', fontSize: 22,
              fontWeight: 400, lineHeight: 1.2, letterSpacing: '-0.015em',
              color: 'var(--ink)', marginTop: 22, marginBottom: 24,
              maxWidth: 300,
            }}>
              Hogar, <em style={{ fontStyle: 'italic', color: 'var(--coral)' }}>sin complicaciones</em>.
            </p>
            <div style={{ display: 'flex', gap: 8 }}>
              <SocialIcon kind="facebook" href="#" label="Facebook"/>
              <SocialIcon kind="instagram" href="#" label="Instagram"/>
              <SocialIcon kind="whatsapp" onClick={onWhatsapp} label="WhatsApp"/>
            </div>
          </div>

          {/* Servicios */}
          <FooterCol title="Servicios" items={[
            { label: 'Limpieza regular', href: '#sec-0' },
            { label: 'Limpieza profunda', href: '#sec-0' },
            { label: 'Cortinas y persianas', href: '#sec-0' },
            { label: 'Fontanería', href: '#sec-0' },
            { label: 'Cerrajería', href: '#sec-0' },
            { label: 'Electricidad', href: '#sec-0' },
            { label: 'Carpintería', href: '#sec-0' },
            { label: 'Obra civil', href: '#sec-0' },
            { label: 'Fumigación', href: '#sec-0' },
            { label: 'Jardinería', href: '#sec-0' },
          ]}/>

          {/* Compañía */}
          <FooterCol title="Compañía" items={[
            { label: 'Cómo funciona', href: '#sec-1' },
            { label: 'Por qué Homli', href: '#sec-2' },
            { label: 'Cotiza', href: '#sec-3' },
            { label: 'Preguntas frecuentes', href: '#faq' },
          ]}/>

          {/* Contacto */}
          <div>
            <h4 style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--ink)', marginBottom: 18, fontWeight: 600 }}>Contacto</h4>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <li>
                <button type="button" onClick={onWhatsapp}
                  style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer',
                    fontSize: 14, color: 'var(--mute)', textAlign: 'left',
                    fontFamily: 'var(--font-body)', transition: 'color 0.2s' }}
                  onMouseEnter={e => e.target.style.color = 'var(--coral)'}
                  onMouseLeave={e => e.target.style.color = 'var(--mute)'}>WhatsApp</button>
              </li>
              <li>
                <a href="mailto:hola@homli.co"
                  style={{ fontSize: 14, color: 'var(--mute)', textDecoration: 'none', transition: 'color 0.2s' }}
                  onMouseEnter={e => e.target.style.color = 'var(--coral)'}
                  onMouseLeave={e => e.target.style.color = 'var(--mute)'}>hola@homli.co</a>
              </li>
              <li style={{ fontSize: 14, color: 'var(--mute)', lineHeight: 1.5, marginTop: 4 }}>
                Lun a Dom, 7:00 a 22:00
              </li>
              <li style={{ fontSize: 14, color: 'var(--mute)' }}>Cali, Colombia</li>
            </ul>
          </div>
        </div>

        {/* Bottom bar */}
        <div style={{
          paddingTop: 24, borderTop: '1px solid var(--line)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 12, fontSize: 12, color: 'var(--mute-2)',
        }}>
          <div>© 2026 Homli. Todos los derechos reservados.</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#" style={{ color: 'var(--mute-2)', textDecoration: 'none', transition: 'color 0.2s' }}
              onMouseEnter={e => e.target.style.color = 'var(--ink)'}
              onMouseLeave={e => e.target.style.color = 'var(--mute-2)'}>Términos</a>
            <a href="#" style={{ color: 'var(--mute-2)', textDecoration: 'none', transition: 'color 0.2s' }}
              onMouseEnter={e => e.target.style.color = 'var(--ink)'}
              onMouseLeave={e => e.target.style.color = 'var(--mute-2)'}>Privacidad</a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
        }
        @media (max-width: 560px) {
          .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </footer>
  );
}

// ---------------- WhatsApp FAB ----------------
function WhatsappFAB({ onClick }) {
  const [bounce, setBounce] = uS4(false);
  const [hover, setHover] = uS4(false);

  uE4(() => {
    const t = setTimeout(() => {
      setBounce(true);
      setTimeout(() => setBounce(false), 500);
    }, 1500);
    return () => clearTimeout(t);
  }, []);

  return (
    <div style={{ position: 'fixed', bottom: 24, right: 24, zIndex: 90 }}>
      {/* Tooltip */}
      <div className="fab-tooltip" style={{
        position: 'absolute', right: 'calc(100% + 14px)', top: '50%',
        transform: hover ? 'translate(0, -50%)' : 'translate(8px, -50%)',
        opacity: hover ? 1 : 0, pointerEvents: 'none',
        transition: 'all 0.2s ease-out',
        padding: '10px 14px', background: 'var(--ink)', color: 'var(--cream)',
        borderRadius: 12, fontSize: 13, fontWeight: 500,
        fontFamily: 'var(--font-body)', whiteSpace: 'nowrap',
        boxShadow: '0 8px 24px -8px rgba(0,0,0,0.3)',
      }}>
        ¿Te ayudamos? Cotiza ya
        <span aria-hidden style={{
          position: 'absolute', right: -5, top: '50%', transform: 'translateY(-50%)',
          width: 0, height: 0,
          borderTop: '6px solid transparent',
          borderBottom: '6px solid transparent',
          borderLeft: '6px solid var(--ink)',
        }}/>
      </div>

      <button onClick={onClick}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        aria-label="Cotizar por WhatsApp"
        className={bounce ? 'fab-bounce' : ''}
        style={{
          width: 60, height: 60, borderRadius: '50%',
          background: '#25D366', color: 'white', border: 'none', cursor: 'pointer',
          boxShadow: '0 10px 30px -6px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0.5)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          animation: 'fabpulse 2.5s ease-out infinite',
        }}>
        <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
          <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>
      </button>
      <style>{`
        @keyframes fabpulse {
          0% { box-shadow: 0 10px 30px -6px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0.5); }
          70% { box-shadow: 0 10px 30px -6px rgba(37,211,102,0.5), 0 0 0 20px rgba(37,211,102,0); }
          100% { box-shadow: 0 10px 30px -6px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0); }
        }
        @keyframes fabBounce {
          0% { transform: scale(1);}
          50% { transform: scale(1.18);}
          75% { transform: scale(0.96);}
          100% { transform: scale(1);}
        }
        .fab-bounce { animation: fabBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
        @media (max-width: 720px) {
          .fab-tooltip { display: none !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { FAQ, FinalCTA, Footer, WhatsappFAB });
