/* 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 (
    <svg viewBox="0 0 600 600" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <radialGradient id="hero-sky" cx="40%" cy="20%" r="80%">
          <stop offset="0%"  stopColor="#3D4D8E"/>
          <stop offset="60%" stopColor="#1B2654"/>
          <stop offset="100%" stopColor="#0F1B3D"/>
        </radialGradient>
        <radialGradient id="hero-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%"  stopColor="#F5D67A" stopOpacity="0.85"/>
          <stop offset="60%" stopColor="#D9A441" stopOpacity="0.3"/>
          <stop offset="100%" stopColor="#D9A441" stopOpacity="0"/>
        </radialGradient>
        <linearGradient id="hero-desk" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#B8862D"/>
          <stop offset="100%" stopColor="#6B4D1A"/>
        </linearGradient>
        <linearGradient id="hero-body" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%"  stopColor="#8B7AD9"/>
          <stop offset="100%" stopColor="#6B5BC0"/>
        </linearGradient>
        <linearGradient id="hero-book" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%"  stopColor="#FFFCF5"/>
          <stop offset="100%" stopColor="#F4ECDA"/>
        </linearGradient>
        <linearGradient id="hero-screen" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"  stopColor="#E8B954"/>
          <stop offset="100%" stopColor="#B8862D"/>
        </linearGradient>
      </defs>

      <rect x="0" y="0" width="600" height="600" fill="url(#hero-sky)"/>

      {/* Soft warm glow behind the figure */}
      <circle cx="300" cy="280" r="240" fill="url(#hero-glow)"/>

      {/* Subtle starfield */}
      {[[80,90,1.4],[140,60,1],[480,80,1.6],[520,140,1.2],[80,420,1.1],[540,440,1.4],[60,520,1.2],[110,180,0.9],[470,300,0.9],[510,510,1.1]].map(([cx, cy, r], i) => (
        <circle key={i} cx={cx} cy={cy} r={r} fill="#F5D67A" opacity="0.85"/>
      ))}

      {/* Floating books */}
      <g opacity="0.85">
        <g transform="translate(80,180) rotate(-12)">
          <rect x="0" y="0" width="50" height="64" rx="4" fill="#E89B8B"/>
          <rect x="0" y="0" width="50" height="8" fill="#C97A6A"/>
          <line x1="6" y1="22" x2="44" y2="22" stroke="#fff" strokeOpacity="0.5" strokeWidth="1.2"/>
          <line x1="6" y1="32" x2="44" y2="32" stroke="#fff" strokeOpacity="0.5" strokeWidth="1.2"/>
          <line x1="6" y1="42" x2="36" y2="42" stroke="#fff" strokeOpacity="0.5" strokeWidth="1.2"/>
        </g>
        <g transform="translate(490,200) rotate(15)">
          <rect x="0" y="0" width="46" height="60" rx="4" fill="#6FA8DC"/>
          <rect x="0" y="0" width="46" height="8" fill="#4D8AC0"/>
          <line x1="6" y1="22" x2="40" y2="22" stroke="#fff" strokeOpacity="0.5" strokeWidth="1.2"/>
          <line x1="6" y1="32" x2="40" y2="32" stroke="#fff" strokeOpacity="0.5" strokeWidth="1.2"/>
        </g>
      </g>

      {/* Desk surface */}
      <ellipse cx="300" cy="540" rx="280" ry="22" fill="#000" opacity="0.4"/>
      <rect x="40" y="510" width="520" height="60" rx="6" fill="url(#hero-desk)"/>

      {/* Open laptop / book on desk */}
      <g transform="translate(300,480)">
        <path d="M -110 30 L 110 30 L 140 60 L -140 60 Z" fill="#2D3A6E" stroke="#0F1B3D" strokeWidth="2"/>
        <rect x="-100" y="-50" width="200" height="80" rx="6" fill="#1B2654" stroke="#0F1B3D" strokeWidth="2"/>
        <rect x="-90" y="-42" width="180" height="64" rx="4" fill="url(#hero-screen)"/>
        {/* "code" lines on screen */}
        <rect x="-80" y="-32" width="120" height="6" rx="2" fill="#FBF6EC" opacity="0.95"/>
        <rect x="-80" y="-20" width="90" height="6" rx="2" fill="#FBF6EC" opacity="0.7"/>
        <rect x="-80" y="-8"  width="140" height="6" rx="2" fill="#FBF6EC" opacity="0.85"/>
        <rect x="-80" y="4"   width="70"  height="6" rx="2" fill="#FBF6EC" opacity="0.6"/>
      </g>

      {/* Student silhouette — hooded figure, abstract, no face details */}
      <g transform="translate(300,360)">
        {/* Body torso */}
        <path
          d="M -90 100 C -90 30, -60 -10, 0 -10 C 60 -10, 90 30, 90 100 Z"
          fill="url(#hero-body)"/>
        {/* Arms reaching to laptop */}
        <path d="M -90 60 C -120 80, -110 110, -70 105" fill="url(#hero-body)"/>
        <path d="M 90 60 C 120 80, 110 110, 70 105" fill="url(#hero-body)"/>
        {/* Head */}
        <circle cx="0" cy="-50" r="42" fill="#3D2A1F"/>
        {/* Hair / head wrap */}
        <path d="M -40 -50 C -40 -85, -20 -95, 0 -95 C 20 -95, 40 -85, 40 -50 C 40 -65, 25 -75, 0 -75 C -25 -75, -40 -65, -40 -50 Z" fill="#1F1410"/>
        {/* Cheek warm light */}
        <circle cx="-25" cy="-40" r="6" fill="#E89B8B" opacity="0.55"/>
        <circle cx="25" cy="-40" r="6" fill="#E89B8B" opacity="0.55"/>
      </g>

      {/* Foreground sparkles */}
      <g>
        <circle cx="150" cy="320" r="3" fill="#F5D67A"/>
        <circle cx="450" cy="300" r="3" fill="#F5D67A"/>
        <circle cx="200" cy="240" r="2" fill="#F5D67A" opacity="0.7"/>
        <circle cx="420" cy="380" r="2.5" fill="#F5D67A" opacity="0.8"/>
      </g>

      {/* Caption */}
      <text x="300" y="585" fontFamily="ui-monospace,monospace" fontSize="9" fill="#FBF6EC" opacity="0.4" textAnchor="middle" letterSpacing="2">EYAD&nbsp;·&nbsp;LEARNING&nbsp;COMPANION</text>
    </svg>
  );
}

