/* CUBO — Laptop Quiz */
const { useState: useStateQ } = React;

const QUIZ_STEPS = [
{
  id: 'uso',
  q: <>¿Para qué <em>vas a usar</em> tu equipo?</>,
  options: [
  { key: 'oficina', label: 'Oficina, navegación, productividad', hint: 'Esencial', scores: { essential: 3, performance: 1 } },
  { key: 'multitarea', label: 'Multitarea constante, varias apps a la vez', hint: 'Rendimiento', scores: { performance: 3, programmer: 1 } },
  { key: 'diseno', label: 'Diseño gráfico, video, contenido visual', hint: 'Creativo', scores: { designer: 3, performance: 1 } },
  { key: 'dev', label: 'Programación, compilación, trabajo técnico', hint: 'Técnico', scores: { programmer: 3, performance: 1 } },
  { key: 'gaming', label: 'Gaming, gráficos ultrarrealistas', hint: 'Gamer', scores: { gamer: 3, performance: 1 } }]

},
{
  id: 'intensidad',
  q: <>¿Qué tan <em>exigente</em> es tu día?</>,
  options: [
  { key: 'liviano', label: 'Liviano — uso puntual, jornadas cortas', hint: '~4h/día', scores: { essential: 2 } },
  { key: 'moderado', label: 'Moderado — jornada laboral completa', hint: '~8h/día', scores: { performance: 2, programmer: 1, designer: 1 } },
  { key: 'intenso', label: 'Intenso — sesiones largas, cargas pesadas', hint: '8h+', scores: { gamer: 2, designer: 2, programmer: 2 } }]

},
{
  id: 'presupuesto',
  q: <>¿Cuál es tu <em>presupuesto</em>?</>,
  options: [
  { key: 'low', label: 'S/. 2,200 — S/. 3,200', hint: 'Esencial', scores: { essential: 3 } },
  { key: 'mid', label: 'S/. 3,200 — S/. 4,800', hint: 'Rendimiento', scores: { performance: 3, programmer: 1 } },
  { key: 'high', label: 'S/. 4,800 — S/. 8,500', hint: 'Pro', scores: { gamer: 2, designer: 2, programmer: 2 } }]

},
{
  id: 'forma',
  q: <>¿Para quién <em>compras</em>?</>,
  options: [
  { key: 'personal', label: 'Para mí — uso personal', hint: 'Personal', scores: {} },
  { key: 'business', label: 'Para mi equipo — uso corporativo', hint: 'Business', scores: {} }]

}];


const PROFILES = {
  essential: {
    name: 'Essential',
    tag: 'Trabajo diario',
    desc: 'Para oficina, navegación y productividad. Equipos livianos, eficientes y con la durabilidad que necesitas.',
    price: 'S/. 2,200 — S/. 3,200',
    use: 'Oficina · Navegación',
    pow: 'Eficiencia'
  },
  performance: {
    name: 'Performance',
    tag: 'Multitarea constante',
    desc: 'Velocidad de procesamiento para quien mantiene 20 pestañas, 4 apps y video llamadas en paralelo.',
    price: 'S/. 3,200 — S/. 4,800',
    use: 'Multitarea · Productividad',
    pow: 'Velocidad'
  },
  gamer: {
    name: 'Gamer',
    tag: 'Gráficos ultrarrealistas',
    desc: 'Potencia gráfica seria para gaming exigente. Frames, refresh y respuesta para no dejar que nada te frene.',
    price: 'S/. 3,600 — S/. 8,500',
    use: 'Gaming · 3D',
    pow: 'GPU dedicada'
  },
  designer: {
    name: 'Designer',
    tag: 'Diseño visual y contenido',
    desc: 'Color preciso, GPU para render y memoria para proyectos pesados de imagen, video y motion.',
    price: 'S/. 3,600 — S/. 8,500',
    use: 'Diseño · Video',
    pow: 'Color + GPU'
  },
  programmer: {
    name: 'Programmer',
    tag: 'Desarrollo y compilación',
    desc: 'Núcleos, RAM y velocidad de disco para builds rápidos, contenedores y entornos de desarrollo cómodos.',
    price: 'S/. 3,500 — S/. 8,500',
    use: 'Dev · Compilación',
    pow: 'CPU + RAM'
  }
};

