Learning Made Simple
<p>Hello, World!</p>import { useState } from "react";
/* ══════════════════════════════════════════
BRAND TOKENS v3 — Orange-Magenta update
══════════════════════════════════════════ */
const C = {
blueDark: "#0F1F8A",
blue: "#1A35C8",
blueLight: "#2E7BC4",
teal: "#0D9E8A",
tealLight: "#19C4A8",
// Тоорын оранж-ягаан (Orange-Magenta)
plum: "#C84B8A", // өмнөх #7B2D6E → шинэ оранж-ягаан
plumDark: "#9A2060",
plumLight: "#E8729C",
plumPale: "#FDE8F2",
// Gold
gold: "#C8960A",
goldLight: "#F5C518",
// Neutrals
white: "#FFFFFF",
cream: "#FAFAF8",
off: "#F4F7FF",
dark: "#0A0F2E",
charcoal: "#2C2C3A",
gray: "#5A6480",
grayL: "#D8DCE8",
grayLL: "#F0F2F7",
};
/* ══════════════════════════════════════════
LOGO SVG — Updated to match actual badge
Circular badge: outer ring + inner ring
+ bulb body + globe on top + text arcs
+ decorative dots
══════════════════════════════════════════ */
const Logo = ({ size = 80, variant = "blue" }) => {
const onDark = variant === "dark" || variant === "blue-bg" || variant === "plum-bg";
const stroke = onDark ? C.white : C.blue;
const globeFill = onDark ? "rgba(255,255,255,0.18)" : "#C8D8F8";
const bgColor =
variant === "blue-bg" ? C.blue :
variant === "plum-bg" ? C.plum :
variant === "dark" ? C.dark : "transparent";
return (
<svg
width={size} height={size} viewBox="0 0 220 220" fill="none"
style={{ background: bgColor, borderRadius: bgColor !== "transparent" ? "50%" : 0, flexShrink: 0 }}
>
{/* Outer thick ring */}
<circle cx="110" cy="110" r="105" stroke={stroke} strokeWidth="6" fill="none"/>
{/* Inner thin ring */}
<circle cx="110" cy="110" r="91" stroke={stroke} strokeWidth="1.8" fill="none"/>
{/* Decorative dots on sides */}
<circle cx="6" cy="110" r="4" fill={stroke}/>
<circle cx="214" cy="110" r="4" fill={stroke}/>
{/* ── BULB BODY ── */}
{/* Outer bulb shape — two symmetric curves meeting at top */}
<path
d="M95 95 C80 108 70 122 70 140 C70 161 84 178 110 178 C136 178 150 161 150 140 C150 122 140 108 125 95"
stroke={stroke} strokeWidth="4" fill="none" strokeLinecap="round" strokeLinejoin="round"
/>
{/* Inner highlight curve on bulb */}
<path
d="M100 97 C88 109 80 122 80 140 C80 156 90 170 110 172"
stroke={stroke} strokeWidth="1.5" fill="none" strokeLinecap="round" opacity="0.5"
/>
{/* Bulb stem + base lines */}
<line x1="97" y1="178" x2="123" y2="178" stroke={stroke} strokeWidth="4" strokeLinecap="round"/>
<line x1="99" y1="186" x2="121" y2="186" stroke={stroke} strokeWidth="3.5" strokeLinecap="round"/>
<line x1="102" y1="194" x2="118" y2="194" stroke={stroke} strokeWidth="3" strokeLinecap="round"/>
{/* Vertical stem lines */}
<line x1="97" y1="95" x2="97" y2="178" stroke={stroke} strokeWidth="3.2" strokeLinecap="round"/>
<line x1="123" y1="95" x2="123" y2="178" stroke={stroke} strokeWidth="3.2" strokeLinecap="round"/>
{/* ── GLOBE on top of bulb ── */}
<circle cx="110" cy="80" r="33" fill={globeFill} stroke={stroke} strokeWidth="3.5"/>
{/* Globe: central vertical ellipse */}
<ellipse cx="110" cy="80" rx="15" ry="33" stroke={stroke} strokeWidth="2" fill="none"/>
{/* Globe: horizontal latitude lines */}
<line x1="77" y1="80" x2="143" y2="80" stroke={stroke} strokeWidth="1.6"/>
<line x1="80" y1="63" x2="140" y2="63" stroke={stroke} strokeWidth="1.3"/>
<line x1="80" y1="97" x2="140" y2="97" stroke={stroke} strokeWidth="1.3"/>
{/* Globe: small curved landmass hint */}
<path d="M100 55 Q108 58 114 54 Q120 50 118 58 Q116 64 110 62 Q104 60 100 55Z"
fill={stroke} opacity="0.35"/>
{/* ── ARCED TEXT ── */}
<path id="logoTop" d="M 15,110 A 95,95 0 0,1 205,110" fill="none"/>
<path id="logoBot" d="M 17,112 A 93,93 0 0,0 203,112" fill="none"/>
<text fontSize="18.5" fontWeight="900" fill={stroke}
fontFamily="'Arial Black','Arial',sans-serif" letterSpacing="3.8">
<textPath href="#logoTop" startOffset="8%">ELECTRON JAAL</textPath>
</text>
<text fontSize="14" fontWeight="700" fill={stroke}
fontFamily="'Arial','sans-serif'" letterSpacing="2.8">
<textPath href="#logoBot" startOffset="5%">SECONDARY SCHOOL</textPath>
</text>
</svg>
);
};
/* ══════════════════════════════════════════
MONGOLIAN CORNER MOTIF
══════════════════════════════════════════ */
const MongolMotif = ({ size = 28, color = "rgba(255,255,255,0.18)" }) => (
<svg width={size} height={size} viewBox="0 0 28 28" fill="none">
<rect x="4" y="4" width="20" height="20" stroke={color} strokeWidth="1.2" fill="none"/>
<rect x="9" y="9" width="10" height="10" stroke={color} strokeWidth="0.9" fill="none"/>
<line x1="4" y1="14" x2="24" y2="14" stroke={color} strokeWidth="0.7"/>
<line x1="14" y1="4" x2="14" y2="24" stroke={color} strokeWidth="0.7"/>
<circle cx="14" cy="14" r="2" fill={color}/>
</svg>
);
/* ══════════════════════════════════════════
COLOR SWATCH
══════════════════════════════════════════ */
const Swatch = ({ hex, name, note, border }) => (
<div style={{ textAlign:"center", width:84 }}>
<div style={{ width:64, height:64, borderRadius:12, background:hex, margin:"0 auto 6px",
boxShadow:"0 4px 12px rgba(0,0,0,0.14)", border:border?`1.5px solid ${C.grayL}`:"none" }}/>
<div style={{ fontSize:11, fontWeight:700, color:C.dark, lineHeight:1.3 }}>{name}</div>
<div style={{ fontSize:9, fontFamily:"monospace", color:C.gray, marginTop:2 }}>{hex}</div>
{note && <div style={{ fontSize:9, color:C.gray, marginTop:2, lineHeight:1.3 }}>{note}</div>}
</div>
);
/* ══════════════════════════════════════════
NOTEBOOK COVER — Modern redesign
A5 ratio ~188×266px display
══════════════════════════════════════════ */
const NotebookCover = ({ subject, subjectMn, gradeLabel, accentColor, accentDark, icon }) => {
const [hover, setHover] = useState(false);
const W = 188, H = 276, SPINE = 30;
return (
<div
onMouseEnter={()=>setHover(true)}
onMouseLeave={()=>setHover(false)}
style={{
width:W, height:H, flexShrink:0, cursor:"pointer",
borderRadius:8,
boxShadow: hover
? `0 20px 48px rgba(0,0,0,0.26), 0 4px 12px rgba(0,0,0,0.14), 4px 0 0 ${accentColor}`
: `0 5px 20px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.08)`,
transform: hover ? "translateY(-5px) rotate(0.5deg)" : "none",
transition: "all 0.25s cubic-bezier(.25,.46,.45,.94)",
display:"flex", overflow:"hidden",
background:C.cream,
border:`1px solid ${C.grayL}`,
}}
>
{/* ── LEFT SPINE ── */}
<div style={{
width:SPINE, flexShrink:0,
background:`linear-gradient(185deg, ${accentDark} 0%, ${accentColor} 60%, ${accentColor}CC 100%)`,
display:"flex", flexDirection:"column",
alignItems:"center", justifyContent:"space-between",
padding:"10px 0", position:"relative", overflow:"hidden",
}}>
<div style={{ position:"absolute", inset:0, opacity:0.12,
background:`repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(255,255,255,0.3) 8px, rgba(255,255,255,0.3) 9px)` }}/>
<MongolMotif size={20} color="rgba(255,255,255,0.25)"/>
<div style={{ transform:"rotate(-90deg)", whiteSpace:"nowrap" }}>
<Logo size={20} variant="dark"/>
</div>
<MongolMotif size={20} color="rgba(255,255,255,0.25)"/>
</div>
{/* ── RIGHT MAIN AREA ── */}
<div style={{ flex:1, display:"flex", flexDirection:"column", position:"relative" }}>
{/* Top gradient accent bar */}
<div style={{ height:5, background:`linear-gradient(90deg,${accentColor},${accentDark})` }}/>
{/* HEADER */}
<div style={{ padding:"9px 13px 8px", borderBottom:`1px solid ${C.grayL}`,
display:"flex", justifyContent:"space-between", alignItems:"flex-start" }}>
<div style={{ background:accentColor, color:C.white, fontSize:7.5, fontWeight:800,
padding:"3px 7px", borderRadius:4, letterSpacing:0.8 }}>{gradeLabel}</div>
<div style={{ textAlign:"right" }}>
<div style={{ fontSize:7.5, fontWeight:800, color:accentDark, letterSpacing:0.8 }}>ELECTRON JAAL</div>
<div style={{ fontSize:6.5, color:C.gray, letterSpacing:0.5 }}>Secondary School</div>
</div>
</div>
{/* SUBJECT ZONE */}
<div style={{ padding:"14px 13px 10px", borderBottom:`1px solid ${C.grayL}` }}>
{/* Modern icon circle */}
<div style={{ width:44, height:44, borderRadius:"50%",
background:`linear-gradient(135deg,${accentColor}22,${accentDark}18)`,
border:`2px solid ${accentColor}50`,
display:"flex", alignItems:"center", justifyContent:"center",
fontSize:22, marginBottom:11 }}>{icon}</div>
<div style={{ fontSize:18, fontWeight:900, color:accentDark,
letterSpacing:-0.2, lineHeight:1.1, marginBottom:5 }}>{subject}</div>
{/* Thin accent rule */}
<div style={{ display:"flex", alignItems:"center", gap:5, marginBottom:5 }}>
<div style={{ height:2, width:16, borderRadius:1, background:accentColor }}/>
<div style={{ height:2, width:4, borderRadius:1, background:accentColor, opacity:0.5 }}/>
<div style={{ height:1, flex:1, background:`${accentColor}30` }}/>
</div>
<div style={{ fontSize:8.5, color:C.gray, fontWeight:500, letterSpacing:0.4 }}>{subjectMn}</div>
</div>
{/* STUDENT INFO — ruled lines */}
<div style={{ padding:"11px 13px", flex:1 }}>
{[
{ label:"Нэр / Name" },
{ label:"Анги / Grade" },
{ label:"Хичээлийн жил" },
].map(({ label }, i) => (
<div key={i} style={{ marginBottom:10 }}>
<div style={{ fontSize:7.5, color:C.gray, fontWeight:600, letterSpacing:0.9,
textTransform:"uppercase", marginBottom:3 }}>{label}</div>
<div style={{ borderBottom:`1px solid ${C.charcoal}55`, height:16 }}/>
</div>
))}
{/* Ornament divider */}
<div style={{ display:"flex", alignItems:"center", gap:5, marginTop:8 }}>
<div style={{ height:0.8, flex:1, background:C.grayL }}/>
<MongolMotif size={13} color={`${accentColor}70`}/>
<div style={{ height:0.8, flex:1, background:C.grayL }}/>
</div>
</div>
{/* BOTTOM STRIPE */}
<div style={{
height:22,
background:`linear-gradient(90deg,${accentColor}16,${accentColor}06)`,
borderTop:`1px solid ${accentColor}28`,
display:"flex", alignItems:"center", padding:"0 13px",
justifyContent:"space-between",
}}>
<div style={{ fontSize:7, color:accentDark, fontWeight:700, letterSpacing:0.7 }}>
📞 91914110
</div>
<div style={{ fontSize:6.5, color:C.gray }}>ejss.edu.mn</div>
</div>
</div>
</div>
);
};
/* ══════════════════════════════════════════
PROGRAM BADGE
══════════════════════════════════════════ */
const ProgramBadge = ({ title, sub, color, icon }) => (
<div style={{ background:C.white, borderRadius:16, padding:"18px 14px", textAlign:"center",
boxShadow:`0 4px 18px rgba(0,0,0,0.07)`, borderTop:`4px solid ${color}`,
transition:"transform .2s", cursor:"default" }}>
<div style={{ width:48, height:48, borderRadius:14, background:`${color}18`,
display:"flex", alignItems:"center", justifyContent:"center", fontSize:26, margin:"0 auto 10px" }}>{icon}</div>
<div style={{ fontWeight:900, fontSize:14, color }}>{title}</div>
<div style={{ fontSize:11, color:C.gray, marginTop:3 }}>{sub}</div>
</div>
);
/* ══════════════════════════════════════════
SUBJECTS DATA
══════════════════════════════════════════ */
const SUBJECTS = [
// Бага анги
{ id:"nb-b", group:"Бага анги (1–5)", subject:"Сургалтын дэвтэр", subjectMn:"General Notebook", gradeLabel:"1–5-р АНГИ", accentColor:"#2E7BC4", accentDark:"#0F1F8A", icon:"📓" },
{ id:"mn-b", group:"Бага анги (1–5)", subject:"Математик", subjectMn:"Mathematics", gradeLabel:"1–5-р АНГИ", accentColor:"#C84A1A", accentDark:"#7A2206", icon:"🔢" },
{ id:"ml-b", group:"Бага анги (1–5)", subject:"Монгол хэл", subjectMn:"Mongolian Language", gradeLabel:"1–5-р АНГИ", accentColor:"#1A35C8", accentDark:"#0A1880", icon:"📖" },
{ id:"art-b", group:"Бага анги (1–5)", subject:"Дүрслэх урлаг", subjectMn:"Visual Arts & Crafts", gradeLabel:"1–5-р АНГИ", accentColor:"#C84B8A", accentDark:"#9A2060", icon:"🎨" },
{ id:"mb-b", group:"Бага анги (1–5)", subject:"Монгол бичиг", subjectMn:"Traditional Mongolian Script",gradeLabel:"1–5-р АНГИ", accentColor:"#6030B8", accentDark:"#330870", icon:"✍️" },
{ id:"en-b", group:"Бага анги (1–5)", subject:"Англи хэл", subjectMn:"English Language", gradeLabel:"1–5-р АНГИ", accentColor:"#1A7A48", accentDark:"#0A4028", icon:"🇬🇧" },
// Дунд анги
{ id:"nb-m", group:"Дунд анги (6–9)", subject:"Сургалтын дэвтэр", subjectMn:"General Notebook", gradeLabel:"6–9-р АНГИ", accentColor:"#1A35C8", accentDark:"#0F1F8A", icon:"📒" },
{ id:"mn-m", group:"Дунд анги (6–9)", subject:"Математик", subjectMn:"Mathematics", gradeLabel:"6–9-р АНГИ", accentColor:"#B03A10", accentDark:"#6A1A06", icon:"📐" },
{ id:"ml-m", group:"Дунд анги (6–9)", subject:"Монгол хэл", subjectMn:"Mongolian Language & Lit.", gradeLabel:"6–9-р АНГИ", accentColor:"#2050A8", accentDark:"#0D2860", icon:"📝" },
{ id:"art-m", group:"Дунд анги (6–9)", subject:"Дүрслэх урлаг", subjectMn:"Visual Arts", gradeLabel:"6–9-р АНГИ", accentColor:"#C84B8A", accentDark:"#9A2060", icon:"🖌️" },
{ id:"mb-m", group:"Дунд анги (6–9)", subject:"Монгол бичиг", subjectMn:"Traditional Mongolian Script",gradeLabel:"6–9-р АНГИ", accentColor:"#5525A0", accentDark:"#2A0A60", icon:"📜" },
{ id:"en-m", group:"Дунд анги (6–9)", subject:"Англи хэл", subjectMn:"English Language", gradeLabel:"6–9-р АНГИ", accentColor:"#156038", accentDark:"#083020", icon:"🌐" },
{ id:"ph-m", group:"Дунд анги (6–9)", subject:"Физик", subjectMn:"Physics", gradeLabel:"6–9-р АНГИ", accentColor:"#0D8A78", accentDark:"#065248", icon:"⚡" },
{ id:"ch-m", group:"Дунд анги (6–9)", subject:"Хими", subjectMn:"Chemistry", gradeLabel:"6–9-р АНГИ", accentColor:"#B07010", accentDark:"#684008", icon:"🧪" },
{ id:"bi-m", group:"Дунд анги (6–9)", subject:"Биологи", subjectMn:"Biology", gradeLabel:"6–9-р АНГИ", accentColor:"#2A8A2A", accentDark:"#104810", icon:"🌿" },
// Ахлах анги
{ id:"nb-s", group:"Ахлах анги (10–12)", subject:"Сургалтын дэвтэр", subjectMn:"General Notebook", gradeLabel:"10–12-р АНГИ", accentColor:"#0F1F8A", accentDark:"#060C4A", icon:"📔" },
{ id:"mn-s", group:"Ахлах анги (10–12)", subject:"Математик", subjectMn:"Mathematics · IGCSE", gradeLabel:"10–12-р АНГИ", accentColor:"#8A2010", accentDark:"#480A06", icon:"∑" },
{ id:"ml-s", group:"Ахлах анги (10–12)", subject:"Монгол хэл", subjectMn:"Mongolian Language", gradeLabel:"10–12-р АНГИ", accentColor:"#183890", accentDark:"#0A1A58", icon:"🖊️" },
{ id:"art-s", group:"Ахлах анги (10–12)", subject:"Дүрслэх урлаг", subjectMn:"Visual Arts", gradeLabel:"10–12-р АНГИ", accentColor:"#B83878", accentDark:"#7A1848", icon:"🎭" },
{ id:"mb-s", group:"Ахлах анги (10–12)", subject:"Монгол бичиг", subjectMn:"Traditional Mongolian Script",gradeLabel:"10–12-р АНГИ",accentColor:"#401888", accentDark:"#200848", icon:"📃" },
{ id:"en-s", group:"Ахлах анги (10–12)", subject:"Англи хэл", subjectMn:"English · IELTS Prep", gradeLabel:"10–12-р АНГИ", accentColor:"#0F4828", accentDark:"#062016", icon:"🎓" },
{ id:"ph-s", group:"Ахлах анги (10–12)", subject:"Физик", subjectMn:"Physics · IGCSE", gradeLabel:"10–12-р АНГИ", accentColor:"#086858", accentDark:"#043830", icon:"🔬" },
{ id:"ch-s", group:"Ахлах анги (10–12)", subject:"Хими", subjectMn:"Chemistry · IGCSE", gradeLabel:"10–12-р АНГИ", accentColor:"#805008", accentDark:"#482804", icon:"⚗️" },
{ id:"bi-s", group:"Ахлах анги (10–12)", subject:"Биологи", subjectMn:"Biology · IGCSE", gradeLabel:"10–12-р АНГИ", accentColor:"#186018", accentDark:"#0A3008", icon:"🧬" },
];
const GROUPS = ["Бага анги (1–5)", "Дунд анги (6–9)", "Ахлах анги (10–12)"];
const G_COLOR = { "Бага анги (1–5)":C.blueLight, "Дунд анги (6–9)":C.blue, "Ахлах анги (10–12)":C.blueDark };
const MAIN_TABS = ["Товч танилцуулга","Лого","Өнгөний систем","Дэвтрийн загвар","Сургалтын хөтөлбөр","Зан чанар","Хэрэглээ"];
/* ══════════════════════════════════════════
MAIN APP
══════════════════════════════════════════ */
export default function App() {
const [tab, setTab] = useState(0);
const [grp, setGrp] = useState(0);
const filtered = SUBJECTS.filter(s => s.group === GROUPS[grp]);
return (
<div style={{ fontFamily:"'Segoe UI',system-ui,Arial,sans-serif", background:C.grayLL, minHeight:"100vh", color:C.dark }}>
{/* ══ HEADER ══ */}
<header style={{
background:`linear-gradient(138deg,${C.blueDark} 0%,${C.blue} 52%,${C.plum} 100%)`,
padding:"28px 22px 24px", position:"relative", overflow:"hidden",
}}>
{/* Geometric BG */}
<svg style={{ position:"absolute", right:0, top:0, opacity:.05 }} width="260" height="180">
<circle cx="200" cy="90" r="110" fill="white"/>
<circle cx="200" cy="90" r="76" fill="none" stroke="white" strokeWidth="2"/>
<circle cx="200" cy="90" r="44" fill="none" stroke="white" strokeWidth="1.5"/>
</svg>
{/* Plum accent circle */}
<div style={{ position:"absolute", left:-30, bottom:-40, width:180, height:180,
borderRadius:"50%", background:`${C.plum}22`, border:`1px solid ${C.plum}40` }}/>
<div style={{ display:"flex", alignItems:"center", gap:18, position:"relative", zIndex:1 }}>
<Logo size={90} variant="blue-bg"/>
<div>
<div style={{ color:C.goldLight, fontSize:10, fontWeight:800, letterSpacing:3,
textTransform:"uppercase", marginBottom:4 }}>
Нийслэлийн ЕБС · Брэндинг гарын авлага · 2026
</div>
<h1 style={{ color:C.white, margin:0, fontSize:24, fontWeight:900, letterSpacing:.5 }}>ELECTRON JAAL</h1>
<h2 style={{ color:"rgba(255,255,255,0.78)", margin:"3px 0 0", fontSize:13, fontWeight:500, letterSpacing:2 }}>SECONDARY SCHOOL</h2>
<div style={{ marginTop:12, display:"flex", gap:7, flexWrap:"wrap" }}>
{["Мэдлэг","Технологи","Дэлхий"].map((t,i) => (
<span key={i} style={{ background:"rgba(255,255,255,0.13)", color:C.white, fontSize:11,
fontWeight:700, padding:"4px 13px", borderRadius:20,
border:"1px solid rgba(255,255,255,0.28)" }}>{t}</span>
))}
</div>
</div>
</div>
<div style={{ marginTop:16, background:"rgba(0,0,0,0.22)", borderLeft:`3px solid ${C.gold}`,
padding:"8px 14px", borderRadius:"0 8px 8px 0", color:"rgba(255,255,255,0.88)",
fontSize:12, fontStyle:"italic", position:"relative", zIndex:1, maxWidth:480 }}>
"Хүүхэд бол үнэлж баршгүй эрдэнэсээр баян уурхай. Зөвхөн боловсрол түүний мөн чанарыг нээн илрүүлж чадна."
</div>
</header>
{/* ══ TABS ══ */}
<nav style={{ background:C.white, display:"flex", borderBottom:`2px solid ${C.grayL}`,
overflowX:"auto", position:"sticky", top:0, zIndex:10,
boxShadow:"0 2px 12px rgba(0,0,0,0.06)" }}>
{MAIN_TABS.map((t,i) => (
<button key={i} onClick={()=>setTab(i)} style={{
padding:"13px 15px", border:"none", background:"none", cursor:"pointer",
fontWeight:tab===i ? 800 : 500, fontSize:12,
color: tab===i ? C.blue : C.gray,
borderBottom: tab===i ? `3px solid ${C.blue}` : "3px solid transparent",
whiteSpace:"nowrap", transition:"color .18s", flexShrink:0,
}}>{t}</button>
))}
</nav>
<main style={{ maxWidth:760, margin:"0 auto", padding:"22px 16px" }}>
{/* ══ TAB 0: OVERVIEW ══ */}
{tab===0 && (
<div style={{ display:"flex", flexDirection:"column", gap:14 }}>
<div style={{ background:C.white, borderRadius:16, padding:22, boxShadow:"0 2px 14px rgba(0,0,0,0.05)" }}>
<div style={{ fontSize:11, color:C.gray, fontWeight:700, letterSpacing:2, textTransform:"uppercase", marginBottom:14 }}>Сургуулийн тухай</div>
{[
["🎓","Үүсгэн байгуулагч","Э.Энхпүрэв (Ph.D) — бага наснаасаа «Электрон жаал» хочтой, дэлхийг гайхшруулах хурдацтай системээр суралцсан хүн"],
["🌍","Алсын харагдлал","Монголын боловсролыг дэлхийд таниулах — «Монгол дээлтэй хүүхэд дэлхийг тэвэрч буй» дүрслэл"],
["💡","Лого-ийн утга","Гэрэлтүүлэгч = мэдлэг · Дэлхийн бөмбөрцөг = дэлхийн иргэн · 3 ном = тасралтгүй суралцах (тулгын 3 чулуу)"],
["📞","Холбоо барих","Утас: 91914110, 86914110"],
].map(([icon,title,desc],i) => (
<div key={i} style={{ display:"flex", gap:12, marginBottom:i<3?14:0, paddingBottom:i<3?14:0,
borderBottom:i<3?`1px solid ${C.grayL}`:"none" }}>
<span style={{ fontSize:22, flexShrink:0 }}>{icon}</span>
<div>
<div style={{ fontWeight:700, fontSize:13, color:C.dark }}>{title}</div>
<div style={{ fontSize:12, color:C.gray, marginTop:3, lineHeight:1.5 }}>{desc}</div>
</div>
</div>
))}
</div>
<div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:12 }}>
<div style={{ background:`linear-gradient(135deg,${C.blue},${C.blueLight})`, borderRadius:16, padding:20, color:C.white }}>
<div style={{ fontSize:28, marginBottom:8 }}>🧠</div>
<div style={{ fontWeight:800, fontSize:13, marginBottom:6 }}>Оюун санааны боловсрол</div>
<div style={{ fontSize:11, opacity:.85, lineHeight:1.5 }}>Академик мэдлэг, логик сэтгэлгээ, шүүмжлэлт ухаарал</div>
</div>
<div style={{ background:`linear-gradient(135deg,${C.teal},${C.tealLight})`, borderRadius:16, padding:20, color:C.white }}>
<div style={{ fontSize:28, marginBottom:8 }}>❤️</div>
<div style={{ fontWeight:800, fontSize:13, marginBottom:6 }}>Ерөнхий эрдмийн боловсрол</div>
<div style={{ fontSize:11, opacity:.85, lineHeight:1.5 }}>Зан чанар, ёс зүй, амьдралын ур чадвар</div>
</div>
</div>
<div style={{ background:C.white, borderRadius:14, padding:18, boxShadow:"0 2px 14px rgba(0,0,0,0.05)" }}>
<div style={{ fontSize:11, color:C.gray, fontWeight:700, letterSpacing:2, textTransform:"uppercase", marginBottom:14 }}>Сургуулийн зарчим</div>
<div style={{ display:"flex", flexWrap:"wrap", gap:8 }}>
{["Хүүхэд төвтэй суралцах","Жендэрийн тэгш байдал","Ялгаварлан гадуурхахгүй","Шинийг эрэлхийлэх","Ёс зүй · Иргэний хариуцлага","Хамтын ажиллагаа","Академик + амьдрах чадвар"].map((v,i)=>(
<span key={i} style={{ background:C.off, color:C.blue, border:`1.5px solid ${C.grayL}`,
fontSize:11, fontWeight:600, padding:"5px 12px", borderRadius:20 }}>{v}</span>
))}
</div>
</div>
</div>
)}
{/* ══ TAB 1: LOGO ══ */}
{tab===1 && (
<div style={{ display:"flex", flexDirection:"column", gap:14 }}>
<h3 style={{ color:C.blue, fontWeight:800, fontSize:15, margin:0 }}>Лого хувилбарууд</h3>
<div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:12 }}>
{[
{ bg:"#FFFFFF", label:"Цагаан дэвсгэр", variant:"blue" },
{ bg:C.blue, label:"Цэнхэр дэвсгэр", variant:"blue-bg" },
{ bg:C.dark, label:"Бараан дэвсгэр", variant:"dark" },
{ bg:C.plumPale,label:"Ягаан дэвсгэр", variant:"blue" },
].map((item,i)=>(
<div key={i} style={{ background:item.bg, borderRadius:16, padding:24, textAlign:"center",
boxShadow:"0 2px 14px rgba(0,0,0,0.1)", border:item.bg==="#FFFFFF"?`1px solid ${C.grayL}`:"none" }}>
<div style={{ fontSize:10, color:i>1?"rgba(255,255,255,0.5)":C.gray, fontWeight:700,
letterSpacing:2, textTransform:"uppercase", marginBottom:14 }}>{item.label}</div>
<Logo size={116} variant={item.variant}/>
</div>
))}
</div>
{/* Logo anatomy */}
<div style={{ background:C.white, borderRadius:14, padding:20, boxShadow:"0 2px 14px rgba(0,0,0,0.05)" }}>
<div style={{ fontSize:11, color:C.gray, fontWeight:700, letterSpacing:2, textTransform:"uppercase", marginBottom:14 }}>Лого-ийн бүтэц ба утга</div>
{[
["💡","Гэрэлтүүлэгч","Мэдлэг, гэгээрэл, «Электрон» нэрний утгыг илэрхийлнэ"],
["🌍","Дэлхийн бөмбөрцөг","Монгол дээлтэй хүүхэд дэлхийг тэвэрч буй — дэлхийн иргэний тэмдэг"],
["📚","3 ном (суурь хэсэг)","Тулгын 3 чулуу — тасралтгүй шинийг эрэлхийлэн суралцах"],
["⭕","Тойрог хүрээ","Нэгдэл, бүрэн бүтэн боловсрол, иж бүрэн хөгжил"],
].map(([icon,title,desc],i)=>(
<div key={i} style={{ display:"flex", gap:12, marginBottom:i<3?12:0, paddingBottom:i<3?12:0,
borderBottom:i<3?`1px solid ${C.grayL}`:"none" }}>
<span style={{ fontSize:20 }}>{icon}</span>
<div>
<div style={{ fontWeight:700, fontSize:13, color:C.dark }}>{title}</div>
<div style={{ fontSize:11, color:C.gray, marginTop:2 }}>{desc}</div>
</div>
</div>
))}
</div>
<div style={{ background:C.blueDark, borderRadius:14, padding:18, color:C.white }}>
<div style={{ fontWeight:800, fontSize:13, marginBottom:10 }}>⚠️ Хэрэглэх дүрэм</div>
{[
"Лого-ийн хэмжээг хэзээ ч гажуудуулж, шахаж тавихгүй",
"Лого эргэн тойрон лого өргөний 20%-ийн цэвэр зай авна",
"Цэнхэр, бараан, цагаан, цайвар цэнхэр дэвсгэр дээр л ашиглана",
"Ногоон, улаан, шар дэвсгэрт тавихгүй",
].map((r,i)=>(
<div key={i} style={{ display:"flex", gap:8, marginBottom:6, fontSize:12, opacity:.9 }}>
<span style={{ color:C.gold, flexShrink:0 }}>→</span><span>{r}</span>
</div>
))}
</div>
</div>
)}
{/* ══ TAB 2: COLORS ══ */}
{tab===2 && (
<div style={{ display:"flex", flexDirection:"column", gap:14 }}>
<h3 style={{ color:C.blue, fontWeight:800, fontSize:15, margin:0 }}>Өнгөний систем</h3>
<div style={{ background:C.white, borderRadius:14, padding:22, boxShadow:"0 2px 14px rgba(0,0,0,0.05)" }}>
<div style={{ fontSize:11, color:C.gray, fontWeight:700, letterSpacing:2, textTransform:"uppercase", marginBottom:18 }}>Бүрэн өнгөний систем</div>
<div style={{ display:"flex", flexWrap:"wrap", gap:12 }}>
<Swatch hex={C.blueDark} name="Гүн цэнхэр" note="Ахлах анги"/>
<Swatch hex={C.blue} name="Үндсэн цэнхэр" note="Лого · брэнд"/>
<Swatch hex={C.blueLight} name="Цайвар цэнхэр" note="Дунд анги"/>
<Swatch hex={C.teal} name="Тэл ногоон" note="Технологи"/>
<Swatch hex={C.plum} name="Оранж ягаан" note="Дүрслэх урлаг"/>
<Swatch hex={C.plumLight} name="Цайвар ягаан" note="Дагалдах"/>
<Swatch hex={C.gold} name="Гүн алт" note="Акцент"/>
<Swatch hex={C.goldLight} name="Алтан шар" note="Онцлох"/>
<Swatch hex={C.dark} name="Бараан" note="Бичвэр"/>
<Swatch hex={C.gray} name="Саарал" note="Дэд бичвэр"/>
<Swatch hex={C.grayL} name="Цайвар саарал" note="Хүрээ" border/>
<Swatch hex={C.cream} name="Цаасны өнгө" note="Дэвтэр" border/>
</div>
</div>
{/* Full spectrum bar */}
<div style={{ borderRadius:12, overflow:"hidden", height:52, display:"flex",
boxShadow:"0 4px 16px rgba(26,53,200,0.2)" }}>
{[C.blueDark,C.blue,C.blueLight,C.teal,C.tealLight,C.plum,C.plumLight,C.gold,C.goldLight].map((c,i)=>(
<div key={i} style={{ flex:1, background:c }}/>
))}
</div>
{/* Orange-magenta explanation */}
<div style={{ background:C.white, borderRadius:12, padding:20,
boxShadow:"0 2px 10px rgba(0,0,0,0.06)", borderLeft:`4px solid ${C.plum}` }}>
<div style={{ fontWeight:700, fontSize:13, color:C.plum, marginBottom:8 }}>
🌸 Тоорын оранж-ягаан — {C.plum}
</div>
<div style={{ fontSize:12, color:C.charcoal, lineHeight:1.7 }}>
Тоорны жимсний халуун нил ягаан өнгийг орчин үеийн оранж-ягаан тоноор шинэчиллээ.
Цэнхэрийн complementary өнгө болох тул брэндийн цэнхэртэй тэнцвэртэй харагдана.
<strong> Дүрслэх урлаг</strong> хичээлийн дэвтэрт ашиглана.
</div>
<div style={{ marginTop:12, display:"flex", gap:10, alignItems:"center" }}>
<div style={{ display:"flex", gap:6 }}>
{[C.plumDark,C.plum,C.plumLight,C.plumPale].map((c,i)=>(
<div key={i} style={{ width:36, height:36, borderRadius:8, background:c,
boxShadow:"0 2px 6px rgba(0,0,0,0.12)" }}/>
))}
</div>
<div style={{ fontSize:11, color:C.gray }}>← Гүн · Үндсэн · Цайвар · Тунгалаг</div>
</div>
</div>
{/* Subject color map */}
<div style={{ background:C.white, borderRadius:12, padding:20, boxShadow:"0 2px 10px rgba(0,0,0,0.06)" }}>
<div style={{ fontSize:11, color:C.gray, fontWeight:700, letterSpacing:2,
textTransform:"uppercase", marginBottom:14 }}>Хичээлийн өнгөний тогтолцоо</div>
{[
{ icon:"📓", subject:"Ерөнхий дэвтэр", colors:["#2E7BC4","#1A35C8","#0F1F8A"] },
{ icon:"🔢", subject:"Математик", colors:["#C84A1A","#B03A10","#8A2010"] },
{ icon:"📖", subject:"Монгол хэл", colors:["#1A35C8","#2050A8","#183890"] },
{ icon:"🎨", subject:"Дүрслэх урлаг", colors:["#C84B8A","#C84B8A","#B83878"] },
{ icon:"✍️", subject:"Монгол бичиг", colors:["#6030B8","#5525A0","#401888"] },
{ icon:"🇬🇧", subject:"Англи хэл", colors:["#1A7A48","#156038","#0F4828"] },
{ icon:"⚡", subject:"Физик", colors:["—","#0D8A78","#086858"] },
{ icon:"🧪", subject:"Хими", colors:["—","#B07010","#805008"] },
{ icon:"🌿", subject:"Биологи", colors:["—","#2A8A2A","#186018"] },
].map(({ icon, subject, colors }) => (
<div key={subject} style={{ display:"flex", alignItems:"center", gap:10,
marginBottom:10, paddingBottom:10, borderBottom:`1px solid ${C.grayLL}` }}>
<div style={{ fontSize:14, width:20 }}>{icon}</div>
<div style={{ fontSize:12, fontWeight:600, color:C.dark, width:110, flexShrink:0 }}>{subject}</div>
<div style={{ display:"flex", gap:5 }}>
{colors.map((c,i)=> c==="—" ? (
<div key={i} style={{ width:32, height:22, borderRadius:5, background:C.grayLL,
display:"flex", alignItems:"center", justifyContent:"center",
fontSize:10, color:C.gray }}>—</div>
) : (
<div key={i} title={["Бага","Дунд","Ахлах"][i]}
style={{ width:32, height:22, borderRadius:5, background:c,
boxShadow:"0 1px 4px rgba(0,0,0,0.15)" }}/>
))}
</div>
<div style={{ fontSize:9, color:C.gray }}>бага · дунд · ахлах</div>
</div>
))}
</div>
</div>
)}
{/* ══ TAB 3: NOTEBOOKS ══ */}
{tab===3 && (
<div>
{/* Grade group filter */}
<div style={{ display:"flex", gap:8, marginBottom:18, flexWrap:"wrap" }}>
{GROUPS.map((g,i)=>(
<button key={i} onClick={()=>setGrp(i)} style={{
padding:"9px 20px", borderRadius:8,
border:`2px solid ${G_COLOR[g]}`,
background:grp===i ? G_COLOR[g] : C.white,
color:grp===i ? C.white : G_COLOR[g],
fontWeight:700, fontSize:12, cursor:"pointer", transition:"all .18s",
boxShadow:grp===i ? `0 4px 14px ${G_COLOR[g]}44` : "none",
}}>{g}</button>
))}
</div>
<div style={{ background:C.white, borderRadius:10, padding:"12px 16px",
marginBottom:18, boxShadow:"0 1px 6px rgba(0,0,0,0.05)",
borderLeft:`3px solid ${C.plum}` }}>
<div style={{ fontSize:11, color:C.charcoal, lineHeight:1.6 }}>
<strong>Загварын зарчим:</strong> Зүүн өнгөт нуруу (spine) + цаасны дэвсгэртэй баруун хэсэг.
Монгол хээний геометр нурууны дагуу орно. Oxford workbook маягийн шугамтай.
</div>
</div>
<div style={{ display:"flex", flexWrap:"wrap", gap:16 }}>
{filtered.map(s => <NotebookCover key={s.id} {...s}/>)}
</div>
{/* Specs */}
<div style={{ background:C.charcoal, borderRadius:14, padding:20, marginTop:20, color:C.white }}>
<div style={{ fontWeight:700, fontSize:12, marginBottom:12, color:C.goldLight }}>📐 Хэвлэлийн тодорхойлолт</div>
<div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10 }}>
{[
["Хэмжээ","A5 · 148×210мм · хамгаалалттай нүүр"],
["Цаас","120gsm matte art paper · cream white"],
["Өнгө","CMYK · Pantone нийцтэй"],
["Нуруу","30мм өргөн · хичээлийн өнгийн gradient"],
["Оранж ягаан","CMYK: C0 M70 Y10 K15 · #C84B8A"],
["Монгол хээ","Нурууны дагуу · 15% opacity"],
].map(([k,v],i)=>(
<div key={i} style={{ background:"rgba(255,255,255,0.07)", borderRadius:8, padding:"8px 12px" }}>
<div style={{ fontSize:10, color:"rgba(255,255,255,0.5)", fontWeight:600, marginBottom:3 }}>{k}</div>
<div style={{ fontSize:11, color:"rgba(255,255,255,0.9)" }}>{v}</div>
</div>
))}
</div>
</div>
</div>
)}
{/* ══ TAB 4: PROGRAMS ══ */}
{tab===4 && (
<div style={{ display:"flex", flexDirection:"column", gap:14 }}>
<h3 style={{ color:C.blue, fontWeight:800, fontSize:15, margin:0 }}>Сургалтын хөтөлбөр</h3>
<div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:10 }}>
<ProgramBadge title="Бага анги" sub="1–5 дугаар" color={C.teal} icon="🌱"/>
<ProgramBadge title="Дунд анги" sub="6–9 дугаар" color={C.blue} icon="🔭"/>
<ProgramBadge title="Ахлах анги" sub="10–12 дугаар" color={C.blueDark} icon="🚀"/>
</div>
{[
{ color:C.teal, label:"🌱 Бага анги (1–5) — Суурь чадвар", items:[
"Унших ойлгох чадвар — эх хэлээр унших, ойлгох, илэрхийлэх",
"Ой тогтоолт — дуу, шүлэг, оньсого, зүйр цэцэн үг цээжлэх",
"Ёс суртахуун — «Эрдэнэсийн уурхай» зан чанарын хөтөлбөр",
"Бүтээлч сэтгэлгээ — урлал, дизайн, гар урлал",
"Бие даан суралцах чадвар",
"Taekwondo · Art · Хөгжим-бүжиг · IQ · Electronic Robot",
]},
{ color:C.blue, label:"🔭 Дунд анги (6–9) — Өсвөр насны хөгжил", items:[
"«Эмх цэгцтэй сэтгэлгээ» — 6-7-р анги",
"«Шулуун зам» — 7-8-р анги",
"Зуслан сургалт — дүгнэлт, бүтээлч үйл, спорт",
"Багаар ажиллах — төсөлт үйл ажиллагааны систем",
"9-р анги — удирдагч бэлтгэх сургалт",
"Oxford IB хөтөлбөрийн бага ангийн танилцуулга",
]},
{ color:C.blueDark, label:"🚀 Ахлах анги (10–12) — Дэлхийн иргэн", items:[
"IGCSE / Oxford IB олон улсын стандарт",
"Дизайн зураг зүй, архитектур, хоол зүй, оёдол",
"Анхны тусламж, бие даан амьдрах чадвар",
"Нийгмийн хариуцлага, мэргэжил сонголт",
"English, Physics, Science, Biology, Math",
"IELTS бэлтгэл — 12-р анги",
]},
].map(({ color, label, items }) => (
<div key={label} style={{ background:C.white, borderRadius:14, padding:18,
boxShadow:"0 2px 14px rgba(0,0,0,0.05)", borderLeft:`4px solid ${color}` }}>
<div style={{ fontWeight:800, color, fontSize:13, marginBottom:10 }}>{label}</div>
{items.map((t,i) => (
<div key={i} style={{ display:"flex", gap:8, marginBottom:6, fontSize:12, color:C.dark }}>
<span style={{ color, flexShrink:0 }}>✓</span><span>{t}</span>
</div>
))}
</div>
))}
</div>
)}
{/* ══ TAB 5: CHARACTER ══ */}
{tab===5 && (
<div style={{ display:"flex", flexDirection:"column", gap:14 }}>
<h3 style={{ color:C.blue, fontWeight:800, fontSize:15, margin:0 }}>«Эрдэнэсийн уурхай» зан чанарын хөтөлбөр</h3>
<div style={{ background:`linear-gradient(135deg,${C.blue},${C.teal})`, borderRadius:16, padding:20, color:C.white }}>
<div style={{ fontWeight:800, fontSize:14, marginBottom:8 }}>💎 Эрдэнэсийн уурхай</div>
<div style={{ fontSize:12, opacity:.9, lineHeight:1.6 }}>
1-12-р анги хүртэл алгасалгүй хэрэгжих зорилтот хөтөлбөр. Сар бүр нэг сайн зан чанарыг бүх хичээлтэй уялдуулан сурагчид дотор бат суулгана.
</div>
</div>
{[
{ grade:"1-р анги", color:"#4FC3F7", vals:["Цэвэрч нямбай чанар","Нөхөрсөг","Зэлдэг найрсаг","Дуулгавартай байх","Бусадтай хуваалцах","Сайхан сэтгэлтэй байх","Тусч байх","Үнэнч шударга байх","Хамтын ажиллагаа"] },
{ grade:"2-р анги", color:"#81C784", vals:["Цэвэрч нямбай","Нөхөрсөг чанар","Зэлдэг найрсаг чанар","Дуулгавартай","Хуваалцах чанар","Сайхан сэтгэл","Тусч байх","Үнэнч шударга байх","Тэвчээртэй байх"] },
{ grade:"3-р анги", color:C.plumLight, vals:["Цэвэр ариун сэтгэл","Нөхөрсөг чанар","Зэлдэг найрсаг байдал","Дуулгавартай байх","Өгөөмөр сэтгэл","Эв нэгдэлтэй байх","Тусч сэтгэл","Үнэнч шударга чанар","Хүндэтгэлтэй байх"] },
{ grade:"4-р анги", color:"#FFB74D", vals:["Эмх цэгцтэй байдал","Нөхөрсөг байдал","Тэвчээртэй сонсох","Хариуцлагатай зан чанар","Боловсролыг хуваалцах","Хамтран ажиллах","Чин сэтгэлээсээ туслах","Үнэнч шударга чанар","Сахилга бат"] },
].map(({ grade, color, vals }) => (
<div key={grade} style={{ background:C.white, borderRadius:14, padding:18,
boxShadow:"0 2px 14px rgba(0,0,0,0.05)" }}>
<div style={{ fontWeight:800, fontSize:13, color:C.dark, marginBottom:12 }}>
<span style={{ display:"inline-block", width:10, height:10, borderRadius:"50%",
background:color, marginRight:8 }}/>
{grade}
</div>
<div style={{ display:"flex", flexWrap:"wrap", gap:6 }}>
{vals.map((v,i) => (
<div key={i} style={{ background:`${color}28`, borderRadius:20,
padding:"5px 12px", fontSize:11, fontWeight:700, color:C.dark, whiteSpace:"nowrap" }}>
{v}
</div>
))}
</div>
</div>
))}
</div>
)}
{/* ══ TAB 6: USAGE ══ */}
{tab===6 && (
<div style={{ display:"flex", flexDirection:"column", gap:14 }}>
<h3 style={{ color:C.blue, fontWeight:800, fontSize:15, margin:0 }}>Хэрэглээний жишээ</h3>
{/* ID Card */}
<div>
<div style={{ fontSize:11, color:C.gray, fontWeight:700, letterSpacing:2,
textTransform:"uppercase", marginBottom:10 }}>Сурагчийн үнэмлэх</div>
<div style={{ maxWidth:340, borderRadius:20, overflow:"hidden",
boxShadow:`0 8px 32px rgba(26,53,200,0.22)` }}>
<div style={{ background:`linear-gradient(135deg,${C.blueDark},${C.blue})`,
padding:"16px 18px", display:"flex", alignItems:"center", gap:12 }}>
<Logo size={48} variant="blue-bg"/>
<div>
<div style={{ color:C.goldLight, fontSize:9, fontWeight:800, letterSpacing:2 }}>НИЙСЛЭЛИЙН ЕБС</div>
<div style={{ color:C.white, fontSize:13, fontWeight:900 }}>ELECTRON JAAL</div>
<div style={{ color:"rgba(255,255,255,0.65)", fontSize:9 }}>Secondary School</div>
</div>
</div>
<div style={{ background:C.white, padding:"14px 18px", display:"flex", gap:12 }}>
<div style={{ width:52, height:64, background:C.off, borderRadius:12,
display:"flex", alignItems:"center", justifyContent:"center", fontSize:28 }}>👤</div>
<div>
<div style={{ fontWeight:900, fontSize:15, color:C.dark }}>Овог Нэр</div>
<div style={{ color:C.gray, fontSize:11, marginTop:2 }}>10-р анги · 2025–2026</div>
<div style={{ color:C.gray, fontSize:10, marginTop:1 }}>Ерөнхий боловсролын сургууль</div>
<div style={{ marginTop:8, display:"inline-block", background:C.blue, color:C.white,
fontSize:9, fontWeight:800, padding:"3px 10px", borderRadius:6, letterSpacing:1 }}>
EJ-2025-####
</div>
</div>
</div>
<div style={{ background:C.gold, padding:"8px 18px", display:"flex",
justifyContent:"space-between", alignItems:"center" }}>
<span style={{ fontSize:10, fontWeight:800, color:C.dark }}>📞 91914110</span>
<span style={{ fontSize:10, fontWeight:700, color:C.dark }}>💡 Мэдлэг · Технологи · Дэлхий</span>
</div>
</div>
</div>
{/* Certificate */}
<div>
<div style={{ fontSize:11, color:C.gray, fontWeight:700, letterSpacing:2,
textTransform:"uppercase", marginBottom:10 }}>Гэрчилгээний хүрээ</div>
<div style={{ background:C.white, borderRadius:18, padding:28,
border:`3px solid ${C.blue}`, textAlign:"center",
boxShadow:"0 4px 20px rgba(0,0,0,0.07)", position:"relative" }}>
<div style={{ position:"absolute", top:0, left:0, right:0, height:7,
background:`linear-gradient(90deg,${C.blueDark},${C.blue},${C.plum},${C.gold})`,
borderRadius:"15px 15px 0 0" }}/>
<div style={{ marginTop:8 }}><Logo size={68}/></div>
<div style={{ fontWeight:900, fontSize:17, color:C.blue, marginTop:12, letterSpacing:2 }}>ELECTRON JAAL</div>
<div style={{ color:C.gray, fontSize:11 }}>Secondary School · Нийслэлийн ЕБС</div>
<div style={{ width:60, height:2, background:C.gold, margin:"12px auto" }}/>
<div style={{ fontSize:13, color:C.dark, marginBottom:6 }}>Энэхүү гэрчилгээг</div>
<div style={{ fontWeight:800, fontSize:18, color:C.blue,
borderBottom:`2px dashed ${C.grayL}`, paddingBottom:8, margin:"0 30px 8px" }}>
________________________
</div>
<div style={{ fontSize:13, color:C.dark, marginBottom:20 }}>-д олгосон болно</div>
<div style={{ display:"flex", justifyContent:"center", gap:40 }}>
{["Захирал","Огноо"].map(l=>(
<div key={l} style={{ textAlign:"center" }}>
<div style={{ borderTop:`2px solid ${C.blue}`, width:90, marginBottom:4 }}/>
<div style={{ fontSize:10, color:C.gray }}>{l}</div>
</div>
))}
</div>
</div>
</div>
{/* Typography */}
<div style={{ background:C.white, borderRadius:14, padding:20, boxShadow:"0 2px 14px rgba(0,0,0,0.05)" }}>
<div style={{ fontSize:11, color:C.gray, fontWeight:700, letterSpacing:2,
textTransform:"uppercase", marginBottom:16 }}>Бичгийн загвар</div>
{[
{ s:30, w:900, t:"ELECTRON JAAL", c:C.blue, l:"Display · 900" },
{ s:20, w:800, t:"Secondary School", c:C.dark, l:"H1 · 800" },
{ s:15, w:700, t:"Сургалтын хөтөлбөр", c:C.blueLight, l:"H2 · 700" },
{ s:13, w:400, t:"Сурагч бүр өөрийн авьяас чадвараа нээн илрүүлж чадна.", c:C.dark, l:"Body · 400" },
{ s:11, w:500, t:"Нийслэлийн ЕБС · 2025–2026 · 91914110", c:C.gray, l:"Caption · 500" },
].map((item,i)=>(
<div key={i} style={{ marginBottom:12, paddingBottom:12,
borderBottom:i<4?`1px solid ${C.grayL}`:"none" }}>
<div style={{ fontSize:9, color:C.gray, fontWeight:700, letterSpacing:1,
textTransform:"uppercase", marginBottom:3 }}>{item.l}</div>
<div style={{ fontSize:item.s, fontWeight:item.w, color:item.c, lineHeight:1.15 }}>{item.t}</div>
</div>
))}
</div>
{/* Pattern */}
<div style={{ background:C.white, borderRadius:14, padding:20, boxShadow:"0 2px 14px rgba(0,0,0,0.05)" }}>
<div style={{ fontSize:11, color:C.gray, fontWeight:700, letterSpacing:2,
textTransform:"uppercase", marginBottom:14 }}>Геометр хэв маяг</div>
<svg width="100%" height="64" viewBox="0 0 560 64">
{Array.from({length:9}).map((_,i)=>(
<g key={i}>
<circle cx={32+i*62} cy={32} r={26} fill="none"
stroke={i%3===0?C.blue:i%3===1?C.plum:C.gold}
strokeWidth={i%2===0?2.5:1.2} opacity={0.2+i%3*0.15}/>
<circle cx={32+i*62} cy={32} r={14} fill="none"
stroke={i%3===0?C.blue:i%3===1?C.plum:C.gold}
strokeWidth={1} opacity={0.12}/>
</g>
))}
</svg>
</div>
</div>
)}
</main>
<footer style={{ background:C.dark, color:"rgba(255,255,255,0.4)", textAlign:"center",
padding:"18px 20px", fontSize:11, marginTop:24 }}>
<div style={{ marginBottom:4 }}>
<span style={{ color:C.goldLight, fontWeight:700 }}>ELECTRON JAAL SECONDARY SCHOOL</span>
</div>
Нийслэлийн ЕБС · Улаанбаатар · 📞 91914110, 86914110 · Брэндинг гарын авлага © 2026
</footer>
</div>
);
}
We believe education should feel welcoming, not overwhelming. That’s why we create easy-to-follow courses, practical resources, and a friendly community where you can grow at your own pace—no complicated jargon, just clear guidance every step of the way.
Whether you’re brushing up on skills or starting from scratch, we’re here to help. Together, we’ll turn big goals into manageable steps so you can share that "aha!" moment and move forward with confidence.
Have Questions? Let’s Talk
Send us a quick note and let’s figure things out together—we’re excited to help you reach your learning goals.