/* SportK — Pantallas principales (Home, Catálogo, Detalle, Stats, Perfil, Onboarding) */

const { useState, useEffect, useMemo, useRef } = React;

// ============================================================
// HOME
// ============================================================
function HomeScreen({ store, navigate }) {
  const { state, progressionCheck, dismissProgression, setLevel } = store;
  const tt = window.t || ((k) => k);
  const pk = window.pick || ((x) => x);
  const today = new Date();
  const dayIdx = (today.getDay() + 6) % 7;
  const weekdayKeys = ["weekday_mon", "weekday_tue", "weekday_wed", "weekday_thu", "weekday_fri", "weekday_sat", "weekday_sun"];
  const dayName = tt(`common.${weekdayKeys[dayIdx]}`);
  const minLbl = tt("common.minutes_short");

  const allRoutines = [...PRESET_ROUTINES, ...state.customRoutines];
  const todaysRoutineId = getTodayRoutineId(state.profile.track, state.profile.level);
  const isRestDay = todaysRoutineId === null;
  const todaysRoutine =
    allRoutines.find((r) => r.id === todaysRoutineId) ||
    allRoutines.find((r) => r.track === state.profile.track && r.level === state.profile.level);

  const recommended = allRoutines
    .filter((r) => r.track === state.profile.track && r.id !== (todaysRoutine && todaysRoutine.id))
    .slice(0, 4);

  const recentSession = state.history[0];
  const lastTest = state.metrics.monthlyTests[0];
  const tip = useMemo(() => getRandomTip(today.getDate()), []);

  return (
    <div>
      <div className="app-header">
        <div>
          <div className="title">{tt("home.greeting")}</div>
          <div className="subtitle">{dayName} · {TRACKS[state.profile.track] ? pk(TRACKS[state.profile.track].name) : ""}</div>
        </div>
        <button
          className="icon-btn"
          style={{ width: 44, height: 44 }}
          onClick={() => navigate("profile")}
          aria-label={tt("nav.profile")}
        >
          <Icon.User />
        </button>
      </div>

      <div className="screen-pad">
        {progressionCheck.ready && (
          <div className="progression-banner">
            <div className="pb-icon"><Icon.Trophy width={20} height={20} /></div>
            <div className="pb-body">
              <div className="pb-title">{tt("home.progression_ready_h")}</div>
              <div className="pb-sub">{tt("home.progression_ready_p")}</div>
            </div>
            <div className="pb-actions">
              <button className="chip tiny" onClick={dismissProgression}>{tt("home.progression_later")}</button>
              <button className="chip tiny active" onClick={() => setLevel(progressionCheck.nextLevel)}>
                {tt("home.progression_yes", { level: tt(`common.${progressionCheck.nextLevel}`) })}
              </button>
            </div>
          </div>
        )}

        {/* Hero — rutina del día o descanso */}
        {isRestDay && (
          <div className="hero rest-hero">
            <div className="eyebrow">{tt("home.rest_day_eyebrow")}</div>
            <h3>{tt("home.rest_day_title")}</h3>
            <p className="hero-desc">{tt("home.rest_day_desc")}</p>
            <button className="play-btn" onClick={() => navigate("catalog")}>
              <Icon.List width={14} height={14} /> {tt("home.view_catalog")}
            </button>
          </div>
        )}
        {!isRestDay && todaysRoutine && (
          <div className="hero">
            <div className="eyebrow">{tt("home.today_routine")}</div>
            <h3>{pk(todaysRoutine.name)}</h3>
            <div className="meta">
              <span><Icon.Clock width={14} height={14} /> {todaysRoutine.durationMin} {minLbl}</span>
              <span><Icon.List width={14} height={14} /> {todaysRoutine.exercises.length} {tt("home.exercises_short")}</span>
              <span style={{ textTransform: "capitalize" }}>{tt(`common.${todaysRoutine.level}`)}</span>
            </div>
            <button className="play-btn" onClick={() => navigate("detail", { routineId: todaysRoutine.id })}>
              <Icon.Play width={14} height={14} /> {tt("home.start_now")}
            </button>
          </div>
        )}

        {/* Stats rápidos */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginTop: 18 }}>
          <div className="stat">
            <div className="label">{tt("home.streak")}</div>
            <div className="value">{state.streak}</div>
            <div className="delta">{tt("home.days")}</div>
          </div>
          <div className="stat">
            <div className="label">{tt("home.sessions")}</div>
            <div className="value">{state.history.length}</div>
            <div className="delta">{tt("home.total")}</div>
          </div>
          <div className="stat">
            <div className="label">{tt("home.this_week")}</div>
            <div className="value">{weekCount(state.history)}</div>
            <div className="delta">{tt("home.days")}</div>
          </div>
        </div>

        {/* Tip educativo */}
        <div className="tip-card">
          <div className="tip-tag">{pk(tip.tag)}</div>
          <div className="tip-text">{pk(tip.text)}</div>
        </div>

        {/* Test card si nunca lo hizo o > 30 días */}
        {(() => {
          const lastTestDate = lastTest ? new Date(lastTest.date).getTime() : 0;
          const stale = !lastTest || (Date.now() - lastTestDate) > 30 * 86400000;
          return stale ? (
            <button className="cta-row" onClick={() => navigate("tests")}>
              <div className="cta-ic"><Icon.Target width={20} height={20} /></div>
              <div className="cta-body">
                <div className="cta-title">{lastTest ? tt("home.retest_monthly") : tt("home.measure_baseline")}</div>
                <div className="cta-sub">{tt("home.mini_tests_short")}</div>
              </div>
              <Icon.ArrowRight width={18} height={18} />
            </button>
          ) : null;
        })()}

        <div className="section-head">
          <h2>{tt("home.recommended")}</h2>
          <button className="link" onClick={() => navigate("catalog")}>{tt("home.view_all")}</button>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {recommended.map((r) => (
            <button key={r.id} className="routine-row" onClick={() => navigate("detail", { routineId: r.id })}>
              <div className="icon-box"><Icon.Heart width={18} height={18} /></div>
              <div className="meta">
                <div className="name">{pk(r.name)}</div>
                <div className="sub">{r.durationMin} {minLbl} · {r.exercises.length} {tt("home.exercises_short")} · {tt(`common.${r.level}`)}</div>
              </div>
              <Icon.ArrowRight width={18} height={18} />
            </button>
          ))}
        </div>

        {recentSession && (
          <>
            <div className="section-head">
              <h2>{tt("home.last_session")}</h2>
              <button className="link" onClick={() => navigate("stats")}>{tt("home.history_link")}</button>
            </div>
            <div className="card">
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <div className="icon-box" style={{ width: 42, height: 42, borderRadius: 12, background: "var(--accent-soft)", color: "var(--accent-ink)", display: "grid", placeItems: "center" }}>
                  <Icon.CheckCircle width={20} height={20} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 15 }}>{pk(recentSession.routineName)}</div>
                  <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 2 }}>
                    {formatDate(recentSession.date)} · {recentSession.totalReps} {tt("home.repetitions")}
                  </div>
                </div>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ============================================================
