/* emails-app.jsx — All 8 RVDE transactional emails on a design canvas */

/* ── Reusable bits ─────────────────────────────────────── */

function InboxMeta({ from, fromEmail, time, subject, preview, av, avKind = 'rvde', to = 'maria@hotelsereno.pt' }) {
  return (
    <div className="inbox-meta">
      <div className="row1">
        <div className={'av ' + avKind}>{av}</div>
        <div className="sender">
          <div className="sender-name">{from}</div>
          <div className="sender-email">{fromEmail}</div>
        </div>
        <div className="time">{time}</div>
      </div>
      <div className="subj">{subject}</div>
      <div className="preview">{preview}</div>
      <div className="recipients">para · <span style={{color:'var(--ink-2)'}}>{to}</span></div>
    </div>
  );
}

function JorgeSig({ note }) {
  return (
    <div className="sig">
      <div className="av">J</div>
      <div>
        <div className="nm">Jorge Libório</div>
        <div className="ro">RVDE · gerente</div>
        {note && <div style={{ fontSize: 12.5, color:'var(--ink-2)', marginTop: 8, fontStyle:'italic', lineHeight:1.5 }}>{note}</div>}
        <div className="ct">
          <a href="mailto:jorge@rvde.pt">jorge@rvde.pt</a>  ·  +351 962 408 117
        </div>
      </div>
    </div>
  );
}

function RvdeFoot() {
  return (
    <div className="foot">
      <div className="row">
        <span className="rvde">RVDE</span>
        <span>cosmética & vestuário · há gerações</span>
      </div>
      <div className="row" style={{ marginTop: 6 }}>
        <span>Rua das Tílias 14 · 2400-114 Leiria · NIF 514 220 833</span>
        <span><a href="#">portal</a> · <a href="#">preferências</a> · <a href="#">cancelar emails</a></span>
      </div>
    </div>
  );
}

/* Mini product list */
function ProductList({ items, total }) {
  return (
    <div className="pl">
      {items.map((p, i) => (
        <div key={i} className="pl-row">
          <div className="pname">
            {p.name}
            <span className="scent"> · {p.scent}</span>
          </div>
          <span className="pqty">×{p.qty}</span>
        </div>
      ))}
      {total && (
        <div className="pl-foot">
          <span style={{color:'var(--ink-3)'}}>Total · IVA incluído</span>
          <span className="total mono tab">{total}</span>
        </div>
      )}
    </div>
  );
}

/* ── EMAIL 1: Convite (Jorge) ─────────────────────────── */
function EmailConvite() {
  return (
    <div className="email">
      <InboxMeta
        from="Jorge Libório · RVDE" fromEmail="jorge@rvde.pt"
        time="29 AGO · 11:42"
        subject="Proposta para o Hotel Sereno"
        preview="preparei isto a pensar no fluxo de hóspedes na época alta — diz-me se faz sentido"
        av="J" avKind="jorge"
      />
      <div className="body">
        <p className="lede">
          Olá Maria — depois da nossa conversa de Agosto, preparei uma <em>proposta</em> à medida do Hotel Sereno.
        </p>
        <p>
          São 5 produtos base que cobrem cabelo, corpo e vestuário, pensados para o ritmo de hóspedes que descreveste. Entregamos a cada 3 meses, com aviso a 14 e 7 dias antes de cada cobrança — para puderes pedir extras se precisares.
        </p>
        <div className="pull">
          <div className="smallcaps">Valor estimado por ciclo · trimestral</div>
          <div className="big">4 725,06 €</div>
          <p style={{marginTop: 10}}>5 produtos · 24 meses · 8 entregas · IVA incluído</p>
        </div>
        <p>
          Demoras uns 6 minutos a rever tudo — podes ajustar quantidades, confirmar dados e assinar online. Sem compromisso até ao último passo.
        </p>
        <a className="cta clay" href="#">
          Ver proposta <span className="arrow">→</span>
        </a>
        <a className="cta-sec" href="#">ou marca uma chamada comigo</a>
        <JorgeSig note='"Estou cá para tudo o que precises, antes ou depois da assinatura."'/>
      </div>
      <RvdeFoot/>
    </div>
  );
}

