// Customer mobile app — phone frame mockup
function CustomerAppPage({ role }) {
  const myVhs = KENDARAAN.slice(0, 2);
  const reminders = buildReminders().filter(r => myVhs.some(v => v.id === r.vhId)).slice(0, 3);
  const myHist = SERVIS_HISTORY.filter(h => myVhs.some(v => v.id === h.vhId)).slice(0, 3);

  return (
    <div>
      <PageHeader
        eyebrow="Customer Experience"
        title="Customer App"
        subtitle="Aplikasi mobile untuk owner kendaraan — cek health, reminder, booking, riwayat"
      />

      <div className="grid" style={{gridTemplateColumns:'320px 320px 320px', gap:16, justifyContent:'center'}}>
        {/* Screen 1: Home */}
        <div style={{background:'#0f172a', borderRadius:32, padding:8, boxShadow:'0 20px 50px hsl(var(--accent) / 0.15)'}}>
          <div style={{background:'hsl(var(--background))', borderRadius:26, overflow:'hidden', height:600}}>
            <div style={{background:'linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(180 50% 30%) 100%)', padding:'40px 18px 22px', color:'white'}}>
              <div style={{fontSize:11, opacity:0.85}}>Selamat pagi 👋</div>
              <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:18, fontWeight:650, marginTop:2}}>Pak Andika</div>
              <div style={{marginTop:14, background:'rgba(255,255,255,0.13)', borderRadius:12, padding:12}}>
                <div style={{fontSize:10.5, opacity:0.85}}>KENDARAAN UTAMA</div>
                <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:15, fontWeight:650, marginTop:2}}>{myVhs[0].merk} {myVhs[0].model}</div>
                <div className="mono" style={{fontSize:11, opacity:0.85}}>{myVhs[0].plat} · {myVhs[0].km.toLocaleString('id-ID')} km</div>
                <div style={{marginTop:10, display:'flex', alignItems:'center', gap:10}}>
                  <div style={{width:42, height:42, borderRadius:21, background:'rgba(255,255,255,0.2)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:13, fontWeight:700}}>{healthScore(myVhs[0])}</div>
                  <div style={{flex:1}}>
                    <div style={{fontSize:11, opacity:0.85}}>Health Score</div>
                    <div style={{fontSize:13, fontWeight:600}}>{scoreLabel(healthScore(myVhs[0]))}</div>
                  </div>
                </div>
              </div>
            </div>
            <div style={{padding:'14px 18px'}}>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:0.4, fontWeight:600, marginBottom:8}}>Reminder Anda</div>
              {reminders.slice(0, 2).map(r => (
                <div key={r.id} style={{padding:10, border:'1px solid hsl(var(--border))', borderRadius:10, marginBottom:6, display:'flex', gap:8, alignItems:'center'}}>
                  <div style={{width:34, height:34, borderRadius:8, background:'hsl(var(--warn) / 0.15)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                    <Icon name="oil" size={16} color="hsl(var(--warn))" />
                  </div>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{fontSize:12, fontWeight:600}}>{r.title}</div>
                    <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>{r.subtitle || r.label}</div>
                  </div>
                </div>
              ))}
              <button style={{width:'100%', padding:11, background:'hsl(var(--accent))', color:'white', border:'none', borderRadius:10, fontSize:13, fontWeight:650, marginTop:8, cursor:'pointer'}}>Booking Servis Sekarang</button>
            </div>
          </div>
        </div>

        {/* Screen 2: Health detail */}
        <div style={{background:'#0f172a', borderRadius:32, padding:8, boxShadow:'0 20px 50px hsl(var(--accent) / 0.15)'}}>
          <div style={{background:'hsl(var(--background))', borderRadius:26, overflow:'hidden', height:600}}>
            <div style={{padding:'40px 18px 12px', borderBottom:'1px solid hsl(var(--border))'}}>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>Kondisi Kendaraan</div>
              <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:16, fontWeight:650}}>{myVhs[0].merk} {myVhs[0].model}</div>
            </div>
            <div style={{padding:'14px 18px', textAlign:'center'}}>
              <div style={{width:120, height:120, margin:'0 auto', borderRadius:60, background:`conic-gradient(hsl(var(--good)) 0% ${healthScore(myVhs[0])}%, hsl(var(--muted)) ${healthScore(myVhs[0])}% 100%)`, display:'flex', alignItems:'center', justifyContent:'center'}}>
                <div style={{width:96, height:96, borderRadius:48, background:'hsl(var(--card))', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
                  <div style={{fontSize:28, fontWeight:700, fontFamily:'Fraunces, Georgia, serif'}}>{healthScore(myVhs[0])}</div>
                  <div style={{fontSize:10, color:'hsl(var(--muted-foreground))'}}>dari 100</div>
                </div>
              </div>
              <div style={{fontSize:13, fontWeight:600, marginTop:8}}>{scoreLabel(healthScore(myVhs[0]))}</div>
            </div>
            <div style={{padding:'0 18px'}}>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:0.4, fontWeight:600, marginBottom:6}}>Komponen Perlu Perhatian</div>
              {HEALTH_COMPONENTS.slice(0, 4).map(comp => {
                const usage = myVhs[0].components[comp.id];
                if (!usage) return null;
                const ratio = componentRatio(comp, usage);
                const tone = componentTone(ratio);
                return (
                  <div key={comp.id} style={{display:'flex', alignItems:'center', gap:8, padding:'7px 0', borderBottom:'1px solid hsl(var(--border))'}}>
                    <Icon name={comp.icon} size={14} color={`hsl(var(--${tone === 'danger' ? 'danger' : tone === 'warn' ? 'warn' : 'good'}))`} />
                    <span style={{flex:1, fontSize:12}}>{comp.label}</span>
                    <span style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{Math.round(ratio * 100)}%</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Screen 3: Riwayat */}
        <div style={{background:'#0f172a', borderRadius:32, padding:8, boxShadow:'0 20px 50px hsl(var(--accent) / 0.15)'}}>
          <div style={{background:'hsl(var(--background))', borderRadius:26, overflow:'hidden', height:600}}>
            <div style={{padding:'40px 18px 12px', borderBottom:'1px solid hsl(var(--border))'}}>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>Riwayat Servis</div>
              <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:16, fontWeight:650}}>{myHist.length} servis tercatat</div>
            </div>
            <div style={{padding:'10px 18px'}}>
              {myHist.map(h => {
                const vh = KENDARAAN_BY_ID[h.vhId];
                return (
                  <div key={h.id} style={{padding:10, border:'1px solid hsl(var(--border))', borderRadius:10, marginBottom:8}}>
                    <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
                      <div>
                        <div style={{fontSize:12, fontWeight:650}}>{formatDateID(h.tgl)}</div>
                        <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>{vh?.plat} · km {h.km.toLocaleString('id-ID')}</div>
                      </div>
                      <span className="mono" style={{fontSize:12, fontWeight:650}}>{rupiah(h.total, {compact:true})}</span>
                    </div>
                    <div style={{marginTop:6, display:'flex', gap:4, flexWrap:'wrap'}}>
                      {h.items.slice(0, 2).map(id => <span key={id} style={{fontSize:10, padding:'2px 6px', background:'hsl(var(--muted))', borderRadius:4}}>{ITEM_SERVIS_BY_ID[id]?.label.split(' ').slice(0,2).join(' ')}</span>)}
                    </div>
                    <div style={{marginTop:5, fontSize:10.5, color:'hsl(var(--muted-foreground))'}}><Icon name="camera" size={10} /> {h.foto} foto dokumentasi</div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.CustomerAppPage = CustomerAppPage;