import antentLogo from "@/assets/antent-logo.png";
import backgroundImage from "@/assets/background.png";

const Index = () => {
  return (
    <div 
      className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden"
      style={{
        backgroundImage: `url(${backgroundImage})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
      }}
    >
      {/* Subtle overlay for depth */}
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-background/30" />
      
      {/* Content container */}
      <div className="relative z-10 flex flex-col items-center justify-center px-6 text-center">
        {/* Logo with glow effect */}
        <div className="animate-fade-in animate-float">
          <img 
            src={antentLogo} 
            alt="antent" 
            className="w-64 md:w-80 lg:w-96 animate-pulse-glow"
          />
        </div>

        {/* Tagline or coming soon */}
        <p className="mt-12 animate-fade-in-delayed text-lg font-light tracking-widest uppercase text-foreground/70">
          Coming Soon
        </p>

        {/* Contact email */}
        <a 
          href="mailto:join@antent.tv"
          className="mt-8 animate-fade-in-delayed text-xl md:text-2xl font-medium tracking-wide text-foreground/90 transition-all duration-300 hover:text-primary glow-text hover:scale-105"
        >
          join@antent.tv
        </a>
      </div>

      {/* Bottom gradient fade */}
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-background/50 to-transparent" />
    </div>
  );
};

export default Index;