const TESTIMONIALS = [
  { name: 'Roberto Alcántara', role: 'Administrador', company: 'Condominio Torres del Lago', text: 'Torre Land transformó por completo la gestión de mantenimiento de nuestro condominio. Puntualidad absoluta, reportes digitales y personal siempre profesional. Los recomendamos sin dudar.' },
  { name: 'Lic. Patricia Solís', role: 'Gerente de Operaciones', company: 'Hotel Boutique Azul Cancún', text: 'Instalaron nuestro sistema RFID completo en tiempo récord y sin interrumpir la operación del hotel. La coordinación fue impecable y el resultado superó nuestras expectativas.' },
  { name: 'Ing. Marco Villanueva', role: 'Director de Proyectos', company: 'Desarrollo Residencial Privalia', text: 'Llevamos 3 años trabajando con Torre Land para el mantenimiento integral de nuestra privada. Su programa preventivo ha reducido costos de emergencia en más del 60%.' },
  { name: 'Arq. Claudia Ramos', role: 'Propietaria', company: 'Residencia Privada, Cancún', text: 'Contratamos remodelación completa, paneles solares y jardinería. Todo en un solo proveedor y con seguimiento puntual. Ahorramos tiempo, dinero y dolores de cabeza.' },
  { name: 'Carlos Mendoza', role: 'Presidente del Consejo', company: 'Condominio Paraíso Verde', text: 'El diagnóstico gratuito que nos hicieron reveló problemas eléctricos que no habíamos detectado. Lo resolvieron en días. Excelente servicio preventivo y transparencia total.' },
];

const TLTestimonials = () => {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setActive(a => (a + 1) % TESTIMONIALS.length), 5000);
    return () => clearInterval(t);
  }, []);

  return (
    <section style={{ background: '#fff', padding: '100px 40px', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#6E6E73', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 16 }}>Clientes</div>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(32px, 4vw, 52px)', color: '#1D1D1F', letterSpacing: -2, margin: 0, lineHeight: 1.08 }}>
            Lo que dicen<br/>nuestros clientes.
          </h2>
        </div>

        <div style={{ background: '#F5F5F7', borderRadius: 28, padding: '56px 64px', marginBottom: 28, position: 'relative', overflow: 'hidden', minHeight: 240 }}>
          <div style={{ position: 'absolute', top: 24, left: 44, fontFamily: 'Georgia, serif', fontSize: 120, color: '#E5E5EA', lineHeight: 1, userSelect: 'none', pointerEvents: 'none' }}>"</div>
          {TESTIMONIALS.map((t, i) => (
            <div key={i} style={{
              opacity: active === i ? 1 : 0,
              transform: active === i ? 'none' : 'translateY(10px)',
              transition: 'all 0.5s ease',
              position: active === i ? 'relative' : 'absolute',
              pointerEvents: active === i ? 'auto' : 'none',
            }}>
              <p style={{ fontFamily: 'Inter, sans-serif', fontWeight: 400, fontSize: 'clamp(16px, 2vw, 20px)', color: '#1D1D1F', lineHeight: 1.75, margin: '0 0 32px', maxWidth: 700, position: 'relative', zIndex: 1, letterSpacing: -0.2 }}>
                "{t.text}"
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ width: 48, height: 48, borderRadius: '50%', background: '#1D1D1F', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <span style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 16, color: '#fff' }}>{t.name[0]}</span>
                </div>
                <div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15, color: '#1D1D1F' }}>{t.name}</div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: '#9E9EA3' }}>{t.role} · {t.company}</div>
                </div>
                <div style={{ marginLeft: 'auto', display: 'flex', gap: 2 }}>
                  {[...Array(5)].map((_,j) => <svg key={j} width="14" height="14" viewBox="0 0 24 24" fill="#F59E0B"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>)}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
          {TESTIMONIALS.map((_, i) => (
            <button key={i} onClick={() => setActive(i)} style={{
              width: active === i ? 28 : 8, height: 8, borderRadius: 4,
              background: active === i ? '#1D1D1F' : '#D1D1D6',
              border: 'none', cursor: 'pointer', transition: 'all 0.3s', padding: 0,
            }}/>
          ))}
        </div>
      </div>
    </section>
  );
};

