// WealthIntelligence — Vault in cui sei informato (read-only, others' vaults you're listed on)
const InformedPage = ({state, t}) => {
  const items = state.informed || [];

  return <div className="fade-in">
    <PageHeader
      eyebrow={t.informed.title}
      title={t.informed.hero}
      subtitle={t.informed.sub}
    />

    {items.length === 0 ? (
      <div className="empty-state">
        <Icon name="informed" size={28} style={{marginBottom:10, opacity:.5}}/>
        <p style={{margin:0, fontFamily:'var(--f-serif)', fontStyle:'italic', fontSize:18}}>
          Nessuno ti ha ancora dato accesso a una sua cassetta.
        </p>
      </div>
    ) : (
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18}}>
        {items.map(b => (
          <div key={b.id} className="card" style={{padding:24, position:'relative', background: b.locked ? 'var(--paper-2)' : '#fff'}}>
            {b.locked && <div style={{position:'absolute', top:14, right:14, color:'var(--ink-muted)'}}><Icon name="lock" size={16}/></div>}

            <div className="row" style={{gap:12, marginBottom:18}}>
              <Monogram color={b.from.color} initials={b.from.initials}/>
              <div>
                <div className="muted" style={{fontSize:11, letterSpacing:'.08em', textTransform:'uppercase'}}>{t.informed.from}</div>
                <div style={{fontWeight:500}}>{b.from.name}</div>
                <div className="muted" style={{fontSize:12}}>{b.from.rel}</div>
              </div>
            </div>

            <div className="row" style={{gap:12, marginBottom:14}}>
              <CassettaBadge icon={b.icon} color={b.locked ? 'var(--gr-400)' : '#173B3F'} size={36}/>
              <h3 style={{margin:0, fontFamily:'var(--f-serif)', fontStyle:'italic', fontWeight:400, fontSize:19, lineHeight:1.2}}>{b.name}</h3>
            </div>

            <div style={{marginBottom:14}}><TriggerBadge trigger={b.trigger} t={t}/></div>

            <p className="muted" style={{margin:0, fontSize:13, lineHeight:1.45}}>
              {b.locked ? t.informed.locked : `${t.informed.unlocked} ${b.date}`}
            </p>

            {!b.locked && (
              <button className="btn btn-secondary btn-sm" style={{marginTop:16}}>
                <Icon name="unlock" size={13}/>{t.informed.open}
              </button>
            )}
          </div>
        ))}
      </div>
    )}
  </div>;
};

Object.assign(window, { InformedPage });