const ScreenInicio = ({ go, user, isNewUser }) => {
  if (isNewUser) return <InicioD0 go={go} user={user}/>;
  return <InicioReturning go={go} user={user}/>;
};

// ====== D0 — first-time user ======
const InicioD0 = ({ go, user }) => {
  const recs = VELYX.trilhas.slice(0, 3);

  return (
    <div className="max-w-[1360px] mx-auto px-10 py-10" data-screen-label="01 Início · D0">
      {/* Greeting */}
      <div className="mb-10 flex items-end justify-between gap-6">
        <div>
          <div className="text-mute text-[12px] font-mono uppercase tracking-[0.12em] mb-2">Bem-vinda</div>
          <h1 className="text-[36px] leading-[1.05] font-semibold tracking-tightest text-ink max-w-2xl">
            Oi, {user.name}. Vamos começar?
          </h1>
          <p className="text-mute text-[15px] leading-relaxed mt-3 max-w-xl">
            Seis trilhas, do zero a uma operação de atendimento com IA em produção. Escolha por onde quer começar — dá pra mudar depois.
          </p>
        </div>
      </div>

      {/* Roadmap hero */}
      <Card className="p-8 mb-8 relative overflow-hidden">
        <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent"/>
        <div className="grid grid-cols-[1.2fr_1fr] gap-10 items-center">
          <div>
            <div className="text-accent text-[11px] font-mono uppercase tracking-[0.12em] mb-3">Sua jornada</div>
            <h2 className="text-[26px] font-semibold tracking-tightest text-ink leading-[1.15] mb-3">
              Em 11 semanas, seu time opera atendimento com IA em produção.
            </h2>
            <p className="text-mute text-[14px] leading-relaxed mb-6 max-w-md">
              Começa pela base conceitual, vai até governança. Não é treinamento teórico — cada trilha tem playbook pronto pra adaptar.
            </p>
            <div className="flex items-center gap-3">
              <Button variant="primary" size="lg" icon={<I.play size={14}/>}
                onClick={() => go({name:'trilha', id:'fundamentos'})}>
                Começar pela primeira trilha
              </Button>
              <Button variant="secondary" size="lg" onClick={() => go({name:'trilhas'})}>
                Ver todas
              </Button>
            </div>
          </div>

          {/* Trilha roadmap visual */}
          <div className="space-y-2">
            {VELYX.trilhas.map((t, i) => (
              <div key={t.id} className="flex items-center gap-3">
                <div className="font-mono text-[10.5px] text-mute2 w-6">{t.num}</div>
                <div className={`w-6 h-6 rounded-full shrink-0 flex items-center justify-center ${i === 0 ? 'bg-accent text-black' : 'hairline2 text-mute2'}`}>
                  {i === 0 ? <I.play size={10}/> : <div className="w-1.5 h-1.5 rounded-full bg-current"/>}
                </div>
                <div className={`text-[12.5px] truncate ${i === 0 ? 'text-ink font-medium' : 'text-mute'}`}>
                  {t.name}
                </div>
              </div>
            ))}
          </div>
        </div>
      </Card>

      {/* 3 recommended */}
      <section className="mb-10">
        <div className="flex items-end justify-between mb-4">
          <h2 className="text-[18px] font-semibold text-ink tracking-tightest">Três pontos de partida comuns</h2>
          <span className="text-mute2 text-[11.5px] font-mono">escolha o que faz sentido pro seu contexto</span>
        </div>
        <div className="grid grid-cols-3 gap-4">
          {[
            { t: recs[0], reason: 'Nunca mexeu com IA generativa.', fit: 'Começo do zero' },
            { t: recs[1], reason: 'Já usa IA, quer desenhar fluxo de verdade.', fit: 'Já experimentou' },
            { t: VELYX.trilhas[2], reason: 'Opera WhatsApp e precisa de produto agora.', fit: 'Urgência prática' },
          ].map(({ t, reason, fit }, i) => (
            <Card key={i} hover onClick={() => go({name:'trilha', id:t.id})} className="p-5">
              <Badge tone="neutral" className="mb-4">{fit}</Badge>
              <h3 className="text-[16px] font-semibold text-ink tracking-tightest leading-snug mb-2">{t.name}</h3>
              <p className="text-mute text-[12.5px] leading-relaxed mb-4">{reason}</p>
              <div className="flex items-center justify-between text-mute text-[11.5px] pt-3 border-t border-line">
                <span>{t.modules} módulos · {t.hours}</span>
                <I.arrowRight size={13}/>
              </div>
            </Card>
          ))}
        </div>
      </section>

      {/* What to expect */}
      <section>
        <h2 className="text-[18px] font-semibold text-ink tracking-tightest mb-4">O que você tem aqui dentro</h2>
        <div className="grid grid-cols-4 gap-3">
          {[
            ['route', 'Trilhas', '6 trilhas · 64 módulos'],
            ['book', 'Playbooks', 'Por setor, prontos pra adaptar'],
            ['library', 'Biblioteca', 'Prompts, templates, checklists'],
            ['pulse', 'Conteúdo vivo', 'O que mudou na semana'],
          ].map(([icon, title, desc]) => {
            const Ic = I[icon];
            return (
              <div key={title} className="p-4 rounded-[10px] hairline">
                <Ic size={16} className="text-accent mb-3"/>
                <div className="text-ink text-[13.5px] font-medium mb-1">{title}</div>
                <div className="text-mute text-[12px]">{desc}</div>
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
};

// ====== Returning user ======
const InicioReturning = ({ go, user }) => {
  const { feed, stats } = VELYX;
  const currentModule = VELYX.modulos.fundamentos.find(m => m.current);
  const currentTrilha = VELYX.trilhas.find(t => t.id === 'fundamentos');
  const bars = [0.4, 1.1, 0.0, 0.7, 1.5, 0.9, 1.2];
  const max = Math.max(...bars);

  return (
    <div className="max-w-[1360px] mx-auto px-10 py-10" data-screen-label="01 Início">
      {/* Greeting */}
      <div className="mb-8 flex items-end justify-between gap-6">
        <div>
          <div className="text-mute text-[12px] font-mono uppercase tracking-[0.12em] mb-2">
            Seg, 20 abr · 09:14
          </div>
          <h1 className="text-[34px] leading-[1.05] font-semibold tracking-tightest text-ink">
            Oi, {user.name}. Pronto pra continuar?
          </h1>
        </div>
        <div className="flex items-center gap-2">
          <button className="h-9 px-3 rounded-[6px] text-mute hover:text-ink hover:bg-white/[0.04] t-fast flex items-center gap-2 text-[13px]">
            <I.bell size={15}/> <span className="relative">Novidades <span className="absolute -top-1 -right-2 w-1.5 h-1.5 rounded-full bg-accent"/></span>
          </button>
        </div>
      </div>

      {/* Continue where you left off */}
      <Card className="p-1.5 mb-5 bg-panel">
        <div className="flex gap-5 items-stretch">
          <div className="relative w-[260px] aspect-[16/10] rounded-[8px] overflow-hidden shrink-0 bg-[#0E0E10] hairline2">
            <div className="absolute inset-0 stripes"/>
            <div className="absolute inset-0 dotbg opacity-60"/>
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="w-12 h-12 rounded-full bg-accent text-black flex items-center justify-center t-fast hover:scale-105">
                <I.playFill size={18}/>
              </div>
            </div>
            <div className="absolute top-2.5 left-2.5 font-mono text-[10px] text-mute2 uppercase">Aula 06 · 19min</div>
            <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-white/[0.08]">
              <div className="h-full bg-accent" style={{ width: '38%' }}/>
            </div>
          </div>
          <div className="flex-1 flex flex-col justify-between py-4 pr-5 min-w-0">
            <div>
              <div className="flex items-center gap-2 mb-2">
                <Badge tone="neutral">Continue</Badge>
                <span className="text-mute2 text-[12px]">·</span>
                <span className="text-mute text-[12.5px]">{currentTrilha.name}</span>
              </div>
              <h2 className="text-[22px] leading-[1.15] font-semibold tracking-tightest text-ink mb-1.5">
                {currentModule.title}
              </h2>
              <p className="text-mute text-[13.5px] leading-relaxed max-w-xl">
                Quando é hora de escalar pro humano — e como desenhar esse ponto de transição sem que o cliente sinta que caiu em outra fila.
              </p>
            </div>
            <div className="flex items-center justify-between gap-6">
              <div className="flex-1 max-w-sm">
                <div className="flex items-center justify-between mb-1.5">
                  <span className="text-mute text-[11.5px]">Progresso na aula</span>
                  <span className="text-ink text-[11.5px] font-mono">38%</span>
                </div>
                <Progress value={0.38}/>
              </div>
              <Button variant="primary" size="md" icon={<I.play size={13}/>}
                onClick={() => go({ name: 'modulo', trilha: 'fundamentos', modulo: 'm6' })}>
                Retomar
              </Button>
            </div>
          </div>
        </div>
      </Card>

      {/* Compact secondary cards — half-height */}
      <div className="grid grid-cols-3 gap-3 mb-10">
        <button onClick={() => go({ name: 'trilha', id: 'arquitetura' })}
          className="flex items-center gap-4 p-4 rounded-[10px] hairline bg-panel hover:bg-panel2 t-fast text-left">
          <div className="w-9 h-9 rounded-[6px] bg-white/[0.04] hairline flex items-center justify-center shrink-0">
            <I.route size={15} className="text-mute"/>
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-mute text-[11px] mb-0.5">Próximo · Trilha 02</div>
            <div className="text-ink text-[13px] font-medium truncate">Guardrails em produção</div>
          </div>
          <I.arrowRight size={13} className="text-mute2"/>
        </button>

        <button onClick={() => go({ name: 'cert' })}
          className="flex items-center gap-4 p-4 rounded-[10px] hairline bg-panel hover:bg-panel2 t-fast text-left">
          <div className="w-9 h-9 rounded-[6px] bg-white/[0.04] hairline flex items-center justify-center shrink-0">
            <I.award size={15} className="text-mute"/>
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-mute text-[11px] mb-0.5">Certificação · 72%</div>
            <div className="text-ink text-[13px] font-medium truncate">Fundamentos em atendimento com IA</div>
          </div>
          <I.arrowRight size={13} className="text-mute2"/>
        </button>

        <button onClick={() => go({ name: 'biblioteca' })}
          className="flex items-center gap-4 p-4 rounded-[10px] hairline bg-panel hover:bg-panel2 t-fast text-left">
          <div className="w-9 h-9 rounded-[6px] bg-white/[0.04] hairline flex items-center justify-center shrink-0">
            <I.library size={15} className="text-mute"/>
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-mute text-[11px] mb-0.5">Biblioteca · 2 novos</div>
            <div className="text-ink text-[13px] font-medium truncate">Artefatos desta semana</div>
          </div>
          <I.arrowRight size={13} className="text-mute2"/>
        </button>
      </div>

      {/* Two-column: Conteúdo vivo (protagonista) + Jornada */}
      <div className="grid grid-cols-[1fr_340px] gap-6">
        <section>
          <div className="flex items-end justify-between mb-4">
            <div>
              <div className="flex items-center gap-2 mb-1.5">
                <span className="relative flex w-1.5 h-1.5">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-60"/>
                  <span className="relative inline-flex rounded-full w-1.5 h-1.5 bg-accent"/>
                </span>
                <span className="text-accent text-[11px] font-mono uppercase tracking-[0.12em]">Conteúdo vivo</span>
              </div>
              <h2 className="text-[22px] font-semibold text-ink tracking-tightest">O que aconteceu essa semana</h2>
            </div>
            <button onClick={() => go({ name: 'feed' })}
              className="text-mute text-[12.5px] hover:text-ink t-fast flex items-center gap-1">
              Ver tudo <I.chevRight size={13}/>
            </button>
          </div>

          <div className="space-y-2">
            {feed.slice(0, 4).map((p, i) => (
              <article key={i}
                onClick={() => {
                  const realIdx = VELYX.feed.findIndex(x => x.title === p.title);
                  go({ name: 'post', idx: realIdx });
                }}
                className="group p-5 rounded-[10px] hairline bg-panel hover:bg-panel2 t-fast cursor-pointer">
                <div className="flex items-center gap-2.5 mb-2">
                  <span className="font-mono text-[10.5px] text-mute2 uppercase tracking-wide">{p.date}</span>
                  <span className="text-mute2 text-[10px]">·</span>
                  <Badge tone={p.tag === 'Modelo novo' || p.tag === 'Nova capacidade' ? 'accent' : 'neutral'}>{p.tag}</Badge>
                </div>
                <h3 className="text-[16px] font-semibold text-ink leading-snug tracking-tightest mb-1.5 group-hover:text-accent t-fast">
                  {p.title}
                </h3>
                <p className="text-mute text-[13px] leading-relaxed line-clamp-2">{p.summary}</p>
              </article>
            ))}
          </div>
        </section>

        <section>
          <div className="mb-4">
            <h2 className="text-[18px] font-semibold text-ink tracking-tightest">Sua jornada</h2>
          </div>

          <Card className="p-5">
            <div className="flex items-end gap-2 mb-1">
              <span className="text-[42px] leading-none font-semibold tracking-tightest text-ink">27</span>
              <span className="text-[18px] text-mute pb-1">%</span>
              <span className="ml-auto text-[11px] font-mono text-mute uppercase">de 64</span>
            </div>
            <div className="text-mute text-[12.5px] mb-5">do programa</div>

            <Progress value={0.27} className="mb-6"/>

            <div className="grid grid-cols-3 gap-2 mb-6">
              <Stat big={stats.horas.toFixed(1)} unit="h" label="estudadas"/>
              <Stat big={stats.modulosConcluidos} label="módulos"/>
              <Stat big={stats.streak} unit="d" label="seguidos"/>
            </div>

            <div>
              <div className="flex items-center justify-between mb-2.5">
                <span className="text-mute text-[11.5px]">Últimos 7 dias</span>
                <span className="text-mute2 text-[11px] font-mono">h/dia</span>
              </div>
              <div className="flex items-end gap-1.5 h-[54px]">
                {bars.map((b, i) => (
                  <div key={i} className="flex-1 flex flex-col items-center gap-1">
                    <div className="w-full rounded-t-[2px] bg-white/[0.08] relative" style={{ height: '100%'}}>
                      <div className="absolute bottom-0 left-0 right-0 bg-accent rounded-t-[2px] t-med"
                           style={{ height: `${Math.max(2, (b/max)*100)}%` }}/>
                    </div>
                    <span className="text-mute2 text-[10px] font-mono">{['t','q','q','s','s','d','s'][i]}</span>
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </section>
      </div>
    </div>
  );
};

const Stat = ({ big, unit, label }) => (
  <div className="py-2 pr-2">
    <div className="flex items-baseline gap-0.5">
      <span className="text-[20px] font-semibold text-ink tracking-tightest">{big}</span>
      {unit && <span className="text-[12px] text-mute">{unit}</span>}
    </div>
    <div className="text-mute text-[11px] mt-0.5">{label}</div>
  </div>
);

window.ScreenInicio = ScreenInicio;