/* ── EMAIL 2: Contrato selado ────────────────────────── */
function EmailSelado() {
  return (
    <div className="email">
      <InboxMeta
        from="RVDE" fromEmail="contrato@rvde.pt"
        time="01 SET · 14:32"
        subject="Bem-vinda à RVDE, Maria"
        preview="contrato selado · primeiro ciclo abre a 15 SET · cobrança a 01 DEZ"
        av="R" avKind="rvde"
      />
      <div className="hero">
        <div className="smallcaps">Selado · 01 SET 2025 · 14:32</div>
        <div className="title">
          Está feito — <em>ficamos a contrato</em> por 24 meses.
        </div>
      </div>
      <div className="body">
        <p className="lede">
          Recebemos a tua assinatura e o mandato SEPA. O PDF do contrato segue em anexo (e também fica guardado no portal).
        </p>
        <div className="facts">
          <div className="f">
            <div className="lbl">Próximo</div>
            <div className="val">Q1 abre</div>
            <div className="sub">15 SET 2025</div>
          </div>
          <div className="f">
            <div className="lbl">Cobrança</div>
            <div className="val">01 DEZ</div>
            <div className="sub">SEPA · auto</div>
          </div>
          <div className="f">
            <div className="lbl">Entrega</div>
            <div className="val">~05 DEZ</div>
            <div className="sub">CTT · Comporta</div>
          </div>
        </div>
        <p>
          Não precisas de fazer nada para o primeiro ciclo. Avisamos-te <strong>duas semanas antes</strong> da primeira cobrança e <strong>uma semana antes</strong> de fecharmos a lista — caso queiras ajustar quantidades ou pedir extras.
        </p>
        <p>
          O portal está aberto a partir de já — podes ver o teu contrato, a equipa que adicionaste, e o catálogo completo.
        </p>
        <a className="cta tobacco" href="portal-cliente.html">
          Entrar no portal <span className="arrow">→</span>
        </a>
        <a className="cta-sec" href="#">descarregar contrato (PDF)</a>
        <JorgeSig note="Bem-vinda à família RVDE. Qualquer coisa, falamos."/>
      </div>
      <RvdeFoot/>
    </div>
  );
}

/* ── EMAIL 3: D-14 ciclo aberto ──────────────────────── */
function EmailD14() {
  const items = [
    { name: 'Champô profissional 5L', scent: 'cedro & bergamota', qty: 10 },
    { name: 'Sabonete líquido 5L',     scent: 'limão & alecrim',  qty: 6 },
    { name: 'Loção corporal 1L',       scent: 'figo & amêndoa',   qty: 30 },
    { name: 'Sabonete barra 120g',     scent: 'lavanda',          qty: 240 },
    { name: 'Toalha de rosto 46×80',   scent: 'algodão · ecru',   qty: 80 },
  ];
  return (
    <div className="email">
      <InboxMeta
        from="RVDE · ciclos" fromEmail="ciclos@rvde.pt"
        time="17 NOV · 09:00"
        subject="Ciclo Q1 está aberto · ajusta até 24 NOV"
        preview="14 dias para confirmares quantidades ou pedires extras"
        av="R" avKind="rvde"
      />
      <div className="body">
        <p className="lede">
          Olá Maria — o ciclo <em>Q1</em> está aberto. Aqui fica o que está em rota para o Hotel Sereno.
        </p>
        <ProductList items={items} total="4 725,06 €"/>
        <div className="facts">
          <div className="f">
            <div className="lbl">D-7 · lista fecha</div>
            <div className="val">24 NOV</div>
            <div className="sub">última hora para extras</div>
          </div>
          <div className="f">
            <div className="lbl">Cobrança SEPA</div>
            <div className="val">01 DEZ</div>
            <div className="sub">débito automático</div>
          </div>
          <div className="f">
            <div className="lbl">Entrega</div>
            <div className="val">~05 DEZ</div>
            <div className="sub">CTT Expresso</div>
          </div>
        </div>
        <p>
          Sem alterações? Não precisas de fazer nada — cobramos a base atual no dia 1. Se quiseres acrescentar produtos, mexer em quantidades ou mudar morada de entrega, tens 14 dias.
        </p>
        <a className="cta" href="portal-cliente.html">
          Rever o ciclo Q1 <span className="arrow">→</span>
        </a>
        <a className="cta-sec" href="#">ver catálogo completo</a>
      </div>
      <RvdeFoot/>
    </div>
  );
}

