// Variation 1: Client-facing status screen (minimal, beautiful)
(function(){
const V1ClientView = ({ projectId, onBack }) => {
  const project = YBP_DATA.projects.find(p => p.id === projectId) || YBP_DATA.projects[0];
  const detail = YBP_DATA.projectDetail;

  return (
    <div style={{
      background: '#f7f6f3', minHeight: '100%', fontFamily: 'Assistant, sans-serif',
      color: '#1a2c4a', direction: 'rtl',
    }}>
      {/* Top bar */}
      <header style={{
        background: '#fff', borderBottom: '1px solid #e5e7eb', padding: '14px 32px',
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <button onClick={onBack} style={{
          background: 'transparent', border: '1px solid #e5e7eb', width: 32, height: 32, borderRadius: 6,
          display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: '#1a2c4a',
        }}>
          <Icon name="chevron" size={15}/>
        </button>
        <div style={{ width: 34, height: 34, borderRadius: 7, background: '#1a2c4a',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'Playfair Display, serif', color: '#fff', fontWeight: 700, fontSize: 14,
        }}>YBP</div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>תצוגת לקוח</div>
          <div style={{ fontSize: 11, color: '#64748b' }}>{project.client}</div>
        </div>
        <div style={{ marginRight: 'auto', fontSize: 12, color: '#64748b' }}>עודכן לאחרונה: לפני 2 שעות</div>
      </header>

      <div style={{ maxWidth: 960, margin: '0 auto', padding: '36px 32px' }}>
        {/* Hero */}
        <div style={{
          background: '#fff', borderRadius: 14, overflow: 'hidden',
          border: '1px solid #e5e7eb', boxShadow: '0 1px 3px rgba(0,0,0,0.02)',
        }}>
          <ProjectPlaceholder kind={project.cover} style={{ height: 180 }} label="PROJECT HERO IMAGE"/>

          <div style={{ padding: '28px 32px' }}>
            <div style={{ fontSize: 12, color: '#64748b', letterSpacing: 0.5, textTransform: 'uppercase', fontWeight: 600 }}>{project.type}</div>
            <h1 style={{ margin: '4px 0 8px', fontSize: 30, fontWeight: 700, letterSpacing: -0.8 }}>{project.name}</h1>
            <div style={{ fontSize: 14, color: '#64748b', display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon name="pin" size={13}/>
              {project.address}
            </div>

            {/* Big progress */}
            <div style={{ marginTop: 28, padding: 24, background: '#f7f6f3', borderRadius: 10 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 14 }}>
                <div style={{ fontSize: 56, fontWeight: 700, letterSpacing: -2, lineHeight: 1, color: '#1a2c4a' }}>{project.progress}%</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 16, fontWeight: 600 }}>התקדמות כללית</div>
                  <div style={{ fontSize: 13, color: '#64748b', marginTop: 2 }}>נותרו {project.daysLeft} ימים עד למסירה מתוכננת</div>
                </div>
                <V1StatusChip status={project.status} label={project.statusLabel}/>
              </div>
              <div style={{ height: 10, background: '#e5e7eb', borderRadius: 5, overflow: 'hidden' }}>
                <div style={{ height: '100%', width: `${project.progress}%`, background: 'linear-gradient(90deg, #1a2c4a, #3b5a8a)', borderRadius: 5 }}/>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11, color: '#64748b' }}>
                <span>התחלה: {project.startDate}</span>
                <span>סיום מתוכנן: {project.endDate}</span>
              </div>
            </div>

            {/* Milestones strip */}
            <div style={{ marginTop: 28 }}>
              <h3 style={{ fontSize: 16, fontWeight: 700, marginBottom: 16 }}>שלבי הפרויקט</h3>
              {project.phases.map((ph, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '36px 1fr 120px 90px', gap: 16, alignItems: 'center',
                  padding: '14px 4px', borderTop: i > 0 ? '1px solid #f1f5f9' : 'none',
                }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 16,
                    background: ph.status === 'done' ? '#1a2c4a' : ph.status === 'active' ? '#fff' : '#f1f5f9',
                    border: ph.status === 'active' ? '2px solid #1a2c4a' : '2px solid transparent',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: ph.status === 'done' ? '#fff' : '#1a2c4a', fontWeight: 700, fontSize: 12,
                  }}>
                    {ph.status === 'done' ? <Icon name="check" size={14} color="#fff" strokeWidth={3}/> : i + 1}
                  </div>
                  <div style={{ fontSize: 14, fontWeight: ph.status === 'active' ? 600 : 500 }}>{ph.name}</div>
                  <div style={{ height: 5, background: '#f1f5f9', borderRadius: 3, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${ph.progress}%`, background: ph.status === 'done' ? '#10b981' : '#1a2c4a' }}/>
                  </div>
                  <div style={{ fontSize: 12, color: ph.status === 'done' ? '#047857' : ph.status === 'active' ? '#1d4ed8' : '#94a3b8', fontWeight: 600 }}>
                    {ph.status === 'done' ? 'הושלם' : ph.status === 'active' ? `${ph.progress}%` : 'ממתין'}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Recent updates (client-friendly) */}
        <div style={{ marginTop: 20, background: '#fff', borderRadius: 14, padding: 28, border: '1px solid #e5e7eb' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
            <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700 }}>עדכונים אחרונים מהשטח</h3>
            <span style={{ fontSize: 12, color: '#64748b' }}>{detail.updates.length} עדכונים השבוע</span>
          </div>
          {detail.updates.slice(0, 3).map((u, i) => (
            <div key={u.id} style={{
              padding: '16px 0', borderTop: i > 0 ? '1px solid #f1f5f9' : 'none',
              display: 'flex', gap: 14,
            }}>
              <div style={{
                width: 8, minHeight: 8, marginTop: 8, borderRadius: 4,
                background: u.type === 'alert' ? '#f59e0b' : u.type === 'milestone' ? '#8b5cf6' : '#1a2c4a',
                flexShrink: 0,
              }}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, lineHeight: 1.5 }}>{u.text}</div>
                <div style={{ fontSize: 11.5, color: '#64748b', marginTop: 4 }}>{u.time} • צוות {u.team}</div>
                {u.photos > 0 && (
                  <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                    {[...Array(Math.min(u.photos, 3))].map((_, j) => (
                      <ProjectPlaceholder key={j} kind={project.cover} style={{ width: 96, height: 72, borderRadius: 6 }}/>
                    ))}
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>

        {/* Timeline — פגישות + דוחות + הצעות + תשלומים */}
        <div style={{ marginTop: 20, background: '#fff', borderRadius: 14, padding: 28, border: '1px solid #e5e7eb' }}>
          <h3 style={{ margin: '0 0 18px', fontSize: 17, fontWeight: 700 }}>ציר זמן — פעילות הפרויקט</h3>
          {(() => {
            const store = typeof SyncStore !== 'undefined' ? SyncStore.get() : {};
            const reports = (store.reports || []).filter(r => r.projectId === projectId).slice(0, 5);
            const quotes = typeof getQuotes === 'function' ? getQuotes().filter(q => q.projectId === projectId && (q.status === 'approved' || q.status === 'signed')) : [];
            const payData = typeof getPayments === 'function' ? (getPayments()[projectId] || {}) : {};
            const payments = (payData.clientMilestones || []).filter(m => m.status === 'paid');

            const items = [
              ...reports.map(r => ({ date: r.date, type: 'report', icon: '📋', title: r.title || r.kind, sub: r.id, color: '#1d4ed8' })),
              ...quotes.map(q => ({ date: q.createdAt, type: 'quote', icon: '📑', title: `הצעה אושרה — ${q.item}`, sub: q.supplier, color: '#7c3aed' })),
              ...payments.map(p => ({ date: p.paidDate, type: 'payment', icon: '💳', title: `תשלום התקבל — ${p.label}`, sub: `${Number(p.amount||0).toLocaleString('he-IL')} ₪`, color: '#10b981' })),
            ].sort((a,b) => (b.date||'').localeCompare(a.date||'')).slice(0, 8);

            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(); };

            if (!items.length) return <div style={{ color: '#9ca3af', fontSize: 13, textAlign: 'center', padding: '20px 0' }}>אין פעילות עדיין</div>;

            return items.map((item, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, padding: '10px 0', borderTop: i > 0 ? '1px solid #f1f5f9' : 'none' }}>
                <div style={{ width: 36, height: 36, borderRadius: 18, background: `${item.color}15`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, flexShrink: 0 }}>
                  {item.icon}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#1f2937' }}>{item.title}</div>
                  <div style={{ fontSize: 11, color: '#6b7280', marginTop: 2 }}>{item.sub} {item.date && `· ${fmtD(item.date)}`}</div>
                </div>
              </div>
            ));
          })()}
        </div>

        {/* Contact block */}
        <div style={{
          marginTop: 20, background: '#1a2c4a', color: '#fff',
          borderRadius: 14, padding: 28, display: 'flex', alignItems: 'center', gap: 20,
        }}>
          <Avatar name={YBP_DATA.user.name} size={54}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, opacity: 0.7, textTransform: 'uppercase', letterSpacing: 0.5 }}>מנהל הפרויקט שלך</div>
            <div style={{ fontSize: 17, fontWeight: 700, marginTop: 2 }}>{YBP_DATA.user.name}</div>
            <div style={{ fontSize: 13, opacity: 0.8, marginTop: 2 }}>זמין לשאלות ועדכונים • 09:00—18:00</div>
          </div>
          <button style={{
            background: '#fff', color: '#1a2c4a', border: 'none',
            padding: '10px 18px', borderRadius: 8, fontSize: 14, fontWeight: 600, cursor: 'pointer',
            fontFamily: 'inherit', display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <Icon name="phone" size={14}/>
            יצירת קשר
          </button>
        </div>
      </div>
    </div>
  );
};

window.V1ClientView = V1ClientView;
})();