UFO menu and contact full

Refactor UFO navigation with CompactPriceTicker, enhance DesktopNav, overhaul AI chatbot promo, restore contact form with validation, and add edge function for sending emails. Also remove PromoBanner and integrate promo into AI.

X-Lovable-Edit-ID: edt-95bd8b3a-7b6c-49b1-a815-db855bdb6243

Author: lovable-dev[bot]

src/components/AIChatbot.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { X, Loader2, Shield, Zap, HeadphonesIcon, Bot } from 'lucide-react';
+import { X, Loader2, Shield, Zap, HeadphonesIcon, Bot, Sparkles, Rocket } from 'lucide-react';
 import { toast } from 'sonner';
 import aiTorAvatar from '@/assets/ai-tor-avatar.jpg';
 
 // AI Personalities with unique messages and slight visual variations
+// Now includes promotional messages integrated into personalities
 const AI_PERSONALITIES = [
   {
     id: 'support',
@@ -61,6 +62,34 @@ const AI_PERSONALITIES = [
       "¿Buscas algo específico en el ecosistema?",
       "Déjame mostrarte lo que puedes hacer aquí.",
     ]
+  },
+  {
+    id: 'promo',
+    name: 'AI Tor',
+    role: 'Promociones',
+    icon: Sparkles,
+    color: 'from-pink-500 to-rose-500',
+    borderColor: 'border-pink-500/50',
+    messages: [
+      "🚀 ¡Únete a AlienFlowSpace DAO y obtén NFTs exclusivos!",
+      "🎁 Descubre los beneficios de ser miembro de la DAO",
+      "💎 Colecciona NFTs únicos en nuestro ecosistema",
+      "🌟 ¡Nuevas propuestas en la DAO! Tu voto cuenta",
+      "🔥 Explora Academy, Clubs y CoNetWorKing - ¡Todo te espera!",
+    ]
+  },
+  {
+    id: 'welcome',
+    name: 'AI Tor',
+    role: 'Bienvenida',
+    icon: Rocket,
+    color: 'from-orange-500 to-amber-500',
+    borderColor: 'border-orange-500/50',
+    messages: [
+      "👽 ¡Bienvenido viajero! ¿Primera vez aquí? Te ayudo a explorar",
+      "🌌 El universo AlienFlowSpace te espera. ¿Qué quieres descubrir?",
+      "✨ ¿Listo para tu viaje cósmico? Pregúntame lo que quieras",
+    ]
   }
 ];
 
@@ -72,6 +101,7 @@ const AIChatbot = () => {
   const [shouldLoadIframe, setShouldLoadIframe] = useState(false);
   const [currentPersonality, setCurrentPersonality] = useState(0);
   const [proactiveMessage, setProactiveMessage] = useState('');
+  const [messageCount, setMessageCount] = useState(0);
 
   // Get current personality
   const personality = useMemo(() => AI_PERSONALITIES[currentPersonality], [currentPersonality]);
@@ -85,10 +115,13 @@ const AIChatbot = () => {
     return () => clearTimeout(timer);
   }, []);
 
-  // Proactive engagement with rotating personalities
+  // Proactive engagement with rotating personalities - shorter initial delay
   useEffect(() => {
     if (hasInteracted || isOpen) return;
 
+    // First message after 30 seconds
+    const initialDelay = messageCount === 0 ? 30000 : 120000; // 30s first, then 2min
+    
     const timer = setTimeout(() => {
       // Pick random personality and message
       const randomPersonalityIndex = Math.floor(Math.random() * AI_PERSONALITIES.length);
@@ -98,21 +131,31 @@ const AIChatbot = () => {
       setCurrentPersonality(randomPersonalityIndex);
       setProactiveMessage(randomMessage);
       setShowProactive(true);
+      setMessageCount(prev => prev + 1);
 
-      // Auto-hide after 10 seconds
-      setTimeout(() => setShowProactive(false), 10000);
-    }, 45000);
+      // Auto-hide after 12 seconds
+      setTimeout(() => setShowProactive(false), 12000);
+    }, initialDelay);
 
     return () => clearTimeout(timer);
-  }, [hasInteracted, isOpen]);
+  }, [hasInteracted, isOpen, messageCount]);
 
