// Tokens + datos + helpers — Dedícala

const UV_FONTS = {
  // Anton para display/titulares; Space Grotesk para interfaz; Martian Mono
  // para etiquetas y metadatos. Ver brand/dedicala-brand/BRAND.md
  display: '"Anton", "Arial Narrow", sans-serif',
  body: '"Space Grotesk", system-ui, -apple-system, sans-serif',
  mono: '"Martian Mono", ui-monospace, monospace',
};

// Gris oscuro de marca para el logotipo (logo siempre liso, sin recuadro)
const EV_INK = "#F5F5F0"; // hueso — la app va sobre negro vinilo

// Gradiente granulado cálido-serio (arena → oro → terracota → petróleo apagado)
// Paleta provisional heredada — pendiente de sustituir por el branding de Dedícala.
const EV_MESH_BG = "#D9FF3D"; // lima plano — la marca no usa degradados

// PROVISIONAL: paleta heredada. Sustituir por los colores de Dedícala.
const UV_THEMES = {
  // Tema principal — negro vinilo con acento lima ácido.
  // El lima solo aparece en el play, los botones de acción y los fondos de
  // campaña. Nunca en texto largo (BRAND.md §3).
  altima: {
    bg: "#0B0B0C",           // negro vinilo
    surface: "#0B0B0C",      // tarjeta sobre negro, se distingue por el borde
    surface2: "#141416",     // superficie ligeramente elevada
    ink: "#F5F5F0",          // hueso
    inkSoft: "#9A9AA2",      // gris medio — texto secundario
    inkFaint: "#8A8A92",     // gris apagado — metadatos
    line: "#3E3E47",         // borde de tarjeta
    accent: "#D9FF3D",       // lima ácido
    accentDeep: "#C2E62E",
    accentSoft: "rgba(217,255,61,.12)",
    accentInk: "#0B0B0C",    // texto sobre botón lima
    warm: "#D9FF3D",
    clay: "#D9FF3D",
    night: "#2A1F45",        // secundario
    mesh: "#D9FF3D",
  },
  // Variante sobre noche, para escenas íntimas (player, componiendo)
  altimaDark: {
    bg: "#2A1F45",
    surface: "#332750",
    surface2: "#3C2F5C",
    ink: "#F5F5F0",
    inkSoft: "rgba(245,245,240,.62)",
    inkFaint: "rgba(245,245,240,.28)",
    line: "rgba(245,245,240,.12)",
    accent: "#D9FF3D",
    accentDeep: "#C2E62E",
    accentSoft: "rgba(217,255,61,.14)",
    accentInk: "#0B0B0C",
    warm: "#D9FF3D",
  },
};

// El tono elegido por el usuario, traducido a descriptores que Suno entiende.
const UV_TONO_EN = {
  "Romántica":  "romantic, tender, warm",
  "Divertida":  "playful, humorous, upbeat",
  "Emotiva":    "heartfelt, moving, sincere",
  "De fiesta":  "celebratory, energetic, party",
  "Nostálgica": "nostalgic, bittersweet, warm",
  "Agradecida": "grateful, uplifting, sincere",
};

// Ocasiones que se pueden preseleccionar desde la URL (?ocasion=boda).
// Una sola app, una landing por campaña. Añadir una ocasión nueva es
// añadir una línea aquí — no hay que tocar el producto.
const UV_OCASIONES = {
  boda:          "Nuestra boda",
  aniversario:   "Nuestro aniversario",
  cumpleanos:    "Su cumpleaños",
  "san-valentin":"San Valentín",
  navidad:       "Navidad",
  "dia-madre":   "El Día de la Madre",
  "dia-padre":   "El Día del Padre",
  jubilacion:    "Su jubilación",
  graduacion:    "Su graduación",
  despedida:     "Su despedida de soltero/a",
  gracias:       "Solo para darle las gracias",
  perdon:        "Para pedirle perdón",
  pedida:        "Una pedida de mano",
  bebe:          "La llegada de un bebé",
};