/* ── EMAIL 4: D-7 lembrete (Jorge) ───────────────────── */
function EmailD7() {
  return (
    <div className="email">
      <InboxMeta
        from="Jorge Libório · RVDE" fromEmail="jorge@rvde.pt"
        time="24 NOV · 09:00"
        subject="Última hora para ajustar Q1, Maria"
        preview="amanhã a lista fecha · depois disso parte para cobrança"
        av="J" avKind="jorge"
      />
      <div className="body">
        <div className="ribbon">
          <span>resta</span><span className="n">1</span><span>dia</span>
        </div>
        <p className="lede">
          Maria, amanhã ao fim do dia a <em>lista de Q1</em> fecha — depois disso parte para cobrança e expedição.
        </p>
        <p>
          Se queres mexer em quantidades ou pedir extras (toalhas para uma vinda inesperada, mais loção, sabonetes para um evento), é agora. Sem stress — basta abrir o portal.
        </p>
        <p>
          Se está tudo bem como está, ignora este email. <strong>A base que assinámos é cobrada a 01 DEZ</strong> e a encomenda parte logo a seguir.
        </p>
        <a className="cta clay" href="portal-cliente.html">
          Ajustar Q1 <span className="arrow">→</span>
        </a>
        <a className="cta-sec" href="#">está tudo bem · ignorar</a>
        <JorgeSig note='"Mando este lembrete a todos os clientes — não é só a ti :)"'/>
      </div>
      <RvdeFoot/>
    </div>
  );
}

/* ── EMAIL 5: Cobrança paga ──────────────────────────── */
function EmailCobranca() {
  return (
    <div className="email">
      <InboxMeta
        from="RVDE · faturação" fromEmail="faturacao@rvde.pt"
        time="01 DEZ · 08:14"
        subject="Recebido · 4 725,06 € · fatura F2025/0419"
        preview="débito SEPA confirmado · a encomenda parte nos próximos 3 dias"
        av="R" avKind="rvde"
      />
      <div className="body">
        <p className="lede">
          Recebemos o débito do ciclo Q1 — <em>obrigado</em>.
        </p>
        <div className="pull">
          <div className="smallcaps">Recebido · F2025/0419</div>
          <div className="big">4 725,06 €</div>
          <p style={{marginTop: 10}}>SEPA SDD B2B · IBAN PT50…0078 · referência MND-2025-09-14</p>
        </div>
        <p>
          A fatura definitiva está em anexo e disponível no portal. Não precisas de fazer mais nada — a encomenda parte nos próximos <strong>3 dias úteis</strong> via CTT Expresso.
        </p>
        <div className="facts">
          <div className="f">
            <div className="lbl">Despacho</div>
            <div className="val">~03 DEZ</div>
            <div className="sub">CTT Expresso</div>
          </div>
          <div className="f">
            <div className="lbl">Entrega</div>
            <div className="val">~05 DEZ</div>
            <div className="sub">2–3 dias úteis</div>
          </div>
          <div className="f">
            <div className="lbl">Próximo</div>
            <div className="val">Q2 abre</div>
            <div className="sub">17 FEV 2026</div>
          </div>
        </div>
        <a className="cta" href="#">
          Descarregar fatura (PDF) <span className="arrow">→</span>
        </a>
        <a className="cta-sec" href="portal-cliente.html">ver no portal</a>
      </div>
      <RvdeFoot/>
    </div>
  );
}

