/* global React, window, Icon, Mascot, useT, useEyad,
   PORTAL_USER, PORTAL_SESSIONS, PORTAL_PROGRESS, PORTAL_BADGES,
   PORTAL_CERTS, PORTAL_LEADERS, PORTAL_REPORTS, PORTAL_INSIGHTS_AR, PORTAL_INSIGHTS_EN,
   SUBJECTS, PageHead, pickName, subjectOf, subjectAccent, formatHourLabel, daysFromNowLabel */

const { useState, useMemo } = React;

// ─────────────────────────────────────────────────────────────
// TIMETABLE — weekly grid
// ─────────────────────────────────────────────────────────────
function TimetableView({ onOpenSession }) {
  const t = useT();
  const { lang } = useEyad();
  // Show days 0..4 (today + next 4 days)
  const days = [0, 1, 2, 3, 4];
  const dayNames = lang === "ar" ? PORTAL_PROGRESS.weeklyDayLabels_ar : PORTAL_PROGRESS.weeklyDayLabels_en;

  // Group sessions by day
  const byDay = days.map(d => ({
    offset: d,
    sessions: PORTAL_SESSIONS.filter(s => s.dayOffset === d).sort((a, b) => a.startHour - b.startHour),
  }));

  // Hour rows: 9..21
  const hours = [];
  for (let h = 9; h <= 21; h++) hours.push(h);

  return (
    <>
      <PageHead h={t.portal.timetable.h} sub={t.portal.timetable.sub}/>

      <div className="tt-toolbar">
        <button className="btn btn-ghost"><Icon name="chevron" size={14}/> {t.portal.timetable.prev}</button>
        <div className="tt-today-pill">{t.portal.timetable.today}</div>
        <button className="btn btn-ghost">{t.portal.timetable.next} <Icon name="chevron" size={14} style={{ transform: "scaleX(-1)" }}/></button>
      </div>

      <div className="tt-card">
        <div className="tt-grid">
          <div className="tt-corner"></div>
          {byDay.map((d, i) => (
            <div key={i} className={`tt-day-head ${d.offset === 0 ? "today" : ""}`}>
              <div className="tt-day-name">{dayNames[(i) % dayNames.length]}</div>
              <div className="tt-day-num">{d.offset === 0 ? t.portal.timetable.today : daysFromNowLabel(d.offset, lang)}</div>
            </div>
          ))}

          {hours.map((h, hi) => (
            <React.Fragment key={h}>
              <div className="tt-time-col">{formatHourLabel(h, lang)}</div>
              {byDay.map((d, ci) => {
                const sess = d.sessions.find(s => s.startHour === h);
                return (
                  <div key={ci} className={`tt-slot ${d.offset === 0 ? "today" : ""}`}>
                    {sess && (
                      <button
                        className="tt-event"
                        onClick={() => onOpenSession(sess)}
                        style={{ "--accent": subjectAccent(sess.subject), background: `linear-gradient(135deg, ${subjectAccent(sess.subject)}22, ${subjectAccent(sess.subject)}11)` }}>
                        <div className="tt-event-sub" style={{ color: subjectAccent(sess.subject) }}>
                          <Icon name={subjectOf(sess.subject).icon} size={12}/>
                          {t.subjects.items[sess.subject]?.name}
                        </div>
                        <div className="tt-event-title">{lang === "ar" ? sess.titleAr : sess.titleEn}</div>
                        <div className="tt-event-meta">{sess.durationMin} {lang === "ar" ? "د" : "min"} · {pickName({ ar: sess.teacher.name_ar, en: sess.teacher.name_en }, lang).split(" ").slice(-1)[0]}</div>
                      </button>
                    )}
                  </div>
                );
              })}
            </React.Fragment>
          ))}
        </div>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// PROGRESS
// ─────────────────────────────────────────────────────────────
function ProgressView() {
  const t = useT();
  const { lang } = useEyad();
  const totalH = PORTAL_PROGRESS.weeklyHours.reduce((a, b) => a + b, 0);
  const avgH = (totalH / PORTAL_PROGRESS.weeklyHours.length).toFixed(1);
  const maxH = Math.max(...PORTAL_PROGRESS.weeklyHours);

  return (
    <>
      <PageHead h={t.portal.progress.h} sub={t.portal.progress.sub}/>

      <div className="prog-grid">
        {PORTAL_PROGRESS.subjects.map((p) => {
          const subj = subjectOf(p.id);
          const pct = Math.round((p.completed / p.total) * 100);
          return (
            <div key={p.id} className="prog-card" style={{ "--accent": p.accent }}>
              <div className="prog-card-head">
                <div className="prog-card-icon" style={{ background: subj.glyph, color: "var(--always-navy)" }}>
                  <Icon name={subj.icon} size={22}/>
                </div>
                <div>
                  <h3>{t.subjects.items[p.id]?.name}</h3>
                  <div className="prog-card-en">{subj.en}</div>
                </div>
                <div className={`prog-trend ${p.trend > 10 ? "hot" : ""}`}>
                  ↑ {p.trend}%
                </div>
              </div>
              <ProgressRing pct={pct} color={p.accent}/>
              <div className="prog-card-stats">
                <div><span className="lbl">{t.portal.progress.completed}</span><span className="val">{p.completed}<small> / {p.total} {t.portal.progress.lessons}</small></span></div>
                <div><span className="lbl">{t.portal.progress.hoursThisMonth}</span><span className="val">{p.hours}<small> {lang === "ar" ? "س" : "h"}</small></span></div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="prog-row">
        <div className="prog-weekly-card">
          <div className="prog-card-head" style={{ marginBottom: 16 }}>
            <h3 style={{ flex: 1 }}>{t.portal.progress.weekly.h}</h3>
            <div className="prog-weekly-stats">
              <div><span className="val">{totalH.toFixed(1)}</span><span className="lbl">{t.portal.progress.weekly.total} {lang === "ar" ? "س" : "h"}</span></div>
              <div><span className="val">{avgH}</span><span className="lbl">{t.portal.progress.weekly.avg} {lang === "ar" ? "س" : "h"}</span></div>
            </div>
          </div>
          <div className="prog-bars">
            {PORTAL_PROGRESS.weeklyHours.map((h, i) => {
              const dayNames = lang === "ar" ? PORTAL_PROGRESS.weeklyDayLabels_ar : PORTAL_PROGRESS.weeklyDayLabels_en;
              return (
                <div key={i} className="prog-bar">
                  <div className="prog-bar-val">{h.toFixed(1)}</div>
                  <div className="prog-bar-track">
                    <div className="prog-bar-fill" style={{ height: `${(h / maxH) * 100}%` }}/>
                  </div>
                  <div className="prog-bar-lbl">{dayNames[i]}</div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="prog-breakdown-card">
          <h3 style={{ marginBottom: 18 }}>{t.portal.progress.breakdown.h}</h3>
          <DonutChart data={PORTAL_PROGRESS.subjects.map(s => ({ value: s.hours, color: s.accent, label: t.subjects.items[s.id]?.name }))}/>
        </div>
      </div>
    </>
  );
}

function ProgressRing({ pct, color }) {
  const r = 38, c = 2 * Math.PI * r;
  const off = c - (c * pct / 100);
  return (
    <div className="prog-ring">
      <svg viewBox="0 0 100 100">
        <circle cx="50" cy="50" r={r} stroke="var(--hairline-strong)" strokeWidth="8" fill="none"/>
        <circle cx="50" cy="50" r={r} stroke={color} strokeWidth="8" fill="none"
          strokeDasharray={c} strokeDashoffset={off} strokeLinecap="round"
          transform="rotate(-90 50 50)" style={{ transition: "stroke-dashoffset 1s ease" }}/>
      </svg>
      <div className="prog-ring-num">{pct}<span>%</span></div>
    </div>
  );
}

function DonutChart({ data }) {
  const total = data.reduce((a, b) => a + b.value, 0);
  const r = 60, sw = 24;
  const c = 2 * Math.PI * r;
  let offset = 0;
  return (
    <div className="donut-wrap">
      <svg viewBox="0 0 160 160" className="donut">
        <circle cx="80" cy="80" r={r} fill="none" stroke="var(--hairline-strong)" strokeWidth={sw}/>
        {data.map((d, i) => {
          const len = (d.value / total) * c;
          const seg = (
            <circle key={i} cx="80" cy="80" r={r} fill="none" stroke={d.color} strokeWidth={sw}
              strokeDasharray={`${len} ${c - len}`} strokeDashoffset={-offset}
              transform="rotate(-90 80 80)" strokeLinecap="butt"/>
          );
          offset += len;
          return seg;
        })}
        <text x="80" y="76" textAnchor="middle" style={{ fontFamily: "var(--f-display)", fontSize: 20, fontWeight: 700, fill: "var(--navy)" }}>{total}</text>
        <text x="80" y="92" textAnchor="middle" style={{ fontFamily: "var(--f-display)", fontSize: 10, fill: "var(--ink-mute)", letterSpacing: "0.06em" }}>HOURS</text>
      </svg>
      <ul className="donut-legend">
        {data.map((d, i) => {
          const pct = Math.round((d.value / total) * 100);
          return (
            <li key={i}>
              <span className="donut-swatch" style={{ background: d.color }}/>
              <span className="donut-label">{d.label}</span>
              <span className="donut-pct">{pct}%</span>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CERTIFICATES
// ─────────────────────────────────────────────────────────────
function CertificatesView() {
  const t = useT();
  const { lang } = useEyad();
  return (
    <>
      <PageHead h={t.portal.certificates.h} sub={t.portal.certificates.sub}/>

      <div className="cert-grid">
        {PORTAL_CERTS.map((c) => {
          const subj = subjectOf(c.subject);
          const accent = subjectAccent(c.subject);
          return (
            <div key={c.id} className={`cert-card ${c.earned ? "earned" : "locked"}`}>
              <div className="cert-card-bg" style={{ background: subj.glyph }}>
                <div className="cert-card-bg-deco">
                  <Icon name={subj.icon} size={60}/>
                </div>
                {c.earned ? (
                  <div className="cert-card-seal">
                    <Icon name="star" size={22}/>
                  </div>
                ) : (
                  <div className="cert-card-lock">
                    <LockIcon/>
                  </div>
                )}
              </div>
              <div className="cert-card-body">
                <div className="cert-card-sub" style={{ color: accent }}>{t.subjects.items[c.subject]?.name}</div>
                <h3>{lang === "ar" ? c.title_ar : c.title_en}</h3>
                {c.earned ? (
                  <>
                    <div className="cert-card-meta">
                      <span className="lbl">{t.portal.certificates.earned}</span>
                      <span>{lang === "ar" ? c.date_ar : c.date_en} · <strong style={{ color: "var(--gold-deep)" }}>{lang === "ar" ? c.grade_ar : c.grade_en}</strong></span>
                    </div>
                    <div className="cert-card-actions">
                      <button className="btn btn-primary"><DownloadIcon2/> {t.portal.certificates.download}</button>
                      <button className="btn btn-ghost"><ShareIcon/> {t.portal.certificates.share}</button>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="cert-card-meta">
                      <span className="lbl">{t.portal.certificates.progressLabel}</span>
                      <span><strong>{c.progress}%</strong></span>
                    </div>
                    <div className="cert-progress-bar"><div style={{ width: `${c.progress || 0}%`, background: accent }}/></div>
                    <div className="cert-locked-hint">{t.portal.certificates.unlock}</div>
                  </>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// GAMIFICATION
// ─────────────────────────────────────────────────────────────
function GamificationView() {
  const t = useT();
  const { lang } = useEyad();
  const earnedCount = PORTAL_BADGES.filter(b => b.earned).length;
  const totalBadges = PORTAL_BADGES.length;
  const [badgeTab, setBadgeTab] = useState("all"); // all | earned | locked
  const filteredBadges = badgeTab === "all" ? PORTAL_BADGES : PORTAL_BADGES.filter(b => badgeTab === "earned" ? b.earned : !b.earned);

  return (
    <>
      <PageHead h={t.portal.gamification.h} sub={t.portal.gamification.sub}/>

      <div className="gam-top">
        <div className="gam-card gam-xp">
          <div className="dash-card-kicker">{t.portal.gamification.xpCard.kicker}</div>
          <div className="gam-xp-num">
            <span className="lvl">{t.portal.gamification.xpCard.levelLabel} {PORTAL_USER.level}</span>
            <span className="xp">{PORTAL_USER.xp.toLocaleString()}<small>/{PORTAL_USER.xpNext.toLocaleString()}</small></span>
          </div>
          <div className="xp-bar"><div style={{ width: `${(PORTAL_USER.xp / PORTAL_USER.xpNext) * 100}%` }}/></div>
          <div className="dash-card-foot">{(PORTAL_USER.xpNext - PORTAL_USER.xp).toLocaleString()} {t.portal.gamification.xpCard.toNext}</div>
        </div>

        <div className="gam-card gam-streak">
          <div className="dash-card-kicker">{t.portal.gamification.streakCard.kicker}</div>
          <div className="gam-streak-row">
            <FlameIconSm/>
            <div>
              <div className="gam-streak-num">{PORTAL_USER.streak}</div>
              <div className="gam-streak-lbl">{t.portal.gamification.streakCard.days}</div>
            </div>
          </div>
          <div className="dash-card-foot">{t.portal.gamification.streakCard.best}: <strong>{PORTAL_USER.streak}</strong></div>
        </div>

        <div className="gam-card gam-rank">
          <div className="dash-card-kicker">{t.portal.gamification.rankCard.kicker}</div>
          <div className="gam-rank-num">#{PORTAL_USER.rank}</div>
          <div className="dash-card-foot">{t.portal.gamification.rankCard.among}</div>
        </div>
      </div>

      <div className="gam-grid-2">
        <div className="gam-card-wide">
          <div className="dash-card-head">
            <h3>{t.portal.gamification.badgesGrid.h}</h3>
            <div className="badge-stats">{earnedCount}<span>/{totalBadges}</span></div>
          </div>
          <div className="badge-tabs">
            <button className={`badge-tab ${badgeTab === "all" ? "active" : ""}`} onClick={() => setBadgeTab("all")}>{lang === "ar" ? "الكل" : "All"} · {totalBadges}</button>
            <button className={`badge-tab ${badgeTab === "earned" ? "active" : ""}`} onClick={() => setBadgeTab("earned")}>{t.portal.gamification.badgesGrid.earned} · {earnedCount}</button>
            <button className={`badge-tab ${badgeTab === "locked" ? "active" : ""}`} onClick={() => setBadgeTab("locked")}>{t.portal.gamification.badgesGrid.locked} · {totalBadges - earnedCount}</button>
          </div>
          <div className="badge-grid">
            {filteredBadges.map((b) => (
              <div key={b.id} className={`badge ${b.earned ? "" : "locked"}`}>
                <div className="badge-glow" style={{ background: `radial-gradient(circle, ${b.glow}55, transparent 65%)` }}/>
                <div className="badge-disc" style={{ background: `linear-gradient(135deg, ${b.glow}, ${b.glow}aa)` }}>
                  <Icon name={b.icon} size={28}/>
                  {!b.earned && <div className="badge-lock"><LockIcon/></div>}
                </div>
                <div className="badge-name">{lang === "ar" ? b.name_ar : b.name_en}</div>
                <div className="badge-desc">{lang === "ar" ? b.desc_ar : b.desc_en}</div>
                {b.earned && <div className="badge-date">{b.date}</div>}
              </div>
            ))}
          </div>
        </div>

        <div className="gam-card-wide gam-leaderboard">
          <div className="dash-card-head">
            <h3>{t.portal.gamification.leaderboard.h}</h3>
            <TrophyIcon/>
          </div>
          <ul className="leader-list">
            {PORTAL_LEADERS.map((l) => (
              <li key={l.rank} className={l.you ? "you" : ""}>
                <span className={`leader-rank rank-${l.rank}`}>{l.rank}</span>
                <div className="leader-av" style={{ background: l.color }}>{l.init}</div>
                <div className="leader-info">
                  <div className="leader-name">
                    {lang === "ar" ? l.name_ar : l.name_en}
                    {l.you && <span className="leader-you">· {t.portal.gamification.leaderboard.you}</span>}
                  </div>
                  <div className="leader-meta">
                    <span>{l.xp.toLocaleString()} {t.portal.gamification.leaderboard.xp}</span>
                    <span>·</span>
                    <span>{l.streak} {lang === "ar" ? "يوم" : "d"} {t.portal.gamification.leaderboard.streak}</span>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// REPORTS
// ─────────────────────────────────────────────────────────────
function ReportsView() {
  const t = useT();
  const { lang } = useEyad();
  const insights = lang === "ar" ? PORTAL_INSIGHTS_AR : PORTAL_INSIGHTS_EN;

  return (
    <>
      <PageHead h={t.portal.reports.h} sub={t.portal.reports.sub}/>

      <div className="reports-grid">
        <div className="reports-list">
          {PORTAL_REPORTS.length === 0 && <div className="ps-empty">{t.portal.reports.empty}</div>}
          {PORTAL_REPORTS.map((r, i) => (
            <article key={r.id} className={`report-card ${i === 0 ? "latest" : ""}`}>
              {i === 0 && <div className="report-latest-pill">{lang === "ar" ? "الأحدث" : "Latest"}</div>}
              <div className="report-head">
                <h3>{lang === "ar" ? r.week_ar : r.week_en}</h3>
                <button className="btn btn-ghost"><DownloadIcon2/> {t.portal.reports.download}</button>
              </div>
              <div className="report-stats">
                <div className="report-stat">
                  <div className="lbl">{t.portal.reports.attended}</div>
                  <div className="val">{r.attended}/{r.total}</div>
                </div>
                <div className="report-stat">
                  <div className="lbl">{t.portal.reports.avg}</div>
                  <div className="val gold">{lang === "ar" ? r.avg_ar : r.avg_en}</div>
                </div>
              </div>
              <div className="report-section">
                <div className="report-section-h">✦ {t.portal.reports.highlights}</div>
                <p>{lang === "ar" ? r.highlights_ar : r.highlights_en}</p>
              </div>
              {(lang === "ar" ? r.flags_ar : r.flags_en) !== "—" && (
                <div className="report-section warn">
                  <div className="report-section-h">⚠ {t.portal.reports.flags}</div>
                  <p>{lang === "ar" ? r.flags_ar : r.flags_en}</p>
                </div>
              )}
            </article>
          ))}
        </div>

        <aside className="reports-insights">
          <h3>{t.portal.reports.insights.h}</h3>
          <ul>
            {insights.map((it, i) => (
              <li key={i} className={`insight insight-${it.tone}`}>
                <span className="insight-dot"/>
                <span>{it.text}</span>
              </li>
            ))}
          </ul>
        </aside>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// SETTINGS
// ─────────────────────────────────────────────────────────────
function SettingsView() {
  const t = useT();
  const { lang, theme, setLang, setTheme } = useEyad();
  const [form, setForm] = useState({
    name: pickName(PORTAL_USER.name, lang),
    grade: pickName(PORTAL_USER.grade, lang),
    parent: pickName(PORTAL_USER.parent, lang),
    parentEmail: PORTAL_USER.parentEmail,
    phone: "+966 5XX XXX XXXX",
    notifEmail: true,
    notifSms: true,
    notifWeekly: true,
    reminders: "15",
  });
  const [saved, setSaved] = useState(false);
  const setF = (k, v) => setForm(p => ({ ...p, [k]: v }));
  const save = () => { setSaved(true); setTimeout(() => setSaved(false), 2400); };

  const labels = t.portal.settings.labels;
  return (
    <>
      <PageHead h={t.portal.settings.h} sub={t.portal.settings.sub}/>

      <div className="settings-grid">
        {/* Profile */}
        <section className="settings-card">
          <h3>{t.portal.settings.groups.profile}</h3>
          <div className="settings-photo-row">
            <div className="settings-photo" style={{ background: PORTAL_USER.avatarBg }}>{PORTAL_USER.avatar}</div>
            <div>
              <div className="lbl-block">{t.portal.settings.photos}</div>
              <button className="btn btn-ghost"><Icon name="check" size={12}/> {t.portal.settings.change}</button>
            </div>
          </div>
          <div className="af-grid-2">
            <div>
              <label className="af-label">{labels.name}</label>
              <input className="af-input" value={form.name} onChange={(e) => setF("name", e.target.value)}/>
            </div>
            <div>
              <label className="af-label">{labels.grade}</label>
              <input className="af-input" value={form.grade} onChange={(e) => setF("grade", e.target.value)}/>
            </div>
          </div>
        </section>

        {/* Family */}
        <section className="settings-card">
          <h3>{t.portal.settings.groups.parents}</h3>
          <div className="af-grid-2">
            <div>
              <label className="af-label">{labels.parent}</label>
              <input className="af-input" value={form.parent} onChange={(e) => setF("parent", e.target.value)}/>
            </div>
            <div>
              <label className="af-label">{labels.parentEmail}</label>
              <input type="email" className="af-input" value={form.parentEmail} dir="ltr" onChange={(e) => setF("parentEmail", e.target.value)}/>
            </div>
          </div>
          <label className="af-label">{labels.phone}</label>
          <input className="af-input" value={form.phone} dir="ltr" onChange={(e) => setF("phone", e.target.value)}/>
        </section>

        {/* Preferences */}
        <section className="settings-card">
          <h3>{t.portal.settings.groups.prefs}</h3>
          <div className="set-row">
            <div className="set-row-lbl">{labels.lang}</div>
            <div className="af-segmented" style={{ width: 180 }}>
              <button className={`af-seg ${lang === "ar" ? "active" : ""}`} onClick={() => setLang("ar")}>العربية</button>
              <button className={`af-seg ${lang === "en" ? "active" : ""}`} onClick={() => setLang("en")}>English</button>
            </div>
          </div>
          <div className="set-row">
            <div className="set-row-lbl">{labels.theme}</div>
            <div className="af-segmented" style={{ width: 180 }}>
              <button className={`af-seg ${theme === "light" ? "active" : ""}`} onClick={() => setTheme("light")}>{t.portal.settings.themes.light}</button>
              <button className={`af-seg ${theme === "dark" ? "active" : ""}`} onClick={() => setTheme("dark")}>{t.portal.settings.themes.dark}</button>
            </div>
          </div>
          <div className="set-row">
            <div className="set-row-lbl">{labels.reminders}</div>
            <select className="af-input" style={{ width: 180 }} value={form.reminders} onChange={(e) => setF("reminders", e.target.value)}>
              <option value="0">{lang === "ar" ? "بدون" : "Off"}</option>
              <option value="5">5 {lang === "ar" ? "د" : "min"}</option>
              <option value="15">15 {lang === "ar" ? "د" : "min"}</option>
              <option value="30">30 {lang === "ar" ? "د" : "min"}</option>
              <option value="60">60 {lang === "ar" ? "د" : "min"}</option>
            </select>
          </div>
          <div className="set-row">
            <div className="set-row-lbl">{labels.notifEmail}</div>
            <Switch on={form.notifEmail} onChange={(v) => setF("notifEmail", v)}/>
          </div>
          <div className="set-row">
            <div className="set-row-lbl">{labels.notifSms}</div>
            <Switch on={form.notifSms} onChange={(v) => setF("notifSms", v)}/>
          </div>
          <div className="set-row">
            <div className="set-row-lbl">{labels.notifWeekly}</div>
            <Switch on={form.notifWeekly} onChange={(v) => setF("notifWeekly", v)}/>
          </div>
        </section>

        {/* Account */}
        <section className="settings-card">
          <h3>{t.portal.settings.groups.account}</h3>
          <label className="af-label">{labels.oldPassword}</label>
          <input type="password" className="af-input" placeholder="••••••••" dir="ltr"/>
          <label className="af-label">{labels.newPassword}</label>
          <input type="password" className="af-input" placeholder="••••••••" dir="ltr"/>
        </section>

        {/* Danger zone */}
        <section className="settings-card danger-card">
          <h3>{t.portal.settings.groups.danger}</h3>
          <p>{t.portal.settings.deleteHint}</p>
          <button className="btn btn-ghost danger-btn">{t.portal.settings.deleteAccount}</button>
        </section>

        <div className="settings-save">
          <button className="btn btn-primary" onClick={save}>
            {saved ? t.portal.settings.saved : t.portal.settings.save}
            {!saved && <Icon name="check" size={14}/>}
          </button>
        </div>
      </div>
    </>
  );
}

function Switch({ on, onChange }) {
  return (
    <button className={`switch ${on ? "on" : ""}`} onClick={() => onChange(!on)} aria-pressed={on}>
      <span className="switch-knob"/>
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// Icons used here
// ─────────────────────────────────────────────────────────────
function LockIcon() {
  return (<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M6 10V8a6 6 0 1112 0v2h1a1 1 0 011 1v9a1 1 0 01-1 1H5a1 1 0 01-1-1v-9a1 1 0 011-1h1zm2 0h8V8a4 4 0 10-8 0v2z"/></svg>);
}
function DownloadIcon2() {
  return (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>);
}
function ShareIcon() {
  return (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/></svg>);
}
function TrophyIcon() {
  return (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--gold-deep)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M8 4h8v4a4 4 0 11-8 0V4z" fill="var(--gold)" stroke="none"/><path d="M5 5H3v2a3 3 0 003 3M19 5h2v2a3 3 0 01-3 3M10 16h4v3h-4z M9 19h6"/></svg>);
}
function FlameIconSm() {
  return (
    <svg width="36" height="36" viewBox="0 0 64 64">
      <defs>
        <linearGradient id="flame-g-sm" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#F5D67A"/>
          <stop offset="100%" stopColor="#D9A441"/>
        </linearGradient>
      </defs>
      <path d="M32 6 C 22 16, 16 24, 16 36 C 16 48, 24 56, 32 56 C 40 56, 48 48, 48 36 C 48 28, 42 22, 38 28 C 40 20, 36 12, 32 6 Z" fill="url(#flame-g-sm)"/>
    </svg>
  );
}

Object.assign(window, { TimetableView, ProgressView, CertificatesView, GamificationView, ReportsView, SettingsView });