{t.loading}
{/* ══════════ HEADER — Tab-based navigation ══════════ */}
20?"1px solid rgba(226,232,240,0.8)":"1px solid transparent", transition:"all 0.4s" }}>
{/* Row 1: Logo + Tab pills + Language toggle + Ask AI + Mobile toggle */}
{/* Row 2: Grouped navigation dropdowns (desktop only) */}
{/* Mobile menu */}
{mobileMenu &&
{/* ══════════ HERO (exact mockup design) ══════════ */}
{/* Noise grain overlay */}
{/* Animated blobs */}
{/* Grid lines */}
{/* Floating geometric accents */}
{t.heroBadge} {t.heroT1}
{/* Hero visual — Security Dashboard mockup */}
{/* ══════════ BENTO GRID (mockup design) ══════════ */}
{/* ══════════ TAB: AT SCHOOL ══════════ */}
{/* ══════════ FOOTER (resources from sheet) — OUTSIDE TABS ══════════ */}
{/* ══════════ DATA MODAL ══════════ */}
);
}
ReactDOM.createRoot(document.getElementById('root')).render( window.scrollTo({top:0,behavior:"smooth"})}>
{/* Tab pills */}
CNG Digital Wellbeing
Colegio Nueva Granada
{["school","home","bridge"].map(tab => (
))}
{(t.navGroups||[]).map((group,gi) => (
group.external ? (
) : (
setOpenNavGroup(gi)}
onMouseLeave={() => setOpenNavGroup(null)}>
{openNavGroup===gi && (
)}
)
))}
{group.items.map((item,ii) => (
))}
{/* Tab buttons */}
)
))}
{lang==="en"?"Partnerships — Apple":"Convenios — Apple"}
}
{["school","home","bridge"].map(tab => (
))}
{/* Nav group items */}
{(t.navGroups||[]).map((group,gi) => (
group.external ? (
{ window.open(group.external, '_blank'); setMobileMenu(false); }}>
{group.label}
) : (
{group.label}
{group.items.map((item,ii) => (
{
if (item.external) { window.open(item.external, '_blank'); setMobileMenu(false); return; }
if (item.modal) { openModal(item.modal); setMobileMenu(false); return; }
if (item.tab) { setActiveTab(item.tab); setTimeout(() => go(item.id), 120); }
else { go(item.id); }
setMobileMenu(false);
}}>
{item.label} {item.external &&
))}
{t.heroPre}
{t.heroT1}
{t.heroT2}
{lang==="en" ? <>
Welcome to the CNG Digital Wellbeing Partnership — your hub for everything our community is doing to help families navigate the digital world together, at school and at home.
Screen time, content exposure, and online focus are challenges every family faces. Here you'll find the policies, guidance, and resources CNG provides so you don't have to figure it out alone.
: <>Bienvenido a la Alianza de Bienestar Digital CNG — tu centro para todo lo que nuestra comunidad está haciendo para ayudar a las familias a navegar el mundo digital juntos, en el colegio y en casa.
El tiempo en pantalla, la exposición al contenido y la concentración en línea son desafíos que toda familia enfrenta. Aquí encontrarás las políticas, la orientación y los recursos que CNG ofrece para que no tengas que resolverlo solo.
}
{/* Glow behind */}
{/* Main card — security dashboard */}
{/* Gold top accent */}
{/* Corner brackets */}
{/* Dashboard header */}
{/* 3 mini stat cards */}
},
{ label:lang==="en"?"App Control":"Control Apps", stat:lang==="en"?"Apps management":"Gestión de Apps", color:"#F59E0B", icon: },
{ label:lang==="en"?"Device Mgmt":"Gestión Disp.", stat:"devices", color:"#10B981", icon: },
{ label:"YouTube", stat:lang==="en"?"Restricted Mode":"Modo Restringido", color:"#3B82F6", icon: }
].map((row,i) => (
{row.stat === "devices" ? (
))}
{/* Bottom row */}
{lang==="en"?"All Systems Active":"Sistemas Activos"}
v3.0
{lang==="en"?"CNG Security Hub":"Hub de Seguridad CNG"}
{[
{ icon:, label:lang==="en"?"Filtering":"Filtrado", color:"#EF4444", stat:String((sheetData.filtering||[]).length)+"+" },
{ icon:, label:lang==="en"?"Monitoring":"Monitoreo", color:"#3B82F6", stat:lang==="en"?"Centralized":"Centralizado" },
{ icon:, label:lang==="en"?"Extra-layer":"Capa extra", color:"#10B981", stat:lang==="en"?"Protection":"Protección" }
].map((item,i) => (
))}
{/* Protection layers — status rows */}
{item.icon}
{item.stat}
{item.label}
{lang==="en"?"Protection Layers":"Capas de Protección"}
{[
{ label:lang==="en"?"Content Filter":"Filtro Contenido", stat:String((sheetData.filtering||[]).length)+" "+(lang==="en"?"categories":"categorías"), color:"#EF4444", icon:{row.icon}
{row.label}
{/* Apple logo */}
{/* Windows logo */}
{/* Chrome logo */}
) : (
{row.stat}
)}
{[...Array(5)].map((_,i) => )}
{lang==="en"?"Everything You Need":"Todo lo que Necesitas"}
{lang==="en"?"Navigate our technology ecosystem with ease":"Navega nuestro ecosistema tecnológico con facilidad"}
{t.bentoCards.map((card,i) => (
setHoveredBento(i)} onMouseLeave={() => setHoveredBento(null)}
onClick={() => {
if (i === 7) { setChatOpen(true); return; }
if (sectionMap[i]) { setActiveTab(sectionMap[i].tab); setTimeout(() => go(sectionMap[i].id), 120); }
}}
style={{ background: hoveredBento===i?`linear-gradient(135deg,${bentoColors[i]}08,${bentoColors[i]}15)`:"white" }}>
{bentoIcons[card.icon]}
{card.tag}
{card.label}
{card.desc}
{t.explore}
{/* Section Banner */}
{/* DIGITAL CITIZENSHIP (mockup pillar cards, sheet data) */}
{lang==="en"?"Core Program":"Programa Central"}
{(grp['Digital Citizenship']||[]).length > 0 && (
{/* ACCESS & CONTROLS (mockup control cards, sheet data) */}
{lang==="en"?"Network Security":"Seguridad de Red"}
{/* ══════════ TAB: AT HOME ══════════ */}
{t.tabs.school}
{lang==="en"?"Our Philosophy":"Nuestra Filosofía"}
{(grp['Philosophy']||[]).map((r,i) => )}
{r.Title}
{r.Description}
{lang==="en"?"Legal Framework":"Marco Legal"}
{r.Description}
{r.Title && {r.Title}}{lang==="en"?"Digital Citizenship":"Ciudadanía Digital"}
{(grp['Digital Citizenship']||[]).map((r,i) => { const c=pillarColors[i%pillarColors.length]; return (
); })}
)}
{pillarIcons[i%pillarIcons.length]}
{r.Title}
{r.Description}
{lang==="en"?"Access & Controls":"Acceso y Controles"}
{(grp['Access & Controls']||grp['Access and Controls']||[]).map((r,i) => (
))}
{ctrlIcons[i%6]}
{r.Title}
{r.Description}
{[DATA_CATEGORIES[2],DATA_CATEGORIES[3],DATA_CATEGORIES[4],DATA_CATEGORIES[5]].map((cat,i) => (
))}
{/* Section Banner (green) */}
{lang==="en"?"Health & Wellness":"Salud y Bienestar"}
{/* PARENTAL CONTROLS (mockup tool cards, sheet data) */}
{lang==="en"?"For Families":"Para Familias"}
{/* Intro from overview */}
{(grp['Parental Controls']||[]).length>0 &&
{/* SHARED RESPONSIBILITY (mockup banner) */}
{(grp['Shared Responsibility']||[]).length > 0 && (
)}
{/* ══════════ TAB: 360° PROTECTION ══════════ */}
{t.tabs.home}
{lang==="en"?"Screen Time":"Tiempo en Pantalla"}
{(grp['Screen Time']||[]).map((r,i) => (
))}
{r.Title}
{r.Description}
{lang==="en"?"Parental Controls":"Controles Parentales"}
{(grp['Parental Controls']||[])[0]?.Description}
{parentalToolKeys.map((tool,i) => {
const features = parentalRows.slice(0,5);
const platforms = parentalRows.find(r => (r.Feature||'').toLowerCase().includes('platform'));
return (
)}
{ e.currentTarget.style.transform="translateY(-6px)"; e.currentTarget.style.boxShadow="0 24px 48px -12px rgba(0,0,0,0.12)"; }}
onMouseLeave={e => { e.currentTarget.style.transform=""; e.currentTarget.style.boxShadow=""; }}>
{tool}
{/* Show first few features for this tool */} {features.map((row,j) => row[tool] ? (
{platforms[tool].split(',').map((p,j) => {p.trim()})}
)}
{(grp['Shared Responsibility']||[])[0]?.Title || (lang==="en"?"Shared Responsibility":"Responsabilidad Compartida")}
{(grp['Shared Responsibility']||[])[0]?.Description}
{[{ icon:,label:lang==="en"?"School":"Colegio",color:"#C9A227",bg:"rgba(201,162,39,0.15)" },{arrow:true},{icon:,label:lang==="en"?"Family":"Familia",color:"#F5D35E",bg:"rgba(245,211,94,0.15)" },{arrow:true},{icon:,label:lang==="en"?"Together":"Juntos",color:"#2DD4BF",bg:"rgba(45,212,191,0.15)" }].map((s,i) => s.arrow ?
))}
→
: (
{s.icon}
{s.label}
{/* Section Banner (gold) */}
{t.integrationLabel}
{lang==="en"?"Initially applies to 6th graders — expanding progressively":"Aplica inicialmente para estudiantes de 6° — se expande progresivamente"}
{/* Scenario selector */}
{/* Active scenario card */}
{(() => {
const sc = scenarios[diagramStep];
return (
{/* Traffic flow */}
{/* Block pages */}
{/* FAQ accordion */}
))}
{/* BYOD (mockup device tabs, sheet data) */}
{lang==="en"?"Middle & High School":"Escuela Media y Alta"}
{/* Device selector tabs */}
{byodDeviceKeys.length > 0 && (
<>
)}
{/* ══════════ CHATBOT CTA (mockup design) — OUTSIDE TABS ══════════ */}
{t.tabs.bridge}
{t.integrationTitle}
{t.integrationSubtitle}
{t.integrationIntro}
{scenarios.map((sc,i) => (
))}
{sc.icon}
{sc.title}
{sc.subtitle}
{/* Linewize */}
{/* Qustodio */}
Linewize
{sc.linewize.label}
{sc.linewize.desc}
Qustodio
{sc.qustodio.label}
{sc.qustodio.desc}
{t.integrationTrafficTitle}
{[
{ icon:,label:lang==="en"?"Device":"Dispositivo",color:"#3B82F6" },
{ arrow:true },
{ icon:,label:lang==="en"?"Network Detection":"Detección de Red",color:"#F59E0B" },
{ arrow:true },
{ icon:,label:"Linewize",color:"#0F4C81" },
{ arrow:true },
{ icon:,label:"Qustodio",color:"#10B981" },
{ arrow:true },
{ icon:,label:lang==="en"?"Content":"Contenido",color:"#8B5CF6" }
].map((s,i) => s.arrow ? (
{s.icon}
{s.label}
{t.integrationBlockTitle}
{t.integrationBlockDesc}
{t.integrationSchoolBlock}
{t.integrationParentBlock}
{t.integrationFaqTitle}
{faqIntItems.map((faq,i) => ({faq.a}
{lang==="en"?"BYOD Program":"Programa BYOD"}
{byodDeviceKeys.map((key,i) => {
const color = deviceColors[i%deviceColors.length];
return ;
})}
{byodRows.filter(r => r[selDevice]).map((row,i) => (
r[selDevice]).length-1?"1px solid #F1F5F9":"none" }}>
))}
{[,,,,,,][i%7]}
{row.Feature || row.Category}
{row[selDevice]}
{t.chatTitle}
{t.chatSub}
closeModal()}>
{/* ══════════ CHAT FAB + WINDOW (mockup design) ══════════ */}
{!chatOpen && }
{chatOpen && (
e.stopPropagation()}>
{activeCategory && (<>
{activeCategory.icon} {lang==="en"?activeCategory.name:activeCategory.nameEs}
{activeData.length===0 ?
: activeCategory.isTable ?
: activeCategory.isFaq ? activeData.map((row,i) => )
: activeCategory.id === 'resources' ? activeData.map((row,i) => { const name=get(row,'Title','Resource'); const link=get(row,'Link/Contact','Link'); const desc=get(row,'Description'); return name ? {e.currentTarget.style.borderColor="#0F4C81";e.currentTarget.style.background="#F8FBFF";}} onMouseLeave={e=>{e.currentTarget.style.borderColor="#E2E8F0";e.currentTarget.style.background="white";}}>{link&&link.startsWith('http')&&
)}
📊
{lang==="en"?"Loading...":"Cargando..."}
| {h} | )}
|---|
| {v==='Allow'?✓ Allow:v==='Block'?✕ Block:NOTE_INFO[v]? | )}
toggleItem(i)}>{get(row,'Question')}▾
{get(row,'Answer')}
{name}
{desc && {desc}
} toggleItem(i)}>{get(row,'Title','Resource')}▾
{get(row,'Description','Link/Contact')}
CNG Tech Assistant
{t.chatOnline}
{chatMsgs.map((msg,i) => (
)}
))}
{typing &&
{msg.role==="bot" &&
{msg.role==="bot" && !msg.streaming && msg.logRow && (
{msg.role==="bot" ?
}
{t.privacyNotice}
setChatIn(e.target.value)} onKeyDown={e => e.key==="Enter"&&sendMessage()} placeholder={t.chatPlaceholder} disabled={typing}
style={{ flex:1,padding:"12px 16px",borderRadius:14,border:"1px solid #E2E8F0",fontSize:14,outline:"none",fontFamily:"inherit",background:"#F8FAFC" }}
onFocus={e => e.target.style.borderColor="#0F4C81"} onBlur={e => e.target.style.borderColor="#E2E8F0"} />