// ============================================================
// 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 (
    <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <linearGradient id={`cc-bg-${subject}`} x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%" stopColor={g.from}/>
          <stop offset="100%" stopColor={g.to}/>
        </linearGradient>
        <radialGradient id={`cc-glow-${subject}`} cx="80%" cy="20%" r="70%">
          <stop offset="0%" stopColor={g.warm} stopOpacity="0.7"/>
          <stop offset="100%" stopColor={g.warm} stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect width="400" height="250" fill={`url(#cc-bg-${subject})`}/>
      <rect width="400" height="250" fill={`url(#cc-glow-${subject})`}/>

      {/* Decorative diagonal stripes */}
      <g opacity="0.08">
        {Array.from({ length: 14 }).map((_, i) => (
          <rect key={i} x={-60 + i * 36} y="-20" width="14" height="320" fill="white" transform="rotate(-25)"/>
        ))}
      </g>

      {subject === "quran" && <QuranArt/>}
      {subject === "arabic" && <ArabicArt/>}
      {subject === "math" && <MathArt/>}
      {subject === "science" && <ScienceArt/>}

      {/* Subtle floating dots */}
      <g>
        <circle cx="60" cy="50" r="3" fill="#F5D67A"/>
        <circle cx="340" cy="80" r="2" fill="#F5D67A" opacity="0.6"/>
        <circle cx="320" cy="200" r="2.5" fill="#F5D67A" opacity="0.7"/>
      </g>
    </svg>
  );
}

