/* timeline.jsx — The 8-quarter contract timeline. Brief's key component.
   Rectangle-block stepper, JetBrains Mono Q-labels, clay → bone progression. */

function CycleTimeline({
  current = 3,         // 1..8 — quarter currently in progress
  states,              // optional override: array of 8 states
  showLabels = true,
  showMeta = true,
  compact = false,
  width = 'auto',
  startDate = '14.SET.2024',
  endDate = '13.SET.2026',
}) {
  // default: 1..current-1 done, current = in-progress, rest = future
  const ss = states || Array.from({length:8}, (_,i)=>{
    if (i+1 < current) return 'done';
    if (i+1 === current) return 'current';
    return 'future';
  });

  const dates = ['Q1·DEZ 24','Q2·MAR 25','Q3·JUN 25','Q4·SET 25','Q5·DEZ 25','Q6·MAR 26','Q7·JUN 26','Q8·SET 26'];

  const h = compact ? 26 : 36;
  const gap = compact ? 4 : 6;

  return (
    <div style={{width}}>
      {/* Header band */}
      {showMeta && (
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: compact?6:10}}>
          <div className="smallcaps tab">Ciclo {current} / 8 · mês {(current-1)*3+1} / 24</div>
          <div className="mono" style={{fontSize:10.5, color:'var(--ink-3)'}}>{startDate} → {endDate}</div>
        </div>
      )}

      {/* The 8 blocks */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(8, 1fr)', gap}}>
        {ss.map((s,i)=>{
          const isCurrent = s === 'current';
          const isDone    = s === 'done';
          const isFailed  = s === 'failed';
          let bg, color, border, label;
          if (isDone)        { bg='var(--clay)';      color='var(--bone)';     border='0.5px solid var(--clay)';      label='✓'; }
          else if (isFailed) { bg='var(--clay-deep)'; color='var(--bone)';     border='0.5px solid var(--clay-deep)'; label='!'; }
          else if (isCurrent){ bg='var(--tobacco)';   color='var(--sand)';     border='0.5px solid var(--tobacco)';   label=null; }
          else               { bg='transparent';      color='var(--ink-3)';    border='0.5px dashed var(--rule)';     label=null; }
          return (
            <div key={i} style={{display:'flex', flexDirection:'column', gap:5}}>
              <div style={{
                height:h, background:bg, border, borderRadius:2,
                color, display:'flex', alignItems:'center', justifyContent:'space-between',
                padding:'0 9px', fontFamily:'var(--mono)', fontSize: compact?10:11,
                position:'relative', overflow:'hidden',
              }}>
                <span style={{textTransform:'uppercase', letterSpacing:0.08}}>Q{i+1}</span>
                {label && <span style={{fontFamily:'var(--display)', fontSize:14, lineHeight:1}}>{label}</span>}
                {isCurrent && (
                  <>
                    <span style={{position:'absolute', right:8, top:'50%', transform:'translateY(-50%)', width:6, height:6, borderRadius:50, background:'var(--sand)', boxShadow:'0 0 0 2px var(--tobacco)'}}/>
                    <span style={{position:'absolute', left:0, bottom:0, height:2, background:'var(--sand)', width:'46%'}} title="46% do trimestre decorrido"/>
                  </>
                )}
              </div>
              {showLabels && (
                <div className="mono" style={{
                  fontSize: compact?8.5:9.5, color: isCurrent?'var(--ink)':'var(--ink-3)',
                  textAlign:'center', letterSpacing:0.06, fontWeight: isCurrent?600:400,
                }}>{dates[i]}</div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function TimelineCard() {
  return (
    <div className="ab" style={{padding:'44px 52px', overflow:'hidden'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
        <SectionMark n={9} label="Timeline trimestral · peça-chave" />
        <div className="smallcaps">8 nós · 24 meses</div>
      </div>

      <Title size={48} style={{marginTop:18, maxWidth:780}}>
        Um contrato de 24 meses tem <span style={{color:'var(--clay)', fontStyle:'italic'}}>oito</span> entregas.<br/>
        Esta é a forma como cada cliente vê <em>onde está</em>.
      </Title>

      <div style={{marginTop:36, display:'flex', flexDirection:'column', gap:32}}>

        {/* Hero example — ciclo 3 ativo */}
        <div>
          <div className="smallcaps">Estado padrão · contrato no Q3</div>
          <div style={{marginTop:14, padding:'24px 28px', background:'var(--surface)', border:'0.5px solid var(--rule)', borderRadius:4}}>
            <CycleTimeline current={3} />
            <div style={{marginTop:18, display:'flex', justifyContent:'space-between', alignItems:'flex-end'}}>
              <div>
                <div className="smallcaps">Próx. cobrança</div>
                <div className="mono tab" style={{fontSize:18, marginTop:2}}>15.09.2026 · 3 842,00 €</div>
              </div>
              <div style={{textAlign:'right'}}>
                <div className="smallcaps">Extras Q3</div>
                <div style={{fontFamily:'var(--display)', fontSize:18, fontStyle:'italic', color:'var(--clay)'}}>por confirmar</div>
              </div>
            </div>
          </div>
        </div>

        {/* Variants row */}
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:28}}>
          <div>
            <div className="smallcaps">Variante · com falha de pagamento</div>
            <div style={{marginTop:14, padding:'20px 22px', background:'var(--surface)', border:'0.5px solid var(--rule)', borderRadius:4}}>
              <CycleTimeline current={5} states={['done','done','failed','done','current','future','future','future']} />
            </div>
          </div>
          <div>
            <div className="smallcaps">Variante · renovação iminente</div>
            <div style={{marginTop:14, padding:'20px 22px', background:'var(--surface)', border:'0.5px solid var(--rule)', borderRadius:4}}>
              <CycleTimeline current={8} states={['done','done','done','done','done','done','done','current']} />
            </div>
          </div>
        </div>

        {/* Compact + on-dark */}
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:28}}>
          <div>
            <div className="smallcaps">Compacto · inline em tabelas</div>
            <div style={{marginTop:14, padding:'14px 18px', background:'var(--surface)', border:'0.5px solid var(--rule)', borderRadius:4}}>
              <CycleTimeline current={3} compact showMeta={false} showLabels={false} />
              <div style={{marginTop:8, fontFamily:'var(--mono)', fontSize:10.5, color:'var(--ink-3)'}}>HTL-26-0142 · Hotel Sereno</div>
            </div>
          </div>
          <div>
            <div className="smallcaps">Em bloco tobacco · email transacional</div>
            <div style={{marginTop:14, padding:'20px 22px', background:'var(--tobacco)', borderRadius:4}}>
              <div className="smallcaps tab" style={{color:'rgba(242,233,210,0.55)'}}>Ciclo 3 / 8 · mês 9 / 24</div>
              <div style={{marginTop:10, display:'grid', gridTemplateColumns:'repeat(8,1fr)', gap:4}}>
                {[0,1,2,3,4,5,6,7].map(i=>{
                  const done = i<2; const cur = i===2;
                  return (
                    <div key={i} style={{height:26, borderRadius:2, padding:'0 8px',
                      background: done ? 'var(--clay)' : cur ? 'var(--sand)' : 'transparent',
                      border: done||cur ? 'none' : '0.5px dashed rgba(242,233,210,0.25)',
                      color: done ? 'var(--bone)' : cur ? 'var(--tobacco)' : 'rgba(242,233,210,0.45)',
                      fontFamily:'var(--mono)', fontSize:10, display:'flex', alignItems:'center', justifyContent:'space-between',
                    }}>
                      <span style={{letterSpacing:0.08}}>Q{i+1}</span>
                      {done && <span style={{fontFamily:'var(--display)', fontSize:13}}>✓</span>}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>

        {/* Anatomy spec */}
        <div>
          <div className="smallcaps">Anatomia</div>
          <div style={{marginTop:12, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:20, fontSize:12.5, color:'var(--ink-2)'}}>
            <div>
              <div style={{display:'inline-flex', height:22, padding:'0 9px', background:'var(--clay)', color:'var(--bone)', borderRadius:2, alignItems:'center', gap:6, fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:0.08}}>Q1 <span style={{fontFamily:'var(--display)', fontSize:14}}>✓</span></div>
              <div style={{marginTop:8, color:'var(--ink-3)'}}>Cumprido · clay sólido + tick Fraunces. Fatura emitida, entrega entregue.</div>
            </div>
            <div>
              <div style={{display:'inline-flex', height:22, padding:'0 9px', background:'var(--tobacco)', color:'var(--sand)', borderRadius:2, alignItems:'center', fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:0.08, position:'relative', minWidth:48}}>Q3<span style={{position:'absolute',right:8,width:5,height:5,borderRadius:50,background:'var(--sand)'}}/></div>
              <div style={{marginTop:8, color:'var(--ink-3)'}}>Em curso · tobacco com ponto sand. Barra de progresso interna mostra avanço do trimestre.</div>
            </div>
            <div>
              <div style={{display:'inline-flex', height:22, padding:'0 9px', borderRadius:2, alignItems:'center', fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:0.08, border:'0.5px dashed var(--rule)', color:'var(--ink-3)', minWidth:48}}>Q5</div>
              <div style={{marginTop:8, color:'var(--ink-3)'}}>Futuro · border tracejado, sem cor. Convida-se à projecção mas não à atenção.</div>
            </div>
            <div>
              <div style={{display:'inline-flex', height:22, padding:'0 9px', background:'var(--clay-deep)', color:'var(--bone)', borderRadius:2, alignItems:'center', gap:6, fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:0.08}}>Q4 <span style={{fontFamily:'var(--display)', fontSize:14}}>!</span></div>
              <div style={{marginTop:8, color:'var(--ink-3)'}}>Falha · clay-deep com marca de atenção. Aparece em listas como vermelho prioritário.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CycleTimeline, TimelineCard });