/* ── EMAIL 6: Despacho ───────────────────────────────── */
function EmailDespacho() {
  return (
    <div className="email">
      <InboxMeta
        from="RVDE · logística" fromEmail="logistica@rvde.pt"
        time="03 DEZ · 16:50"
        subject="Encomenda Q1 a caminho do Hotel Sereno"
        preview="CTT Expresso · CT938201741PT · 8 caixas · ETA 05 DEZ"
        av="R" avKind="rvde"
      />
      <div className="body">
        <p className="lede">
          A tua encomenda saiu hoje do nosso armazém em <em>Leiria</em> — vai a caminho da Comporta.
        </p>
        <div className="track">
          <div className="row1">
            <div>
              <div className="carrier">CTT Expresso</div>
              <div style={{fontSize: 11.5, color:'var(--ink-3)', marginTop: 2}}>recolha · 03 DEZ · 14:20</div>
            </div>
            <div className="num">CT938201741PT</div>
          </div>
          <div className="eta">8 caixas · 47,2 kg · ETA <strong style={{color:'var(--ink)'}}>05 DEZ</strong> · 2–3 dias úteis</div>
        </div>
        <p>
          A entrega é em <strong>Estrada da Praia da Comporta, lote 4</strong>, aos cuidados de Maria Antunes (Receção). Os CTT contactam-te diretamente se houver alguma alteração.
        </p>
        <a className="cta tobacco" href="#">
          Acompanhar entrega <span className="arrow">→</span>
        </a>
        <a className="cta-sec" href="portal-cliente.html">conteúdo da encomenda</a>
      </div>
      <RvdeFoot/>
    </div>
  );
}

/* ── EMAIL 7: Entregue ───────────────────────────────── */
function EmailEntregue() {
  return (
    <div className="email">
      <InboxMeta
        from="RVDE · logística" fromEmail="logistica@rvde.pt"
        time="05 DEZ · 11:24"
        subject="Entregue · ciclo Q1 fechado"
        preview="8 caixas recebidas na Comporta · próximo ciclo em Fev 2026"
        av="R" avKind="rvde"
      />
      <div className="hero" style={{ paddingBottom: 24 }}>
        <div className="smallcaps">Q1 fechado</div>
        <div className="title">
          <em>Chegou.</em> Q1 fica selado no histórico.
        </div>
      </div>
      <div className="body">
        <p className="lede">
          Os CTT confirmaram a entrega às <strong>11:24</strong> de hoje — assinado por <em>Beatriz Loureiro</em>.
        </p>
        <p>
          Esperamos que esteja tudo conforme o esperado. Se algum produto chegar danificado ou se houver alguma coisa fora do sítio, é só responder a este email — tratamos logo.
        </p>
        <div className="facts">
          <div className="f">
            <div className="lbl">Próximo ciclo</div>
            <div className="val">Q2</div>
            <div className="sub">abre 17 FEV 2026</div>
          </div>
          <div className="f">
            <div className="lbl">D-7 · Q2</div>
            <div className="val">24 FEV</div>
            <div className="sub">extras fecham</div>
          </div>
          <div className="f">
            <div className="lbl">Cobrança Q2</div>
            <div className="val">01 MAR</div>
            <div className="sub">SEPA · auto</div>
          </div>
        </div>
        <a className="cta" href="portal-cliente.html">
          Ver histórico no portal <span className="arrow">→</span>
        </a>
        <a className="cta-sec" href="#">reportar problema</a>
      </div>
      <RvdeFoot/>
    </div>
  );
}

/* ── EMAIL 8: Falha SEPA (Jorge, com cuidado) ────────── */
function EmailFalha() {
  return (
    <div className="email">
      <InboxMeta
        from="Jorge Libório · RVDE" fromEmail="jorge@rvde.pt"
        time="01 MAR · 09:18"
        subject="O débito de Q2 falhou — vamos resolver"
        preview="aconteceu na execução desta manhã · tentamos de novo em 3 dias"
        av="!" avKind="alert"
      />
      <div className="body">
        <div className="alert">
          <div className="title">Débito SEPA não foi aceite pelo banco</div>
          <p>
            Tentámos o débito de <strong>4 725,06 €</strong> esta manhã (01 MAR · 08:42) e o banco devolveu o pedido com motivo <strong className="mono" style={{fontSize: 12}}>AC04 · conta encerrada ou inacessível</strong>.
          </p>
        </div>
        <p className="lede">
          Maria, não te preocupes — é um <em>contratempo</em>, não uma cobrança em atraso. Tenho duas formas de resolvermos rápido.
        </p>
        <p>
          <strong>Opção 1 · atualizar IBAN.</strong> Se há novo IBAN ou conta diferente, basta abrir o portal e atualizar o mandato SEPA. Volto a tentar o débito 3 dias depois.
        </p>
        <p>
          <strong>Opção 2 · transferência única.</strong> Se preferes pagar este ciclo por transferência e manter o mandato como está, envio-te os dados por aqui — basta responderes "transferência" a este email.
        </p>
        <a className="cta clay" href="portal-cliente.html">
          Atualizar IBAN no portal <span className="arrow">→</span>
        </a>
        <a className="cta-sec" href="#">prefiro transferência</a>
        <p style={{ marginTop: 22, fontSize: 12.5, color: 'var(--ink-3)', fontStyle: 'italic' }}>
          A encomenda fica em standby até o pagamento ficar regularizado — não parte para os CTT, mas também não perdes a tua vez no ciclo. Temos 14 dias confortáveis para resolver.
        </p>
        <JorgeSig note="Se for mais fácil falares comigo diretamente, liga — atendo sempre."/>
      </div>
      <RvdeFoot/>
    </div>
  );
}

