const ANIMALES=[["perro","🐶"],["gato","🐱"],["vaca","🐮"],["cerdo","🐷"],["pato","🦆"],["oveja","🐑"],["caballo","🐴"],["conejo","🐰"],["rana","🐸"],["pez","🐟"],["león","🦁"],["oso","🐻"],["mono","🐵"],["pollito","🐤"],["ratón","🐭"],["tortuga","🐢"]];
const COLORES=[["rojo","#e53935"],["azul","#1e63d6"],["amarillo","#fdd835"],["verde","#2e9e44"],["naranja","#fb8c00"],["morado","#7b3fb0"],["rosa","#f48fb1"],["marrón","#7a4a26"],["negro","#1a1a1a"],["blanco","#ffffff"],["gris","#9e9e9e"]];
const PALABRAS=[["sol","☀️"],["luna","🌙"],["casa","🏠"],["pato","🦆"],["mano","✋"],["pelota","⚽"],["tomate","🍅"],["moto","🛵"],["foca","🦭"],["uva","🍇"],["pera","🍐"],["piña","🍍"],["nube","☁️"],["flor","🌸"],["árbol","🌳"],["pan","🍞"],["queso","🧀"],["leche","🥛"],["mesa","🪑"],["llave","🔑"],["rosa","🌹"],["dedo","☝️"],["pie","🦶"],["gato","🐱"]];
const COSAS=["🍎","⭐","🐟","🌸","🚗","🎈","🍓","🐞","⚽","🦆"];

const GAMES=[
  {id:"animales",s:"lengua",t:1,pic:"🐮",name:"Une los animales",area:"Vocabulario y lectura",type:"match",help:"Toca un animal y después su nombre."},
  {id:"colores",s:"lengua",t:1,pic:"🎨",name:"Los colores",area:"Vocabulario y lectura",type:"match",help:"Toca un color y después su nombre."},
  {id:"silabas",s:"lengua",t:1,pic:"👏",name:"Forma la palabra",area:"Conciencia silábica",type:"silabas",help:"Toca las sílabas en orden para formar la palabra."},
  {id:"lee",s:"lengua",t:2,pic:"📖",name:"Lee y elige",area:"Lectura de palabras",type:"quiz",help:"Lee la palabra y toca su dibujo."},
  {id:"cuantos",s:"mates",t:1,pic:"🔢",name:"¿Cuántos hay?",area:"Contar hasta 10",type:"quiz",help:"Cuenta los dibujos y toca el número."},
  {id:"sumas",s:"mates",t:1,pic:"➕",name:"Sumas hasta 10",area:"Sentido numérico",type:"quiz",help:"Suma las manzanas y toca el resultado."},
  {id:"sentidos",s:"naturales",t:1,pic:"👂",name:"Los cinco sentidos",area:"El cuerpo humano",type:"quiz",help:"¿Qué sentido usamos?"},
  {id:"english",s:"english",t:0,pic:"🌈",name:"Colours and numbers",area:"Vocabulary",type:"quiz",help:"Look and choose the word."}
];
const SENTIDOS=[["Oler una flor","🌸","olfato"],["Oler el pan recién hecho","🍞","olfato"],["Escuchar música","🎵","oído"],["Oír el timbre","🔔","oído"],["Ver el arcoíris","🌈","vista"],["Mirar las estrellas","⭐","vista"],["Probar un helado","🍦","gusto"],["Saborear un limón","🍋","gusto"],["Acariciar a un gato","🐱","tacto"],["Notar que el agua está fría","💧","tacto"]];
const SENS={vista:"👀 vista",oído:"👂 oído",olfato:"👃 olfato",gusto:"👅 gusto",tacto:"✋ tacto"};
const EN_COL=[["red","#e53935"],["blue","#1e63d6"],["yellow","#fdd835"],["green","#2e9e44"],["orange","#fb8c00"],["pink","#f48fb1"],["black","#1a1a1a"],["white","#ffffff"],["purple","#7b3fb0"],["brown","#7a4a26"]];
const EN_NUM=["one","two","three","four","five","six","seven","eight","nine","ten"];
const SILABAS=[["pa-to","🦆"],["ga-to","🐱"],["lu-na","🌙"],["ca-sa","🏠"],["me-sa","🪑"],["pe-lo-ta","⚽"],["to-ma-te","🍅"],["mo-to","🛵"],["fo-ca","🦭"],["pe-ra","🍐"],["pi-ña","🍍"],["nu-be","☁️"],["ma-no","✋"],["le-che","🥛"],["que-so","🧀"],["ra-na","🐸"],["va-ca","🐮"],["o-so","🐻"],["co-ne-jo","🐰"],["pe-rro","🐶"],["ca-ba-llo","🐴"],["ra-tón","🐭"],["tor-tu-ga","🐢"],["pa-lo-ma","🕊️"],["ja-món","🍖"],["za-pa-to","👞"]];
const RELLENO=["mi","su","lo","ta","bo","fe","di","ne","pu","ri"];

