// 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={{
                    padding: "6px 12px", borderRadius: 999, cursor: "pointer",
                    border: `1px solid ${active ? p.accent : p.inkFaint}`,
                    background: active ? p.accent : "rgba(255,255,255,.42)",
                    color: active ? "#fff" : 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.0, letterSpacing: "-.03em",
            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: "#fff", lineHeight: .92, letterSpacing: "-.02em",
                textShadow: "0 2px 30px rgba(60,30,15,.25)",
              }}>+1.200</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: "#fff", lineHeight: 1.25, textShadow: "0 1px 14px rgba(60,30,15,.3)",
                  whiteSpace: "pre-line",
                }}>{t("onb_stat")}</div>
                <span style={{
                  width: 38, height: 38, borderRadius: "50%", flex: "none",
                  background: "rgba(255,255,255,.92)",
                  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.ink, color: "#fff",
          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="#fff"
               strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M7 17 17 7M7 7h10v10"/>
          </svg>
        </button>
      </div>
    </div>
  );
}

// ─ Paso: Quién ──────────────────────────────────────────────────
function StepQuien({ p, data, set }) {
  return (
    <>
      <UvEyebrow p={p}>{t("s_quien_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_quien_t")}</UvTitle>
      <UvHint p={p}>{t("s_quien_h")}</UvHint>
      <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 6 }}>
        <div>
          <UvLabel p={p}>{t("l_nombre")}</UvLabel>
          <UvField p={p} value={data.nombre} onChange={v => set("nombre", v)}
            placeholder={t("ph_ex_nombre")} />
        </div>
        <div>
          <UvLabel p={p}>{t("l_apodo")}</UvLabel>
          <UvField p={p} value={data.apodo} onChange={v => set("apodo", v)}
            placeholder={t("ph_ex_apodo")} />
        </div>
        <div style={{ display: "flex", gap: 14 }}>
          <div style={{ flex: 1 }}>
            <UvLabel p={p}>{t("l_nacio")}</UvLabel>
            <UvField p={p} value={data.nacido} onChange={v => set("nacido", v)}
              placeholder="1947" compact />
          </div>
          <div style={{ flex: 1 }}>
            <UvLabel p={p}>{t("l_se_fue")}</UvLabel>
            <UvField p={p} value={data.fallecido} onChange={v => set("fallecido", v)}
              placeholder="2025" compact />
          </div>
        </div>
      </div>
    </>
  );
}

// ─ Relación ──────────────────────────────────────────────────
function StepRelacion({ p, data, set }) {
  return (
    <>
      <UvEyebrow p={p}>{t("s_rel_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_rel_t")}</UvTitle>
      <UvHint p={p}>{t("s_rel_h")}</UvHint>
      <div style={{ marginTop: 6 }}>
        <UvChips p={p} value={data.relacion} allowCustom customPlaceholder={t("ph_rel_custom")}
          options={t("rel_opts")}
          onSelect={v => set("relacion", v)} />
      </div>
      <div style={{ marginTop: 6 }}>
        <UvLabel p={p}>{t("l_significaba")}</UvLabel>
        <UvField p={p} value={data.significado} onChange={v => set("significado", v)}
          placeholder={t("ph_significaba")} textarea />
      </div>
    </>
  );
}

// ─ Carácter ──────────────────────────────────────────────────
const CHAR_OPTS = ["cariñoso/a","paciente","de risa fácil","testarudo/a","valiente","discreto/a","curioso/a","generoso/a","trabajador/a","soñador/a","observador/a","divertido/a","tranquilo/a","protector/a"];
function StepCaracter({ p, data, set }) {
  const toggle = (o) => {
    const cur = data.personalidad || [];
    set("personalidad", cur.includes(o) ? cur.filter(x => x !== o) : [...cur, o]);
  };
  return (
    <>
      <UvEyebrow p={p}>{t("s_car_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_car_t")}</UvTitle>
      <UvHint p={p}>{t("s_car_h")}</UvHint>
      <div style={{ marginTop: 6 }}>
        <UvChips p={p} multi selected={data.personalidad} options={t("char_opts")}
          onToggle={toggle} allowCustom customPlaceholder={t("ph_char_custom")} />
      </div>
    </>
  );
}

