// Onboarding modal — 3 slides, full-bleed art + display copy + CTA.
(() => {
const SLIDES = [
  {
    id: "welcome",
    img: "assets/onboarding/welcome.png",
    eyebrow_en: "WELCOME",            eyebrow_es: "BIENVENIDO",
    title_en:   "An almanac for your life.",
    title_es:   "Un almanaque para tu vida.",
    body_en: "Vida is a quiet place to track the small things that compound — habits, money, training, and the milestones you collect along the way.",
    body_es: "Vida es un lugar tranquilo para registrar lo pequeño que se acumula — hábitos, dinero, entrenos y los hitos que vas dejando en el camino.",
  },
  {
    id: "habits",
    img: "assets/onboarding/habits.png",
    eyebrow_en: "BUILD HABITS",       eyebrow_es: "CONSTRUYE HÁBITOS",
    title_en:   "Tend to them, watch them grow.",
    title_es:   "Cuídalos, mírales crecer.",
    body_en: "Each habit is a stem. Watering it daily lifts its leaves. The year, looked at all at once, will surprise you.",
    body_es: "Cada hábito es un tallo. Regarlo diario levanta sus hojas. El año, mirado de un vistazo, te va a sorprender.",
  },
  {
    id: "progress",
    img: "assets/onboarding/progress.png",
    eyebrow_en: "MEASURE PROGRESS",   eyebrow_es: "MIDE TU PROGRESO",
    title_en:   "Quiet wins, mapped.",
    title_es:   "Victorias silenciosas, mapeadas.",
    body_en: "Months become a constellation of small achievements. Vida shows you the shape — you keep walking.",
    body_es: "Los meses se vuelven una constelación de pequeños logros. Vida te muestra la forma — tú sigues caminando.",
  },
];

function Onboarding({ onClose }) {
  const [idx, setIdx] = React.useState(0);
  const { lang } = window.useApp();
  const s = SLIDES[idx];
  const isLast = idx === SLIDES.length - 1;
  const t = window.I18N[lang];

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <button className="ob-close" onClick={onClose} aria-label="close">
          <window.Icon name="x" size={14} />
        </button>
        <div className="ob-art" style={{ backgroundImage: `url("${s.img}")` }}/>
        <div className="ob-body">
          <div className="ob-eyebrow">{lang === "es" ? s.eyebrow_es : s.eyebrow_en}</div>
          <div className="ob-title">{lang === "es" ? s.title_es : s.title_en}</div>
          <div className="ob-text">{lang === "es" ? s.body_es : s.body_en}</div>
        </div>
        <div className="ob-footer">
          <div className="ob-dots">
            {SLIDES.map((_, i) => (
              <span key={i} className={"dot " + (i === idx ? "on" : "")}/>
            ))}
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            {idx > 0 && (
              <button className="btn" onClick={() => setIdx(idx - 1)}>
                {lang === "es" ? "Atrás" : "Back"}
              </button>
            )}
            {!isLast && (
              <button className="btn primary" onClick={() => setIdx(idx + 1)}>
                {lang === "es" ? "Siguiente" : "Next"}
              </button>
            )}
            {isLast && (
              <button className="btn warm" onClick={onClose}>
                {lang === "es" ? "Empezar" : "Begin"}
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
window.Onboarding = Onboarding;
})();