const POSTS = [
  { cat: 'Albercas', title: 'Mantenimiento preventivo de albercas: guía completa para condominios', min: 6, excerpt: 'Descubre cómo un programa de mantenimiento preventivo puede extender la vida útil de tu alberca y reducir costos de reparación hasta un 70%.' },
  { cat: 'Energía Solar', title: 'Paneles solares en México: cuánto puedes ahorrar en tu factura de CFE', min: 8, excerpt: 'Analizamos los beneficios reales de la energía solar fotovoltaica para hogares y condominios. Casos reales con retorno de inversión documentado.' },
  { cat: 'Tecnología', title: 'Sistemas RFID en hoteles: seguridad, eficiencia y experiencia del huésped', min: 5, excerpt: 'Cómo la tecnología de acceso inteligente transforma la operación hotelera, reduce costos y mejora la experiencia de cada huésped.' },
  { cat: 'Mantenimiento', title: 'Checklist de mantenimiento preventivo para condominios: qué revisar cada mes', min: 7, excerpt: 'Guía práctica con las revisiones esenciales que todo administrador debe programar para evitar emergencias costosas.' },
];
const catColors = { 'Albercas':['#EBF8FF','#0369A1'], 'Energía Solar':['#FEFCE8','#A16207'], 'Tecnología':['#F5F3FF','#6D28D9'], 'Mantenimiento':['#F0FDF4','#166534'] };

const TLBlog = () => (
  <section style={{ background: '#FBFBFD', padding: '100px 40px' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap', gap: 20 }}>
        <div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#6E6E73', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 16 }}>Conocimiento</div>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(32px, 4vw, 52px)', color: '#1D1D1F', letterSpacing: -2, margin: 0, lineHeight: 1.08 }}>Artículos y guías.</h2>
        </div>
        <a href="#" style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 14, color: '#1D1D1F', textDecoration: 'none', opacity: 0.6, display: 'flex', alignItems: 'center', gap: 4, transition: 'opacity 0.2s' }}
        onMouseEnter={e => e.currentTarget.style.opacity = '1'}
        onMouseLeave={e => e.currentTarget.style.opacity = '0.6'}
        >
          Ver todos <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </a>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 20 }}>
        {POSTS.map((p) => {
          const [bg, tc] = catColors[p.cat] || ['#F5F5F7','#1D1D1F'];
          return (
            <div key={p.title} style={{ borderRadius: 20, overflow: 'hidden', border: '1px solid #E5E5EA', background: '#fff', transition: 'all 0.3s', cursor: 'pointer' }}
            onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 20px 60px rgba(0,0,0,0.07)'; e.currentTarget.style.transform = 'translateY(-4px)'; }}
            onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'none'; }}
            >
              <div style={{ height: 130, background: `linear-gradient(145deg, ${bg}, #f5f5f7)`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ fontFamily: 'monospace', fontSize: 11, color: tc, opacity: 0.35, letterSpacing: 1 }}>[ imagen ]</div>
              </div>
              <div style={{ padding: 22 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                  <span style={{ background: bg, color: tc, borderRadius: 100, padding: '3px 12px', fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 11 }}>{p.cat}</span>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: '#9E9EA3' }}>{p.min} min</span>
                </div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15, color: '#1D1D1F', marginBottom: 10, lineHeight: 1.4 }}>{p.title}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: '#9E9EA3', lineHeight: 1.65 }}>{p.excerpt}</div>
                <div style={{ marginTop: 18, fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 13, color: '#1D1D1F', display: 'flex', alignItems: 'center', gap: 4 }}>
                  Leer <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