function QuranArt() {
  return (
    <g transform="translate(200,135)">
      {/* Open Quran/book */}
      <ellipse cx="0" cy="60" rx="120" ry="14" fill="#000" opacity="0.25"/>
      <g>
        {/* Left page */}
        <path d="M -110 -10 Q -110 -60 -10 -55 L -10 50 Q -110 45 -110 -10 Z"
              fill="#FFFCF5" stroke="#B8862D" strokeWidth="1"/>
        {/* Right page */}
        <path d="M 110 -10 Q 110 -60 10 -55 L 10 50 Q 110 45 110 -10 Z"
              fill="#FFFCF5" stroke="#B8862D" strokeWidth="1"/>
        {/* Spine */}
        <path d="M -10 -55 Q 0 -60 10 -55 L 10 50 Q 0 45 -10 50 Z" fill="#E8B954"/>
        {/* Calligraphy lines */}
        {[0,1,2,3].map(i => (
          <g key={i}>
            <line x1={-95} y1={-30 + i*18} x2={-25} y2={-30 + i*18} stroke="#1B2654" strokeWidth="1.4" opacity="0.7"/>
            <line x1={25} y1={-30 + i*18} x2={95} y2={-30 + i*18} stroke="#1B2654" strokeWidth="1.4" opacity="0.7"/>
          </g>
        ))}
        {/* Gold ornament */}
        <circle cx="-60" cy="-44" r="6" fill="#D9A441"/>
        <circle cx="60" cy="-44" r="6" fill="#D9A441"/>
      </g>
      {/* Crescent moon decoration top-right */}
      <g transform="translate(120,-80)">
        <circle cx="0" cy="0" r="20" fill="#F5D67A"/>
        <circle cx="6" cy="-3" r="18" fill={"#6B5BC0"}/>
      </g>
    </g>
  );
}

function ArabicArt() {
  return (
    <g>
      {/* Stylized Arabic letter "ع" or calligraphy stroke */}
      <text x="120" y="180" fontFamily="'Readex Pro',serif" fontSize="180" fontWeight="700" fill="#FFFCF5" opacity="0.95">
        ع
      </text>
      <text x="220" y="210" fontFamily="'Readex Pro',serif" fontSize="120" fontWeight="700" fill="#FFFCF5" opacity="0.6">
        ربي
      </text>
      {/* Underline stroke */}
      <path d="M 60 230 Q 200 240 350 220" stroke="#FFFCF5" strokeWidth="3" fill="none" opacity="0.4" strokeLinecap="round"/>
      {/* Diacritic dots */}
      <circle cx="180" cy="60" r="5" fill="#FFFCF5" opacity="0.8"/>
      <circle cx="220" cy="80" r="4" fill="#FFFCF5" opacity="0.7"/>
      <circle cx="260" cy="60" r="5" fill="#FFFCF5" opacity="0.8"/>
    </g>
  );
}

function MathArt() {
  return (
    <g>
      {/* Floating math glyphs */}
      <g transform="translate(80,90)">
        <circle r="36" fill="#6FA8DC" opacity="0.2"/>
        <text x="0" y="14" fontFamily="ui-serif,'Times New Roman',serif" fontSize="50" fontWeight="700" fill="#FFFCF5" textAnchor="middle" fontStyle="italic">π</text>
      </g>
      <g transform="translate(180,160)">
        <text x="0" y="14" fontFamily="ui-serif,'Times New Roman',serif" fontSize="44" fontWeight="700" fill="#F5D67A" textAnchor="middle" fontStyle="italic">x²</text>
      </g>
      <g transform="translate(260,110)">
        <text x="0" y="14" fontFamily="ui-serif,'Times New Roman',serif" fontSize="46" fontWeight="700" fill="#FFFCF5" textAnchor="middle" fontStyle="italic">∑</text>
      </g>
      <g transform="translate(330,180)">
        <text x="0" y="14" fontFamily="ui-serif,'Times New Roman',serif" fontSize="36" fontWeight="700" fill="#F5D67A" textAnchor="middle" fontStyle="italic">∞</text>
      </g>
      {/* Graph line */}
      <path d="M 50 220 Q 150 80 250 200 T 380 60" stroke="#F5D67A" strokeWidth="2.5" fill="none" opacity="0.7" strokeLinecap="round"/>
      {/* Axes */}
      <g opacity="0.3" stroke="#FFFCF5" strokeWidth="1">
        <line x1="40" y1="40" x2="40" y2="230"/>
        <line x1="40" y1="230" x2="370" y2="230"/>
      </g>
    </g>
  );
}