const $=s=>document.querySelector(s);
const board=$("#board");
const rand=(a,b)=>a+Math.floor(Math.random()*(b-a+1));
const shuffle=a=>{a=[...a];for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]]}return a};
const esc=s=>String(s).replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));

let current="animales", soundOn=true, actx=null;
function tone(ok){
  if(!soundOn) return;
  try{
    actx=actx||new (window.AudioContext||window.webkitAudioContext)();
    const notes=ok?[660,880]:[220];
    notes.forEach((f,i)=>{const o=actx.createOscillator(),g=actx.createGain();o.type="sine";o.frequency.value=f;
      const t=actx.currentTime+i*.11;g.gain.setValueAtTime(.0001,t);g.gain.exponentialRampToValueAtTime(.18,t+.02);g.gain.exponentialRampToValueAtTime(.0001,t+.25);
      o.connect(g).connect(actx.destination);o.start(t);o.stop(t+.27)});
  }catch(e){}
}
function shake(el){el.classList.remove("shake");void el.offsetWidth;el.classList.add("shake")}

const SUBJ=[{id:"lengua",name:"Lengua"},{id:"mates",name:"Matemáticas"},{id:"naturales",name:"Ciencias de la Naturaleza"},{id:"english",name:"English"}];
const TRIM=["Todo el curso","1.er trimestre","2.º trimestre","3.er trimestre"]; let trim=0;
function renderNav(){
  $("#trims").innerHTML=TRIM.map((t,k)=>`<button data-t="${k}" aria-pressed="${k===trim}">${t}</button>`).join("");
  document.querySelectorAll("#trims button").forEach(b=>b.onclick=()=>{trim=+b.dataset.t;renderNav()});
  $("#games").innerHTML=SUBJ.map(s=>{const gs=GAMES.filter(g=>g.s===s.id&&(!trim||g.t===0||g.t===trim)).sort((a,b)=>a.t-b.t);
    return `<div class="subject" style="--c:var(--${s.id})"><h3>${s.name}</h3>${gs.length?gs.map(g=>`<button class="game" data-id="${g.id}" aria-pressed="${g.id===current}"><span class="pic" aria-hidden="true">${g.pic}</span><span><strong>${g.name}</strong><small>${g.area}</small><em class="chip">${g.t?["","1.er trim.","2.º trim.","3.er trim."][g.t]:"Todo el curso"}</em></span></button>`).join(""):`<p class="empty">Nada este trimestre</p>`}</div>`}).join("");
  document.querySelectorAll(".game").forEach(b=>b.onclick=()=>{current=b.dataset.id;renderNav();start()});
}
function head(g,extra=""){return `<div class="board-head"><div><h2>${g.name}</h2><p>${g.help}</p></div>${extra}</div>`}
function start(){const g=GAMES.find(x=>x.id===current);g.type==="match"?playMatch(g):g.type==="silabas"?playSil(g):playQuiz(g)}

/* ---------- Sílabas ---------- */
function playSil(g){
  const R=6, words=shuffle(SILABAS).slice(0,R); let i=0, score=0; const res=[];
  const next=()=>{
    if(i===R) return winScreen(g,score,R);
    const [w,e]=words[i], parts=w.split("-");
    const extra=shuffle(RELLENO.filter(s=>!parts.includes(s)))[0];
    const pool=shuffle([...parts,extra]);
    const dots=Array.from({length:R},(_,k)=>`<span class="dot ${k<i?(res[k]?"on":"miss"):""} ${k===i?"now":""}"></span>`).join("");
    board.innerHTML=head(g,`<div class="dots" aria-label="Palabra ${i+1} de ${R}">${dots}</div>`)+
      `<div class="q"><div class="scene" style="font-size:clamp(70px,11vw,120px)">${e}</div>
       <div class="slots">${parts.map(()=>'<span class="slot"></span>').join("")}</div>
       <div class="opts">${pool.map((s,k)=>`<button class="opt syl" data-v="${esc(s)}" id="syl-${k}"><span class="word">${esc(s)}</span></button>`).join("")}</div>
       <p class="hint" id="hint">${parts.length} sílabas: ¡dad ${parts.length} palmadas!</p></div>`;
    const slots=[...board.querySelectorAll(".slot")]; let pos=0, tried=false;
    board.querySelectorAll(".syl").forEach(b=>b.onclick=()=>{
      if(b.disabled) return;
      if(b.dataset.v===parts[pos]){
        slots[pos].innerHTML=`<span class="word">${esc(parts[pos])}</span>`; slots[pos].classList.add("filled");
        b.disabled=true; b.classList.add("used"); pos++; tone(true);
        if(pos===parts.length){
          res[i]=!tried; if(!tried) score++;
          board.querySelectorAll(".syl").forEach(x=>x.disabled=true);
          $("#hint").innerHTML=`¡<span class="word" style="font-size:1.3em">${esc(parts.join(""))}</span>!`;
          i++; setTimeout(next,1300);
        }
      }else{ tried=true; tone(false); shake(b); $("#hint").textContent="Esa no va ahora. ¿Cómo empieza?"; }
    });
  };
  next();
}

