import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "HolaCompi - AI Voice Agents for Spanish Businesses",
  description: "Building the future of automated customer calls",
};

export default function HolaCompiPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-[#1a1625] to-[#2d1f3d] text-white flex items-center justify-center overflow-hidden">
      {/* Background effects */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-20 left-10 text-6xl animate-pulse">✨</div>
        <div className="absolute top-40 right-20 text-5xl animate-bounce" style={{ animationDuration: '2s' }}>🚀</div>
        <div className="absolute bottom-40 left-20 text-5xl animate-pulse" style={{ animationDelay: '0.5s' }}>💫</div>
        <div className="absolute bottom-20 right-10 text-6xl animate-bounce" style={{ animationDuration: '3s' }}>🤖</div>
      </div>

      <div className="text-center px-6 relative z-10">
        <div className="text-7xl mb-8 animate-bounce" style={{ animationDuration: '2s' }}>
          🤖📞
        </div>
        
        <h1 className="text-6xl font-bold mb-6 bg-gradient-to-r from-pink-500 via-purple-500 to-pink-500 bg-[length:200%_auto] animate-gradient bg-clip-text text-transparent">
          HolaCompi
        </h1>
        
        <h2 className="text-3xl text-white/90 mb-6 font-light">
          AI Voice Agents for Spanish Businesses
        </h2>
        
        <div className="inline-block bg-gradient-to-r from-pink-500/30 to-purple-500/30 border border-pink-500/40 rounded-full px-8 py-3 mb-10 backdrop-blur">
          <span className="text-2xl font-medium">🚀 Launching March 2026</span>
        </div>
        
        <p className="text-xl text-white/70 mb-10 max-w-md mx-auto">
          Building the future of automated customer calls
        </p>
        
        <div className="text-white/50 text-lg">
          <p>For inquiries: <a href="mailto:Holac@HolaCompi.com" className="text-pink-400 hover:text-pink-300 transition">Holac@HolaCompi.com</a></p>
        </div>

        <div className="mt-16 pt-8 border-t border-white/10">
          <Link href="/" className="text-pink-400 hover:text-pink-300 transition text-lg">
            ← Back to SiteMente
          </Link>
        </div>
      </div>
    </div>
  );
}