/* pdf-contract.jsx — Contract PDF template (A4 portrait) */

function PDFPage1() {
  return (
    <div className="ab" style={{
      padding:'56px 64px 48px', fontSize:11, lineHeight:1.55, color:'var(--ink)',
      display:'flex', flexDirection:'column',
    }}>
      {/* Header */}
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', paddingBottom:18, borderBottom:'0.5px solid var(--ink)'}}>
        <div>
          <div style={{fontFamily:'var(--display)', fontWeight:300, fontSize:32, letterSpacing:-0.02, lineHeight:1}}>RVDE</div>
          <div className="smallcaps" style={{marginTop:6}}>honest trend of human</div>
        </div>
        <div style={{textAlign:'right'}}>
          <div className="smallcaps">Contrato de fornecimento</div>
          <div className="mono tab" style={{fontSize:14, marginTop:4}}>HTL · 26 · 0142</div>
          <div className="mono" style={{fontSize:10, color:'var(--ink-3)', marginTop:2}}>versão 1.0 · 04.09.2024</div>
        </div>
      </div>

      {/* Big title */}
      <div style={{marginTop:46}}>
        <div className="smallcaps">§ 00 · sumário</div>
        <h1 style={{fontFamily:'var(--display)', fontWeight:300, fontSize:50, letterSpacing:-0.02, lineHeight:1, margin:'14px 0 0'}}>
          Acordo de fornecimento <span style={{fontStyle:'italic', color:'var(--clay)'}}>trimestral</span>,<br/>
          com duração de <span className="tab" style={{fontStyle:'italic'}}>24</span> meses.
        </h1>
      </div>

      {/* Parties */}
      <div style={{marginTop:42, display:'grid', gridTemplateColumns:'1fr 1fr', gap:32}}>
        <div>
          <div className="smallcaps">§ 01 · primeiro outorgante</div>
          <div style={{marginTop:10, fontFamily:'var(--display)', fontSize:18, lineHeight:1.25}}>RVDE — Comércio de Bens Pessoais, Lda.</div>
          <div style={{marginTop:8, fontFamily:'var(--mono)', fontSize:10.5, lineHeight:1.7, color:'var(--ink-2)'}}>
            NIF · <span className="tab">516 482 091</span><br/>
            Sede · Rua Direita, 14, 2400‑210 Leiria<br/>
            Representante · Jorge Libório, gerente
          </div>
        </div>
        <div>
          <div className="smallcaps">§ 02 · segundo outorgante</div>
          <div style={{marginTop:10, fontFamily:'var(--display)', fontSize:18, lineHeight:1.25}}>Hotel Sereno, S.A.</div>
          <div style={{marginTop:8, fontFamily:'var(--mono)', fontSize:10.5, lineHeight:1.7, color:'var(--ink-2)'}}>
            NIF · <span className="tab">509 280 471</span><br/>
            Sede · Estrada da Comporta, km 4, 7570‑791 Comporta<br/>
            Representante · Maria Antunes, dir. operações
          </div>
        </div>
      </div>

      {/* Object */}
      <div style={{marginTop:36}}>
        <div className="smallcaps">§ 03 · objecto</div>
        <p style={{margin:'10px 0 0', maxWidth:640, fontSize:12, lineHeight:1.65}}>
          O primeiro outorgante (RVDE) compromete‑se a fornecer, ao segundo outorgante,
          um conjunto fixo de produtos de cuidado pessoal e têxteis de uso hoteleiro,
          em ciclos trimestrais, durante um período inicial de vinte e quatro meses.
          O detalhe da linha base consta do quadro § 04, ficando reservada ao segundo
          outorgante a faculdade de ajustar volumes <em>extra</em> antes de cada
          cobrança, nos termos do § 06.
        </p>
      </div>

      {/* Base line table */}
      <div style={{marginTop:30}}>
        <div className="smallcaps">§ 04 · linha base · 8 ciclos · trimestre</div>
        <table style={{width:'100%', borderCollapse:'collapse', marginTop:12, fontSize:11}}>
          <thead>
            <tr>
              {['Ref.','Produto · fragrância','Formato','Qt. trim.','PU sem IVA','Subtotal'].map((h,i)=>(
                <th key={i} style={{
                  padding:'8px 6px',textAlign: i>=3?'right':'left',
                  fontFamily:'var(--mono)', fontSize:9.5, textTransform:'uppercase', letterSpacing:0.08,
                  color:'var(--ink-3)', fontWeight:500,
                  borderTop:'0.5px solid var(--ink)', borderBottom:'0.5px solid var(--rule)',
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {[
              ['CDR-SHM-5L','Champô · Cedar & Sandalwood','5 L · recarga inox','10', '46,00','460,00'],
              ['BGP-SBL-5L','Sabonete líquido · Bergamot','5 L · recarga inox','6',  '42,00','252,00'],
              ['SLT-LOC-1L','Loção corpo · Sea Salt','1 L · refill PET','30','18,00','540,00'],
              ['SLT-SBR-12','Sabonete barra · Sea Salt','120 g · papel','240','6,40','1 536,00'],
              ['LNH-TLR-46','Toalha rosto · linho cru','40 × 60 cm','80','8,80','704,00'],
            ].map((r,i)=>(
              <tr key={i} style={{borderBottom:'0.5px solid var(--rule-2)'}}>
                <td style={{padding:'8px 6px', fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-3)'}}>{r[0]}</td>
                <td style={{padding:'8px 6px'}}>{r[1]}</td>
                <td style={{padding:'8px 6px', color:'var(--ink-3)'}}>{r[2]}</td>
                <td style={{padding:'8px 6px', textAlign:'right', fontFamily:'var(--mono)', fontSize:11}} className="tab">{r[3]}</td>
                <td style={{padding:'8px 6px', textAlign:'right', fontFamily:'var(--mono)', fontSize:11}} className="tab">{r[4]} €</td>
                <td style={{padding:'8px 6px', textAlign:'right', fontFamily:'var(--mono)', fontSize:11, fontWeight:600}} className="tab">{r[5]} €</td>
              </tr>
            ))}
            <tr>
              <td colSpan="5" style={{padding:'10px 6px', textAlign:'right', fontFamily:'var(--mono)', fontSize:10.5, textTransform:'uppercase', letterSpacing:0.08, color:'var(--ink-3)'}}>Subtotal trimestral · sem IVA</td>
              <td style={{padding:'10px 6px', textAlign:'right', fontFamily:'var(--mono)', fontSize:13, fontWeight:600, borderTop:'0.5px solid var(--ink)'}} className="tab">3 492,00 €</td>
            </tr>
            <tr>
              <td colSpan="5" style={{padding:'4px 6px', textAlign:'right', fontFamily:'var(--mono)', fontSize:10.5, textTransform:'uppercase', letterSpacing:0.08, color:'var(--ink-3)'}}>IVA · 23%</td>
              <td style={{padding:'4px 6px', textAlign:'right', fontFamily:'var(--mono)', fontSize:11}} className="tab">803,16 €</td>
            </tr>
            <tr>
              <td colSpan="5" style={{padding:'4px 6px 12px', textAlign:'right', fontFamily:'var(--display)', fontStyle:'italic', fontSize:14}}>Total trimestral</td>
              <td style={{padding:'4px 6px 12px', textAlign:'right', fontFamily:'var(--display)', fontSize:22, color:'var(--clay)'}} className="tab">4 295,16 €</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* Footer page 1 */}
      <div style={{marginTop:'auto', paddingTop:18, borderTop:'0.5px solid var(--rule)', display:'flex', justifyContent:'space-between', fontFamily:'var(--mono)', fontSize:9.5, color:'var(--ink-3)'}}>
        <span>RVDE · contrato HTL-26-0142 · v1.0</span>
        <span>Honest trend of human · rvde.pt</span>
        <span className="tab">página 1 / 2</span>
      </div>
    </div>
  );
}

function PDFPage2() {
  return (
    <div className="ab" style={{
      padding:'56px 64px 48px', fontSize:11, lineHeight:1.55, color:'var(--ink)',
      display:'flex', flexDirection:'column',
    }}>
      {/* mini-header */}
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', paddingBottom:14, borderBottom:'0.5px solid var(--rule)'}}>
        <div style={{fontFamily:'var(--display)', fontSize:18}}>RVDE</div>
        <div className="mono tab" style={{fontSize:10, color:'var(--ink-3)'}}>HTL-26-0142 · cont.</div>
      </div>

      {/* Cláusulas */}
      <div style={{marginTop:28, display:'grid', gridTemplateColumns:'1fr 1fr', gap:'24px 36px'}}>
        {[
          ['§ 05','Duração','24 meses civis a contar da data de assinatura. Renovação tácita por períodos iguais, salvo denúncia escrita com 60 dias de antecedência.'],
          ['§ 06','Extras trimestrais','O segundo outorgante poderá ajustar volumes extra através do portal, até sete dias antes do início de cada ciclo (D-7). Findo o prazo, a base do § 04 considera-se confirmada.'],
          ['§ 07','Pagamento','Por débito directo SEPA B2B, no primeiro dia de cada trimestre, contra mandato assinado nos termos § 09.'],
          ['§ 08','Faturação','Emitida automaticamente após cobrança, por sistema certificado TOConline. PDF enviado por e-mail e disponível no portal.'],
          ['§ 09','Mandato SEPA','O segundo outorgante autoriza débito recorrente sobre o IBAN indicado, no valor exacto da fatura de cada trimestre.'],
          ['§ 10','Falha de pagamento','Em caso de devolução SDD, novo débito automático em 24h. Após terceira falha, contrato passa a suspenso.'],
          ['§ 11','Confidencialidade','Os termos comerciais aqui descritos são confidenciais, sem prejuízo das obrigações legais aplicáveis.'],
          ['§ 12','Foro','Para qualquer litígio, é competente o Tribunal Judicial da Comarca de Leiria.'],
        ].map(([n,t,b])=>(
          <div key={n}>
            <div style={{display:'flex', alignItems:'baseline', gap:8}}>
              <span className="mono" style={{fontSize:10, color:'var(--clay)', letterSpacing:0.08, textTransform:'uppercase'}}>{n}</span>
              <span style={{fontFamily:'var(--display)', fontSize:15}}>{t}</span>
            </div>
            <p style={{margin:'6px 0 0', fontSize:11, lineHeight:1.6, color:'var(--ink-2)'}}>{b}</p>
          </div>
        ))}
      </div>

      {/* Ciclo visualization on the contract itself */}
      <div style={{marginTop:30}}>
        <div className="smallcaps">§ 13 · oito entregas previstas</div>
        <div style={{marginTop:12, padding:'18px 22px', background:'var(--bone-2)', borderRadius:3, border:'0.5px solid var(--rule)'}}>
          <div style={{display:'grid', gridTemplateColumns:'repeat(8,1fr)', gap:6}}>
            {Array.from({length:8}).map((_,i)=>(
              <div key={i} style={{display:'flex', flexDirection:'column', gap:6}}>
                <div style={{height:28, border:'0.5px solid var(--rule)', borderRadius:2, display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 8px', fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-2)', letterSpacing:0.08}}>
                  Q{i+1}
                </div>
                <div className="mono" style={{fontSize:9, color:'var(--ink-3)', textAlign:'center'}}>{['DEZ 24','MAR 25','JUN 25','SET 25','DEZ 25','MAR 26','JUN 26','SET 26'][i]}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Signatures */}
      <div style={{marginTop:'auto', paddingTop:38, display:'grid', gridTemplateColumns:'1fr 1fr', gap:60}}>
        <div>
          <div style={{height:1, background:'var(--ink)', marginBottom:8}}/>
          <div className="smallcaps">Primeiro outorgante · RVDE</div>
          <div style={{fontFamily:'var(--display)', fontStyle:'italic', fontSize:18, color:'var(--ink-3)', marginTop:6, lineHeight:1}}>Jorge Libório</div>
          <div className="mono" style={{fontSize:9.5, color:'var(--ink-3)', marginTop:4}}>Leiria · <span className="tab">04.09.2024</span></div>
        </div>
        <div>
          <div style={{height:1, background:'var(--ink)', marginBottom:8}}/>
          <div className="smallcaps">Segundo outorgante</div>
          <div style={{fontFamily:'var(--display)', fontStyle:'italic', fontSize:18, color:'var(--ink-3)', marginTop:6, lineHeight:1}}>Maria Antunes</div>
          <div className="mono" style={{fontSize:9.5, color:'var(--ink-3)', marginTop:4}}>Comporta · <span className="tab">04.09.2024</span></div>
        </div>
      </div>

      <div style={{marginTop:18, paddingTop:14, borderTop:'0.5px solid var(--rule)', display:'flex', justifyContent:'space-between', fontFamily:'var(--mono)', fontSize:9.5, color:'var(--ink-3)'}}>
        <span>RVDE · contrato HTL-26-0142 · v1.0</span>
        <span>Honest trend of human · rvde.pt</span>
        <span className="tab">página 2 / 2</span>
      </div>
    </div>
  );
}

Object.assign(window, { PDFPage1, PDFPage2 });