import React, { useState, useRef, useEffect } from 'react'; import { ZoomIn, ZoomOut, Volume2, Play } from 'lucide-react'; const WhiteboardExplorer = () => { const [position, setPosition] = useState({ x: 0, y: 0 }); const [zoom, setZoom] = useState(1); const [isDragging, setIsDragging] = useState(false); const [startPosition, setStartPosition] = useState({ x: 0, y: 0 }); const containerRef = useRef(null); const contentAreas = [ { id: 1, title: "Sarah Stuntz's AMA Journey", content: "Sarah Stuntz, principal of Excel Academy High School in Boston, MA, participated in AMA's Cohort 3. She implemented AMA practices, significantly impacting her team's culture and student outcomes.", x: 50, y: 50, width: 300, height: 250, video: "https://www.youtube.com/embed/VlmIAnxHEFY" }, { id: 2, title: "AMA Foundations and Habits of Mind", content: "Leaders in the AMA program reflect on their schools and systems through the lens of 'all students'. They refine mission and values, draft hiring sequences, build inclusive and ambitious goals, and commit to next steps.", x: 400, y: 50, width: 300, height: 250, image: "/api/placeholder/280/150" }, { id: 3, title: "Insights from Lindsay Kruse", content: "\"At All Means All, our 15-month cohort experience uniquely addresses critical needs we saw as parents of students with disabilities.\"", x: 50, y: 350, width: 300, height: 200, audio: "https://educatingalllearners.podbean.com/e/disrupting-school-and-system-disproportionalities-5-minutes-with-all-means-all/" } ]; const handleMouseDown = (e) => { setIsDragging(true); setStartPosition({ x: e.clientX - position.x, y: e.clientY - position.y }); }; const handleMouseMove = (e) => { if (isDragging) { setPosition({ x: e.clientX - startPosition.x, y: e.clientY - startPosition.y, }); } }; const handleMouseUp = () => { setIsDragging(false); }; const handleZoomIn = () => { setZoom(prevZoom => Math.min(prevZoom + 0.1, 2)); }; const handleZoomOut = () => { setZoom(prevZoom => Math.max(prevZoom - 0.1, 0.5)); }; useEffect(() => { const container = containerRef.current; container.addEventListener('mousedown', handleMouseDown); container.addEventListener('mousemove', handleMouseMove); container.addEventListener('mouseup', handleMouseUp); container.addEventListener('mouseleave', handleMouseUp); return () => { container.removeEventListener('mousedown', handleMouseDown); container.removeEventListener('mousemove', handleMouseMove); container.removeEventListener('mouseup', handleMouseUp); container.removeEventListener('mouseleave', handleMouseUp); }; }, [isDragging, startPosition]); return ( ); }; export default WhiteboardExplorer;