import React, { useState, useEffect, useRef, useMemo } from 'react'; import { initializeApp } from 'firebase/app'; import { getAuth, signInAnonymously, onAuthStateChanged } from 'firebase/auth'; // --- DESIGN TOKENS --- const COLORS = { azure: '#1D4ED8', navy: '#020617', slate: '#64748B', grid: 'rgba(29, 78, 216, 0.08)', accent: '#3B82F6', parchment: '#FDFCF7' }; const App = () => { const [user, setUser] = useState(null); const [brandInput, setBrandInput] = useState(''); const [evaluation, setEvaluation] = useState(null); const [loading, setLoading] = useState(false); const [activeSector, setActiveSector] = useState('home'); const [libsLoaded, setLibsLoaded] = useState(false); const canvasRef = useRef(null); const apiKey = ""; // API key provided by environment // --- UTILS: API Call with Exponential Backoff --- const callGemini = async (prompt, systemInstruction) => { const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`; const payload = { contents: [{ parts: [{ text: prompt }] }], systemInstruction: { parts: [{ text: systemInstruction }] }, generationConfig: { responseMimeType: "application/json" } }; const delays = [1000, 2000, 4000, 8000]; for (let i = 0; i < delays.length; i++) { try { const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (!response.ok) throw new Error(); const data = await response.json(); return JSON.parse(data.candidates[0].content.parts[0].text); } catch (e) { if (i === delays.length - 1) return null; await new Promise(r => setTimeout(r, delays[i])); } } }; // --- DYNAMIC LIBRARY LOADING --- useEffect(() => { const script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/chart.js'; script.async = true; script.onload = () => setLibsLoaded(true); document.head.appendChild(script); }, []); // --- FIREBASE AUTH --- useEffect(() => { const firebaseConfig = JSON.parse(__firebase_config); const app = initializeApp(firebaseConfig); const auth = getAuth(app); signInAnonymously(auth); const unsubscribe = onAuthStateChanged(auth, setUser); return () => unsubscribe(); }, []); // --- AI HANDLER --- const handleEvaluation = async () => { if (!brandInput) return; setLoading(true); setEvaluation(null); const system = `You are the Syndicate Compatibility Protocol for Ben Wood (Award-winning Australian photographer). NEW THEME: Improving life through world exploration and seeking rare perspectives. MISSION: Turkmenistan (Closed borders), Uzbekistan (Ancient Symmetry), Kyrgyzstan (World Nomad Games). ECOSYSTEM: Hardcover Photobook, Solo Gallery Exhibition, Limited Edition Print Runs, YouTube Series (Professional Editor assigned). MARKETING MOMENTUM: Active project library queue ready for launch. Evaluate the brand provided. Focus on how their product gains value through Ben's "new eyes" and the legacy assets (Book/Exhibition). Output JSON: { matchRating: 0-100, pillars: { perspective: 0-100, legacy: 0-100, nomadicUtility: 0-100 }, justification: "Punchy 2-paragraph justification. Mention the Book/Exhibition ROI.", visualIntel: "Specific high-value shot/mention idea for this brand in Central Asia (e.g. YouTube credit or Book page)." }`; const result = await callGemini(`Audit brand compatibility for: ${brandInput}`, system); if (result) setEvaluation(result); setLoading(false); }; // --- BACKGROUND CANVAS ENGINE --- useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); let animationFrame; const draw = (time) => { ctx.fillStyle = COLORS.parchment; ctx.fillRect(0, 0, canvas.width, canvas.height); const spacing = 120; ctx.beginPath(); ctx.strokeStyle = COLORS.grid; ctx.lineWidth = 1; for(let i = 0; i <= canvas.width / spacing; i++) { ctx.moveTo(i * spacing, 0); ctx.lineTo(i * spacing, canvas.height); } for(let j = 0; j <= canvas.height / spacing; j++) { ctx.moveTo(0, j * spacing); ctx.lineTo(canvas.width, j * spacing); } ctx.stroke(); // Topographic "Adventure Map" ripples ctx.beginPath(); ctx.strokeStyle = 'rgba(29, 78, 216, 0.06)'; for (let i = 0; i < 4; i++) { const offset = (time / 10000 + i/4) % 1; const radius = Math.max(canvas.width, canvas.height) * offset; ctx.moveTo(canvas.width/2 + radius, canvas.height/2); ctx.arc(canvas.width/2, canvas.height/2, radius, 0, Math.PI * 2); } ctx.stroke(); animationFrame = requestAnimationFrame(draw); }; const resize = () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }; window.addEventListener('resize', resize); resize(); draw(0); return () => { cancelAnimationFrame(animationFrame); window.removeEventListener('resize', resize); }; }, []); // --- LOGISTICS CHART --- useEffect(() => { if (!libsLoaded) return; const ctx = document.getElementById('logisticsChart')?.getContext('2d'); let chart; if (ctx) { chart = new window.Chart(ctx, { type: 'doughnut', data: { labels: ['Overland Logistics', 'Hardcover Book', 'Gallery Exhibition', 'YouTube/Media'], datasets: [{ data: [28500, 5000, 4000, 3500], backgroundColor: [COLORS.azure, COLORS.navy, COLORS.accent, COLORS.slate], borderWidth: 0 }] }, options: { responsive: true, cutout: '85%', plugins: { legend: { position: 'bottom', labels: { font: { size: 10, family: 'JetBrains Mono' } } } } } }); } return () => chart?.destroy(); }, [libsLoaded]); // --- SCROLL TRACKING --- useEffect(() => { const handleScroll = () => { const scrollPos = window.scrollY + 400; const ids = ['home', 'mission', 'protocol', 'ecosystem', 'logistics']; for (const id of ids) { const el = document.getElementById(id); if (el && scrollPos >= el.offsetTop && scrollPos < el.offsetTop + el.offsetHeight) { setActiveSector(id); break; } } }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); const progressHeight = useMemo(() => { const mapping = { home: '0%', mission: '25%', protocol: '50%', ecosystem: '75%', logistics: '100%' }; return mapping[activeSector] || '0%'; }, [activeSector]); return ( ); }; export default App;