/* global React, window */
// Eyad Academy — SVG illustrations (hero scene, course covers, teacher portraits, cert seal)
// ============================================================
// HERO SCENE — student at desk silhouette with floating elements
// Stylized, abstract — not a photo
// ============================================================
function HeroScene() {
return (
);
}
// ============================================================
// COURSE COVER — subject-themed editorial scene
// ============================================================
function CourseCover({ subject, accent }) {
// accent is a gradient css string from data — we read it just for fallback bg
const bgGradients = {
quran: { from: "#6B5BC0", to: "#8B7AD9", warm: "#C9B8FF" },
arabic: { from: "#B8862D", to: "#D9A441", warm: "#F5D67A" },
math: { from: "#1B2654", to: "#2D3A6E", warm: "#6FA8DC" },
science: { from: "#E89B8B", to: "#F2B5B0", warm: "#F5D67A" },
};
const g = bgGradients[subject] || bgGradients.quran;
return (
);
}
function QuranArt() {
return (
{/* Open Quran/book */}
{/* Left page */}
{/* Right page */}
{/* Spine */}
{/* Calligraphy lines */}
{[0,1,2,3].map(i => (
))}
{/* Gold ornament */}
{/* Crescent moon decoration top-right */}
);
}
function ArabicArt() {
return (
{/* Stylized Arabic letter "ع" or calligraphy stroke */}
ع
ربي
{/* Underline stroke */}
{/* Diacritic dots */}
);
}
function MathArt() {
return (
{/* Floating math glyphs */}
π
x²
∑
∞
{/* Graph line */}
{/* Axes */}
);
}
function ScienceArt() {
return (
{/* Flask */}
{/* Bubbles */}
{/* Top neck */}
{/* Atom */}
{/* DNA-ish */}
);
}
// ============================================================
// TEACHER PORTRAIT — abstract gradient avatar, no specific identity
// Genders/styles vary by `style` prop
// ============================================================
function TeacherPortrait({ style = "warm", initials = "" }) {
// 4 portrait styles using gradient + simple silhouette
const palettes = {
warm: { sky1: "#6B5BC0", sky2: "#3D2D8E", skin: "#3D2A1F", hair: "#1F1410", accent: "#F5D67A", wrap: null },
gold: { sky1: "#D9A441", sky2: "#B8862D", skin: "#3D2A1F", hair: "#1F1410", accent: "#FFFCF5", wrap: "#1B2654" },
navy: { sky1: "#2D3A6E", sky2: "#0F1B3D", skin: "#5C3D2A", hair: "#2B1A10", accent: "#E8B954", wrap: null },
purple: { sky1: "#8B7AD9", sky2: "#6B5BC0", skin: "#5C3D2A", hair: "#2B1A10", accent: "#F5D67A", wrap: "#0F1B3D" },
};
const p = palettes[style] || palettes.warm;
const id = `tp-${style}-${initials || "x"}`;
return (
);
}
// ============================================================
// THEME / LANG ICONS
// ============================================================
function ThemeIcon({ theme }) {
if (theme === "dark") {
// moon
return ();
}
// sun
return (
);
}
Object.assign(window, { HeroScene, CourseCover, TeacherPortrait, ThemeIcon });