import React from "react";
import imagen from "../assets/tesscorpIA.png";

const Work = ({ onOpenContact }) => {
  return (
    <section
      className="py-20 md:py-24 bg-gradient-to-b from-[#001430] to-[#020617]"
      id="nuestro-trabajo"
    >
      <div className="max-w-7xl mx-auto px-6 lg:px-8">
        {/* Título */}
        <h2
          className="text-2xl md:text-3xl font-bold mb-10 md:mb-12 text-center lg:text-left tracking-tight text-secondaccent"
          id="work-title"
        >
          Nuestro Trabajo
        </h2>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-14 items-center">
          {/* Izquierda: Texto y Botón */}
          <div className="space-y-6 text-blue-100/80">
            <p className="text-base sm:text-lg md:text-xl leading-relaxed text-justify font-light">
              Entendemos a fondo tu negocio para alinear la tecnología con tus
              objetivos. Utilizamos metodologías ágiles y ciclos de entrega
              cortos para asegurar transparencia total.
            </p>

            <p className="text-base sm:text-lg md:text-xl leading-relaxed text-justify font-light">
              Colaboramos con tu equipo para priorizar funcionalidades y validar
              soluciones rápidamente. Así construimos productos que no solo
              funcionan hoy, sino que escalan hacia el futuro.
            </p>

            {/* Botón */}
            <div className="pt-2">
              <button
                id="work-button"
                onClick={onOpenContact}
                className="inline-flex items-center justify-center gap-2 px-6 py-3 sm:px-8 sm:py-4 text-white font-bold rounded-2xl transition-all transform hover:scale-105 shadow-lg shadow-cyan-500/25 bg-gradient-to-r from-emerald-400 to-cyan-500 hover:from-emerald-500 hover:to-cyan-600"
              >
                Envíanos un correo!
                <span className="material-symbols-outlined text-[1.2em]">mail</span>
              </button>
            </div>
          </div>

          {/* Derecha: Card Visual */}
          <div className="relative group">
            {/* Resplandor */}
            <div className="absolute -inset-1 bg-gradient-to-r from-[#f9a14d]/20 to-blue-500/20 rounded-[2rem] blur-xl opacity-40 group-hover:opacity-80 transition duration-700"></div>

            <div className="relative glass-card rounded-[2rem] border border-white/10 overflow-hidden shadow-2xl">
              <img
                src={imagen}
                alt="Proyectos TESS"
                className="w-full h-full object-cover grayscale-[0.25] group-hover:grayscale-0 transition-all duration-700 scale-[1.03] group-hover:scale-100"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Work;
