INITIALIZING… // — IMPORTS & SETUP — const { useState, useEffect, useRef } = React; const { createRoot } = ReactDOM; // — ICON WRAPPER — const Icon = ({ name, size = 24, className, strokeWidth = 2 }) => { const icons = window.lucide?.icons; if (!icons || !icons[name]) return <span style={{width:size,height:size,display:'inline-block'}} />; return ( <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" className={className} > {icons[name].map((child, i) => { const [tag, attrs] = child; return React.createElement(tag, { …attrs, key: i }); })} </svg> ); }; // — DATA CONSTANTS — const THEMES = [ { id: ‘renewal’, title: ‘Spiritual Renewal’, description: “Focus on personal transformation, prayer, and reconnecting with God’s purpose.”, icon: ‘Flame’, color: ‘text-orange-400’, baseColor: ‘orange’, gradient: ‘from-orange-500/20 to-red-500/20’ }, { id: ‘unity’, title: ‘Unity & Fellowship’, description: ‘Build stronger bonds within your community.’, icon: ‘Users’, color: ‘text-blue-400’, baseColor: ‘blue’, gradient: ‘from-blue-500/20 to-indigo-500/20’ }, { id: ‘study’, title: ‘Biblical Study’, description: ‘Deep dive into Scripture with guided studies.’, icon: ‘BookOpen’, color: ‘text-emerald-400′, baseColor: ’emerald’, gradient: ‘from-emerald-500/20 to-green-500/20’ }, { id: ‘prayer’, title: ‘Prayer & Meditation’, description: ‘Cultivate a deeper prayer life.’, icon: ‘Heart’, color: ‘text-rose-400’, baseColor: ‘rose’, gradient: ‘from-rose-500/20 to-pink-500/20’ }, { id: ‘worship’, title: ‘Worship & Praise’, description: “Experience God’s presence through music.”, icon: ‘Crown’, color: ‘text-yellow-400’, baseColor: ‘yellow’, gradient: ‘from-yellow-500/20 to-amber-500/20’ }, { id: ‘discipleship’, title: ‘Discipleship’, description: ‘Grow in Christian maturity.’, icon: ‘Sprout’, color: ‘text-cyan-400’, baseColor: ‘cyan’, gradient: ‘from-cyan-500/20 to-teal-500/20’ } ]; const DEFAULT_SCHEDULE = [ { day: ‘Friday’, title: ‘Arrival & Opening’, icon: ‘🌅’, items: [ { id: ‘fri-1’, time: ‘6:00 PM’, title: ‘Registration’, description: ‘Check-in, room assignments.’ }, { id: ‘fri-2’, time: ‘7:30 PM’, title: ‘Opening Worship’, description: ‘Set the tone with praise songs.’ }, { id: ‘fri-3’, time: ‘8:30 PM’, title: ‘Icebreaker Activities’, description: ‘Fun, faith-based games to connect.’ }, { id: ‘fri-4’, time: ‘9:30 PM’, title: ‘Evening Prayer’, description: ‘Closing prayer circle.’ } ]}, { day: ‘Saturday’, title: ‘Full Day Program’, icon: ‘☀️’, items: [ { id: ‘sat-1’, time: ‘8:00 AM’, title: ‘Breakfast’, description: ‘Shared meal and bonding.’ }, { id: ‘sat-2’, time: ‘9:00 AM’, title: ‘Teaching Session 1’, description: ‘Core biblical teaching.’ }, { id: ‘sat-3′, time: ’10:45 AM’, title: ‘Small Groups’, description: ‘Breakout groups to apply teaching.’ }, { id: ‘sat-4’, time: ‘1:00 PM’, title: ‘Workshop’, description: ‘Hands-on workshops.’ }, { id: ‘sat-5’, time: ‘7:00 PM’, title: ‘Evening Worship’, description: ‘Worship time with testimonies.’ } ]}, { day: ‘Sunday’, title: ‘Closing & Commitment’, icon: ‘🌄’, items: [ { id: ‘sun-1’, time: ‘9:00 AM’, title: ‘Breakfast’, description: ‘Final meal together.’ }, { id: ‘sun-2′, time: ’10:00 AM’, title: ‘Closing Session’, description: ‘Final teaching and action steps.’ }, { id: ‘sun-3′, time: ’11:30 AM’, title: ‘Prayer & Departure’, description: ‘Closing prayer circle.’ } ]} ]; const THEME_DEVOTIONALS = { renewal: [ { id: ‘ren-1’, verse: “But those who hope in the Lord will renew their strength.”, reference: “Isaiah 40:31”, reflection: “Spiritual burnout is real, but God’s supply of strength is infinite.”, questions: [“Where do you feel depleted?”, “What does ‘waiting’ look like?”] }, { id: ‘ren-2’, verse: “Do not conform to the pattern of this world, but be transformed by the renewing of your mind.”, reference: “Romans 12:2”, reflection: “True renewal starts in the mind.”, questions: [“What worldly patterns are you trapped in?”, “How can you renew your mind?”] }, { id: ‘ren-3’, verse: “Create in me a pure heart, O God, and renew a steadfast spirit within me.”, reference: “Psalm 51:10”, reflection: “We ask God not just for a touch-up, but for a creation of something pure.”, questions: [“What area needs purification?”, “Why is a ‘steadfast’ spirit important?”] } ], unity: [ { id: ‘uni-1’, verse: “How good and pleasant it is when God’s people live together in unity!”, reference: “Psalm 133:1”, reflection: “Unity isn’t just avoiding conflict; it’s a blessing.”, questions: [“Who do you need to reconnect with?”, “How can you be a peacemaker?”] }, { id: ‘uni-2’, verse: “Make every effort to keep the unity of the Spirit through the bond of peace.”, reference: “Ephesians 4:3”, reflection: “Unity requires effort. It is a spiritual discipline.”, questions: [“What effort is required of you?”, “Are you holding onto offenses?”] }, { id: ‘uni-3’, verse: “For just as each of us has one body with many members…”, reference: “Romans 12:4-5”, reflection: “We are interconnected. Your spiritual health affects the whole body.”, questions: [“What role do you play?”, “How can you honor others?”] } ], study: [ { id: ‘stu-1’, verse: “All Scripture is God-breathed and is useful for teaching…”, reference: “2 Timothy 3:16”, reflection: “The Bible isn’t just history; it is the breath of God.”, questions: [“Which use of scripture do you need most?”, “How do you view Scripture?”] }, { id: ‘stu-2’, verse: “Your word is a lamp for my feet, a light on my path.”, reference: “Psalm 119:105”, reflection: “God gives us a lamp for the next step, not always a spotlight for the future.”, questions: [“What decision needs light?”, “Will you take the next step?”] }, { id: ‘stu-3’, verse: “Do not merely listen to the word… Do what it says.”, reference: “James 1:22”, reflection: “Study without application is self-deception.”, questions: [“What command do you struggle to do?”, “What is your action plan?”] } ], prayer: [ { id: ‘pray-1’, verse: “Pray continually, give thanks in all circumstances…”, reference: “1 Thess 5:17-18”, reflection: “Prayer is not an event; it is a lifestyle.”, questions: [“What stops you from praying continually?”, “Can you find a reason to give thanks?”] }, { id: ‘pray-2’, verse: “Do not be anxious about anything, but in every situation… present your requests.”, reference: “Phil 4:6”, reflection: “Anxiety and prayer are exchange rates.”, questions: [“What anxiety are you carrying?”, “Have you presented it to God?”] }, { id: ‘pray-3’, verse: “The Lord is near to all who call on him.”, reference: “Psalm 145:18”, reflection: “God is intimately near, but He responds to truth.”, questions: [“Are you honest with God?”, “What truth have you avoided?”] } ], worship: [ { id: ‘wor-1’, verse: “God is spirit, and his worshipers must worship in the Spirit and in truth.”, reference: “John 4:24”, reflection: “Worship transcends location. It is a heart posture.”, questions: [“What does ‘in Spirit’ mean to you?”, “Is your worship authentic?”] }, { id: ‘wor-2’, verse: “Come, let us bow down in worship.”, reference: “Psalm 95:6”, reflection: “Physical posture often reflects heart posture.”, questions: [“When did you last kneel?”, “What area needs submission?”] }, { id: ‘wor-3’, verse: “Let everything that has breath praise the Lord.”, reference: “Psalm 150:6”, reflection: “If you have breath, you have a purpose: praise.”, questions: [“How can you use your breath for praise?”, “What holds you back?”] } ], discipleship: [ { id: ‘disc-1’, verse: “Therefore go and make disciples of all nations…”, reference: “Matt 28:19”, reflection: “The Great Commission is not a suggestion.”, questions: [“Who are you discipling?”, “Who is discipling you?”] }, { id: ‘disc-2’, verse: “Entrust to reliable people who will also be qualified to teach.”, reference: “2 Tim 2:2”, reflection: “Discipleship is multi-generational.”, questions: [“Are you a ‘reliable person’?”, “Who is your Timothy?”] }, { id: ‘disc-3’, verse: “Follow me, and I will make you fishers of men.”, reference: “Matt 4:19”, reflection: “Before we lead, we must follow.”, questions: [“Are you following Jesus?”, “How can you fish for men?”] } ] }; const INITIAL_CHECKLIST = [ { id: ‘cl-1’, text: ‘Define Retreat Goals & Theme’, category: ‘Planning’, completed: false }, { id: ‘cl-2’, text: ‘Set Date & Duration’, category: ‘Planning’, completed: false }, { id: ‘cl-3’, text: ‘Select & Book Venue’, category: ‘Logistics’, completed: false }, { id: ‘cl-4’, text: ‘Develop Budget’, category: ‘Logistics’, completed: false }, { id: ‘cl-5’, text: ‘Plan Daily Schedule’, category: ‘Content’, completed: false }, { id: ‘cl-6’, text: ‘Arrange Speakers’, category: ‘Content’, completed: false }, { id: ‘cl-7’, text: ‘Coordinate Meals’, category: ‘Logistics’, completed: false }, { id: ‘cl-8’, text: ‘Plan Worship Music’, category: ‘Content’, completed: false }, { id: ‘cl-9’, text: ‘Promote & Register’, category: ‘Outreach’, completed: false }, { id: ‘cl-10’, text: ‘Send Thank You Notes’, category: ‘Follow-up’, completed: false } ]; const ENVIRONMENT_TIPS = [ { id: ‘env-1’, title: ‘Location’, description: ‘Select a peaceful setting away from daily distractions.’, icon: ‘MapPin’ }, { id: ‘env-2’, title: ‘Worship Atmosphere’, description: ‘Create spaces dedicated to worship with minimal visual noise.’, icon: ‘Music’ }, { id: ‘env-3’, title: ‘Fellowship Zones’, description: ‘Arrangement seating to encourage interaction.’, icon: ‘Coffee’ }, { id: ‘env-4’, title: ‘Digital Boundaries’, description: ‘Establish phone-free times to encourage presence.’, icon: ‘Smartphone’ }, { id: ‘env-5’, title: ‘Prayer Areas’, description: ‘Designate quiet spaces for personal meditation.’, icon: ‘Lamp’ }, { id: ‘env-6’, title: ‘Nature Integration’, description: ‘Incorporate outdoor elements and walks.’, icon: ‘Trees’ } ]; // — HTML GENERATOR — const generateStrategicPlanHtml = (currentSchedule, currentChecklist) => { const date = new Date().toLocaleDateString(‘en-US’, { year: ‘numeric’, month: ‘long’, day: ‘numeric’ }); const styles = ` :root { –void: #030712; –brand-500: #f97316; –brand-400: #facc15; –slate-500: #64748b; –slate-100: #f1f5f9; } body { font-family: sans-serif; line-height: 1.6; color: var(–void); max-width: 900px; margin: 0 auto; padding: 40px; } h1 { font-size: 40px; margin-bottom: 10px; line-height:1; } h2 { font-size: 24px; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-top: 40px; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { text-align: left; padding: 12px; border-bottom: 1px solid #eee; } th { background: #f8fafc; font-size: 12px; text-transform: uppercase; } .check-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; } .box { width: 16px; height: 16px; border: 2px solid #ccc; margin-right: 15px; } header::after { content: ” “; position: absolute; bottom: -4px; left: 0; width: 100px; height: 4px; background: var(–brand-500); } .card::before { content: ” “; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(–brand-500), var(–brand-400)); opacity: 0.8; } `; let scheduleHtml = String(); currentSchedule.forEach(day => { scheduleHtml += `\u003Cdiv\u003E\u003Ch3\u003E${day.day} – ${day.title}\u003C/h3\u003E\u003Ctable\u003E\u003Cthead\u003E\u003Ctr\u003E\u003Cth\u003ETime\u003C/th\u003E\u003Cth\u003EActivity\u003C/th\u003E\u003Cth\u003EDetails\u003C/th\u003E\u003C/tr\u003E\u003C/thead\u003E\u003Ctbody\u003E`; day.items.forEach(item => { scheduleHtml += `\u003Ctr\u003E\u003Ctd\u003E${item.time}\u003C/td\u003E\u003Ctd\u003E\u003Cstrong\u003E${item.title}\u003C/strong\u003E\u003C/td\u003E\u003Ctd\u003E${item.description}\u003C/td\u003E\u003C/tr\u003E`; }); scheduleHtml += `\u003C/tbody\u003E\u003C/table\u003E\u003C/div\u003E`; }); let checklistHtml = String(); currentChecklist.forEach(item => { // FIXED: Replaced ” with String() to avoid WordPress smart-quote corruption checklistHtml += `\u003Cdiv class=”check-item”\u003E\u003Cdiv class=”box”\u003E${item.completed ? ‘X’ : String()}\u003C/div\u003E\u003Cdiv\u003E${item.text} \u003Csmall style=”color:#888″\u003E(${item.category})\u003C/small\u003E\u003C/div\u003E\u003C/div\u003E`; }); return ` \u003C!DOCTYPE html\u003E \u003Chtml\u003E \u003Chead\u003E\u003Ctitle\u003ERetreat Plan\u003C/title\u003E\u003Cstyle\u003E${styles}\u003C/style\u003E\u003C/head\u003E \u003Cbody\u003E \u003Cheader\u003E \u003Ch1\u003ESTRATEGIC RETREAT PLAN\u003C/h1\u003E \u003Cdiv\u003EGenerated: ${date}\u003C/div\u003E \u003C/header\u003E \u003Ch2\u003ESchedule Flow\u003C/h2\u003E ${scheduleHtml} \u003Ch2\u003EExecution Checklist\u003C/h2\u003E ${checklistHtml} \u003Cfooter style=”margin-top:50px; color:#888; font-size:12px; text-align:center;”\u003E Faith Retreat Planner – LoveThyBible.com \u003C/footer\u003E \u003C/body\u003E \u003C/html\u003E `; }; // — COMPONENTS — // 0. TAILWIND SAFELIST (Fixes Dynamic Colors) // Ensures base color classes are generated. We use separate opacity utilities (e.g., bg-opacity-10) // in the components to avoid needing to safelist every slash-combination (e.g., bg-orange-500/10). const TailwindSafelist = () => { const colors = [‘orange’, ‘blue’, ’emerald’, ‘rose’, ‘yellow’, ‘cyan’, ‘brand’]; return ( <div style={{display:'none'}}> {colors.map(c => ( <div key={c}> {/* Base Colors */} <div className={`text-${c}-400 text-${c}-500 text-${c}-600 text-${c}-900`}></div> <div className={`bg-${c}-400 bg-${c}-500 bg-${c}-600 bg-${c}-900`}></div> <div className={`border-${c}-400 border-${c}-500 border-${c}-600`}></div> {/* Gradients */} <div className={`from-${c}-400 from-${c}-500 from-${c}-600`}></div> <div className={`to-${c}-400 to-${c}-500 to-${c}-600`}></div> {/* Hover States */} <div className={`group-hover:text-${c}-400 group-hover:text-${c}-500`}></div> <div className={`group-hover:border-${c}-400 group-hover:border-${c}-500`}></div> <div className={`group-hover:bg-${c}-500`}></div> <div className={`hover:bg-${c}-400 hover:text-${c}-400`}></div> {/* Shadows */} <div className={`shadow-${c}-500`}></div> </div> ))} {/* Specific Environment Gradients */} <div className="from-cyan-400 to-blue-500"></div> <div className="from-fuchsia-400 to-purple-500"></div> <div className="from-orange-400 to-red-500"></div> <div className="from-violet-400 to-indigo-500"></div> <div className="from-emerald-400 to-teal-500"></div> <div className="from-amber-400 to-orange-500"></div> </div> ); }; // 1. HERO const Hero = ({ onStart }) => { const handleDownload = () => { const savedSchedule = localStorage.getItem(‘retreatSchedule_v2’); const currentSchedule = savedSchedule ? JSON.parse(savedSchedule) : DEFAULT_SCHEDULE; const htmlContent = generateStrategicPlanHtml(currentSchedule, INITIAL_CHECKLIST); const blob = new Blob([htmlContent], { type: ‘text/html’ }); const url = URL.createObjectURL(blob); const a = document.createElement(‘a’); a.href = url; a.download = `retreat-plan-${new Date().toISOString().split(‘T’)[0]}.html`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; return ( <div className="relative min-h-[60vh] flex flex-col justify-center items-center text-center py-20"> <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-orange-500/20 rounded-full blur-[100px] animate-pulse pointer-events-none" /> <div className="relative z-10 px-4 max-w-4xl mx-auto animate-fade-up"> <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 text-orange-400 text-xs font-bold tracking-widest uppercase mb-8"><Icon name="Sparkles" size={12} /><span>The 2026 Collection</span></div> <h1 className="font-sans text-5xl md:text-7xl font-bold tracking-tighter leading-none mb-8 text-white">RETREAT <span className="block text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-orange-600">PLANNER</span></h1> <div className="text-lg text-slate-400 max-w-xl mx-auto mb-12 font-light">Curate spiritual experiences that resonate.</div> <div className="flex flex-col md:flex-row items-center justify-center gap-6"> <button onClick={onStart} className="group px-8 py-4 bg-white text-black font-bold text-lg hover:bg-orange-400 transition-all rounded-sm flex items-center gap-3"> START PLANNING <Icon name="ArrowRight" size={20} /> </button> <button onClick={handleDownload} className="group px-8 py-4 bg-transparent border border-white/20 text-white font-bold text-lg hover:bg-white/5 transition-all rounded-sm flex items-center gap-3"> <Icon name="FileText" size={20} /> DOWNLOAD GUIDE <Icon name="Download" size={16} /> </button> </div> </div> </div> ); }; // 2. SCHEDULE (Flow) const Schedule = ({ selectedTheme, scheduleData, onUpdateSchedule }) => { const [isEditing, setIsEditing] = useState(false); const baseColor = selectedTheme?.baseColor || ‘brand’; const getTextClass = (shade) => `text-${baseColor}-${shade}`; const updateItem = (dIdx, iIdx, field, val) => { const newS = […scheduleData]; newS[dIdx].items[iIdx] = { …newS[dIdx].items[iIdx], [field]: val }; onUpdateSchedule(newS); }; return ( <div className="animate-fade-up max-w-5xl mx-auto pb-20"> <div className="mb-12 flex justify-between items-end"> <div><h2 className="text-4xl font-bold text-white mb-2">The Flow</h2><p className="text-slate-400">Curate the rhythm of worship and rest.</p></div> <button onClick={() => setIsEditing(!isEditing)} className={`px-4 py-2 rounded-full border text-xs font-bold uppercase ${isEditing ? ‘bg-white text-black’ : ‘text-slate-400 border-white/10’}`}>{isEditing ? ‘Save’ : ‘Edit’}</button> </div> <div className="space-y-12"> {scheduleData.map((day, dIdx) => ( <div key={dIdx}> <h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-3"><span className="text-4xl">{day.icon}</span> {day.day}</h3> <div className="space-y-4 border-l border-white/10 ml-4 pl-8"> {day.items.map((item, iIdx) => ( <div key={item.id} className="relative group"> <div className={`absolute -left-[37px] top-4 w-3 h-3 rounded-full bg-${baseColor}-500 ring-4 ring-black`} /> <div className={`p-6 rounded-xl border bg-white/5 ${isEditing ? 'border-dashed border-white/20' : 'border-white/5'}`}> {isEditing ? ( <div className="space-y-2"> {/* INPUTS (Inherits global CSS styles now) */} <div className="flex gap-2"> <input value={item.time} onChange={e => updateItem(dIdx, iIdx, ‘time’, e.target.value)} className=”w-32 p-2 rounded” /> <input value={item.title} onChange={e => updateItem(dIdx, iIdx, ‘title’, e.target.value)} className=”flex-1 p-2 rounded” /> </div> <textarea value={item.description} onChange={e => updateItem(dIdx, iIdx, ‘description’, e.target.value)} className=”w-full h-16 p-2 rounded” /> </div> ) : ( <div className="flex flex-col md:flex-row gap-4 md:items-center"> <div className={`text-${baseColor}-400 font-bold text-xl md:w-32`}>{item.time}</div> <div> <h4 className="font-bold text-white text-lg">{item.title}</h4> <div className="text-slate-400 text-sm">{item.description}</div> </div> </div> )} </div> </div> ))} </div> </div> ))} </div> </div> ); }; // 3. CHECKLIST (Mission Control with Fireworks) const FireworksCanvas = ({ trigger }) => { const canvasRef = useRef(null); const particlesRef = useRef([]); const animationFrameRef = useRef(0); useEffect(() => { if (trigger === 0) return; const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext(‘2d’); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const createFirework = (x, y) => { const colors = [‘#facc15’, ‘#f97316’, ‘#22d3ee’, ‘#fb7185’, ‘#ffffff’]; for (let i = 0; i < 50; i++) { const angle = Math.random() * Math.PI * 2; const velocity = 2 + Math.random() * 4; particlesRef.current.push({ x, y, vx: Math.cos(angle) * velocity, vy: Math.sin(angle) * velocity, life: 1, color: colors[Math.floor(Math.random() * colors.length)], size: Math.random() * 3 + 1 }); } }; createFirework(window.innerWidth * 0.5, window.innerHeight * 0.4); const animate = () => { if (!ctx) return; ctx.clearRect(0, 0, canvas.width, canvas.height); // FIXED LOOP SYNTAX to avoid ‘i–‘ decrement operator which WordPress turns into an en-dash for (let i = particlesRef.current.length – 1; i >= 0; i = i – 1) { const p = particlesRef.current[i]; p.x += p.vx; p.y += p.vy; p.vy += 0.05; p.life -= 0.02; ctx.globalAlpha = p.life; ctx.fillStyle = p.color; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill(); if (p.life <= 0) particlesRef.current.splice(i, 1); } if (particlesRef.current.length > 0) animationFrameRef.current = requestAnimationFrame(animate); else ctx.clearRect(0, 0, canvas.width, canvas.height); }; animate(); }, [trigger]); return React.createElement(‘canvas’, { ref: canvasRef, className: “fixed inset-0 pointer-events-none z-[100]” }); }; const Checklist = ({ items, onToggle }) => { const [fireworksTrigger, setFireworksTrigger] = useState(0); const progress = Math.round((items.filter(i => i.completed).length / items.length) * 100); const handleToggle = (id, isCompleted) => { if (!isCompleted) setFireworksTrigger(p => p + 1); onToggle(id); }; return ( <div className="animate-fade-up max-w-4xl mx-auto pb-20 relative"> <FireworksCanvas trigger={fireworksTrigger} /> <div className="flex justify-between items-end mb-8"> <div><h2 className="text-4xl font-bold text-white">Mission Control</h2><p className="text-slate-400">Track logistics and execution.</p></div> </div> <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="md:col-span-1"> <div className="sticky top-24 bg-white/5 backdrop-blur-md p-6 rounded-2xl border-t-4 border-orange-500 text-center"> <div className="text-slate-400 text-xs font-bold uppercase tracking-widest mb-4">Status</div> <div className="text-4xl font-bold text-white mb-2">{progress}%</div> <div className="text-xs text-slate-500">{progress === 100 ? “SYSTEMS GO” : “IN PROGRESS”}</div> </div> </div> <div className="md:col-span-2 space-y-3"> {items.map(item => ( <button key={item.id} onClick={() => handleToggle(item.id, item.completed)} className={`w-full flex items-center justify-between p-4 rounded-sm border-l-2 transition-all duration-300 group ${item.completed ? ‘bg-white/5 border-l-orange-500/50 opacity-50’ : ‘bg-[#0B0F19] border-l-orange-500 hover:bg-white/5 hover:translate-x-2’} `} > <div className="flex items-center gap-4 text-left"> <div className={`w-6 h-6 rounded-full border flex items-center justify-center transition-all duration-300 ${item.completed ? 'bg-orange-500 border-orange-500 text-white' : 'border-slate-600 group-hover:border-orange-400'}`}> {item.completed && <Icon name="Check" size={14} strokeWidth={3} />} </div> <span className={`text-lg font-medium transition-colors ${item.completed ? 'text-slate-500 line-through' : 'text-slate-200'}`}>{item.text}</span> </div> <span className="hidden sm:block text-[10px] font-bold uppercase tracking-wider text-slate-600 border border-slate-800 px-2 py-1 rounded">{item.category}</span> </button> ))} </div> </div> </div> ); }; // 4. ENVIRONMENT (Vibe) const Environment = () => { const getCardStyles = (index) => { const styles = [ { bg: ‘bg-cyan-500’, text: ‘text-cyan-400’, gradient: ‘from-cyan-400 to-blue-500’ }, { bg: ‘bg-fuchsia-500’, text: ‘text-fuchsia-400’, gradient: ‘from-fuchsia-400 to-purple-500’ }, { bg: ‘bg-orange-500’, text: ‘text-orange-400’, gradient: ‘from-orange-400 to-red-500’ }, { bg: ‘bg-violet-500’, text: ‘text-violet-400’, gradient: ‘from-violet-400 to-indigo-500’ }, { bg: ‘bg-emerald-500’, text: ‘text-emerald-400’, gradient: ‘from-emerald-400 to-teal-500’ }, { bg: ‘bg-amber-500’, text: ‘text-amber-400’, gradient: ‘from-amber-400 to-orange-500’ } ]; return styles[index % styles.length]; }; return ( <div className="animate-fade-up pb-20"> <div className="mb-12"><h2 className="text-4xl font-bold text-white">Create the Vibe</h2><p className="text-slate-400">Curate the physical space.</p></div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> {ENVIRONMENT_TIPS.map((tip, index) => { const s = getCardStyles(index); return ( <div key={tip.id} className={`group relative p-[1px] rounded-3xl transition-all duration-500 hover:-translate-y-2`}> <div className={`absolute inset-0 bg-gradient-to-br ${s.gradient} opacity-0 group-hover:opacity-100 blur-sm rounded-3xl transition-opacity duration-500`} /> <div className="relative h-full bg-[#0B0F19] rounded-[23px] p-8 overflow-hidden border border-white/5 transition-colors"> <div className={`absolute -top-12 -right-12 w-32 h-32 ${s.bg} opacity-10 blur-[60px] group-hover:opacity-30 transition-all duration-700`} /> <div className="relative z-10 flex flex-col h-full"> <div className="flex justify-between items-start mb-6"> <div className={`w-14 h-14 rounded-2xl ${s.bg} bg-opacity-10 flex items-center justify-center border border-white/5 group-hover:scale-110 transition-transform duration-500`}> <Icon name={tip.icon} size={28} className={`${s.text}`} /> </div> <span className={`text-[10px] font-bold uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity duration-300 ${s.text} bg-white/5 px-3 py-1 rounded-full border border-white/5`}>Tip 0{index + 1}</span> </div> <h3 className="text-2xl font-bold text-white mb-4">{tip.title}</h3> <p className="text-slate-400 text-sm">{tip.description}</p> </div> </div> </div> ); })} </div> </div> ); }; // 5. DEVOTIONALS (Word) const Devotionals = ({ selectedTheme }) => { const content = selectedTheme ? (THEME_DEVOTIONALS[selectedTheme.id] || THEME_DEVOTIONALS[‘renewal’]) : THEME_DEVOTIONALS[‘renewal’]; const baseColor = selectedTheme?.baseColor || ‘brand’; return ( <div className="animate-fade-up max-w-6xl mx-auto space-y-8 pb-20"> <div className="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-4"> <div> <h2 className="text-4xl md:text-5xl font-bold text-white mb-2 tracking-tight">Scripture & Reflection</h2> <p className="text-slate-400 font-light"> Anchoring the soul in truth. <span className={`text-${baseColor}-400 font-medium`}>{selectedTheme?.title || ‘Daily’} Edition.</span> </p> </div> <div className="text-right hidden md:block"> <span className="text-xs font-bold text-slate-500 uppercase tracking-widest">03 / The Word</span> </div> </div> <div className="grid grid-cols-1 gap-12 mb-20"> {content.map((devotional, idx) => ( <div key={idx} className="relative group"> {/* Vibrant Glow Background */} <div className={`absolute -inset-1 bg-gradient-to-r from-${baseColor}-600 to-${baseColor}-400 opacity-20 blur-2xl group-hover:opacity-40 transition-opacity duration-700`} /> <div className={`relative bg-[#0B0F19] rounded-3xl p-8 md:p-12 overflow-hidden border-t border-${baseColor}-500 border-opacity-20 group-hover:border-opacity-40 transition-colors`}> {/* Giant Watermark Number Colored – Using explicit opacity utility instead of slash syntax */} <div className={`absolute top-0 right-0 text-[10rem] md:text-[15rem] font-bold text-${baseColor}-500 opacity-5 leading-none -mt-10 -mr-10 select-none pointer-events-none group-hover:opacity-10 transition-opacity duration-700`}> 0{idx + 1} </div> <div className="relative z-10 flex flex-col md:flex-row gap-12"> <div className="md:w-1/2"> <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full bg-${baseColor}-500 bg-opacity-10 text-${baseColor}-400 font-bold tracking-widest uppercase text-xs mb-6 border border-${baseColor}-500 border-opacity-20`}> <span>{devotional.reference}</span> </div> <h3 className="text-3xl md:text-4xl font-medium text-white leading-tight mb-8"> “{devotional.verse}” </h3> </div> <div className="md:w-1/2 flex flex-col justify-center border-l border-white/10 pl-0 md:pl-12 pt-8 md:pt-0"> <p className="text-lg text-slate-300 leading-relaxed mb-8"> {devotional.reflection} </p> <div className="space-y-4"> <h4 className={`text-sm font-bold text-${baseColor}-500 uppercase tracking-wider`}>Discussion Points</h4> {devotional.questions.map((q, i) => ( <div key={i} className="flex items-start gap-3 group/q"> <Icon name="ArrowRight" size={16} className={`text-${baseColor}-400 mt-1 flex-shrink-0 group-hover/q:translate-x-1 transition-transform`} /> <span className="text-slate-400 group-hover/q:text-slate-200 transition-colors">{q}</span> </div> ))} </div> </div> </div> </div> </div> ))} </div> {/* Go Deeper Section */} <div className="relative rounded-3xl overflow-hidden min-h-[300px] flex items-center justify-center text-center p-8 border border-white/10 group mt-12 bg-white/5"> <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1504052434569-70ad5836ab65?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-40 mix-blend-overlay" /> <div className="absolute inset-0 bg-gradient-to-t from-[#030712] via-[#030712]/80 to-transparent" /> <div className="relative z-10 max-w-2xl mx-auto"> <div className={`w-16 h-16 mx-auto bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center mb-6 text-white border border-white/20 shadow-2xl shadow-${baseColor}-500/30 group-hover:scale-110 transition-transform duration-500`}> <Icon name="Smartphone" size={32} /> </div> <h3 className="text-3xl font-bold text-white mb-4">Go Deeper</h3> <p className="text-lg text-slate-300 mb-8 font-light">Access a library of premium commentaries, original language tools, and community features.</p> <a href="https://LoveThyBible.com" target="_blank" rel="noreferrer" className={`inline-flex items-center gap-3 px-8 py-3 bg-white text-black font-bold tracking-wide rounded-full hover:bg-${baseColor}-400 transition-colors`}> VISIT LOVETHYBIBLE.COM <Icon name="ExternalLink" size={18} /> </a> </div> </div> </div> ); }; // 6. MAIN APP const App = () => { const [tab, setTab] = useState(‘home’); const [theme, setTheme] = useState(null); // Data State – CHANGED KEY TO v2 TO FIX MISSING SUNDAY const [schedule, setSchedule] = useState(() => { try { return JSON.parse(localStorage.getItem(‘retreatSchedule_v2’)) || DEFAULT_SCHEDULE; } catch(e) { return DEFAULT_SCHEDULE; } }); const [checklist, setChecklist] = useState(INITIAL_CHECKLIST); // Persist useEffect(() => { try{ localStorage.setItem(‘retreatSchedule_v2’, JSON.stringify(schedule)); }catch(e){} }, [schedule]); // Scroll to top on tab change useEffect(() => { const root = document.getElementById(‘faith-retreat-app-container’); if(root && tab !== ‘home’) root.scrollIntoView({behavior:’smooth’}); }, [tab]); const tabs = [ { id: ‘themes’, label: ‘THEMES’, icon: ‘Target’ }, { id: ‘schedule’, label: ‘FLOW’, icon: ‘Calendar’ }, { id: ‘devotionals’, label: ‘WORD’, icon: ‘Book’ }, { id: ‘environment’, label: ‘VIBE’, icon: ‘Mountain’ }, { id: ‘checklist’, label: ‘TASKS’, icon: ‘CheckSquare’ } ]; return ( <div className="min-h-[600px] w-full bg-[#030712] text-slate-100 p-4 md:p-8"> <TailwindSafelist /> {tab === ‘home’ ? <Hero onStart={() => setTab(‘themes’)} /> : ( <> <div className="flex justify-between items-center mb-8 pb-4 border-b border-white/10"> <button className="text-white font-bold text-xl" onClick={() => setTab(‘home’)}>FAITH RETREAT.</button> {theme && <div className="text-xs text-slate-400 uppercase border border-white/10 rounded-full px-3 py-1">Focus: {theme.title}</div>} </div> {tab === ‘themes’ && ( <div className="animate-fade-up pb-20"> <div className="mb-8"><h2 className="text-4xl font-bold text-white">Select Theme</h2><p className="text-slate-400">Define the spiritual trajectory.</p></div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {THEMES.map(t => ( <button key={t.id} onClick={() => {setTheme(t); setTab(‘schedule’);}} className={`text-left p-6 rounded-2xl border transition-all ${theme?.id === t.id ? ‘bg-white/10 border-white’ : ‘bg-white/5 border-white/5 hover:bg-white/10’}`}> <div className={`mb-4 text-${t.baseColor}-400`}><Icon name={t.icon} size={32} /></div> <h3 className="text-xl font-bold text-white">{t.title}</h3> <div className="text-sm text-slate-400">{t.description}</div> </button> ))} </div> </div> )} {tab === ‘schedule’ && <Schedule selectedTheme={theme} scheduleData={schedule} onUpdateSchedule={setSchedule} />} {tab === ‘devotionals’ && <Devotionals selectedTheme={theme} />} {tab === ‘checklist’ && <Checklist items={checklist} onToggle={(id) => setChecklist(p => p.map(i => i.id === id ? {…i, completed: !i.completed} : i))} />} {tab === ‘environment’ && <Environment />} {/* NAV DOCK */} <div className="fixed bottom-6 left-1/2 -translate-x-1/2 bg-[#0B0F19]/90 backdrop-blur-md p-2 rounded-2xl flex gap-1 z-50 border border-white/10 shadow-2xl"> {tabs.map(t => ( <button key={t.id} onClick={() => setTab(t.id)} className={`flex flex-col items-center justify-center w-16 h-14 rounded-xl transition-all ${tab === t.id ? ‘bg-white text-black’ : ‘text-slate-400 hover:text-white hover:bg-white/5’}`}> <Icon name={t.icon} size={20} className="mb-1" /> <span className="text-[9px] font-bold tracking-widest">{t.label}</span> </button> ))} </div> </> )} </div> ); }; // — RENDER — const rootEl = document.getElementById(‘faith-retreat-root’); const root = createRoot(rootEl); root.render(<App />);