function ScienceArt() {
  return (
    <g>
      {/* Flask */}
      <g transform="translate(200,140)">
        <path d="M -12 -50 L 12 -50 L 12 -20 L 50 50 Q 55 70 30 70 L -30 70 Q -55 70 -50 50 L -12 -20 Z"
              fill="#F5D67A" opacity="0.3" stroke="#FFFCF5" strokeWidth="2.5" strokeLinejoin="round"/>
        <path d="M -50 30 L 50 30" stroke="#FFFCF5" strokeWidth="1" opacity="0.5"/>
        <ellipse cx="0" cy="40" rx="40" ry="6" fill="#F5D67A" opacity="0.7"/>
        {/* Bubbles */}
        <circle cx="-15" cy="22" r="4" fill="#FFFCF5" opacity="0.9"/>
        <circle cx="10" cy="14" r="3" fill="#FFFCF5" opacity="0.8"/>
        <circle cx="-5" cy="0" r="2.5" fill="#FFFCF5" opacity="0.7"/>
        {/* Top neck */}
        <rect x="-12" y="-55" width="24" height="8" rx="2" fill="#FFFCF5" opacity="0.9"/>
      </g>
      {/* Atom */}
      <g transform="translate(80,90)" opacity="0.7">
        <ellipse cx="0" cy="0" rx="28" ry="10" stroke="#FFFCF5" strokeWidth="1.5" fill="none"/>
        <ellipse cx="0" cy="0" rx="28" ry="10" stroke="#F5D67A" strokeWidth="1.5" fill="none" transform="rotate(60)"/>
        <ellipse cx="0" cy="0" rx="28" ry="10" stroke="#FFFCF5" strokeWidth="1.5" fill="none" transform="rotate(120)"/>
        <circle cx="0" cy="0" r="4" fill="#F5D67A"/>
      </g>
      {/* DNA-ish */}
      <g transform="translate(320,180)" opacity="0.6">
        <path d="M 0 -40 Q 20 -20 0 0 Q -20 20 0 40" stroke="#FFFCF5" strokeWidth="2" fill="none"/>
        <path d="M 0 -40 Q -20 -20 0 0 Q 20 20 0 40" stroke="#F5D67A" strokeWidth="2" fill="none"/>
      </g>
    </g>
  );
}

