/* components.jsx — Buttons, inputs, cards, tables, alerts */

function ComponentsCard() {
  return (
    <div className="ab" style={{padding:'44px 52px', overflow:'hidden'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
        <SectionMark n={6} label="Componentes · primitivos" />
        <div className="smallcaps">shadcn · base RVDE</div>
      </div>

      <div style={{marginTop:24, display:'grid', gridTemplateColumns:'1fr 1fr', gap:'36px 56px'}}>

        {/* Buttons */}
        <div>
          <div className="smallcaps">Buttons</div>
          <div style={{marginTop:14, display:'flex', flexDirection:'column', gap:14}}>
            <div style={{display:'flex', gap:10, alignItems:'center', flexWrap:'wrap'}}>
              <button className="btn btn-primary">Aceitar contrato</button>
              <button className="btn btn-clay">Confirmar extras</button>
              <button className="btn btn-outline">Ver fatura</button>
              <button className="btn btn-ghost">Cancelar</button>
            </div>
            <div style={{display:'flex', gap:10, alignItems:'center'}}>
              <button className="btn btn-primary btn-lg">Assinar mandato SEPA</button>
              <button className="btn btn-outline btn-lg">Descarregar PDF</button>
            </div>
            <div style={{display:'flex', gap:8, alignItems:'center'}}>
              <button className="btn btn-primary btn-sm">Renovar</button>
              <button className="btn btn-outline btn-sm">Editar base</button>
              <button className="btn btn-clay btn-sm">Cobrar agora</button>
              <button className="btn btn-ghost btn-sm">Histórico</button>
              <span className="badge" style={{color:'var(--clay-deep)'}}><span className="dot"/>Destrutiva</span>
            </div>
            <div style={{display:'flex', gap:14, alignItems:'center'}}>
              <button className="btn btn-primary" disabled style={{opacity:0.4}}>Desativado</button>
              <button className="btn btn-clay">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
                Continuar
              </button>
            </div>
          </div>
        </div>

        {/* Inputs */}
        <div>
          <div className="smallcaps">Inputs · forms</div>
          <div style={{marginTop:14, display:'flex', flexDirection:'column', gap:12, maxWidth:380}}>
            <label style={{display:'flex', flexDirection:'column', gap:4}}>
              <span className="smallcaps">Nome fiscal</span>
              <input className="input" defaultValue="Hotel Sereno, S.A." />
            </label>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
              <label style={{display:'flex', flexDirection:'column', gap:4}}>
                <span className="smallcaps">NIF</span>
                <input className="input mono tab" defaultValue="509 280 471" />
              </label>
              <label style={{display:'flex', flexDirection:'column', gap:4}}>
                <span className="smallcaps">IVA · regime</span>
                <input className="input" defaultValue="Geral · 23%" />
              </label>
            </div>
            <label style={{display:'flex', flexDirection:'column', gap:4}}>
              <span className="smallcaps">IBAN · mandato SEPA</span>
              <div style={{position:'relative'}}>
                <input className="input mono tab" defaultValue="PT50 0035 0000 0001 23456 78" style={{paddingRight:78}} />
                <span style={{position:'absolute', right:10, top:11, fontFamily:'var(--mono)', fontSize:10.5, color:'var(--moss)', textTransform:'uppercase', letterSpacing:0.08}}>● válido</span>
              </div>
            </label>
            <label style={{display:'flex', flexDirection:'column', gap:4}}>
              <span className="smallcaps">Observações</span>
              <textarea className="input" rows={2} style={{height:'auto', padding:'8px 12px', resize:'none'}} defaultValue="Entrega na receção, segunda a sexta, 09–17h." />
            </label>
          </div>
        </div>

        {/* Cards / KPI */}
        <div>
          <div className="smallcaps">Cards · KPI</div>
          <div style={{marginTop:14, display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
            <div className="card" style={{padding:'18px 20px'}}>
              <div className="smallcaps">MRR contratado</div>
              <div style={{fontFamily:'var(--display)', fontSize:38, lineHeight:1.05, marginTop:6}} className="tab">
                18 420 <span style={{fontSize:18, color:'var(--ink-3)'}}>€</span>
              </div>
              <div className="mono" style={{fontSize:11, color:'var(--moss)', marginTop:6}}>+4.8% vs Q2</div>
            </div>
            <div className="card" style={{padding:'18px 20px', background:'var(--tobacco)', color:'var(--bone)', borderColor:'transparent'}}>
              <div className="smallcaps" style={{color:'rgba(242,233,210,0.55)'}}>Próx. cobrança</div>
              <div style={{fontFamily:'var(--display)', fontSize:38, lineHeight:1.05, marginTop:6}} className="tab">
                3 842 <span style={{fontSize:18, color:'var(--sand)'}}>€</span>
              </div>
              <div className="mono" style={{fontSize:11, color:'rgba(242,233,210,0.6)', marginTop:6}}>15.09.2026 · 18 dias</div>
            </div>
            <div className="card" style={{padding:'18px 20px'}}>
              <div className="smallcaps">Contratos ativos</div>
              <div style={{fontFamily:'var(--display)', fontSize:38, lineHeight:1.05, marginTop:6}}>47</div>
              <div className="mono" style={{fontSize:11, color:'var(--clay)', marginTop:6}}>3 a renovar &lt; 60d</div>
            </div>
            <div className="card" style={{padding:'18px 20px'}}>
              <div className="smallcaps">Falhas SEPA</div>
              <div style={{fontFamily:'var(--display)', fontSize:38, lineHeight:1.05, marginTop:6, color:'var(--clay-deep)'}}>2</div>
              <div className="mono" style={{fontSize:11, color:'var(--ink-3)', marginTop:6}}>retry agendado · 24h</div>
            </div>
          </div>
        </div>

        {/* Alerts / toasts */}
        <div>
          <div className="smallcaps">Toasts · alerts</div>
          <div style={{marginTop:14, display:'flex', flexDirection:'column', gap:10}}>
            <div style={{display:'flex', alignItems:'flex-start', gap:12, padding:'12px 14px', border:'0.5px solid var(--rule)', borderLeft:'3px solid var(--clay)', background:'var(--surface)', borderRadius:3}}>
              <div style={{fontFamily:'var(--display)', fontSize:18, color:'var(--clay)', marginTop:-2}}>§</div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600, fontSize:13}}>Extras por confirmar</div>
                <div style={{fontSize:12.5, color:'var(--ink-3)', marginTop:2}}>Tens até 8 set para confirmar os extras do Q3.</div>
              </div>
              <span className="smallcaps tab" style={{whiteSpace:'nowrap'}}>D-7</span>
            </div>
            <div style={{display:'flex', alignItems:'flex-start', gap:12, padding:'12px 14px', border:'0.5px solid var(--rule)', borderLeft:'3px solid var(--moss)', background:'var(--surface)', borderRadius:3}}>
              <div style={{fontFamily:'var(--display)', fontSize:18, color:'var(--moss)'}}>✓</div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600, fontSize:13}}>Mandato SEPA assinado</div>
                <div style={{fontSize:12.5, color:'var(--ink-3)', marginTop:2}}>Primeiro ciclo arranca a 14 set.</div>
              </div>
            </div>
            <div style={{display:'flex', alignItems:'flex-start', gap:12, padding:'12px 14px', border:'0.5px solid var(--clay-deep)', background:'#fbe7df', color:'var(--clay-deep)', borderRadius:3}}>
              <div style={{fontFamily:'var(--display)', fontSize:18}}>!</div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600, fontSize:13}}>Cobrança falhou · HTL-26-0142</div>
                <div style={{fontSize:12.5, color:'var(--ink-2)', marginTop:2}}>IBAN sem provisão. Retry automático em 24h.</div>
              </div>
              <button className="btn btn-sm" style={{background:'var(--clay-deep)', color:'#fff', borderColor:'transparent'}}>Resolver</button>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}

