const TLHero = () => {
  const [visible, setVisible] = React.useState(false);
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });
  const [hovering, setHovering] = React.useState(false);
  const [shine, setShine] = React.useState({ x: 50, y: 50 });
  const cardRef = React.useRef();

  React.useEffect(() => { setTimeout(() => setVisible(true), 80); }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const handleMouseMove = (e) => {
    if (!cardRef.current) return;
    const rect = cardRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const cx = rect.width / 2;
    const cy = rect.height / 2;
    setTilt({
      x: ((y - cy) / cy) * -9,
      y: ((x - cx) / cx) * 9,
    });
    setShine({ x: (x / rect.width) * 100, y: (y / rect.height) * 100 });
  };

  const handleMouseLeave = () => {
    setHovering(false);
    setTilt({ x: 0, y: 0 });
    setShine({ x: 50, y: 50 });
  };

  const tiltTransform = visible
    ? `perspective(1100px) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg) scale(${hovering ? 1.02 : 1})`
    : 'translateY(24px)';

  const tiltTransition = !visible
    ? 'all 0.9s cubic-bezier(0.16,1,0.3,1) 0.15s'
    : hovering
    ? 'transform 0.09s linear'
    : 'transform 0.65s cubic-bezier(0.16,1,0.3,1)';

  return (
    <section id="inicio" style={{
      minHeight: '100vh',
      background: '#FBFBFD',
      position: 'relative', overflow: 'hidden',
      display: 'flex', alignItems: 'center',
    }}>
      {/* Subtle grid */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.025 }}>
          <defs>
            <pattern id="grid2" width="80" height="80" patternUnits="userSpaceOnUse">
              <path d="M 80 0 L 0 0 0 80" fill="none" stroke="#1D1D1F" strokeWidth="0.5"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid2)" />
        </svg>
        <div style={{ position: 'absolute', top: '10%', right: '5%', width: 600, height: 600, background: 'radial-gradient(circle, rgba(200,210,230,0.25) 0%, transparent 65%)', borderRadius: '50%' }} />
        <div style={{ position: 'absolute', bottom: '0%', left: '-5%', width: 500, height: 500, background: 'radial-gradient(circle, rgba(210,215,225,0.18) 0%, transparent 65%)', borderRadius: '50%' }} />
      </div>

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '140px 40px 100px', width: '100%', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 80, alignItems: 'center' }}>

          {/* Left: Copy */}
          <div style={{ opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(24px)', transition: 'all 0.9s cubic-bezier(0.16,1,0.3,1)' }}>

            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              background: '#F5F5F7', border: '1px solid #E5E5EA',
              borderRadius: 100, padding: '6px 16px', marginBottom: 36,
            }}>
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#34C759' }} />
              <span style={{ color: '#6E6E73', fontSize: 12, fontFamily: 'Inter, sans-serif', fontWeight: 500, letterSpacing: 0.3 }}>
                Servicios profesionales · Cancún & Riviera Maya
              </span>
            </div>

            <h1 style={{
              fontFamily: 'Inter, sans-serif', fontWeight: 800,
              fontSize: 'clamp(40px, 5vw, 72px)',
              color: '#1D1D1F', lineHeight: 1.04, letterSpacing: -2.5,
              margin: '0 0 28px',
            }}>
              Construcción,<br/>
              <span style={{ color: '#6E6E73', fontWeight: 300 }}>Tecnología</span><br/>
              y Mantenimiento.
            </h1>

            <p style={{
              fontFamily: 'Inter, sans-serif', fontWeight: 400, fontSize: 19,
              color: '#6E6E73', lineHeight: 1.65, margin: '0 0 44px',
              maxWidth: 500, letterSpacing: -0.2,
            }}>
              Soluciones integrales para condominios, hoteles y desarrollos residenciales. Calidad, eficiencia y tecnología en cada proyecto.
            </p>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
              <button onClick={() => scrollTo('cotizar')} style={{
                background: '#1D1D1F', color: '#fff',
                border: 'none', cursor: 'pointer',
                fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 16,
                padding: '17px 36px', borderRadius: 100,
                transition: 'all 0.25s', letterSpacing: -0.2,
              }}
              onMouseEnter={e => { e.target.style.background = '#3D3D3F'; e.target.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={e => { e.target.style.background = '#1D1D1F'; e.target.style.transform = 'none'; }}
              >
                Solicitar presupuesto
              </button>
              <button onClick={() => scrollTo('portafolio')} style={{
                background: 'transparent', color: '#1D1D1F',
                border: '1.5px solid #D1D1D6', cursor: 'pointer',
                fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 16,
                padding: '17px 36px', borderRadius: 100,
                transition: 'all 0.25s', letterSpacing: -0.2,
              }}
              onMouseEnter={e => { e.target.style.borderColor = '#1D1D1F'; e.target.style.background = '#F5F5F7'; }}
              onMouseLeave={e => { e.target.style.borderColor = '#D1D1D6'; e.target.style.background = 'transparent'; }}
              >
                Ver portafolio →
              </button>
            </div>

            {/* Stats */}
            <div style={{ display: 'flex', gap: 48, marginTop: 60, paddingTop: 40, borderTop: '1px solid #E5E5EA' }}>
              {[
                { n: '13+', label: 'Especialidades' },
                { n: '200+', label: 'Proyectos entregados' },
                { n: '24/7', label: 'Atención de emergencias' },
              ].map(s => (
                <div key={s.n}>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 32, color: '#1D1D1F', letterSpacing: -1.5 }}>{s.n}</div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 400, fontSize: 13, color: '#9E9EA3', marginTop: 3, letterSpacing: -0.1 }}>{s.label}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right: Tilt card */}
          <div
            ref={cardRef}
            onMouseMove={handleMouseMove}
            onMouseEnter={() => setHovering(true)}
            onMouseLeave={handleMouseLeave}
            style={{
              opacity: visible ? 1 : 0,
              transform: tiltTransform,
              transition: tiltTransition,
              cursor: 'default',
              willChange: 'transform',
            }}
          >
            <div style={{
              background: '#fff',
              borderRadius: 28,
              border: '1px solid #E5E5EA',
              boxShadow: hovering
                ? '0 32px 80px rgba(0,0,0,0.13), 0 2px 24px rgba(0,0,0,0.06)'
                : '0 2px 80px rgba(0,0,0,0.06)',
              overflow: 'hidden',
              position: 'relative',
              transition: 'box-shadow 0.4s ease',
            }}>

              {/* Shine overlay */}
              <div style={{
                position: 'absolute',
                inset: 0,
                borderRadius: 28,
                background: `radial-gradient(circle at ${shine.x}% ${shine.y}%, rgba(255,255,255,0.28) 0%, transparent 55%)`,
                pointerEvents: 'none',
                zIndex: 10,
                opacity: hovering ? 1 : 0,
                transition: hovering ? 'opacity 0.15s' : 'opacity 0.5s',
              }} />

              {/* Top color bar */}
              <div style={{ height: 4, background: 'linear-gradient(90deg, #2C2C2E 0%, #6E6E73 50%, #AEAEB2 100%)' }} />

              {/* Logo featured */}
              <div style={{
                background: '#F5F5F7',
                aspectRatio: '4/3',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                position: 'relative', padding: 40,
              }}>
                {/* Float wrapper — independiente del tilt */}
                <div style={{ animation: 'tlFloat 4s ease-in-out infinite' }}>
                  <img
                    src="uploads/Torre Land Logo.png"
                    alt="Torre Land"
                    style={{
                      width: '70%', maxWidth: 280, objectFit: 'contain',
                      filter: hovering
                        ? 'drop-shadow(0 20px 48px rgba(0,0,0,0.20))'
                        : 'drop-shadow(0 8px 24px rgba(0,0,0,0.12))',
                      transition: 'filter 0.4s ease',
                      display: 'block',
                    }}
                  />
                </div>

                {/* Floating badge */}
                <div style={{
                  position: 'absolute', bottom: 20, right: 20,
                  background: '#fff', borderRadius: 14, padding: '10px 16px',
                  boxShadow: hovering
                    ? '0 8px 32px rgba(0,0,0,0.14)'
                    : '0 4px 24px rgba(0,0,0,0.08)',
                  display: 'flex', alignItems: 'center', gap: 8,
                  transition: 'box-shadow 0.4s ease',
                }}>
                  <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#34C759' }} />
                  <span style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#1D1D1F' }}>Disponible hoy</span>
                </div>
              </div>

              {/* Card info */}
              <div style={{ padding: 28 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginBottom: 20 }}>
                  {[
                    { icon: 'M13 10V3L4 14h7v7l9-11h-7z', label: 'Electricidad' },
                    { icon: 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z', label: 'Solar' },
                    { icon: 'M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z', label: 'RFID' },
                  ].map(s => (
                    <div key={s.label} style={{ background: '#F5F5F7', borderRadius: 12, padding: '14px 10px', textAlign: 'center' }}>
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1D1D1F" strokeWidth="1.5" strokeLinecap="round" style={{ marginBottom: 6 }}><path d={s.icon}/></svg>
                      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600, color: '#1D1D1F' }}>{s.label}</div>
                    </div>
                  ))}
                </div>

                <button onClick={() => scrollTo('cotizar')} style={{
                  width: '100%', background: '#1D1D1F', color: '#fff', border: 'none', cursor: 'pointer',
                  fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 14,
                  padding: '14px 0', borderRadius: 12, transition: 'all 0.2s',
                }}
                onMouseEnter={e => e.target.style.background = '#3D3D3F'}
                onMouseLeave={e => e.target.style.background = '#1D1D1F'}
                >
                  Diagnóstico sin costo →
                </button>
              </div>
            </div>

            {/* Emergency badge below card */}
            <div style={{
              marginTop: 16, background: '#fff', border: '1px solid #E5E5EA',
              borderRadius: 16, padding: '14px 20px',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              boxShadow: '0 2px 16px rgba(0,0,0,0.04)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#FF3B30' }} />
                <span style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 13, color: '#1D1D1F' }}>Emergencias 24/7</span>
              </div>
              <a href="tel:5529086846" style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 13, color: '#1D1D1F', textDecoration: 'none' }}>(55) 2908 6846</a>
            </div>
          </div>

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

Object.assign(window, { TLHero });