/* ─────────────────────────────────────────────────────────────────
   AYRA Portal — Vertical Domain Packs
   VDP-Memarlıq (Construction) · VDP-Məskunlaşma (Resettlement)
   VDP-Mənzil Fondu · VDP-Əmlak
   FR-241–260 · FR-250–256 · FR-291–295
   ───────────────────────────────────────────────────────────────── */

// ── DATA ───────────────────────────────────────────────────────────

const CONST_OBJECTS = [
  {code:'LYH-XK-001',name:'Xankəndi 5 saylı orta məktəb',        məntəqə:'Xankəndi şəhəri', region:'Xankəndi',vəziyyəti:'Yeni tikinti', type:'Məktəb',       stage:5,progress:50, status:'tikinti',   contractor:'Tikinti MMC №1', budget:'2 400 000',updated:'2026-04-25',delay:35},
  {code:'LYH-AG-002',name:'Ağdərə rayon xəstəxanası',            məntəqə:'Ağdərə şəhəri',   region:'Ağdərə',  vəziyyəti:'Bərpa',        type:'Tibb',         stage:4,progress:0,  status:'tender',    contractor:'MedBuild ASC',   budget:'5 100 000',updated:'2026-04-23',delay:21},
  {code:'LYH-XL-003',name:'Xocalı inzibati binası',              məntəqə:'Xocalı şəhəri',   region:'Xocalı',  vəziyyəti:'Yenidənqurma', type:'İnzibati',     stage:6,progress:94, status:'hazir',     contractor:'GovBuild LLC',   budget:'1 800 000',updated:'2026-04-22',delay:null},
  {code:'LYH-XK-004',name:'Xankəndi su təchizatı şəbəkəsi',      məntəqə:'Xankəndi kəndi',  region:'Xankəndi',vəziyyəti:'Yeni tikinti', type:'İnfrastruktur', stage:4,progress:0,  status:'tender',    contractor:'—',              budget:'3 200 000',updated:'2026-04-19',delay:null},
  {code:'LYH-AG-005',name:'Ağdərə körpüsü bərpası',              məntəqə:'Ağdərə rayon',    region:'Ağdərə',  vəziyyəti:'Bərpa',        type:'Yol',          stage:1,progress:18, status:'layihe',    contractor:'—',              budget:'1 100 000',updated:'2026-04-18',delay:null},
  {code:'LYH-XK-006',name:'Xankəndi idman kompleksi',            məntəqə:'Xankəndi şəhəri', region:'Xankəndi',vəziyyəti:'Yeni tikinti', type:'İdman',        stage:7,progress:100,status:'tamamlanib',contractor:'SportBuild QSC', budget:'4 500 000',updated:'2026-04-14',delay:null},
  {code:'LYH-XL-007',name:'Xocalı-Ağdərə avtomobil yolu 2.4 km', məntəqə:'Xocalı-Ağdərə',  region:'Xocalı',  vəziyyəti:'Yenidənqurma', type:'Yol',          stage:5,progress:45, status:'tikinti',   contractor:'Yol ASC',        budget:'2 900 000',updated:'2026-04-13',delay:12},
  {code:'LYH-XK-008',name:'Xankəndi 3 saylı uşaq bağçası',      məntəqə:'Xankəndi şəhəri', region:'Xankəndi',vəziyyəti:'Yeni tikinti', type:'Təhsil',       stage:0,progress:8,  status:'secilmis',  contractor:'—',              budget:'900 000',  updated:'2026-04-07',delay:null},
];

// Benchmark-exact stage labels (C.1.3 stepper — 8 stages)
const STAGE_LABELS = [
  'Seçilmişdir','Layihəsi\nişlənib','Qüsur aktı\nişlənib','Ekspertizadadır','Tenderdədir','Tikinti\ndavam edir','Məskunlaşmaya\nhazır','Tamamlanıb'
];

// Benchmark-exact status map (C.1.2 status pills)
const OBJ_STATUS = {
  secilmis:   {label:'Seçilmişdir',         color:'#6b7280', bg:'#f9fafb'},
  layihe:     {label:'Layihəsi işlənib',    color:'#4b5563', bg:'#f0f4f8'},
  qusur:      {label:'Qüsur aktı işlənib', color:'#4b5563', bg:'#f0f4f8'},
  ekspertiza: {label:'Ekspertizadadır',     color:'#0e7490', bg:'#f0f9ff'},
  tender:     {label:'Tenderdədir',         color:'#0e7490', bg:'#f0f9ff'},
  tikinti:    {label:'Tikinti davam edir',  color:'#1d4ed8', bg:'#eff6ff'},
  hazir:      {label:'Məskunlaşmaya hazır', color:'#15803d', bg:'#f0fdf4'},
  tamamlanib: {label:'Tamamlanıb',          color:'#15803d', bg:'#f0fdf4'},
  // backwards compat
  active:       {label:'Tikinti davam edir', color:'#1d4ed8', bg:'#eff6ff'},
  texnozor:     {label:'Texnozor',           color:'#b45309', bg:'#fffbeb'},
  docs:         {label:'Sənədləşmə',        color:'#4b5563', bg:'#f9fafb'},
  construction: {label:'Tikinti davam edir', color:'#1d4ed8', bg:'#eff6ff'},
  completed:    {label:'Tamamlanıb',         color:'#15803d', bg:'#f0fdf4'},
  prep:         {label:'Hazırlıqda',         color:'#4b5563', bg:'#f9fafb'},
};

const FAMILIES = [
  {code:'AİL-XK-001',surname:'Hüseynov', name:'Ramil', members:4, nəfər:4, status:'allocated',apartment:'MNZ-XK-002',region:'Xankəndi',məntəqə:'Xankəndi şəhəri',kocTarixi:'15.03.2026',date:'15.03.2026'},
  {code:'AİL-XK-002',surname:'Quliyeva', name:'Sevinc',members:3, nəfər:3, status:'pending',  apartment:'—',          region:'Xankəndi',məntəqə:'Xankəndi kəndi', kocTarixi:'—',         date:'01.04.2026'},
  {code:'AİL-AG-003',surname:'Əliyev',   name:'Tural', members:5, nəfər:6, status:'lottery',  apartment:'—',          region:'Ağdərə',  məntəqə:'Ağdərə şəhəri', kocTarixi:'—',         date:'20.04.2026'},
  {code:'AİL-AG-004',surname:'Babayeva', name:'Günel', members:2, nəfər:2, status:'allocated',apartment:'MNZ-AG-011', region:'Ağdərə',  məntəqə:'Ağdərə rayon',  kocTarixi:'10.03.2026',date:'10.03.2026'},
  {code:'AİL-XL-005',surname:'Nəsirov',  name:'Kamran',members:6, nəfər:7, status:'handoff',  apartment:'—',          region:'Xocalı',  məntəqə:'Xocalı şəhəri', kocTarixi:'25.04.2026',date:'25.04.2026'},
  {code:'AİL-XK-006',surname:'Rəsulova', name:'Aytən', members:4, nəfər:4, status:'pending',  apartment:'—',          region:'Xankəndi',məntəqə:'Xankəndi şəhəri',kocTarixi:'—',         date:'05.05.2026'},
  {code:'AİL-XL-007',surname:'İsmayılov',name:'Fuad',  members:3, nəfər:3, status:'refused',  apartment:'—',          region:'Xocalı',  məntəqə:'Xocalı kəndi',  kocTarixi:'—',         date:'18.03.2026'},
  {code:'AİL-AG-008',surname:'Rəhimov',  name:'Elnur', members:5, nəfər:5, status:'allocated',apartment:'MNZ-AG-015', region:'Ağdərə',  məntəqə:'Ağdərə şəhəri', kocTarixi:'20.04.2026',date:'20.04.2026'},
];

const FAM_STATUS = {
  allocated:{label:'Mənzil Verildi',color:'#15803d',bg:'#f0fdf4'},
  pending:  {label:'Gözləyir',      color:'#b45309',bg:'#fffbeb'},
  lottery:  {label:'Püşkdə',        color:'#1d4ed8',bg:'#eff6ff'},
  handoff:  {label:'Ötürülür',      color:'#7c3aed',bg:'#f5f3ff'},
  refused:  {label:'İmtina',        color:'#b91c1c',bg:'#fef2f2'},
};

// Benchmark-exact apartment data (C.3.2 columns: ZONA, BİNA, GİRİŞ, MƏRTƏBƏ, MƏNZİL №, SAHƏ, STATUS, MÜRACİƏTÇİ)
const APARTMENTS = [
  {code:'MNZ-XK-001',bölgə:'Xankəndi',zona:'A blok',bina:'1 saylı bina',giriş:'1',mərtəbə:'3',mənzilNo:'12',area:'58 m²', status:'boş',        müraciətçi:'—'},
  {code:'MNZ-XK-002',bölgə:'Xankəndi',zona:'A blok',bina:'1 saylı bina',giriş:'2',mərtəbə:'4',mənzilNo:'23',area:'72 m²', status:'kirayədədir',müraciətçi:'AİL-XK-001'},
  {code:'MNZ-XK-003',bölgə:'Xankəndi',zona:'B blok',bina:'2 saylı bina',giriş:'1',mərtəbə:'1',mənzilNo:'3', area:'38 m²', status:'boş',        müraciətçi:'—'},
  {code:'MNZ-AG-011',bölgə:'Ağdərə',  zona:'C blok',bina:'3 saylı bina',giriş:'2',mərtəbə:'2',mənzilNo:'8', area:'54 m²', status:'kirayədədir',müraciətçi:'AİL-AG-004'},
  {code:'MNZ-AG-012',bölgə:'Ağdərə',  zona:'C blok',bina:'3 saylı bina',giriş:'3',mərtəbə:'3',mənzilNo:'15',area:'68 m²', status:'təhkim edilib',müraciətçi:'Gözləyir'},
  {code:'MNZ-XL-001',bölgə:'Xocalı',  zona:'D blok',bina:'4 saylı bina',giriş:'1',mərtəbə:'2',mənzilNo:'7', area:'61 m²', status:'boş',        müraciətçi:'—'},
  {code:'MNZ-XL-002',bölgə:'Xocalı',  zona:'D blok',bina:'4 saylı bina',giriş:'1',mərtəbə:'4',mənzilNo:'18',area:'55 m²', status:'müraciətdədir',müraciətçi:'AİL-XL-005'},
  {code:'MNZ-AG-015',bölgə:'Ağdərə',  zona:'E blok',bina:'5 saylı bina',giriş:'2',mərtəbə:'1',mənzilNo:'4', area:'49 m²', status:'kirayədədir',müraciətçi:'AİL-AG-008'},
  {code:'MNZ-XK-010',bölgə:'Xankəndi',zona:'A blok',bina:'1 saylı bina',giriş:'3',mərtəbə:'5',mənzilNo:'31',area:'44 m²', status:'boşaldılıb', müraciətçi:'—'},
  {code:'MNZ-XL-005',bölgə:'Xocalı',  zona:'F blok',bina:'6 saylı bina',giriş:'1',mərtəbə:'3',mənzilNo:'11',area:'70 m²', status:'boş',        müraciətçi:'—'},
];