/* ── EMAIL 9: Renovação iminente (Jorge) ────────────────── */
function EmailRenovar() {
  return (
    <div className="email">
      <InboxMeta
        from="Jorge Libório · RVDE" fromEmail="jorge@rvde.pt"
        time="15 JUL · 09:00"
        subject="Faltam 60 dias para o contrato renovar, Maria"
        preview="por defeito renova tal-qual · diz-nos se queres mudar alguma coisa"
        av="J" avKind="jorge"
      />
      <div className="body">
        <p className="lede">
          Não acredito que já passaram <em>22 meses</em> — e fica este aviso porque a sério, queremos saber o que pensas antes de o contrato se renovar sozinho.
        </p>
        <p>
          A 14 SET 2026 fecham-se 24 meses contigo. <strong>Por defeito</strong>, o contrato renova-se automaticamente por mais 24 meses, com as mesmas condições. Tens até <strong>15 JUL</strong> (60 dias antes do fim) para nos dizeres se preferes outra coisa.
        </p>

        <div className="pull">
          <div className="smallcaps">Estes 22 meses, em números</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 14 }}>
            <div>
              <div className="big" style={{ fontSize: 32 }}>7</div>
              <p style={{ fontSize: 11, marginTop: 4 }}>ciclos entregues · 100%</p>
            </div>
            <div>
              <div className="big" style={{ fontSize: 32 }}>3 640</div>
              <p style={{ fontSize: 11, marginTop: 4 }}>unidades expedidas</p>
            </div>
            <div>
              <div className="big" style={{ fontSize: 32 }}>0</div>
              <p style={{ fontSize: 11, marginTop: 4 }}>falhas SEPA</p>
            </div>
          </div>
        </div>

        <p style={{ fontFamily: 'var(--display)', fontSize: 16, color: 'var(--ink)', marginBottom: 18 }}>
          Tens três caminhos.
        </p>

        <div style={{ display: 'grid', gap: 12, marginBottom: 22 }}>
          {[
            { tag: 'Caminho 1 · recomendado', title: 'Renovar tal-qual por mais 24 meses', desc: 'Mesmas quantidades, mesmos preços. É o que acontece se não fizeres nada.' },
            { tag: 'Caminho 2',                title: 'Renegociar comigo',                 desc: 'Mexemos em quantidades, produtos ou cadência. Passamos pelo wizard como na primeira vez.' },
            { tag: 'Caminho 3',                title: 'Denunciar e terminar a 14 SET',     desc: 'Sem renovação. Mantens acesso ao portal 12 meses depois.' },
          ].map((p, i) => (
            <div key={i} style={{
              border: '0.5px solid var(--rule)',
              borderLeft: i === 0 ? '3px solid var(--clay)' : '0.5px solid var(--rule)',
              borderRadius: 4,
              padding: '12px 16px',
              background: '#fdf8e9',
            }}>
              <div className="smallcaps" style={{ color: i === 0 ? 'var(--clay)' : 'var(--ink-3)' }}>{p.tag}</div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 15, marginTop: 4, color: 'var(--ink)' }}>{p.title}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4, lineHeight: 1.45 }}>{p.desc}</div>
            </div>
          ))}
        </div>

        <a className="cta clay" href="portal-cliente.html">
          Decidir no portal <span className="arrow">→</span>
        </a>
        <a className="cta-sec" href="#">marcar chamada · 15 min</a>

        <JorgeSig note="Esta decisão é a tua — e o telefone está sempre aberto, com café ou sem."/>
      </div>
      <RvdeFoot/>
    </div>
  );
}