const UV_STEPS = [
  { id: "destinatario", label: "Para quién",   eyebrow: "Empecemos" },
  { id: "nombre",       label: "Su nombre",    eyebrow: "Cómo se llama" },
  { id: "tratamiento",  label: "El trato",     eyebrow: "Cómo le hablas" },
  { id: "especial",     label: "Qué le hace especial", eyebrow: "Su esencia" },
  { id: "recuerdos",    label: "Recuerdos",    eyebrow: "Vuestros momentos" },
  { id: "mensaje",      label: "Tu mensaje",   eyebrow: "Desde el corazón" },
  { id: "musica",       label: "La música",    eyebrow: "Cómo sonará" },
  { id: "cantante",     label: "El cantante",  eyebrow: "A quién quiere escuchar" },
  { id: "contacto",     label: "Tus datos",    eyebrow: "Para enviártela" },
];

const UV_EMPTY = {
  // A quién va dedicada
  destinatario: "", nombre: "", apodo: "",
  // usted | tu | vos  → decide la voz de toda la letra
  tratamiento: "tu",
  // Qué le hace especial
  especial: [], especialTexto: "",
  recuerdo: "",
  mensaje: "",
  // Música
  genero: "", tono: "", idioma: "Español",
  // Cantante de referencia: el agente extrae los rasgos de su voz
  artista: "", cancionRef: "", vozTipo: "",
  tempo: "", duracion: "2:30",
  // Ocasión: se rellena sola desde ?ocasion= (marketing), editable
  ocasion: "",
  // Quién la regala
  deParte: "",
  cliente: { nombre: "", email: "", telefono: "" },
};

const UV_SAMPLE = {
  destinatario: "mi marido",
  nombre: "Javier Ruiz",
  apodo: "Javi",
  tratamiento: "tu",
  especial: ["su humor","su paciencia","cómo cuida de todos","lo cabezota que es"],
  especialTexto: "Siempre dice «venga, que no pasa nada» cuando algo sale mal, y al final tiene razón.",
  recuerdo: "El viaje a Cádiz del 2019, cuando se nos pinchó la rueda en mitad de la nada y acabamos cenando en un chiringuito muertos de risa.",
  mensaje: "Que gracias por aguantarme todos estos años y que no me imagino la vida sin él.",
  tono: "Emotiva",
  genero: "Balada",
  artista: "Alejandro Sanz",
  cancionRef: "Corazón partío",
  vozTipo: "Voz de hombre",
  idioma: "Español",
  tempo: "Moderado",
  duracion: "2:30",
  ocasion: "Nuestro aniversario",
  deParte: "Silvia",
  cliente: { nombre: "Silvia", email: "silvia@ejemplo.com", telefono: "600 123 456" },
};

