import React from "react";
import logoPrincipal from "../assets/TESS.png";

const Hero = () => {
  return (
    <header className="relative min-h-[92vh] flex items-center justify-center overflow-hidden bg-gradient-to-b from-[#020617] to-[#003172]">
      <div className="max-w-7xl mx-auto px-6 lg:px-8 text-center relative z-10 w-full pt-32 pb-16 md:pt-40 md:pb-20 lg:pt-48">
        <div className="main" />

        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold mb-5 md:mb-6 tracking-tight leading-tight drop-shadow-lg drop-shadow-cyan-500/50">
          Tecnologías que impulsan
          <br />
          <span className="text-transparent bg-clip-text bg-[#0cc0df]">
            tu Éxito.
          </span>
        </h1>

        <div className="my-7 md:my-8 flex justify-center">
          <div className="w-full max-w-[240px] sm:max-w-[280px] md:max-w-[320px]">
            <img
              src={logoPrincipal}
              alt="TESS Logo"
              className="w-full h-auto object-contain animate-fade-in drop-shadow-[0_0_10px_rgba(255,255,255,0.8)]"
            />
          </div>
        </div>

        <p
          className="max-w-3xl mx-auto text-lg sm:text-xl md:text-2xl font-normal leading-relaxed text-blue-50/90"
          id="hero-text"
        >
          Desarrollo de software, aplicaciones web eficientes y soporte TI que
          hacen crecer tu negocio con tecnología segura y escalable.
        </p>
      </div>
    </header>
  );
};

export default Hero;