// Contact — dark contrast section, Apple-style
const TLContact = () => {
  const [form, setForm] = React.useState({ nombre:'', tel:'', msg:'' });
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      await window.emailjs.send('service_taw4gtd', 'template_a0prqfo', {
        name: form.nombre,
        from_name: form.nombre,
        from_email: 'contacto@torreland.com.mx',
        phone: form.tel,
        service: 'Mensaje rápido de contacto',
        message: form.msg,
      }, { publicKey: '4qmrVdouMua1Zsquq' });
      setSent(true);
    } catch (err) {
      console.error('EmailJS error:', err);
      setError('No se pudo enviar. Contáctanos por WhatsApp.');
    }
    setLoading(false);
  };

  const inp = {
    width:'100%', boxSizing:'border-box',
    fontFamily:'Inter, sans-serif', fontSize:14, color:'#1D1D1F',
    background:'#F5F5F7', border:'1.5px solid #E5E5EA',
    borderRadius:12, padding:'14px 16px', outline:'none', transition:'all 0.2s',
  };
  const focus = e => { e.target.style.borderColor = '#AEAEB2'; e.target.style.background = '#fff'; };
  const blur = e => { e.target.style.borderColor = '#E5E5EA'; e.target.style.background = '#F5F5F7'; };

  const contacts = [
    { icon: 'M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.81a19.79 19.79 0 01-3.07-8.63A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z', label:'WhatsApp', val:'(55) 2908 6846', href:'tel:5529086846' },
    { icon: 'M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.81a19.79 19.79 0 01-3.07-8.63A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z', label:'Cancún', val:'(998) 385 4149', href:'tel:9983854149' },
    { icon: 'M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M22,6 L12,13 L2,6', label:'Correo', val:'contacto@torreland.com.mx', href:'mailto:contacto@torreland.com.mx' },
    { icon: 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9', label:'Web', val:'www.torreland.com.mx', href:'https://www.torreland.com.mx' },
  ];

  return (
    <section id="contacto" style={{ background: '#1D1D1F', padding: '100px 40px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -200, right: -200, width: 600, height: 600, background: 'radial-gradient(circle, rgba(255,255,255,0.02) 0%, transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start', position: 'relative' }}>

        {/* Left: info */}
        <div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#9E9EA3', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20 }}>Contacto</div>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 3.5vw, 44px)', color: '#F5F5F7', letterSpacing: -1.5, margin: '0 0 20px', lineHeight: 1.1 }}>
            Habla con un<br/>asesor ahora.
          </h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, color: 'rgba(255,255,255,0.45)', lineHeight: 1.75, margin: '0 0 40px', letterSpacing: -0.1 }}>
            Nuestro equipo está disponible para atender tu proyecto, resolver dudas y coordinar una visita técnica sin compromiso.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 40 }}>
            {contacts.map(item => (
              <a key={item.label} href={item.href} target={item.href.startsWith('http') ? '_blank' : undefined} rel="noopener noreferrer"
                style={{ display: 'flex', gap: 14, alignItems: 'center', textDecoration: 'none', transition: 'opacity 0.2s' }}
                onMouseEnter={e => e.currentTarget.style.opacity = '0.65'}
                onMouseLeave={e => e.currentTarget.style.opacity = '1'}
              >
                <div style={{ width: 40, height: 40, borderRadius: 11, background: 'rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.6)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d={item.icon}/></svg>
                </div>
                <div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: 'rgba(255,255,255,0.35)', fontWeight: 500, marginBottom: 2 }}>{item.label}</div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, color: '#F5F5F7', fontWeight: 600 }}>{item.val}</div>
                </div>
              </a>
            ))}
          </div>

          <a href="https://wa.me/5529086846?text=Hola,%20me%20gustaría%20obtener%20información%20sobre%20sus%20servicios" target="_blank" rel="noopener noreferrer"
            style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: '#25D366', color: '#fff', fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15, padding: '16px 32px', borderRadius: 100, textDecoration: 'none', boxShadow: '0 8px 32px rgba(37,211,102,0.25)', transition: 'all 0.25s' }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 16px 48px rgba(37,211,102,0.35)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 8px 32px rgba(37,211,102,0.25)'; }}
          >
            <svg width="18" height="18" 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 00-3.48-8.413z"/></svg>
            Hablar por WhatsApp
          </a>
        </div>

        {/* Right: quick form on white card */}
        <div style={{ background: '#fff', borderRadius: 24, padding: 40, boxShadow: '0 4px 60px rgba(0,0,0,0.2)' }}>
          <h3 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 20, color: '#1D1D1F', margin: '0 0 24px', letterSpacing: -0.5 }}>Mensaje rápido</h3>
          {sent ? (
            <div style={{ textAlign: 'center', padding: '40px 0' }}>
              <div style={{ fontSize: 40, marginBottom: 12 }}>✓</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 18, color: '#166534', marginBottom: 8 }}>¡Mensaje recibido!</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: '#9E9EA3' }}>Te contactamos en breve.</div>
              <button onClick={() => setSent(false)} style={{ marginTop: 20, background: '#1D1D1F', color: '#fff', border: 'none', cursor: 'pointer', fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 13, padding: '10px 24px', borderRadius: 10 }}>Nuevo mensaje</button>
            </div>
          ) : (
            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[['Nombre','text','Tu nombre','nombre'],['Teléfono / WhatsApp','text','+52 55 0000 0000','tel']].map(([label,type,ph,key]) => (
                <div key={key}>
                  <label style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#6E6E73', display: 'block', marginBottom: 7 }}>{label}</label>
                  <input required type={type} style={inp} placeholder={ph} value={form[key]} onChange={set(key)} onFocus={focus} onBlur={blur}/>
                </div>
              ))}
              <div>
                <label style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#6E6E73', display: 'block', marginBottom: 7 }}>Mensaje</label>
                <textarea required style={{ ...inp, minHeight: 110, resize: 'vertical' }} placeholder="¿En qué podemos ayudarte?" value={form.msg} onChange={set('msg')} onFocus={focus} onBlur={blur}/>
              </div>
              {error && <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: '#BE123C', background: '#FFF1F2', border: '1px solid #FECDD3', borderRadius: 10, padding: '10px 14px' }}>{error}</div>}
              <button type="submit" disabled={loading} style={{ background: loading ? '#6E6E73' : '#1D1D1F', color: '#fff', border: 'none', cursor: loading ? 'not-allowed' : 'pointer', fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15, padding: '16px 0', borderRadius: 12, transition: 'all 0.2s' }}
              onMouseEnter={e => { if (!loading) e.target.style.background = '#3D3D3F'; }}
              onMouseLeave={e => { if (!loading) e.target.style.background = '#1D1D1F'; }}
              >{loading ? 'Enviando...' : 'Enviar mensaje →'}</button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { TLBlog, TLContact });