// flow.jsx — Form multi-paso, Preview, Checkout, Generación, Éxito

const { useState: uS_F, useEffect: uE_F, useMemo: uM_F, useRef: uRef_F } = React;

// ─────── FORM ───────
function ChipGrid({ items, value, onChange, multi = false }) {
  const isActive = (id) => multi ? (value || []).includes(id) : value === id;
  const toggle = (id) => {
    if (!multi) return onChange(id);
    const cur = value || [];
    onChange(cur.includes(id) ? cur.filter(x => x !== id) : [...cur, id]);
  };
  return (
    <div className="chip-grid">
      {items.map(it => (
        <button
          key={it.id || it}
          type="button"
          className={`chip ${isActive(it.id || it) ? 'active' : ''}`}
          onClick={() => toggle(it.id || it)}
        >
          <span style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            {it.emoji && <span className="emoji">{it.emoji}</span>}
            <span>
              <div>{it.name || it}</div>
              {it.sub && <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{it.sub}</div>}
            </span>
          </span>
          <span className="check">{isActive(it.id || it) && <Icon.Check />}</span>
        </button>
      ))}
    </div>
  );
}

const STEPS = [
  { key: 'name', lbl: '01 / homenajeado' },
  { key: 'occasion', lbl: '02 / ocasión' },
  { key: 'style', lbl: '03 / estilo' },
  { key: 'mood', lbl: '04 / mood' },
  { key: 'voice', lbl: '05 / voz' },
  { key: 'anec', lbl: '06 / anécdotas' },
  { key: 'must', lbl: '07 / detalles finales' },
];

function FormFlow({ data, setData, onDone, onBack }) {
  const [step, setStep] = uS_F(0);
  const [showOtro, setShowOtro] = uS_F({ occasion: false, style: false, mood: false });
  const cur = STEPS[step];

  const isOtro = (key) => showOtro[key];
  const selectOtro = (key) => {
    setShowOtro(s => ({ ...s, [key]: true }));
    setData(d => ({ ...d, [key]: '' }));
  };
  const selectNormal = (key, val) => {
    setShowOtro(s => ({ ...s, [key]: false }));
    setData(d => ({ ...d, [key]: val }));
  };

  const canNext = () => {
    if (cur.key === 'name') return (data.name || '').trim().length > 1;
    if (cur.key === 'occasion') return !!(data.occasion || '').trim();
    if (cur.key === 'style') return !!(data.style || '').trim();
    if (cur.key === 'mood') return !!(data.mood || '').trim();
    if (cur.key === 'voice') return !!data.voice;
    if (cur.key === 'anec') return (data.anec || []).filter(a => a && a.trim().length > 2).length >= 1;
    return true;
  };

  const next = () => {
    if (step === STEPS.length - 1) onDone();
    else setStep(s => s + 1);
  };
  const back = () => step === 0 ? onBack() : setStep(s => s - 1);

  return (
    <section className="sec" style={{ paddingTop: 120 }}>
      <div className="sec-inner">
        <div className="form-wrap">
          <div className="form-progress">
            {STEPS.map((s, i) => (
              <div key={s.key} className={`form-progress-bar ${i < step ? 'done' : ''} ${i === step ? 'active' : ''}`}>
                <div className="fill" />
              </div>
            ))}
          </div>

          <div key={cur.key} className="page-enter">
            <div className="form-step-label">{cur.lbl}</div>

            {cur.key === 'name' && (
              <>
                <div className="form-q">¿Para quién es la <em>joyita</em>?</div>
                <div className="form-help">Nombre, apodo, sobrenombre — como prefieras que aparezca en la canción.</div>
                <input
                  className="input"
                  placeholder="Ej: Lucho, la Pancha, mi viejo querido…"
                  value={data.name || ''}
                  onChange={e => setData(d => ({ ...d, name: e.target.value }))}
                  autoFocus
                />
                <div style={{ marginTop: 24 }}>
                  <div style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 10, fontFamily: 'var(--font-mono)' }}>EDAD (OPCIONAL)</div>
                  <input
                    className="input"
                    type="number"
                    placeholder="Ej: 40"
                    value={data.age || ''}
                    onChange={e => setData(d => ({ ...d, age: e.target.value }))}
                  />
                </div>
              </>
            )}

            {cur.key === 'occasion' && (
              <>
                <div className="form-q">¿Cuál es la <em>ocasión</em>?</div>
                <div className="form-help">Esto le da el contexto a la canción.</div>
                <ChipGrid
                  items={[...OCCASIONS.map(o => ({ id: o, name: o })), { id: '__otro__', name: 'Otra ocasión ✏️' }]}
                  value={isOtro('occasion') ? '__otro__' : data.occasion}
                  onChange={v => v === '__otro__' ? selectOtro('occasion') : selectNormal('occasion', v)}
                />
                {isOtro('occasion') && (
                  <input className="input" style={{ marginTop: 12 }} autoFocus
                    placeholder="Ej: Jubilación, Baby shower, Graduación…"
                    value={data.occasion}
                    onChange={e => setData(d => ({ ...d, occasion: e.target.value }))}
                  />
                )}
              </>
            )}

            {cur.key === 'style' && (
              <>
                <div className="form-q">¿Qué onda el <em>ritmo</em>?</div>
                <div className="form-help">El género manda. Elige el que más le pega al homenajeado.</div>
                <ChipGrid
                  items={[...STYLES, { id: '__otro__', name: 'Otro ritmo', emoji: '✏️', sub: 'Escribe el que quieras' }]}
                  value={isOtro('style') ? '__otro__' : data.style}
                  onChange={v => v === '__otro__' ? selectOtro('style') : selectNormal('style', v)}
                />
                {isOtro('style') && (
                  <input className="input" style={{ marginTop: 12 }} autoFocus
                    placeholder="Ej: Salsa, Flamenco, Jazz, Norteño…"
                    value={data.style}
                    onChange={e => setData(d => ({ ...d, style: e.target.value }))}
                  />
                )}
              </>
            )}

            {cur.key === 'mood' && (
              <>
                <div className="form-q">¿Cómo se debe <em>sentir</em>?</div>
                <div className="form-help">El estado de ánimo que querís transmitir.</div>
                <ChipGrid
                  items={[...MOODS, { id: '__otro__', name: 'Otro', emoji: '✏️' }]}
                  value={isOtro('mood') ? '__otro__' : data.mood}
                  onChange={v => v === '__otro__' ? selectOtro('mood') : selectNormal('mood', v)}
                />
                {isOtro('mood') && (
                  <input className="input" style={{ marginTop: 12 }} autoFocus
                    placeholder="Ej: Motivador, Tranquilo, Travie so, Solemne…"
                    value={data.mood}
                    onChange={e => setData(d => ({ ...d, mood: e.target.value }))}
                  />
                )}
              </>
            )}

            {cur.key === 'voice' && (
              <>
                <div className="form-q">¿Qué <em>voz</em> prefieres?</div>
                <div className="form-help">Quien va a cantar la canción.</div>
                <ChipGrid
                  items={VOICES}
                  value={data.voice}
                  onChange={v => setData(d => ({ ...d, voice: v }))}
                />
                <div style={{ marginTop: 32 }}>
                  <label style={{ display: 'flex', gap: 14, padding: 16, border: '1px solid var(--line)', borderRadius: 8, cursor: 'pointer', alignItems: 'center', background: 'var(--bg-2)' }}>
                    <input
                      type="checkbox"
                      checked={!!data.chilenismos}
                      defaultChecked={false}
                      onChange={e => setData(d => ({ ...d, chilenismos: e.target.checked }))}
                      style={{ width: 18, height: 18, accentColor: 'var(--accent)' }}
                    />
                    <div>
                      <div style={{ fontWeight: 500 }}>Usar chilenismos suaves</div>
                      <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 2 }}>"bacán", "la raja", "cachái", "pásalo bien"…</div>
                    </div>
                  </label>
                </div>
              </>
            )}

            {cur.key === 'anec' && (
              <>
                <div className="form-q">3 cositas que <em>solo ustedes</em> sepan</div>
                <div className="form-help">Detalles, manías, frases típicas, anécdotas. Es lo que hace que la canción quede mágica.</div>
                {[0, 1, 2].map(i => (
                  <div className="anec-row" key={i}>
                    <div className="anec-num">{i + 1}</div>
                    <input
                      className="input"
                      placeholder={[
                        "Le gusta el completo sin chucrut…",
                        "Siempre llega tarde a todos lados…",
                        "Es fanático del Colo y nunca se pierde un partido…",
                      ][i]}
                      value={(data.anec || [])[i] || ''}
                      onChange={e => setData(d => {
                        const anec = [...(d.anec || ['', '', ''])];
                        anec[i] = e.target.value;
                        return { ...d, anec };
                      })}
                    />
                  </div>
                ))}
              </>
            )}

            {cur.key === 'must' && (
              <>
                <div className="form-q">Frases que <em>sí o sí</em> tienen que aparecer</div>
                <div className="form-help">Opcional. Algún apodo, frase interna, palabra clave que querís escuchar en la canción.</div>
                <textarea
                  className="textarea"
                  placeholder="Ej: 'pásalo chancho', 'el viejo del barrio', 'salud con vino tinto'…"
                  value={data.must || ''}
                  onChange={e => setData(d => ({ ...d, must: e.target.value }))}
                />
              </>
            )}
          </div>

          <div className="form-nav">
            <button className="btn btn-ghost" onClick={back}>
              <Icon.ArrowL /> {step === 0 ? 'Volver' : 'Atrás'}
            </button>
            <span className="step-counter">{step + 1} / {STEPS.length}</span>
            <button className="btn btn-primary" onClick={next} disabled={!canNext()}>
              {step === STEPS.length - 1 ? 'Ver mi prompt' : 'Siguiente'} <Icon.Arrow />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────── PREVIEW PROMPT ───────
