// Pantallas del flujo (11 pasos + onboarding + componiendo + resultado + compartir)

// ─ Onboarding ── Variación A · panel gradiente granulado ─────────
function UvOnboarding({ p, onStart, lang, onLang }) {
  return (
    <div className="uv-onb-root" style={{
      height: "100%", display: "flex", flexDirection: "column",
      background: p.bg, color: p.ink, overflow: "hidden",
    }}>
      {/* Zona scrollable: bloque superior + panel (robusto en pantallas cortas) */}
      <div style={{
        flex: 1, minHeight: 0, overflowY: "auto",
        display: "flex", flexDirection: "column",
        WebkitOverflowScrolling: "touch",
      }}>
        {/* Bloque superior: logo (gris liso) + titular + intro */}
        <div style={{ padding: "54px 28px 0", flexShrink: 0 }}>
          <AltimaLogo color={EV_INK} size={21} />

          {/* Selector de idioma de la canción */}
          <div style={{ marginTop: 16 }}>
            <div style={{ fontFamily: UV_FONTS.body, fontSize: 10.5, letterSpacing: ".14em", textTransform: "uppercase", color: p.inkSoft, fontWeight: 600, marginBottom: 7 }}>{t("lang_label")}</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
              {UV_LANGS.map(L => {
                const active = (window.UV_CUR_LANG || "es") === L.code;
                return (
                  <button key={L.code} onClick={() => onLang(L.code)} style={{
                    // 44px de alto: es el minimo comodo para el dedo (antes 30)
                    padding: "0 14px", minHeight: 44, borderRadius: 999, cursor: "pointer",
                    border: `1px solid ${active ? p.accent : p.inkFaint}`,
                    background: active ? p.accent : "transparent",
                    color: active ? p.accentInk : p.ink,
                    fontFamily: UV_FONTS.body, fontSize: 12.5, fontWeight: active ? 600 : 500,
                    transition: "all .14s",
                  }}>{L.label}</button>
                );
              })}
            </div>
          </div>

          <div style={{
            fontFamily: UV_FONTS.display, fontWeight: 700,
            fontSize: 40, lineHeight: 1.02, letterSpacing: ".012em", wordSpacing: ".14em",
            textTransform: "uppercase",
            color: p.ink, marginTop: 22,
          }}>
            {t("onb_t1")}<br/>{t("onb_t2")}<br/>
            <span style={{ color: p.clay }}>{t("onb_t3")}</span>
          </div>

          <div style={{
            fontSize: 14, lineHeight: 1.6, color: p.inkSoft, maxWidth: 280,
            fontFamily: UV_FONTS.body, marginTop: 14,
          }}>
            {t("onb_sub")}
          </div>
        </div>

        {/* Panel gradiente granulado con la frase emotiva reservada en blanco */}
        <div style={{ flex: "1 0 210px", padding: "22px 22px 0", display: "flex" }}>
          <div className="ev-mesh ev-grain ev-grain-strong" style={{
            flex: 1, borderRadius: "26px 26px 0 0", position: "relative",
            overflow: "hidden", display: "flex", flexDirection: "column",
            justifyContent: "flex-end", padding: 24,
          }}>
            <div style={{ position: "relative", zIndex: 3 }}>
              <div style={{
                fontFamily: UV_FONTS.display, fontWeight: 800, fontSize: 50,
                color: "#0B0B0C", lineHeight: 1.0, letterSpacing: ".012em", wordSpacing: ".14em",
                textShadow: "0 2px 30px rgba(60,30,15,.25)",
              }}>3 min</div>
              <div style={{
                display: "flex", alignItems: "flex-end", justifyContent: "space-between",
                gap: 14, marginTop: 10,
              }}>
                <div style={{
                  fontFamily: UV_FONTS.display, fontWeight: 600, fontSize: 17,
                  color: p.accentInk, lineHeight: 1.25,
                  whiteSpace: "pre-line",
                }}>{t("onb_stat")}</div>
                <span style={{
                  width: 38, height: 38, borderRadius: "50%", flex: "none",
                  background: p.accentInk,
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>
                  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#1c2f36"
                       strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M7 17 17 7M7 7h10v10"/>
                  </svg>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Footer fijo: CTA tinta + reanudar */}
      <div style={{
        flexShrink: 0, background: p.bg,
        padding: "16px 28px max(26px, env(safe-area-inset-bottom))",
      }}>
        <button onClick={onStart} style={{
          width: "100%", height: 54, border: "none", borderRadius: 999,
          background: p.accent, color: p.accentInk,
          fontFamily: UV_FONTS.display, fontWeight: 600, fontSize: 16,
          display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
          cursor: "pointer",
        }}>
          {t("onb_cta")}
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={p.accentInk}
               strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M7 17 17 7M7 7h10v10"/>
          </svg>
        </button>
      </div>
    </div>
  );
}

// ─ Paso 1: Para quién es ─────────────────────────────────────────
function StepDestinatario({ p, data, set }) {
  return (
    <>
      <UvEyebrow p={p}>{t("s_dest_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_dest_t")}</UvTitle>
      <UvHint p={p}>{t("s_dest_h")}</UvHint>
      <div style={{ marginTop: 6 }}>
        <UvChips p={p} value={data.destinatario} options={t("dest_opts")}
          allowCustom customPlaceholder={t("ph_dest_custom")}
          onSelect={v => set("destinatario", v)} />
      </div>
    </>
  );
}

// ─ Paso 2: Cómo se llama ─────────────────────────────────────────
function StepNombre({ p, data, set }) {
  return (
    <>
      <UvEyebrow p={p}>{t("s_nom_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_nom_t")}</UvTitle>
      <UvHint p={p}>{t("s_nom_h")}</UvHint>
      <div style={{ marginTop: 6 }}>
        <UvLabel p={p}>{t("l_nombre")}</UvLabel>
        <UvField p={p} value={data.nombre} onChange={v => set("nombre", v)}
          placeholder={t("ph_nombre")} autoFocus />
      </div>
      <div style={{ marginTop: 6 }}>
        <UvLabel p={p}>{t("l_apodo")}</UvLabel>
        <UvField p={p} value={data.apodo} onChange={v => set("apodo", v)}
          placeholder={t("ph_apodo")} />
        <UvHint p={p}>{t("h_apodo")}</UvHint>
      </div>
    </>
  );
}

// ─ Paso 3: Cómo le hablas (usted / tú / vos) ─────────────────────
// Define la voz de TODA la letra. Es lo que hace que la canción suene
// natural en España, en México o en Argentina sin cambiar nada más.
function StepTratamiento({ p, data, set }) {
  return (
    <>
      <UvEyebrow p={p}>{t("s_trat_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_trat_t")}</UvTitle>
      <UvHint p={p}>{t("s_trat_h")}</UvHint>
      <div style={{ marginTop: 6 }}>
        <UvChips p={p} value={data.tratamiento}
          options={["tu", "usted", "vos"]}
          labels={t("trat_labels")}
          onSelect={v => set("tratamiento", v)} />
      </div>
      <div style={{ marginTop: 10 }}>
        <UvHint p={p}>{t("h_trat_ejemplo")}</UvHint>
      </div>
    </>
  );
}

// ─ Paso 4: Qué le hace especial ──────────────────────────────────
function StepEspecial({ p, data, set }) {
  const toggle = (o) => {
    const cur = data.especial || [];
    set("especial", cur.includes(o) ? cur.filter(x => x !== o) : [...cur, o]);
  };
  return (
    <>
      <UvEyebrow p={p}>{t("s_esp_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_esp_t")}</UvTitle>
      <UvHint p={p}>{t("s_esp_h")}</UvHint>
      <div style={{ marginTop: 6 }}>
        <UvChips p={p} multi selected={data.especial} options={t("esp_opts")}
          onToggle={toggle} allowCustom customPlaceholder={t("ph_esp_custom")} />
      </div>
      <div style={{ marginTop: 6 }}>
        <UvLabel p={p}>{t("l_esp_texto")}</UvLabel>
        <UvField p={p} value={data.especialTexto} onChange={v => set("especialTexto", v)}
          placeholder={t("ph_esp_texto")} textarea />
      </div>
    </>
  );
}

// ─ Paso 5: Recuerdos favoritos ───────────────────────────────────
function StepRecuerdos({ p, data, set }) {
  return (
    <>
      <UvEyebrow p={p}>{t("s_rec_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_rec_t")}</UvTitle>
      <UvHint p={p}>{t("s_rec_h")}</UvHint>
      <div style={{ marginTop: 6 }}>
        <UvField p={p} value={data.recuerdo} onChange={v => set("recuerdo", v)}
          placeholder={t("ph_recuerdo")} textarea tall />
      </div>
    </>
  );
}

// ─ Paso 6: Un mensaje desde el corazón ───────────────────────────
function StepMensaje({ p, data, set }) {
  return (
    <>
      <UvEyebrow p={p}>{t("s_men_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_men_t")}</UvTitle>
      <UvHint p={p}>{t("s_men_h")}</UvHint>
      <div style={{ marginTop: 6 }}>
        <UvField p={p} value={data.mensaje} onChange={v => set("mensaje", v)}
          placeholder={t("ph_mensaje")} textarea tall />
      </div>
    </>
  );
}

// ─ Paso 7: La música ─────────────────────────────────────────────
function StepMusica({ p, data, set }) {
  return (
    <>
      <UvEyebrow p={p}>{t("s_mus_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_mus_t")}</UvTitle>
      <UvHint p={p}>{t("s_mus_h")}</UvHint>

      <div style={{ marginTop: 6 }}>
        <UvLabel p={p}>{t("l_tono")}</UvLabel>
        <UvChips p={p} small value={data.tono} options={t("tono_opts")}
          onSelect={v => set("tono", v)} />
      </div>

      <div style={{ marginTop: 6 }}>
        <UvLabel p={p}>{t("l_genero")}</UvLabel>
        <UvChips p={p} small value={data.genero} options={t("gen_opts")}
          allowCustom customPlaceholder={t("ph_gen_custom")}
          onSelect={v => set("genero", v)} />
      </div>


      <div style={{ marginTop: 6 }}>
        <UvLabel p={p}>{t("l_idioma")}</UvLabel>
        <UvChips p={p} small value={data.idioma} options={t("idioma_opts")}
          onSelect={v => set("idioma", v)} />
      </div>
    </>
  );
}

// ─ Paso 8: Tus datos ─────────────────────────────────────────────
function StepContacto({ p, data, set }) {
  const c = data.cliente || {};
  const setC = (k, v) => set("cliente", { ...c, [k]: v });
  return (
    <>
      <UvEyebrow p={p}>{t("s_con_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_con_t")}</UvTitle>
      <UvHint p={p}>{t("s_con_h")}</UvHint>

      <div style={{ marginTop: 6 }}>
        <UvLabel p={p}>{t("l_departe")}</UvLabel>
        <UvField p={p} value={data.deParte} onChange={v => set("deParte", v)}
          placeholder={t("ph_departe")} />
        <UvHint p={p}>{t("h_departe")}</UvHint>
      </div>

      <div style={{ marginTop: 6 }}>
        <UvLabel p={p}>{t("l_email")}</UvLabel>
        <UvField p={p} value={c.email} onChange={v => setC("email", v)}
          placeholder={t("ph_email")} type="email" inputMode="email" />
        <UvHint p={p}>{t("h_email")}</UvHint>
      </div>

      <div style={{ display: "flex", gap: 10, marginTop: 6 }}>
        <div style={{ flex: 1 }}>
          <UvLabel p={p}>{t("l_tu_nombre")}</UvLabel>
          <UvField p={p} value={c.nombre} onChange={v => setC("nombre", v)}
            placeholder={t("ph_tu_nombre")} />
        </div>
        <div style={{ flex: 1 }}>
          <UvLabel p={p}>{t("l_telefono")}</UvLabel>
          <UvField p={p} value={c.telefono} onChange={v => setC("telefono", v)}
            placeholder={t("ph_telefono")} inputMode="tel" />
        </div>
      </div>
    </>
  );
}

// ─ Paso 8: El cantante de referencia ─────────────────────────────
// El nombre del artista NUNCA se le manda a Suno (lo rechaza por derechos).
// El agente lo traduce a rasgos de voz: timbre, registro, textura, fraseo.
function StepCantante({ p, data, set }) {
  return (
    <>
      <UvEyebrow p={p}>{t("s_can_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_can_t")}</UvTitle>
      <UvHint p={p}>{t("s_can_h")}</UvHint>

      <div style={{ marginTop: 6 }}>
        <UvLabel p={p}>{t("l_artista")}</UvLabel>
        <UvField p={p} value={data.artista} onChange={v => set("artista", v)}
          placeholder={t("ph_artista")} autoFocus />
        <UvHint p={p}>{t("h_artista")}</UvHint>
      </div>

      <div style={{ marginTop: 6 }}>
        <UvLabel p={p}>{t("l_cancion_ref")}</UvLabel>
        <UvField p={p} value={data.cancionRef} onChange={v => set("cancionRef", v)}
          placeholder={t("ph_cancion_ref")} />
        <UvHint p={p}>{t("h_cancion_ref")}</UvHint>
      </div>

      <div style={{ marginTop: 6 }}>
        <UvLabel p={p}>{t("l_voz_tipo")}</UvLabel>
        <UvChips p={p} small value={data.vozTipo} options={t("voz_opts")}
          onSelect={v => set("vozTipo", v)} />
      </div>
    </>
  );
}

const UV_STEP_COMPONENTS = {
  destinatario: StepDestinatario,
  nombre:       StepNombre,
  tratamiento:  StepTratamiento,
  especial:     StepEspecial,
  recuerdos:    StepRecuerdos,
  mensaje:      StepMensaje,
  musica:       StepMusica,
  cantante:     StepCantante,
  contacto:     StepContacto,
};

Object.assign(window, { UvOnboarding, UV_STEP_COMPONENTS });