// candles.jsx — 5 Kerzen (eine pro Duft)
// Jede Kerze entspricht einem Duft und deckt ihre zugehörigen Kapitel ab.

function chaptersForScent(scentId) {
  const chs = [];
  for (let n = 1; n <= 22; n++) {
    const s = scentForChapter(n);
    if (s && s.id === scentId) chs.push(n);
  }
  return chs;
}
window.chaptersForScent = chaptersForScent;

function ScentCandle({ scent, chapters, lit, current, onClick }) {
  const cls = ["candle", "scent-candle", lit && "lit", current && "current"].filter(Boolean).join(" ");
  return (
    <div className={cls} onClick={onClick}
         title={`${scent.name} — Kap. ${chapters.join(", ")}`}
         style={{ "--scent-glow": scent.glow, "--scent-wax": scent.wax }}>
      <div className="flame"></div>
      <div className="wick"></div>
      <div className="body"></div>
      <div className="scent-label">{scent.name}</div>
    </div>
  );
}
window.ScentCandle = ScentCandle;

function CandlesRow({ litUpTo, current, onSelect }) {
  const SCENTS = window.SCENTS || [];
  return (
    <div className="candles-row" aria-label="Die fünf Kerzen">
      {SCENTS.map(sc => {
        const chs = chaptersForScent(sc.id);
        return (
          <ScentCandle
            key={sc.id}
            scent={sc}
            chapters={chs}
            lit={chs.some(n => n <= litUpTo)}
            current={chs.includes(current)}
            onClick={() => chs.length > 0 && onSelect(chs[0])}
          />
        );
      })}
    </div>
  );
}
window.CandlesRow = CandlesRow;