function PreviewPrompt({ data, onContinue, onBack }) {
  const styleName = (STYLES.find(s => s.id === data.style) || {}).name || data.style;
  const moodName = (MOODS.find(m => m.id === data.mood) || {}).name || data.mood;
  const voiceName = (VOICES.find(v => v.id === data.voice) || {}).name || data.voice;
  const validAnec = (data.anec || []).filter(a => a && a.trim());

  return (
    <section className="sec" style={{ paddingTop: 120 }}>
      <div className="sec-inner">
        <div className="form-wrap">
          <div className="form-step-label">Previsualización</div>
          <h2 className="form-q">Así suena tu <em>encargo</em>.</h2>
          <p className="form-help">Esto es lo que nuestra IA va a recibir. Si todo se ve bacán, sigue al pago.</p>

          <div className="prompt-card">
            <div className="lbl">Letra · borrador conceptual</div>
            <p className="prompt-text">
              Una canción <span className="hl">{(styleName || '').toLowerCase()}</span> con onda <span className="hl">{(moodName || '').toLowerCase()}</span> dedicada a <span className="hl">{data.name || 'tu persona'}</span>
              {data.age ? <> de <span className="hl">{data.age} años</span></> : null}
              {data.occasion ? <>, para celebrar su <span className="hl">{data.occasion.toLowerCase()}</span></> : null}.
              La letra menciona que {validAnec.map((a, i) => (
                <span key={i}>
                  <span className="hl">{a.trim().toLowerCase()}</span>
                  {i < validAnec.length - 2 ? ', ' : i === validAnec.length - 2 ? ' y ' : ''}
                </span>
              ))}.
              {data.must ? <> Incluye las frases: <span className="hl">{data.must}</span>.</> : null}
            </p>
            <div className="prompt-tech">
              <div>► style: {styleName}</div>
              <div>► mood: {moodName}</div>
              <div>► vocals: {voiceName}{data.chilenismos ? ' · chilenismos: on' : ''}</div>
              <div>► duration: 2:30 – 3:00</div>
              <div>► quality: 320kbps studio</div>
            </div>
          </div>

          <div style={{ display: 'flex', gap: 10, padding: 14, borderRadius: 8, background: 'color-mix(in oklab, var(--accent) 8%, var(--bg-2))', border: '1px solid color-mix(in oklab, var(--accent) 30%, transparent)', fontSize: 13, color: 'var(--ink-2)', alignItems: 'flex-start' }}>
            <Icon.Sparkle size={18} />
            <span>Este es un borrador conceptual. La letra final será mucho más rica, con rimas, estrofas y coro pegajoso. La IA usa todos tus datos para hacerla única.</span>
          </div>

          <div className="form-nav">
            <button className="btn btn-ghost" onClick={onBack}><Icon.ArrowL /> Editar</button>
            <button className="btn btn-primary btn-lg" onClick={onContinue}>
              Continuar al pago <Icon.Arrow />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────── CHECKOUT ───────
const PAY_METHODS = [
  { id: 'mp', name: 'Mercado Pago', sub: 'Webpay, tarjetas, saldo MP', color: '#00B1EA', label: 'MP' },
  { id: 'card', name: 'Tarjeta crédito/débito', sub: 'Visa, Mastercard, Amex', color: '#5C6BC0', label: '••' },
  { id: 'khipu', name: 'Khipu', sub: 'Transferencia automática', color: '#7E57C2', label: 'KH' },
];

function Checkout({ planId, data, songs, onPay, onBack, onChangePlan }) {
  const plan = PLANS.find(p => p.id === planId) || PLANS[1];
  const hasVideo = planId === 'video' || planId === 'regalazo';
  const hasBothSongs = Array.isArray(songs) && songs.length > 1;
  const isRegalazo = planId === 'regalazo';
  const bonusSongs = hasBothSongs && !isRegalazo ? 1500 : 0;
  const [videoSel, setVideoSel] = uS_F(isRegalazo ? 'both' : 'v1');
  const bonusVideo = (hasVideo && hasBothSongs && videoSel === 'both' && !isRegalazo) ? 1500 : 0;
  const total = plan.price + bonusSongs + bonusVideo;
  const [method, setMethod] = uS_F('mp');
  const [email, setEmail] = uS_F('');
  const [phone, setPhone] = uS_F('');

  const valid = email.includes('@') && phone.length >= 8;

  return (
    <section className="sec" style={{ paddingTop: 120 }}>
      <div className="sec-inner">
        <div className="form-step-label">Checkout</div>
        <h2 className="form-q" style={{ marginBottom: 8 }}>Último paso, <em>cabro/a</em>.</h2>
        <p className="form-help">Pago seguro. Encriptado. Tu canción empieza a generarse al confirmar.</p>

        <div className="checkout">
          <div className="checkout-form">
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--accent)', marginBottom: 16 }}>► Datos de contacto</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 24 }}>
              <input className="input" placeholder="tu@email.cl" type="email" value={email} onChange={e => setEmail(e.target.value)} />
              <input className="input" placeholder="WhatsApp · +56 9 ____ ____" value={phone} onChange={e => setPhone(e.target.value)} />
            </div>

            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--accent)', marginBottom: 16 }}>► Método de pago</div>
            <div className="pay-options">
              {PAY_METHODS.map(m => (
                <div
                  key={m.id}
                  className={`pay-opt ${method === m.id ? 'active' : ''}`}
                  onClick={() => setMethod(m.id)}
                >
                  <div className="pay-opt-icon" style={{ background: m.color, color: 'white', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600 }}>
                    {m.label}
                  </div>
                  <div>
                    <div className="pay-opt-name">{m.name}</div>
                    <div className="pay-opt-sub">{m.sub}</div>
                  </div>
                  <div className="radio" />
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 12, color: 'var(--ink-3)', marginTop: 18 }}>
              <Icon.Lock /> Pago 100% seguro · datos encriptados SSL · sin guardar tu tarjeta.
            </div>
          </div>

          <div className="checkout-summary">
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--accent)', marginBottom: 16 }}>► Resumen</div>
            <div style={{ padding: 16, background: 'var(--bg-3)', borderRadius: 8, marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                <div style={{ fontWeight: 500 }}>{plan.name}</div>
                <button onClick={onChangePlan} style={{ fontSize: 12, color: 'var(--accent)', fontFamily: 'var(--font-mono)' }}>cambiar</button>
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>{plan.tag}</div>
            </div>

            <div style={{ padding: 12, borderLeft: '2px solid var(--accent)', background: 'var(--bg-3)', borderRadius: 4, marginBottom: 16 }}>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 4 }}>Para:</div>
              <div style={{ fontWeight: 500, fontSize: 15 }}>{data.name || '—'}{data.age ? `, ${data.age} años` : ''}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 4 }}>
                {(STYLES.find(s => s.id === data.style) || {}).name} · {(MOODS.find(m => m.id === data.mood) || {}).name?.toLowerCase()}
              </div>
            </div>

            {hasVideo && hasBothSongs && (
              <div style={{ marginBottom: 16, padding: 12, background: 'var(--bg-3)', borderRadius: 8 }}>
                <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--accent)', marginBottom: 10 }}>► ¿Para cuál versión quieres el video?</div>
                {[
                  { id: 'v1', label: 'Video de Versión 1', sub: 'Incluido' },
                  { id: 'v2', label: 'Video de Versión 2', sub: 'Incluido' },
                  { id: 'both', label: 'Video de las 2 versiones', sub: '+$1.500' },
                ].map(opt => (
                  <label key={opt.id} style={{ display: 'flex', gap: 10, padding: '8px 10px', borderRadius: 6, border: `1px solid ${videoSel === opt.id ? 'var(--accent)' : 'var(--line)'}`, background: videoSel === opt.id ? 'color-mix(in oklab, var(--accent) 8%, var(--bg-2))' : 'transparent', cursor: 'pointer', alignItems: 'center', marginBottom: 6 }}>
                    <input type="radio" name="videoSel" value={opt.id} checked={videoSel === opt.id} onChange={() => setVideoSel(opt.id)} style={{ accentColor: 'var(--accent)' }} />
                    <div style={{ flex: 1, fontSize: 13, fontWeight: 500 }}>{opt.label}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{opt.sub}</div>
                  </label>
                ))}
              </div>
            )}

            <div className="summary-row"><span>Subtotal</span><span>${plan.price.toLocaleString('es-CL')}</span></div>
            {hasBothSongs && <div className="summary-row"><span>2ª versión MP3</span><span>+$1.500</span></div>}
            {bonusVideo > 0 && <div className="summary-row"><span>2ª versión video</span><span>+$1.500</span></div>}
            <div className="summary-row"><span>IVA incl.</span><span>—</span></div>
            <div className="summary-row total"><span>Total</span><span>${total.toLocaleString('es-CL')} CLP</span></div>

            <button className="btn btn-primary btn-block btn-lg" disabled={!valid} onClick={() => onPay({ phone, email, videoSel })} style={{ marginTop: 20 }}>
              <Icon.Lock /> Pagar y crear canción
            </button>
            <button className="btn btn-ghost btn-block" onClick={onBack} style={{ marginTop: 8 }}>
              Atrás
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────── GENERATING ───────
const GEN_STAGES = [
  { t: 'Cocinando el prompt', s: 'Mezclando tus datos con magia chilena', dur: 2200 },
  { t: 'Escribiendo la letra', s: 'Rimas, estrofas, coro pegajoso', dur: 3000 },
  { t: 'Componiendo la música', s: 'Acordes, instrumentos, ritmo', dur: 4500 },
  { t: 'Grabando vocales', s: 'La voz cantando tu historia', dur: 3500 },
  { t: 'Mastering & mezcla', s: 'Sonido limpio de estudio', dur: 2500 },
  { t: 'Preparando entrega', s: 'Empaquetando tu MP3', dur: 1500 },
];

