/* portal-account.jsx — Conta: contactos, morada, NIF */

function PortalAccount() {
  const c = PORTAL_CUSTOMER;
  return (
    <div className="content stack gap-5">
      <div>
        <h1 className="page-title">Conta</h1>
        <div className="page-sub">Dados fiscais, contactos e morada de entrega.</div>
      </div>

      <div className="grid gap-4" style={{ gridTemplateColumns: '1fr 1fr' }}>
        {/* Cliente / fiscal */}
        <div className="card">
          <h2 className="section-title">Cliente</h2>
          <div className="grid gap-3 mt-4" style={{ gridTemplateColumns: '1fr 1fr', rowGap: 14 }}>
            <Term label="Nome"     value={c.name}/>
            <Term label="Tipo"     value={c.kind}/>
            <Term label="NIF"      value={c.nif} mono/>
            <Term label="ID Cliente" value={c.id} mono/>
            <Term label="Localidade" value={c.loc}/>
            <Term label="Idioma"   value="Português · Portugal"/>
          </div>
          <div className="row gap-2 mt-5">
            <button className="btn outline sm">Pedir alteração de dados fiscais</button>
          </div>
        </div>

        {/* Morada de entrega */}
        <div className="card">
          <div className="flex between items-c">
            <h2 className="section-title">Morada de entrega</h2>
            <button className="btn ghost sm" style={{padding:'0 8px'}}><Icon k="edit" size={13}/></button>
          </div>
          <div className="mt-4" style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-2)' }}>
            <div style={{ fontWeight: 600, color: 'var(--ink)' }}>{PORTAL_DELIVERY.name}</div>
            <div className="ink-3 mt-1" style={{ fontSize: 12 }}>Aos cuidados de · {PORTAL_DELIVERY.attn}</div>
            <div className="mt-3">{PORTAL_DELIVERY.street}</div>
            <div>{PORTAL_DELIVERY.zip}</div>
            <div>{PORTAL_DELIVERY.country}</div>
          </div>
          <hr className="divider" style={{ margin: '20px 0' }}/>
          <div className="smallcaps">Transportadora</div>
          <div className="row gap-3 mt-2" style={{ alignItems:'center' }}>
            <Icon k="truck" size={16} color="var(--clay)"/>
            <span style={{ fontSize: 13.5 }}>CTT Expresso · 2–3 dias úteis</span>
          </div>
        </div>
      </div>

      {/* Contactos */}
      <div>
        <div className="flex between items-c" style={{ marginBottom: 12 }}>
          <h2 className="section-title">Contactos da equipa</h2>
          <button className="btn outline sm"><Icon k="plus" size={13}/> Adicionar contacto</button>
        </div>
        <div style={{ border: '0.5px solid var(--rule)', borderRadius: 6, overflow: 'hidden', background:'var(--bone)' }}>
          <table className="t">
            <thead>
              <tr>
                <th style={{ width: 140 }}>Função</th>
                <th>Nome</th>
                <th>Email</th>
                <th>Telefone</th>
                <th style={{ width: 80 }}/>
              </tr>
            </thead>
            <tbody>
              {PORTAL_CONTACTS.map(p => (
                <tr key={p.email}>
                  <td><span className="badge"><span className="dot" style={{background:'var(--clay)'}}/>{p.role}</span></td>
                  <td>
                    <div className="row gap-3 items-c">
                      <div style={{
                        width: 28, height: 28, borderRadius: '50%',
                        background: 'var(--surface-2)', color: 'var(--ink-2)',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontFamily: 'var(--display)', fontSize: 13, border:'0.5px solid var(--rule-2)',
                      }}>{p.avatar}</div>
                      <span style={{fontWeight: 500}}>{p.name}</span>
                    </div>
                  </td>
                  <td className="ink-3" style={{ fontSize: 12.5 }}>{p.email}</td>
                  <td className="mono ink-3" style={{ fontSize: 12 }}>{p.phone}</td>
                  <td>
                    <button className="btn ghost sm" style={{ padding:'0 6px' }}><Icon k="edit" size={12}/></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Preferences */}
      <div className="card">
        <h2 className="section-title">Notificações</h2>
        <div className="ink-3 mt-1" style={{ fontSize: 12 }}>Quando queres receber emails do portal.</div>
        <div className="mt-4 stack gap-3">
          {[
            { k:'open', label:'Abertura de ciclo (D-14)', on: true, hint:'Receberás 14 dias antes de cada cobrança' },
            { k:'d7',   label:'Lembrete D-7',             on: true, hint:'Última hora para ajustar extras' },
            { k:'paid', label:'Confirmação de cobrança',  on: true, hint:'Após o débito SEPA' },
            { k:'ship', label:'Despacho',                 on: true, hint:'Quando a CTT recolhe' },
            { k:'news', label:'Catálogo · novidades',     on: false, hint:'Produtos novos · 1× por trimestre' },
          ].map(n => (
            <div key={n.k} className="flex between items-c" style={{ padding:'10px 0', borderBottom: '0.5px solid var(--rule-2)' }}>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 500 }}>{n.label}</div>
                <div className="ink-3" style={{ fontSize: 11.5, marginTop: 2 }}>{n.hint}</div>
              </div>
              <div style={{
                width: 36, height: 20, borderRadius: 10,
                background: n.on ? 'var(--clay)' : 'var(--surface-3)',
                position: 'relative', flexShrink: 0,
                border: '0.5px solid var(--rule)',
              }}>
                <div style={{
                  position: 'absolute', top: 1, left: n.on ? 17 : 1,
                  width: 16, height: 16, borderRadius: '50%',
                  background: 'var(--bone)', transition: 'left 0.15s',
                }}/>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PortalAccount });