/* ── EMAIL 10: Renovação confirmada (RVDE) ──────────────── */
function EmailRenovado() {
  return (
    <div className="email">
      <InboxMeta
        from="RVDE" fromEmail="contrato@rvde.pt"
        time="20 JUL · 14:48"
        subject="Renovado · contrato Hotel Sereno v2.0 segue até 2028"
        preview="recebemos a tua decisão · novo PDF em anexo"
        av="R" avKind="rvde"
      />
      <div className="hero">
        <div className="smallcaps">Renovado · 20 JUL 2026</div>
        <div className="title">
          Mais <em>24 meses</em> · agora até 14 SET 2028.
        </div>
      </div>
      <div className="body">
        <p className="lede">
          Recebemos a tua confirmação. O contrato v2.0 segue em anexo e fica guardado no portal — sem fricção, sem fim de relação.
        </p>
        <div className="facts">
          <div className="f">
            <div className="lbl">Novo período</div>
            <div className="val">15 SET 26</div>
            <div className="sub">→ 14 SET 2028</div>
          </div>
          <div className="f">
            <div className="lbl">Próximo ciclo</div>
            <div className="val">Q9</div>
            <div className="sub">15 DEZ 2026</div>
          </div>
          <div className="f">
            <div className="lbl">Mandato SEPA</div>
            <div className="val">Mantido</div>
            <div className="sub">não precisas de re-assinar</div>
          </div>
        </div>
        <p>
          Tudo continua como estava — mesmas quantidades, mesmas datas, mesmo IBAN. O ciclo Q8 corre normalmente até <strong>14 SET 2026</strong> e a partir daí passamos directamente a Q9.
        </p>
        <p style={{ fontSize: 12.5, color: 'var(--ink-3)', fontStyle: 'italic' }}>
          Caso queiras ajustar quantidades base no novo período, abre um pedido de alteração no portal — Jorge tratará da conversa.
        </p>
        <a className="cta tobacco" href="portal-cliente.html">
          Ver contrato no portal <span className="arrow">→</span>
        </a>
        <a className="cta-sec" href="#">descarregar v2.0 (PDF)</a>
        <JorgeSig note="Obrigado pela confiança — para os próximos dois anos."/>
      </div>
      <RvdeFoot/>
    </div>
  );
}

/* ── EMAIL 11: Contrato terminado (Jorge) ───────────────── */
function EmailTerminado() {
  return (
    <div className="email">
      <InboxMeta
        from="Jorge Libório · RVDE" fromEmail="jorge@rvde.pt"
        time="14 SET · 17:00"
        subject="Obrigado pelos 24 meses, Maria"
        preview="contrato fechado · arquivo aberto · porta sempre aberta"
        av="J" avKind="jorge"
      />
      <div className="hero" style={{ background: 'linear-gradient(135deg, #2a1d12 0%, #1a1108 100%)' }}>
        <div className="smallcaps">Fechado · 14 SET 2026</div>
        <div className="title">
          Obrigado pelos <em>24 meses</em>.
        </div>
      </div>
      <div className="body">
        <p className="lede">
          Maria — o contrato fechou-se hoje, exactamente como combinámos há dois anos. <em>8 ciclos sem falhas</em>, 8 entregas no sítio certo, 8 cobranças sempre limpas. Isto não acontece por acaso.
        </p>
        <p>
          O Hotel Sereno foi, ao longo destes 24 meses, um dos sítios mais fáceis de trabalhar da nossa carteira — pela organização da receção, pela clareza nos pedidos de extras, e pela calma com que tudo correu.
        </p>

        <div className="pull">
          <div className="smallcaps">A relação até hoje</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginTop: 14 }}>
            <div>
              <div className="big" style={{ fontSize: 28 }}>8</div>
              <p style={{ fontSize: 10.5, marginTop: 4 }}>ciclos · 100%</p>
            </div>
            <div>
              <div className="big" style={{ fontSize: 28 }}>4 080</div>
              <p style={{ fontSize: 10.5, marginTop: 4 }}>unidades</p>
            </div>
            <div>
              <div className="big" style={{ fontSize: 22, marginTop: 6 }}>30 736 €</div>
              <p style={{ fontSize: 10.5, marginTop: 4 }}>faturado</p>
            </div>
            <div>
              <div className="big" style={{ fontSize: 28 }}>0</div>
              <p style={{ fontSize: 10.5, marginTop: 4 }}>falhas</p>
            </div>
          </div>
        </div>

        <p>
          O <strong>portal continua acessível</strong> até <strong>14 SET 2027</strong> — podes consultar todas as faturas, contratos, mandatos e entregas, e descarregar tudo em arquivo .zip. Mesmo depois disso, está tudo seguro nas nossas contas e basta um email para te enviarmos qualquer documento.
        </p>

        <a className="cta tobacco" href="portal-cliente.html">
          Aceder ao arquivo <span className="arrow">→</span>
        </a>
        <a className="cta-sec" href="#">descarregar tudo (.zip)</a>

        <p style={{ marginTop: 22, fontSize: 13, color: 'var(--ink-2)', fontStyle: 'italic', lineHeight: 1.55 }}>
          Se um dia a Comporta voltar a precisar de nós — em três meses, em três anos — o telefone fica aberto. Não é uma frase feita; é como sempre fizemos.
        </p>

        <JorgeSig note="Foi um privilégio. Até sempre."/>
      </div>
      <RvdeFoot/>
    </div>
  );
}

