import React from "react";
import collageTess from "../assets/colage-tess.jpeg";

const About = () => {
  return (
    <section
      className="py-20 md:py-24 bg-gradient-to-b from-[#003172] to-[#001430]"
      id="quienes-somos"
    >
      <div className="max-w-7xl mx-auto px-6 lg:px-8">
        {/* Encabezado */}
        <div className="text-center mb-10 md:mb-12">
          <h2 className="text-white font-bold text-sm tracking-[0.3em] uppercase mb-3">
            SOBRE NOSOTROS
          </h2>

          <h3 className="text-secondaccent text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight">
            Expertos en evolución digital
          </h3>
        </div>

        {/* Imagen + Texto */}
        <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center mb-12 md:mb-14">
          <div className="relative drop-shadow-2xl max-w-sm md:max-w-md mx-auto lg:max-w-full">
            <div className="absolute -inset-3 bg-primary/20 blur-3xl rounded-full"></div>

            <img
              alt="Tech Consultant workspace"
              className="relative rounded-3xl shadow-2xl w-full border border-white/10 object-cover"
              src={collageTess}
            />
          </div>

          <div className="space-y-5">
            <p className="text-blue-50/90 leading-relaxed text-base sm:text-lg lg:text-xl font-light">
              En TESS somos una consultora de software y servicios de TI que
              ayuda a las empresas a diseñar, construir y evolucionar sus
              soluciones digitales.
            </p>

            <p className="text-blue-50/90 leading-relaxed text-base sm:text-lg lg:text-xl font-light">
              Combinamos experiencia en desarrollo de software, arquitectura de
              sistemas y automatización de procesos para que la tecnología sea
              el motor de tu negocio.
            </p>
          </div>
        </div>

        {/* Tarjetas */}
        <div className="grid md:grid-cols-2 gap-6 lg:gap-8">
          {/* Misión */}
          <article className="glass-card p-6 lg:p-8 rounded-3xl border border-white/10 hover:border-secondary/30 transition-colors group text-center flex flex-col items-center">
            <div className="w-12 h-12 bg-secondary/10 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
              <span className="material-symbols-outlined text-accent text-4xl">
                target
              </span>
            </div>

            <h4 className="text-xl lg:text-2xl font-bold mb-3 text-accent">
              Nuestra Misión
            </h4>

            <p className="text-blue-100/70 leading-relaxed font-light text-justify text-sm lg:text-base">
              Impulsamos el crecimiento de empresas mediante soluciones
              tecnológicas a medida que resuelven sus desafíos reales. Nos
              especializamos en desarrollo de software personalizado y servicios
              de TI adaptados a cada cliente.
            </p>
          </article>

          {/* Visión */}
          <article className="glass-card p-6 lg:p-8 rounded-3xl border border-white/10 hover:border-primary/30 transition-colors group text-center flex flex-col items-center">
            <div className="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
              <span className="material-symbols-outlined text-accent text-4xl">
                lightbulb
              </span>
            </div>

            <h4 className="text-xl lg:text-2xl font-bold mb-3 text-accent">
              Nuestra Visión
            </h4>

            <p className="text-blue-100/70 leading-relaxed font-light text-justify text-sm lg:text-base">
              Ser reconocidos como un referente en soluciones tecnológicas
              personalizadas en Latinoamérica, destacando por innovación,
              calidad humana y resultados tangibles para nuestros clientes.
            </p>
          </article>
        </div>
      </div>
    </section>
  );
};

export default About;
