);
}
// ─── Steps definition ────────────────────────────────────────────────────
const TUT_STEPS = [
{
Hero: HeroWelcome,
headline: 'Bienvenido a tu estudio de adoración',
description: 'Prepara las letras del próximo culto en LaVid Valencia. Te muestro cómo en 30 segundos.',
},
{
Hero: HeroSetlist,
headline: 'Tu setlist, domingo a domingo',
description: 'Cada canción que envías aparece aquí, marcada como Lista cuando ya está disponible para proyección.',
},
{
Hero: HeroSearch,
headline: 'Encuentra cualquier canción',
description: 'Buscamos letras y acordes en CifraClub y los enriquecemos con género e información del artista.',
},
{
Hero: HeroModal,
headline: 'Letra, acordes o ambos',
description: 'Revisa la versión que necesitas — solo letra para proyectar, completo para ensayar, acordes para tu banda.',
},
{
Hero: HeroStatus,
headline: 'Listo para proyectar',
description: 'Cuando una canción cambia a candlelight, está disponible en HolyLyrics para todo el equipo de adoración.',
},
];
// ─── Main component ──────────────────────────────────────────────────────
function TutorialScreen({ onComplete, onSkip }) {
const [step, setStep] = React.useState(0);
const [tk, setTk] = React.useState(0);
const next = () => {
if (step >= TUT_STEPS.length - 1) {
onComplete && onComplete();
return;
}
setStep(s => s + 1);
setTk(k => k + 1);
};
const jumpTo = (i) => {
if (i === step) return;
setStep(i);
setTk(k => k + 1);
};
const current = TUT_STEPS[step];
const isLast = step === TUT_STEPS.length - 1;
const Hero = current.Hero;
return (