function winScreen(g,score,total){
  const stars="⭐".repeat(Math.max(1,Math.round(score/total*5)));
  const msg=score===total?"¡Pleno! Lo habéis hecho genial.":score>=total*0.6?"¡Muy bien! Casi todo perfecto.":"¡Buen trabajo! Probad otra ronda.";
  board.innerHTML=head(g)+`<div class="win"><div class="stars" aria-label="${stars.length} estrellas">${stars}</div>
    <h3>${score} de ${total}</h3><p>${msg}</p><button class="primary" id="again">Otra ronda</button></div>`;
  $("#again").onclick=start;
}

/* ---------- Emparejar ---------- */
function playMatch(g){
  const pool=g.id==="animales"?ANIMALES:COLORES;
  const set=shuffle(pool).slice(0,5);
  const left=set, right=shuffle(set);
  const pic=([w,v])=>g.id==="animales"?`<span class="emo" aria-label="${esc(w)}">${v}</span>`:`<span class="swatch" style="background:${v}" aria-label="color ${esc(w)}"></span>`;
  board.innerHTML=head(g,`<div class="dots">${set.map(()=>'<span class="dot"></span>').join("")}</div>`)+
    `<div class="match"><div class="col">${left.map(p=>`<button class="tile" data-side="l" data-k="${esc(p[0])}">${pic(p)}</button>`).join("")}</div>
     <div class="col">${right.map(p=>`<button class="tile" data-side="r" data-k="${esc(p[0])}"><span class="word">${esc(p[0])}</span></button>`).join("")}</div></div>
     <p class="hint" id="hint"></p>`;
  let sel=null, done=0, fails=0;
  const dots=[...board.querySelectorAll(".dot")];
  board.querySelectorAll(".tile").forEach(t=>t.onclick=()=>{
    if(t.classList.contains("done")) return;
    if(!sel||sel.dataset.side===t.dataset.side){ if(sel) sel.classList.remove("sel"); sel=t; t.classList.add("sel"); $("#hint").textContent=""; return; }
    const a=sel; sel=null; a.classList.remove("sel");
    if(a.dataset.k===t.dataset.k){
      a.classList.add("done"); t.classList.add("done"); dots[done++].classList.add("on"); tone(true);
      $("#hint").textContent=["¡Muy bien!","¡Genial!","¡Eso es!","¡Fenomenal!"][rand(0,3)];
      if(done===set.length) setTimeout(()=>winScreen(g,Math.max(set.length-fails,1),set.length),700);
    }else{ fails++; tone(false); shake(a); shake(t); $("#hint").textContent="Casi. Probad otra vez."; }
  });
}

