import React, { useState, useEffect, useRef } from 'react';
import { Shield, ChevronRight, Terminal, Calendar, Activity, Lock, ArrowRight, CheckCircle2, X, ChevronLeft, Upload, Camera } from 'lucide-react';
// 1. IMPORTAMOS FIREBASE
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, addDoc, serverTimestamp } from 'firebase/firestore';
// 2. TU CONFIGURACIÓN DE FIREBASE
const firebaseConfig = {
apiKey: "AIzaSyB5HHIls5aH9xJ748qfdpFzS_9w77huObg",
authDomain: "divas-dynasty.firebaseapp.com",
projectId: "divas-dynasty",
storageBucket: "divas-dynasty.firebasestorage.app",
messagingSenderId: "823275700888",
appId: "1:823275700888:web:c6ffc36a83547d2e3586ed",
measurementId: "G-9R5DXBH5P1"
};
// 3. INICIALIZAMOS FIREBASE
let app, auth, db;
try {
app = initializeApp(firebaseConfig);
auth = getAuth(app);
db = getFirestore(app);
} catch (e) {
console.warn("Firebase no inicializado aún. Asegúrate de poner tus credenciales.", e);
}
// --- CUSTOM HOOKS FOR CINEMATIC ANIMATIONS ---
const useScrollFade = (options = {}) => {
const ref = useRef(null);
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.unobserve(entry.target);
}
}, { threshold: 0.1, ...options });
const currentRef = ref.current;
if (currentRef) observer.observe(currentRef);
return () => { if (currentRef) observer.unobserve(currentRef); };
}, [options]);
return [ref, isVisible];
};
// --- COMPONENTS ---
const NoiseOverlay = () => (
);
// --- TEST PORTAL (FULLSCREEN MODAL) ---
const TestPortal = ({ isOpen, onClose }) => {
const [step, setStep] = useState(0);
const [answers, setAnswers] = useState({});
const [isTransitioning, setIsTransitioning] = useState(false);
const [processingProgress, setProcessingProgress] = useState(0);
const [user, setUser] = useState(null);
// Autenticación anónima silenciosa al abrir el portal
useEffect(() => {
if (!auth) return;
const initAuth = async () => {
try {
await signInAnonymously(auth);
} catch (error) {
// Manejo específico del error de configuración faltante
if (error.code === 'auth/configuration-not-found') {
console.error("🔥 ERROR DE FIREBASE: Falta habilitar el inicio de sesión. Ve a Firebase Console -> Authentication -> Sign-in method -> Activa 'Anónimo'.");
} else {
console.error("Error de autenticación:", error);
}
}
};
initAuth();
const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser);
});
return () => unsubscribe();
}, []);
const questions = [
{
id: 'status',
title: "Estado Actual",
text: "¿Cuál es tu nivel actual como creadora de contenido?",
options: [
"Principiante (Aún no he lanzado o acabo de empezar)",
"Activa (Generando ingresos pero estancada)",
"Avanzada (Busco escalar y delegar operaciones)",
"Top 1% (Busco infraestructura de agencia élite)"
]
},
{
id: 'revenue',
title: "Métricas Financieras",
text: "¿Cuál es tu ingreso mensual promedio actual en plataformas de contenido?",
options: ["$0 - $1,000", "$1,000 - $5,000", "$5,000 - $10,000", "+$10,000"]
},
{
id: 'traffic',
title: "Adquisición de Tráfico",
text: "¿Cuál es tu principal canal de adquisición de seguidores actualmente?",
options: ["Instagram / Reels", "TikTok", "Twitter (X)", "Reddit / Otros", "No tengo una fuente de tráfico clara"]
},
{
id: 'time',
title: "Compromiso de Tiempo",
text: "¿Cuántas horas semanales estás dispuesta a invertir exclusivamente en creación de nuevo contenido?",
options: ["Menos de 10 horas", "10 - 20 horas", "20 - 40 horas", "Dedicación exclusiva (Full-time)"]
},
{
id: 'delegation',
title: "Control Operativo",
text: "¿Estás dispuesta a delegar el control total de tus cuentas (chatting, posting, ventas) a nuestro equipo de gestión?",
options: [
"Sí, 100%. Busco que gestionen todo.",
"Sí, pero solo la parte de ventas/chatting.",
"No, prefiero mantener el control de mis mensajes."
]
},
{
id: 'niche',
title: "Perfil y Nicho",
text: "¿Cuál de estos perfiles describe mejor tu estilo y marca personal?",
options: ["Girl Next Door / Amateur", "Modelo Profesional / Editorial", "Cosplay / E-Girl / Nicho Específico", "Explícito / Hardcore"]
},
{
id: 'experience',
title: "Historial de Gestión",
text: "¿Has trabajado previamente o trabajas actualmente con alguna agencia de representación?",
options: ["Sí, trabajo con una actualmente.", "Sí, en el pasado, pero ya no.", "No, nunca he trabajado con agencias."]
},
{
id: 'bottleneck',
title: "Análisis de Cuello de Botella",
text: "¿Cuál consideras que es tu mayor obstáculo actualmente para multiplicar tus ingresos?",
options: [
"Falta de tráfico y nuevos suscriptores.",
"Mala retención (los suscriptores no renuevan).",
"Falta de tiempo para chatear y vender (PPV).",
"Falta de estrategia y dirección profesional."
]
},
{
id: 'investment',
title: "Mentalidad de Negocio",
text: "¿Estás dispuesta a invertir económicamente en tu propia producción (equipos, outfits, fotógrafos) si la estrategia lo requiere?",
options: [
"Sí, entiendo que esto es un negocio.",
"Depende del retorno de inversión (ROI) proyectado.",
"No en este momento, busco cero inversión inicial."
]
},
{
id: 'contact_form',
title: "Identidad y Contacto",
text: "Ingresa tus datos personales para tu expediente.",
type: "form"
},
{
id: 'face_photo',
title: "Verificación de Identidad",
text: "Por motivos de seguridad y verificación estricta (+18), necesitamos una foto clara de tu rostro.",
type: "file",
accept: "image/*"
},
{
id: 'why',
title: "Declaración Final",
text: "En una sola frase, ¿por qué Divas Dynasty debería seleccionarte para su portafolio exclusivo?",
type: "textarea",
placeholder: "Escribe tu respuesta aquí..."
}
];
const handleNext = async (answer) => {
let newAnswers = { ...answers };
if (answer) {
newAnswers[questions[step].id] = answer;
setAnswers(newAnswers);
}
setIsTransitioning(true);
setTimeout(async () => {
// Si llegamos a la última pregunta, guardamos en la base de datos
if (step === questions.length - 1) {
if (db && user) {
try {
// Guarda los datos en una colección llamada 'applications'
await addDoc(collection(db, 'applications'), {
...newAnswers,
applicantId: user.uid,
status: 'pending_review',
timestamp: serverTimestamp()
});
console.log("Aplicación guardada exitosamente en Firebase.");
} catch (error) {
console.error("Error al guardar en Firebase. Revisa las reglas de seguridad de Firestore.", error);
}
} else {
console.warn("⚠️ Simulación UI: Los datos no se guardaron en Firebase porque la autenticación falló. (Falta habilitar inicio de sesión Anónimo).");
}
startProcessing();
} else {
setStep(step + 1);
}
setIsTransitioning(false);
}, 400);
};
const startProcessing = () => {
setStep(questions.length);
setProcessingProgress(0);
const interval = setInterval(() => {
setProcessingProgress(p => {
if (p >= 100) {
clearInterval(interval);
setTimeout(() => setStep(questions.length + 1), 800);
return 100;
}
return p + Math.floor(Math.random() * 12) + 2;
});
}, 200);
};
if (!isOpen) return null;
return (
D
PORTAL DE SELECCIÓN
{step < questions.length && (
Fase de Evaluación — {questions[step].title}
{step + 1} / {questions.length}