Escríbenos

Estamos aquí para resolver tus dudas y ayudarte a agendar tu momento de autocuidado ideal.

{/* ─── Contact Body Container ──────────────────────────── */}

{/* LEFT COLUMN: Live Info & WhatsApp Generator */}

{/* Live Status Card */}

{isOpen ? ( Abierto ahora: Escríbenos y te responderemos de inmediato. ) : ( Cerrado ahora: Déjanos tu mensaje y te responderemos a primera hora. )}

{/* WhatsApp Interactive Generator */}

WhatsApp Interactivo

Elige uno de los temas predefinidos para preparar tu mensaje o escribe el tuyo directamente abajo:

{/* Presets Grid */}

{presets.map((preset, idx) => ( ))}

{/* Textarea */}

setWaMessage(e.target.value)}
                  rows={4}
                  style={{
                    width: '100%',
                    padding: '16px',
                    borderRadius: '12px',
                    border: '1px solid rgba(136, 201, 193, 0.3)',
                    fontFamily: "'Outfit', sans-serif",
                    fontSize: '14px',
                    color: '#333',
                    background: '#FAFAF8',
                    resize: 'none',
                    outline: 'none',
                    boxSizing: 'border-box',
                    transition: 'border-color 0.2s'
                  }}
                  onFocus={e => e.target.style.borderColor = '#88C9C1'}
                  onBlur={e => e.target.style.borderColor = 'rgba(136, 201, 193, 0.3)'}
                />
              </div>
 
              <a 
                href={`https://wa.me/56983059044?text=${encodeURIComponent(waMessage)}`}
                target="_blank"
                rel="noopener noreferrer"
                className="btn-wa"
                style={{ width: '100%' }}
              >
                <IconWhatsApp />
                <span>Enviar por WhatsApp</span>
              </a>
            </div>
 
            {/* Info Cards (Dirección, Horarios) */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              {[
                { title: '📍 Dirección', val: 'Mariano Sánchez Fontecilla 11950\nPeñalolén, Santiago, Chile\n(Estacionamiento privado disponible)', href: 'https://maps.google.com/?q=Mariano+Sanchez+Fontecilla+11950+Penalolen' },
                { title: '📸 Instagram', val: '@elartedequererte.fran', href: 'https://instagram.com/elartedequererte.fran' }
              ].map(({ title, val, href }) => (
                <div key={title} style={{ 
                  background: '#fff', 
                  border: '1px solid rgba(136, 201, 193, 0.15)', 
                  borderRadius: '20px', 
                  padding: '24px',
                  boxShadow: '0 4px 15px rgba(0,0,0,0.01)'
                }}>
                  <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: '11px', color: '#88C9C1', letterSpacing: '1.5px', textTransform: 'uppercase', fontWeight: 600, marginBottom: '8px' }}>
                    {title}
                  </div>
                  <a href={href} target="_blank" rel="noopener noreferrer" style={{
                    fontFamily: "'Cormorant Garamond', serif",
                    fontSize: '20px',
                    color: '#1a1a1a',
                    fontWeight: 500,
                    textDecoration: 'none',
                    lineHeight: '1.5',
                    whiteSpace: 'pre-line',
                    transition: 'color 0.2s'
                  }}
                    onMouseEnter={e => e.target.style.color = '#88C9C1'}
                    onMouseLeave={e => e.target.style.color = '#1a1a1a'}
                  >
                    {val}
                  </a>
                </div>
              ))}
            </div>
          </div>
 
          {/* RIGHT COLUMN: Contact Form & Schedule Table */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '36px' }}>
            
            {/* Form Box */}
            <div style={{ 
              background: '#fff', 
              border: '1px solid rgba(136, 201, 193, 0.25)', 
              borderRadius: '24px', 
              padding: '40px 32px', 
              boxShadow: '0 8px 30px rgba(136,201,193,0.04)' 
            }}>
              {sent ? (
                <div style={{ textAlign: 'center', padding: '24px 0' }}>
                  <div style={{ 
                    width: 70, 
                    height: 70, 
                    borderRadius: '50%', 
                    background: '#88C9C1', 
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'center', 
                    margin: '0 auto 24px', 
                    color: '#fff', 
                    fontSize: 32,
                    boxShadow: '0 8px 24px rgba(136,201,193,0.3)' 
                  }}>
                    ✓
                  </div>
                  <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '32px', fontStyle: 'italic', color: '#1a1a1a', marginBottom: '12px' }}>
                    Mensaje Enviado
                  </h2>
                  <p style={{ fontFamily: "'Outfit', sans-serif", fontSize: '14px', color: '#666', lineHeight: '1.6', marginBottom: '32px' }}>
                    Gracias por escribirnos. Francesca responderá tu consulta muy pronto por correo o WhatsApp.
                  </p>
                  <button 
                    onClick={() => { setSent(false); setForm({ name: '', email: '', phone: '', msg: '' }); }}
                    className="btn-primary-mint"
                  >
                    Enviar otro mensaje
                  </button>
                </div>
              ) : (
                <form onSubmit={e => { e.preventDefault(); setSent(true); }}>
                  <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '30px', fontStyle: 'italic', color: '#1a1a1a', marginBottom: '28px', lineHeight: 1.2 }}>
                    Envíanos un mensaje
                  </h2>
 
                  {fields.map(({ key, label, type, placeholder }) => (
                    <div key={key} style={{ marginBottom: '20px' }}>
                      <label style={{ 
                        fontFamily: "'Outfit', sans-serif", 
                        fontSize: '11px', 
                        color: focused === key ? '#88C9C1' : '#777', 
                        textTransform: 'uppercase', 
                        letterSpacing: '1px', 
                        display: 'block', 
                        marginBottom: '8px', 
                        fontWeight: 600,
                        transition: 'color 0.2s' 
                      }}>
                        {label}
                      </label>
                      <input 
                        type={type}
                        placeholder={placeholder}
                        required={key !== 'phone'}
                        value={form[key]}
                        onChange={e => setForm(p => ({ ...p, [key]: e.target.value }))}
                        className="input-mint"
                        onFocus={() => setFocused(key)}
                        onBlur={() => setFocused(null)}
                      />
                    </div>
                  ))}
 
                  <div style={{ marginBottom: '28px' }}>
                    <label style={{ 
                      fontFamily: "'Outfit', sans-serif", 
                      fontSize: '11px', 
                      color: focused === 'msg' ? '#88C9C1' : '#777', 
                      textTransform: 'uppercase', 
                      letterSpacing: '1px', 
                      display: 'block', 
                      marginBottom: '8px', 
                      fontWeight: 600,
                      transition: 'color 0.2s' 
                    }}>
                      Mensaje / Consulta
                    </label>
                    <textarea 
                      rows={4}
                      placeholder="¿En qué podemos ayudarte?"
                      required
                      value={form.msg}
                      onChange={e => setForm(p => ({ ...p, msg: e.target.value }))}
                      className="input-mint"
                      style={{ resize: 'none', borderRadius: '16px' }}
                      onFocus={() => setFocused('msg')}
                      onBlur={() => setFocused(null)}
                    />
                  </div>
 
                  <button type="submit" className="btn-primary-mint" style={{ width: '100%' }}>
                    Enviar mensaje
                  </button>
                </form>
              )}
            </div>
 
            {/* Horarios Card */}
            <div style={{ 
              background: 'linear-gradient(135deg, #ffffff 0%, #FAFAF8 100%)', 
              border: '1px solid rgba(136, 201, 193, 0.25)', 
              borderRadius: '24px', 
              padding: '32px', 
              boxShadow: '0 8px 30px rgba(136,201,193,0.06)' 
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
                <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: '11px', color: '#88C9C1', letterSpacing: '2px', textTransform: 'uppercase', fontWeight: 700 }}>
                  Horarios de Atención
                </div>
                <div style={{ width: '40px', height: '1px', background: 'rgba(136, 201, 193, 0.4)' }}/>
              </div>
              
              {[
                { title: 'Lunes, Miércoles y Viernes', time: '16:00 – 20:00 hrs', days: [1,3,5], icon: '🌿' },
                { title: 'Martes y Jueves', time: '08:00 – 20:00 hrs', days: [2,4], icon: '✨' },
                { title: 'Sábados', time: '09:00 – 15:00 hrs', days: [6], icon: '💆‍♀️' },
                { title: 'Domingos y Festivos', time: 'Cerrado', days: [0], icon: '🕊️' }
              ].map((row) => {
                const isToday = row.days.includes(new Date().getDay());
                return (
                  <div key={row.title} style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between', 
                    alignItems: 'center', 
                    padding: '16px', 
                    borderRadius: '16px',
                    marginBottom: '8px',
                    background: isToday ? 'rgba(136, 201, 193, 0.08)' : 'transparent',
                    border: isToday ? '1px solid rgba(136, 201, 193, 0.3)' : '1px solid transparent',
                    boxShadow: isToday ? '0 4px 12px rgba(136,201,193,0.05)' : 'none',
                    transition: 'all 0.3s'
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                      <span style={{ fontSize: '18px', filter: isToday ? 'none' : 'grayscale(100%) opacity(0.6)' }}>{row.icon}</span>
                      <div style={{ display: 'flex', flexDirection: 'column' }}>
                        <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: '13px', color: isToday ? '#2d6a61' : '#666', fontWeight: isToday ? 700 : 500 }}>
                          {row.title}
                        </span>
                        {isToday && (
                          <span style={{ fontFamily: "'Outfit', sans-serif", fontSize: '9px', color: '#88C9C1', letterSpacing: '1px', textTransform: 'uppercase', fontWeight: 600, marginTop: '2px' }}>
                            Día actual
                          </span>
                        )}
                      </div>
                    </div>
                    <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '18px', fontWeight: 600, color: row.time === 'Cerrado' ? '#F4B8C1' : '#2d6a61', fontStyle: 'italic' }}>
                      {row.time}
                    </span>
                  </div>
                );
              })}
            </div>
          </div>
          
        </div>
      </div>
    </div>
  );
};
 
Object.assign(window, { ContactoV5 });