import React, { useState } from ‘react’;
import { motion } from ‘framer-motion’;
import { Mail, Phone, User, Lock, MessageCircle } from ‘lucide-react’;
// Importaciones de componentes de UI y utilidades usando el alias de proyecto
import { Button } from ‘@/components/ui/button’;
import { Input } from ‘@/components/ui/input’;
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ‘@/components/ui/select’;
import { toast } from ‘@/components/ui/use-toast’;
import { supabase } from ‘@/lib/customSupabaseClient’;
import {
AlertDialog,
AlertDialogContent,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogAction,
} from «@/components/ui/alert-dialog»;
const LandingPage = () => {
// Estado para manejar los datos del formulario
const [formData, setFormData] = useState({
fullName: »,
email: »,
countryCode: ‘+57-Colombia’, // Código por defecto para el ejemplo
whatsapp: »
});
const [isSubmitting, setIsSubmitting] = useState(false);
const [showSuccessModal, setShowSuccessModal] = useState(false);
// Lista de países para el selector de WhatsApp
const countries = [{
code: ‘+1’,
name: ‘Estados Unidos’,
flag: ‘🇺🇸’
}, {
code: ‘+1’,
name: ‘Canadá’,
flag: ‘🇨🇦’
}, {
code: ‘+52’,
name: ‘México’,
flag: ‘🇲🇽’
}, {
code: ‘+54’,
name: ‘Argentina’,
flag: ‘🇦🇷’
}, {
code: ‘+55’,
name: ‘Brasil’,
flag: ‘🇧🇷’
}, {
code: ‘+56’,
name: ‘Chile’,
flag: ‘🇨🇱’
}, {
code: ‘+57’,
name: ‘Colombia’,
flag: ‘🇨🇴’
}, {
code: ‘+58’,
name: ‘Venezuela’,
flag: ‘🇻🇪’
}, {
code: ‘+591’,
name: ‘Bolivia’,
flag: ‘🇧🇴’
}, {
code: ‘+593’,
name: ‘Ecuador’,
flag: ‘🇪🇨’
}, {
code: ‘+595’,
name: ‘Paraguay’,
flag: ‘🇵🇾’
}, {
code: ‘+51’,
name: ‘Perú’,
flag: ‘🇵🇪’
}, {
code: ‘+598’,
name: ‘Uruguay’,
flag: ‘🇺🇾’
}, {
code: ‘+34’,
name: ‘España’,
flag: ‘🇪🇸’
}, {
code: ‘+33’,
name: ‘Francia’,
flag: ‘🇫🇷’
}, {
code: ‘+49’,
name: ‘Alemania’,
flag: ‘🇩🇪’
}, {
code: ‘+44’,
name: ‘Reino Unido’,
flag: ‘🇬🇧’
}];
// Función para manejar la unión al grupo (simulada con toast)
const handleGroupJoin = () => {
toast({
title: «✅ Redireccionando a WhatsApp»,
description: «Serás dirigido al grupo de la comunidad para recibir tu guía.»,
});
// Aquí iría la lógica real de redirección, por ejemplo:
// window.open(«https://chat.whatsapp.com/TuLinkDeGrupo», «_blank»);
};
// Función para manejar el envío del formulario
const handleSubmit = async (e) => {
e.preventDefault();
if (!formData.fullName || !formData.email || !formData.whatsapp) {
toast({
title: «Acceso Denegado»,
description: «Debes completar todos los campos para desbloquear el acceso.»,
variant: «destructive»
});
return;
}
setIsSubmitting(true);
const selectedCountry = countries.find(c => `${c.code}-${c.name}` === formData.countryCode);
const fullWhatsapp = `${selectedCountry.code}${formData.whatsapp}`;
// — Lógica de Supabase para guardar el registro —
// NOTA: Esta tabla ‘registrations’ debe existir en tu base de datos Supabase
const { error } = await supabase
.from(‘registrations’)
.insert([{
name: formData.fullName,
email: formData.email,
whatsapp: fullWhatsapp
}]);
setIsSubmitting(false);
if (error) {
console.error(«Error de Supabase:», error); // Para depuración
toast({
title: «Error al registrar»,
description: «Hubo un problema al guardar tus datos. Inténtalo de nuevo.»,
variant: «destructive»
});
} else {
setShowSuccessModal(true);
// Limpiar formulario
setFormData({
fullName: »,
email: »,
countryCode: ‘+57-Colombia’,
whatsapp: »
});
}
};
const selectedCountry = countries.find(c => `${c.code}-${c.name}` === formData.countryCode) || countries[0];
return (
<>
{/* Fondo de Trading (Estética Cinematográfica) */}
{/* Imagen de fondo con opacidad baja, representando un mercado de trading o ambiente oscuro */}
{/* Capas de Color y Blur para Profundidad */}
{/* Columna Izquierda: Contenido y Formulario (Order 1 en móvil/tablet) */}
LA GUÍA PROHIBIDA DEL TRADER
El método oculto que te revelará cómo ganar dinero con el trading en solo 10 horas.
Descubre lo que los traders profesionales no quieren que sepas.
Accede a tres secretos que transformarán tu forma de ver el mercado.
Pero cuidado… esta información no es para todos.
{/* Contenedor del Formulario */}
Recibirás la guía directamente en tu correo y WhatsApp. Tus datos están protegidos con Sharks.
{/* Columna Derecha: Mockup Animado (Order 2 en móvil/tablet) */}
{/* Sombra pulsante para efecto de impacto */}
{/* Mockup del Producto con animación de flotación */}
{/* URL del Mockup de la Guía */}
{/* Modal de Éxito / Confirmación */}
¡Acceso Desbloqueado!
Tu guía será enviada al correo y WhatsApp que registraste.
¡Únete al grupo para conocer más secretos! setShowSuccessModal(false)}
className=»w-full bg-gray-700 hover:bg-gray-600 text-white»
>
Cerrar
);
};
export default LandingPage;
