/* onboarding-steps.jsx — All 8 wizard steps */

/* ── Step 1: Welcome ──────────────────────────────────────── */
function StepWelcome({ onNext }) {
  return (
    <div className="stack gap-6">
      <div className="welcome-hero">
        <div className="grid" style={{ gridTemplateColumns: 'minmax(0, 1.5fr) minmax(0, 0.7fr)', gap: 28, position:'relative', zIndex: 1, alignItems:'center' }}>
          <div style={{ minWidth: 0 }}>
            <div className="smallcaps">Convite · {OB_PROSPECT.refId}</div>
            <h1 className="lead">
              Olá <em>Maria</em> — a RVDE preparou uma proposta para o {OB_PROSPECT.name}.
            </h1>
            <div className="mt-5" style={{ fontSize: 14.5, color:'rgba(242,233,210,0.78)', lineHeight: 1.55 }}>
              {OB_REP.note}
            </div>
          </div>
          <div style={{ display:'flex', justifyContent:'center', minWidth: 0 }}>
            <QuarterRing current={0} size={170} />
          </div>
        </div>
      </div>

      <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <FactCard num="24"   unit="meses"        title="Compromisso"  hint="2 anos · 8 ciclos trimestrais"/>
        <FactCard num="8"    unit="entregas"     title="Cadência"     hint="A cada 3 meses, ajustável"/>
        <FactCard num="0€"   unit="instalação"   title="Sem fees"     hint="O que pagas é o que recebes"/>
      </div>

      <div className="card surface-2">
        <div className="smallcaps mb-2">O que vais fazer nos próximos 6 minutos</div>
        <ol style={{ margin:0, paddingLeft: 22, fontSize: 13.5, lineHeight: 1.85, color: 'var(--ink-2)' }}>
          <li><strong>Rever a proposta</strong> — produtos base, valor, cadência.</li>
          <li><strong>Ajustar quantidades</strong> se quiseres — a base define-se aqui, mas é revista todos os trimestres.</li>
          <li><strong>Confirmar dados</strong> fiscais, morada de entrega e contactos da equipa.</li>
          <li><strong>Assinar o mandato SEPA B2B</strong> para os débitos trimestrais.</li>
          <li><strong>Assinar o contrato</strong> — selo digital, PDF guardado para os dois lados.</li>
        </ol>
        <div className="ink-3 mt-4" style={{ fontSize: 12 }}>
          Podes sair a qualquer momento — o progresso fica guardado neste link.
        </div>
      </div>

      <div className="row gap-3">
        <button className="btn lg clay" onClick={onNext}>Começar →</button>
        <button className="btn lg ghost">Marcar chamada com Jorge</button>
      </div>
    </div>
  );
}

function QuarterRing({ current = 0, size = 200 }) {
  const r = size * 0.39, cx = size/2, cy = size/2;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="rgba(201,166,97,0.2)" strokeWidth="0.5"/>
      {Array.from({length:8}).map((_,i) => {
        const a = (i / 8) * Math.PI * 2 - Math.PI/2;
        const x = cx + Math.cos(a) * r;
        const y = cy + Math.sin(a) * r;
        const done = i < current;
        return (
          <g key={i}>
            <circle cx={x} cy={y} r={done ? 6 : 4}
              fill={done ? 'var(--clay)' : 'transparent'}
              stroke={done ? 'var(--clay)' : 'rgba(201,166,97,0.5)'}
              strokeWidth="0.5"/>
            <text x={cx + Math.cos(a) * (r+15)} y={cy + Math.sin(a) * (r+15) + 3}
              textAnchor="middle" className="ring-q">Q{i+1}</text>
          </g>
        );
      })}
      <text x={cx} y={cy-4} textAnchor="middle"
        style={{fontFamily:'var(--display)', fontSize: size*0.07, fill:'var(--sand)'}}>24 meses</text>
      <text x={cx} y={cy+ size*0.08} textAnchor="middle"
        style={{fontFamily:'var(--mono)', fontSize: size*0.05, fill:'rgba(201,166,97,0.6)', letterSpacing:'0.1em'}}>8 CICLOS</text>
    </svg>
  );
}