// ─ Hobbies ──────────────────────────────────────────────────
const HOBBY_OPTS = ["el huerto","coser","parchís","bailar","leer","cocinar","la pesca","su perro","el fútbol","la música","viajar","pintar","el cine","la familia"];
function StepHobbies({ p, data, set }) {
  const toggle = (o) => {
    const cur = data.hobbies || [];
    set("hobbies", cur.includes(o) ? cur.filter(x => x !== o) : [...cur, o]);
  };
  return (
    <>
      <UvEyebrow p={p}>{t("s_hob_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_hob_t")}</UvTitle>
      <UvHint p={p}>{t("s_hob_h")}</UvHint>
      <div style={{ marginTop: 6 }}>
        <UvChips p={p} multi selected={data.hobbies} options={t("hob_opts")}
          onToggle={toggle} allowCustom customPlaceholder={t("ph_hob_custom")} />
      </div>
    </>
  );
}

// ─ Recuerdo ──────────────────────────────────────────────────
function StepRecuerdo({ 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>
    </>
  );
}

// ─ Frases ──────────────────────────────────────────────────
function StepFrases({ p, data, set }) {
  const setIdx = (i, v) => {
    const cur = [...(data.frases || [])];
    cur[i] = v;
    set("frases", cur);
  };
  const add = () => set("frases", [...(data.frases || []), ""]);
  return (
    <>
      <UvEyebrow p={p}>{t("s_fra_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_fra_t")}</UvTitle>
      <UvHint p={p}>{t("s_fra_h")}</UvHint>
      <div style={{ marginTop: 6, display: "flex", flexDirection: "column", gap: 10 }}>
        {(data.frases || [""]).map((f, i) => (
          <UvField key={i} p={p} value={f} onChange={v => setIdx(i, v)}
            placeholder={t("ph_frases")[i] || t("chip_custom_ph")} />
        ))}
        <UvTextBtn p={p} onClick={add}>{t("add_frase")}</UvTextBtn>
      </div>
    </>
  );
}

// ─ Lugares ──────────────────────────────────────────────────
const LUGAR_OPTS = ["su pueblo","la cocina","el huerto","la playa","el campo","la iglesia","el café","el salón","el balcón","su silla"];
function StepLugares({ p, data, set }) {
  const toggle = (o) => {
    const cur = data.lugares || [];
    set("lugares", cur.includes(o) ? cur.filter(x => x !== o) : [...cur, o]);
  };
  return (
    <>
      <UvEyebrow p={p}>{t("s_lug_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_lug_t")}</UvTitle>
      <UvHint p={p}>{t("s_lug_h")}</UvHint>
      <div style={{ marginTop: 6 }}>
        <UvChips p={p} multi selected={data.lugares} options={t("lug_opts")}
          onToggle={toggle} allowCustom customPlaceholder={t("ph_lug_custom")} />
      </div>
    </>
  );
}

// ─ Gente ──────────────────────────────────────────────────
function StepGente({ p, data, set }) {
  const setIdx = (i, v) => {
    const cur = [...(data.personas || [])];
    cur[i] = v;
    set("personas", cur);
  };
  const add = () => set("personas", [...(data.personas || []), ""]);
  return (
    <>
      <UvEyebrow p={p}>{t("s_gen_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_gen_t")}</UvTitle>
      <UvHint p={p}>{t("s_gen_h")}</UvHint>
      <div style={{ marginTop: 6, display: "flex", flexDirection: "column", gap: 10 }}>
        {(data.personas || ["","",""]).map((f, i) => (
          <UvField key={i} p={p} value={f} onChange={v => setIdx(i, v)}
            placeholder={t("ph_personas")[i] || t("chip_custom_ph")} />
        ))}
        <UvTextBtn p={p} onClick={add}>{t("add_otra")}</UvTextBtn>
      </div>
    </>
  );
}

