// ─────────────────────────────────────────────────────────────
// chrome.jsx — Cinema chrome: progress rail, time HUD, spotlight
// ─────────────────────────────────────────────────────────────

function ProgressRail({ chapters, currentChapter, elapsed }) {
  // chapters: [{ n, title, accent, startT, endT }]
  return (
    <div className="chapter-rail" aria-label="Progreso de la escena">
      {chapters.map((c, i) => {
        const span = Math.max(1, c.endT - c.startT);
        const local = Math.min(1, Math.max(0, (elapsed - c.startT) / span));
        const done = elapsed >= c.endT;
        const active = elapsed >= c.startT && elapsed < c.endT;
        return (
          <div
            key={i}
            className={`chapter-seg ${done ? 'done' : ''} ${active ? 'active' : ''}`}
            style={{ '--seg-color': c.accent || '#1a2d5a' }}
            title={c.title}
          >
            <div className="fill" style={{
              transform: done ? 'scaleX(1)' : `scaleX(${local})`,
            }} />
          </div>
        );
      })}
    </div>
  );
}

function TimeHUD({ savedMins, tick }) {
  return (
    <div className="time-hud">
      <div className="label">Tiempo ahorrado esta mañana</div>
      <div className="big">
        <span>{Math.round(savedMins)}</span>
        <span className="unit">min</span>
        {tick && (
          <div key={tick.key} className="tick">+{tick.mins} min</div>
        )}
      </div>
      <div className="sub">
        {tick ? tick.label : 'Cuento todo lo que Sabrina te resuelve sin que tú levantes el celular.'}
      </div>
    </div>
  );
}

function SceneChip({ chapter }) {
  if (!chapter) return null;
  return (
    <div className="scene-chip" style={{ '--accent': chapter.accent || '#1a2d5a' }}>
      <span className="num">{chapter.n}</span>
      <span>Escena {chapter.n}/10 · {chapter.title}</span>
    </div>
  );
}

function Spotlight({ spotlight }) {
  if (!spotlight) return null;
  return (
    <div className="spotlight" key={spotlight.key}>
      <div className="arrow"></div>
      {spotlight.eyebrow && <div className="eyebrow">{spotlight.eyebrow}</div>}
      <div className="body">{spotlight.text}</div>
    </div>
  );
}

function BottomCaption({ chapter, mode }) {
  if (mode !== 'playing') return null;
  return (
    <div className="bottom-caption">
      <EyeIcon />
      <span>Estás viendo una <b>mañana real reconstruida</b>. Cuando termine, podrás escribirle tú a Sabrina.</span>
    </div>
  );
}

Object.assign(window, { ProgressRail, TimeHUD, SceneChip, Spotlight, BottomCaption });