// Customer Web — preview situs publik untuk customer (booking online)
const { useState: useStateCW, useMemo: useMemoCW } = React;

function CustomerWeb({ role, setPage }) {
  const [step, setStep] = useStateCW('browse'); // browse | confirm

  // Pilih 6 armada show
  const showcase = useMemoCW(() =>
    ARMADA.filter(a => a.status === 'available').slice(0, 6),
  []);

  return (
    <div>
      <PageHeader
        eyebrow="Web · Customer-Facing"
        title="Customer Web Booking"
        subtitle="Preview situs publik balidriverentcar.com — search, booking online, dashboard tamu"
        actions={[
          <Btn key="open" icon="globe" tone="primary" size="sm">Open Live Site</Btn>,
        ]}
      />

      {/* Browser shell */}
      <div className="cw-shell">
        <div className="cw-bar">
          <span className="cw-dot" style={{background:'#ff5f57'}}/>
          <span className="cw-dot" style={{background:'#febc2e'}}/>
          <span className="cw-dot" style={{background:'#28c840'}}/>
          <div className="cw-url">https://balidriverentcar.com</div>
          <Icon name="refresh" size={14}/>
        </div>

        <div className="cw-body">
          {/* Top nav mock */}
          <div className="row between" style={{marginBottom:24, paddingBottom:14, borderBottom:'1px solid hsl(var(--border))'}}>
            <div className="row gap-2" style={{alignItems:'center'}}>
              <div style={{
                width:34, height:34, borderRadius:9,
                background:'linear-gradient(135deg, hsl(188 50% 30%), hsl(195 60% 22%))',
                color:'white', display:'grid', placeItems:'center',
                fontFamily:'Fraunces, Georgia, serif', fontSize:15, fontWeight:600,
              }}>BDR</div>
              <div>
                <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:15, fontWeight:600, lineHeight:1}}>Bali Drive</div>
                <div style={{fontSize:10, color:'hsl(var(--muted-foreground))', letterSpacing:'0.05em'}}>RENTCAR</div>
              </div>
            </div>
            <div className="row gap-4" style={{fontSize:13, color:'hsl(var(--muted-foreground))'}}>
              <span>Armada</span>
              <span>Self-Drive</span>
              <span>With-Driver</span>
              <span>Lokasi</span>
              <span>Tentang</span>
            </div>
            <div className="row gap-2">
              <Btn icon="user" tone="ghost" size="sm">Masuk</Btn>
              <Btn tone="primary" size="sm">Booking</Btn>
            </div>
          </div>

          {/* Hero */}
          <div className="cw-hero">
            <div>
              <Pill tone="accent" style={{marginBottom:14}}>Terpercaya di Bali sejak 2019</Pill>
              <h2>Sewa Mobil di Bali, <br/>Tanpa Drama.</h2>
              <p>38 armada terawat, antar-jemput Bandara Ngurah Rai 24 jam, asuransi all-risk, & driver lokal berlisensi. Self-drive atau with-driver — semua aman.</p>
              <div className="row gap-3" style={{marginTop:18}}>
                <Btn icon="car" tone="primary">Lihat Armada</Btn>
                <Btn icon="whatsapp" tone="outline">Chat WhatsApp</Btn>
              </div>
              <div className="row gap-4" style={{marginTop:18, fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>
                <span className="row gap-1"><Icon name="check" size={12} style={{color:'hsl(158 56% 45%)'}}/>Free cancel 24 jam</span>
                <span className="row gap-1"><Icon name="check" size={12} style={{color:'hsl(158 56% 45%)'}}/>Asuransi all-risk</span>
                <span className="row gap-1"><Icon name="check" size={12} style={{color:'hsl(158 56% 45%)'}}/>Antar-jemput bandara</span>
              </div>
            </div>
            <div style={{
              borderRadius:18, overflow:'hidden',
              background:'linear-gradient(135deg, hsl(188 50% 40%), hsl(195 65% 28%))',
              padding:28, color:'white', position:'relative', minHeight:280,
            }}>
              <div style={{fontSize:11, opacity:0.8, letterSpacing:'0.06em', textTransform:'uppercase'}}>Special bulan ini</div>
              <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:24, fontWeight:600, marginTop:6, lineHeight:1.2}}>
                Diskon 15% sewa<br/>min. 3 hari
              </div>
              <div style={{fontSize:12, opacity:0.85, marginTop:8}}>Berlaku untuk semua kategori City Car & MPV. Booking sebelum 31 Mei.</div>
              <div style={{position:'absolute', right:24, bottom:24, opacity:0.35}}>
                <Icon name="car" size={120}/>
              </div>
            </div>
          </div>

          {/* Search bar */}
          <div className="cw-search" style={{marginBottom:28}}>
            <div>
              <div style={{fontSize:10, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', marginBottom:3}}>Pickup Location</div>
              <div className="row gap-2" style={{fontSize:13}}><Icon name="pin" size={14}/>Bandara Ngurah Rai</div>
            </div>
            <div>
              <div style={{fontSize:10, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', marginBottom:3}}>Mulai</div>
              <div style={{fontSize:13}} className="mono">22 Mei · 10:00</div>
            </div>
            <div>
              <div style={{fontSize:10, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', marginBottom:3}}>Selesai</div>
              <div style={{fontSize:13}} className="mono">25 Mei · 10:00</div>
            </div>
            <div>
              <div style={{fontSize:10, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', marginBottom:3}}>Layanan</div>
              <div style={{fontSize:13}}>Self-Drive</div>
            </div>
            <Btn icon="search" tone="primary">Cari</Btn>
          </div>

          {/* Trust badges */}
          <div className="row gap-4" style={{marginBottom:28, justifyContent:'center', flexWrap:'wrap'}}>
            {[
              { ic:'star',   v:'4.9 / 5.0', l:'Google Reviews' },
              { ic:'users',  v:'2,400+',    l:'Customer Puas' },
              { ic:'car',    v:'38',         l:'Armada Terawat' },
              { ic:'shield', v:'100%',       l:'Asuransi All-Risk' },
            ].map((t, i) => (
              <div key={i} style={{textAlign:'center', minWidth:120}}>
                <div className="row gap-2" style={{justifyContent:'center', alignItems:'baseline', marginBottom:2}}>
                  <Icon name={t.ic} size={14} style={{color:'hsl(28 78% 52%)'}}/>
                  <span style={{fontFamily:'Fraunces, Georgia, serif', fontSize:18, fontWeight:600}}>{t.v}</span>
                </div>
                <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{t.l}</div>
              </div>
            ))}
          </div>

          {/* Customer status card (jika logged in) */}
          <div className="cw-status-card" style={{marginBottom:28}}>
            <div className="veh-thumb mpv" style={{width:96, height:64}}>
              <Icon name="car" size={42}/>
            </div>
            <div>
              <div style={{fontSize:10, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:3}}>Sewa Aktif Anda</div>
              <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:18, fontWeight:600, marginBottom:2}}>Toyota Avanza Veloz</div>
              <div className="row gap-2" style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>
                <span className="mono">BKG-30231</span><span>·</span>
                <span>21 Mei — 23 Mei 2026</span><span>·</span>
                <Pill tone="warn" dot>Hari ke-1 dari 3</Pill>
              </div>
            </div>
            <Btn icon="navigation" tone="primary">Lacak Mobil</Btn>
          </div>

          {/* Armada showcase */}
          <div className="row between" style={{marginBottom:14, alignItems:'baseline'}}>
            <div>
              <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:20, fontWeight:600}}>Armada Tersedia Hari Ini</div>
              <div style={{fontSize:12.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>Dari City Car ekonomis sampai Alphard premium</div>
            </div>
            <a style={{fontSize:12.5, color:'hsl(188 60% 35%)', fontWeight:600}}>Lihat semua →</a>
          </div>
          <div className="cw-veh-grid">
            {showcase.map(v => (
              <div key={v.id} style={{border:'1px solid hsl(var(--border))', borderRadius:12, overflow:'hidden', background:'hsl(var(--card))'}}>
                <div className={`veh-thumb ${v.tipe}`} style={{height:120, borderRadius:0, borderBottom:'1px solid hsl(var(--border))'}}>
                  <Icon name="car" size={64}/>
                </div>
                <div style={{padding:12}}>
                  <div style={{fontSize:13, fontWeight:600}}>{v.merk} {v.model}</div>
                  <div className="row gap-2" style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:3, marginBottom:8}}>
                    <span>{v.trans === 'matic' ? 'Matic' : 'Manual'}</span><span>·</span>
                    <span>{v.seat} kursi</span><span>·</span>
                    <span>{v.bbm}</span>
                  </div>
                  <div className="row between" style={{alignItems:'baseline'}}>
                    <div>
                      <span style={{fontFamily:'Fraunces, Georgia, serif', fontSize:15, fontWeight:600}}>{rupiah(v.tarif, {compact:true})}</span>
                      <span style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}> /hari</span>
                    </div>
                    <Btn tone="primary" size="sm">Pesan</Btn>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Footer mock */}
          <div style={{marginTop:36, paddingTop:18, borderTop:'1px solid hsl(var(--border))', display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:24, fontSize:12, color:'hsl(var(--muted-foreground))'}}>
            <div>
              <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:14, color:'hsl(var(--foreground))', fontWeight:600, marginBottom:6}}>Bali Drive Rentcar</div>
              <div>Jl. Sunset Road No.88, Kuta · Bali 80361</div>
              <div className="mono" style={{marginTop:4}}>+62 813-3344-5566 · cs@balidriverentcar.com</div>
            </div>
            <div>
              <div style={{fontWeight:600, color:'hsl(var(--foreground))', marginBottom:6}}>Layanan</div>
              <div>Self-Drive<br/>With-Driver<br/>Airport Transfer<br/>Tour Package</div>
            </div>
            <div>
              <div style={{fontWeight:600, color:'hsl(var(--foreground))', marginBottom:6}}>Cabang</div>
              <div>Denpasar (HQ)<br/>Kuta<br/>Ubud</div>
            </div>
            <div>
              <div style={{fontWeight:600, color:'hsl(var(--foreground))', marginBottom:6}}>Ikuti Kami</div>
              <div>Instagram<br/>TikTok<br/>WhatsApp<br/>Google Maps</div>
            </div>
          </div>
        </div>
      </div>

      {/* Features summary */}
      <Card style={{marginTop:24}}>
        <div style={{padding:18}}>
          <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:16, fontWeight:600, marginBottom:14}}>Fitur Customer Web</div>
          <div className="grid-4" style={{gap:14}}>
            {[
              { ic:'search',     t:'Real-Time Availability', d:'Cek mobil tersedia per tanggal & cabang' },
              { ic:'receipt',    t:'Booking Online',         d:'Bayar via QRIS, transfer, atau kartu kredit' },
              { ic:'navigation', t:'Live Tracking',          d:'Tamu bisa share lokasi mobil ke keluarga' },
              { ic:'whatsapp',   t:'CS WhatsApp 24/7',       d:'Chat langsung dengan tim Denpasar' },
            ].map((f, i) => (
              <div key={i} style={{padding:14, background:'hsl(195 36% 97%)', borderRadius:12, border:'1px solid hsl(var(--border))'}}>
                <div style={{
                  width:36, height:36, borderRadius:10,
                  background:'linear-gradient(135deg, hsl(188 60% 50%), hsl(195 60% 40%))',
                  color:'white', display:'grid', placeItems:'center', marginBottom:10,
                }}><Icon name={f.ic} size={18}/></div>
                <div style={{fontSize:13.5, fontWeight:600, marginBottom:3}}>{f.t}</div>
                <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>{f.d}</div>
              </div>
            ))}
          </div>
        </div>
      </Card>
    </div>
  );
}

window.CustomerWeb = CustomerWeb;