function NavTablesCard() {
  return (
    <div className="ab" style={{padding:'44px 52px', overflow:'hidden'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
        <SectionMark n={7} label="Componentes · navegação &amp; tabelas" />
        <div className="smallcaps">sticky header · bulk actions</div>
      </div>

      {/* Tabs */}
      <div style={{marginTop:30}}>
        <div className="smallcaps">Tabs · subnav</div>
        <div style={{marginTop:12, display:'flex', gap:0, borderBottom:'0.5px solid var(--rule)'}}>
          {['Visão geral','Produtos base','Ciclos · entregas','Faturas','Amendments'].map((t,i)=>(
            <div key={t} style={{
              padding:'10px 16px', fontSize:13.5,
              borderBottom: i===0 ? '1.5px solid var(--ink)' : '1.5px solid transparent',
              marginBottom:-0.5,
              color: i===0 ? 'var(--ink)' : 'var(--ink-3)',
              fontWeight: i===0 ? 600 : 400,
            }}>{t}</div>
          ))}
          <div style={{marginLeft:'auto', display:'flex', alignItems:'center', gap:8}}>
            <span className="smallcaps">⌘K</span>
            <span style={{fontSize:12, color:'var(--ink-3)'}}>pesquisar tudo</span>
          </div>
        </div>
      </div>

      {/* Sidebar mini + table */}
      <div style={{marginTop:30, display:'grid', gridTemplateColumns:'200px 1fr', gap:32, flex:1}}>
        {/* Sidebar */}
        <div>
          <div className="smallcaps">Sidebar</div>
          <div style={{marginTop:12, background:'var(--surface)', border:'0.5px solid var(--rule)', borderRadius:4, padding:'14px 4px'}}>
            <div style={{padding:'2px 14px 8px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <div style={{fontFamily:'var(--display)', fontSize:18}}>RVDE</div>
              <div className="smallcaps">admin</div>
            </div>
            <Hr style={{margin:'4px 8px 8px'}}/>
            {[
              ['Dashboard',true,'D'],
              ['Contratos',false,'C'],
              ['Clientes',false,'L'],
              ['Produtos',false,'P'],
              ['Ciclo Q3',false,'Q'],
              ['Faturação',false,'F'],
              ['Calendário',false,'K'],
            ].map(([n,active,k],i)=>(
              <div key={i} style={{
                display:'flex', alignItems:'center', gap:10,
                padding:'7px 14px', margin:'1px 4px', borderRadius:3,
                background: active ? 'var(--bone-3)' : 'transparent',
                fontSize:13.5, fontWeight: active ? 600 : 400,
              }}>
                <span style={{width:14, height:14, border:'0.5px solid var(--rule)', borderRadius:2, display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:9, color:'var(--ink-3)', fontFamily:'var(--mono)'}}>{k}</span>
                <span style={{flex:1}}>{n}</span>
                {active && <span style={{width:4,height:4, background:'var(--clay)', borderRadius:50}}/>}
              </div>
            ))}
            <Hr style={{margin:'10px 8px'}}/>
            <div style={{padding:'6px 14px', fontSize:12, color:'var(--ink-3)'}}>Jorge L. · admin</div>
          </div>
        </div>

        {/* Table */}
        <div>
          <div className="smallcaps">Tabela densa · contratos</div>
          <div style={{marginTop:12, background:'var(--surface)', border:'0.5px solid var(--rule)', borderRadius:4, overflow:'hidden'}}>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 14px', borderBottom:'0.5px solid var(--rule)', background:'var(--surface-2)'}}>
              <div style={{display:'flex',gap:8, alignItems:'center'}}>
                <input type="checkbox" style={{margin:0}}/>
                <span style={{fontSize:12, color:'var(--ink-3)'}}>3 selecionados</span>
                <button className="btn btn-sm btn-outline">Renovar</button>
                <button className="btn btn-sm btn-outline">Exportar CSV</button>
              </div>
              <div className="smallcaps tab">62 linhas · pág 1 / 3</div>
            </div>
            <table style={{width:'100%', borderCollapse:'collapse', fontSize:12.5}}>
              <thead>
                <tr>
                  {['','ID','Cliente','Tipo','Próx.','Valor','Ciclo'].map((h,i)=>(
                    <th key={i} style={{
                      padding:'9px 12px', textAlign: i>=5?'right':'left',
                      fontFamily:'var(--mono)', fontSize:10, textTransform:'uppercase',
                      letterSpacing:0.08, color:'var(--ink-3)', fontWeight:500,
                      borderBottom:'0.5px solid var(--rule)', background:'var(--surface)',
                    }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {[
                  ['HTL-26-0142','Hotel Sereno','Hotel','15.09','3 842,00','3/8','active'],
                  ['SPA-26-0091','Spa Salgueiros','Spa','22.09','1 280,00','5/8','active'],
                  ['GYM-26-0073','Atlas Athletic','Ginásio','01.10','920,00','7/8','renew'],
                  ['BRB-26-0058','Barbearia Lapa','Barbearia','03.10','620,00','2/8','active'],
                  ['HTL-25-0021','Casa do Mar','Hotel','30.10','4 110,00','8/8','renew'],
                ].map((r,i)=>(
                  <tr key={i} style={{borderBottom: i<4?'0.5px solid var(--rule-2)':'none'}}>
                    <td style={{padding:'9px 12px'}}><input type="checkbox" defaultChecked={i<3} style={{margin:0}}/></td>
                    <td style={{padding:'9px 12px', fontFamily:'var(--mono)', fontSize:11.5, color:'var(--ink-3)'}}>{r[0]}</td>
                    <td style={{padding:'9px 12px'}}>{r[1]}</td>
                    <td style={{padding:'9px 12px', color:'var(--ink-3)'}}>{r[2]}</td>
                    <td style={{padding:'9px 12px', fontFamily:'var(--mono)', fontSize:11.5}}>{r[3]}</td>
                    <td style={{padding:'9px 12px', fontFamily:'var(--mono)', fontSize:12, textAlign:'right'}}>{r[4]} €</td>
                    <td style={{padding:'9px 12px', textAlign:'right', fontFamily:'var(--mono)', fontSize:11.5}}>{r[5]}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
  );
}

Object.assign(window, { ComponentsCard, NavTablesCard });