// ─── Skin Diagnostic Quiz ─────────────────────────────────────

const quizData = {
  steps: [
    {
      q: '¿Cuál es tu principal preocupación?',
      sub: 'Elegí la que más te representa en este momento.',
      options: [
        { label: 'Líneas y arrugas', icon: '〰', value: 'arrugas' },
        { label: 'Manchas y tono irregular', icon: '◍', value: 'manchas' },
        { label: 'Pérdida de firmeza', icon: '◻', value: 'firmeza' },
        { label: 'Acné y textura', icon: '∿', value: 'acne' },
      ]
    },
    {
      q: '¿Qué edad tenés?',
      sub: 'Nos ayuda a personalizar la recomendación.',
      options: [
        { label: '25–34 años', icon: null, value: 'joven' },
        { label: '35–44 años', icon: null, value: 'media' },
        { label: '45–55 años', icon: null, value: 'madura' },
        { label: 'Más de 55', icon: null, value: 'senior' },
      ]
    },
    {
      q: '¿Has realizado tratamientos estéticos antes?',
      sub: 'Sin juicios — es solo para calibrar la recomendación.',
      options: [
        { label: 'Sí, tengo experiencia', icon: null, value: 'si' },
        { label: 'Sí, pero fue hace mucho', icon: null, value: 'antes' },
        { label: 'No, sería mi primera vez', icon: null, value: 'no' },
      ]
    }
  ],
  results: {
    arrugas: { name: 'Botox + Bioestimulación', desc: 'La combinación ideal para relajar líneas de expresión y restaurar firmeza de forma natural y progresiva.', detail: 'Botox para suavizar arrugas activas · Bioestimulación para prevenir y recuperar volumen' },
    manchas: { name: 'Peelings Químicos', desc: 'Tratamiento de elección para unificar el tono, reducir manchas y renovar la piel desde adentro.', detail: 'Peeling superficial o medio según tipo de manchas · Posible combinación con mesoterapia' },
    firmeza: { name: 'Bioestimulación Facial', desc: 'Activa la producción natural de colágeno para recuperar la firmeza y el contorno sin cambiar tu esencia.', detail: 'Polinucleótidos o PRP según indicación · 2–3 sesiones iniciales' },
    acne: { name: 'Peeling + Mesoterapia', desc: 'Protocolo dual que renueva la superficie de la piel y la nutre desde adentro para mejorar textura y cicatrices.', detail: 'Peeling enzimático o ácido · Mesoterapia con activos específicos para acné' },
  }
};

