/* Aseo Casa Express — extras + testimonials + FAQ + forms + footer */

// ============ Additional services ============
function ExtrasHeroCarousel() {
  const images = [
  { src: 'assets/extras-1.jpg', alt: 'Lavado de cortinas a domicilio' },
  { src: 'assets/extras-2.jpg', alt: 'Lavado profundo de muebles y tapicería' },
  { src: 'assets/extras-3.jpg', alt: 'Limpieza de alfombras y tapetes' }];

  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % images.length), 3000);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="extras-hero extras-hero-carousel">
      {images.map((im, i) =>
      <img
        key={i}
        src={im.src}
        alt={im.alt}
        className={i === idx ? 'is-active' : ''}
        loading={i === 0 ? 'eager' : 'lazy'} />

      )}
      <div className="extras-hero-dots">
        {images.map((_, i) =>
        <button
          key={i}
          type="button"
          aria-label={`Imagen ${i + 1}`}
          className={i === idx ? 'is-active' : ''}
          onClick={() => setIdx(i)} />

        )}
      </div>
    </div>);

}

function ExtraServices() {
  const items = [
  { ic: 'sparkle', t: 'Lavado de cortinas', d: 'Lavado profesional a domicilio o recogida, con empresas aliadas de alta calidad. Y siempre con garantía de calidad.' },
  { ic: 'sofa', t: 'Alfombras y tapetes', d: 'Limpieza profunda con maquinaria especializada y productos biodegradables para alargar la vida de tus alfombras.' },
  { ic: 'sofa', t: 'Lavado de muebles', d: 'Limpieza y desinfección de salas, sillas y poltronas. Cotización sin costo.' }];

  return (
    <section className="section section-tight" id="adicionales" data-screen-label="08 Adicionales">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span> Servicios adicionales</span>
          <h2>Y mucho más, sin tener que buscar en otro lado</h2>
          <p>A través de alianzas con empresas aliadas de alta calidad, gestionamos servicios complementarios para tu hogar. Cotizamos en tu hogar sin costo y con garantía de servicios prestados.</p>
        </div>

        <div className="extras-hero">
          <img src="assets/extras-hero.jpg" alt="Servicios adicionales: cortinas, muebles y alfombras" loading="lazy" decoding="async" onError={(e) => {e.target.style.display = 'none';}} />
        </div>

        <div className="extras-list">
          {items.map((it, i) =>
          <div key={i} className="extra-pill">
              <div className="ic"><Icon name={it.ic} size={22} /></div>
              <div className="body">
                <h3>{it.t}</h3>
                <p>{it.d}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============ Care services ============
function CareServices() {
  return (
    <section className="section section-tight" id="cuidado" data-screen-label="09 Cuidado">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span> Novedades</span>
          <h2>También cuidamos a quienes más quieres</h2>
          <p>Ahora te ayudamos a conseguir personal de confianza para acompañar a tus seres queridos.</p>
        </div>
        <div className="care-grid">
          <div className="care-card">
            <img src="assets/care-elder.jpg" alt="Cuidadora de adulto mayor" loading="lazy" onError={(e) => {e.target.style.background = 'linear-gradient(135deg, #0B2545, #14B8A6)';}} />
            <div className="overlay"></div>
            <div className="label">
              <span className="tag">Nuevo</span>
              <h3>Cuidadoras de adulto mayor</h3>
              <p>Acompañamiento, apoyo en actividades diarias y compañía con personal de confianza y con sentido humano.</p>
            </div>
          </div>
          <div className="care-card">
            <img src="assets/care-pet.jpg" alt="Cuidadora de mascotas" loading="lazy" onError={(e) => {e.target.style.background = 'linear-gradient(135deg, #0B2545, #14B8A6)';}} />
            <div className="overlay"></div>
            <div className="label">
              <span className="tag">Nuevo</span>
              <h3>Cuidadoras de mascotas</h3>
              <p>Alimentación y compañía para tus mascotas mientras no estás. Personal capacitado y con mucho amor para tus peluditos.</p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============ Testimonials ============
function Testimonials() {
  const items = [
  { name: 'Carolina Méndez', loc: 'Chapinero, Bogotá', initials: 'CM', stars: 5,
    q: 'Llevamos casi dos años con Aseo Casa Express y siempre llega la misma funcionaria. Es seria, puntual y muy responsable. Mi casa quedó como un hotel desde la primera vez.' },
  { name: 'Andrés Ramírez', loc: 'Cedritos, Bogotá', initials: 'AR', stars: 5,
    q: 'Lo que más valoro es la tranquilidad. Saber que verifican a las funcionarias y que están legalmente contratadas me da paz. Coordinar todo por WhatsApp es muy práctico.' },
  { name: 'Laura Gutiérrez', loc: 'Salitre, Bogotá', initials: 'LG', stars: 5,
    q: 'Contraté el plan quincenal y además me consiguieron una cuidadora para mi mamá. Excelente trato, todo en una sola empresa. Mil gracias al equipo.' }];

  return (
    <section className="section testimonials" id="testimonios" data-screen-label="10 Testimonios">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span> Testimonios</span>
          <h2>Familias bogotanas que ya confían en nosotros</h2>
        </div>
        <div className="testi-grid">
          {items.map((t, i) =>
          <div key={i} className="testi">
              <div className="stars">
                {Array.from({ length: t.stars }).map((_, k) => <Icon key={k} name="star" size={16} />)}
              </div>
              <p className="quote">"{t.q}"</p>
              <div className="who">
                <div className="avatar">{t.initials}</div>
                <div>
                  <div className="n">{t.name}</div>
                  <div className="l">{t.loc}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============ FAQ ============
function FAQ() {
  const qs = [
  { q: '¿En qué zonas de Bogotá prestan servicio?', a: 'Atendemos toda Bogotá. Cuéntanos tu dirección al cotizar y confirmamos cobertura sin compromiso.' },
  { q: '¿Las funcionarias están legalmente contratadas?', a: 'Sí. Todas nuestras funcionarias cumplen los requisitos de la normativa laboral colombiana. Esto te da tranquilidad legal y respaldo total.' },
  { q: '¿Cómo verifican a las personas que envían?', a: 'Cada funcionaria pasa por entrevista, validación de antecedentes, referencias laborales y personales, y capacitación continua antes de ingresar al equipo.' },
  { q: '¿Qué pasa si la funcionaria no puede asistir?', a: 'Damos aviso al cliente de inmediato, si desea reemplazo lo enviamos o reprogramamos el servicio; como el cliente desee.' },
  { q: '¿Llevan productos de aseo o se usan los del hogar?', a: 'Trabajamos con los productos que tenga el hogar para respetar tus preferencias. Si necesitas que llevemos productos, lo coordinamos al cotizar.' },
  { q: '¿Cómo se paga el servicio?', a: 'Aceptamos transferencia, Nequi, Daviplata y consignación. Confirmamos al momento de cotizar el medio de pago que mejor te quede.' },
  { q: '¿Atienden los fines de semana o festivos?', a: 'Sí. Nuestro servicio al cliente está disponible todos los días de la semana y coordinamos servicio también sábados, domingos y festivos según disponibilidad.' }];

  return (
    <section className="section" id="faq" data-screen-label="11 FAQ">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span> Preguntas frecuentes</span>
          <h2>Resolvemos tus dudas</h2>
        </div>
        <div className="faq">
          {qs.map((q, i) =>
          <details className="faq-item" key={i} open={i === 0}>
              <summary>{q.q}</summary>
              <div className="ans">{q.a}</div>
            </details>
          )}
        </div>
      </div>
    </section>);

}

// ============ Forms ============
// Endpoint de Google Sheets (Apps Script) — guarda cada solicitud en la hoja
// y envía un correo a servicioalcliente@casaexpress.co
const SHEET_ENDPOINT = 'https://script.google.com/macros/s/AKfycbwGPWsrnYs7bc1D0iztZsYQDXPzu_DwnVH1HFrLIVht9W2AMLoR67TBPTSgHXc4aKej/exec';

async function sendToSheet(payload) {
  await fetch(SHEET_ENDPOINT, {
    method: 'POST',
    mode: 'no-cors',
    body: JSON.stringify(payload),
  });
}

function QuoteForm() {
  const [data, setData] = React.useState({
    nombre: '', telefono: '', email: '', zona: '', tipo: 'Aseo y limpieza profunda',
    frecuencia: 'Solo un servicio', notas: '', website: '', acepto: false
  });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const set = (k) => (e) => setData({ ...data, [k]: e.target.value });
  const submit = async (e) => {
    e.preventDefault();
    if (data.website) { setStatus('sent'); return; } // trampa anti-robot: si el campo oculto viene lleno, se ignora
    setStatus('sending');
    try {
      await sendToSheet({
        tipo_form: 'Cotización',
        nombre: data.nombre, telefono: data.telefono, email: data.email,
        zona: data.zona, servicio: data.tipo, frecuencia: data.frecuencia,
        notas: (data.notas ? data.notas + ' — ' : '') + 'Autorizó tratamiento de datos ✔',
      });
      setStatus('sent');
      setData({ nombre: '', telefono: '', email: '', zona: '', tipo: 'Aseo y limpieza profunda', frecuencia: 'Solo un servicio', notas: '', website: '', acepto: false });
      setTimeout(() => setStatus('idle'), 8000);
    } catch (err) {
      setStatus('error');
    }
  };

  return (
    <div className="form-card">
      <h3>Cotiza tu servicio</h3>
      <p className="form-lead">Completa el formulario y te enviamos la cotización por WhatsApp en minutos.</p>
      <form onSubmit={submit}>
        <div className="field"><label>Nombre completo</label>
          <input type="text" value={data.nombre} onChange={set('nombre')} placeholder="Tu nombre" required />
        </div>
        <div className="field-row">
          <div className="field"><label>WhatsApp / celular</label>
            <input type="tel" value={data.telefono} onChange={set('telefono')} placeholder="3xx xxx xxxx" required />
          </div>
          <div className="field"><label>Email</label>
            <input type="email" value={data.email} onChange={set('email')} placeholder="tu@email.com" />
          </div>
        </div>
        <div className="field"><label>Zona o barrio en Bogotá</label>
          <input type="text" value={data.zona} onChange={set('zona')} placeholder="Ej. Chicó, Cedritos, Salitre…" required />
        </div>
        <div className="field-row">
          <div className="field"><label>Tipo de servicio</label>
            <select value={data.tipo} onChange={set('tipo')}>
              <option>Aseo y limpieza profunda</option>
              <option>Lavado o planchado de ropa</option>
              <option>Preparación de alimentos</option>
              <option>Aseo + lavado o cocina</option>
              <option>Lavado de cortinas / alfombras / muebles</option>
              <option>Cuidadora de adulto mayor</option>
              <option>Cuidadora de mascotas</option>
            </select>
          </div>
          <div className="field"><label>Frecuencia</label>
            <select value={data.frecuencia} onChange={set('frecuencia')}>
              <option>Solo un servicio</option>
              <option>Servicios por días fijos contratados</option>
              <option>Plan Quincenal</option>
              <option>Plan Mensual</option>
              <option>Aún no estoy seguro</option>
            </select>
          </div>
        </div>
        <div className="field"><label>Si deseas cuéntanos un poco más (opcional)</label>
          <textarea value={data.notas} onChange={set('notas')} placeholder="Tamaño de la casa, número de baños, horarios preferidos…" />
        </div>
        <input type="text" name="website" value={data.website} onChange={set('website')} tabIndex={-1} autoComplete="off" aria-hidden="true" className="hp-field" />
        <label className="consent-label">
          <input type="checkbox" checked={data.acepto} onChange={(e) => setData({ ...data, acepto: e.target.checked })} required />
          <span>Autorizo el tratamiento de mis datos personales conforme a la Ley 1581 de 2012 (Habeas Data) para ser contactado(a) por Aseo Casa Express.</span>
        </label>
        <button type="submit" className="btn btn-primary btn-lg" style={{ width: '100%' }} disabled={status === 'sending'}>{status === 'sending' ? 'Enviando…' : 'Enviar cotización'}</button>
        {status === 'sent' && <div className="form-success"><Icon name="check" size={18} stroke={3} /> ¡Recibimos tu solicitud! Te contactaremos por WhatsApp muy pronto.</div>}
        {status === 'error' && <div className="form-success" style={{ background: 'rgba(220,38,38,0.1)', color: '#b91c1c' }}>No pudimos enviar tu solicitud. Escríbenos por WhatsApp o inténtalo de nuevo.</div>}
      </form>
    </div>);

}

function CareerForm() {
  const [data, setData] = React.useState({
    nombre: '', movil: '', experiencia: '1-3', mensaje: '', website: '', acepto: false
  });
  const [status, setStatus] = React.useState('idle');
  const set = (k) => (e) => setData({ ...data, [k]: e.target.value });
  const submit = async (e) => {
    e.preventDefault();
    if (data.website) { setStatus('sent'); return; } // trampa anti-robot
    setStatus('sending');
    try {
      await sendToSheet({
        tipo_form: 'Empleo',
        nombre: data.nombre, movil: data.movil,
        experiencia: data.experiencia,
        mensaje: (data.mensaje ? data.mensaje + ' — ' : '') + 'Autorizó tratamiento de datos ✔',
      });
      setStatus('sent');
      setData({ nombre: '', movil: '', experiencia: '1-3', mensaje: '', website: '', acepto: false });
      setTimeout(() => setStatus('idle'), 8000);
    } catch (err) {
      setStatus('error');
    }
  };

  return (
    <div className="form-card dark" id="unete">
      <h3>Trabaja con nosotros</h3>
      <p className="form-lead">¿Quieres ser parte del equipo? Déjanos tus datos.</p>
      <form onSubmit={submit}>
        <div className="field"><label>Nombre completo</label>
          <input type="text" value={data.nombre} onChange={set('nombre')} placeholder="Tu nombre" required />
        </div>
        <div className="field"><label>Número móvil *</label>
          <input type="tel" value={data.movil} onChange={set('movil')} placeholder="3xx xxx xxxx" required />
        </div>
        <div className="field" style={{ color: "rgb(11, 37, 69)" }}><label>Años de experiencia</label>
          <select value={data.experiencia} onChange={set('experiencia')}>
            <option value="0-1">Menos de 1 año</option>
            <option value="1-3">Entre 1 y 3 años</option>
            <option value="3-5">Entre 3 y 5 años</option>
            <option value="5+">Más de 5 años</option>
          </select>
        </div>
        <div className="field"><label>Hoja de vida</label>
          <div className="cv-note">
            <Icon name="mail" size={18} />
            <span>Envía tu hoja de vida al correo <a href="mailto:recursoshumanos@casaexpress.co"><strong>recursoshumanos@casaexpress.co</strong></a></span>
          </div>
          <div className="cv-note" style={{ marginTop: 8 }}>
            <WhatsAppLogo size={18} />
            <span>O envíala escaneada en PDF por WhatsApp al <a href="https://wa.me/573115213985?text=Hola%2C%20les%20env%C3%ADo%20mi%20hoja%20de%20vida%20desde%20su%20p%C3%A1gina%20web." target="_blank" rel="noopener"><strong>311 521 3985</strong></a></span>
          </div>
        </div>
        <div className="field"><label>Cuéntanos sobre ti (opcional)</label>
          <textarea value={data.mensaje} onChange={set('mensaje')} placeholder="Experiencia previa, referencias, disponibilidad…" />
        </div>
        <input type="text" name="website" value={data.website} onChange={set('website')} tabIndex={-1} autoComplete="off" aria-hidden="true" className="hp-field" />
        <label className="consent-label">
          <input type="checkbox" checked={data.acepto} onChange={(e) => setData({ ...data, acepto: e.target.checked })} required />
          <span>Autorizo el tratamiento de mis datos personales conforme a la Ley 1581 de 2012 (Habeas Data) para ser contactado(a) por Aseo Casa Express.</span>
        </label>
        <button type="submit" className="btn btn-accent btn-lg" style={{ width: '100%' }} disabled={status === 'sending'}>{status === 'sending' ? 'Enviando…' : (<><span className="cta-full">Deseo trabajar con Aseo Casa Express</span><span className="cta-short">Deseo trabajar</span></>)}</button>
        {status === 'sent' && <div className="form-success"><Icon name="check" size={18} stroke={3} /> ¡Gracias! Recibimos tus datos. Te contactaremos al móvil que dejaste.</div>}
        {status === 'error' && <div className="form-success" style={{ background: 'rgba(220,38,38,0.15)', color: '#fff' }}>No pudimos enviar tus datos. Escríbenos por WhatsApp o inténtalo de nuevo.</div>}
      </form>
    </div>);

}

function FormsSection() {
  return (
    <section className="section forms-section" id="cotizar" data-screen-label="12 Cotizar y Trabaja">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span> Contáctanos</span>
          <h2>Cotiza tu servicio o únete a nuestro equipo</h2>
          <p>Respondemos por WhatsApp todos los días de la semana. También puedes escribirnos por correo.</p>
        </div>
        <div className="forms-grid">
          <QuoteForm />
          <CareerForm />
        </div>
      </div>
    </section>);

}

// ============ Footer ============
function Footer() {
  return (
    <footer className="footer" data-screen-label="13 Footer">
      <div className="container">
        <div className="footer-grid">
          <div className="col">
            <div className="brand">
              <Logo size={44} light={true} />
              <div className="brand-text">
                <span className="b1">Aseo Casa Express</span>
                <span className="b2">Bogotá · Desde 2013</span>
              </div>
            </div>
            <p className="footer-desc">Empresa pionera en la formalización de las Profesionales en aseo y limpieza para las familias en Bogotá. Funcionaria exclusiva y servicio al cliente todos los días de la semana.</p>
            <div className="footer-contact">
              <div className="row"><WhatsAppLogo size={16} /> <a href="https://wa.me/573142931380?text=Hola%2C%20los%20contacto%20desde%20su%20p%C3%A1gina%20web.%20Me%20gustar%C3%ADa%20cotizar%20un%20servicio%20de%20Aseo%20Casa%20Express." target="_blank" rel="noopener">Escríbenos por WhatsApp</a></div>
              <div className="row"><Icon name="mail" size={16} /> <a href="mailto:servicioalcliente@casaexpress.co">servicioalcliente@casaexpress.co</a></div>
              <div className="row"><Icon name="pin" size={16} /> Bogotá, Colombia</div>
              <div className="row"><Icon name="clock" size={16} /> Atención y soprte para nuestros clientes todos los días de la semana</div>
            </div>
            <div className="footer-social">
              <span className="footer-social-label">Síguenos</span>
              <div className="social-icons">
                <a href="https://www.instagram.com/aseo.casaexpress/" target="_blank" rel="noopener" aria-label="Instagram" className="social-ic social-ig">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="3" y="3" width="18" height="18" rx="5" />
                    <circle cx="12" cy="12" r="4" />
                    <circle cx="17.5" cy="6.5" r="1" fill="currentColor" />
                  </svg>
                </a>
                <a href="https://www.facebook.com/profile.php?id=61584249284864" target="_blank" rel="noopener" aria-label="Facebook" className="social-ic social-fb">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M13 22v-9h3l.5-4H13V6.5c0-1.1.3-1.9 1.9-1.9H17V1.1C16.6 1 15.4.9 14 .9c-3 0-5 1.8-5 5.2V9H6v4h3v9h4z" />
                  </svg>
                </a>
                <a href="https://www.tiktok.com/@aseocasaexpres" target="_blank" rel="noopener" aria-label="TikTok" className="social-ic social-tt">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M19.6 6.3a4.8 4.8 0 0 1-3.4-3.3h-3v13.4a2.7 2.7 0 1 1-2.7-2.7c.3 0 .5 0 .8.1V10.7a5.7 5.7 0 1 0 4.9 5.7V9.6a7.8 7.8 0 0 0 4.7 1.6V8.2a4.7 4.7 0 0 1-1.3-1.9z" />
                  </svg>
                </a>
                <a href="https://www.youtube.com/@AseoCasaExpress" target="_blank" rel="noopener" aria-label="YouTube" className="social-ic social-yt">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M22.5 6.4a2.7 2.7 0 0 0-1.9-2C18.9 4 12 4 12 4s-6.9 0-8.6.4c-.9.2-1.7.9-1.9 2C1 8.1 1 12 1 12s0 3.9.5 5.6c.2 1.1 1 1.8 1.9 2 1.7.4 8.6.4 8.6.4s6.9 0 8.6-.4c.9-.2 1.7-.9 1.9-2 .5-1.7.5-5.6.5-5.6s0-3.9-.5-5.6zM9.8 15.4V8.6l5.8 3.4-5.8 3.4z" />
                  </svg>
                </a>
              </div>
            </div>
          </div>
          <div className="col">
            <h4>Servicios</h4>
            <ul>
              <li><a href="#servicios">Aseo y limpieza</a></li>
              <li><a href="#servicios">Lavado o planchado</a></li>
              <li><a href="#servicios">Preparación de alimentos</a></li>
              <li><a href="#adicionales">Cortinas, muebles y alfombras</a></li>
              <li><a href="#cuidado">Cuidado adulto mayor</a></li>
              <li><a href="#cuidado">Cuidado mascotas</a></li>
            </ul>
          </div>
          <div className="col">
            <h4>Empresa</h4>
            <ul>
              <li><a href="#nosotros">Sobre nosotros</a></li>
              <li><a href="#seleccion">Proceso de selección</a></li>
              <li><a href="#paquetes">Paquetes</a></li>
              <li><a href="#testimonios">Testimonios</a></li>
              <li><a href="#faq">Preguntas frecuentes</a></li>
            </ul>
          </div>
          <div className="col">
            <h4>Trabaja con nosotros</h4>
            <ul>
              <li><a href="#cotizar">Envia tus datos</a></li>
              <li><a href="mailto:recursoshumanos@casaexpress.co">recursoshumanos@casaexpress.co</a></li>
            </ul>
            <h4 style={{ marginTop: 28 }}>Contacto clientes</h4>
            <ul>
              <li><a href="mailto:servicioalcliente@casaexpress.co">servicioalcliente@casaexpress.co</a></li>
              <li><a href="https://wa.me/573142931380?text=Hola%2C%20los%20contacto%20desde%20su%20p%C3%A1gina%20web.%20Me%20gustar%C3%ADa%20cotizar%20un%20servicio%20de%20Aseo%20Casa%20Express." target="_blank" rel="noopener">Escríbenos por WhatsApp</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Aseo Casa Express · Bogotá, Colombia · Todos los derechos reservados.</span>
          <span>Federados y verificados · Registrados CCB y DIAN</span>
        </div>
      </div>
    </footer>);

}

// Floating WhatsApp
function FabWhatsapp() {
  return (
    <a className="fab-whatsapp" href="https://wa.me/573142931380?text=Hola%2C%20los%20contacto%20desde%20su%20p%C3%A1gina%20web.%20Me%20gustar%C3%ADa%20cotizar%20un%20servicio%20de%20Aseo%20Casa%20Express." target="_blank" rel="noopener" aria-label="WhatsApp">
      <span className="pulse-ring"></span>
      <WhatsAppLogo size={32} color="#fff" />
    </a>);

}

Object.assign(window, { ExtraServices, CareServices, Testimonials, FAQ, QuoteForm, CareerForm, FormsSection, Footer, FabWhatsapp });