// ── WORKFLOW STEPPER COMPONENT (FR-291) ───────────────────

function WorkflowStepper({stages, current}) {
  return (
    <div style={{display:'flex',alignItems:'flex-start',overflowX:'auto',paddingBottom:2}}>
      {stages.map((label, i) => {
        const done = i < current;
        const active = i === current;
        return (
          <React.Fragment key={i}>
            {i > 0 && (
              <div style={{flex:1,height:2,minWidth:6,marginTop:14,background:i <= current ? '#16a34a' : '#e5ecf5'}}/>
            )}
            <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:5,minWidth:62,flexShrink:0}}>
              <div style={{
                width:28,height:28,borderRadius:'50%',flexShrink:0,
                display:'flex',alignItems:'center',justifyContent:'center',
                fontSize:11,fontWeight:700,
                background: done ? '#16a34a' : active ? '#2557d6' : '#f0f4f8',
                color: done||active ? '#fff' : '#9ca3af',
                border: `2px solid ${done?'#16a34a':active?'#2557d6':'#d1d5db'}`,
                boxShadow: active ? '0 0 0 3px rgba(37,87,214,0.12)' : 'none',
              }}>
                {done ? '✓' : i+1}
              </div>
              <div style={{
                fontSize:9.5,textAlign:'center',lineHeight:1.3,whiteSpace:'pre-line',
                color: active ? '#0f1c30' : done ? '#15803d' : '#9ca3af',
                fontWeight: active ? 600 : 400,
              }}>
                {label}
              </div>
            </div>
          </React.Fragment>
        );
      })}
    </div>
  );
}

// ── VDP SHARED SUB-COMPONENTS ─────────────────────────────