// Letra BORRADOR para la previsualización / respaldo (si Claude no corre).
// NO es la letra final: es un esqueleto coherente que inserta las palabras
// del cliente en posiciones seguras (manteniendo rima asonante y sentido).
// La letra definitiva y única la escribe Claude al componer (api/_lib/claude.js).
function UV_generateLyrics(p, genero) {
  const cap = (s) => s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
  const clean = (s) => (s || "").toString().trim();

  const nombre   = clean(p.apodo) || clean(p.nombre?.split(" ")[0]) || "mi amor";
  const lugar    = clean(p.lugares?.[0]);
  const hobby    = clean(p.especial?.[0]).toLowerCase().replace(/^(el|la|los|las|su|sus) /, "");
  const frase    = clean(p.mensaje).split(/[.!?\n]/)[0].replace(/^[«"]|[»"]$/g, "");
  const relacion = clean(p.destinatario).toLowerCase().replace(/^mis? /, "");

  const tones = {
    "Balada":     { titulo: "Lo que no te digo bastante" },
    "Pop":        { titulo: "Contigo se enciende la casa" },
    "Bolero":     { titulo: "La suerte de encontrarte" },
    "Rumba":      { titulo: "Que no se acabe la fiesta" },
    "Flamenco":   { titulo: "Como te lo diría cantando" },
    "Reggaetón":  { titulo: "Tú y yo y lo que venga" },
    "Bachata":    { titulo: "Bailando en la cocina" },
    "Country":    { titulo: "El camino de vuelta a ti" },
    "Rock":       { titulo: "Nadie aguanta lo que tú" },
    "Copla":      { titulo: "Te lo canto de frente" },
  };
  const titulo = tones[genero]?.titulo || "Lo que no te digo bastante";

  // — Estrofa 1: el recuerdo cotidiano (inserta el lugar con naturalidad) —
  const e1 = [
    "Vuelve el domingo y te espero en la mesa,",
    lugar ? `aún suena tu paso en ${lugar}, como siempre,`
          : "aún suena tu paso en la casa, como siempre,",
    "se enciende la tarde, la misma promesa:",
    "que nadie se marcha del todo si quiere.",
  ];

  // — Estribillo: el corazón (nombre + relación + frase real, si la hay) —
  const estr = [
    relacion ? `${cap(relacion)} ${nombre}, te llevo conmigo,`
             : `${cap(nombre)}, mi ${nombre}, te llevo conmigo,`,
    "en cada mañana, en cada latido.",
    frase ? `Y si digo «${frase}», vuelves a mi lado,`
          : "Y aunque no te vea, te siento a mi lado,",
    "y el mundo me cabe en lo que me has dado.",
  ];

  // — Estrofa 2: sus cosas (inserta la afición sin forzarla) —
  const e2 = [
    hobby ? `Te asomas en ${hobby}, en la copla, en la radio,`
          : "Te asomas en todo, en la copla, en la radio,",
    "en la taza de siempre, en el sol de la siesta;",
    "me dejaste tu calma, tu modo despacio,",
    "y el gesto de hacer de la vida una fiesta.",
  ];

  // — Puente: el giro emocional —
  const puente = [
    "Y si un día la pena me puede,",
    "me asomo a tus cosas y vuelvo a tenerte.",
  ];

  // — Final: la imagen que queda —
  const fin = [
    "No te has ido del todo, te quedas en casa:",
    "en el café, en la puerta, en la mesa.",
    `mientras siga tu nombre, ${nombre}, encendido,`,
    "tu silla a la mesa jamás estará quieta.",
  ];

  return {
    titulo,
    estrofas: [
      { tipo: "Estrofa",    texto: e1 },
      { tipo: "Estribillo", texto: estr },
      { tipo: "Estrofa",    texto: e2 },
      { tipo: "Estribillo", texto: estr },
      { tipo: "Puente",     texto: puente },
      { tipo: "Final",      texto: fin },
    ],
  };
}

// QR determinista
function UvQR({ size = 140, fg = "#0B0B0C", bg = "#F5F5F0", seed = 7 }) {
  const cells = 25, s = size / cells;
  const mod = (x, y) => {
    const n = (x * 73856093) ^ (y * 19349663) ^ (seed * 83492791);
    return (n >>> 0) % 7;
  };
  const rects = [];
  for (let y = 0; y < cells; y++) for (let x = 0; x < cells; x++) {
    const corner = (x < 7 && y < 7) || (x >= cells - 7 && y < 7) || (x < 7 && y >= cells - 7);
    if (corner) continue;
    if (mod(x, y) < 3)
      rects.push(<rect key={x+"-"+y} x={x*s} y={y*s} width={s} height={s} fill={fg} />);
  }
  const corner = (cx, cy) => (
    <g key={`c-${cx}-${cy}`}>
      <rect x={cx*s} y={cy*s} width={7*s} height={7*s} fill={fg} />
      <rect x={(cx+1)*s} y={(cy+1)*s} width={5*s} height={5*s} fill={bg} />
      <rect x={(cx+2)*s} y={(cy+2)*s} width={3*s} height={3*s} fill={fg} />
    </g>
  );
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: "block" }}>
      <rect width={size} height={size} fill={bg} />
      {rects}{corner(0,0)}{corner(cells-7,0)}{corner(0,cells-7)}
    </svg>
  );
}