function Generating({ data, contact, onDone }) {
  const [stage, setStage] = uS_F(0);
  const [songResult, setSongResult] = uS_F(undefined); // undefined=esperando, null=error, obj=ok

  // Llama al backend — espera la URL real de la canción
  uE_F(() => {
    if (!data || !contact?.phone) return;
    fetch('/api/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ data, whatsapp: contact.phone }),
    })
      .then(r => r.json())
      .then(result => setSongResult(result.song || null))
      .catch(() => setSongResult(null));
  }, []);

  // Animación de etapas (independiente del backend)
  uE_F(() => {
    if (stage >= GEN_STAGES.length) return;
    const t = setTimeout(() => setStage(s => s + 1), GEN_STAGES[stage].dur);
    return () => clearTimeout(t);
  }, [stage]);

  // Avanza a éxito cuando AMBOS terminan: animación y canción lista
  uE_F(() => {
    if (songResult !== undefined && stage >= GEN_STAGES.length) onDone(songResult);
  }, [songResult, stage]);

  const animDone = stage >= GEN_STAGES.length;

  return (
    <div className="gen-screen">
      <div className="hero-bg"><div className="hero-grid-bg" /></div>
      <div className="gen-card page-enter" style={{ position: 'relative', zIndex: 2 }}>
        <div className="gen-orb">
          <div className="gen-orb-core" />
        </div>
        <h2 className="gen-h">Estamos componiendo<br />tu <em>éxito</em>…</h2>
        {animDone ? (
          <p className="gen-p" style={{ color: 'var(--accent)' }}>
            ⏳ Masterizando el audio final… ya casi está 🎵
          </p>
        ) : (
          <p className="gen-p">Esto toma unos 2 minutos. Te avisamos al WhatsApp cuando esté lista.</p>
        )}

        <div className="gen-stages">
          {GEN_STAGES.map((g, i) => (
            <div key={i} className={`gen-stage ${i < stage ? 'done' : ''} ${i === stage ? 'active' : ''}`}>
              <div className="gen-stage-dot" />
              <div>
                <div style={{ fontWeight: 500 }}>{g.t}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{g.s}</div>
              </div>
              <div className="gen-stage-time">
                {i < stage ? '✓' : i === stage ? `${(g.dur / 1000).toFixed(1)}s` : `~${(g.dur / 1000).toFixed(0)}s`}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────── SUCCESS ───────
function SuccessSongCard({ song, index, data, label }) {
  const audioRef = uRef_F(null);
  const [playing, setPlaying] = uS_F(false);
  const [progress, setProgress] = uS_F(0);
  const [duration, setDuration] = uS_F(0);

  const fmtTime = (s) => `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, '0')}`;

  const togglePlay = () => {
    if (!audioRef.current) return;
    if (playing) { audioRef.current.pause(); setPlaying(false); }
    else { audioRef.current.play().then(() => setPlaying(true)).catch(() => {}); }
  };

  const handleSeek = (p) => {
    if (!audioRef.current) return;
    audioRef.current.currentTime = p * (audioRef.current.duration || 0);
    setProgress(p);
  };

  const handleDownload = () => {
    if (!song?.audioUrl) return;
    const suffix = index > 1 ? `-v${index}` : '';
    const name = encodeURIComponent(`SuenaBacan-${data.name || 'cancion'}${suffix}`);
    const a = document.createElement('a');
    a.href = `/api/download?url=${encodeURIComponent(song.audioUrl)}&name=${name}`;
    a.click();
  };

  const songId = song?.id ? String(song.id).slice(-4).toUpperCase() : String(index * 1111);

  return (
    <div className="prompt-card" style={{ padding: 24, marginBottom: 16 }}>
      {song?.audioUrl && (
        <audio
          ref={audioRef}
          src={song.audioUrl}
          onTimeUpdate={() => { if (audioRef.current) setProgress(audioRef.current.currentTime / (audioRef.current.duration || 1)); }}
          onLoadedMetadata={() => { if (audioRef.current) setDuration(audioRef.current.duration); }}
          onEnded={() => setPlaying(false)}
        />
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
        <button className="play-btn" onClick={togglePlay} disabled={!song?.audioUrl}>
          {playing ? <Icon.Pause /> : <Icon.Play />}
        </button>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 500, fontSize: 16 }}>{label || song?.title || `Pa' ${data.name || 'ti'}`}</div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
            SUENA-{songId} · {duration ? fmtTime(duration) : '–:––'}
          </div>
        </div>
        {duration > 0 && (
          <span style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
            {fmtTime(progress * duration)} / {fmtTime(duration)}
          </span>
        )}
      </div>
      <Waveform seed={index * 42} progress={progress} animated={playing} onSeek={handleSeek} />
      <button className="btn btn-primary" style={{ marginTop: 14 }} onClick={handleDownload} disabled={!song?.audioUrl}>
        <Icon.Download /> Descargar MP3
      </button>
    </div>
  );
}

function Success({ data, songs, lyrics, planId, contact, onRestart }) {
  const songList = Array.isArray(songs) ? songs.filter(Boolean) : (songs ? [songs] : []);
  const [wpStatus, setWpStatus] = uS_F('sending');
  const [videoStatus, setVideoStatus] = uS_F('idle');
  const hasVideo = planId === 'video' || planId === 'regalazo';
  const hasBothSongs = songList.length > 1;
  const videoSelection = contact?.videoSel || 'v1';

  const generateOneVideo = async (song, suffix) => {
    const r = await fetch('/api/video', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ data, lyrics, song, planId }),
    });
    if (!r.ok) { const e = await r.json(); throw new Error(e.error); }
    const blob = await r.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `SuenaBacan-${data.name || 'video'}${suffix}.mp4`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const handleGenerateVideo = async () => {
    setVideoStatus('loading');
    try {
      if (videoSelection === 'both') {
        await generateOneVideo(songList[0], '-v1');
        await generateOneVideo(songList[1], '-v2');
      } else {
        const song = videoSelection === 'v2' ? songList[1] : songList[0];
        await generateOneVideo(song, hasBothSongs ? `-${videoSelection}` : '');
      }
      setVideoStatus('idle');
    } catch (e) {
      console.error('Video error:', e.message);
      setVideoStatus('error');
    }
  };

  uE_F(() => {
    if (!songList.length || !contact?.phone) { setWpStatus('error'); return; }
    Promise.all(
      songList.map(song =>
        fetch('/api/deliver', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ song, whatsapp: contact.phone, data }),
        }).then(r => r.json())
      )
    )
      .then(results => setWpStatus(results.every(r => r.ok) ? 'sent' : 'error'))
      .catch(() => setWpStatus('error'));
  }, []);

  const multiSong = songList.length > 1;

  return (
    <section className="sec" style={{ paddingTop: 120 }}>
      <div className="sec-inner">
        <div className="form-wrap page-enter">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'var(--accent)', display: 'grid', placeItems: 'center', color: 'var(--accent-ink)' }}>
              <Icon.Check size={18} />
            </div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
              {multiSong ? `${songList.length} canciones listas` : 'Canción lista'}
            </span>
          </div>
          <h2 className="form-q">¡Quedó <em>la raja</em>!</h2>
          <p className="form-help">
            {multiSong
              ? <>Tus <strong style={{ color: 'var(--ink)' }}>{songList.length} versiones</strong> para <strong style={{ color: 'var(--ink)' }}>{data.name || 'tu persona'}</strong> están listas. También te las enviamos por WhatsApp.</>
              : <>Tu canción para <strong style={{ color: 'var(--ink)' }}>{data.name || 'tu persona'}</strong> está lista. También te la enviamos por WhatsApp.</>
            }
          </p>

          <div className="prompt-card" style={{ padding: 20, marginBottom: 24 }}>
            <div className="success-art" style={{ background: 'linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%)', position: 'relative' }}>
              <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: 'var(--accent-ink)' }}>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 36, lineHeight: 1 }}>Pa'</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1, marginTop: 4 }}>{(data.name || 'Ti').toUpperCase()}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, marginTop: 12, opacity: 0.7 }}>SUENABACAN · {new Date().toLocaleDateString('es-CL')}</div>
                </div>
              </div>
            </div>
          </div>

          {songList.map((song, i) => (
            <SuccessSongCard
              key={i}
              song={song}
              index={i + 1}
              data={data}
              label={multiSong ? `Versión ${i + 1} — ${song?.title || `Pa' ${data.name || 'ti'}`}` : (song?.title || `Pa' ${data.name || 'ti'}`)}
            />
          ))}

          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 8 }}>
            <button className="btn btn-ghost btn-lg" style={{ cursor: 'default', opacity: wpStatus === 'sending' ? 0.5 : 1 }}>
              <Icon.WhatsApp size={14} />
              {wpStatus === 'sending' && ' Enviando por WhatsApp…'}
              {wpStatus === 'sent' && ` ${multiSong ? 'Versiones enviadas' : 'Enviado'} a WhatsApp ✓`}
              {wpStatus === 'error' && ' Error de envío — revisa el número'}
            </button>
          </div>

          {hasVideo && (
            <div style={{ marginTop: 24, padding: 20, borderRadius: 12, background: 'linear-gradient(135deg, color-mix(in oklab, var(--accent) 15%, var(--bg-2)), var(--bg-2))', border: '1px solid color-mix(in oklab, var(--accent) 40%, transparent)' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--accent)', marginBottom: 8 }}>🎬 Video Bacán incluido en tu plan</div>
              <p style={{ fontSize: 14, color: 'var(--ink-2)', marginBottom: 14 }}>
                Video vertical 9:16 con portada IA y subtítulos — listo para Reels, TikTok y Stories. Tarda ~2 min.
              </p>

              {videoStatus === 'error' && (
                <div style={{ marginBottom: 12, padding: '8px 12px', background: 'rgba(255,80,80,0.1)', border: '1px solid rgba(255,80,80,0.3)', borderRadius: 6, fontSize: 13, color: '#c0392b' }}>
                  ⚠️ No se pudo generar el video. Intenta de nuevo.
                </div>
              )}
              <button
                className="btn btn-primary btn-lg"
                onClick={handleGenerateVideo}
                disabled={videoStatus === 'loading' || !songList[0]?.audioUrl}
              >
                {videoStatus === 'loading'
                  ? `⏳ Generando video${videoSelection === 'both' ? 's' : ''}…`
                  : `🎬 Generar y Descargar Video${videoSelection === 'both' ? 's' : ''}`}
              </button>
            </div>
          )}

          {/* PDF con letra — disponible en todos los planes */}
          <PDFSection data={data} lyrics={lyrics} />

          {planId === 'regalazo' && (
            <GiftCardSection data={data} planId={planId} />
          )}

          <div style={{ marginTop: 32, display: 'flex', gap: 10 }}>
            <button className="btn btn-ghost" onClick={onRestart}>Crear otra canción</button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────── PDF LETRA ───────
function PDFSection({ data, lyrics }) {
  const [status, setStatus] = uS_F('idle');

  const handleDownload = async () => {
    setStatus('loading');
    try {
      const r = await fetch('/api/pdf', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ data, lyrics }),
      });
      if (!r.ok) throw new Error();
      const blob = await r.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `Letra-${data.name || 'cancion'}.pdf`;
      a.click();
      URL.revokeObjectURL(url);
      setStatus('idle');
    } catch {
      setStatus('error');
    }
  };

  return (
    <div style={{
      marginTop: 20, padding: 20, borderRadius: 12,
      background: 'color-mix(in oklab, var(--bg-2) 80%, var(--bg))',
      border: '1px solid color-mix(in oklab, var(--ink-3) 20%, transparent)',
    }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--ink-3)', marginBottom: 8 }}>
        📄 Letra en PDF
      </div>
      <p style={{ fontSize: 14, color: 'var(--ink-2)', marginBottom: 14 }}>
        Descarga la letra de la canción en un PDF personalizado y bien presentado — para imprimir o guardar.
      </p>
      {status === 'error' && (
        <div style={{ marginBottom: 10, padding: '8px 12px', background: 'rgba(255,80,80,0.1)', border: '1px solid rgba(255,80,80,0.3)', borderRadius: 6, fontSize: 13, color: '#c0392b' }}>
          ⚠️ No se pudo generar el PDF. Intenta de nuevo.
        </div>
      )}
      <button
        className="btn btn-ghost btn-lg"
        onClick={handleDownload}
        disabled={status === 'loading'}
      >
        {status === 'loading' ? '⏳ Generando PDF…' : '📄 Descargar letra en PDF'}
      </button>
    </div>
  );
}

// ─────── TARJETA DIGITAL ───────
function GiftCardSection({ data, planId }) {
  const [status, setStatus] = uS_F('idle'); // idle | loading | error

  const handleDownload = async () => {
    setStatus('loading');
    try {
      const r = await fetch('/api/giftcard', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ data, planId }),
      });
      if (!r.ok) throw new Error('Error generando tarjeta');
      const blob = await r.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `TarjetaRegalo-${data.name || 'regalo'}.jpg`;
      a.click();
      URL.revokeObjectURL(url);
      setStatus('idle');
    } catch (e) {
      console.error(e);
      setStatus('error');
    }
  };

  return (
    <div style={{
      marginTop: 24, padding: 20, borderRadius: 12,
      background: 'linear-gradient(135deg, rgba(245,158,11,0.12), rgba(139,92,246,0.10))',
      border: '1px solid rgba(245,158,11,0.35)',
    }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#f59e0b', marginBottom: 8 }}>
        🎁 Tarjeta digital de regalo
      </div>
      <p style={{ fontSize: 14, color: 'var(--ink-2)', marginBottom: 14 }}>
        Descarga una tarjeta personalizada para <strong style={{ color: 'var(--ink)' }}>{data.name}</strong> — imprímela o envíala por WhatsApp junto con la canción.
      </p>
      {status === 'error' && (
        <div style={{ marginBottom: 10, padding: '8px 12px', background: 'rgba(255,80,80,0.1)', border: '1px solid rgba(255,80,80,0.3)', borderRadius: 6, fontSize: 13, color: '#c0392b' }}>
          ⚠️ No se pudo generar la tarjeta. Intenta de nuevo.
        </div>
      )}
      <button
        className="btn btn-lg"
        style={{ background: 'linear-gradient(90deg,#f59e0b,#a78bfa)', color: '#000', fontWeight: 700, border: 'none' }}
        onClick={handleDownload}
        disabled={status === 'loading'}
      >
        {status === 'loading' ? '⏳ Generando tarjeta…' : '🎁 Descargar Tarjeta de Regalo'}
      </button>
    </div>
  );
}

// ─────── LYRICS GEN ───────
function LyricsGen({ data, onDone }) {
  uE_F(() => {
    fetch('/api/lyrics', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ data }),
    })
      .then(r => r.json())
      .then(result => onDone(result.lyrics || ''))
      .catch(() => onDone(''));
  }, []);

  return (
    <div className="gen-screen">
      <div className="hero-bg"><div className="hero-grid-bg" /></div>
      <div className="gen-card page-enter" style={{ position: 'relative', zIndex: 2 }}>
        <div className="gen-orb"><div className="gen-orb-core" /></div>
        <h2 className="gen-h">Escribiendo la <em>letra</em>…</h2>
        <p className="gen-p">Nuestra IA está componiendo una letra personalizada para <strong>{data.name}</strong>. Tarda unos segundos.</p>
        <div className="gen-stages">
          {[
            { t: 'Analizando los datos', s: 'Nombre, ocasión, anécdotas, estilo…' },
            { t: 'Componiendo la letra', s: 'Rimas, estrofas y coro pegajoso' },
          ].map((g, i) => (
            <div key={i} className={`gen-stage ${i === 0 ? 'done' : 'active'}`}>
              <div className="gen-stage-dot" />
              <div>
                <div style={{ fontWeight: 500 }}>{g.t}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{g.s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────── LYRICS REVIEW ───────
function LyricsReview({ data, lyrics, onApprove, onRegenerate, onBack }) {
  const [text, setText] = uS_F(lyrics);
  const [instructions, setInstructions] = uS_F('');
  const [revising, setRevising] = uS_F(false);
  const [reviseError, setReviseError] = uS_F('');
  uE_F(() => setText(lyrics), [lyrics]);

  const reviseWithAI = async () => {
    if (!instructions.trim()) return;
    setRevising(true);
    setReviseError('');
    try {
      const r = await fetch('/api/revise-lyrics', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ lyrics: text, instructions }),
      });
      const result = await r.json();
      if (result.lyrics) {
        setText(result.lyrics);
        setInstructions('');
      } else {
        setReviseError(result.error || 'No se pudo aplicar el cambio. Intenta de nuevo.');
      }
    } catch (e) {
      setReviseError('Error de conexión. ¿Está corriendo el servidor?');
    } finally {
      setRevising(false);
    }
  };

  return (
    <section className="sec" style={{ paddingTop: 120 }}>
      <div className="sec-inner">
        <div className="form-wrap page-enter">
          <div className="form-step-label">Tu letra</div>
          <h2 className="form-q">¿Cómo suena la <em>letra</em>?</h2>
          <p className="form-help">Revisa lo que compusimos para <strong style={{ color: 'var(--ink)' }}>{data.name}</strong>. Edita directamente o pídele cambios a la IA abajo.</p>

          <div className="prompt-card" style={{ padding: 0, overflow: 'hidden' }}>
            <textarea
              className="textarea"
              style={{ minHeight: 340, fontFamily: 'var(--font-mono)', fontSize: 13, lineHeight: 1.9, padding: 20, border: 'none', borderRadius: 0, resize: 'vertical' }}
              value={text}
              onChange={e => setText(e.target.value)}
            />
          </div>

          <div style={{ marginTop: 16, padding: 16, background: 'var(--bg-2)', borderRadius: 10, border: '1px solid var(--line)' }}>
            <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10 }}>
              ✏️ Pídele un cambio a la IA
            </div>
            <textarea
              className="textarea"
              style={{ minHeight: 80, fontSize: 13, marginBottom: 10, resize: 'vertical' }}
              placeholder="Ej: Que el coro sea más alegre, agrega una parte sobre su trabajo, que mencione su deporte favorito, cambia el ritmo del puente…"
              value={instructions}
              onChange={e => { setInstructions(e.target.value); setReviseError(''); }}
              disabled={revising}
            />
            {reviseError && (
              <div style={{ marginBottom: 10, padding: '8px 12px', background: 'rgba(255,80,80,0.1)', border: '1px solid rgba(255,80,80,0.3)', borderRadius: 6, fontSize: 13, color: '#c0392b' }}>
                ⚠️ {reviseError}
              </div>
            )}
            <button
              className="btn btn-ghost"
              onClick={reviseWithAI}
              disabled={!instructions.trim() || revising}
            >
              {revising ? '⏳ Modificando con IA…' : '✨ Aplicar cambios con IA'}
            </button>
          </div>

          <div className="form-nav" style={{ marginTop: 20 }}>
            <button className="btn btn-ghost" onClick={onBack}><Icon.ArrowL /> Atrás</button>
            <button className="btn btn-ghost" onClick={onRegenerate}>↺ Nueva letra</button>
            <button className="btn btn-primary" onClick={() => onApprove(text)} disabled={!text.trim() || revising}>
              Se ve bacán <Icon.Arrow />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────── SONG GEN (versión 1 — muestra al tiro) ───────────────
const SONG_GEN_STAGES = [
  { t: 'Procesando la letra', s: 'Ajustando rimas y métricas', dur: 3000 },
  { t: 'Componiendo la música', s: 'Acordes, ritmo e instrumentos', dur: 5000 },
  { t: 'Grabando la voz', s: 'Primera interpretación', dur: 4000 },
  { t: 'Masterizando', s: 'Sonido limpio de estudio', dur: 3000 },
];

function SongGen({ data, lyrics, onDone }) {
  const [stage, setStage] = uS_F(0);
  const [song1, setSong1] = uS_F(undefined); // undefined=esperando, null=error, obj=ok

  uE_F(() => {
    fetch('/api/preview', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ data, lyrics }),
    })
      .then(r => r.json())
      .then(result => setSong1(result.song || null))
      .catch(() => setSong1(null));
  }, []);

  uE_F(() => {
    if (stage >= SONG_GEN_STAGES.length) return;
    const t = setTimeout(() => setStage(s => s + 1), SONG_GEN_STAGES[stage].dur);
    return () => clearTimeout(t);
  }, [stage]);

  // Avanza tan pronto como AMBOS terminan: animación y canción 1 lista
  uE_F(() => {
    if (song1 !== undefined && stage >= SONG_GEN_STAGES.length) onDone(song1 ? [song1] : []);
  }, [song1, stage]);

  const animDone = stage >= SONG_GEN_STAGES.length;

  return (
    <div className="gen-screen">
      <div className="hero-bg"><div className="hero-grid-bg" /></div>
      <div className="gen-card page-enter" style={{ position: 'relative', zIndex: 2 }}>
        <div className="gen-orb"><div className="gen-orb-core" /></div>
        <h2 className="gen-h">Componiendo tu <em>canción</em>…</h2>
        {animDone
          ? <p className="gen-p" style={{ color: 'var(--accent)' }}>⏳ Masterizando… ya casi está 🎵</p>
          : <p className="gen-p">Tarda ~2 minutos. En cuanto esté lista la versión 1 te la mostramos al tiro.</p>
        }
        <div className="gen-stages">
          {SONG_GEN_STAGES.map((g, i) => (
            <div key={i} className={`gen-stage ${i < stage ? 'done' : ''} ${i === stage ? 'active' : ''}`}>
              <div className="gen-stage-dot" />
              <div>
                <div style={{ fontWeight: 500 }}>{g.t}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{g.s}</div>
              </div>
              <div className="gen-stage-time">
                {i < stage ? '✓' : i === stage ? `${(g.dur / 1000).toFixed(1)}s` : `~${(g.dur / 1000).toFixed(0)}s`}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────── SONG PREVIEW ───────
const DEMO_EVERY = 40; // segundos entre marcas de agua DEMO

function SongPreviewCard({ song, index, isOtherPlaying, onPlayStart, onPlayStop, onChoose }) {
  const audioRef = uRef_F(null);
  const [playing, setPlaying] = uS_F(false);
  const [progress, setProgress] = uS_F(0);
  const [duration, setDuration] = uS_F(0);
  const [showDemo, setShowDemo] = uS_F(false);
  const lastDemoIdx = uRef_F(0);

  const triggerDemo = () => {
    setShowDemo(true);
    setTimeout(() => setShowDemo(false), 2500);
    if (window.speechSynthesis) {
      window.speechSynthesis.cancel();
      const u = new SpeechSynthesisUtterance('DEMO');
      u.lang = 'es-ES'; u.volume = 0.9; u.rate = 0.85;
      window.speechSynthesis.speak(u);
    }
  };

  uE_F(() => {
    if (isOtherPlaying && playing && audioRef.current) {
      audioRef.current.pause();
      setPlaying(false);
    }
  }, [isOtherPlaying]);

  const togglePlay = () => {
    if (!audioRef.current) return;
    if (playing) { audioRef.current.pause(); setPlaying(false); onPlayStop(); }
    else {
      lastDemoIdx.current = 0;
      audioRef.current.play().then(() => { setPlaying(true); onPlayStart(); }).catch(() => {});
    }
  };

  return (
    <div className="prompt-card" style={{ padding: 20, marginBottom: 16, position: 'relative', overflow: 'hidden' }}>
      {showDemo && (
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 10, pointerEvents: 'none', borderRadius: 'inherit' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 72, fontWeight: 700, color: '#fff', letterSpacing: '0.12em', opacity: 0.95, textShadow: '0 2px 24px rgba(0,0,0,0.6)' }}>DEMO</span>
        </div>
      )}
      <audio
        ref={audioRef}
        src={song?.audioUrl}
        onLoadedMetadata={() => { if (audioRef.current) setDuration(audioRef.current.duration); }}
        onTimeUpdate={() => {
          if (!audioRef.current) return;
          const t = audioRef.current.currentTime;
          const dur = audioRef.current.duration || duration || 1;
          setProgress(t / dur);
          const idx = Math.floor(t / DEMO_EVERY);
          if (idx >= 1 && idx > lastDemoIdx.current) {
            lastDemoIdx.current = idx;
            triggerDemo();
          }
        }}
        onEnded={() => { setPlaying(false); onPlayStop(); }}
      />
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 12 }}>
        <button className="play-btn" onClick={togglePlay}>
          {playing ? <Icon.Pause /> : <Icon.Play />}
        </button>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 15 }}>Versión {index}</div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
            Vista previa completa · marca de agua cada {DEMO_EVERY}s
          </div>
        </div>
      </div>
      <Waveform seed={index * 17} progress={progress} animated={playing} />
      <div style={{ marginTop: 12, padding: '8px 12px', background: 'color-mix(in oklab, var(--accent) 10%, var(--bg-2))', borderRadius: 6, fontSize: 12, color: 'var(--ink-3)', textAlign: 'center' }}>
        🔒 Desbloquea sin marca de agua pagando
      </div>
      <button className="btn btn-primary btn-block" style={{ marginTop: 10 }} onClick={onChoose}>
        ✓ Elegir versión {index} y pagar
      </button>
    </div>
  );
}

function SongPreview({ data, lyrics, songs, onChoose, onEditLyrics, onAddSong }) {
  const [playingIdx, setPlayingIdx] = uS_F(null);
  const [loadingV2, setLoadingV2] = uS_F(false);
  const fetchedV2 = uRef_F(false);

  // Buscar versión 2 automáticamente en segundo plano
  uE_F(() => {
    if (songs.length !== 1 || fetchedV2.current || !lyrics) return;
    fetchedV2.current = true;
    setLoadingV2(true);
    fetch('/api/preview/second', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ data, lyrics }),
    })
      .then(r => r.json())
      .then(result => { if (result.song) onAddSong(result.song); })
      .catch(() => {})
      .finally(() => setLoadingV2(false));
  }, [songs.length]);

  if (!songs || songs.length === 0) {
    return (
      <section className="sec" style={{ paddingTop: 120 }}>
        <div className="sec-inner">
          <div className="form-wrap page-enter">
            <h2 className="form-q">Hubo un <em>problema</em></h2>
            <p className="form-help">No se pudo generar la canción. Puedes intentar de nuevo modificando la letra.</p>
            <button className="btn btn-primary" onClick={onEditLyrics}>↺ Intentar de nuevo</button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="sec" style={{ paddingTop: 120 }}>
      <div className="sec-inner">
        <div className="form-wrap page-enter">
          <div className="form-step-label">Vista previa</div>
          <h2 className="form-q">Elige tu <em>versión favorita</em></h2>
          <p className="form-help">
            Escucha la canción completa con marca de agua. Al elegir vas al pago y recibes la versión limpia por WhatsApp.
          </p>

          {songs.map((song, i) => (
            <SongPreviewCard
              key={i}
              song={song}
              index={i + 1}
              isOtherPlaying={playingIdx !== null && playingIdx !== i}
              onPlayStart={() => setPlayingIdx(i)}
              onPlayStop={() => setPlayingIdx(null)}
              onChoose={() => onChoose(song)}
            />
          ))}

          {loadingV2 && (
            <div className="prompt-card" style={{ padding: 20, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 16, opacity: 0.7 }}>
              <div className="gen-orb" style={{ width: 40, height: 40, minWidth: 40 }}><div className="gen-orb-core" /></div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15 }}>Versión 2</div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>Generando segunda alternativa… (~2 min)</div>
              </div>
            </div>
          )}

          {songs.length >= 2 && (
            <div onClick={() => onChoose(songs)} style={{ cursor: 'pointer', marginTop: 8, marginBottom: 4, borderRadius: 14, background: 'linear-gradient(135deg, var(--accent) 0%, var(--accent-2, #b8f55a) 100%)', padding: '24px 24px 20px', position: 'relative', overflow: 'hidden', boxShadow: '0 4px 24px color-mix(in oklab, var(--accent) 40%, transparent)' }}>
              <div style={{ position: 'absolute', top: -20, right: -20, fontSize: 120, opacity: 0.08, lineHeight: 1, pointerEvents: 'none' }}>🎵</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--accent-ink)', opacity: 0.75, marginBottom: 6 }}>OFERTA ESPECIAL</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, color: 'var(--accent-ink)', lineHeight: 1.1, marginBottom: 6 }}>
                Llevarme las 2 versiones
              </div>
              <div style={{ fontSize: 14, color: 'var(--accent-ink)', opacity: 0.85, marginBottom: 16 }}>
                Recibe ambas canciones por WhatsApp · tú eliges cuál compartir
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
                <div style={{ background: 'rgba(0,0,0,0.18)', borderRadius: 8, padding: '8px 16px', display: 'inline-flex', alignItems: 'baseline', gap: 6 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--accent-ink)', opacity: 0.7 }}>solo</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, color: 'var(--accent-ink)' }}>+$1.500</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent-ink)', opacity: 0.7 }}>CLP extra</span>
                </div>
                <div style={{ background: 'var(--accent-ink)', color: 'var(--accent)', fontWeight: 700, fontSize: 15, borderRadius: 8, padding: '10px 22px', fontFamily: 'var(--font-display)' }}>
                  ✓ Quiero las 2 →
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FormFlow, PreviewPrompt, Checkout, Generating, Success, LyricsGen, LyricsReview, SongGen, SongPreview });