// Footer — physics sign wall + utility footer (social & legal from Supabase) const PALETTE = [ { id:"default", bg:null, fg:null, swatch:"var(--bg-surface-2)", border:"var(--border-default)" }, { id:"flame", bg:"#FD3A25", fg:"#fff", swatch:"#FD3A25" }, { id:"cobalt", bg:"#2563EB", fg:"#fff", swatch:"#2563EB" }, { id:"emerald", bg:"#16A34A", fg:"#fff", swatch:"#16A34A" }, { id:"violet", bg:"#7C3AED", fg:"#fff", swatch:"#7C3AED" }, { id:"amber", bg:"#D97706", fg:"#fff", swatch:"#D97706" }, { id:"rose", bg:"#DB2777", fg:"#fff", swatch:"#DB2777" }, { id:"ink", bg:"#09090B", fg:"#fff", swatch:"#09090B" }, ]; const CANVAS_H = 600; const GRAVITY = 0.055; const DAMP_X = 0.975; const DAMP_Y = 0.978; const FLR_BNCE = 0.12; const WALL_BNCE = 0.18; const MAX_ITEMS = 80; function pillWidth(name) { return Math.min(name.length, 30) * 7.4 + 32; } // ─── Social icon map ────────────────────────────────────────── const SOCIAL_ICONS = { twitter: , linkedin: , github: , dribbble: , instagram: , facebook: , youtube: , tiktok: , behance: , }; // ─── Physics wall ───────────────────────────────────────────── const PhysicsWall = React.forwardRef(({ initialEntries }, ref) => { const containerRef = React.useRef(null); const stateRef = React.useRef({ items:[], dragging:null, W:0, raf:null }); React.useImperativeHandle(ref, () => ({ addItem: (name, color) => spawnText(name, color), addImageItem: (dataUrl, color, w, h) => spawnImage(dataUrl, color, w, h), })); function attachDrag(item) { const state = stateRef.current; let lx = 0, ly = 0, vx = 0, vy = 0; const onDown = (e) => { e.stopPropagation(); e.preventDefault(); state.dragging = item.id; item.el.style.cursor = "grabbing"; item.el.style.zIndex = "20"; item.el.style.boxShadow = "var(--shadow-btn-dark)"; const cx = e.clientX ?? e.touches?.[0]?.clientX; const cy = e.clientY ?? e.touches?.[0]?.clientY; lx = cx; ly = cy; vx = 0; vy = 0; const onMove = (ev) => { ev.preventDefault(); const mx = ev.clientX ?? ev.touches?.[0]?.clientX; const my = ev.clientY ?? ev.touches?.[0]?.clientY; vx = mx - lx; vy = my - ly; lx = mx; ly = my; const r = containerRef.current.getBoundingClientRect(); item.x = mx - r.left - item.w / 2; item.y = my - r.top - item.h / 2; item.el.style.transform = `translate(${item.x}px,${item.y}px)`; }; const onUp = () => { state.dragging = null; item.el.style.cursor = "grab"; item.el.style.zIndex = ""; item.el.style.boxShadow = ""; item.vx = vx * 0.45; item.vy = vy * 0.45; window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); window.removeEventListener("touchmove", onMove); window.removeEventListener("touchend", onUp); }; window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); window.addEventListener("touchmove", onMove, { passive:false }); window.addEventListener("touchend", onUp); }; item.el.addEventListener("mousedown", onDown); item.el.addEventListener("touchstart", onDown, { passive:false }); } function pushItem(item) { const state = stateRef.current; if (state.items.length >= MAX_ITEMS) { const old = state.items.shift(); old.el?.parentNode?.removeChild(old.el); } attachDrag(item); state.items.push(item); containerRef.current?.appendChild(item.el); item.el.style.transform = `translate(${item.x}px,${item.y}px)`; } function spawnText(name, color) { const W = stateRef.current.W || containerRef.current?.offsetWidth || 800; const w = pillWidth(name), h = 30; const el = document.createElement("span"); el.className = "ag-wall__entry"; el.textContent = name.length > 30 ? name.slice(0, 29) + "…" : name; let css = "position:absolute;top:0;left:0;cursor:grab;user-select:none;will-change:transform;touch-action:none;"; if (color?.bg) css += `background:${color.bg};color:${color.fg};border-color:${color.bg}40;`; el.style.cssText = css; pushItem({ id: Date.now() + Math.random(), name, el, w, h, x: Math.random() * Math.max(10, W - w - 10) + 5, y: 20, vx: (Math.random() - 0.5) * 1.5, vy: -1.5, }); } function spawnImage(dataUrl, color, iw = 120, ih = 75) { const W = stateRef.current.W || containerRef.current?.offsetWidth || 800; const el = document.createElement("img"); el.src = dataUrl; el.draggable = false; const border = color?.bg ? `2px solid ${color.bg}` : "1px solid var(--border-default)"; el.style.cssText = ` position:absolute;top:0;left:0; width:${iw}px;height:${ih}px; border-radius:10px;border:${border}; background:#fff;object-fit:contain; box-shadow:var(--shadow-btn-light); cursor:grab;user-select:none; will-change:transform;touch-action:none; `; pushItem({ id: Date.now() + Math.random(), name:"sig", el, w:iw, h:ih, x: W / 2 - iw / 2 + (Math.random() - 0.5) * 60, y: 30, vx: (Math.random() - 0.5) * 1.2, vy: -2, }); } React.useEffect(() => { const container = containerRef.current; if (!container) return; const state = stateRef.current; state.W = container.offsetWidth; initialEntries.slice(0, MAX_ITEMS).forEach((entry) => { const colorObj = entry.color ? { bg: entry.color, fg: '#fff' } : null; if (entry.signature_image) { spawnImage(entry.signature_image, colorObj, 120, 75); } else { spawnText(entry.text_content || entry.name, colorObj); } }); const tick = () => { const { items, dragging } = state; const W = state.W; for (let i = 0; i < items.length; i++) { const it = items[i]; if (it.id === dragging) continue; it.vy += GRAVITY; it.vx *= DAMP_X; it.vy *= DAMP_Y; it.x += it.vx; it.y += it.vy; if (it.x < 0) { it.x = 0; it.vx = Math.abs(it.vx) * WALL_BNCE; } if (it.x + it.w > W) { it.x = W - it.w; it.vx = -Math.abs(it.vx) * WALL_BNCE; } if (it.y < 0) { it.y = 0; it.vy = Math.abs(it.vy) * WALL_BNCE; } if (it.y + it.h > CANVAS_H - 1) { it.y = CANVAS_H - it.h - 1; it.vy = Math.abs(it.vy) < 0.8 ? 0 : -Math.abs(it.vy) * FLR_BNCE; it.vx *= 0.88; } it.el.style.transform = `translate(${it.x}px,${it.y}px)`; } for (let i = 0; i < items.length - 1; i++) { for (let j = i + 1; j < items.length; j++) { const a = items[i], b = items[j]; const dx = (a.x + a.w/2) - (b.x + b.w/2); const dy = (a.y + a.h/2) - (b.y + b.h/2); const mnX = (a.w + b.w)/2 + 3; const mnY = (a.h + b.h)/2 + 3; if (Math.abs(dx) < mnX && Math.abs(dy) < mnY) { const px = mnX - Math.abs(dx), py = mnY - Math.abs(dy); if (px < py) { const push = px * 0.28 * Math.sign(dx || 1); if (a.id !== dragging) { a.x += push; a.vx += push * 0.012; } if (b.id !== dragging) { b.x -= push; b.vx -= push * 0.012; } } else { const push = py * 0.28 * Math.sign(dy || 1); if (a.id !== dragging) { a.y += push; a.vy += push * 0.012; } if (b.id !== dragging) { b.y -= push; b.vy -= push * 0.012; } } } } } state.raf = requestAnimationFrame(tick); }; state.raf = requestAnimationFrame(tick); const onResize = () => { state.W = container.offsetWidth; }; window.addEventListener("resize", onResize); return () => { cancelAnimationFrame(state.raf); window.removeEventListener("resize", onResize); state.items.forEach(it => it.el?.parentNode?.removeChild(it.el)); state.items = []; }; }, []); return
; }); // ─── Draw panel ─────────────────────────────────────────────── const DrawPanel = ({ color, onClose, onAdd, lang = 'en' }) => { const canvasRef = React.useRef(null); React.useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); const stroke = color?.bg || "#09090B"; ctx.strokeStyle = stroke; ctx.fillStyle = stroke; ctx.lineWidth = 2.5; ctx.lineCap = "round"; ctx.lineJoin = "round"; let drawing = false, lx = 0, ly = 0; const pos = (e) => { const r = canvas.getBoundingClientRect(); return { x: ((e.clientX ?? e.touches?.[0]?.clientX) - r.left) * (canvas.width / r.width), y: ((e.clientY ?? e.touches?.[0]?.clientY) - r.top) * (canvas.height / r.height), }; }; const onDown = (e) => { e.stopPropagation(); e.preventDefault(); drawing = true; const {x,y} = pos(e); lx=x; ly=y; ctx.beginPath(); ctx.arc(x,y,1.5,0,Math.PI*2); ctx.fill(); }; const onMove = (e) => { if (!drawing) return; e.stopPropagation(); e.preventDefault(); const {x,y} = pos(e); ctx.beginPath(); ctx.moveTo(lx,ly); ctx.lineTo(x,y); ctx.stroke(); lx=x; ly=y; }; const onUp = () => { drawing = false; }; canvas.addEventListener("mousedown", onDown); canvas.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onUp); canvas.addEventListener("touchstart", onDown, { passive:false }); canvas.addEventListener("touchmove", onMove, { passive:false }); canvas.addEventListener("touchend", onUp); return () => { canvas.removeEventListener("mousedown", onDown); canvas.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); canvas.removeEventListener("touchstart", onDown); canvas.removeEventListener("touchmove", onMove); canvas.removeEventListener("touchend", onUp); }; }, [color]); const clear = () => { const ctx = canvasRef.current?.getContext("2d"); if (!ctx) return; ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height); }; return (
{t('wall.drawTitle', lang)}
); }; // ─── Wall section ───────────────────────────────────────────── const PenIcon = () => ( ); const Wall = ({ lang = 'en' }) => { const physicsRef = React.useRef(null); const [value, setValue] = React.useState(""); const [flash, setFlash] = React.useState(false); const [color, setColor] = React.useState(null); const [showDraw, setShowDraw] = React.useState(false); const [entries, setEntries] = React.useState(null); const [pendingData, setPendingData] = React.useState(null); const [showEmailModal, setShowEmailModal] = React.useState(false); const [modalEmail, setModalEmail] = React.useState(''); const [emailSubmitting, setEmailSubmitting] = React.useState(false); const [emailError, setEmailError] = React.useState(''); React.useEffect(() => { db.from('sign_wall_items') .select('id, name, text_content, signature_image, color') .eq('is_hidden', false) .order('created_at', { ascending: false }) .limit(MAX_ITEMS) .then(({ data, error }) => { if (error) console.error('[wall] fetch failed:', error); setEntries(data || []); }); }, []); const triggerFlash = () => { setFlash(true); setTimeout(() => setFlash(false), 1400); }; const submitText = (e) => { e.preventDefault(); const name = value.trim().replace(/[\n\r]/g, "").slice(0, 50); if (!name) return; physicsRef.current?.addItem(name, color); setValue(""); triggerFlash(); setPendingData({ type: 'text', name, text_content: name, signature_image: null, color: color?.bg || null }); setModalEmail(''); setEmailError(''); setShowEmailModal(true); }; const addSignature = (dataUrl) => { physicsRef.current?.addImageItem(dataUrl, color, 120, 75); setShowDraw(false); triggerFlash(); setPendingData({ type: 'logo', name: value.trim() || 'Signature', text_content: null, signature_image: dataUrl, color: color?.bg || null }); setModalEmail(''); setEmailError(''); setShowEmailModal(true); }; const confirmEmail = async (email) => { const trimmed = email.trim(); if (!trimmed || !trimmed.includes('@')) { setEmailError('Please enter a valid email'); return; } setEmailSubmitting(true); setEmailError(''); console.log('[wall] confirming email:', trimmed, 'with pending:', pendingData); const { error } = await db.from('sign_wall_items').insert([{ ...pendingData, email: trimmed, is_hidden: false, }]); if (error) { console.error('[wall] insert failed:', error); if (error.code === '23505' || error.message?.includes('duplicate')) { setEmailError(t('wall.errorDup', lang)); } else { setEmailError(t('wall.errorGeneral', lang)); } setEmailSubmitting(false); return; } localStorage.setItem('signed_wall_email', trimmed); setPendingData(null); setShowEmailModal(false); setModalEmail(''); setEmailError(''); setValue(""); triggerFlash(); setEmailSubmitting(false); }; return (
{entries !== null && }