function VDPBreadcrumb({items, onNavigate}) {
  return (
    <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:14,fontSize:12,color:'#8aa4c0'}}>
      {items.map((item, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span>›</span>}
          {item.onClick ? (
            <button style={{background:'none',border:'none',color:'#2557d6',fontSize:12,cursor:'pointer',padding:0,fontFamily:'inherit'}} onClick={item.onClick}>{item.label}</button>
          ) : (
            <span style={{color: i === items.length-1 ? '#0f1c30' : '#8aa4c0', fontWeight: i === items.length-1 ? 500 : 400}}>{item.label}</span>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

function VDPKPIStrip({kpis}) {
  return (
    <div style={{display:'grid',gridTemplateColumns:`repeat(${kpis.length},1fr)`,gap:10,marginBottom:20}}>
      {kpis.map((k,i) => (
        <div key={i} style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:10,padding:'14px 16px',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
          <div style={{fontSize:11,color:'#8aa4c0',fontWeight:500,marginBottom:6,textTransform:'uppercase',letterSpacing:'0.06em'}}>{k.label}</div>
          <div style={{fontSize:26,fontWeight:700,color:k.color||'#0f1c30',fontFamily:'IBM Plex Mono,monospace',lineHeight:1.1}}>{k.value}</div>
          {k.sub && <div style={{fontSize:11,color:'#8aa4c0',marginTop:5}}>{k.sub}</div>}
          {k.bar != null && (
            <div style={{marginTop:8,height:3,background:'#e5ecf5',borderRadius:2}}>
              <div style={{height:'100%',width:`${Math.min(k.bar,100)}%`,background:k.color||'#2557d6',borderRadius:2,transition:'width 0.6s'}}/>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

function VDPQuickLinks({links}) {
  return (
    <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8}}>
      {links.map((l,i) => (
        <div key={i} style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:10,padding:'14px',cursor:'pointer',transition:'all 150ms',display:'flex',alignItems:'flex-start',gap:10,boxShadow:'0 1px 4px rgba(15,28,48,0.06)'}}
          onMouseEnter={e=>{e.currentTarget.style.borderColor='#c7d9fd';e.currentTarget.style.boxShadow='0 2px 8px rgba(37,87,214,0.1)'}}
          onMouseLeave={e=>{e.currentTarget.style.borderColor='#e5ecf5';e.currentTarget.style.boxShadow='0 1px 4px rgba(15,28,48,0.06)'}}
          onClick={l.onClick||undefined}>
          <div style={{width:34,height:34,borderRadius:8,background:l.iconBg||'#eff6ff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:16,flexShrink:0}}>{l.icon}</div>
          <div>
            <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:2}}>{l.label}</div>
            <div style={{fontSize:11,color:'#8aa4c0'}}>{l.count}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function ProgressBar({value, height=5}) {
  const color = value >= 90 ? '#16a34a' : value >= 60 ? '#2557d6' : value >= 30 ? '#f59e0b' : '#dc2626';
  return (
    <div style={{display:'flex',alignItems:'center',gap:8}}>
      <div style={{flex:1,height,background:'#e5ecf5',borderRadius:height,overflow:'hidden',minWidth:56}}>
        <div style={{height:'100%',width:`${value}%`,background:color,borderRadius:height}}/>
      </div>
      <span style={{fontSize:11,fontFamily:'IBM Plex Mono,monospace',fontWeight:600,color:'#0f1c30',minWidth:30,textAlign:'right'}}>{value}%</span>
    </div>
  );
}

// ── CONSTRUCTION DETAIL (FR-251) ──────────────────────────

function ConstructionDetail({obj, onBack}) {
  const [tab, setTab] = React.useState('general');
  const sm = OBJ_STATUS[obj.status]||{label:obj.status,color:'#6b7280',bg:'#f9fafb'};

  const history = [
    {stage:'Tikinti davam edir',date:'01.05.2026',user:'A. Məmmədov',note:'Tikinti mərhələsinə keçid edildi.'},
    {stage:'Tenderdədir',       date:'15.04.2026',user:'T. Hüseynov',note:'Tender qalib elan edildi.'},
    {stage:'Ekspertizadadır',   date:'01.04.2026',user:'F. Quliyev', note:'Texniki ekspertiza tamamlandı.'},
    {stage:'Layihəsi işlənib',  date:'15.03.2026',user:'Sistem',     note:'Layihə sənədləri hazırlandı.'},
  ];
  const texnozorNotes = [
    {date:'14.05.2026',user:'R. Hüseynov',pct:50,note:'Tikinti işləri plana uyğun davam edir. Beton tökmə işləri tamamlandı.'},
    {date:'07.05.2026',user:'R. Hüseynov',pct:45,note:'Çərçivə işləri 80% tamamlanıb. Materiallar çatdırılıb.'},
    {date:'30.04.2026',user:'R. Hüseynov',pct:38,note:'Bünövrə işləri tam tamamlandı. Divar işləri başlanıb.'},
  ];
  const photos = [
    {label:'Yan görünüş',        date:'12.05.2026',size:'2.1 MB'},
    {label:'Tikinti meydançası', date:'10.05.2026',size:'3.4 MB'},
    {label:'Bünövrə işləri',     date:'05.05.2026',size:'1.8 MB'},
  ];

  return (
    <div>
      <VDPBreadcrumb items={[
        {label:'Memarlıq', onClick:onBack},
        {label:'Layihə obyektləri', onClick:onBack},
        {label:obj.code},
      ]}/>
      <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,overflow:'hidden',boxShadow:'0 1px 4px rgba(15,28,48,0.08)',marginBottom:16}}>
        {/* Header */}
        <div style={{padding:'16px 20px',borderBottom:'1px solid #e5ecf5',display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
          <div>
            <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:4}}>
              <span style={{fontFamily:'monospace',fontSize:11,color:'#8aa4c0'}}>{obj.code}</span>
              <span style={{fontSize:11,fontWeight:600,padding:'3px 9px',borderRadius:10,background:sm.bg,color:sm.color}}>● {sm.label}</span>
              {obj.delay && <span style={{fontSize:10,fontWeight:700,padding:'2px 8px',borderRadius:8,background:'#fef2f2',color:'#b91c1c'}}>{obj.delay} gün gecikmiş</span>}
            </div>
            <div style={{fontSize:18,fontWeight:700,color:'#0f1c30',marginBottom:4}}>{obj.name}</div>
            <div style={{fontSize:12,color:'#4a6888'}}>{obj.region} · {obj.məntəqə} · {obj.vəziyyəti}</div>
          </div>
          <div style={{display:'flex',gap:8,flexShrink:0}}>
            <button style={{padding:'7px 14px',background:'#fff',border:'1px solid #e5ecf5',borderRadius:8,fontSize:12,cursor:'pointer',color:'#4a6888'}}>↑ Foto yüklə</button>
            <button style={{padding:'7px 14px',background:'#fff',border:'1px solid #e5ecf5',borderRadius:8,fontSize:12,cursor:'pointer',color:'#4a6888'}}>✏️ Redaktə et</button>
            <button style={{padding:'7px 14px',background:'#2557d6',border:'none',borderRadius:8,fontSize:12,cursor:'pointer',color:'#fff',fontWeight:500}}>🔄 Statusu dəyiş</button>
          </div>
        </div>

        {/* KPI strip — benchmark exact: CARİ STATUS, TAMAMLANMA, İCRAÇI ŞİRKƏT, BÜDCƏ */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0,borderBottom:'1px solid #e5ecf5'}}>
          {[
            {label:'CARİ STATUS',   value:sm.label, bold:true, color:sm.color},
            {label:'TAMAMLANMA',    value:`${obj.progress}%`, bold:true},
            {label:'İCRAÇI ŞİRKƏT',value:obj.contractor},
            {label:'BÜDCƏ',        value:`₼ ${obj.budget}`, mono:true},
          ].map((m,i)=>(
            <div key={i} style={{padding:'13px 16px',borderRight:i<3?'1px solid #e5ecf5':undefined}}>
              <div style={{fontSize:9,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.08em',marginBottom:5}}>{m.label}</div>
              <div style={{fontSize:14,fontWeight:m.bold?700:500,color:m.color||'#0f1c30',fontFamily:m.mono?'IBM Plex Mono,monospace':undefined}}>{m.value}</div>
            </div>
          ))}
        </div>

        {/* Workflow Stepper */}
        <div style={{padding:'16px 20px',borderBottom:'1px solid #e5ecf5'}}>
          <div style={{fontSize:11,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:12}}>İş axını — Cari mərhələ: {STAGE_LABELS[obj.stage]?.replace('\n',' ')}</div>
          <WorkflowStepper stages={STAGE_LABELS} current={obj.stage}/>
        </div>

        {/* Tabs — benchmark: 6 tabs */}
        <div style={{borderBottom:'1px solid #e5ecf5',padding:'0 20px',display:'flex',gap:0,overflowX:'auto'}}>
          {[
            ['general','Ümumi məlumat'],
            ['history','Status tarixçəsi'],
            ['photos','Foto və sənədlər'],
            ['texnozor','Texnozor qeydləri'],
            ['delay','Gecikmə'],
            ['audit','Audit tarixçəsi'],
          ].map(([k,v])=>(
            <button key={k} style={{padding:'10px 16px',background:'none',border:'none',borderBottom:`2px solid ${tab===k?'#2557d6':'transparent'}`,color:tab===k?'#2557d6':'#4a6888',fontSize:13,fontWeight:tab===k?600:400,cursor:'pointer',marginBottom:-1,transition:'all 120ms',whiteSpace:'nowrap'}} onClick={()=>setTab(k)}>{v}</button>
          ))}
        </div>

        <div style={{padding:'20px'}}>
          {tab === 'general' && (
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20}}>
              {[
                {label:'İNVENTAR №',         value:obj.code},
                {label:'REGİON',              value:obj.region},
                {label:'YAŞAYIŞ MƏNTƏQƏSİ',  value:obj.məntəqə||'—'},
                {label:'VƏZİYYƏTİ',           value:obj.vəziyyəti||obj.type},
                {label:'İCRAÇI ŞİRKƏT',       value:obj.contractor},
                {label:'SAHƏ',                value:'12 450 m²'},
                {label:'BAŞLAMA TARİXİ',      value:'2025-09-19'},
                {label:'BİTMƏ TARİXİ',        value:'2026-07-26'},
                {label:'BÜDCƏ',               value:`₼ ${obj.budget}`},
                {label:'MƏSUL ŞƏXS',          value:'A. Məmmədov'},
              ].map((f,i)=>(
                <div key={i}>
                  <div style={{fontSize:10,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.07em',marginBottom:4}}>{f.label}</div>
                  <div style={{fontSize:13,color:'#0f1c30',fontWeight:500}}>{f.value}</div>
                </div>
              ))}
            </div>
          )}
          {tab === 'history' && (
            <div style={{display:'flex',flexDirection:'column',gap:0}}>
              {history.map((h,i)=>(
                <div key={i} style={{display:'flex',gap:14,paddingBottom:16,borderLeft:'2px solid #e5ecf5',paddingLeft:16,marginLeft:8,position:'relative'}}>
                  <div style={{position:'absolute',left:-7,top:2,width:12,height:12,borderRadius:'50%',background:'#2557d6',border:'2px solid #fff',boxShadow:'0 0 0 2px #e5ecf5'}}/>
                  <div style={{flex:1}}>
                    <div style={{display:'flex',gap:8,alignItems:'center',marginBottom:3}}>
                      <span style={{fontSize:12,fontWeight:600,color:'#0f1c30'}}>{h.stage}</span>
                      <span style={{fontSize:11,color:'#8aa4c0'}}>{h.date}</span>
                      <span style={{fontSize:11,color:'#4a6888'}}>— {h.user}</span>
                    </div>
                    <div style={{fontSize:12,color:'#4a6888',lineHeight:1.6}}>{h.note}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
          {tab === 'photos' && (
            <div>
              <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10,marginBottom:12}}>
                {photos.map((p,i)=>(
                  <div key={i} style={{border:'1px solid #e5ecf5',borderRadius:8,overflow:'hidden'}}>
                    <div style={{height:100,background:'linear-gradient(135deg,#e5ecf5 0%,#dde8f7 100%)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:12,color:'#8aa4c0',fontFamily:'monospace'}}>foto yerləşdirici</div>
                    <div style={{padding:'8px 10px',borderTop:'1px solid #e5ecf5'}}>
                      <div style={{fontSize:12,fontWeight:500,color:'#0f1c30',marginBottom:2}}>{p.label}</div>
                      <div style={{fontSize:10,color:'#8aa4c0'}}>{p.date} · {p.size}</div>
                    </div>
                  </div>
                ))}
              </div>
              <button style={{padding:'7px 14px',background:'#fff',border:'1px dashed #d0ddef',borderRadius:8,fontSize:12,cursor:'pointer',color:'#2557d6',fontWeight:500}}>+ Foto əlavə et</button>
            </div>
          )}
          {tab === 'texnozor' && (
            <div>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
                <div style={{fontSize:13,color:'#4a6888'}}>{texnozorNotes.length} texnozor qeydi</div>
                <button style={{padding:'7px 14px',background:'#2557d6',border:'none',borderRadius:8,fontSize:12,fontWeight:500,cursor:'pointer',color:'#fff'}}>+ Yeni qeyd</button>
              </div>
              <div style={{display:'flex',flexDirection:'column',gap:10}}>
                {texnozorNotes.map((n,i)=>(
                  <div key={i} style={{background:'#f8fafd',border:'1px solid #e5ecf5',borderRadius:10,padding:'14px 16px'}}>
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
                      <div style={{display:'flex',alignItems:'center',gap:8}}>
                        <span style={{fontSize:11,color:'#8aa4c0',fontFamily:'monospace'}}>{n.date}</span>
                        <span style={{fontSize:11,fontWeight:500,color:'#0f1c30'}}>{n.user}</span>
                      </div>
                      <span style={{fontSize:13,fontWeight:700,color:'#2557d6',fontFamily:'IBM Plex Mono,monospace'}}>{n.pct}%</span>
                    </div>
                    <div style={{height:5,background:'#e5ecf5',borderRadius:3,marginBottom:10,overflow:'hidden'}}>
                      <div style={{height:'100%',width:`${n.pct}%`,background:'#2557d6',borderRadius:3}}/>
                    </div>
                    <div style={{fontSize:12,color:'#4a6888',lineHeight:1.6}}>{n.note}</div>
                  </div>
                ))}
              </div>
            </div>
          )}
          {tab === 'delay' && (
            <div>
              {obj.delay ? (
                <div>
                  <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10,marginBottom:16}}>
                    {[
                      {label:'GECİKMƏ MÜDDƏTİ',value:`${obj.delay} gün`,color:'#b91c1c'},
                      {label:'PLANLANMIŞ BİTMƏ', value:'2026-07-26',     color:'#0f1c30'},
                      {label:'YENİ PROQNOZ',      value:'2026-08-30',     color:'#b45309'},
                    ].map((k,i)=>(
                      <div key={i} style={{background:'#fef2f2',border:'1px solid #fecaca',borderRadius:8,padding:'12px 16px'}}>
                        <div style={{fontSize:10,color:'#b91c1c',textTransform:'uppercase',letterSpacing:'0.07em',marginBottom:4}}>{k.label}</div>
                        <div style={{fontSize:20,fontWeight:700,color:k.color,fontFamily:'IBM Plex Mono,monospace'}}>{k.value}</div>
                      </div>
                    ))}
                  </div>
                  <div style={{marginBottom:14}}>
                    <label style={{display:'block',fontSize:12,fontWeight:600,color:'#0f1c30',marginBottom:6}}>Gecikmə səbəbi</label>
                    <textarea className="p-textarea" rows={3} defaultValue="Material çatışmazlığı səbəbindən tikinti işlərinin bir hissəsi planlaşdırılmış müddətdən gec başlanıb."/>
                  </div>
                  <button className="p-btn p-btn-primary" style={{fontSize:12}}>Saxla</button>
                </div>
              ) : (
                <div style={{textAlign:'center',padding:'40px',color:'#8aa4c0',fontSize:13}}>
                  Bu layihədə gecikmə qeydə alınmayıb ✓
                </div>
              )}
            </div>
          )}
          {tab === 'audit' && (
            <div style={{fontSize:12,color:'#4a6888',lineHeight:1.9}}>
              {[
                {ts:'14.05.2026 10:22',actor:'T. Hüseynov',act:'Tamamlanma 50% → 50% (yeniləndi)'},
                {ts:'12.05.2026 14:15',actor:'R. Hüseynov',act:'Texnozor qeydi əlavə edildi'},
                {ts:'01.05.2026 09:00',actor:'A. Məmmədov',act:'Status: Tenderdədir → Tikinti davam edir'},
                {ts:'15.04.2026 11:30',actor:'F. Quliyev', act:'İcraçı şirkət təyin edildi'},
              ].map((a,i)=>(
                <div key={i} style={{display:'flex',gap:10,padding:'6px 0',borderBottom:'1px solid #f0f4f8'}}>
                  <span style={{fontFamily:'monospace',fontSize:10,color:'#8aa4c0',whiteSpace:'nowrap'}}>{a.ts}</span>
                  <span style={{color:'#0f1c30',fontWeight:500}}>{a.actor}</span>
                  <span>{a.act}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ── CONSTRUCTION LIST (FR-250) ────────────────────────────

function ConstructionList({onSelect, onBack}) {
  const [search, setSearch] = React.useState('');
  const [regionFilter, setRegionFilter] = React.useState('');
  const [statusFilter, setStatusFilter] = React.useState('');

  const filtered = CONST_OBJECTS.filter(o =>
    (!search || o.name.toLowerCase().includes(search.toLowerCase()) || o.code.toLowerCase().includes(search.toLowerCase())) &&
    (!regionFilter || o.region === regionFilter) &&
    (!statusFilter || o.status === statusFilter)
  );

  return (
    <div>
      <VDPBreadcrumb items={[{label:'Memarlıq',onClick:onBack},{label:'Layihə obyektləri reyestri'}]}/>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14,gap:10,flexWrap:'wrap'}}>
        <div style={{display:'flex',gap:8,flex:1,minWidth:200,flexWrap:'wrap'}}>
          <input style={{flex:1,minWidth:160,padding:'8px 12px',border:'1px solid #d0ddef',borderRadius:8,fontSize:13,fontFamily:'IBM Plex Sans,sans-serif',outline:'none',color:'#0f1c30'}}
            placeholder="Axtarış: ad, kod..." value={search} onChange={e=>setSearch(e.target.value)}/>
          <select style={{padding:'8px 10px',border:'1px solid #d0ddef',borderRadius:8,fontSize:12,color:'#4a6888',background:'#fff'}} value={regionFilter} onChange={e=>setRegionFilter(e.target.value)}>
            <option value="">Bütün rayonlar</option>
            <option value="Xankəndi">Xankəndi</option>
            <option value="Ağdərə">Ağdərə</option>
            <option value="Xocalı">Xocalı</option>
          </select>
          <select style={{padding:'8px 10px',border:'1px solid #d0ddef',borderRadius:8,fontSize:12,color:'#4a6888',background:'#fff'}} value={statusFilter} onChange={e=>setStatusFilter(e.target.value)}>
            <option value="">Bütün statuslar</option>
            {Object.entries(OBJ_STATUS).filter(([k])=>!['active','texnozor','docs','construction','completed','prep'].includes(k)).map(([k,v])=>(
              <option key={k} value={k}>{v.label}</option>
            ))}
          </select>
        </div>
        <div style={{display:'flex',gap:8}}>
          <button style={{padding:'8px 14px',background:'#fff',border:'1px solid #d0ddef',borderRadius:8,fontSize:12,cursor:'pointer',color:'#4a6888'}}>↓ İxrac</button>
          <button style={{padding:'8px 16px',background:'#2557d6',border:'none',borderRadius:8,fontSize:13,fontWeight:500,cursor:'pointer',color:'#fff',whiteSpace:'nowrap'}}>+ Yeni obyekt</button>
        </div>
      </div>

      <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,overflow:'hidden',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
        <div style={{padding:'10px 16px',borderBottom:'1px solid #e5ecf5',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <span style={{fontSize:12,color:'#4a6888'}}>Cəmi: <strong style={{color:'#0f1c30'}}>{filtered.length} obyekt</strong></span>
        </div>
        <div style={{overflowX:'auto'}}>
          <table style={{width:'100%',borderCollapse:'collapse',minWidth:900}}>
            <thead>
              <tr style={{background:'#f8fafd'}}>
                {['İNVENTAR №','BÖLGƏ','YAŞAYIŞ MƏNTƏQƏSİ','VƏZİYYƏTİ','CARİ STATUS','TAMAMLANMA','İCRAÇI','SON YENİLƏNMƏ','GECİKMƏ'].map(h=>(
                  <th key={h} style={{textAlign:'left',fontSize:10,fontWeight:700,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.07em',padding:'10px 12px',borderBottom:'1px solid #e5ecf5',whiteSpace:'nowrap'}}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {filtered.map((o,i)=>{
                const sm = OBJ_STATUS[o.status]||{label:o.status,color:'#6b7280',bg:'#f9fafb'};
                const barColor = o.progress>=90?'#16a34a':o.progress>=60?'#2557d6':o.progress>=30?'#f59e0b':'#dc2626';
                return (
                  <tr key={i} style={{borderBottom:'1px solid #f0f4f8',cursor:'pointer',transition:'background 100ms'}}
                    onMouseEnter={e=>e.currentTarget.style.background='#f8fafd'}
                    onMouseLeave={e=>e.currentTarget.style.background='transparent'}
                    onClick={()=>onSelect(o)}>
                    <td style={{padding:'11px 12px',fontFamily:'IBM Plex Mono,monospace',fontSize:11,color:'#2557d6',fontWeight:600}}>{o.code}</td>
                    <td style={{padding:'11px 12px',fontSize:12,color:'#4a6888'}}>{o.region}</td>
                    <td style={{padding:'11px 12px',fontSize:12,color:'#4a6888',maxWidth:140}}><div style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{o.məntəqə}</div></td>
                    <td style={{padding:'11px 12px'}}>
                      <span style={{fontSize:11,padding:'2px 8px',borderRadius:4,background:'#f0f4f8',color:'#4a6888',fontWeight:500}}>{o.vəziyyəti}</span>
                    </td>
                    <td style={{padding:'11px 12px'}}>
                      <span style={{fontSize:11,fontWeight:600,padding:'3px 9px',borderRadius:20,background:sm.bg,color:sm.color,whiteSpace:'nowrap'}}>● {sm.label}</span>
                    </td>
                    <td style={{padding:'11px 12px',minWidth:120}}>
                      <div style={{display:'flex',alignItems:'center',gap:7}}>
                        <div style={{width:60,height:5,background:'#e5ecf5',borderRadius:3,overflow:'hidden'}}>
                          <div style={{height:'100%',width:`${o.progress}%`,background:barColor,borderRadius:3}}/>
                        </div>
                        <span style={{fontSize:11,fontFamily:'monospace',fontWeight:700,color:'#0f1c30'}}>{o.progress}%</span>
                      </div>
                    </td>
                    <td style={{padding:'11px 12px',fontSize:12,color:'#4a6888',maxWidth:120}}><div style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{o.contractor}</div></td>
                    <td style={{padding:'11px 12px',fontSize:11,color:'#8aa4c0',whiteSpace:'nowrap'}}>{o.updated}</td>
                    <td style={{padding:'11px 12px'}}>
                      {o.delay
                        ? <span style={{fontSize:11,fontWeight:700,padding:'3px 8px',borderRadius:10,background:'#fef2f2',color:'#b91c1c'}}>{o.delay} gün</span>
                        : <span style={{fontSize:11,color:'#8aa4c0'}}>—</span>
                      }
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ── CONSTRUCTION DASHBOARD (benchmark §C.1 exact pattern) ───

function ConstructionDashboard({onNavigate}) {
  // 4 full-width horizontal KPI cards (benchmark exact layout)
  const kpiStrip = [
    {label:'ÜMUMİ LAYİHƏ',          value:'142', color:'#1d4ed8', icon:'🏗', bg:'#eff6ff'},
    {label:'TİKİNTİ DAVAM EDIR',     value:'67',  color:'#2557d6', icon:'📋', bg:'#f0f5ff'},
    {label:'MƏSKUNLAŞMAYA HAZIR',    value:'3',   color:'#15803d', icon:'✅', bg:'#f0fdf4'},
    {label:'GECİKƏN LAYİHƏLƏR',     value:'4',   color:'#b91c1c', icon:'⚠️', bg:'#fef2f2'},
  ];

  // Quick links with title + subtitle (benchmark exact pattern)
  const quickLinks = [
    {icon:'➕', title:'Yeni obyekt əlavə et',    sub:'Layihə əlavə parametrları',          onClick:()=>onNavigate('new')},
    {icon:'✏️', title:'Texnozor fəal daxil et',  sub:'Tamamlanma faizi daxil edin',         onClick:()=>onNavigate('texnozor')},
    {icon:'🗺', title:'GIS xəritəyə bax',        sub:'Coğrafi region üzrə görünüş',         onClick:()=>onNavigate('gis')},
    {icon:'📊', title:'Gecikmə hesabatı',        sub:'Gecikən obyektlər və səbəbkar',       onClick:()=>onNavigate('delays')},
    {icon:'↩️', title:'Məskunlaşmaya Ötür',      sub:'Hazır obyektin ötürmə prosesi',       onClick:()=>onNavigate('transfer')},
    {icon:'📋', title:'Modul hesabatları',        sub:'Status üzrə tam modul hesabatları',  onClick:()=>onNavigate('reports')},
  ];

  // Recent table: İNVENTAR, BÖLGƏ, STATUS, TAMAMLANMA, YENİLƏNMƏ (benchmark exact)
  const recentRows = CONST_OBJECTS.slice(0,5).map(o => ({
    inventar: o.code,
    bolge:    o.region,
    status:   o.status,
    pct:      o.progress,
    updated:  o.updated,
  }));

  return (
    <div>
      {/* Header */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:18}}>
        <div>
          <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
            <span style={{fontSize:11,fontWeight:700,padding:'3px 8px',borderRadius:4,background:'#eff6ff',color:'#1d4ed8',letterSpacing:'0.06em'}}>VDP-MEMARLIQ</span>
            <span style={{fontSize:11,fontWeight:600,padding:'3px 8px',borderRadius:4,background:'#f0fdf4',color:'#15803d'}}>● Aktiv</span>
          </div>
          <div style={{fontSize:13,color:'#4a6888'}}>Bərpa, Tikinti və İdarəetmə Xidməti · Xankəndi · Ağdərə · Xocalı · May 2026</div>
          <div style={{fontSize:12,color:'#8aa4c0',marginTop:2}}>Modul üzrə məlumatların ümumi vəziyyəti və sürətli giriş nöqtələri</div>
        </div>
      </div>

      {/* 4 KPI cards — horizontal full-width row (benchmark §C.1) */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10,marginBottom:20}}>
        {kpiStrip.map((k,i)=>(
          <div key={i} style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:10,padding:'16px 18px',boxShadow:'0 1px 4px rgba(15,28,48,0.07)',display:'flex',alignItems:'center',gap:12}}>
            <div style={{width:38,height:38,borderRadius:9,background:k.bg,display:'flex',alignItems:'center',justifyContent:'center',fontSize:18,flexShrink:0}}>{k.icon}</div>
            <div>
              <div style={{fontSize:9,fontWeight:700,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.1em',marginBottom:3}}>{k.label}</div>
              <div style={{fontSize:28,fontWeight:700,color:k.color,fontFamily:'IBM Plex Mono,monospace',lineHeight:1}}>{k.value}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Sürətli keçidlər — 2×3 grid with title + subtitle (benchmark §C.1) */}
      <div style={{marginBottom:20}}>
        <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:10}}>Sürətli keçidlər</div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8}}>
          {quickLinks.map((l,i)=>(
            <div key={i} onClick={l.onClick}
              style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:10,padding:'14px 16px',cursor:'pointer',transition:'all 150ms',display:'flex',alignItems:'flex-start',gap:12,boxShadow:'0 1px 4px rgba(15,28,48,0.06)'}}
              onMouseEnter={e=>{e.currentTarget.style.borderColor='#c7d9fd';e.currentTarget.style.boxShadow='0 2px 8px rgba(37,87,214,0.10)'}}
              onMouseLeave={e=>{e.currentTarget.style.borderColor='#e5ecf5';e.currentTarget.style.boxShadow='0 1px 4px rgba(15,28,48,0.06)'}}>
              <div style={{width:36,height:36,borderRadius:8,background:'#f0f5ff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:18,flexShrink:0}}>{l.icon}</div>
              <div style={{minWidth:0}}>
                <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:3}}>{l.title}</div>
                <div style={{fontSize:11,color:'#8aa4c0',lineHeight:1.4}}>{l.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Son redaktə edilmiş layihələr — benchmark exact columns */}
      <div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
          <span style={{fontSize:13,fontWeight:600,color:'#0f1c30'}}>Son redaktə edilmiş layihələr</span>
          <button style={{background:'none',border:'none',color:'#2557d6',fontSize:12,cursor:'pointer',fontWeight:500,padding:0}} onClick={()=>onNavigate('list')}>Hamısına bax →</button>
        </div>
        <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,overflow:'hidden',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
          <table style={{width:'100%',borderCollapse:'collapse'}}>
            <thead><tr style={{background:'#f8fafd'}}>
              {['İNVENTAR','BÖLGƏ','STATUS','TAMAMLANMA','YENİLƏNMƏ'].map(h=>(
                <th key={h} style={{textAlign:'left',fontSize:10,fontWeight:700,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.07em',padding:'10px 14px',borderBottom:'1px solid #e5ecf5'}}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {recentRows.map((r,i)=>{
                const sm = OBJ_STATUS[r.status]||{label:r.status,color:'#6b7280',bg:'#f9fafb'};
                const barColor = r.pct>=90?'#16a34a':r.pct>=60?'#2557d6':r.pct>=30?'#f59e0b':'#dc2626';
                return (
                  <tr key={i} style={{borderBottom:'1px solid #f0f4f8',cursor:'pointer',transition:'background 100ms'}}
                    onMouseEnter={e=>e.currentTarget.style.background='#f8fafd'}
                    onMouseLeave={e=>e.currentTarget.style.background='transparent'}
                    onClick={()=>onNavigate('detail', CONST_OBJECTS[i])}>
                    <td style={{padding:'11px 14px',fontFamily:'IBM Plex Mono,monospace',fontSize:11,color:'#2557d6',fontWeight:600}}>{r.inventar}</td>
                    <td style={{padding:'11px 14px',fontSize:12,color:'#4a6888'}}>{r.bolge}</td>
                    <td style={{padding:'11px 14px'}}>
                      <span style={{fontSize:11,fontWeight:600,padding:'3px 10px',borderRadius:20,background:sm.bg,color:sm.color,whiteSpace:'nowrap'}}>● {sm.label}</span>
                    </td>
                    <td style={{padding:'11px 14px'}}>
                      <div style={{display:'flex',alignItems:'center',gap:8,minWidth:120}}>
                        <div style={{flex:1,height:6,background:'#e5ecf5',borderRadius:3,overflow:'hidden'}}>
                          <div style={{height:'100%',width:`${Math.min(r.pct,100)}%`,background:barColor,borderRadius:3}}/>
                        </div>
                        <span style={{fontSize:11,fontFamily:'IBM Plex Mono,monospace',fontWeight:700,color:'#0f1c30',minWidth:30,textAlign:'right'}}>{r.pct}%</span>
                      </div>
                    </td>
                    <td style={{padding:'11px 14px',fontSize:11,color:'#8aa4c0',whiteSpace:'nowrap'}}>{r.updated}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ── MAIN CONSTRUCTION PAGE ────────────────────────────────

function PortalConstructionPage({ setGlobalPage }) {
  const [view, setView] = React.useState('dashboard');
  const [selectedObj, setSelectedObj] = React.useState(null);
  const navigate = (v, obj) => {
    const globalRoutes = {gis:'gis', texnozor:'construction_texnozor', delays:'construction_delays', transfer:'construction_transfer', reports:'construction_reports', new:'construction_new'};
    if (globalRoutes[v] && setGlobalPage) { setGlobalPage(globalRoutes[v]); return; }
    setView(v);
    if (obj) setSelectedObj(obj);
  };
  if (view === 'detail' && selectedObj) return <ConstructionDetail obj={selectedObj} onBack={()=>setView('list')}/>;
  if (view === 'list') return <ConstructionList onSelect={o=>{setSelectedObj(o);setView('detail')}} onBack={()=>setView('dashboard')}/>;
  return <ConstructionDashboard onNavigate={navigate}/>;
}

// ── RESETTLEMENT DASHBOARD (FR-242/244, benchmark pattern #2) ────

function ResettlementDashboard({ onNavigate }) {
  const kpis = [
    {label:'Ümumi Ailə',      value:'1 247', sub:'Qeydiyyatda',                 color:'#0f1c30'},
    {label:'Mənzil Verilmiş', value:'684',   sub:'54.8%', color:'#15803d',      bar:55},
    {label:'Gözləyən',        value:'381',   sub:'Prioritet siyahıda',color:'#b45309',bar:31},
    {label:'Püşk Gözləyir',   value:'182',   sub:'01.06.2026', color:'#1d4ed8', bar:15},
  ];
  const recent = [
    {code:'AİL-XK-001',name:'Hüseynov Ramil', status:'allocated', region:'Xankəndi', date:'15.03.2026'},
    {code:'AİL-AG-003',name:'Əliyev Tural',   status:'lottery',   region:'Ağdərə',   date:'20.04.2026'},
    {code:'AİL-XL-005',name:'Nəsirov Kamran', status:'handoff',   region:'Xocalı',   date:'25.04.2026'},
    {code:'AİL-XK-006',name:'Rəsulova Aytən', status:'pending',   region:'Xankəndi', date:'05.05.2026'},
    {code:'AİL-XL-007',name:'İsmayılov Fuad', status:'refused',   region:'Xocalı',   date:'18.03.2026'},
  ];
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:18}}>
        <div>
          <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
            <span style={{fontSize:11,fontWeight:700,padding:'3px 8px',borderRadius:4,background:'#f5f3ff',color:'#7c3aed',letterSpacing:'0.06em'}}>VDP-MƏSKUNLAŞMA</span>
            <span style={{fontSize:11,fontWeight:600,padding:'3px 8px',borderRadius:4,background:'#f0fdf4',color:'#15803d'}}>● Aktiv</span>
          </div>
          <div style={{fontSize:13,color:'#4a6888'}}>Ailə Reyestri və Məskunlaşma İdarəetməsi · Xankəndi · Ağdərə · Xocalı · May 2026</div>
        </div>
      </div>
      <VDPKPIStrip kpis={kpis}/>
      <div style={{marginBottom:20}}>
        <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:10}}>Sürətli Keçid</div>
        <VDPQuickLinks links={[
          {icon:'👨‍👩‍👧',label:'Ailə Reyestri',       count:'1 247 ailə',          iconBg:'#f5f3ff', onClick:()=>onNavigate('list')},
          {icon:'🏠',  label:'Mənzil Fonduna Ötür',count:'Toplu ötürmə',          iconBg:'#f0fdf4', onClick:()=>onNavigate('handoff')},
          {icon:'🎲',  label:'Püşk Nəticələri',    count:'182 gözləyir',          iconBg:'#eff6ff', onClick:()=>onNavigate('lottery')},
          {icon:'📊',  label:'VDP Hesabatı',        count:'Ailə statistikası',     iconBg:'#fffbeb'},
          {icon:'📤',  label:'Toplu İdxal',         count:'Excel / CSV idxalı',    iconBg:'#fafafa'},
          {icon:'📋',  label:'İmtina Protokolları', count:'7 protokol',            iconBg:'#fef2f2'},
        ]}/>
      </div>
      <div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
          <span style={{fontSize:13,fontWeight:600,color:'#0f1c30'}}>Son Yenilənmiş Ailələr</span>
          <button style={{background:'none',border:'none',color:'#2557d6',fontSize:12,cursor:'pointer',fontWeight:500,padding:0}} onClick={()=>onNavigate('list')}>Hamısına bax →</button>
        </div>
        <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,overflow:'hidden',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
          <table style={{width:'100%',borderCollapse:'collapse'}}>
            <thead><tr style={{background:'#f8fafd'}}>
              {['Kodu','Ailə','Rayon','Status','Son yenilənmə'].map(h=>(
                <th key={h} style={{textAlign:'left',fontSize:10,fontWeight:700,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.07em',padding:'9px 12px',borderBottom:'1px solid #e5ecf5'}}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {recent.map((r,i)=>{
                const fs = FAM_STATUS[r.status]||{label:r.status,color:'#6b7280',bg:'#f9fafb'};
                return (
                  <tr key={i} style={{borderBottom:'1px solid #f0f4f8',cursor:'pointer',transition:'background 100ms'}}
                    onMouseEnter={e=>e.currentTarget.style.background='#f8fafd'}
                    onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                    <td style={{padding:'10px 12px',fontFamily:'monospace',fontSize:11,color:'#4a6888'}}>{r.code}</td>
                    <td style={{padding:'10px 12px',fontSize:13,fontWeight:500,color:'#0f1c30'}}>{r.name}</td>
                    <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888'}}>{r.region}</td>
                    <td style={{padding:'10px 12px'}}><span style={{fontSize:11,fontWeight:600,padding:'3px 8px',borderRadius:10,background:fs.bg,color:fs.color}}>{fs.label}</span></td>
                    <td style={{padding:'10px 12px',fontSize:11,color:'#8aa4c0'}}>{r.date}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ── RESETTLEMENT PAGE (VDP-Məskunlaşma) ───────────────────

function PortalResettlementPage() {
  const [view, setView] = React.useState('dashboard');
  const [handoffSelected, setHandoffSelected] = React.useState([]);

  if (view === 'dashboard') return <ResettlementDashboard onNavigate={setView}/>;

  // Benchmark-exact KPIs (C.2.1): ÜMUMİ AİLƏ, NƏFƏR SAYI, YERLƏŞDİRİLMİŞ, İMTİNA EDƏNLƏR
  const totalNəfər = FAMILIES.reduce((s,f)=>s+(f.nəfər||f.members),0);
  const kpis = [
    {label:'ÜMUMİ AİLƏ',       value:FAMILIES.length, sub:'Qeydiyyatda'},
    {label:'NƏFƏR SAYI',        value:totalNəfər,       color:'#1d4ed8', sub:'Cəmi şəxs'},
    {label:'YERLƏŞDİRİLMİŞ',   value:FAMILIES.filter(f=>f.status==='allocated').length, color:'#15803d', sub:'Mənzil verilmiş', bar:Math.round(FAMILIES.filter(f=>f.status==='allocated').length/FAMILIES.length*100)},
    {label:'İMTİNA EDƏNLƏR',    value:FAMILIES.filter(f=>f.status==='refused').length,  color:'#b91c1c', sub:'İmtina protokolu'},
  ];
  return (
    <div>
      <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:10,fontSize:12,color:'#8aa4c0'}}>
        <button style={{background:'none',border:'none',color:'#2557d6',fontSize:12,cursor:'pointer',padding:0,fontFamily:'inherit'}} onClick={()=>setView('dashboard')}>Məskunlaşma</button>
        <span>›</span>
        <span style={{color:'#0f1c30',fontWeight:500}}>{view==='list'?'Ailə Reyestri':view==='handoff'?'Mənzil Fonduna Ötürmə':'Püşk Nəticələri'}</span>
      </div>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
        <span style={{fontSize:11,fontWeight:700,padding:'3px 8px',borderRadius:4,background:'#f5f3ff',color:'#7c3aed',letterSpacing:'0.06em'}}>VDP-MƏSKUNLAŞMA</span>
      </div>
      <div style={{fontSize:13,color:'#4a6888',marginBottom:18}}>Ailə Reyestri və Məskunlaşma İdarəetməsi · May 2026</div>
      <VDPKPIStrip kpis={kpis}/>
      {/* Tabs */}
      <div style={{display:'flex',gap:1,borderBottom:'1px solid #e5ecf5',marginBottom:16}}>
        {[['list','Ailə Reyestri'],['handoff','Mənzil Fonduna Ötürmə'],['lottery','Püşk Nəticələri']].map(([k,v])=>(
          <button key={k} style={{padding:'9px 16px',background:'none',border:'none',borderBottom:`2px solid ${view===k?'#2557d6':'transparent'}`,color:view===k?'#2557d6':'#4a6888',fontSize:13,fontWeight:view===k?600:400,cursor:'pointer',marginBottom:-1,transition:'all 120ms'}} onClick={()=>setView(k)}>{v}</button>
        ))}
      </div>
      {view === 'list' && (
        <div>
          <div style={{display:'flex',justifyContent:'space-between',marginBottom:12,alignItems:'center',gap:8}}>
            <input style={{flex:1,maxWidth:280,padding:'8px 12px',border:'1px solid #d0ddef',borderRadius:8,fontSize:13,fontFamily:'IBM Plex Sans,sans-serif',outline:'none'}} placeholder="Ailə soyad / kodu axtar..."/>
            <button style={{padding:'8px 16px',background:'#2557d6',border:'none',borderRadius:8,fontSize:12,fontWeight:500,cursor:'pointer',color:'#fff'}}>+ Yeni Ailə</button>
          </div>
          <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,overflow:'hidden',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
            <div style={{padding:'10px 16px',borderBottom:'1px solid #e5ecf5',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <span style={{fontSize:12,color:'#4a6888'}}>Cəmi: <strong style={{color:'#0f1c30'}}>{FAMILIES.length} ailə · {FAMILIES.reduce((s,f)=>s+(f.nəfər||f.members),0)} nəfər</strong></span>
              <button style={{padding:'5px 12px',background:'#f0f4f8',border:'1px solid #d0ddef',borderRadius:6,fontSize:11,cursor:'pointer',color:'#4a6888'}}>↓ İxrac</button>
            </div>
            <div style={{overflowX:'auto'}}>
              <table style={{width:'100%',borderCollapse:'collapse',minWidth:800}}>
                <thead><tr style={{background:'#f8fafd'}}>
                  {['','AİLƏ №','AİLƏ BAŞÇISI','BÖLGƏ','YAŞAYIŞ MƏNTƏQƏSİ','ÜZV SAYI','NƏFƏR','STATUS','KÖÇ TARİXİ'].map(h=>(
                    <th key={h} style={{textAlign:'left',fontSize:10,fontWeight:700,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.06em',padding:'9px 12px',borderBottom:'1px solid #e5ecf5',whiteSpace:'nowrap'}}>{h}</th>
                  ))}
                </tr></thead>
                <tbody>
                  {FAMILIES.map((f,i)=>{
                    const fs = FAM_STATUS[f.status]||{label:f.status,color:'#6b7280',bg:'#f9fafb'};
                    const checked = handoffSelected.includes(f.code);
                    return (
                      <tr key={i} style={{borderBottom:'1px solid #f0f4f8',background:checked?'#f0f5ff':undefined}}>
                        <td style={{padding:'10px 12px'}}><input type="checkbox" checked={checked} onChange={e=>{setHandoffSelected(s=>e.target.checked?[...s,f.code]:s.filter(x=>x!==f.code))}}/></td>
                        <td style={{padding:'10px 12px',fontFamily:'monospace',fontSize:11,color:'#2557d6',fontWeight:600}}>{f.code}</td>
                        <td style={{padding:'10px 12px',fontSize:13,fontWeight:500,color:'#0f1c30'}}>{f.surname} {f.name}</td>
                        <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888'}}>{f.region}</td>
                        <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888'}}>{f.məntəqə||'—'}</td>
                        <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888',textAlign:'center'}}>{f.members}</td>
                        <td style={{padding:'10px 12px',fontSize:12,fontWeight:600,color:'#0f1c30',textAlign:'center'}}>{f.nəfər||f.members}</td>
                        <td style={{padding:'10px 12px'}}><span style={{fontSize:11,fontWeight:600,padding:'3px 8px',borderRadius:10,background:fs.bg,color:fs.color}}>{fs.label}</span></td>
                        <td style={{padding:'10px 12px',fontSize:11,color:'#8aa4c0'}}>{f.kocTarixi||f.date}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
            {handoffSelected.length > 0 && (
              <div style={{padding:'12px 16px',background:'#eff6ff',borderTop:'1px solid #c7d9fd',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                <span style={{fontSize:13,color:'#1d4ed8',fontWeight:500}}>{handoffSelected.length} ailə seçildi</span>
                <button style={{padding:'8px 18px',background:'#2557d6',border:'none',borderRadius:8,fontSize:13,fontWeight:600,cursor:'pointer',color:'#fff'}} onClick={()=>setView('handoff')}>→ Seçilmişləri Mənzil Fonduna Ötür ({handoffSelected.length})</button>
              </div>
            )}
          </div>
        </div>
      )}
      {view === 'handoff' && (
        <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,padding:'24px',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
          <div style={{fontSize:15,fontWeight:600,color:'#0f1c30',marginBottom:4}}>Mənzil Fonduna Ötürmə — Toplu Əməliyyat</div>
          <div style={{fontSize:12,color:'#4a6888',marginBottom:20}}>Seçilmiş ailələr Məskunlaşma reyestrindən Mənzil Fondu moduluna köçürüləcək.</div>
          <div style={{background:'#fffbeb',border:'1px solid #fde68a',borderRadius:8,padding:'12px 16px',marginBottom:16,fontSize:12,color:'#b45309'}}>
            Bu əməliyyat geri qaytarıla bilməz. Ötürülmüş ailələr Məskunlaşma reyestrindən arxivlənəcək.
          </div>
          {FAMILIES.filter(f=>handoffSelected.includes(f.code)).map((f,i)=>(
            <div key={i} style={{display:'flex',justifyContent:'space-between',padding:'8px 0',borderBottom:'1px solid #f0f4f8',fontSize:13}}>
              <span style={{fontFamily:'monospace',color:'#4a6888'}}>{f.code}</span>
              <span style={{color:'#0f1c30',fontWeight:500}}>{f.surname} {f.name} ({f.members} üzv)</span>
              <span style={{color:'#4a6888'}}>{f.region}</span>
            </div>
          ))}
          <div style={{display:'flex',gap:8,marginTop:20}}>
            <button style={{padding:'9px 20px',background:'#fff',border:'1px solid #e5ecf5',borderRadius:8,fontSize:13,cursor:'pointer',color:'#4a6888'}} onClick={()=>{setView('list');setHandoffSelected([])}}>Ləğv Et</button>
            <button style={{padding:'9px 20px',background:'#2557d6',border:'none',borderRadius:8,fontSize:13,fontWeight:600,cursor:'pointer',color:'#fff'}}>→ Ötürməni Təsdiqlə</button>
          </div>
        </div>
      )}
      {view === 'lottery' && (
        <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,padding:'24px',boxShadow:'0 1px 4px rgba(15,28,48,0.07)',textAlign:'center'}}>
          <div style={{fontSize:32,marginBottom:12}}>🎲</div>
          <div style={{fontSize:15,fontWeight:600,color:'#0f1c30',marginBottom:4}}>Növbəti Püşk: 01 İyun 2026</div>
          <div style={{fontSize:12,color:'#4a6888',marginBottom:20}}>182 ailə püşk siyahısında · Kriptoqrafik təsadüfü alqoritm (FR-282)</div>
          <div style={{display:'inline-flex',gap:10}}>
            <div style={{padding:'8px 16px',background:'#f0fdf4',border:'1px solid #bbf7d0',borderRadius:8,fontSize:12,color:'#15803d',fontWeight:500}}>✓ Alqoritm versiyası: v2.1.0</div>
            <div style={{padding:'8px 16px',background:'#eff6ff',border:'1px solid #c7d9fd',borderRadius:8,fontSize:12,color:'#1d4ed8',fontWeight:500}}>Şəffaf audit kökü mövcuddur</div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── HOUSING FUND DASHBOARD (FR-242/244) ──────────────────

function HousingFundDashboard({ onNavigate }) {
  // Benchmark-exact KPIs (C.3.1): ÜMUMİ MƏNZİL(10), BOŞ(4), AKTİV İSTİFADƏDƏ(4), MÜRACİƏTÇİLƏR(4)
  const bos    = APARTMENTS.filter(a=>a.status==='boş').length;
  const aktiv  = APARTMENTS.filter(a=>a.status==='kirayədədir').length;
  const muraci = APARTMENTS.filter(a=>a.status==='müraciətdədir'||a.status==='təhkim edilib').length;
  const kpis = [
    {label:'ÜMUMİ MƏNZİL',   value:APARTMENTS.length, sub:'Fondda'},
    {label:'BOŞ MƏNZİLLƏR',  value:bos,   color:'#15803d', sub:'Yerləşdirməyə hazır', bar:Math.round(bos/APARTMENTS.length*100)},
    {label:'AKTİV İSTİFADƏDƏ',value:aktiv, color:'#4b5563', sub:'Kirayədədir',          bar:Math.round(aktiv/APARTMENTS.length*100)},
    {label:'MÜRACİƏTÇİLƏR',  value:muraci,color:'#1d4ed8', sub:'Müraciət/Təhkim',      bar:Math.round(muraci/APARTMENTS.length*100)},
  ];
  const recentApts = [
    {code:'MNZ-XK-001',addr:'Xankəndi, Azadlıq küç. 14/3', status:'boş',        family:'—'},
    {code:'MNZ-XK-002',addr:'Xankəndi, Hüseyni küç. 7/12', status:'verilmiş',   family:'AİL-XK-001'},
    {code:'MNZ-XK-003',addr:'Xankəndi, Neftçi küç. 2/1',   status:'boş',        family:'—'},
    {code:'MNZ-AG-011',addr:'Ağdərə, Zəfər küç. 3/8',      status:'verilmiş',   family:'AİL-AG-004'},
    {code:'MNZ-AG-012',addr:'Ağdərə, İstiqlal küç. 9/5',   status:'saxlanılmış',family:'Gözləyir'},
  ];
  const aptSt = {boş:{l:'Boş',c:'#15803d',b:'#f0fdf4'},verilmiş:{l:'Verilmiş',c:'#4b5563',b:'#f9fafb'},saxlanılmış:{l:'Saxlanılmış',c:'#b45309',b:'#fffbeb'}};
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:18}}>
        <div>
          <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
            <span style={{fontSize:11,fontWeight:700,padding:'3px 8px',borderRadius:4,background:'#f0fdf4',color:'#15803d',letterSpacing:'0.06em'}}>VDP-MƏNZİL FONDU</span>
            <span style={{fontSize:11,fontWeight:600,padding:'3px 8px',borderRadius:4,background:'#f0fdf4',color:'#15803d'}}>● Aktiv</span>
          </div>
          <div style={{fontSize:13,color:'#4a6888'}}>Mənzil Reyestri və Ailə Yerləşdirmə · Xankəndi · Ağdərə · Xocalı · May 2026</div>
        </div>
      </div>
      <VDPKPIStrip kpis={kpis}/>
      <div style={{marginBottom:20}}>
        <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:10}}>Sürətli Keçid</div>
        <VDPQuickLinks links={[
          {icon:'🏠',label:'Mənzil Reyestri',    count:'2 148 mənzil',      iconBg:'#f0fdf4', onClick:()=>onNavigate('list')},
          {icon:'👨‍👩‍👧',label:'Ailə Yerləşdirməsi',count:'Boş mənzil tap',    iconBg:'#eff6ff'},
          {icon:'📋',label:'Saxlanılmış Fondlar', count:'252 mənzil',        iconBg:'#fffbeb'},
          {icon:'📊',label:'Dolulluq Hesabatı',   count:'70.4% dolulluq',    iconBg:'#fafafa'},
          {icon:'🏗',label:'Memarlıq VDP',        count:'Tikinti → Mənzil',  iconBg:'#eff6ff'},
          {icon:'📤',label:'Toplu Yerləşdirmə',   count:'Excel idxalı',      iconBg:'#fef2f2'},
        ]}/>
      </div>
      <div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
          <span style={{fontSize:13,fontWeight:600,color:'#0f1c30'}}>Son Yenilənmiş Mənzillər</span>
          <button style={{background:'none',border:'none',color:'#2557d6',fontSize:12,cursor:'pointer',fontWeight:500,padding:0}} onClick={()=>onNavigate('list')}>Hamısına bax →</button>
        </div>
        <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,overflow:'hidden',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
          <table style={{width:'100%',borderCollapse:'collapse'}}>
            <thead><tr style={{background:'#f8fafd'}}>
              {['Kodu','Ünvan','Status','Ailə'].map(h=>(
                <th key={h} style={{textAlign:'left',fontSize:10,fontWeight:700,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.07em',padding:'9px 12px',borderBottom:'1px solid #e5ecf5'}}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {recentApts.map((a,i)=>{
                const s = aptSt[a.status]||{l:a.status,c:'#6b7280',b:'#f9fafb'};
                return (
                  <tr key={i} style={{borderBottom:'1px solid #f0f4f8',cursor:'pointer',transition:'background 100ms'}}
                    onMouseEnter={e=>e.currentTarget.style.background='#f8fafd'}
                    onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                    <td style={{padding:'10px 12px',fontFamily:'monospace',fontSize:11,color:'#4a6888'}}>{a.code}</td>
                    <td style={{padding:'10px 12px',fontSize:12,color:'#0f1c30',maxWidth:200}}><div style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{a.addr}</div></td>
                    <td style={{padding:'10px 12px'}}><span style={{fontSize:11,fontWeight:600,padding:'3px 8px',borderRadius:10,background:s.b,color:s.c}}>{s.l}</span></td>
                    <td style={{padding:'10px 12px',fontFamily:'monospace',fontSize:11,color:'#4a6888'}}>{a.family}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ── HOUSING FUND PAGE (VDP-Mənzil Fondu) ─────────────────

function PortalHousingFundPage() {
  const [view, setView] = React.useState('dashboard');

  if (view === 'dashboard') return <HousingFundDashboard onNavigate={setView}/>;

  // Benchmark-exact status map (C.3.2)
  const aptSt = {
    boş:             {label:'Boş',           color:'#15803d', bg:'#f0fdf4'},
    kirayədədir:     {label:'Kirayədədir',   color:'#1d4ed8', bg:'#eff6ff'},
    'təhkim edilib': {label:'Təhkim edilib', color:'#b45309', bg:'#fffbeb'},
    'müraciətdədir': {label:'Müraciətdədir',color:'#7c3aed', bg:'#f5f3ff'},
    boşaldılıb:      {label:'Boşaldılıb',   color:'#6b7280', bg:'#f9fafb'},
  };

  return (
    <div>
      <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:10,fontSize:12,color:'#8aa4c0'}}>
        <button style={{background:'none',border:'none',color:'#2557d6',fontSize:12,cursor:'pointer',padding:0,fontFamily:'inherit'}} onClick={()=>setView('dashboard')}>Mənzil Fondu</button>
        <span>›</span><span style={{color:'#0f1c30',fontWeight:500}}>Mənzil Reyestri</span>
      </div>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
        <span style={{fontSize:11,fontWeight:700,padding:'3px 8px',borderRadius:4,background:'#f0fdf4',color:'#15803d',letterSpacing:'0.06em'}}>VDP-MƏNZİL FONDU</span>
      </div>
      <div style={{fontSize:13,color:'#4a6888',marginBottom:14}}>Mənzil Reyestri · {APARTMENTS.length} mənzil · May 2026</div>
      <div style={{display:'flex',gap:8,marginBottom:14,alignItems:'center',flexWrap:'wrap'}}>
        <input className="p-input" style={{flex:1,maxWidth:260}} placeholder="Mənzil kodu axtar..."/>
        <select style={{padding:'8px 10px',border:'1px solid #d0ddef',borderRadius:8,fontSize:12,color:'#4a6888',background:'#fff'}}>
          <option value="">Bütün statuslar</option>
          {Object.entries(aptSt).map(([k,v])=><option key={k} value={k}>{v.label}</option>)}
        </select>
        <div style={{marginLeft:'auto',display:'flex',gap:8}}>
          <button style={{padding:'7px 14px',background:'#fff',border:'1px solid #d0ddef',borderRadius:8,fontSize:12,cursor:'pointer',color:'#4a6888'}}>↓ İxrac</button>
          <button className="p-btn p-btn-primary" style={{fontSize:12}}>+ Yeni mənzil</button>
        </div>
      </div>
      <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,overflow:'hidden',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
        <div style={{padding:'10px 16px',borderBottom:'1px solid #e5ecf5',fontSize:12,color:'#4a6888'}}>
          Cəmi: <strong style={{color:'#0f1c30'}}>{APARTMENTS.length} mənzil</strong>
        </div>
        <div style={{overflowX:'auto'}}>
          <table style={{width:'100%',borderCollapse:'collapse',minWidth:860}}>
            <thead><tr style={{background:'#f8fafd'}}>
              {['MƏNZİL KODU','BÖLGƏ','ZONA','BİNA','GİRİŞ','MƏRTƏBƏ','MƏNZİL №','SAHƏ','STATUS','MÜRACİƏTÇİ'].map(h=>(
                <th key={h} style={{textAlign:'left',fontSize:10,fontWeight:700,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.06em',padding:'9px 12px',borderBottom:'1px solid #e5ecf5',whiteSpace:'nowrap'}}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {APARTMENTS.map((a,i)=>{
                const as = aptSt[a.status]||{label:a.status,color:'#6b7280',bg:'#f9fafb'};
                return (
                  <tr key={i} style={{borderBottom:'1px solid #f0f4f8',cursor:'pointer',transition:'background 100ms'}}
                    onMouseEnter={e=>e.currentTarget.style.background='#f8fafd'}
                    onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                    <td style={{padding:'10px 12px',fontFamily:'monospace',fontSize:11,color:'#2557d6',fontWeight:600}}>{a.code}</td>
                    <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888'}}>{a.bölgə}</td>
                    <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888'}}>{a.zona}</td>
                    <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888'}}>{a.bina}</td>
                    <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888',textAlign:'center'}}>{a.giriş}</td>
                    <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888',textAlign:'center'}}>{a.mərtəbə}</td>
                    <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888',textAlign:'center'}}>{a.mənzilNo}</td>
                    <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888'}}>{a.area}</td>
                    <td style={{padding:'10px 12px'}}><span style={{fontSize:11,fontWeight:600,padding:'3px 8px',borderRadius:10,background:as.bg,color:as.color,whiteSpace:'nowrap'}}>{as.label}</span></td>
                    <td style={{padding:'10px 12px',fontFamily:'monospace',fontSize:11,color:'#4a6888'}}>{a.müraciətçi}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ── PROPERTY DASHBOARD — benchmark exact KPIs (C.4.1) ────

function PropertyDashboard({ onNavigate }) {
  // ƏMLAK OBYEKTLƏRİ(6), AKTİV MÜQAVİLƏLƏR(3), GECİKMİŞ ÖDƏNİŞLƏR(4), BİTMƏ YAXINLAŞAN(1)
  const kpis = [
    {label:'ƏMLAK OBYEKTLƏRİ',  value:'6',  color:'#0f1c30', sub:'3 rayonda'},
    {label:'AKTİV MÜQAVİLƏLƏR', value:'3',  color:'#1d4ed8', sub:'Cari dövr', bar:50},
    {label:'GECİKMİŞ ÖDƏNİŞLƏR',value:'4',  color:'#b91c1c', sub:'₼ 12 400 borclu', bar:67},
    {label:'BİTMƏ YAXINLAŞAN',   value:'1',  color:'#b45309', sub:'90 gün ərzində', bar:17},
  ];
  const recentLeases = [
    {code:'ÜM-XK-001',tenant:'Xankəndi Ticarət MMC',type:'İcarə',        monthly:'₼ 1 200',paid:true},
    {code:'ÜM-XK-002',tenant:'Qida Anbarı QSC',     type:'İcarə',        monthly:'₼ 2 900',paid:false},
    {code:'ÜM-AG-003',tenant:'Əczaxana Şəbəkəsi',   type:'İcarə',        monthly:'₼ 600', paid:true},
    {code:'ÜM-XK-005',tenant:'IT Xidmətləri Ltd',   type:'İcarə',        monthly:'₼ 570', paid:true},
    {code:'ÜM-XL-004',tenant:'Avadanlıq İdxalı ASC',type:'Tullantı satışı',monthly:'₼ 4 050',paid:false},
  ];
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:18}}>
        <div>
          <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
            <span style={{fontSize:11,fontWeight:700,padding:'3px 8px',borderRadius:4,background:'#fff7ed',color:'#c2410c',letterSpacing:'0.06em'}}>VDP-ƏMLAK</span>
            <span style={{fontSize:11,fontWeight:600,padding:'3px 8px',borderRadius:4,background:'#f0fdf4',color:'#15803d'}}>● Aktiv</span>
          </div>
          <div style={{fontSize:13,color:'#4a6888'}}>Kommersiya İcarəsi, Bank Uyğunlaşdırma · Xankəndi · Ağdərə · Xocalı · May 2026</div>
        </div>
      </div>
      <VDPKPIStrip kpis={kpis}/>
      <div style={{marginBottom:20}}>
        <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:10}}>Sürətli Keçid</div>
        <VDPQuickLinks links={[
          {icon:'🏢',label:'İcarə Müqavilələri',  count:'47 müqavilə',         iconBg:'#fff7ed', onClick:()=>onNavigate('list')},
          {icon:'🏦',label:'Bank Uyğunlaşdırma',  count:'May 2026 aktiv',      iconBg:'#eff6ff'},
          {icon:'⚠️',label:'Ödənilməmiş İcarələr',count:'8 · ₼ 12 400',       iconBg:'#fef2f2'},
          {icon:'📊',label:'Gəlir Hesabatı',      count:'₼ 94K bu ay',         iconBg:'#f0fdf4'},
          {icon:'📋',label:'Müqavilə Bitmə',      count:'3 tezliklə bitir',     iconBg:'#fffbeb'},
          {icon:'📤',label:'Toplu İdxal',         count:'Excel / CSV idxalı',   iconBg:'#fafafa'},
        ]}/>
      </div>
      <div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
          <span style={{fontSize:13,fontWeight:600,color:'#0f1c30'}}>Son İcarə Müqavilələri</span>
          <button style={{background:'none',border:'none',color:'#2557d6',fontSize:12,cursor:'pointer',fontWeight:500,padding:0}} onClick={()=>onNavigate('list')}>Hamısına bax →</button>
        </div>
        <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,overflow:'hidden',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
          <table style={{width:'100%',borderCollapse:'collapse'}}>
            <thead><tr style={{background:'#f8fafd'}}>
              {['Kodu','İcarəçi','Növ','Aylıq İcarə','Ödəniş'].map(h=>(
                <th key={h} style={{textAlign:'left',fontSize:10,fontWeight:700,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.07em',padding:'9px 12px',borderBottom:'1px solid #e5ecf5'}}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {recentLeases.map((l,i)=>(
                <tr key={i} style={{borderBottom:'1px solid #f0f4f8',cursor:'pointer',transition:'background 100ms'}}
                  onMouseEnter={e=>e.currentTarget.style.background='#f8fafd'}
                  onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                  <td style={{padding:'10px 12px',fontFamily:'monospace',fontSize:11,color:'#4a6888'}}>{l.code}</td>
                  <td style={{padding:'10px 12px',fontSize:13,fontWeight:500,color:'#0f1c30'}}>{l.tenant}</td>
                  <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888'}}>{l.type}</td>
                  <td style={{padding:'10px 12px',fontFamily:'IBM Plex Mono,monospace',fontSize:13,fontWeight:700,color:'#0f1c30'}}>{l.monthly}</td>
                  <td style={{padding:'10px 12px'}}>
                    <span style={{fontSize:11,fontWeight:600,padding:'3px 8px',borderRadius:10,background:l.paid?'#f0fdf4':'#fef2f2',color:l.paid?'#15803d':'#b91c1c'}}>
                      {l.paid?'✓ Ödənilmiş':'✗ Gözləyir'}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ── PROPERTY PAGE (VDP-Əmlak) ─────────────────────────────

function PortalPropertyPage() {
  const [view, setView] = React.useState('dashboard');

  if (view === 'dashboard') return <PropertyDashboard onNavigate={setView}/>;

  const leases = [
    {code:'ÜM-XK-001',tenant:'Xankəndi Ticarət MMC',voen:'1234567890',type:'İcarə',        zona:'A zona',area:'240 m²',monthly:'₼ 1 200',status:'aktiv',    expiry:'31.12.2026',paid:true},
    {code:'ÜM-XK-002',tenant:'Qida Anbarı QSC',     voen:'9876543210',type:'İcarə',        zona:'B zona',area:'580 m²',monthly:'₼ 2 900',status:'aktiv',    expiry:'30.06.2026',paid:false},
    {code:'ÜM-AG-003',tenant:'Əczaxana Şəbəkəsi',   voen:'5432167890',type:'İcarə',        zona:'A zona',area:'120 m²',monthly:'₼ 600', status:'aktiv',    expiry:'28.02.2027',paid:true},
    {code:'ÜM-XL-004',tenant:'Avadanlıq İdxalı ASC',voen:'1111111111',type:'Birgə fəaliyyət',zona:'C zona',area:'810 m²',monthly:'₼ 4 050',status:'bitib',  expiry:'30.04.2026',paid:true},
    {code:'ÜM-XK-005',tenant:'IT Xidmətləri Ltd',   voen:'2222222222',type:'İcarə',        zona:'A zona',area:'95 m²', monthly:'₼ 570', status:'aktiv',    expiry:'31.01.2027',paid:true},
    {code:'ÜM-XL-006',tenant:'EcoClean Tullantı ASC',voen:'3333333333',type:'Tullantı satışı',zona:'D zona',area:'—',  monthly:'₼ 800', status:'aktiv',    expiry:'01.08.2026',paid:true},
  ];
  return (
    <div>
      <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:10,fontSize:12,color:'#8aa4c0'}}>
        <button style={{background:'none',border:'none',color:'#2557d6',fontSize:12,cursor:'pointer',padding:0,fontFamily:'inherit'}} onClick={()=>setView('dashboard')}>Əmlak</button>
        <span>›</span>
        <span style={{color:'#0f1c30',fontWeight:500}}>İcarə Müqavilələri</span>
      </div>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
        <span style={{fontSize:11,fontWeight:700,padding:'3px 8px',borderRadius:4,background:'#fff7ed',color:'#c2410c',letterSpacing:'0.06em'}}>VDP-ƏMLAK</span>
      </div>
      <div style={{fontSize:13,color:'#4a6888',marginBottom:18}}>Kommersiya İcarəsi və Bank Uyğunlaşdırma · May 2026</div>
      <VDPKPIStrip kpis={[
        {label:'Cəmi İcarə',    value:'47',    sub:'Aktiv müqavilə'},
        {label:'Aylıq Gəlir',  value:'₼ 94 K', color:'#15803d', sub:'Planın 103.2%-i', bar:100},
        {label:'Ödəniş Edilmiş',value:'39',    color:'#1d4ed8', sub:'83% bu ay', bar:83},
        {label:'Ödənilməmiş',  value:'8',      color:'#b91c1c', sub:'₼ 12 400 borclu', bar:17},
      ]}/>
      <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,overflow:'hidden',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
        <div style={{overflowX:'auto'}}>
          <table style={{width:'100%',borderCollapse:'collapse',minWidth:900}}>
            <thead><tr style={{background:'#f8fafd'}}>
              {['MÜQAVİLƏ №','İCARƏÇİ','VÖEN','NÖV','STATUS','BAŞLAMA','BİTMƏ','AYLIQ','ZONA','ÖDƏNİŞ'].map(h=>(
                <th key={h} style={{textAlign:'left',fontSize:10,fontWeight:700,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.06em',padding:'9px 12px',borderBottom:'1px solid #e5ecf5',whiteSpace:'nowrap'}}>{h}</th>
              ))}
            </tr></thead>
            <tbody>
              {leases.map((l,i)=>(
                <tr key={i} style={{borderBottom:'1px solid #f0f4f8',cursor:'pointer',transition:'background 100ms'}}
                  onMouseEnter={e=>e.currentTarget.style.background='#f8fafd'}
                  onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                  <td style={{padding:'10px 12px',fontFamily:'monospace',fontSize:11,color:'#2557d6',fontWeight:600}}>{l.code}</td>
                  <td style={{padding:'10px 12px',fontSize:13,fontWeight:500,color:'#0f1c30'}}>{l.tenant}</td>
                  <td style={{padding:'10px 12px',fontFamily:'monospace',fontSize:11,color:'#4a6888'}}>{l.voen}</td>
                  <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888'}}>{l.type}</td>
                  <td style={{padding:'10px 12px'}}>
                    <span className="pill" style={{background:l.status==='aktiv'?'#f0fdf4':l.status==='bitib'?'#f9fafb':'#fef2f2',color:l.status==='aktiv'?'#15803d':l.status==='bitib'?'#6b7280':'#b91c1c',fontSize:10}}>
                      {l.status==='aktiv'?'Aktiv':l.status==='bitib'?'Bitib':'Dayandırılıb'}
                    </span>
                  </td>
                  <td style={{padding:'10px 12px',fontSize:11,color:'#8aa4c0',whiteSpace:'nowrap'}}>01.01.2026</td>
                  <td style={{padding:'10px 12px',fontSize:11,color:'#4a6888',whiteSpace:'nowrap'}}>{l.expiry}</td>
                  <td style={{padding:'10px 12px',fontFamily:'IBM Plex Mono,monospace',fontSize:13,fontWeight:700,color:'#0f1c30'}}>{l.monthly}</td>
                  <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888'}}>{l.zona}</td>
                  <td style={{padding:'10px 12px'}}>
                    <span className="pill" style={{background:l.paid?'#f0fdf4':'#fef2f2',color:l.paid?'#15803d':'#b91c1c',fontSize:10}}>
                      {l.paid?'✓ Ödənilib':'✗ Gözləyir'}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  WorkflowStepper,
  PortalConstructionPage,
  PortalResettlementPage,
  PortalHousingFundPage,
  PortalPropertyPage,
});