/* ── App: design canvas with 4 sections ──────────────── */
function App() {
  return (
    <DesignCanvas
      title="RVDE · Emails do ritual"
      subtitle="8 templates · do convite à excepção"
    >
      <DCSection id="pre" title="Pré-adesão"
        subtitle="O primeiro contacto formal · Jorge envia a proposta a Maria">
        <DCArtboard id="convite" label="01 · Convite à proposta" width={700} height={1280}>
          <EmailConvite/>
        </DCArtboard>
      </DCSection>

      <DCSection id="adesao" title="Adesão"
        subtitle="Selada a assinatura · cliente passa a ter portal">
        <DCArtboard id="selado" label="02 · Contrato selado · boas-vindas" width={700} height={1380}>
          <EmailSelado/>
        </DCArtboard>
      </DCSection>

      <DCSection id="ciclo" title="Ritual trimestral"
        subtitle="A coluna do produto · 5 emails que se repetem a cada 3 meses">
        <DCArtboard id="d14" label="03 · D-14 · ciclo aberto" width={700} height={1420}>
          <EmailD14/>
        </DCArtboard>
        <DCArtboard id="d7" label="04 · D-7 · última hora (Jorge)" width={700} height={1100}>
          <EmailD7/>
        </DCArtboard>
        <DCArtboard id="cobranca" label="05 · Cobrança confirmada" width={700} height={1320}>
          <EmailCobranca/>
        </DCArtboard>
        <DCArtboard id="despacho" label="06 · Despacho · tracking" width={700} height={1080}>
          <EmailDespacho/>
        </DCArtboard>
        <DCArtboard id="entregue" label="07 · Entregue · ciclo fechado" width={700} height={1320}>
          <EmailEntregue/>
        </DCArtboard>
      </DCSection>

      <DCSection id="exc" title="Excepção"
        subtitle="Quando algo corre mal · Jorge volta a aparecer pessoalmente">
        <DCArtboard id="falha" label="08 · Falha SEPA · resolver" width={700} height={1380}>
          <EmailFalha/>
        </DCArtboard>
      </DCSection>

      <DCSection id="renovar" title="Renovação"
        subtitle="60 dias antes do fim · três caminhos · uma decisão">
        <DCArtboard id="d60" label="09 · D-60 · três caminhos (Jorge)" width={700} height={1640}>
          <EmailRenovar/>
        </DCArtboard>
        <DCArtboard id="renovado" label="10 · Renovado · v2.0 segue" width={700} height={1340}>
          <EmailRenovado/>
        </DCArtboard>
      </DCSection>

      <DCSection id="fim" title="Fim de contrato"
        subtitle="Última despedida · porta sempre aberta">
        <DCArtboard id="terminado" label="11 · Obrigado · 24 meses (Jorge)" width={700} height={1480}>
          <EmailTerminado/>
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);