// About
const TLAbout = () => (
  <section id="nosotros" style={{ background: '#F5F5F7', padding: '100px 40px' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
      <div>
        <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#6E6E73', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20 }}>Sobre nosotros</div>
        <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 3.5vw, 44px)', color: '#1D1D1F', letterSpacing: -1.5, margin: '0 0 24px', lineHeight: 1.1 }}>
          Torre Land<br/>S.A. de C.V.
        </h2>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, color: '#6E6E73', lineHeight: 1.8, margin: '0 0 20px', letterSpacing: -0.1 }}>
          Empresa mexicana especializada en construcción, mantenimiento integral y soluciones tecnológicas para proyectos residenciales, hoteleros y corporativos. Operamos en Cancún y la Riviera Maya, con expansión a Puerto Morelos, Playa del Carmen, Tulum y Mérida.
        </p>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, color: '#6E6E73', lineHeight: 1.8, margin: '0 0 40px', letterSpacing: -0.1 }}>
          Un solo proveedor serio, formal y confiable para todas las necesidades de tu propiedad — desde la construcción hasta la automatización.
        </p>
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 20 }}>
          {[['WhatsApp', '(55) 2908 6846'], ['Cancún', '(998) 385 4149']].map(([city, tel]) => (
            <a key={city} href={`tel:${tel.replace(/\D/g,'')}`} style={{
              background: '#fff', border: '1px solid #E5E5EA', borderRadius: 16, padding: '18px 22px',
              textDecoration: 'none', display: 'flex', flexDirection: 'column', gap: 4, transition: 'all 0.2s', flex: 1, minWidth: 150,
            }}
            onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.06)'; e.currentTarget.style.borderColor = '#AEAEB2'; }}
            onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = '#E5E5EA'; }}
            >
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: '#9E9EA3', fontWeight: 500 }}>{city}</span>
              <span style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 16, color: '#1D1D1F', letterSpacing: -0.3 }}>{tel}</span>
            </a>
          ))}
        </div>
        <a href="mailto:contacto@torreland.com.mx" style={{ fontFamily: 'Inter, sans-serif', fontSize: 15, color: '#1D1D1F', fontWeight: 600, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, opacity: 0.7, transition: 'opacity 0.2s' }}
        onMouseEnter={e => e.currentTarget.style.opacity = '1'}
        onMouseLeave={e => e.currentTarget.style.opacity = '0.7'}
        >
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="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"/><polyline points="22,6 12,13 2,6"/></svg>
          contacto@torreland.com.mx
        </a>
      </div>

      {/* Team cards */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {[
          { initials: 'SG', name: 'Arq. Sergio Iván Gutiérrez', role: 'Director General', tel: '(55) 2908 6846', area: 'Dirección General' },
          { initials: 'AM', name: 'Ing. Arturo Monroy Blanco', role: 'Director de Operaciones', tel: '(998) 385 4149', area: 'Cancún, Q.Roo' },
        ].map(person => (
          <div key={person.name} style={{ background: '#fff', border: '1px solid #E5E5EA', borderRadius: 20, padding: 28, display: 'flex', gap: 20, alignItems: 'center', transition: 'all 0.2s' }}
          onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.06)'; }}
          onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; }}
          >
            <div style={{ width: 60, height: 60, borderRadius: 16, background: '#1D1D1F', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <span style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 20, color: '#fff' }}>{person.initials}</span>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 16, color: '#1D1D1F', marginBottom: 2 }}>{person.name}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: '#6E6E73', fontWeight: 600, marginBottom: 8 }}>{person.role}</div>
              <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
                <a href={`tel:${person.tel.replace(/\D/g,'')}`} style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: '#6E6E73', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 4 }}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="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"/></svg>
                  {person.tel}
                </a>
                <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: '#9E9EA3' }}>📍 {person.area}</span>
              </div>
            </div>
          </div>
        ))}

        {/* Formal company badge */}
        <div style={{ background: '#1D1D1F', borderRadius: 20, padding: '22px 26px', display: 'flex', gap: 16, alignItems: 'center' }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.8)" strokeWidth="1.5" strokeLinecap="round"><path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
          </div>
          <div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 14, color: '#fff', marginBottom: 3 }}>Empresa Formal S.A. de C.V.</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>RFC · Contratos y garantías por escrito en cada proyecto</div>
          </div>
        </div>

        {/* Logo */}
        <div style={{ background: '#F5F5F7', borderRadius: 20, padding: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <img src="uploads/Torre Land Logo.png" alt="Torre Land" style={{ height: 80, objectFit: 'contain', filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.1))' }}/>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { TLTestimonials, TLAbout });