function Quiz() {
  const [step, setStep] = useStateQ(0);
  const [answers, setAnswers] = useStateQ({});
  const [done, setDone] = useStateQ(false);

  const choose = (opt) => {
    const newAns = { ...answers, [QUIZ_STEPS[step].id]: opt.key };
    setAnswers(newAns);
    setTimeout(() => {
      if (step < QUIZ_STEPS.length - 1) {
        setStep(step + 1);
      } else {
        setDone(true);
      }
    }, 220);
  };

  const calcResult = () => {
    const scores = { essential: 0, performance: 0, gamer: 0, designer: 0, programmer: 0 };
    QUIZ_STEPS.forEach((s) => {
      const ans = answers[s.id];
      if (!ans) return;
      const opt = s.options.find((o) => o.key === ans);
      if (!opt || !opt.scores) return;
      Object.entries(opt.scores).forEach(([k, v]) => {scores[k] = (scores[k] || 0) + v;});
    });
    let best = 'performance';
    let max = -1;
    Object.entries(scores).forEach(([k, v]) => {if (v > max) {max = v;best = k;}});
    return PROFILES[best];
  };

  const reset = () => {setStep(0);setAnswers({});setDone(false);};
  const back = () => {if (step > 0) setStep(step - 1);};

  const current = QUIZ_STEPS[step];
  const profile = done ? calcResult() : null;
  const formaIsBusiness = answers.forma === 'business';
  const waMsg = profile ?
  `Hola CUBO 👋  Hice el quiz y mi perfil es *${profile.name}* (${profile.tag}). Quiero más información sobre laptops en el rango ${profile.price}${formaIsBusiness ? ', para mi empresa' : ''}.` :
  '';
  const waHref = `https://wa.me/51920768860?text=${encodeURIComponent(waMsg)}`;

  return (
    <div className="quiz-shell">
      <div className="quiz-side">
        <div className="quiz-progress">
          {QUIZ_STEPS.map((s, i) => {
            const cls = done || i < step ? 'done' : i === step ? 'active' : '';
            return (
              <div key={s.id} className={`quiz-step ${cls}`}>
                <span className="idx">0{i + 1}</span>
                <span>{['Uso', 'Intensidad', 'Presupuesto', 'Forma'][i]}</span>
                <span className="check">✓</span>
              </div>);

          })}
        </div>
        <div className="meta">
          <br />
          <strong>5 perfiles · 4 preguntas</strong><br />
          <br />
          Recomienda un equipo en base a uso real, no a catálogo. Sin opciones de sobra.
        </div>
      </div>

      <div className="quiz-main">
        {!done ?
        <>
            <div className="quiz-question">{current.q}</div>
            <div className="quiz-options">
              {current.options.map((opt) => {
              const selected = answers[current.id] === opt.key;
              return (
                <button
                  key={opt.key}
                  className={`quiz-option ${selected ? 'selected' : ''}`}
                  onClick={() => choose(opt)}>
                  
                    <span className="marker"></span>
                    <span>{opt.label}</span>
                    <span className="sub">{opt.hint}</span>
                  </button>);

            })}
            </div>
            <div className="quiz-foot">
              <button className="quiz-back" onClick={back} disabled={step === 0} style={{ opacity: step === 0 ? 0.3 : 1 }}>← Atrás</button>
              <span className="progress-mono"><span>0{step + 1}</span> / 0{QUIZ_STEPS.length}</span>
            </div>
          </> :

        <div className="quiz-result">
            <span className="badge">● TU PERFIL</span>
            <h3>CUBO <em>{profile.name}</em></h3>
            <p className="desc">{profile.desc}</p>
            <div className="specs">
              <div className="spec">
                <div className="k">USO PRINCIPAL</div>
                <div className="v">{profile.use}</div>
              </div>
              <div className="spec">
                <div className="k">FORTALEZA</div>
                <div className="v">{profile.pow}</div>
              </div>
              <div className="spec">
                <div className="k">RANGO</div>
                <div className="v gold">{profile.price}</div>
              </div>
            </div>
            <div className="actions">
              <a className="btn btn-primary" href={waHref} target="_blank" rel="noopener">
                Conversar por WhatsApp →
              </a>
              <button className="btn btn-ghost" onClick={reset}>Reiniciar quiz</button>
            </div>
          </div>
        }
      </div>
    </div>);

}

Object.assign(window, { Quiz });