// ============================================================
// 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 (
    <svg viewBox="0 0 240 240" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%", display: "block" }}>
      <defs>
        <radialGradient id={`${id}-bg`} cx="30%" cy="20%">
          <stop offset="0%"  stopColor={p.sky1}/>
          <stop offset="100%" stopColor={p.sky2}/>
        </radialGradient>
        <radialGradient id={`${id}-glow`} cx="50%" cy="55%" r="50%">
          <stop offset="0%"  stopColor={p.accent} stopOpacity="0.45"/>
          <stop offset="100%" stopColor={p.accent} stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect width="240" height="240" fill={`url(#${id}-bg)`}/>
      <circle cx="120" cy="140" r="120" fill={`url(#${id}-glow)`}/>

      {/* Subtle diagonal lines */}
      <g opacity="0.06">
        {Array.from({ length: 14 }).map((_, i) => (
          <rect key={i} x={-40 + i * 36} y="-20" width="14" height="320" fill="white" transform="rotate(-25)"/>
        ))}
      </g>

      {/* Shoulders */}
      <path d="M 30 250 C 30 180, 70 165, 120 165 C 170 165, 210 180, 210 250 Z"
            fill={p.wrap || p.sky2} opacity="0.95"/>
      {/* Wrap collar (hijab) for styles with wrap */}
      {p.wrap && (
        <path d="M 50 250 C 50 170, 80 130, 120 130 C 160 130, 190 170, 190 250 Z"
              fill={p.wrap}/>
      )}
      {/* Neck */}
      <rect x="108" y="135" width="24" height="22" fill={p.skin} opacity="0.9"/>
      {/* Head */}
      <ellipse cx="120" cy="115" rx="44" ry="50" fill={p.skin}/>
      {/* Hair / hijab cover */}
      {p.wrap ? (
        <>
          {/* hijab */}
          <path d="M 70 115 C 70 65, 90 50, 120 50 C 150 50, 170 65, 170 115 L 170 130 C 170 130, 160 138, 120 138 C 80 138, 70 130, 70 130 Z"
                fill={p.wrap}/>
          <path d="M 80 105 C 80 80, 100 70, 120 70 C 140 70, 160 80, 160 105"
                fill="none" stroke={p.accent} strokeWidth="2" opacity="0.5"/>
        </>
      ) : (
        <>
          {/* hair top */}
          <path d="M 76 110 C 76 70, 96 55, 120 55 C 144 55, 164 70, 164 110 C 164 95, 145 85, 120 85 C 95 85, 76 95, 76 110 Z"
                fill={p.hair}/>
          {/* beard / facial hair small touch for male styles */}
          {style === "navy" && (
            <path d="M 95 135 Q 120 155 145 135 Q 145 152 120 158 Q 95 152 95 135 Z" fill={p.hair} opacity="0.9"/>
          )}
        </>
      )}
      {/* Cheek glow */}
      <circle cx="100" cy="125" r="7" fill="#E89B8B" opacity="0.4"/>
      <circle cx="140" cy="125" r="7" fill="#E89B8B" opacity="0.4"/>
      {/* Eyes — closed friendly arc */}
      <path d="M 95 112 Q 102 117 109 112" stroke="#1B2654" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <path d="M 131 112 Q 138 117 145 112" stroke="#1B2654" strokeWidth="2" fill="none" strokeLinecap="round"/>
      {/* Smile */}
      <path d="M 108 132 Q 120 138 132 132" stroke="#1B2654" strokeWidth="1.8" fill="none" strokeLinecap="round"/>

      {/* Initials watermark */}
      {initials && (
        <text x="220" y="225" textAnchor="end" fontFamily="ui-monospace,monospace" fontSize="11" letterSpacing="2" fill="#FFFCF5" opacity="0.6">{initials}</text>
      )}
    </svg>
  );
}

// ============================================================
// THEME / LANG ICONS
// ============================================================
function ThemeIcon({ theme }) {
  if (theme === "dark") {
    // moon
    return (<svg width="18" height="18" viewBox="0 0 24 24"><path d="M20 14.5A9 9 0 1110.5 4a7 7 0 109.5 10.5z" fill="currentColor"/></svg>);
  }
  // sun
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
      <circle cx="12" cy="12" r="4" fill="currentColor"/>
      <g>
        <line x1="12" y1="3" x2="12" y2="5"/>
        <line x1="12" y1="19" x2="12" y2="21"/>
        <line x1="3" y1="12" x2="5" y2="12"/>
        <line x1="19" y1="12" x2="21" y2="12"/>
        <line x1="5.5" y1="5.5" x2="7" y2="7"/>
        <line x1="17" y1="17" x2="18.5" y2="18.5"/>
        <line x1="5.5" y1="18.5" x2="7" y2="17"/>
        <line x1="17" y1="7" x2="18.5" y2="5.5"/>
      </g>
    </svg>
  );
}

Object.assign(window, { HeroScene, CourseCover, TeacherPortrait, ThemeIcon });
