// Initialize SDK immediately before DOM loads const defaultConfig = { team_name: "The Senior Model Team", tagline: "Class of 2027", about_text: "Our senior model team is an exclusive group of high school seniors who represent our studio throughout the year. As a model, you'll enjoy complimentary sessions, exclusive perks, and the chance to be featured across our social media and marketing campaigns.", cta_button_text: "Apply to Join", perk_1: "Multiple Photo Sessions", perk_2: "Studio Features", perk_3: "Exclusive Discounts", featured_photo: "https://images.unsplash.com/photo-1544078751-58fee2d8a03b?w=600&h=400&fit=crop", gallery_photo_1: "https://images.unsplash.com/photo-1544078751-58fee2d8a03b?w=600&h=400&fit=crop", gallery_photo_2: "https://images.unsplash.com/photo-1511379938547-c1f69b13d835?w=600&h=400&fit=crop", gallery_photo_3: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop", gallery_photo_4: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=600&h=400&fit=crop", background_color: "#faf8f6", surface_color: "#ffffff", text_color: "#2c2c2c", accent_color: "#c1467b", muted_color: "#7a8a9e" }; let config = { ...defaultConfig }; function updateUI() { const tn = config.team_name || defaultConfig.team_name; const tg = config.tagline || defaultConfig.tagline; const ab = config.about_text || defaultConfig.about_text; const ct = config.cta_button_text || defaultConfig.cta_button_text; const p1 = config.perk_1 || defaultConfig.perk_1; const p2 = config.perk_2 || defaultConfig.perk_2; const p3 = config.perk_3 || defaultConfig.perk_3; document.getElementById('hero-title').innerHTML = tn.replace('Senior', 'Senior'); document.getElementById('hero-tagline').textContent = tg; document.getElementById('about-body').textContent = ab; document.getElementById('cta-btn').textContent = ct; document.getElementById('cta-btn-2').textContent = ct; document.getElementById('perk-1-title').textContent = p1; document.getElementById('perk-2-title').textContent = p2; document.getElementById('perk-3-title').textContent = p3; document.getElementById('footer-name').textContent = tn; for (let i = 1; i <= 4; i++) { const photoUrl = config[`gallery_photo_${i}`] || defaultConfig[`gallery_photo_${i}`]; const photoEl = document.getElementById(`gallery-photo-${i}`); if (photoUrl && photoUrl.trim()) { photoEl.src = photoUrl; } } const featuredUrl = config.featured_photo || defaultConfig.featured_photo; const featuredEl = document.getElementById('featured-photo'); if (featuredUrl && featuredUrl.trim()) { featuredEl.src = featuredUrl; } const bg = config.background_color || defaultConfig.background_color; const surf = config.surface_color || defaultConfig.surface_color; const txt = config.text_color || defaultConfig.text_color; const acc = config.accent_color || defaultConfig.accent_color; const mut = config.muted_color || defaultConfig.muted_color; document.documentElement.style.setProperty('--bg', bg); document.documentElement.style.setProperty('--surface', surf); document.documentElement.style.setProperty('--text', txt); document.documentElement.style.setProperty('--gold', acc); document.documentElement.style.setProperty('--muted', mut); lucide.createIcons(); } if (window.elementSdk) { window.elementSdk.init({ defaultConfig, onConfigChange: async (updatedConfig) => { config = updatedConfig; updateUI(); }, mapToCapabilities: (cfg) => ({ recolorables: [ { get: () => cfg.background_color || defaultConfig.background_color, set: (v) => { config.background_color = v; window.elementSdk.setConfig({ background_color: v }); } }, { get: () => cfg.surface_color || defaultConfig.surface_color, set: (v) => { config.surface_color = v; window.elementSdk.setConfig({ surface_color: v }); } }, { get: () => cfg.text_color || defaultConfig.text_color, set: (v) => { config.text_color = v; window.elementSdk.setConfig({ text_color: v }); } }, { get: () => cfg.accent_color || defaultConfig.accent_color, set: (v) => { config.accent_color = v; window.elementSdk.setConfig({ accent_color: v }); } }, { get: () => cfg.muted_color || defaultConfig.muted_color, set: (v) => { config.muted_color = v; window.elementSdk.setConfig({ muted_color: v }); } } ], borderables: [], fontEditable: undefined, fontSizeable: undefined }), mapToEditPanelValues: (cfg) => new Map([ ['team_name', cfg.team_name || defaultConfig.team_name], ['tagline', cfg.tagline || defaultConfig.tagline], ['about_text', cfg.about_text || defaultConfig.about_text], ['cta_button_text', cfg.cta_button_text || defaultConfig.cta_button_text], ['featured_photo', cfg.featured_photo || defaultConfig.featured_photo], ['perk_1', cfg.perk_1 || defaultConfig.perk_1], ['perk_2', cfg.perk_2 || defaultConfig.perk_2], ['perk_3', cfg.perk_3 || defaultConfig.perk_3], ['gallery_photo_1', cfg.gallery_photo_1 || defaultConfig.gallery_photo_1], ['gallery_photo_2', cfg.gallery_photo_2 || defaultConfig.gallery_photo_2], ['gallery_photo_3', cfg.gallery_photo_3 || defaultConfig.gallery_photo_3], ['gallery_photo_4', cfg.gallery_photo_4 || defaultConfig.gallery_photo_4], ]) }); } document.addEventListener('DOMContentLoaded', () => { updateUI(); lucide.createIcons(); }); function openModal() { document.getElementById('applyModal').classList.add('open'); document.getElementById('applyForm').style.display = ''; document.getElementById('modalSuccess').style.display = 'none'; lucide.createIcons(); } function closeModal() { document.getElementById('applyModal').classList.remove('open'); } function closeModalOutside(e) { if (e.target === document.getElementById('applyModal')) closeModal(); }