// Client portal — mobile-first, with reports tab
(function(){
const { useState, useEffect } = React;

const ClientPortal = ({ projectId, onBack, onViewReport }) => {
  const project = YBP_DATA.projects.find(p => p.id === projectId) || YBP_DATA.projects[0];
  const detail = YBP_DATA.projectDetail;
  const [tab, setTab] = useState('status');
  const [reportFilter, setReportFilter] = useState('all');
  const [store, setStore] = useState(SyncStore.get());
  useEffect(() => SyncStore.subscribe(setStore), []);

  if (!project) return (
    <div style={{ minHeight:'100%', display:'flex', alignItems:'center', justifyContent:'center', background:'#f5f6f8', fontFamily:'Assistant, sans-serif', direction:'rtl' }}>
      <div style={{ textAlign:'center', padding:40 }}>
        <div style={{ fontSize:32, marginBottom:12 }}>🏗️</div>
        <div style={{ fontSize:16, fontWeight:700, color:'#1a2c4a', marginBottom:6 }}>טוען פרטי פרויקט...</div>
        <div style={{ fontSize:13, color:'#6b7280' }}>אנא המתן</div>
      </div>
    </div>
  );

  const DIST_KEY = `ybp_dist_${projectId}`;
  const loadDist = () => { try { return JSON.parse(localStorage.getItem(DIST_KEY) || '{}'); } catch { return {}; } };

  const projectReports = (store.reports || [])
    .filter(r => r.projectId === projectId)
    .sort((a, b) => (b.date || '').localeCompare(a.date || ''));

  const filteredReports = reportFilter === 'all' ? projectReports : projectReports.filter(r => r.kind === reportFilter);

  const TABS = [
    { k: 'status',  label: 'סטטוס',   icon: '📊' },
    { k: 'phases',  label: 'שלבים',   icon: '🏗️' },
    { k: 'budget',  label: 'תקציב',   icon: '💰' },
    { k: 'quotes',  label: 'הצעות',   icon: '📑' },
    { k: 'payments',label: 'תשלומים', icon: '💳' },
    { k: 'reports', label: 'דוחות',   icon: '📋', badge: projectReports.length },
    { k: 'contact', label: 'צוות',    icon: '👤' },
  ];

  const kindLabel = { daily: 'יומי', weekly: 'שבועי', rejects: "ריג'קטים", meeting: 'פגישה' };
  const kindColor = { daily: '#1d4ed8', weekly: '#7c3aed', rejects: '#dc2626', meeting: '#059669' };

  return (
    <div style={{
      minHeight: '100%', background: '#f5f6f8',
      fontFamily: 'Assistant, sans-serif', direction: 'rtl',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Top bar */}
      <div style={{
        background: '#1a2c4a', color: '#fff',
        padding: 'env(safe-area-inset-top, 0px) 0 0',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '12px 16px',
        }}>
          <button onClick={onBack} style={{
            background: 'rgba(255,255,255,0.12)', border: 'none', color: '#fff',
            width: 34, height: 34, borderRadius: 8, display: 'flex', alignItems: 'center',
            justifyContent: 'center', cursor: 'pointer', flexShrink: 0,
          }}>
            <Icon name="chevron" size={18}/>
          </button>
          <img src="assets/ybp-logo-new.png" alt="YBP" style={{
            height: 26, objectFit: 'contain',
          }}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, opacity: 0.7, letterSpacing: 0.3 }}>פורטל לקוח</div>
            <div style={{ fontSize: 14, fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {project.name}
            </div>
          </div>
        </div>

        {/* Hero progress */}
        <div style={{ padding: '0 16px 20px', textAlign: 'center' }}>
          <div style={{ fontSize: 64, fontWeight: 800, letterSpacing: -2, lineHeight: 1 }}>
            {project.progress}<span style={{ fontSize: 28 }}>%</span>
          </div>
          <div style={{ fontSize: 13, opacity: 0.8, marginTop: 4 }}>
            הפרויקט מתקדם · {project.daysLeft} ימים לסיום
          </div>
          <div style={{ margin: '12px 0 0', height: 6, background: 'rgba(255,255,255,0.2)', borderRadius: 3, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: `${project.progress}%`, background: '#fff', borderRadius: 3 }}/>
          </div>
        </div>

        {/* Tab bar */}
        <div style={{ display: 'flex', borderTop: '1px solid rgba(255,255,255,0.1)' }}>
          {TABS.map(t => (
            <button key={t.k} onClick={() => setTab(t.k)} style={{
              flex: 1, padding: '10px 4px 8px', border: 'none', cursor: 'pointer',
              background: 'transparent', fontFamily: 'inherit',
              borderBottom: tab === t.k ? '2px solid #fff' : '2px solid transparent',
              color: tab === t.k ? '#fff' : 'rgba(255,255,255,0.6)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, position: 'relative',
            }}>
              <span style={{ fontSize: 16 }}>{t.icon}</span>
              <span style={{ fontSize: 11, fontWeight: tab === t.k ? 700 : 400 }}>{t.label}</span>
              {t.badge > 0 && (
                <span style={{
                  position: 'absolute', top: 6, right: '25%',
                  background: '#f59e0b', color: '#fff', fontSize: 9, fontWeight: 700,
                  width: 16, height: 16, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{t.badge}</span>
              )}
            </button>
          ))}
        </div>
      </div>

      {/* Content */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '16px 16px 80px' }}>

        {/* ─── STATUS TAB ─── */}
        {tab === 'status' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {/* KPI Cards */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
                { label: 'ימים לסיום', value: project.daysLeft, color: '#1d4ed8' },
                { label: 'תקציב נוצל', value: `${project.budget > 0 ? Math.round(project.spent/project.budget*100) : 0}%`, color: '#7c3aed' },
                { label: 'בעיות פתוחות', value: project.openIssues, color: '#dc2626' },
                { label: 'צוות', value: `${project.team} אנשים`, color: '#059669' },
              ].map(k => (
                <div key={k.label} style={{
                  background: '#fff', borderRadius: 10, padding: '14px 14px',
                  borderRight: `3px solid ${k.color}`,
                  boxShadow: '0 1px 4px rgba(0,0,0,0.04)',
                }}>
                  <div style={{ fontSize: 22, fontWeight: 800, color: '#1f2937' }}>{k.value}</div>
                  <div style={{ fontSize: 11, color: '#6b7280', marginTop: 2 }}>{k.label}</div>
                </div>
              ))}
            </div>

            {/* Next milestone */}
            <div style={{
              background: '#fff', borderRadius: 10, padding: 14,
              boxShadow: '0 1px 4px rgba(0,0,0,0.04)',
            }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: '#6b7280', marginBottom: 6 }}>אבן דרך הבאה</div>
              <div style={{ fontSize: 15, fontWeight: 700, color: '#1f2937' }}>{project.nextMilestone}</div>
              <div style={{ fontSize: 12, color: '#6b7280', marginTop: 3 }}>{project.nextMilestoneDate}</div>
            </div>

            {/* Recent updates */}
            <div style={{ background: '#fff', borderRadius: 10, overflow: 'hidden', boxShadow: '0 1px 4px rgba(0,0,0,0.04)' }}>
              <div style={{ padding: '12px 14px', borderBottom: '1px solid #f3f4f6', fontWeight: 700, fontSize: 13, color: '#1f2937' }}>
                עדכונים אחרונים
              </div>
              {detail.updates.slice(0, 3).map((u, i) => (
                <div key={u.id} style={{
                  padding: '12px 14px', borderTop: i > 0 ? '1px solid #f3f4f6' : 'none',
                }}>
                  <div style={{ fontSize: 11, color: '#9ca3af', marginBottom: 3 }}>{u.time} · {u.team}</div>
                  <div style={{ fontSize: 13, lineHeight: 1.5, color: '#374151' }}>{u.text}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* ─── PHASES TAB ─── */}
        {tab === 'phases' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {project.phases.map((ph, i) => (
              <div key={i} style={{
                background: '#fff', borderRadius: 10, padding: '14px 16px',
                boxShadow: '0 1px 4px rgba(0,0,0,0.04)',
                borderRight: `3px solid ${ph.status === 'done' ? '#10b981' : ph.status === 'active' ? '#1d4ed8' : '#e5e7eb'}`,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 14, flexShrink: 0,
                    background: ph.status === 'done' ? '#10b981' : ph.status === 'active' ? '#1d4ed8' : '#f3f4f6',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: ph.status === 'done' || ph.status === 'active' ? '#fff' : '#9ca3af',
                    fontSize: 12, fontWeight: 700,
                  }}>
                    {ph.status === 'done' ? <Icon name="check" size={14} color="#fff" strokeWidth={3}/> : i + 1}
                  </div>
                  <div style={{ flex: 1, fontSize: 14, fontWeight: 600, color: '#1f2937' }}>{ph.name}</div>
                  <div style={{ fontSize: 13, fontWeight: 700, color: ph.status === 'done' ? '#059669' : ph.status === 'active' ? '#1d4ed8' : '#9ca3af' }}>
                    {ph.status === 'done' ? 'הושלם' : ph.status === 'active' ? `${ph.progress}%` : 'ממתין'}
                  </div>
                </div>
                <div style={{ height: 4, background: '#f3f4f6', borderRadius: 2, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${ph.progress}%`, background: ph.status === 'done' ? '#10b981' : '#1d4ed8', borderRadius: 2 }}/>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* ─── BUDGET TAB ─── */}
        {tab === 'budget' && typeof BudgetScreen !== 'undefined' && (
          <div style={{ margin: '0 -16px' }}>
            <BudgetScreen projectId={projectId} onBack={() => setTab('status')} readOnly={true}/>
          </div>
        )}

        {/* ─── REPORTS TAB ─── */}
        {tab === 'reports' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {/* Filter bar */}
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {[['all','הכל'], ['daily','יומי'], ['weekly','שבועי'], ['rejects',"ריג'קטים"], ['meeting','פגישה']].map(([k, label]) => (
                <button key={k} onClick={() => setReportFilter(k)} style={{
                  padding: '5px 12px', borderRadius: 20, border: 'none', fontSize: 12, fontWeight: 600,
                  cursor: 'pointer', fontFamily: 'inherit',
                  background: reportFilter === k ? '#1a2c4a' : '#fff',
                  color: reportFilter === k ? '#fff' : '#6b7280',
                  boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
                }}>{label}</button>
              ))}
            </div>

            {filteredReports.length === 0 ? (
              <div style={{
                background: '#fff', borderRadius: 10, padding: 40, textAlign: 'center',
                color: '#9ca3af', boxShadow: '0 1px 4px rgba(0,0,0,0.04)',
              }}>
                <div style={{ fontSize: 36, marginBottom: 10 }}>📋</div>
                <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>אין דוחות</div>
                <div style={{ fontSize: 12 }}>דוחות יופיעו כאן כשמנהל הפרויקט ישלח</div>
              </div>
            ) : filteredReports.map(r => (
              <button key={r.id} onClick={() => onViewReport?.(r.id)} style={{
                background: '#fff', border: '1px solid #e5e7eb', borderRadius: 10,
                padding: '14px 16px', textAlign: 'right', cursor: 'pointer',
                fontFamily: 'inherit', display: 'flex', alignItems: 'center', gap: 12,
                boxShadow: '0 1px 4px rgba(0,0,0,0.04)',
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 8, flexShrink: 0,
                  background: `${kindColor[r.kind] || '#6b7280'}15`,
                  color: kindColor[r.kind] || '#6b7280',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 11, fontWeight: 800,
                }}>
                  {(kindLabel[r.kind] || r.kind || '?').slice(0, 2)}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#1f2937', marginBottom: 3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                    {r.title}
                  </div>
                  <div style={{ display: 'flex', gap: 8, fontSize: 11, color: '#6b7280', alignItems: 'center' }}>
                    <span style={{ background: `${kindColor[r.kind]}20`, color: kindColor[r.kind], padding: '1px 6px', borderRadius: 8, fontWeight: 600, fontSize: 10 }}>
                      {kindLabel[r.kind] || r.kind}
                    </span>
                    <span style={{ fontFamily: 'ui-monospace, monospace' }}>{r.id}</span>
                    <span>{r.date}</span>
                  </div>
                </div>
                <Icon name="chevronR" size={16} color="#d1d5db"/>
              </button>
            ))}
          </div>
        )}

        {/* ─── QUOTES TAB (לקוח) ─── */}
        {tab === 'quotes' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ background:'#eff6ff', border:'1px solid #dbeafe', borderRadius:10, padding:'12px 14px', fontSize:13, color:'#1e40af' }}>
              📑 כאן תוכל לצפות בהצעות המחיר שהתקבלו ולאשר את ההצעה המועדפת
            </div>
            {(() => {
              const quotes = typeof getQuotes === 'function'
                ? getQuotes().filter(q => q.projectId === projectId)
                : [];
              const grouped = {};
              quotes.forEach(q => {
                if (!grouped[q.item]) grouped[q.item] = [];
                grouped[q.item].push(q);
              });
              if (!quotes.length) return (
                <div style={{ textAlign:'center', padding:'40px 20px', color:'#9ca3af' }}>
                  <div style={{ fontSize:32, marginBottom:8 }}>📑</div>
                  <div style={{ fontSize:14 }}>אין הצעות מחיר עדיין</div>
                </div>
              );
              return Object.entries(grouped).map(([item, qs]) => (
                <div key={item} style={{ background:'#fff', borderRadius:10, border:'1px solid #e5e7eb', overflow:'hidden' }}>
                  <div style={{ padding:'10px 14px', borderBottom:'1px solid #f3f4f6', fontSize:13, fontWeight:700, color:'#1f2937' }}>{item}</div>
                  {qs.map(q => {
                    const stMap = { pending:{label:'ממתין',color:'#f59e0b',bg:'#fef3c7'}, approved:{label:'אושר',color:'#10b981',bg:'#d1fae5'}, rejected:{label:'נדחה',color:'#ef4444',bg:'#fee2e2'}, signed:{label:'נחתם',color:'#6366f1',bg:'#ede9fe'} };
                    const st = stMap[q.status] || stMap.pending;
                    return (
                      <div key={q.id} style={{ padding:'10px 14px', borderBottom:'1px solid #f9fafb', display:'flex', alignItems:'center', gap:10 }}>
                        <div style={{ flex:1 }}>
                          <div style={{ fontSize:13, fontWeight:600 }}>{q.supplier}</div>
                          <div style={{ fontSize:12, color:'#6b7280' }}>{Number(q.price||0).toLocaleString('he-IL')} ₪ · {q.terms||'—'}</div>
                        </div>
                        <span style={{ padding:'3px 10px', borderRadius:12, fontSize:11, fontWeight:700, background:st.bg, color:st.color }}>{st.label}</span>
                        {q.status === 'pending' && (
                          <button onClick={() => {
                            if (typeof getQuotes === 'function' && typeof saveQuotes === 'function') {
                              const all = getQuotes();
                              const updated = all.map(x => x.id===q.id ? {...x,status:'approved'} : x.item===q.item&&x.projectId===q.projectId ? {...x,status:'rejected'} : x);
                              saveQuotes(updated);
                              alert('✓ אישרת את הצעת ' + q.supplier);
                            }
                          }} style={{ padding:'6px 12px', borderRadius:7, border:'none', background:'#10b981', color:'#fff', fontSize:12, fontWeight:700, cursor:'pointer', fontFamily:'inherit' }}>
                            אשר
                          </button>
                        )}
                      </div>
                    );
                  })}
                </div>
              ));
            })()}
          </div>
        )}

        {/* ─── PAYMENTS TAB (לקוח) ─── */}
        {tab === 'payments' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {(() => {
              const data = typeof getPayments === 'function'
                ? (getPayments()[projectId] || {})
                : {};
              const milestones = data.clientMilestones || [];
              const totalContract = milestones.reduce((s,m)=>s+(m.amount||0),0);
              const totalPaid = milestones.filter(m=>m.status==='paid').reduce((s,m)=>s+(m.amount||0),0);
              const pct = totalContract ? Math.round(totalPaid/totalContract*100) : 0;
              const fmtD = iso => { if(!iso) return '—'; const d=new Date(iso); return String(d.getDate()).padStart(2,'0')+'/'+String(d.getMonth()+1).padStart(2,'0')+'/'+d.getFullYear(); };

              return (
                <>
                  {/* Summary */}
                  <div style={{ background:'#1a2c4a', color:'#fff', borderRadius:12, padding:'16px' }}>
                    <div style={{ fontSize:11, opacity:0.7, marginBottom:4 }}>סה״כ שולם</div>
                    <div style={{ fontSize:28, fontWeight:800 }}>{Number(totalPaid).toLocaleString('he-IL')} ₪</div>
                    <div style={{ fontSize:12, opacity:0.7 }}>{pct}% מתוך {Number(totalContract).toLocaleString('he-IL')} ₪</div>
                    <div style={{ height:6, background:'rgba(255,255,255,0.2)', borderRadius:3, marginTop:10, overflow:'hidden' }}>
                      <div style={{ height:'100%', width:`${pct}%`, background:'#10b981', borderRadius:3 }}/>
                    </div>
                  </div>

                  {/* Milestones */}
                  {milestones.length > 0 ? (
                    <div style={{ background:'#fff', borderRadius:10, border:'1px solid #e5e7eb', overflow:'hidden' }}>
                      <div style={{ padding:'10px 14px', borderBottom:'1px solid #f3f4f6', fontSize:13, fontWeight:700, color:'#1f2937' }}>לוח תשלומים</div>
                      {milestones.map((m,i) => {
                        const stMap = { paid:{icon:'✓',color:'#10b981',bg:'#d1fae5'}, pending:{icon:'⏳',color:'#f59e0b',bg:'#fef3c7'}, future:{icon:'📅',color:'#6b7280',bg:'#f3f4f6'} };
                        const stKey = m.status==='paid' ? 'paid' : m.status==='future' ? 'future' : 'pending';
                        const st = stMap[stKey];
                        return (
                          <div key={m.id} style={{ padding:'12px 14px', borderBottom:i<milestones.length-1?'1px solid #f9fafb':'none', display:'flex', gap:10, alignItems:'center' }}>
                            <div style={{ width:28, height:28, borderRadius:14, background:st.bg, display:'flex', alignItems:'center', justifyContent:'center', fontSize:13, flexShrink:0, color:st.color, fontWeight:700 }}>{st.icon}</div>
                            <div style={{ flex:1 }}>
                              <div style={{ fontSize:13, fontWeight:600, color:'#1f2937' }}>{m.label}</div>
                              <div style={{ fontSize:11, color:'#6b7280' }}>
                                יעד: {fmtD(m.dueDate)} · {m.pct}%
                                {m.paidDate && <span style={{ color:'#10b981', fontWeight:600 }}> · שולם {fmtD(m.paidDate)}</span>}
                              </div>
                            </div>
                            <div style={{ fontSize:14, fontWeight:800, color:'#1a2c4a' }}>{Number(m.amount||0).toLocaleString('he-IL')} ₪</div>
                            {/* כפתור אישור תשלום ללקוח */}
                            {m.status === 'pending' && (
                              <button onClick={() => {
                                if (!window.confirm(`לאשר תשלום של ${Number(m.amount||0).toLocaleString('he-IL')} ₪\nעבור: ${m.label}?`)) return;
                                if (typeof getPayments === 'function' && typeof savePayments === 'function') {
                                  const all = getPayments();
                                  const projData = all[projectId] || {};
                                  projData.clientMilestones = (projData.clientMilestones || []).map(x =>
                                    x.id === m.id ? { ...x, status:'paid', paidDate: new Date().toISOString().slice(0,10), clientApproved: true } : x
                                  );
                                  all[projectId] = projData;
                                  savePayments(all);
                                  alert('✓ תשלום אושר! מנהל הפרויקט יעודכן.');
                                }
                              }} style={{
                                padding:'7px 12px', borderRadius:7, border:'none',
                                background:'#10b981', color:'#fff', fontSize:12, fontWeight:700,
                                cursor:'pointer', fontFamily:'inherit', flexShrink:0,
                              }}>✓ אשר</button>
                            )}
                            {m.status === 'paid' && m.clientApproved && (
                              <span style={{ fontSize:11, color:'#10b981', fontWeight:700, flexShrink:0 }}>✓ אושר</span>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  ) : (
                    <div style={{ textAlign:'center', padding:'40px 20px', color:'#9ca3af' }}>
                      <div style={{ fontSize:32, marginBottom:8 }}>💳</div>
                      <div style={{ fontSize:14 }}>לא הוגדר לוח תשלומים עדיין</div>
                    </div>
                  )}
                </>
              );
            })()}
          </div>
        )}

        {/* ─── CONTACT TAB ─── */}
        {tab === 'contact' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{
              background: '#1a2c4a', color: '#fff', borderRadius: 12, padding: '20px 16px',
              display: 'flex', gap: 14, alignItems: 'center',
            }}>
              <Avatar name={((window.YBP_AUTH && window.YBP_AUTH.getCurrentUser) ? window.YBP_AUTH.getCurrentUser().name : YBP_DATA.user?.name) || 'מנהל'} size={52}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, opacity: 0.7, letterSpacing: 0.3 }}>מנהל הפרויקט</div>
                <div style={{ fontSize: 17, fontWeight: 700, marginTop: 2 }}>{((window.YBP_AUTH && window.YBP_AUTH.getCurrentUser) ? window.YBP_AUTH.getCurrentUser().name : YBP_DATA.user?.name) || 'מנהל'}</div>
                <div style={{ fontSize: 12, opacity: 0.8, marginTop: 2 }}>{((window.YBP_AUTH && window.YBP_AUTH.getCurrentUser) ? window.YBP_AUTH.getCurrentUser().title : YBP_DATA.user?.role) || ''}</div>
              </div>
            </div>

            {[
              { icon: '📞', label: 'טלפון', value: '054-111-2233', action: `tel:0541112233` },
              { icon: '✉️', label: 'אימייל', value: 'yuval@ybprojects.com', action: `mailto:yuval@ybprojects.com` },
              { icon: '💬', label: 'WhatsApp', value: 'שלח הודעה', action: `https://wa.me/9720541112233` },
            ].map(c => (
              <a key={c.label} href={c.action} style={{
                background: '#fff', borderRadius: 10, padding: '14px 16px',
                display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none',
                boxShadow: '0 1px 4px rgba(0,0,0,0.04)',
              }}>
                <span style={{ fontSize: 22 }}>{c.icon}</span>
                <div>
                  <div style={{ fontSize: 11, color: '#6b7280' }}>{c.label}</div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: '#1f2937' }}>{c.value}</div>
                </div>
                <Icon name="chevronR" size={14} color="#d1d5db" style={{ marginRight: 'auto' }}/>
              </a>
            ))}

            <div style={{
              background: '#fff', borderRadius: 10, padding: '14px 16px',
              boxShadow: '0 1px 4px rgba(0,0,0,0.04)',
            }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: '#374151', marginBottom: 10 }}>צוות הפרויקט</div>
              {(detail.contacts || []).map(c => (
                <div key={c.id} style={{
                  display: 'flex', gap: 10, alignItems: 'center', padding: '8px 0',
                  borderTop: '1px solid #f3f4f6',
                }}>
                  <Avatar name={c.name} size={32}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{c.name}</div>
                    <div style={{ fontSize: 11, color: '#6b7280' }}>{c.role} · {c.company}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

window.ClientPortal = ClientPortal;
})();