// CATÁLOGO
// ============================================================
function CatalogScreen({ store, navigate }) {
  const { state, deleteCustomRoutine } = store;
  const tt = window.t || ((k) => k);
  const pk = window.pick || ((x) => x);
  const minLbl = tt("common.minutes_short");
  const [track, setTrack] = useState(state.profile.track || "all");
  const [level, setLevel] = useState("all");

  const all = [...PRESET_ROUTINES, ...state.customRoutines];
  const filtered = all.filter((r) => {
    if (track !== "all" && r.track !== track) return false;
    if (level !== "all" && r.level !== level) return false;
    // Filtro de audiencia: ocultar rutinas exclusivas si el género no coincide.
    if (state.profile.audience === "male" && r.audience === "female") return false;
    if (state.profile.audience === "female" && r.audience === "male") return false;
    return true;
  });

  return (
    <div>
      <div className="app-header">
        <div>
          <div className="title">{tt("catalog.header")}</div>
          <div className="subtitle">{tt("catalog.available", { n: filtered.length })}</div>
        </div>
        <button
          className="icon-btn"
          style={{ width: 44, height: 44, background: "var(--accent)", color: "oklch(0.18 0.04 150)", border: "none" }}
          onClick={() => navigate("create")}
          aria-label={tt("catalog.create_routine")}
        >
          <Icon.Plus />
        </button>
      </div>

      <div className="screen-pad">
        <div style={{ display: "flex", gap: 8, overflowX: "auto", paddingBottom: 4, marginBottom: 10 }}>
          <button className={`chip ${track === "all" ? "active" : ""}`} onClick={() => setTrack("all")}>{tt("catalog.chip_all")}</button>
          {TRACK_LIST.filter((t) => {
            if (state.profile.audience === "male" && t.audience === "female") return false;
            if (state.profile.audience === "female" && t.audience === "male") return false;
            return true;
          }).map((t) => (
            <button key={t.id} className={`chip ${track === t.id ? "active" : ""}`} style={{ flexShrink: 0 }} onClick={() => setTrack(t.id)}>
              {pk(t.name)}
            </button>
          ))}
        </div>
        <div style={{ display: "flex", gap: 8, overflowX: "auto", paddingBottom: 4, marginBottom: 14 }}>
          {[
            ["all", tt("catalog.all_levels")],
            ["beginner", tt("common.beginner")],
            ["intermediate", tt("common.intermediate")],
            ["advanced", tt("common.advanced")],
          ].map(([k, lbl]) => (
            <button
              key={k}
              className={`chip ${level === k ? "active" : ""}`}
              onClick={() => setLevel(k)}
              style={{ flexShrink: 0 }}
            >
              {lbl}
            </button>
          ))}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {filtered.map((r) => {
            const isCustom = state.customRoutines.some((c) => c.id === r.id);
            const trackInfo = TRACKS[r.track];
            return (
              <div key={r.id} className="routine-row" style={{ cursor: "pointer" }} onClick={() => navigate("detail", { routineId: r.id })}>
                <div className="icon-box" style={{ background: trackInfo ? `color-mix(in oklch, ${trackInfo.color} 18%, var(--surface))` : undefined, color: trackInfo ? trackInfo.color : undefined }}>
                  {r.track === "male-sexual" ? <Icon.Male width={18} height={18} /> :
                   r.track === "female-postpartum-sexual" ? <Icon.Female width={18} height={18} /> :
                   r.track === "incontinence-knack" ? <Icon.Shield width={18} height={18} /> :
                   <Icon.Heart width={18} height={18} />}
                </div>
                <div className="meta">
                  <div className="name" style={{ display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
                    {pk(r.name)}
                    {isCustom && <span className="chip tiny" style={{ padding: "2px 7px", fontSize: 10 }}>{tt("catalog.mine_badge")}</span>}
                  </div>
                  <div className="sub">{r.durationMin} {minLbl} · {r.exercises.length} {tt("home.exercises_short")} · {tt(`common.${r.level}`)}</div>
                </div>
                {isCustom && (
                  <button
                    className="icon-btn"
                    style={{ width: 32, height: 32, background: "transparent", border: "none" }}
                    onClick={(e) => { e.stopPropagation(); if (confirm(tt("catalog.confirm_delete"))) deleteCustomRoutine(r.id); }}
                    aria-label={tt("catalog.delete_aria")}
                  >
                    <Icon.Trash width={16} height={16} />
                  </button>
                )}
                <Icon.ArrowRight width={18} height={18} />
              </div>
            );
          })}
          {filtered.length === 0 && (
            <div style={{ textAlign: "center", padding: "40px 20px", color: "var(--ink-3)" }}>
              {tt("catalog.empty")}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// DETALLE
// ============================================================
function DetailScreen({ store, navigate, params }) {
  const { state } = store;
  const tt = window.t || ((k) => k);
  const pk = window.pick || ((x) => x);
  const all = [...PRESET_ROUTINES, ...state.customRoutines];
  const routine = all.find((r) => r.id === params.routineId);
  const [activeTerm, setActiveTerm] = useState(null);
  const [showAllGlossary, setShowAllGlossary] = useState(false);
  // Toggle "con estimulación" — sólo visible si la rutina contiene ejercicios edging-hold.
  // Default ON: el protocolo Stop-Start clínico es lo que hace el ejercicio educativo;
  // el OFF es el modo "Kegel seco" para entrenar la mecánica sin estimulación.
  const [withArousal, setWithArousal] = useState(true);

  if (!routine) return <div style={{ padding: 40 }}>{tt("detail.not_found")}</div>;

  const totalReps = routine.exercises.reduce((s, e) => s + (e.reps || 0), 0);
  const hasReverse = routine.exercises.some((e) => e.type === "reverse" || (e.reverseEvery || 0) > 0);
  const hasEdging = routine.exercises.some((e) => e.type === "edging-hold" || e.type === "edge");
  const trackInfo = TRACKS[routine.track];

  // Glosario agregado de toda la rutina (deduplicado).
  const allTermIds = (() => {
    const s = new Set();
    routine.exercises.forEach((ex) => {
      getExerciseGlossaryTerms(ex, routine).forEach((id) => s.add(id));
    });
    return Array.from(s);
  })();

  return (
    <div>
      <div className="app-header">
        <button className="icon-btn" style={{ width: 40, height: 40 }} onClick={() => navigate("catalog")} aria-label={tt("active.aria_back")}>
          <Icon.Back />
        </button>
        <div style={{ fontSize: 13, color: "var(--ink-3)", fontWeight: 600 }}>{tt("detail.header")}</div>
        <div style={{ width: 40 }} />
      </div>

      <div className="detail-hero">
        <div className="level-row">
          <span className="chip tiny">{tt(`common.${routine.level}`)}</span>
          {trackInfo && <span className="chip tiny">{pk(trackInfo.name)}</span>}
          {hasReverse && <span className="chip tiny" style={{ background: "color-mix(in oklch, oklch(0.68 0.16 320) 18%, var(--surface))", color: "oklch(0.5 0.16 320)" }}>{tt("catalog.includes_reverse")}</span>}
        </div>
        <h1>{pk(routine.name)}</h1>
        <p className="desc">{pk(routine.description)}</p>
        <div className="stats-row">
          <div className="col"><div className="l">{tt("detail.duration")}</div><div className="v">{routine.durationMin}<span style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 600 }}> {tt("common.minutes_short")}</span></div></div>
          <div className="col"><div className="l">{tt("detail.exercises")}</div><div className="v">{routine.exercises.length}</div></div>
          <div className="col"><div className="l">{tt("detail.reps")}</div><div className="v">{totalReps}</div></div>
        </div>
      </div>

      <div style={{ padding: "20px 22px 8px" }}>
        <h2 style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-2)", margin: 0, letterSpacing: "0.02em", textTransform: "uppercase" }}>
          {tt("detail.exercises")}
        </h2>
      </div>

      <div>
        {routine.exercises.map((ex, i) => {
          const desc = describeExercise(ex);
          const termIds = getExerciseGlossaryTerms(ex, routine);
          return (
            <div key={ex.id} className="exercise-list-item">
              <div className="num">{i + 1}</div>
              <div className="info">
                <div className="n">{window.pick ? window.pick(ex.name) : ex.name}</div>
                <div className="s">{desc}</div>
                {ex.instruction && <div className="instr">{window.pick ? window.pick(ex.instruction) : ex.instruction}</div>}
                {termIds.length > 0 && (
                  <div className="ex-glossary">
                    <span className="ex-glossary-label">{(window.t && window.t("detail.concepts")) || "Conceptos"}</span>
                    <div className="ex-glossary-chips">
                      {termIds.map((id) => {
                        const term = window.pick ? window.pick(GLOSSARY[id].term) : GLOSSARY[id].term;
                        return (
                          <button
                            key={id}
                            className="glossary-chip"
                            onClick={() => setActiveTerm(id)}
                            aria-label={`${(window.t && window.t("detail.concepts")) || "Definición"}: ${term}`}
                          >
                            {term}
                          </button>
                        );
                      })}
                    </div>
                  </div>
                )}
              </div>
              <span className="chip tiny" style={{ padding: "2px 7px", fontSize: 10 }}>{typeLabel(ex.type)}</span>
            </div>
          );
        })}
      </div>

      {allTermIds.length > 0 && (
        <div style={{ padding: "12px 22px 4px" }}>
          <button
            className="btn btn-ghost btn-block"
            onClick={() => setShowAllGlossary(true)}
            style={{ fontSize: 13 }}
          >
            <Icon.List width={14} height={14} /> {(window.t && window.t("detail.full_glossary", { n: allTermIds.length })) || `Ver glosario completo de la rutina (${allTermIds.length})`}
          </button>
        </div>
      )}

      {hasEdging && (
        <div className="arousal-toggle-card">
          <div className="arousal-toggle-row">
            <div className="arousal-toggle-text">
              <div className="arousal-toggle-label">{tt("detail.arousal_toggle_label")}</div>
              <div className="arousal-toggle-hint">
                {withArousal ? tt("detail.arousal_toggle_on_hint") : tt("detail.arousal_toggle_off_hint")}
              </div>
            </div>
            <button
              type="button"
              className={`arousal-toggle-switch ${withArousal ? "is-on" : ""}`}
              onClick={() => setWithArousal((v) => !v)}
              role="switch"
              aria-checked={withArousal}
              aria-label={tt("detail.arousal_toggle_label")}
            >
              <span className="arousal-toggle-knob" />
            </button>
          </div>
        </div>
      )}

      <div style={{ padding: "20px 22px" }}>
        <button
          className="btn btn-primary btn-block btn-lg"
          onClick={() => navigate("active", { routineId: routine.id, withArousal: hasEdging ? withArousal : false })}
        >
          <Icon.Play width={16} height={16} /> {tt("detail.start_routine")}
        </button>
      </div>

      {activeTerm && (
        <GlossaryTermSheet termId={activeTerm} onClose={() => setActiveTerm(null)} />
      )}

      {showAllGlossary && (
        <GlossaryListSheet
          termIds={allTermIds}
          onClose={() => setShowAllGlossary(false)}
          onSelect={(id) => { setShowAllGlossary(false); setActiveTerm(id); }}
          title={`${(window.t && window.t("glossary.title")) || "Glosario"} · ${window.pick ? window.pick(routine.name) : routine.name}`}
        />
      )}
    </div>
  );
}

// ============================================================
// GLOSARIO — Sheets
// ============================================================
function GlossaryTermSheet({ termId, onClose }) {
  const entry = GLOSSARY[termId];
  if (!entry) return null;
  const pk = window.pick || ((v) => (v && typeof v === "object" ? v.es : v) || "");
  const tt = window.t || ((k) => k);
  return (
    <div className="sheet-backdrop" onClick={onClose}>
      <div className="sheet" onClick={(e) => e.stopPropagation()}>
        <div className="grabber" />
        <div style={{ fontSize: 11, color: "var(--ink-3)", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6 }}>
          {tt("glossary.title") !== "glossary.title" ? tt("glossary.title") : "Glosario"}
        </div>
        <h3>{pk(entry.term)}</h3>
        <p style={{ fontSize: 14.5, color: "var(--ink-2)", margin: "0 0 12px", lineHeight: 1.45 }}>
          {pk(entry.short)}
        </p>
        <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: 0, lineHeight: 1.55 }}>
          {pk(entry.full)}
        </p>
        <div style={{ height: 12 }} />
        <button className="btn btn-block" onClick={onClose}>{tt("common.close") !== "common.close" ? tt("common.close") : "Cerrar"}</button>
      </div>
    </div>
  );
}

function GlossaryListSheet({ termIds, onClose, onSelect, title }) {
  const pk = window.pick || ((v) => (v && typeof v === "object" ? v.es : v) || "");
  const loc = (window.getLocale && window.getLocale()) || "es";
  const tt = window.t || ((k) => k);
  const list = termIds
    .map((id) => ({ id, ...GLOSSARY[id] }))
    .filter((e) => e.term)
    .map((e) => ({ ...e, _term: pk(e.term), _short: pk(e.short) }))
    .sort((a, b) => a._term.localeCompare(b._term, loc));
  return (
    <div className="sheet-backdrop" onClick={onClose}>
      <div className="sheet" onClick={(e) => e.stopPropagation()}>
        <div className="grabber" />
        <h3>{title || (tt("glossary.title") !== "glossary.title" ? tt("glossary.title") : "Glosario")}</h3>
        <div className="glossary-list">
          {list.map((e) => (
            <button key={e.id} className="glossary-item" onClick={() => onSelect(e.id)}>
              <div className="gi-term">{e._term}</div>
              <div className="gi-short">{e._short}</div>
            </button>
          ))}
        </div>
        <div style={{ height: 12 }} />
        <button className="btn btn-block" onClick={onClose}>{tt("common.close")}</button>
      </div>
    </div>
  );
}

function typeLabel(type) {
  const tt = window.t || ((k) => k);
  const map = {
    standard: "detail.type_hold",
    flick: "detail.type_flick",
    ladder: "detail.type_ladder",
    elevator: "detail.type_elevator",
    wave: "detail.type_wave",
    knack: "detail.type_knack",
    "edging-hold": "detail.type_edging",
    edge: "detail.type_edge",
    reverse: "detail.type_reverse",
  };
  return map[type] ? tt(map[type]) : type;
}

function describeExercise(ex) {
  const tt = window.t || ((k) => k);
  const reps = ex.reps;
  if (ex.type === "standard") {
    const reverse = ex.reverseEvery ? tt("detail.desc_reverse_suffix", { n: ex.reverseEvery }) : "";
    return tt("detail.desc_standard", { reps, hold: ex.holdSec || 5, reverse });
  }
  if (ex.type === "flick") return tt("detail.desc_flick", { reps });
  if (ex.type === "ladder") {
    const start = (ex.params && ex.params.startSec) || 2;
    const max = (ex.params && ex.params.maxSec) || 8;
    return tt("detail.desc_ladder", { reps, start, max });
  }
  if (ex.type === "elevator") return tt("detail.desc_elevator", { reps });
  if (ex.type === "wave") return tt("detail.desc_wave", { reps });
  if (ex.type === "knack") return tt("detail.desc_knack", { reps });
  if (ex.type === "edging-hold") {
    const sec = (ex.params && ex.params.holdSec) || 30;
    return tt("detail.desc_edging", { reps, sec });
  }
  if (ex.type === "edge") return tt("detail.desc_edge", { reps });
  if (ex.type === "reverse") return tt("detail.desc_reverse", { reps });
  return `${reps} reps`;
}

// ============================================================
// STATS — 3 pestañas
// ============================================================
function StatsScreen({ store, navigate }) {
  const { state } = store;
  const tt = window.t || ((k) => k);
  const [tab, setTab] = useState("activity");
  const showSexualTab = state.profile.goals.some((g) => ["ielt", "edging", "erection", "orgasmic", "postpartum"].includes(g));

  return (
    <div>
      <div className="app-header">
        <div>
          <div className="title">{tt("stats.title")}</div>
          <div className="subtitle">{tt("stats.subtitle")}</div>
        </div>
        <button className="icon-btn" style={{ width: 44, height: 44 }} onClick={() => navigate("tests")} aria-label={tt("stats.aria_tests")}>
          <Icon.Target />
        </button>
      </div>

      <div className="screen-pad">
        <div className="seg" style={{ marginBottom: 16 }}>
          <button className={tab === "activity" ? "active" : ""} onClick={() => setTab("activity")}>{tt("stats.tab_activity")}</button>
          <button className={tab === "strength" ? "active" : ""} onClick={() => setTab("strength")}>{tt("stats.tab_strength")}</button>
          {showSexualTab && <button className={tab === "sexual" ? "active" : ""} onClick={() => setTab("sexual")}>{tt("stats.tab_sexual")}</button>}
        </div>

        {tab === "activity" && <StatsActivity state={state} />}
        {tab === "strength" && <StatsStrength state={state} navigate={navigate} />}
        {tab === "sexual" && <StatsSexual store={store} />}
      </div>
    </div>
  );
}

function StatsActivity({ state }) {
  const tt = window.t || ((k) => k);
  const pk = window.pick || ((x) => x);
  const localeMap = { es: "es-ES", en: "en-US", it: "it-IT", de: "de-DE", fr: "fr-FR" };
  const loc = (window.getLocale && window.getLocale()) || "es";
  const intlLoc = localeMap[loc] || "es-ES";
  const minLbl = tt("common.minutes_short");
  const repsLbl = tt("common.reps");

  const last7 = useMemo(() => {
    const days = [];
    const wkFmt = new Intl.DateTimeFormat(intlLoc, { weekday: "narrow" });
    for (let i = 6; i >= 0; i--) {
      const d = new Date(Date.now() - i * 86400000);
      const key = d.toDateString();
      const found = state.history.filter((h) => new Date(h.date).toDateString() === key);
      days.push({
        label: wkFmt.format(d).toUpperCase(),
        count: found.length,
        reps: found.reduce((s, h) => s + (h.totalReps || 0), 0),
      });
    }
    return days;
  }, [state.history, intlLoc]);

  const maxReps = Math.max(...last7.map((d) => d.reps), 1);
  const totalSessions = state.history.length;
  const totalReps = state.history.reduce((s, h) => s + (h.totalReps || 0), 0);
  const monthFmt = new Intl.DateTimeFormat(intlLoc, { month: "short" });

  return (
    <div>
      <div className="streak-card">
        <div className="flame"><Icon.Flame width={28} height={28} /></div>
        <div style={{ flex: 1 }}>
          <div className="num">{state.streak}<span style={{ fontSize: 14, color: "var(--ink-3)", marginLeft: 6 }}>{tt("home.days")}</span></div>
          <div className="lbl">{tt("stats.streak_current")}</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div className="num">{totalSessions}</div>
          <div className="lbl">{tt("home.sessions")}</div>
        </div>
      </div>

      <div className="section-head"><h2>{tt("stats.last_7d")}</h2></div>
      <div className="card">
        <div style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 10, fontWeight: 600 }}>
          {tt("stats.reps_per_day_h")}
        </div>
        <div className="bar-chart">
          {last7.map((d, i) => (
            <div key={i} className={`bar ${d.reps > 0 ? "has-data" : ""}`} style={{ height: `${Math.max((d.reps / maxReps) * 100, 4)}%` }}>
              <div className="lbl">{d.label}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 36, paddingTop: 14, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", fontSize: 13 }}>
          <div><span style={{ color: "var(--ink-3)" }}>{tt("stats.total_reps")}</span> <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600, marginLeft: 6 }}>{totalReps}</span></div>
          <div><span style={{ color: "var(--ink-3)" }}>{tt("stats.average")}</span> <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600, marginLeft: 6 }}>{totalSessions > 0 ? Math.round(totalReps / totalSessions) : 0}</span></div>
        </div>
      </div>

      <div className="section-head"><h2>{tt("stats.history")}</h2></div>
      <div className="card" style={{ padding: "0 18px" }}>
        {state.history.length === 0 && (
          <div style={{ padding: "32px 0", textAlign: "center", color: "var(--ink-3)", fontSize: 14 }}>
            {tt("stats.empty_history")}
          </div>
        )}
        {state.history.slice(0, 10).map((h, i) => {
          const d = new Date(h.date);
          return (
            <div key={i} className="history-row">
              <div className="date-block">
                <div className="d">{d.getDate()}</div>
                <div className="m">{monthFmt.format(d).toUpperCase()}</div>
              </div>
              <div className="info">
                <div className="n">{pk(h.routineName)}</div>
                <div className="s">{h.totalReps} {repsLbl} · {Math.round((h.durationSec || 0) / 60)} {minLbl}</div>
              </div>
              <Icon.CheckCircle width={20} height={20} style={{ color: "var(--accent-deep)" }} />
            </div>
          );
        })}
      </div>
    </div>
  );
}