/* ---------- Preguntas ---------- */
const ROUNDS=8;
function makeQ(id){
  if(id==="sentidos"){
    const [t,e,k]=SENTIDOS[rand(0,SENTIDOS.length-1)];
    const opts=shuffle([SENS[k],...shuffle(Object.keys(SENS).filter(x=>x!==k)).slice(0,2).map(x=>SENS[x])]);
    return {scene:`<div class="scene">${e}</div><p class="word" style="margin:0;font-size:clamp(28px,4.4vw,46px)">${esc(t)}</p>`,answer:SENS[k],opts,small:true};
  }
  if(id==="english"){
    if(Math.random()<.5){const [w,c]=EN_COL[rand(0,EN_COL.length-1)];
      return {scene:`<span class="big-swatch" style="background:${c}" role="img" aria-label="colour"></span><p class="prompt" style="font-size:clamp(26px,4vw,40px)">What colour is it?</p>`,answer:w,opts:shuffle([w,...shuffle(EN_COL.filter(x=>x[0]!==w)).slice(0,2).map(x=>x[0])]),small:true};}
    const n=rand(1,10),e=COSAS[rand(0,COSAS.length-1)];
    return {scene:`<div class="scene"><div class="group" style="max-width:420px">${e.repeat(n)}</div></div><p class="prompt" style="font-size:clamp(26px,4vw,40px)">How many?</p>`,answer:EN_NUM[n-1],opts:shuffle([EN_NUM[n-1],...shuffle(EN_NUM.filter((_,k)=>k!==n-1)).slice(0,2)]),small:true};
  }
  if(id==="sumas"){
    const a=rand(1,8), b=rand(1,10-a), r=a+b;
    const scene=`<div class="scene"><div class="group">${"🍎".repeat(a)}</div><span class="op">+</span><div class="group">${"🍏".repeat(b)}</div></div>
      <p class="prompt">${a} + ${b} = ?</p>`;
    return {scene,answer:String(r),opts:numOpts(r,0,10)};
  }
  if(id==="cuantos"){
    const n=rand(1,10), e=COSAS[rand(0,COSAS.length-1)];
    return {scene:`<div class="scene"><div class="group" style="max-width:420px">${e.repeat(n)}</div></div><p class="prompt">¿Cuántos hay?</p>`,answer:String(n),opts:numOpts(n,1,10)};
  }
  const [w,e]=PALABRAS[rand(0,PALABRAS.length-1)];
  const others=shuffle(PALABRAS.filter(p=>p[0]!==w&&p[1]!==e)).slice(0,2).map(p=>p[1]);
  return {scene:`<p class="bigword">${esc(w)}</p>`,answer:e,opts:shuffle([e,...others]),emoji:true};
}
function numOpts(r,min,max){
  const s=new Set([r]);
  while(s.size<3){const c=r+rand(-3,3);if(c>=min&&c<=max)s.add(c)}
  return shuffle([...s]).map(String);
}
function playQuiz(g){
  let i=0, score=0; const res=[];
  const next=()=>{
    if(i===ROUNDS) return winScreen(g,score,ROUNDS);
    const q=makeQ(g.id);
    const dots=Array.from({length:ROUNDS},(_,k)=>`<span class="dot ${k<i?(res[k]?"on":"miss"):""} ${k===i?"now":""}"></span>`).join("");
    board.innerHTML=head(g,`<div class="dots" aria-label="Pregunta ${i+1} de ${ROUNDS}">${dots}</div>`)+
      `<div class="q">${q.scene}<div class="opts">${q.opts.map(o=>`<button class="opt" data-v="${esc(o)}"${q.emoji?' style="font-size:clamp(48px,7vw,70px)"':q.small?' style="font-size:clamp(24px,3.4vw,34px);font-family:var(--f-body);font-weight:700"':""}>${esc(o)}</button>`).join("")}</div><p class="hint" id="hint"></p></div>`;
    let tried=false;
    board.querySelectorAll(".opt").forEach(b=>b.onclick=()=>{
      if(b.disabled) return;
      if(b.dataset.v===q.answer){
        b.classList.add("ok"); tone(true); res[i]=!tried; if(!tried) score++;
        board.querySelectorAll(".opt").forEach(x=>x.disabled=true);
        $("#hint").textContent=tried?"¡Ahora sí!":"¡Correcto!";
        i++; setTimeout(next,850);
      }else{ tried=true; b.classList.add("bad"); b.disabled=true; tone(false); shake(b); $("#hint").textContent="Mmm… mirad otra vez."; }
    });
  };
  next();
}

/* ---------- Controles ---------- */
function setFont(lig){document.body.classList.toggle("imprenta",!lig);$("#f-lig").setAttribute("aria-pressed",lig);$("#f-imp").setAttribute("aria-pressed",!lig);
  try{localStorage.setItem("capireto-letra",lig?"lig":"imp")}catch(e){}}
$("#f-lig").onclick=()=>setFont(true);
$("#f-imp").onclick=()=>setFont(false);
$("#sound").onclick=e=>{soundOn=!soundOn;e.currentTarget.textContent="Sonido: "+(soundOn?"sí":"no");e.currentTarget.setAttribute("aria-pressed",soundOn)};
$("#full").onclick=()=>{try{const p=document.fullscreenElement?document.exitFullscreen():board.requestFullscreen();p&&p.catch&&p.catch(()=>{})}catch(e){}};
try{if(localStorage.getItem("capireto-letra")==="imp")setFont(false)}catch(e){}

renderNav(); start();