-  // Track user interaction
+  // Track user interaction - only on meaningful interactions
   useEffect(() => {
-    const handleInteraction = () => setHasInteracted(true);
-    window.addEventListener('click', handleInteraction, { once: true });
-    window.addEventListener('scroll', handleInteraction, { once: true });
+    const handleInteraction = () => {
+      // Don't mark as interacted if just scrolling slightly
+      if (window.scrollY > 200) {
+        setHasInteracted(true);
+      }
+    };
+    
+    const handleClick = () => setHasInteracted(true);
+    
+    window.addEventListener('click', handleClick, { once: true });
+    window.addEventListener('scroll', handleInteraction);
+    
     return () => {
-      window.removeEventListener('click', handleInteraction);
+      window.removeEventListener('click', handleClick);
       window.removeEventListener('scroll', handleInteraction);
     };
   }, []);
@@ -144,19 +187,19 @@ const AIChatbot = () => {
         )}
       </AnimatePresence>
 
-      {/* Proactive Engagement Bubble with Personality */}
+      {/* Proactive Engagement Bubble with Personality - FIXED: Right side */}
       <AnimatePresence>
         {showProactive && !isOpen && (
           <motion.div
             initial={{ opacity: 0, x: 20, scale: 0.8 }}
             animate={{ opacity: 1, x: 0, scale: 1 }}
             exit={{ opacity: 0, x: 20, scale: 0.8 }}
             className="fixed bottom-36 right-4 sm:bottom-40 sm:right-8 z-40 
-              max-w-[280px] rounded-2xl rounded-br-sm overflow-hidden
+              max-w-[300px] rounded-2xl rounded-br-sm overflow-hidden
               backdrop-blur-xl border shadow-2xl cursor-pointer"
             style={{
               background: 'linear-gradient(135deg, rgba(17,17,25,0.95) 0%, rgba(30,30,40,0.95) 100%)',
-              borderColor: `rgba(${personality.id === 'support' ? '57,255,20' : personality.id === 'dao' ? '240,216,130' : personality.id === 'sentinel' ? '168,85,247' : '34,211,238'},0.4)`
+              borderColor: `rgba(${personality.id === 'support' ? '57,255,20' : personality.id === 'dao' ? '240,216,130' : personality.id === 'sentinel' ? '168,85,247' : personality.id === 'promo' ? '236,72,153' : personality.id === 'welcome' ? '249,115,22' : '34,211,238'},0.4)`
             }}
             onClick={handleOpen}
           >
@@ -175,7 +218,9 @@ const AIChatbot = () => {
                   style={{
                     filter: personality.id === 'sentinel' ? 'hue-rotate(270deg)' : 
                            personality.id === 'guide' ? 'hue-rotate(180deg)' : 
-                           personality.id === 'dao' ? 'sepia(30%)' : 'none'
+                           personality.id === 'dao' ? 'sepia(30%)' : 
+                           personality.id === 'promo' ? 'hue-rotate(320deg)' :
+                           personality.id === 'welcome' ? 'hue-rotate(30deg)' : 'none'
                   }}
                 />
               </div>
@@ -185,6 +230,12 @@ const AIChatbot = () => {
               <p className="text-gray-200 font-exo text-sm leading-relaxed">
                 {proactiveMessage}
               </p>
+              {/* CTA for promo messages */}
+              {personality.id === 'promo' && (
+                <span className="inline-block mt-2 text-xs text-alien-gold font-nasalization hover:text-alien-green transition-colors">
+                  Descubre más →
+                </span>
+              )}
             </div>
             {/* Close button */}
             <button
@@ -199,7 +250,7 @@ const AIChatbot = () => {
         )}
       </AnimatePresence>
 
-      {/* Floating Button with pulsing ring */}
+      {/* Floating Button - FIXED: Positioned at bottom RIGHT */}
       <motion.button
         initial={{ opacity: 0, scale: 0.5 }}
         animate={{ opacity: 1, scale: 1 }}
@@ -340,4 +391,4 @@ const AIChatbot = () => {
   );
 };
 
-export default AIChatbot;
+export default AIChatbot;

src/components/CompactPriceTicker.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+import { TrendingUp, TrendingDown } from 'lucide-react';
+
+interface CryptoPrice {
+  id: string;
+  symbol: string;
+  price: number;
+  change24h: number;
+}
+
+const CRYPTO_IDS = ['bitcoin', 'ethereum', 'solana', 'polygon-ecosystem-token'];
+
+const CompactPriceTicker: React.FC = () => {
+  const [prices, setPrices] = useState<CryptoPrice[]>([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const fetchPrices = async () => {
+      try {
+        const response = await fetch(
+          `https://api.coingecko.com/api/v3/simple/price?ids=${CRYPTO_IDS.join(',')}&vs_currencies=usd&include_24hr_change=true`
+        );
+        const data = await response.json();
+        
+        const symbolMap: Record<string, string> = {
+          'bitcoin': 'BTC',
+          'ethereum': 'ETH',
+          'solana': 'SOL',
+          'polygon-ecosystem-token': 'POL'
+        };
+
+        const formattedPrices: CryptoPrice[] = CRYPTO_IDS.map(id => ({
+          id,
+          symbol: symbolMap[id] || id.toUpperCase(),
+          price: data[id]?.usd || 0,
+          change24h: data[id]?.usd_24h_change || 0
+        }));
+
+        setPrices(formattedPrices);
+      } catch (error) {
+        console.error('Error fetching crypto prices:', error);
+      }
+    };
+
+    fetchPrices();
+    const interval = setInterval(fetchPrices, 60000); // Update every minute
+    return () => clearInterval(interval);
+  }, []);
+
+  // Rotate through cryptos
+  useEffect(() => {
+    const rotateInterval = setInterval(() => {
+      setCurrentIndex(prev => (prev + 1) % prices.length);
+    }, 4000);
+    return () => clearInterval(rotateInterval);
+  }, [prices.length]);
+
+  if (prices.length === 0) {
+    return null;
+  }
+
+  const currentCrypto = prices[currentIndex];
+  const isPositive = currentCrypto?.change24h >= 0;
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 bg-alien-space-dark/60 rounded-full border border-alien-gold/20 text-xs font-mono">
+      <span className="text-alien-gold font-semibold">{currentCrypto?.symbol}</span>
+      <span className="text-gray-300">
+        ${currentCrypto?.price >= 1000 
+          ? currentCrypto?.price.toLocaleString(undefined, { maximumFractionDigits: 0 })
+          : currentCrypto?.price.toFixed(2)
+        }
+      </span>
+      <span className={`flex items-center gap-0.5 ${isPositive ? 'text-alien-green' : 'text-red-400'}`}>
+        {isPositive ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
+        {Math.abs(currentCrypto?.change24h || 0).toFixed(1)}%
+      </span>
+    </div>
+  );
+};
+
+export default CompactPriceTicker;

src/components/Header/DesktopNav.tsx

@@ -1,7 +1,6 @@
-
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Globe, ChevronDown } from 'lucide-react';
+import { Globe, ChevronDown, ArrowLeftRight } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,7 +10,11 @@ import {
 import { Button } from "@/components/ui/button";
 import { translateTo } from '@/lib/translator';
 
-const DesktopNav = () => {
+interface DesktopNavProps {
+  isCompact?: boolean;
+}
+
+const DesktopNav: React.FC<DesktopNavProps> = ({ isCompact = false }) => {
   const navLinks = [
     { to: "/", label: "Home" },
     { to: "/about", label: "About" },
@@ -40,14 +43,16 @@ const DesktopNav = () => {
   };
 
   return (
-    <nav className="hidden lg:flex items-center gap-8">
-      <div className="flex items-center space-x-6">
+    <nav className="hidden lg:flex items-center gap-6">
+      <div className={`flex items-center ${isCompact ? 'space-x-4' : 'space-x-6'}`}>
         {/* Main Navigation */}
         {navLinks.map((link) => (
           <Link 
             key={link.to}
             to={link.to} 
-            className="text-alien-gold hover:text-alien-green px-3 py-2 font-nasalization transition-all duration-300 hover:scale-105 relative group"
+            className={`text-alien-gold hover:text-alien-green font-nasalization transition-all duration-300 hover:scale-105 relative group ${
+              isCompact ? 'text-sm px-2 py-1' : 'px-3 py-2'
+            }`}
           >
             {link.label}
             <span className="absolute inset-x-0 -bottom-1 h-0.5 bg-alien-green scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
@@ -59,10 +64,12 @@ const DesktopNav = () => {
           <DropdownMenuTrigger asChild>
             <Button 
               variant="ghost" 
-              className="text-alien-gold hover:text-alien-green bg-transparent hover:bg-alien-space-light/20 px-3 py-2 rounded-lg flex items-center group font-nasalization transition-all duration-300 hover:scale-105"
+              className={`text-alien-gold hover:text-alien-green bg-transparent hover:bg-alien-space-light/20 rounded-lg flex items-center group font-nasalization transition-all duration-300 hover:scale-105 ${
+                isCompact ? 'text-sm px-2 py-1' : 'px-3 py-2'
+              }`}
             >
-              <span>Explore Spaces</span>
-              <ChevronDown className="ml-2 h-4 w-4 transform transition-transform duration-300 group-data-[state=open]:rotate-180" />
+              <span>{isCompact ? 'Spaces' : 'Explore Spaces'}</span>
+              <ChevronDown className={`ml-1 transform transition-transform duration-300 group-data-[state=open]:rotate-180 ${isCompact ? 'h-3 w-3' : 'h-4 w-4'}`} />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent 
@@ -88,16 +95,31 @@ const DesktopNav = () => {
             </div>
           </DropdownMenuContent>
         </DropdownMenu>
+
+        {/* DEX Button */}
+        <a
+          href="https://app.uniswap.org/swap"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={`flex items-center gap-1.5 bg-gradient-to-r from-alien-green/20 to-alien-gold/20 hover:from-alien-green/30 hover:to-alien-gold/30 border border-alien-green/40 hover:border-alien-green/60 rounded-full font-nasalization text-alien-green hover:text-alien-gold transition-all duration-300 hover:scale-105 ${
+            isCompact ? 'text-xs px-2.5 py-1' : 'text-sm px-3 py-1.5'
+          }`}
+        >
+          <ArrowLeftRight className={isCompact ? 'w-3 h-3' : 'w-4 h-4'} />
+          <span>DEX</span>
+        </a>
 
         {/* Language Selector Dropdown */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button 
               variant="ghost" 
-              className="flex items-center text-alien-gold hover:text-alien-green focus:outline-none group p-2 hover:bg-alien-space-light/20 rounded-lg transition-all duration-300 hover:scale-105"
+              className={`flex items-center text-alien-gold hover:text-alien-green focus:outline-none group hover:bg-alien-space-light/20 rounded-lg transition-all duration-300 hover:scale-105 ${
+                isCompact ? 'p-1.5' : 'p-2'
+              }`}
             >
-              <Globe className="h-5 w-5" />
-              <ChevronDown className="ml-1 h-4 w-4 transform transition-transform duration-300 group-data-[state=open]:rotate-180" />
+              <Globe className={isCompact ? 'h-4 w-4' : 'h-5 w-5'} />
+              <ChevronDown className={`ml-1 transform transition-transform duration-300 group-data-[state=open]:rotate-180 ${isCompact ? 'h-3 w-3' : 'h-4 w-4'}`} />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent 
@@ -128,4 +150,4 @@ const DesktopNav = () => {
   );
 };
 
-export default DesktopNav;
+export default DesktopNav;