function StatsStrength({ state, navigate }) {
  const tests = state.metrics.monthlyTests || [];
  const tt = window.t || ((k) => k);
  const locale = (window.getLocale && window.getLocale()) || "es";

  if (tests.length === 0) {
    return (
      <div>
        <div className="card" style={{ textAlign: "center", padding: 32 }}>
          <div style={{ fontSize: 18, fontWeight: 600 }}>{tt("stats.no_tests_h")}</div>
          <p style={{ color: "var(--ink-2)", fontSize: 14, marginTop: 8 }}>
            {tt("stats.no_tests_p")}
          </p>
          <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 16 }} onClick={() => navigate("tests")}>
            <Icon.Target width={16} height={16} /> {tt("stats.take_test")}
          </button>
        </div>
      </div>
    );
  }

  const latest = tests[0];
  const oldest = tests[tests.length - 1];
  const deltaHold = latest.holdMs - oldest.holdMs;
  const deltaFlicks = latest.flicksPer10s - oldest.flicksPer10s;
  const deltaMvc = (latest.mvcSubjective || 0) - (oldest.mvcSubjective || 0);
  const maxHold = Math.max(...tests.map((t) => t.holdMs), 1);
  const maxFlicks = Math.max(...tests.map((t) => t.flicksPer10s), 1);

  const fmtDateTime = (iso) => {
    const d = new Date(iso);
    try {
      return new Intl.DateTimeFormat(locale, {
        day: "2-digit", month: "short", year: "numeric",
        hour: "2-digit", minute: "2-digit",
      }).format(d);
    } catch (e) {
      return d.toLocaleString();
    }
  };

  return (
    <div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
        <div className="stat">
          <div className="label">{tt("test.max_hold")}</div>
          <div className="value">{(latest.holdMs / 1000).toFixed(1)}<span style={{ fontSize: 14, color: "var(--ink-3)" }}>s</span></div>
          {tests.length > 1 && <div className="delta" style={{ color: deltaHold > 0 ? "var(--accent-deep)" : "var(--ink-3)" }}>{deltaHold >= 0 ? "+" : ""}{(deltaHold / 1000).toFixed(1)}s</div>}
        </div>
        <div className="stat">
          <div className="label">{tt("test.flicks_per_10s")}</div>
          <div className="value">{latest.flicksPer10s}</div>
          {tests.length > 1 && <div className="delta" style={{ color: deltaFlicks > 0 ? "var(--accent-deep)" : "var(--ink-3)" }}>{deltaFlicks >= 0 ? "+" : ""}{deltaFlicks}</div>}
        </div>
        <div className="stat">
          <div className="label">{tt("test.mvc_short")}</div>
          <div className="value">{latest.mvcSubjective ?? "—"}<span style={{ fontSize: 14, color: "var(--ink-3)" }}>/10</span></div>
          {tests.length > 1 && <div className="delta" style={{ color: deltaMvc > 0 ? "var(--accent-deep)" : "var(--ink-3)" }}>{deltaMvc >= 0 ? "+" : ""}{deltaMvc}</div>}
        </div>
      </div>

      <div className="section-head"><h2>{tt("stats.hold_evolution")}</h2></div>
      <div className="card">
        <div className="bar-chart">
          {tests.slice().reverse().map((t, i) => (
            <div key={i} className="bar has-data" style={{ height: `${(t.holdMs / maxHold) * 100}%` }}>
              <div className="lbl">{new Date(t.date).getDate()}/{new Date(t.date).getMonth() + 1}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="section-head"><h2>{tt("stats.flicks_evolution")}</h2></div>
      <div className="card">
        <div className="bar-chart">
          {tests.slice().reverse().map((t, i) => (
            <div key={i} className="bar has-data" style={{ height: `${(t.flicksPer10s / maxFlicks) * 100}%`, background: "var(--phase-contract, var(--accent))" }}>
              <div className="lbl">{new Date(t.date).getDate()}/{new Date(t.date).getMonth() + 1}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="section-head"><h2>{tt("stats.test_history") !== "stats.test_history" ? tt("stats.test_history") : "Historial de tests"}</h2></div>
      <div className="card" style={{ padding: 0 }}>
        {tests.map((t, i) => (
          <div
            key={i}
            style={{
              display: "grid",
              gridTemplateColumns: "1fr auto",
              alignItems: "center",
              padding: "14px 18px",
              borderBottom: i < tests.length - 1 ? "1px solid var(--line)" : "none",
              gap: 12,
            }}
          >
            <div>
              <div style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.04em" }}>
                {fmtDateTime(t.date)}
              </div>
              <div style={{ marginTop: 6, display: "flex", gap: 14, flexWrap: "wrap", fontSize: 14 }}>
                <span><span style={{ color: "var(--ink-3)" }}>{tt("test.max_hold")}</span> <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>{(t.holdMs / 1000).toFixed(1)}s</span></span>
                <span><span style={{ color: "var(--ink-3)" }}>{tt("test.flicks_per_10s")}</span> <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>{t.flicksPer10s}</span></span>
                <span><span style={{ color: "var(--ink-3)" }}>{tt("test.mvc_short")}</span> <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>{t.mvcSubjective ?? "—"}/10</span></span>
              </div>
            </div>
            {i === 0 && tests.length > 1 && (
              <div style={{ fontSize: 11, color: "var(--accent-deep)", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em" }}>
                {tt("stats.latest") !== "stats.latest" ? tt("stats.latest") : "Último"}
              </div>
            )}
          </div>
        ))}
      </div>

      <button className="btn btn-ghost btn-block" style={{ marginTop: 14 }} onClick={() => navigate("tests")}>
        <Icon.Target width={14} height={14} /> {tt("stats.new_test") !== "stats.new_test" ? tt("stats.new_test") : "Hacer nuevo test"}
      </button>
    </div>
  );
}

function StatsSexual({ store }) {
  const { state, logIELT, logEHS, logConoG } = store;
  const tt = window.t || ((k) => k);
  const [sheet, setSheet] = useState(null);
  const ielt = state.metrics.ielt || [];
  const ehs = state.metrics.ehs || [];
  const conoG = state.metrics.conoG || [];

  const latestIelt = ielt[0];
  const latestEhs = ehs[0];
  const latestCono = conoG[0];

  const isMale = state.profile.audience === "male";

  return (
    <div>
      {isMale && (
        <>
          <div className="section-head"><h2>{tt("stats.ielt_record_h")}</h2></div>
          <div className="card">
            <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
              <div style={{ fontSize: 32, fontFamily: "var(--font-mono)", fontWeight: 600 }}>
                {latestIelt ? `${latestIelt.seconds}s` : "—"}
              </div>
              <div style={{ fontSize: 13, color: "var(--ink-3)" }}>{tt("stats.latest_record")}</div>
            </div>
            {ielt.length > 1 && (
              <div style={{ marginTop: 10 }}>
                <MiniLine data={ielt.slice(0, 8).map((e) => e.seconds).reverse()} />
              </div>
            )}
            <button className="btn btn-ghost btn-block" style={{ marginTop: 12 }} onClick={() => setSheet("ielt")}>
              <Icon.Plus width={14} height={14} /> {tt("stats.ielt_log")}
            </button>
          </div>

          <div className="section-head"><h2>{tt("stats.ehs_record_h")}</h2></div>
          <div className="card">
            <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
              <div style={{ fontSize: 32, fontFamily: "var(--font-mono)", fontWeight: 600 }}>
                {latestEhs ? `${latestEhs.score}/4` : "—"}
              </div>
              <div style={{ fontSize: 13, color: "var(--ink-3)" }}>{tt("stats.latest_short")}</div>
            </div>
            <button className="btn btn-ghost btn-block" style={{ marginTop: 12 }} onClick={() => setSheet("ehs")}>
              <Icon.Plus width={14} height={14} /> {tt("stats.ehs_log")}
            </button>
          </div>
        </>
      )}

      {!isMale && (
        <>
          <div className="section-head"><h2>{tt("stats.cono_record_h")}</h2></div>
          <div className="card">
            <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
              <div style={{ fontSize: 32, fontFamily: "var(--font-mono)", fontWeight: 600 }}>
                {latestCono ? `${latestCono.grams}g` : "—"}
              </div>
              <div style={{ fontSize: 13, color: "var(--ink-3)" }}>{tt("stats.latest_short")}</div>
            </div>
            {conoG.length > 1 && (
              <div style={{ marginTop: 10 }}>
                <MiniLine data={conoG.slice(0, 8).map((e) => e.grams).reverse()} />
              </div>
            )}
            <button className="btn btn-ghost btn-block" style={{ marginTop: 12 }} onClick={() => setSheet("cono")}>
              <Icon.Plus width={14} height={14} /> {tt("stats.record_weight")}
            </button>
          </div>
        </>
      )}

      {sheet === "ielt" && (
        <NumberSheet
          title={tt("stats.ielt_log")}
          subtitle={tt("stats.ielt_subtitle")}
          unit="s"
          min={5} max={1800} step={5} initial={120}
          onClose={() => setSheet(null)}
          onSave={(v) => { logIELT(v); setSheet(null); }}
        />
      )}
      {sheet === "ehs" && (
        <NumberSheet
          title={tt("stats.ehs_log")}
          subtitle={tt("stats.ehs_subtitle")}
          unit="/4"
          min={1} max={4} step={1} initial={3}
          onClose={() => setSheet(null)}
          onSave={(v) => { logEHS(v); setSheet(null); }}
        />
      )}
      {sheet === "cono" && (
        <NumberSheet
          title={tt("stats.cono_log")}
          subtitle={tt("stats.cono_subtitle")}
          unit="g"
          min={5} max={150} step={5} initial={50}
          onClose={() => setSheet(null)}
          onSave={(v) => { logConoG(v); setSheet(null); }}
        />
      )}
    </div>
  );
}

function MiniLine({ data }) {
  if (!data || data.length === 0) return null;
  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;
  const W = 280, H = 60;
  const step = data.length > 1 ? W / (data.length - 1) : W;
  const pts = data.map((v, i) => `${i * step},${H - ((v - min) / range) * H}`).join(" ");
  return (
    <svg width="100%" height={H} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
      <polyline points={pts} fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function NumberSheet({ title, subtitle, unit, min, max, step, initial, onClose, onSave }) {
  const tt = window.t || ((k) => k);
  const [v, setV] = useState(initial);
  return (
    <div className="sheet-backdrop" onClick={onClose}>
      <div className="sheet" onClick={(e) => e.stopPropagation()}>
        <div className="grabber" />
        <h3>{title}</h3>
        {subtitle && <p style={{ fontSize: 13, color: "var(--ink-2)", marginTop: -8, lineHeight: 1.5 }}>{subtitle}</p>}
        <div className="big-number" style={{ marginTop: 16 }}>{v}<span>{unit}</span></div>
        <input
          type="range"
          min={min}
          max={max}
          step={step}
          value={v}
          onChange={(e) => setV(Number(e.target.value))}
          style={{ width: "100%", marginTop: 16 }}
        />
        <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
          <button className="btn btn-ghost" style={{ flex: 1 }} onClick={onClose}>{tt("common.cancel")}</button>
          <button className="btn btn-primary" style={{ flex: 2 }} onClick={() => onSave(v)}>
            <Icon.Check width={14} height={14} /> {tt("common.save")}
          </button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// PROFILE
// ============================================================
function ProfileScreen({ store, navigate, openTweaks }) {
  const { state, updateProfile, updatePreferences, reset } = store;
  const [editing, setEditing] = useState(false);
  const [editingLang, setEditingLang] = useState(false);
  const tt = window.t || ((k) => k);

  const trackInfo = TRACKS[state.profile.track];
  const supportedLocales = (window.getSupportedLocales && window.getSupportedLocales()) || [];
  const currentLocale = state.profile.locale || (window.getLocale && window.getLocale()) || "es";
  const currentLocaleName = (supportedLocales.find((l) => l.id === currentLocale) || {}).name || currentLocale;

  return (
    <div>
      <div className="app-header">
        <div>
          <div className="title">{tt("profile.header")}</div>
          <div className="subtitle">{tt("profile.preferences")}</div>
        </div>
      </div>

      <div className="profile-head">
        <div className="avatar">
          {state.profile.audience === "male" ? <Icon.Male width={32} height={32} /> :
           state.profile.audience === "female" ? <Icon.Female width={32} height={32} /> :
           <Icon.User width={32} height={32} />}
        </div>
        <div className="name">{tt("common." + (state.profile.audience || "all"))}</div>
        <div className="role">{tt("common." + state.profile.level)} · {trackInfo ? tt("tracks." + trackInfo.id + ".name") : "—"}</div>
      </div>

      <div className="screen-pad" style={{ marginBottom: 8 }}>
        <button className="btn btn-ghost btn-block" onClick={() => setEditing(true)}>
          <Icon.Edit width={15} height={15} /> {tt("profile.edit")}
        </button>
      </div>

      <div style={{ padding: "20px 22px 8px" }}>
        <h2 style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-2)", margin: 0, letterSpacing: "0.02em", textTransform: "uppercase" }}>
          {tt("profile.preferences")}
        </h2>
      </div>
      <div className="card" style={{ margin: "0 22px", padding: 0 }}>
        <PrefToggle
          icon={<Icon.Volume width={18} height={18} />}
          label={tt("profile.sound")}
          value={state.profile.preferences.soundOn}
          onChange={(v) => updatePreferences({ soundOn: v })}
        />
        <PrefSlider
          icon={<Icon.Waveform width={18} height={18} />}
          label={tt("profile.volume")}
          value={state.profile.preferences.volume}
          min={0} max={1} step={0.05}
          format={(v) => `${Math.round(v * 100)}%`}
          onChange={(v) => updatePreferences({ volume: v })}
        />
        <PrefToggle
          icon={<Icon.Vibrate width={18} height={18} />}
          label={tt("profile.haptic")}
          sub={Feedback && Feedback.supportsHaptic && Feedback.supportsHaptic() ? null : "iOS Safari: —"}
          value={state.profile.preferences.hapticOn}
          onChange={(v) => updatePreferences({ hapticOn: v })}
        />
        <button className="settings-row" onClick={() => setEditingLang(true)}>
          <div className="ic"><Icon.Logo width={18} height={18} /></div>
          <div className="lbl">{tt("profile.language")}</div>
          <div className="val">{currentLocaleName}</div>
        </button>
      </div>

      <div style={{ padding: "20px 22px 8px" }}>
        <h2 style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-2)", margin: 0, letterSpacing: "0.02em", textTransform: "uppercase" }}>
          {tt("profile.tests_row")}
        </h2>
      </div>
      <div className="card" style={{ margin: "0 22px", padding: 0 }}>
        <button className="settings-row" onClick={() => navigate("tests")}>
          <div className="ic"><Icon.Target width={18} height={18} /></div>
          <div className="lbl">{tt("profile.tests_row")}</div>
          <div className="val">{state.metrics.monthlyTests[0] ? `${(state.metrics.monthlyTests[0].holdMs / 1000).toFixed(1)}s · ${state.metrics.monthlyTests[0].flicksPer10s}` : "—"}</div>
        </button>
      </div>

      <div style={{ padding: "20px 22px 8px" }}>
        <h2 style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-2)", margin: 0, letterSpacing: "0.02em", textTransform: "uppercase" }}>
          {tt("profile.design")}
        </h2>
      </div>
      <div className="card" style={{ margin: "0 22px", padding: 0 }}>
        <button className="settings-row" onClick={openTweaks}>
          <div className="ic"><Icon.Sparkle width={18} height={18} /></div>
          <div className="lbl">{tt("profile.design_sub")}</div>
          <div className="val">{tt("profile.open_tweaks")} →</div>
        </button>
      </div>

      <div style={{ padding: "20px 22px 8px" }}>
        <h2 style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-2)", margin: 0, letterSpacing: "0.02em", textTransform: "uppercase" }}>
          {tt("home.streak")} · {tt("home.sessions")}
        </h2>
      </div>
      <div className="card" style={{ margin: "0 22px", padding: 0 }}>
        <div className="settings-row">
          <div className="ic"><Icon.Trophy width={18} height={18} /></div>
          <div className="lbl">{tt("home.streak")}</div>
          <div className="val">{state.streak} {tt("home.days")}</div>
        </div>
        <div className="settings-row">
          <div className="ic"><Icon.Chart width={18} height={18} /></div>
          <div className="lbl">{tt("home.sessions")}</div>
          <div className="val">{state.history.length}</div>
        </div>
        <button
          className="settings-row"
          style={{ color: "oklch(0.5 0.18 25)" }}
          onClick={() => {
            if (confirm(tt("profile.reset_confirm"))) reset();
          }}
        >
          <div className="ic" style={{ color: "oklch(0.5 0.18 25)" }}><Icon.Trash width={18} height={18} /></div>
          <div className="lbl">{tt("profile.reset")}</div>
        </button>
      </div>

      <div style={{ padding: "32px 22px", textAlign: "center", color: "var(--ink-3)", fontSize: 12, fontWeight: 600, letterSpacing: "0.04em" }}>
        SportK
      </div>

      {editing && (
        <EditProfileSheet
          profile={state.profile}
          onSave={(p) => { updateProfile(p); setEditing(false); }}
          onClose={() => setEditing(false)}
        />
      )}

      {editingLang && (
        <LanguageSheet
          current={currentLocale}
          onPick={(loc) => {
            if (window.setLocale) window.setLocale(loc);
            updateProfile({ locale: loc });
            setEditingLang(false);
          }}
          onClose={() => setEditingLang(false)}
        />
      )}
    </div>
  );
}

function LanguageSheet({ current, onPick, onClose }) {
  const tt = window.t || ((k) => k);
  const list = (window.getSupportedLocales && window.getSupportedLocales()) || [];
  return (
    <div className="sheet-backdrop" onClick={onClose}>
      <div className="sheet" onClick={(e) => e.stopPropagation()}>
        <div className="grabber" />
        <h3>{tt("profile.language")}</h3>
        <div className="glossary-list">
          {list.map((l) => (
            <button
              key={l.id}
              className={`glossary-item ${current === l.id ? "active" : ""}`}
              onClick={() => onPick(l.id)}
              style={current === l.id ? { borderColor: "var(--accent)" } : undefined}
            >
              <div className="gi-term">{l.name}</div>
              <div className="gi-short" style={{ fontFamily: "var(--font-mono)", textTransform: "uppercase" }}>{l.id}</div>
            </button>
          ))}
        </div>
        <div style={{ height: 12 }} />
        <button className="btn btn-block" onClick={onClose}>{tt("common.close")}</button>
      </div>
    </div>
  );
}

function PrefToggle({ icon, label, sub, value, onChange }) {
  return (
    <div className="settings-row">
      <div className="ic">{icon}</div>
      <div className="lbl">
        {label}
        {sub && <div style={{ fontSize: 11, color: "var(--ink-3)", fontWeight: 400, marginTop: 2 }}>{sub}</div>}
      </div>
      <button
        className={`switch ${value ? "on" : ""}`}
        onClick={() => onChange(!value)}
        aria-label={label}
      >
        <span className="thumb" />
      </button>
    </div>
  );
}

function PrefSlider({ icon, label, value, min, max, step, format, onChange }) {
  return (
    <div className="settings-row" style={{ flexDirection: "column", alignItems: "stretch", gap: 10 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <div className="ic">{icon}</div>
        <div className="lbl">{label}</div>
        <div className="val">{format ? format(value) : value}</div>
      </div>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        style={{ width: "100%" }}
      />
    </div>
  );
}

function EditProfileSheet({ profile, onSave, onClose }) {
  const tt = window.t || ((k) => k);
  const pk = window.pick || ((x) => x);
  const [audience, setAudience] = useState(profile.audience);
  const [level, setLevel] = useState(profile.level);
  const [track, setTrack] = useState(profile.track);
  const availableTracks = TRACK_LIST.filter((t) => {
    if (audience === "male" && t.audience === "female") return false;
    if (audience === "female" && t.audience === "male") return false;
    return true;
  });

  return (
    <div className="sheet-backdrop" onClick={onClose}>
      <div className="sheet" onClick={(e) => e.stopPropagation()}>
        <div className="grabber" />
        <h3>{tt("profile.edit_title")}</h3>
        <div className="field">
          <label className="l">{tt("profile.audience")}</label>
          <div className="seg">
            <button className={audience === "female" ? "active" : ""} onClick={() => setAudience("female")}>{tt("common.female")}</button>
            <button className={audience === "male" ? "active" : ""} onClick={() => setAudience("male")}>{tt("common.male")}</button>
          </div>
        </div>
        <div className="field">
          <label className="l">{tt("profile.track")}</label>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {availableTracks.map((t) => (
              <button
                key={t.id}
                onClick={() => setTrack(t.id)}
                className={`track-option ${track === t.id ? "active" : ""}`}
              >
                <div className="t-name">{pk(t.name)}</div>
                <div className="t-blurb">{pk(t.blurb)}</div>
              </button>
            ))}
          </div>
        </div>
        <div className="field">
          <label className="l">{tt("profile.level")}</label>
          <div className="seg">
            <button className={level === "beginner" ? "active" : ""} onClick={() => setLevel("beginner")}>{tt("common.beginner")}</button>
            <button className={level === "intermediate" ? "active" : ""} onClick={() => setLevel("intermediate")}>{tt("common.intermediate")}</button>
            <button className={level === "advanced" ? "active" : ""} onClick={() => setLevel("advanced")}>{tt("common.advanced")}</button>
          </div>
        </div>
        <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 8 }} onClick={() => onSave({ audience, level, track })}>
          {tt("profile.save")}
        </button>
      </div>
    </div>
  );
}

// ============================================================
// helpers
// ============================================================
function weekCount(history) {
  const start = new Date();
  start.setHours(0, 0, 0, 0);
  start.setDate(start.getDate() - ((start.getDay() + 6) % 7));
  const set = new Set();
  history.forEach((h) => {
    const d = new Date(h.date);
    if (d >= start) set.add(d.toDateString());
  });
  return set.size;
}

function formatDate(iso) {
  const tt = window.t || ((k) => k);
  const localeMap = { es: "es-ES", en: "en-US", it: "it-IT", de: "de-DE", fr: "fr-FR" };
  const loc = (window.getLocale && window.getLocale()) || "es";
  const d = new Date(iso);
  const now = new Date();
  const diff = Math.floor((now - d) / 86400000);
  if (diff === 0) return tt("common.today");
  if (diff === 1) return tt("common.yesterday");
  if (diff < 7) return tt("common.days_ago", { n: diff });
  return d.toLocaleDateString(localeMap[loc] || "es-ES", { day: "numeric", month: "short" });
}

// ============================================================
// ONBOARDING (3 pasos: audiencia → objetivo → test inicial)
// ============================================================
// ============================================================
// BaselineTest — componente reutilizable (3 fases: hold, flicks, mvc)
// Usado por Onboarding y por TestsScreen.
// onComplete({ holdMs, flicksPer10s, mvcSubjective })
// ============================================================
function BaselineTest({ initial, onComplete }) {
  const tt = window.t || ((k) => k);
  const [stage, setStage] = useState("hold"); // hold | flicks | mvc
  const [holdMs, setHoldMs] = useState(0);
  const [flicksCount, setFlicksCount] = useState(0);
  const [mvc, setMvc] = useState((initial && initial.mvcSubjective) || 5);

  // Hold con rAF (sin tope superior — solo el usuario decide cuándo soltar).
  const [holdRunning, setHoldRunning] = useState(false);
  const [holdElapsed, setHoldElapsed] = useState(0);
  const holdRafRef = useRef(0);
  const holdStartRef = useRef(0);

  useEffect(() => {
    if (!holdRunning) return;
    holdStartRef.current = performance.now();
    const loop = (ts) => {
      setHoldElapsed(ts - holdStartRef.current);
      holdRafRef.current = requestAnimationFrame(loop);
    };
    holdRafRef.current = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(holdRafRef.current);
  }, [holdRunning]);

  // Flicks con setInterval (10s estricto).
  const [flicksRunning, setFlicksRunning] = useState(false);
  const [flicksElapsed, setFlicksElapsed] = useState(0);
  const flicksStartRef = useRef(0);

  useEffect(() => {
    if (!flicksRunning) return;
    flicksStartRef.current = performance.now();
    const i = setInterval(() => {
      const dt = performance.now() - flicksStartRef.current;
      setFlicksElapsed(dt);
      if (dt >= 10000) { clearInterval(i); setFlicksRunning(false); }
    }, 80);
    return () => clearInterval(i);
  }, [flicksRunning]);

  const startHold = () => {
    if (window.Feedback) Feedback.unlock();
    setHoldElapsed(0);
    setHoldRunning(true);
    if (window.Feedback) Feedback.cuePhase("contract");
  };
  const stopHold = () => {
    setHoldRunning(false);
    setHoldMs(holdElapsed);
    if (window.Feedback) Feedback.cuePhase("release");
  };
  const startFlicks = () => {
    if (window.Feedback) Feedback.unlock();
    setFlicksCount(0);
    setFlicksElapsed(0);
    setFlicksRunning(true);
  };
  const tapFlick = () => {
    if (!flicksRunning) return;
    setFlicksCount((c) => c + 1);
    if (window.Feedback) Feedback.cuePhase("contract");
  };
  const finish = () => {
    onComplete({ holdMs, flicksPer10s: flicksCount, mvcSubjective: mvc });
  };

  return (
    <div>
      {stage === "hold" && (
        <div style={{ textAlign: "center" }}>
          <div className="phase-pill" style={{ margin: "8px auto 12px" }}>{tt("test.pill_hold")}</div>
          <h2 style={{ fontSize: 22, marginBottom: 6 }}>{tt("test.hold_h")}</h2>
          <p style={{ color: "var(--ink-2)", fontSize: 14, marginBottom: 20 }}>
            {tt("test.hold_desc")}
          </p>
          <div className="big-number">{(holdElapsed / 1000).toFixed(1)}<span>s</span></div>
          {!holdRunning ? (
            <button className="btn btn-primary btn-block btn-lg" onClick={startHold} style={{ marginTop: 20 }}>
              <Icon.Play width={16} height={16} /> {holdMs > 0 ? tt("common.repeat") : tt("common.start")}
            </button>
          ) : (
            <button className="btn btn-primary btn-block btn-lg" onClick={stopHold} style={{ marginTop: 20 }}>
              <Icon.Stop /> {tt("test.release")}
            </button>
          )}
          {holdMs > 0 && !holdRunning && (
            <button className="btn btn-ghost btn-block" onClick={() => setStage("flicks")} style={{ marginTop: 10 }}>
              {tt("test.next_flicks")} <Icon.ArrowRight width={14} height={14} />
            </button>
          )}
        </div>
      )}

      {stage === "flicks" && (
        <div style={{ textAlign: "center" }}>
          <div className="phase-pill" style={{ margin: "8px auto 12px" }}>{tt("test.pill_flicks")}</div>
          <h2 style={{ fontSize: 22, marginBottom: 6 }}>{tt("test.flicks_h")}</h2>
          <p style={{ color: "var(--ink-2)", fontSize: 14, marginBottom: 16 }}>
            {tt("test.flicks_desc")}
          </p>
          <div className="big-number">{flicksCount}</div>
          <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 4 }}>
            {flicksRunning
              ? tt("test.flicks_remaining", { s: (10 - flicksElapsed / 1000).toFixed(1) })
              : flicksElapsed > 0 ? tt("test.flicks_done") : "10s"}
          </div>
          {!flicksRunning && flicksElapsed === 0 && (
            <button className="btn btn-primary btn-block btn-lg" onClick={startFlicks} style={{ marginTop: 18 }}>
              <Icon.Play width={16} height={16} /> {tt("common.start")}
            </button>
          )}
          {flicksRunning && (
            <button
              className="btn btn-primary btn-block"
              style={{ marginTop: 18, height: 96, fontSize: 22, borderRadius: 24 }}
              onMouseDown={tapFlick}
              onTouchStart={(e) => { e.preventDefault(); tapFlick(); }}
            >
              {tt("test.flicks_tap")}
            </button>
          )}
          {!flicksRunning && flicksElapsed > 0 && (
            <button className="btn btn-ghost btn-block" onClick={() => setStage("mvc")} style={{ marginTop: 10 }}>
              {tt("test.next")} <Icon.ArrowRight width={14} height={14} />
            </button>
          )}
        </div>
      )}

      {stage === "mvc" && (
        <div style={{ textAlign: "center" }}>
          <div className="phase-pill" style={{ margin: "8px auto 12px" }}>{tt("test.pill_mvc")}</div>
          <h2 style={{ fontSize: 22, marginBottom: 6 }}>{tt("test.mvc_h")}</h2>
          <p style={{ color: "var(--ink-2)", fontSize: 14, marginBottom: 24 }}>
            {tt("test.mvc_desc")}
          </p>
          <div className="big-number">{mvc}<span>/10</span></div>
          <input
            type="range"
            min="1"
            max="10"
            value={mvc}
            onChange={(e) => setMvc(Number(e.target.value))}
            style={{ width: "100%", marginTop: 24 }}
          />
          <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 24 }} onClick={finish}>
            <Icon.Check width={16} height={16} /> {tt("test.save_results")}
          </button>
        </div>
      )}
    </div>
  );
}

// ============================================================
// Guía de identificación del suelo pélvico (pre-test)
// ============================================================
function PelvicGuide({ audience, onReady }) {
  const tt = window.t || ((k) => k);
  const tBold = window.tBold || ((s) => s);
  const isFemale = audience === "female";
  const isMale = audience === "male";

  const whatKey = isFemale ? "onboarding.guide_what_female"
    : isMale ? "onboarding.guide_what_male"
    : "onboarding.guide_what_neutral";

  const locateP = isFemale ? tt("onboarding.guide_locate_female_p1")
    : isMale ? tt("onboarding.guide_locate_male_p1")
    : tt("onboarding.guide_locate_neutral");
  const locateTip = isFemale ? tt("onboarding.guide_locate_female_tip")
    : isMale ? tt("onboarding.guide_locate_male_tip")
    : null;

  const reverseP = isFemale ? tt("onboarding.guide_reverse_female_p1")
    : isMale ? tt("onboarding.guide_reverse_male_p1")
    : tt("onboarding.guide_reverse_neutral");
  const reverseTip = isFemale ? tt("onboarding.guide_reverse_female_tip")
    : isMale ? tt("onboarding.guide_reverse_male_tip")
    : null;

  return (
    <div style={{ marginTop: 6 }}>
      <p className="ob-desc" style={{ marginBottom: 14 }}>
        {tt("onboarding.guide_intro")}
      </p>

      <div className="guide-card">
        <div className="guide-h">{tt("onboarding.guide_what_h")}</div>
        <div className="guide-p">{tt(whatKey)}</div>
      </div>

      <div className="guide-card">
        <div className="guide-h">{tt("onboarding.guide_locate_h")}</div>
        <div className="guide-p">
          {tBold(locateP)}
          {locateTip && (
            <div style={{ marginTop: 8, padding: 10, background: "var(--surface-2)", borderRadius: 10, fontSize: 12.5, color: "var(--ink-2)" }}>
              {tBold(locateTip)}
            </div>
          )}
        </div>
      </div>

      <div className="guide-card">
        <div className="guide-h">{tt("onboarding.guide_reverse_h")}</div>
        <div className="guide-p" style={{ marginBottom: 8 }}>
          {tBold(tt("onboarding.guide_reverse_p"))}
        </div>
        <div className="guide-p">
          {tBold(reverseP)}
          {reverseTip && (
            <div style={{ marginTop: 8, padding: 10, background: "var(--surface-2)", borderRadius: 10, fontSize: 12.5, color: "var(--ink-2)" }}>
              {tBold(reverseTip)}
            </div>
          )}
        </div>
      </div>

      <div className="guide-card">
        <div className="guide-h">{tt("onboarding.guide_errors_h")}</div>
        <ul className="guide-list">
          <li><span className="bad">✗</span> {tt("onboarding.guide_err_glutes")}</li>
          <li><span className="bad">✗</span> {tt("onboarding.guide_err_breath")}</li>
          <li><span className="bad">✗</span> {tt("onboarding.guide_err_pee")}</li>
          <li><span className="ok">✓</span> {tt("onboarding.guide_ok_close")}</li>
          <li><span className="ok">✓</span> {tt("onboarding.guide_ok_pos")}</li>
        </ul>
      </div>

      <div className="guide-card" style={{ background: "var(--accent-soft)", borderColor: "transparent" }}>
        <div className="guide-h" style={{ color: "var(--accent-ink)" }}>{tt("onboarding.guide_practice_h")}</div>
        <div className="guide-p" style={{ color: "var(--accent-ink)" }}>
          {tBold(tt("onboarding.guide_practice_p"))}
        </div>
      </div>

      <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 16 }} onClick={onReady}>
        {tt("onboarding.guide_ready")} <Icon.ArrowRight width={16} height={16} />
      </button>
    </div>
  );
}

function OnboardingScreen({ store }) {
  // 4 pasos: 0 idioma · 1 audiencia · 2 objetivo · 3 test
  const [step, setStep] = useState(0);
  const [locale, setLocaleLocal] = useState((window.getLocale && window.getLocale()) || "es");
  const [audience, setAudience] = useState(null);
  const [goal, setGoal] = useState(null);
  const [testStage, setTestStage] = useState("guide"); // guide | running | finish
  const [results, setResults] = useState(null);
  const [chosenLevel, setChosenLevel] = useState(null); // nivel pre-seleccionado, editable

  const handleTestComplete = (res) => {
    setResults(res);
    const suggested = window.classifyLevel ? window.classifyLevel({ holdMs: res.holdMs, flicksPer10s: res.flicksPer10s }) : "beginner";
    setChosenLevel(suggested);
    setTestStage("finish");
  };

  const finish = () => {
    if (!results) return;
    const goalEntry = GOALS.find((g) => g.id === goal);
    const track = goalEntry ? goalEntry.track : "general-strength";
    store.updateProfile({
      audience,
      level: chosenLevel || "beginner",
      track,
      goals: goal ? [goal] : ["strength"],
      onboarded: true,
      locale,
      baseline: { ...results, takenAt: new Date().toISOString() },
    });
    if (store.logTest) store.logTest(results);
  };

  const skipTest = () => {
    const goalEntry = GOALS.find((g) => g.id === goal);
    const track = goalEntry ? goalEntry.track : "general-strength";
    store.updateProfile({
      audience,
      level: "beginner",
      track,
      goals: goal ? [goal] : ["strength"],
      onboarded: true,
      locale,
    });
  };

  const canNext =
    (step === 0 && locale) ||
    (step === 1 && audience) ||
    (step === 2 && goal);

  const next = () => {
    if (step < 3) setStep(step + 1);
  };

  const supportedLocales = (window.getSupportedLocales && window.getSupportedLocales()) || [{ id: "es", name: "Español" }];
  const tt = window.t || ((k) => k);

  // Cambia el idioma "en vivo" al seleccionar para que la siguiente pantalla ya esté en su idioma.
  const onSelectLocale = (loc) => {
    setLocaleLocal(loc);
    if (window.setLocale) window.setLocale(loc);
  };

  const availableGoals = GOALS.filter((g) => {
    const trk = TRACKS[g.track];
    if (!trk) return true;
    if (audience === "male" && trk.audience === "female") return false;
    if (audience === "female" && trk.audience === "male") return false;
    return true;
  });

  const suggested = results && window.classifyLevel ? window.classifyLevel({ holdMs: results.holdMs, flicksPer10s: results.flicksPer10s }) : null;

  return (
    <div style={{ minHeight: "100%", display: "flex", flexDirection: "column", padding: "0 22px" }} key={locale}>
      <div style={{ paddingTop: 28, display: "flex", alignItems: "center", gap: 10, justifyContent: "center" }}>
        <Icon.Logo width={32} height={32} style={{ color: "var(--accent-deep)" }} />
        <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em" }}>SportK</div>
      </div>

      <div style={{ display: "flex", gap: 6, justifyContent: "center", marginTop: 22 }}>
        {[0, 1, 2, 3].map((i) => (
          <div
            key={i}
            style={{
              width: i === step ? 24 : 8,
              height: 8,
              borderRadius: 4,
              background: i <= step ? "var(--accent)" : "var(--line-strong)",
              transition: "all 0.25s",
            }}
          />
        ))}
      </div>

      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", paddingTop: 18 }}>
        {step === 0 && (
          <div>
            <div className="ob-eyebrow">{tt("onboarding.lang_eyebrow")}</div>
            <h1 className="ob-title">{tt("onboarding.lang_title")}</h1>
            <p className="ob-desc">{tt("onboarding.lang_desc")}</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {supportedLocales.map((l) => (
                <button
                  key={l.id}
                  onClick={() => onSelectLocale(l.id)}
                  className={`ob-goal ${locale === l.id ? "active" : ""}`}
                >
                  <div className="ob-goal-radio" />
                  <div className="ob-goal-body">
                    <div className="ob-goal-lbl">{l.name}</div>
                    <div className="ob-goal-track" style={{ fontFamily: "var(--font-mono)", textTransform: "uppercase", fontSize: 11 }}>{l.id}</div>
                  </div>
                </button>
              ))}
            </div>
          </div>
        )}

        {step === 1 && (
          <div>
            <div className="ob-eyebrow">{tt("onboarding.welcome")}</div>
            <h1 className="ob-title">{tt("onboarding.audience_title")}</h1>
            <p className="ob-desc">{tt("onboarding.audience_desc")}</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              {[
                { val: "female", label: tt("common.female"), Ic: Icon.Female },
                { val: "male", label: tt("common.male"), Ic: Icon.Male },
              ].map(({ val, label, Ic }) => (
                <button
                  key={val}
                  onClick={() => setAudience(val)}
                  className={`ob-card ${audience === val ? "active" : ""}`}
                >
                  <div className="ob-card-ic"><Ic width={28} height={28} /></div>
                  <div className="ob-card-lbl">{label}</div>
                </button>
              ))}
            </div>
          </div>
        )}

        {step === 2 && (
          <div>
            <div className="ob-eyebrow">{tt("onboarding.step3")}</div>
            <h1 className="ob-title">{tt("onboarding.goal_title")}</h1>
            <p className="ob-desc">{tt("onboarding.goal_desc")}</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {availableGoals.map((g) => (
                <button
                  key={g.id}
                  onClick={() => setGoal(g.id)}
                  className={`ob-goal ${goal === g.id ? "active" : ""}`}
                >
                  <div className="ob-goal-radio" />
                  <div className="ob-goal-body">
                    <div className="ob-goal-lbl">{tt(`goals.${g.id}`)}</div>
                    <div className="ob-goal-track">{tt(`tracks.${g.track}.name`)}</div>
                  </div>
                </button>
              ))}
            </div>
          </div>
        )}

        {step === 3 && (
          <div>
            <div className="ob-eyebrow">{tt("onboarding.step4")}</div>
            <h1 className="ob-title">
              {testStage === "guide" ? tt("onboarding.test_title_guide") : tt("onboarding.test_title_running")}
            </h1>
            {testStage !== "guide" && testStage !== "finish" && (
              <p className="ob-desc">{tt("onboarding.test_desc")}</p>
            )}

            {testStage === "guide" && (
              <PelvicGuide audience={audience} onReady={() => setTestStage("running")} />
            )}

            {testStage === "running" && (
              <BaselineTest onComplete={handleTestComplete} />
            )}

            {testStage === "finish" && results && (
              <div style={{ marginTop: 14 }}>
                <div className="card" style={{ padding: 18 }}>
                  <div style={{ fontSize: 14, color: "var(--ink-3)", textTransform: "uppercase", fontWeight: 600, letterSpacing: "0.06em" }}>{tt("onboarding.results")}</div>
                  <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginTop: 10 }}>
                    <div className="stat"><div className="label">{tt("onboarding.max_hold")}</div><div className="value">{(results.holdMs / 1000).toFixed(1)}s</div></div>
                    <div className="stat"><div className="label">{tt("onboarding.flicks_per_10s")}</div><div className="value">{results.flicksPer10s}</div></div>
                    <div className="stat"><div className="label">{tt("onboarding.mvc_short")}</div><div className="value">{results.mvcSubjective}/10</div></div>
                  </div>
                </div>

                <div style={{ marginTop: 16 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 }}>
                    {tt("test.level_suggested")}
                  </div>
                  <div className="seg" style={{ marginBottom: 8 }}>
                    {["beginner", "intermediate", "advanced"].map((lv) => (
                      <button
                        key={lv}
                        className={chosenLevel === lv ? "active" : ""}
                        onClick={() => setChosenLevel(lv)}
                      >
                        {tt(`common.${lv}`)}
                        {suggested === lv && (
                          <span style={{ marginLeft: 6, fontSize: 9, padding: "1px 5px", background: "var(--accent)", color: "var(--accent-ink)", borderRadius: 6, fontWeight: 700, letterSpacing: "0.04em", textTransform: "uppercase" }}>
                            ✓
                          </span>
                        )}
                      </button>
                    ))}
                  </div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)", lineHeight: 1.4 }}>
                    {chosenLevel === suggested
                      ? tt("onboarding.level_suggested_hint")
                      : tt("onboarding.level_chosen_hint", { chosen: tt("common." + chosenLevel), suggested: tt("common." + suggested) })}
                  </div>
                </div>

                <div style={{ marginTop: 14, padding: 12, background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: 12, fontSize: 13, color: "var(--ink-2)", lineHeight: 1.5 }}>
                  <b>{tt("onboarding.before_start_h")}</b><br />
                  · {tt("onboarding.before_no_glutes")}<br />
                  · {tt("onboarding.before_exhale")}<br />
                  · {tt("onboarding.before_release")}<br />
                  · {tt("onboarding.before_rest")}
                </div>
                <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 14 }} onClick={finish}>
                  <Icon.Check width={16} height={16} /> {tt("common.start")}
                </button>
              </div>
            )}
          </div>
        )}
      </div>

      <div style={{ padding: "16px 0 28px", display: "flex", gap: 10 }}>
        {step > 0 && step < 3 && (
          <button className="btn btn-ghost" onClick={() => setStep(step - 1)} style={{ width: 56, padding: "14px 0" }}>
            <Icon.Back width={18} height={18} />
          </button>
        )}
        {step < 3 && (
          <button
            className="btn btn-primary btn-lg"
            style={{ flex: 1, opacity: canNext ? 1 : 0.4, pointerEvents: canNext ? "auto" : "none" }}
            onClick={next}
          >
            {tt("common.continue")} <Icon.ArrowRight width={16} height={16} />
          </button>
        )}
        {step === 3 && testStage !== "finish" && (
          <button className="btn btn-ghost btn-block" onClick={skipTest}>
            {tt("onboarding.skip_test")}
          </button>
        )}
      </div>
    </div>
  );
}

Object.assign(window, {
  HomeScreen,
  CatalogScreen,
  DetailScreen,
  StatsScreen,
  ProfileScreen,
  OnboardingScreen,
  GlossaryTermSheet,
  GlossaryListSheet,
  BaselineTest,
  PelvicGuide,
  LanguageSheet,
});