// Journey.jsx — a jornada de 1 ano (2º sem do 2º ano → 1º sem do 3º ano), timeline com progresso ligado ao scroll
function Journey() {
const railRef = React.useRef(null);
const [fill, setFill] = React.useState(0);
React.useEffect(() => {
const onScroll = () => {
const el = railRef.current;
if (!el) return;
const r = el.getBoundingClientRect();
const vh = window.innerHeight;
// progresso: 0 quando o topo do rail entra na metade da tela, 1 quando o fim passa
const total = r.height + vh * 0.2;
const passed = vh * 0.6 - r.top;
setFill(Math.max(0, Math.min(1, passed / total)));
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const milestones = [
{
letter: 'I', color: 'var(--aurora-blue-500)',
when: '2º ano · 2º semestre', phase: 'Idea',
title: 'A ideia sai do papel.',
body: 'Repertório de IA, exploração de problemas reais e escolha do projeto. A fase fecha com um pitch de conceito defendido diante dos mentores.',
},
{
letter: 'D', color: 'var(--aurora-coral-500)',
when: 'Virada do ano', phase: 'Development',
title: 'O MVP toma forma.',
body: 'Ritmo de estúdio: construir com ferramentas de IA, errar rápido, iterar com feedback de usuários reais e mentoria de quem já constrói IA no mercado.',
},
{
letter: 'L', color: 'var(--aurora-orange-500)',
when: '3º ano · 1º semestre', phase: 'Launch',
title: 'O piloto vai para o mundo.',
body: 'Validação do piloto com usuários reais e fundamentos de negócio na prática: problema, mercado, modelo e métricas, a base do pitch para investidores.',
},
{
letter: '★', color: 'var(--aurora-gold-500)',
when: 'Encerramento', phase: 'Demo Day',
title: 'O palco para quem decide.',
body: 'Cada equipe apresenta produto, resultados e negócio para uma banca de investidores, universidades e comunidade escolar.',
},
];
return (
A jornada
Um ano. Dois semestres. Um lançamento.
O programa acompanha o aluno do 2º semestre do 2º ano até o 1º semestre do 3º ano, o momento exato em que universidades e o mundo começam a olhar para ele.
{/* timeline */}
{/* rail de fundo */}
{/* rail preenchido pelo scroll */}
{milestones.map((m, i) => {
const reached = fill >= (i + 0.5) / milestones.length;
return ;
})}
);
}
function JourneyRow({ m, index, reached }) {
const [ref, seen] = useReveal();
return (