function SkinQuiz({ onClose, setCurrentPage }) {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const [done, setDone] = React.useState(false);

  const current = quizData.steps[step];
  const result = done ? quizData.results[answers[0]] : null;

  const select = (val) => {
    const next = { ...answers, [step]: val };
    setAnswers(next);
    if (step < quizData.steps.length - 1) {
      setTimeout(() => setStep(s => s + 1), 260);
    } else {
      setTimeout(() => setDone(true), 260);
    }
  };

  const restart = () => { setStep(0); setAnswers({}); setDone(false); };

  const waText = result
    ? `Hola, hice el diagnóstico de piel en su web y me recomendaron ${result.name}. Quisiera saber más y reservar una consulta.`
    : 'Hola, quisiera reservar una consulta en LANA';

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 9500,
      background: 'rgba(42,31,16,0.6)', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px',
    }} onClick={e => e.target === e.currentTarget && onClose()}>
      <div style={{
        background: '#FAF7F2', maxWidth: 560, width: '100%', maxHeight: '90vh',
        overflowY: 'auto', position: 'relative',
        boxShadow: '0 24px 80px rgba(42,31,16,0.3)',
      }}>
        <button onClick={onClose} style={{
          position: 'absolute', top: 20, right: 20, background: 'none', border: 'none',
          cursor: 'pointer', fontSize: 20, color: 'var(--text-light)', zIndex: 1, lineHeight: 1,
        }}>✕</button>

        {!done ? (
          <div style={{ padding: '48px 40px 40px' }}>
            <div style={{ display: 'flex', gap: 6, marginBottom: 36 }}>
              {quizData.steps.map((_, i) => (
                <div key={i} style={{
                  flex: 1, height: 2,
                  background: i <= step ? 'var(--gold)' : 'var(--cream-dark)',
                  transition: 'background 0.3s',
                }} />
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 32 }}>
              <img src="uploads/logo.png" alt="LANA" style={{ width: 46, height: 46 }} />
              <Label>Diagnóstico de piel</Label>
            </div>
            <h2 className="t-h3" style={{ fontSize: 28, marginBottom: 8 }}>{current.q}</h2>
            <p className="t-body" style={{ fontSize: 16, marginBottom: 32 }}>{current.sub}</p>
            <div style={{ display: 'grid', gap: 10 }}>
              {current.options.map((opt, i) => (
                <button key={i} onClick={() => select(opt.value)} style={{
                  background: answers[step] === opt.value ? 'var(--gold-pale)' : 'var(--white)',
                  border: `1px solid ${answers[step] === opt.value ? 'var(--gold)' : 'var(--cream-dark)'}`,
                  cursor: 'pointer', padding: '16px 20px',
                  display: 'flex', alignItems: 'center', gap: 16, textAlign: 'left',
                  transition: 'all 0.2s',
                }}
                  onMouseEnter={e => { if (answers[step] !== opt.value) { e.currentTarget.style.borderColor = 'var(--gold)'; e.currentTarget.style.background = 'var(--gold-pale)'; } }}
                  onMouseLeave={e => { if (answers[step] !== opt.value) { e.currentTarget.style.borderColor = 'var(--cream-dark)'; e.currentTarget.style.background = 'var(--white)'; } }}
                >
                  {opt.icon && <span style={{ fontSize: 20, color: 'var(--gold)', width: 28, textAlign: 'center', flexShrink: 0 }}>{opt.icon}</span>}
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500, color: 'var(--dark)' }}>{opt.label}</span>
                </button>
              ))}
            </div>
            <div className="t-body" style={{ marginTop: 28, fontSize: 14, textAlign: 'center' }}>
              Pregunta {step + 1} de {quizData.steps.length}
            </div>
          </div>
        ) : (
          <div style={{ padding: '48px 40px 40px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 32 }}>
              <img src="uploads/logo.png" alt="LANA" style={{ width: 32, height: 32 }} />
              <Label>Tu recomendación personalizada</Label>
            </div>
            <div style={{ width: 40, height: 1, background: 'var(--gold)', marginBottom: 24 }} />
            <h2 className="t-h3" style={{ fontSize: 32, marginBottom: 16 }}>{result.name}</h2>
            <p className="t-body" style={{ fontSize: 16, marginBottom: 20 }}>{result.desc}</p>
            <div style={{ background: 'var(--gold-pale)', padding: '16px 20px', marginBottom: 32 }}>
              <div className="t-body-dark" style={{ fontSize: 16, lineHeight: 1.7 }}>{result.detail}</div>
            </div>
            <p className="t-body" style={{ fontSize: 14, lineHeight: 1.7, marginBottom: 28 }}>
              Esta es una orientación general. La Dra. Lana confirmará el protocolo exacto en tu consulta inicial.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <BtnPrimary href={`https://wa.me/543413348415?text=${encodeURIComponent(waText)}`} style={{ justifyContent: 'center' }}>
                Reservar consulta con este resultado
              </BtnPrimary>
              <button onClick={() => { setCurrentPage('treatments'); onClose(); }} style={{
                background: 'none', border: '1px solid var(--cream-dark)', cursor: 'pointer', padding: '13px 20px',
                fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-light)',
                transition: 'border-color 0.2s',
              }}>Ver todos los tratamientos</button>
              <button onClick={restart} className="t-body" style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 14, padding: '8px', textDecoration: 'underline' }}>
                Hacer el diagnóstico de nuevo
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { SkinQuiz });