function FactCard({ num, unit, title, hint }) {
  return (
    <div className="card">
      <div className="smallcaps">{title}</div>
      <div className="display tab mt-2" style={{ fontSize: 38, lineHeight: 1, color:'var(--clay)' }}>
        {num}<span style={{ fontSize: 15, marginLeft: 6, color: 'var(--ink-3)' }}>{unit}</span>
      </div>
      <div className="ink-3 mt-3" style={{ fontSize: 12 }}>{hint}</div>
    </div>
  );
}

/* ── Step 2: Proposal overview ────────────────────────────── */
function StepProposal({ data }) {
  const totalQ = data.base.reduce((s,p) => s + p.price * p.qty, 0);
  const iva = totalQ * 0.23;
  const total = totalQ + iva;

  return (
    <div className="stack gap-6">
      <div>
        <div className="smallcaps">Proposta · {OB_PROSPECT.refId}</div>
        <h1 className="page-title mt-2">A proposta numa página.</h1>
        <p className="page-sub">
          O que a RVDE propõe ao {OB_PROSPECT.name}, com base na conversa de Agosto.
          Tudo isto vai aparecer no contrato.
        </p>
      </div>

      {/* Big number */}
      <div className="card tobacco" style={{ padding:'28px 32px' }}>
        <div className="grid gap-5" style={{ gridTemplateColumns: 'minmax(0, 1.3fr) minmax(0, 1fr)', alignItems:'center' }}>
          <div style={{ minWidth: 0 }}>
            <div className="smallcaps">Valor estimado por ciclo · trimestral</div>
            <div className="big-num-tile">
              {CRM_FMT_EUR(total)}
            </div>
            <div className="mt-3" style={{ fontSize: 13, color:'rgba(242,233,210,0.6)' }}>
              {data.base.length} produtos base · IVA incluído · extras à parte
            </div>
          </div>
          <div className="stack gap-3" style={{ minWidth: 0 }}>
            {[
              ['Subtotal', CRM_FMT_EUR(totalQ)],
              ['IVA 23%', CRM_FMT_EUR(iva)],
              ['8 ciclos', CRM_FMT_EUR(total * 8)],
            ].map(([k,v]) => (
              <div key={k} className="flex between nowrap" style={{
                paddingBottom: 10, borderBottom: '0.5px solid rgba(201,166,97,0.15)',
                fontSize: 13.5, gap: 12,
              }}>
                <span style={{color:'rgba(242,233,210,0.6)'}}>{k}</span>
                <span className="mono tab nowrap" style={{color:'var(--bone)'}}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Two columns */}
      <div className="grid gap-4" style={{ gridTemplateColumns: '1.3fr 1fr' }}>
        <div className="card">
          <h2 className="section-title">O que recebes a cada trimestre</h2>
          <div className="ink-3 mt-1" style={{ fontSize: 12 }}>Linha base · ajustável no passo seguinte</div>
          <div className="mt-4 stack gap-2">
            {data.base.map(p => (
              <div key={p.code} className="row gap-3" style={{ padding:'10px 0', borderBottom:'0.5px solid var(--rule-2)' }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 4,
                  background: 'var(--surface-2)',
                  backgroundImage: 'repeating-linear-gradient(135deg, transparent 0 6px, rgba(168,106,61,0.08) 6px 7px)',
                  border: '0.5px solid var(--rule-2)',
                  flexShrink: 0,
                }}/>
                <div className="grow">
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>{p.name}</div>
                  <div className="italic-serif ink-3" style={{ fontSize: 11.5 }}>{p.scent} · {p.fmt}</div>
                </div>
                <div className="mono tab" style={{ fontSize: 13, width: 50, textAlign:'right', fontWeight: 600 }}>×{p.qty}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <h2 className="section-title">Termos-chave</h2>
          <div className="mt-4 stack gap-4">
            {[
              ['Duração',   OB_TERMS.duration],
              ['Cadência',  OB_TERMS.cadence + ' · D-7 para extras'],
              ['Renovação', OB_TERMS.renewal],
              ['Pagamento', OB_TERMS.payment],
              ['Faturação', OB_TERMS.invoicing],
              ['Início previsto', OB_TERMS.startProposed],
            ].map(([k,v]) => (
              <div key={k} className="flex between" style={{
                paddingBottom: 12, borderBottom: '0.5px solid var(--rule-2)', alignItems:'baseline', gap: 12,
              }}>
                <div className="smallcaps" style={{flexShrink: 0}}>{k}</div>
                <div style={{ fontSize: 13.5, textAlign:'right' }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── Step 3: Base adjustment ──────────────────────────────── */
function StepBase({ data, setBase }) {
  const setQty = (code, q) => {
    setBase(data.base.map(p => p.code === code ? { ...p, qty: Math.max(0, q) } : p));
  };
  const total = data.base.reduce((s,p) => s + p.price * p.qty, 0);
  const totalIva = total * 1.23;
  const changed = data.base.some(p => p.qty !== p.proposedQty);

  return (
    <div className="stack gap-5">
      <div>
        <div className="smallcaps">Passo 3 · linha base</div>
        <h1 className="page-title mt-2">Ajustar a base — ou ficar tal como o Jorge propôs.</h1>
        <p className="page-sub">
          Estas quantidades aplicam-se a <strong>todos os trimestres</strong> durante 24 meses.
          Trimestre a trimestre podes pedir extras em cima — isto é só o chão. Os preços são <strong>sem IVA</strong>.
        </p>
      </div>

      <div className="t-wrap">
        <div className="t-scroll">
          <table className="t" style={{ minWidth: 760 }}>
            <thead>
              <tr>
                <th>Produto · fragrância</th>
                <th style={{ width: 160 }}>Formato</th>
                <th className="num" style={{ width: 90 }}>Proposto</th>
                <th style={{ width: 150, textAlign:'center' }}>Tu confirmas</th>
                <th className="num" style={{ width: 90 }}>PU</th>
                <th className="num" style={{ width: 110 }}>Subtotal</th>
              </tr>
            </thead>
            <tbody>
              {data.base.map(p => {
                const delta = p.qty - p.proposedQty;
                return (
                  <tr key={p.code}>
                    <td>
                      <div className="row gap-3 items-c">
                        <div style={{
                          width: 36, height: 36, borderRadius: 4,
                          background: 'var(--surface-2)',
                          backgroundImage: 'repeating-linear-gradient(135deg, transparent 0 6px, rgba(168,106,61,0.08) 6px 7px)',
                          border: '0.5px solid var(--rule-2)', flexShrink: 0,
                        }}/>
                        <div>
                          <div style={{ fontSize: 13.5, fontWeight: 500 }}>{p.name}</div>
                          <div className="italic-serif ink-3" style={{ fontSize: 11.5 }}>{p.scent}</div>
                        </div>
                      </div>
                    </td>
                    <td className="ink-3" style={{ fontSize: 12 }}>{p.fmt}</td>
                    <td className="num ink-3">{p.proposedQty}</td>
                    <td style={{ textAlign:'center' }}>
                      <Stepper value={p.qty} onChange={(v) => setQty(p.code, v)} highlight={delta !== 0}/>
                      {delta !== 0 && (
                        <div className="delta-pill mt-1">{delta > 0 ? '+' : ''}{delta}</div>
                      )}
                    </td>
                    <td className="num mono">{CRM_FMT_EUR(p.price)}</td>
                    <td className="num" style={{ fontWeight: 600 }}>{CRM_FMT_EUR(p.price * p.qty)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      <div className="grid gap-4" style={{ gridTemplateColumns: '1.3fr 1fr' }}>
        <div className="card surface-2 flat" style={{ fontSize: 13, color:'var(--ink-2)', lineHeight: 1.55 }}>
          <div className="smallcaps mb-2">Bom saber</div>
          <ul style={{ margin:0, paddingLeft: 18, lineHeight: 1.7 }}>
            <li>A base define-se uma vez · mudanças permanentes precisam de amendment ao contrato.</li>
            <li>Para variações pontuais (época alta, evento), usa-se <strong>extras</strong> trimestre a trimestre.</li>
            <li>Os preços base ficam fixos durante os 24 meses.</li>
          </ul>
        </div>
        <div className="card" style={{ background: changed ? 'var(--surface-2)' : 'var(--bone)' }}>
          <div className="flex between items-c">
            <div className="smallcaps">Estimativa por ciclo</div>
            {changed && <span className="badge pending"><span className="dot"/>com alterações</span>}
          </div>
          <div className="display tab clay mt-2" style={{ fontSize: 32, lineHeight: 1 }}>{CRM_FMT_EUR(totalIva)}</div>
          <div className="ink-3 mt-1" style={{ fontSize: 11.5 }}>
            {CRM_FMT_EUR(total)} sem IVA · IVA 23% · <span className="mono">×8 = {CRM_FMT_EUR(totalIva * 8)}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── Step 4: Company & address ────────────────────────────── */
function StepCompany({ data, setData }) {
  const upd = (k, v) => setData({ ...data, company: { ...data.company, [k]: v }});
  const updAddr = (k, v) => setData({ ...data, address: { ...data.address, [k]: v }});

  return (
    <div className="stack gap-5">
      <div>
        <div className="smallcaps">Passo 4 · empresa & morada</div>
        <h1 className="page-title mt-2">Dados fiscais e onde entregamos.</h1>
        <p className="page-sub">
          Vão para o contrato e para todas as faturas (TOConline). Se algo mudar mais tarde, basta abrir um pedido de alteração no portal.
        </p>
      </div>

      <div className="grid gap-4" style={{ gridTemplateColumns: '1fr 1fr' }}>
        <div className="card">
          <h2 className="section-title">Empresa · dados fiscais</h2>
          <div className="grid gap-4 mt-4" style={{ gridTemplateColumns: '1fr 1fr' }}>
            <div className="field" style={{ gridColumn:'span 2' }}>
              <span className="lbl">Designação social</span>
              <input className="input" value={data.company.legal} onChange={e => upd('legal', e.target.value)}/>
            </div>
            <div className="field">
              <span className="lbl">NIF</span>
              <input className="input mono" value={data.company.nif} onChange={e => upd('nif', e.target.value)}/>
            </div>
            <div className="field">
              <span className="lbl">CAE principal</span>
              <input className="input mono" value={data.company.cae} onChange={e => upd('cae', e.target.value)}/>
            </div>
            <div className="field" style={{ gridColumn:'span 2' }}>
              <span className="lbl">Sede</span>
              <input className="input" value={data.company.address} onChange={e => upd('address', e.target.value)}/>
            </div>
          </div>
        </div>

        <div className="card">
          <h2 className="section-title">Morada de entrega</h2>
          <div className="ink-3 mt-1" style={{ fontSize: 12 }}>CTT Expresso · 2–3 dias úteis</div>
          <div className="grid gap-4 mt-4" style={{ gridTemplateColumns: '1fr 1fr' }}>
            <div className="field" style={{ gridColumn:'span 2' }}>
              <span className="lbl">Designação local</span>
              <input className="input" value={data.address.name} onChange={e => updAddr('name', e.target.value)}/>
            </div>
            <div className="field" style={{ gridColumn:'span 2' }}>
              <span className="lbl">A.C. (aos cuidados de)</span>
              <input className="input" value={data.address.attn} onChange={e => updAddr('attn', e.target.value)}/>
            </div>
            <div className="field" style={{ gridColumn:'span 2' }}>
              <span className="lbl">Morada</span>
              <input className="input" value={data.address.street} onChange={e => updAddr('street', e.target.value)}/>
            </div>
            <div className="field">
              <span className="lbl">Código postal</span>
              <input className="input mono" value={data.address.zip} onChange={e => updAddr('zip', e.target.value)}/>
            </div>
            <div className="field">
              <span className="lbl">País</span>
              <input className="input" value={data.address.country} onChange={e => updAddr('country', e.target.value)}/>
            </div>
            <div className="row gap-2" style={{ gridColumn:'span 2' }}>
              <div className="check on"/>
              <span style={{ fontSize: 13 }}>Usar esta morada também para faturação</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── Step 5: Contacts ─────────────────────────────────────── */
function StepContacts({ data, setData }) {
  const setContacts = (cs) => setData({ ...data, contacts: cs });
  const updContact = (i, k, v) => setContacts(data.contacts.map((c, j) => j===i ? { ...c, [k]: v } : c));
  const addContact = () => setContacts([...data.contacts, { role:'Outro', name:'', email:'', phone:'' }]);
  const removeContact = (i) => setContacts(data.contacts.filter((_, j) => j !== i));

  return (
    <div className="stack gap-5">
      <div>
        <div className="smallcaps">Passo 5 · contactos</div>
        <h1 className="page-title mt-2">Quem na vossa equipa pode falar connosco.</h1>
        <p className="page-sub">
          O <strong>principal</strong> recebe os emails do ciclo (D-14, D-7, despacho). <strong>Faturação</strong> recebe as faturas e movimentos SEPA. <strong>Receção</strong> é só para entregas.
        </p>
      </div>

      <div className="stack gap-3">
        {data.contacts.map((c, i) => (
          <div key={i} className="card" style={{ padding: '16px 18px' }}>
            <div className="grid" style={{ gridTemplateColumns: '120px 1.3fr 1.3fr 0.9fr 32px', gap: 14, alignItems:'flex-end' }}>
              <div className="field">
                <span className="lbl">Papel</span>
                <select className="input" value={c.role} onChange={e => updContact(i, 'role', e.target.value)}>
                  <option>Principal</option>
                  <option>Faturação</option>
                  <option>Receção</option>
                  <option>Outro</option>
                </select>
              </div>
              <div className="field">
                <span className="lbl">Nome</span>
                <input className="input" value={c.name} onChange={e => updContact(i, 'name', e.target.value)}/>
              </div>
              <div className="field">
                <span className="lbl">Email</span>
                <input className="input" type="email" value={c.email} onChange={e => updContact(i, 'email', e.target.value)}/>
              </div>
              <div className="field">
                <span className="lbl">Telefone</span>
                <input className="input mono" value={c.phone} onChange={e => updContact(i, 'phone', e.target.value)}/>
              </div>
              <button className="btn ghost sm" style={{ padding: '0 6px', height: 40 }}
                onClick={() => removeContact(i)} disabled={data.contacts.length <= 1} title="Remover">
                <Icon k="x" size={13}/>
              </button>
            </div>
          </div>
        ))}
      </div>

      <div className="row gap-3">
        <button className="btn outline" onClick={addContact}>
          <Icon k="plus" size={13}/> Adicionar contacto
        </button>
        <span className="ink-3" style={{ fontSize: 12 }}>Podes adicionar / remover mais tarde na <em>Conta</em>.</span>
      </div>
    </div>
  );
}

/* ── Step 6: SEPA mandate ─────────────────────────────────── */
function StepSepa({ data, setData }) {
  const upd = (k, v) => setData({ ...data, sepa: { ...data.sepa, [k]: v }});
  const valid = data.sepa.iban && data.sepa.iban.replace(/\s/g,'').length >= 21 && data.sepa.bank;

  return (
    <div className="stack gap-5">
      <div>
        <div className="smallcaps">Passo 6 · mandato SEPA B2B</div>
        <h1 className="page-title mt-2">Autoriza-nos a debitar trimestralmente.</h1>
        <p className="page-sub">
          O débito é <strong>SEPA SDD B2B</strong>, executado a cada início de trimestre (D-day). Recebes sempre aviso a D-14 e D-7 — só cobramos depois desse último.
        </p>
      </div>

      <div className="grid gap-4" style={{ gridTemplateColumns: '1.4fr 1fr', alignItems:'flex-start' }}>
        <div className="card">
          <h2 className="section-title">Dados bancários</h2>
          <div className="grid gap-4 mt-4" style={{ gridTemplateColumns: '1fr 1fr' }}>
            <div className="field" style={{ gridColumn:'span 2' }}>
              <span className="lbl">IBAN</span>
              <input className="input mono" placeholder="PT50 0000 0000 0000 0000 0 00" value={data.sepa.iban}
                onChange={e => upd('iban', e.target.value)}/>
              <span className="hint">25 caracteres · começamos por PT50</span>
            </div>
            <div className="field" style={{ gridColumn:'span 2' }}>
              <span className="lbl">Banco</span>
              <input className="input" value={data.sepa.bank} onChange={e => upd('bank', e.target.value)}/>
            </div>
            <div className="field" style={{ gridColumn:'span 2' }}>
              <span className="lbl">Titular da conta</span>
              <input className="input" value={data.sepa.holder} onChange={e => upd('holder', e.target.value)}/>
            </div>
          </div>
          <div className="row gap-2 mt-4">
            <div className={'check ' + (data.sepa.accepted ? 'on' : '')}
              onClick={() => upd('accepted', !data.sepa.accepted)}/>
            <span style={{ fontSize: 13, lineHeight: 1.5 }}>
              Autorizo a RVDE Comércio Lda. e o seu prestador <strong>Stripe Payments Europe</strong> a debitar a conta indicada conforme o calendário trimestral do contrato. Leio e aceito o <a href="#" style={{color:'var(--clay)'}}>texto do mandato SEPA B2B</a>.
            </span>
          </div>
        </div>

        <div className="card tobacco">
          <div className="smallcaps">Como funciona</div>
          <div className="mt-4 stack gap-4">
            {[
              ['D-14', 'Recebes email com a fatura proforma do ciclo'],
              ['D-7',  'Última hora para ajustar extras · lista fecha'],
              ['D-0',  'Débito SEPA · vês fatura definitiva no portal'],
              ['~D+5', 'CTT Expresso entrega no Hotel'],
            ].map(([d, t]) => (
              <div key={d} className="row gap-3" style={{ alignItems:'flex-start' }}>
                <div className="mono" style={{
                  fontSize: 11, padding: '3px 8px', borderRadius: 3,
                  background: 'rgba(201,166,97,0.15)', color: 'var(--sand)',
                  letterSpacing: 0.06, fontWeight: 600,
                  whiteSpace: 'nowrap', flexShrink: 0,
                }}>{d}</div>
                <div style={{ fontSize: 13, color: 'var(--bone)', lineHeight: 1.45 }}>{t}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {!valid && data.sepa.iban && (
        <div className="card flat" style={{ background:'rgba(150,63,37,0.08)', borderColor:'rgba(150,63,37,0.3)' }}>
          <span style={{ fontSize: 12.5, color:'var(--clay-deep)' }}>
            ⚠ IBAN parece incompleto — confirma os 25 caracteres.
          </span>
        </div>
      )}
    </div>
  );
}

/* ── Step 7: Review & sign ────────────────────────────────── */
function StepReview({ data, setData }) {
  const upd = (k, v) => setData({ ...data, signature: { ...data.signature, [k]: v }});
  const totalQ = data.base.reduce((s,p) => s + p.price * p.qty, 0);
  const total = totalQ * 1.23;

  return (
    <div className="stack gap-5">
      <div>
        <div className="smallcaps">Passo 7 · revisão final</div>
        <h1 className="page-title mt-2">Tudo certo? Assina e ficamos a contrato.</h1>
        <p className="page-sub">
          Última vista antes de selarmos. Vais receber o PDF assinado por email em ~2 minutos. A primeira cobrança é a {OB_TERMS.startProposed}.
        </p>
      </div>

      <div className="grid gap-4" style={{ gridTemplateColumns: '1.5fr 1fr' }}>
        <div className="card">
          <div className="flex between items-c">
            <h2 className="section-title">Resumo do contrato</h2>
            <span className="badge"><span className="dot" style={{background:'var(--clay)'}}/>v1.0 · draft</span>
          </div>
          <hr className="divider" style={{ margin: '16px 0' }}/>
          <ReviewBlock title="Cliente">
            <div className="display" style={{ fontSize: 18 }}>{data.company.legal}</div>
            <div className="ink-3" style={{ fontSize: 12.5 }}>NIF {data.company.nif} · {data.address.zip}</div>
          </ReviewBlock>
          <ReviewBlock title="Linha base">
            <div style={{ fontSize: 13, lineHeight: 1.8 }}>
              {data.base.map(p => (
                <div key={p.code} className="flex between">
                  <span>{p.name} <span className="ink-3 italic-serif">({p.scent})</span></span>
                  <span className="mono ink-3">×{p.qty}</span>
                </div>
              ))}
            </div>
          </ReviewBlock>
          <ReviewBlock title="Termos">
            <div className="grid gap-2" style={{ gridTemplateColumns: '1fr 1fr', fontSize: 13 }}>
              <div><span className="ink-3">Duração · </span>{OB_TERMS.duration}</div>
              <div><span className="ink-3">Cadência · </span>{OB_TERMS.cadence}</div>
              <div><span className="ink-3">Pagamento · </span>{OB_TERMS.payment}</div>
              <div><span className="ink-3">Renovação · </span>{OB_TERMS.renewal}</div>
              <div><span className="ink-3">Início · </span><span className="mono">{OB_TERMS.startProposed}</span></div>
              <div><span className="ink-3">Foro · </span>{OB_TERMS.jurisdiction}</div>
            </div>
          </ReviewBlock>
          <ReviewBlock title="Mandato SEPA">
            <div className="mono" style={{ fontSize: 13 }}>{data.sepa.iban || '—'}</div>
            <div className="ink-3" style={{ fontSize: 12 }}>{data.sepa.bank} · titular {data.sepa.holder}</div>
          </ReviewBlock>

          <hr className="divider" style={{ margin: '16px 0' }}/>
          <div className="flex between items-c">
            <div className="italic-serif" style={{ fontSize: 16 }}>Total trimestral · IVA incluído</div>
            <div className="display tab clay" style={{ fontSize: 28 }}>{CRM_FMT_EUR(total)}</div>
          </div>
          <div className="ink-3 mt-1" style={{ fontSize: 11.5, textAlign:'right' }}>
            8 ciclos · {CRM_FMT_EUR(total * 8)} ao longo do contrato (sem extras)
          </div>
        </div>

        {/* Signature panel */}
        <div className="card surface-2">
          <div className="smallcaps">Assinatura</div>
          <div className="italic-serif mt-3" style={{ fontSize: 14, color:'var(--ink-2)', lineHeight: 1.5 }}>
            Assino na qualidade de representante legal do {OB_PROSPECT.name}.
          </div>

          <div className="mt-4">
            <span className="lbl smallcaps">Nome completo · gerente</span>
            <div className="sigpad mt-2">
              <input
                placeholder="Maria Antunes"
                value={data.signature.name}
                onChange={e => upd('name', e.target.value)}
              />
            </div>
            <div className="ink-3 mt-2" style={{ fontSize: 11.5 }}>
              {data.signature.name ? <>Selado por <span className="mono">{data.signature.name}</span> em <span className="mono">01 SET 2024 · 14:32</span></> : 'Escreve o nome — vale como assinatura digital qualificada (eIDAS)'}
            </div>
          </div>

          <hr className="divider" style={{ margin: '20px 0' }}/>

          <div className="stack gap-3">
            <div className="row gap-2">
              <div className={'check ' + (data.signature.agreeContract ? 'on' : '')}
                onClick={() => upd('agreeContract', !data.signature.agreeContract)}/>
              <span style={{ fontSize: 12.5, lineHeight: 1.5 }}>
                Li e aceito o <a href="#" style={{ color:'var(--clay)' }}>contrato v1.0</a> (PDF, 6 páginas).
              </span>
            </div>
            <div className="row gap-2">
              <div className={'check ' + (data.signature.agreeMandate ? 'on' : '')}
                onClick={() => upd('agreeMandate', !data.signature.agreeMandate)}/>
              <span style={{ fontSize: 12.5, lineHeight: 1.5 }}>
                Confirmo o <a href="#" style={{ color:'var(--clay)' }}>mandato SEPA B2B</a> indicado.
              </span>
            </div>
            <div className="row gap-2">
              <div className={'check ' + (data.signature.agreeRgpd ? 'on' : '')}
                onClick={() => upd('agreeRgpd', !data.signature.agreeRgpd)}/>
              <span style={{ fontSize: 12.5, lineHeight: 1.5 }}>
                Li a <a href="#" style={{ color:'var(--clay)' }}>política RGPD</a> da RVDE.
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ReviewBlock({ title, children }) {
  return (
    <div style={{ paddingTop: 14, paddingBottom: 14, borderBottom: '0.5px solid var(--rule-2)' }}>
      <div className="smallcaps mb-2">{title}</div>
      {children}
    </div>
  );
}

/* ── Step 8: Done ─────────────────────────────────────────── */
function StepDone({ data }) {
  return (
    <div className="stack gap-6" style={{ textAlign: 'center', paddingTop: 32 }}>
      <div style={{ display:'flex', justifyContent:'center' }}>
        <div style={{
          width: 88, height: 88, borderRadius:'50%',
          background:'var(--clay)', color:'var(--bone)',
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          <Icon k="check" size={42} color="var(--bone)"/>
        </div>
      </div>

      <div>
        <div className="smallcaps">Selado · 01 SET 2024 · 14:32</div>
        <h1 className="page-title mt-3" style={{ fontSize: 52 }}>
          Bem-vinda à <em className="italic-serif" style={{color:'var(--clay)'}}>RVDE</em>, Maria.
        </h1>
        <p className="page-sub" style={{ margin: '14px auto 0', maxWidth: 580 }}>
          O contrato está assinado. Acabámos de te enviar o PDF e o mandato para o email — entram em vigor no próximo ciclo.
        </p>
      </div>

      <div style={{ display:'flex', justifyContent:'center', marginTop: 12 }}>
        <QuarterRing current={1} />
      </div>

      <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(3, 1fr)', maxWidth: 720, margin: '0 auto', width: '100%' }}>
        <FactCard num="Q1" unit="" title="Primeiro ciclo" hint="abre a 15 SET 2024"/>
        <FactCard num="01 DEZ" unit="" title="Primeira cobrança" hint="D-7 a 24 NOV · SEPA"/>
        <FactCard num="~05 DEZ" unit="" title="Primeira entrega" hint="CTT Expresso · Comporta"/>
      </div>

      <div className="row gap-3" style={{ justifyContent:'center', marginTop: 24 }}>
        <a className="btn lg clay" href="Portal Cliente.html">Entrar no portal →</a>
        <button className="btn lg outline"><Icon k="download" size={13}/> Descarregar PDF</button>
      </div>

      <div className="ink-3" style={{ fontSize: 12, marginTop: 16 }}>
        Já agora — Jorge avisa-te uma semana antes de cada cobrança. Não precisas de fazer nada para o primeiro ciclo.
      </div>
    </div>
  );
}

/* ── Reusable stepper ─────────────────────────────────────── */
function Stepper({ value, onChange, highlight=false }) {
  return (
    <div className="row gap-1" style={{ justifyContent:'center', alignItems:'center' }}>
      <button className="btn ghost sm" style={{ height: 30, width: 30, padding: 0, justifyContent:'center', border:'0.5px solid var(--rule)' }}
        onClick={() => onChange(value - 1)} disabled={value <= 0}>
        <Icon k="x" size={10}/>
      </button>
      <input
        className="qty-input"
        style={{
          borderColor: highlight ? 'var(--clay)' : 'var(--rule)',
          color: highlight ? 'var(--clay)' : 'var(--ink)',
          fontWeight: highlight ? 600 : 400,
        }}
        type="number"
        value={value}
        onChange={(e) => onChange(parseInt(e.target.value || '0', 10))}
      />
      <button className="btn ghost sm" style={{ height: 30, width: 30, padding: 0, justifyContent:'center', border:'0.5px solid var(--rule)' }}
        onClick={() => onChange(value + 1)}>
        <Icon k="plus" size={10}/>
      </button>
    </div>
  );
}

Object.assign(window, {
  StepWelcome, StepProposal, StepBase, StepCompany,
  StepContacts, StepSepa, StepReview, StepDone,
  QuarterRing, FactCard,
});