{t('wall.title', lang)}

{t('wall.sub', lang)}

setValue(e.target.value)} aria-label={t('wall.placeholder', lang)} style={color?.bg ? { borderColor: color.bg, boxShadow: `0 0 0 3px ${color.bg}22` } : {}} />
{t('wall.colorLabel', lang)} {PALETTE.map((p) => (
{flash &&

{t('wall.flash', lang)}

}
{showDraw && setShowDraw(false)} onAdd={addSignature} lang={lang}/>}
{showEmailModal && (
{ setShowEmailModal(false); setEmailError(''); }} role="presentation">
e.stopPropagation()} role="dialog" aria-labelledby="wall-email-title">

{t('wall.modalTitle', lang)}

{t('wall.modalDesc1', lang)}

{t('wall.modalDesc2', lang)}

{ setModalEmail(e.target.value); setEmailError(''); }} disabled={emailSubmitting} aria-invalid={!!emailError} style={{ width: '100%', padding: '10px 12px', borderRadius: '8px', border: emailError ? '1px solid rgb(220,38,38)' : '1px solid var(--border-default)', fontFamily: 'inherit' }} /> {emailError && ( {emailError} )}
)}
); }; // ─── Footer ─────────────────────────────────────────────────── const Footer = ({ lang = 'en' }) => { const [legalPages, setLegalPages] = React.useState([]); const [socialLinks, setSocialLinks] = React.useState([]); const scrollTo = (id) => { const el = document.getElementById(id); if (!el) return; const top = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top, behavior: "smooth" }); }; React.useEffect(() => { // Fetch legal pages for footer links db.from('legal_pages') .select('slug, content_json') .then(({ data }) => { if (data) setLegalPages(data); }); // Fetch social links from settings db.from('content_sections') .select('content_json') .eq('section_name', 'social_links') .single() .then(({ data }) => { if (Array.isArray(data?.content_json)) setSocialLinks(data.content_json); }); }, []); const activeSocial = socialLinks.filter(l => l.url); return ( <> ); }; window.Footer = Footer;