// ─ 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_genero")}</UvLabel>
        <div style={{ height: 8 }} />
        <UvChips p={p} value={data.genero} allowCustom customPlaceholder={t("chip_custom_ph")}
          options={t("gen_opts")}
          onSelect={v => set("genero", v)} />
      </div>
      <div>
        <UvLabel p={p}>{t("l_artista")}</UvLabel>
        <UvField p={p} value={data.artista} onChange={v => set("artista", v)}
          placeholder={t("ph_artista")} />
      </div>
      <div style={{ display: "flex", gap: 14 }}>
        <div style={{ flex: 1 }}>
          <UvLabel p={p}>{t("l_tempo")}</UvLabel>
          <div style={{ height: 6 }} />
          <UvChips p={p} value={data.tempo} small
            options={t("tempo_opts")}
            onSelect={v => set("tempo", v)} />
        </div>
        <div style={{ flex: 1 }}>
          <UvLabel p={p}>{t("l_emocion")}</UvLabel>
          <div style={{ height: 6 }} />
          <UvChips p={p} value={data.emocion} small allowCustom customPlaceholder={t("chip_custom_ph")}
            options={t("emo_opts")}
            onSelect={v => set("emocion", v)} />
        </div>
      </div>
      <div>
        <UvLabel p={p}>{t("l_instr")}</UvLabel>
        <div style={{ height: 6 }} />
        <UvChips p={p} value={data.instrumento} small allowCustom customPlaceholder={t("chip_custom_ph")}
          options={t("instr_opts")}
          onSelect={v => set("instrumento", v)} />
      </div>
    </>
  );
}

// ─ Ocasión ──────────────────────────────────────────────────
function StepOcasion({ p, data, set }) {
  return (
    <>
      <UvEyebrow p={p}>{t("s_oca_eb")}</UvEyebrow>
      <UvTitle p={p}>{t("s_oca_t")}</UvTitle>
      <UvHint p={p}>{t("s_oca_h")}</UvHint>
      <div style={{ marginTop: 6 }}>
        <UvChips p={p} value={data.ocasion} allowCustom customPlaceholder={t("chip_custom_ph")}
          options={t("oca_opts")}
          onSelect={v => { set("ocasion", v); const i = t("oca_opts").indexOf(v); const d = ["3:00","3:00","2:30","2:30","2:30"][i]; if (d) set("duracion", d); }} />
      </div>
      <div>
        <UvLabel p={p}>{t("l_duracion")}</UvLabel>
        <div style={{ height: 6 }} />
        <UvChips p={p} value={data.duracion} small
          options={["1:30","2:00","2:30","3:00","3:30"]}
          onSelect={v => set("duracion", v)} />
      </div>
    </>
  );
}

// ─ Contacto del cliente ──────────────────────────────────────────
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={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 6 }}>
        <div>
          <UvLabel p={p}>{t("l_tu_nombre")}</UvLabel>
          <UvField p={p} value={c.nombre} onChange={v => setC("nombre", v)}
            placeholder={t("ph_ex_tu_nombre")} />
        </div>
        <div>
          <UvLabel p={p}>{t("l_email")}</UvLabel>
          <UvField p={p} value={c.email} onChange={v => setC("email", v)}
            placeholder={t("ph_ex_email")} type="email" inputMode="email" />
        </div>
        <div>
          <UvLabel p={p}>{t("l_telefono")}</UvLabel>
          <UvField p={p} value={c.telefono} onChange={v => setC("telefono", v)}
            placeholder={t("ph_ex_telefono")} type="tel" inputMode="tel" />
        </div>
        <div>
          <UvLabel p={p}>{t("l_poblacion")}</UvLabel>
          <UvField p={p} value={c.lugar} onChange={v => setC("lugar", v)}
            placeholder={t("ph_ex_poblacion")} />
        </div>
      </div>
    </>
  );
}

const UV_STEP_COMPONENTS = {
  quien: StepQuien, relacion: StepRelacion, caracter: StepCaracter,
  hobbies: StepHobbies, recuerdos: StepRecuerdo, frases: StepFrases,
  lugares: StepLugares, gente: StepGente, musica: StepMusica, ocasion: StepOcasion,
  contacto: StepContacto,
};

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