// PROVISIONAL: isotipo heredado. Sustituir por el de Dedícala.
// Se renderiza desde el PNG de marca recoloreado; el contexto elige la variante.
// ── Logotipo Tilde Play ───────────────────────────────────────
// La tilde de la í ES el botón de play. Geometría en unidades `em`
// (BRAND.md §2), así escala sin reajustes. NO recolocar el triángulo.
const DC_TRIANGLE = "polygon(0 0, 100% 50%, 0 100%)";
const DC = { lime: "#D9FF3D", black: "#0B0B0C", bone: "#F5F5F0" };
const DC_I = "\u0131"; // i sin punto — el punto lo sustituye el play

// Isotipo: la í suelta con su play. Para avatar, favicon y usos pequeños.
function DedicalaMark({ color, size = 26, style, variant }) {
  // Sobre fondo lima/hueso el glifo va negro; en el resto, hueso con play lima.
  const sobreClaro = variant === "on-lime" || variant === "on-bone";
  const glifo = sobreClaro ? DC.black : (color || DC.bone);
  const play  = sobreClaro ? DC.black : DC.lime;
  return (
    <span aria-label="Dedícala" role="img" style={{
      position: "relative", display: "inline-block", flex: "none",
      fontFamily: UV_FONTS.display, fontSize: size, lineHeight: 0.8,
      color: glifo, marginTop: "0.5em", ...style,
    }}>
      {DC_I}
      <span style={{
        position: "absolute", left: "0.185em", top: "-0.34em",
        transform: "translateX(-50%)", width: "0.36em", height: "0.31em",
        background: play, clipPath: DC_TRIANGLE,
      }} />
    </span>
  );
}

// Logotipo completo: ded + ı(play) + cala.
function DedicalaLogo({ color, size = 22, withTagline = false, tagColor, markOnly = false, variant }) {
  if (markOnly) return <DedicalaMark size={size * 1.4} variant={variant} color={color} />;
  const sobreClaro = variant === "on-lime" || variant === "on-bone";
  const texto = sobreClaro ? DC.black : (color || DC.bone);
  const play  = sobreClaro ? DC.black : DC.lime;
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "flex-start", lineHeight: 1 }}>
      <span aria-label="Dedícala" role="img" style={{
        display: "inline-flex", alignItems: "flex-end",
        fontFamily: UV_FONTS.display, fontSize: size * 2.1, lineHeight: 0.8,
        letterSpacing: "-0.02em", textTransform: "lowercase", color: texto,
      }}>
        <span>ded</span>
        <span style={{ position: "relative", letterSpacing: 0 }}>
          {DC_I}
          <span style={{
            position: "absolute", left: "0.223em", top: "-0.282em",
            transform: "translateX(-50%)", width: "0.366em", height: "0.315em",
            background: play, clipPath: DC_TRIANGLE,
          }} />
        </span>
        <span>cala</span>
      </span>
      {withTagline && (
        <div style={{
          fontFamily: UV_FONTS.mono, fontSize: Math.max(8, size * 0.42),
          color: tagColor || "#8A8A92", fontWeight: 400,
          marginTop: size * 0.5, letterSpacing: ".24em", textTransform: "uppercase",
        }}>Dile lo que nunca sabes decir</div>
      )}
    </div>
  );
}
const AltimaLogo = DedicalaLogo;

// Precio del producto (configurable). El backend usa STRIPE_PRICE_ID o este importe.
const UV_PRICE = { amount: 2900, currency: "eur", display: "29 €", displayFull: "29,00 €" };

Object.assign(window, { UV_FONTS, EV_INK, EV_MESH_BG, UV_THEMES, UV_STEPS, UV_PRICE, UV_EMPTY, UV_SAMPLE, UV_OCASIONES, UV_TONO_EN, UV_generateLyrics, UvQR, AltimaLogo, DedicalaLogo, DedicalaMark });