// Icon component — inline SVG icons matched to the junior-adventure
// "Acrylic Sunset" set. Stroke-based, currentColor.
function Icon({ name, style }) {
  const paths = {
    flame:    <><path d="M12 3c.6 2.5 2.5 4 2.5 6.5 0 2-1.6 3.5-2.5 4.5-1-1-2.5-2.5-2.5-4.5C9.5 7 11.4 5.5 12 3z"/><path d="M8 12.5c-.6 1-1 2-1 3.2A5 5 0 0 0 12 21a5 5 0 0 0 5-5.3c0-1.2-.4-2.2-1-3.2"/></>,
    coin:     <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5.5"/><path d="M12 8v8M9.5 10h3.5a1.5 1.5 0 0 1 0 3H10a1.5 1.5 0 0 0 0 3h3.5"/></>,
    bolt:     <><path d="M13 3L4 14h7l-1 7 9-11h-7l1-7z"/></>,
    star:     <><path d="M12 3l2.6 5.7 6.4.7-4.8 4.3 1.3 6.3L12 17l-5.5 3 1.3-6.3L3 9.4l6.4-.7L12 3z"/></>,
    clock:    <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    trophy:   <><path d="M8 4h8v4a4 4 0 0 1-8 0V4z"/><path d="M8 6H5v2a3 3 0 0 0 3 3M16 6h3v2a3 3 0 0 1-3 3"/><path d="M10 14h4M9 20h6M12 14v6"/></>,
    chevronR: <><path d="M9 5l7 7-7 7"/></>,
    chevronD: <><path d="M5 9l7 7 7-7"/></>,
    target:   <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5"/></>,
    check:    <><path d="M4 12l5 5L20 6"/></>,
    x:        <><path d="M6 6l12 12M18 6L6 18"/></>,
    bulb:     <><path d="M12 3a6 6 0 0 0-4 10.5V16h8v-2.5A6 6 0 0 0 12 3zM10 20h4M11 16v-3"/></>,
    pencil:   <><path d="M4 20l4-1L19 8l-3-3L5 16l-1 4zM14 7l3 3"/></>,
    book:     <><path d="M4 4h7v16H4zM13 4h7v16h-7zM4 4v16M11 8H6M11 12H6M11 16H6"/></>,
    crown:    <><path d="M3 8l3 8h12l3-8-5 4-4-6-4 6-5-4z"/><path d="M5 18h14"/></>,
    school:   <><path d="M3 10l9-5 9 5-9 5-9-5z"/><path d="M7 12v5c0 1.5 2.5 3 5 3s5-1.5 5-3v-5"/><path d="M21 10v5"/></>,
    users:    <><circle cx="9" cy="8" r="3.5"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><circle cx="17" cy="9" r="2.5"/><path d="M14 14a5 5 0 0 1 7 4.5"/></>,
    swords:   <><path d="M4 4l8 8M14.5 14.5L20 20M20 4l-8 8M9.5 14.5L4 20"/><path d="M3 5l2-2 3 1-1 3-2-2zM21 5l-2-2-3 1 1 3 2-2zM3 19l2 2 3-1-1-3-2 2zM21 19l-2 2-3-1 1-3 2 2z"/></>,
    sparkles: <><path d="M12 3l1.8 4.5 4.5 1.8-4.5 1.8L12 16l-1.8-4.5L5.7 9.3l4.5-1.8L12 3zM18 14l1 2.5L21.5 17l-2.5 1L18 20.5l-.9-2.5L14.5 17l2.6-.5L18 14z"/></>,
    question: <><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 3.5"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/></>,
    share:    <><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M8.1 11l7.8-3.7M8.1 13l7.8 3.7"/></>,
    arrowUp:  <><path d="M12 19V5M5 12l7-7 7 7"/></>,
    arrowDn:  <><path d="M12 5v14M5 12l7 7 7-7"/></>,
    medal:    <><circle cx="12" cy="15" r="5"/><path d="M9 11L7 4h10l-2 7M12 13v1.5M12 17v.5"/></>,
    flag:     <><path d="M5 21V4M5 4h12l-2.5 4.5L17 13H5"/></>,
    play:     <><path d="M7 5l11 7-11 7V5z"/></>,
    pause:    <><rect x="6" y="5" width="4" height="14"/><rect x="14" y="5" width="4" height="14"/></>,
    fire:     <><path d="M12 3c.6 2.5 2.5 4 2.5 6.5 0 2-1.6 3.5-2.5 4.5-1-1-2.5-2.5-2.5-4.5C9.5 7 11.4 5.5 12 3z"/><path d="M7.5 14c-.5 1-.5 2-.5 2A5 5 0 0 0 12 21a5 5 0 0 0 5-5c0-.7-.2-1.4-.5-2"/></>,
    timer:    <><circle cx="12" cy="13" r="8"/><path d="M9 3h6M12 9v4l2.5 2"/></>,
  };
  const p = paths[name] || paths.question;
  return (
    <svg className="ic" viewBox="0 0 24 24" style={style} aria-hidden="true">{p}</svg>
  );
}

// Top bar — gamified topbar matching the lesson chrome.
function TopBar({ subtitle = 'Weekly Challenge', stats }) {
  const profile = (window.HSC && window.HSC.__profile) || null;
  const name = (profile && (profile.codename || profile.display_name)) || '';
  const avatarText = name ? name.slice(0, 2).toUpperCase() : '?';
  const streak = parseInt(localStorage.getItem('hsc_streak') || '0', 10);
  const s = stats || { streak, coins: '—', xp: '—', level: '—' };
  return (
    <header className="wc-topbar">
      <div className="wc-brand">
        <div className="wc-brand-logo">H</div>
        HSC Science
      </div>
      <span className="wc-brand-crumb">/ {subtitle}</span>
      <div className="wc-topbar-spacer"></div>
      <div className="wc-pill wc-pill-streak"><Icon name="flame"/><span>{s.streak}</span></div>
      <div className="wc-pill wc-pill-coins"><Icon name="coin"/><span>{s.coins}</span></div>
      <div className="wc-pill wc-pill-xp"><Icon name="bolt"/><span>{s.xp}</span></div>
      <div className="wc-pill wc-pill-level"><Icon name="star"/><span>{s.level}</span></div>
      <div className="wc-avatar">{avatarText}</div>
    </header>
  );
}

// Countdown ring widget used in the hub hero
function CountdownRing({ days = 3, hours = 14 }) {
  const total = 7;
  const remaining = days + hours/24;
  const progress = 1 - remaining/total;
  const r = 36;
  const c = 2 * Math.PI * r;
  return (
    <div className="wc-cd-ring">
      <svg viewBox="0 0 84 84">
        <circle cx="42" cy="42" r={r} fill="none" stroke="rgba(255,255,255,0.22)" strokeWidth="6"/>
        <circle cx="42" cy="42" r={r} fill="none" stroke="#d6a85f" strokeWidth="6" strokeLinecap="round"
          strokeDasharray={`${c*progress} ${c}`} />
      </svg>
      <div className="wc-cd-ring-text"><div><strong>{days}d</strong><small>LEFT</small></div></div>
    </div>
  );
}

// Generic timer bar (proportion 0..1)
function TimerBar({ pct = 0.62, secs = '08' }) {
  return (
    <div className="wc-timer">
      <div className="wc-timer-fill" style={{ width: `${pct*100}%` }}></div>
      <div className="wc-timer-secs">00:{secs}</div>
    </div>
  );
}

Object.assign(window, { Icon, TopBar, CountdownRing, TimerBar });