// Bengkel public web — browser frame
function BengkelWebPage({ role }) {
  return (
    <div>
      <PageHeader
        eyebrow="Marketing"
        title="Website Bengkel"
        subtitle="bengkelmitra.id — landing page untuk pelanggan baru, booking online, lokasi 3 cabang"
      />

      <div style={{background:'hsl(var(--muted))', borderRadius:14, padding:14, boxShadow:'0 12px 30px hsl(var(--accent) / 0.1)'}}>
        {/* Browser chrome */}
        <div style={{display:'flex', alignItems:'center', gap:8, padding:'0 8px 10px'}}>
          <div style={{width:11, height:11, borderRadius:6, background:'#ff5f57'}} />
          <div style={{width:11, height:11, borderRadius:6, background:'#febc2e'}} />
          <div style={{width:11, height:11, borderRadius:6, background:'#28c840'}} />
          <div style={{flex:1, background:'hsl(var(--card))', borderRadius:6, padding:'5px 12px', fontSize:11, color:'hsl(var(--muted-foreground))', fontFamily:'monospace'}}>🔒 bengkelmitra.id</div>
        </div>

        <div style={{background:'hsl(var(--background))', borderRadius:10, overflow:'hidden'}}>
          {/* Header */}
          <div style={{padding:'14px 24px', borderBottom:'1px solid hsl(var(--border))', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <div className="row gap-2" style={{alignItems:'center'}}>
              <div style={{width:32, height:32, borderRadius:8, background:'hsl(var(--accent))', color:'white', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontFamily:'Fraunces, Georgia, serif'}}>BMS</div>
              <div>
                <div style={{fontWeight:700, fontFamily:'Fraunces, Georgia, serif'}}>Bengkel Mitra Sejahtera</div>
                <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>Sejak 2014 · 3 Cabang Jakarta</div>
              </div>
            </div>
            <div className="row gap-3" style={{fontSize:12, fontWeight:600, alignItems:'center'}}>
              <span>Layanan</span>
              <span>Lokasi</span>
              <span>Booking</span>
              <button style={{padding:'7px 14px', background:'hsl(var(--accent))', color:'white', border:'none', borderRadius:7, fontSize:12, fontWeight:650, cursor:'pointer'}}>Booking Sekarang</button>
            </div>
          </div>

          {/* Hero */}
          <div style={{padding:'40px 24px', background:'linear-gradient(135deg, hsl(var(--accent) / 0.08) 0%, hsl(180 50% 50% / 0.05) 100%)', textAlign:'center'}}>
            <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:1, fontWeight:600, marginBottom:8}}>Bengkel umum modern · all merk</div>
            <h1 style={{fontFamily:'Fraunces, Georgia, serif', fontSize:36, fontWeight:650, margin:'0 0 10px', lineHeight:1.15}}>Servis kendaraan,<br/>transparan dari awal sampai akhir.</h1>
            <p style={{fontSize:14, color:'hsl(var(--muted-foreground))', maxWidth:520, margin:'0 auto 18px', lineHeight:1.55}}>Booking online, lihat progress real-time, terima foto before/after via aplikasi. Dapatkan reminder otomatis saat saatnya servis berikutnya.</p>
            <div className="row gap-2" style={{justifyContent:'center'}}>
              <button style={{padding:'10px 20px', background:'hsl(var(--accent))', color:'white', border:'none', borderRadius:8, fontSize:13, fontWeight:650, cursor:'pointer'}}>Booking Servis Online</button>
              <button style={{padding:'10px 20px', background:'transparent', color:'hsl(var(--accent))', border:'1px solid hsl(var(--accent))', borderRadius:8, fontSize:13, fontWeight:650, cursor:'pointer'}}>Hubungi WhatsApp</button>
            </div>
          </div>

          {/* Layanan */}
          <div style={{padding:'28px 24px'}}>
            <div style={{textAlign:'center', marginBottom:18}}>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:1, fontWeight:600, marginBottom:5}}>Layanan</div>
              <h2 style={{fontFamily:'Fraunces, Georgia, serif', fontSize:22, fontWeight:650, margin:0}}>Servis lengkap untuk kendaraan harian Anda</h2>
            </div>
            <div className="grid" style={{gridTemplateColumns:'repeat(4, 1fr)', gap:12}}>
              {[
                { ic:'oil', l:'Servis Berkala', d:'Ganti oli + filter sesuai interval pabrik' },
                { ic:'brakeDisc', l:'Rem & Kaki-kaki', d:'Kampas rem, spooring, balancing' },
                { ic:'ac', l:'Service AC', d:'Cek freon, kompresor, evaporator' },
                { ic:'engine', l:'Tune Up & Mesin', d:'Diagnosa, busi, throttle body' },
              ].map(svc => (
                <Card key={svc.l} style={{padding:14, textAlign:'center'}}>
                  <div style={{width:44, height:44, margin:'0 auto 8px', borderRadius:10, background:'hsl(var(--accent) / 0.12)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                    <Icon name={svc.ic} size={22} color="hsl(var(--accent))" />
                  </div>
                  <div style={{fontFamily:'Fraunces, Georgia, serif', fontWeight:650, fontSize:13, marginBottom:3}}>{svc.l}</div>
                  <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', lineHeight:1.4}}>{svc.d}</div>
                </Card>
              ))}
            </div>
          </div>

          {/* Lokasi */}
          <div style={{padding:'28px 24px', background:'hsl(var(--muted) / 0.4)'}}>
            <div style={{textAlign:'center', marginBottom:18}}>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:1, fontWeight:600, marginBottom:5}}>Lokasi</div>
              <h2 style={{fontFamily:'Fraunces, Georgia, serif', fontSize:22, fontWeight:650, margin:0}}>3 cabang melayani Jabodetabek</h2>
            </div>
            <div className="grid" style={{gridTemplateColumns:'repeat(3, 1fr)', gap:12}}>
              {CABANG.map(c => (
                <Card key={c.id} style={{padding:14}}>
                  <div style={{fontFamily:'Fraunces, Georgia, serif', fontWeight:650, fontSize:14, marginBottom:4}}>{c.name}</div>
                  <div style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginBottom:8, lineHeight:1.45}}>{c.addr}</div>
                  <div className="row gap-3" style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginBottom:8}}>
                    <span><strong>{c.bay}</strong> bay servis</span>
                    <span>Kepala: {c.head?.replace('Pak ', '')}</span>
                  </div>
                  <button style={{padding:'6px 12px', background:'hsl(var(--accent) / 0.1)', color:'hsl(var(--accent))', border:'1px solid hsl(var(--accent) / 0.3)', borderRadius:6, fontSize:12, fontWeight:600, cursor:'pointer'}}>📍 Buka Peta</button>
                </Card>
              ))}
            </div>
          </div>

          {/* Footer */}
          <div style={{padding:'18px 24px', borderTop:'1px solid hsl(var(--border))', display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:11, color:'hsl(var(--muted-foreground))'}}>
            <span>© 2026 Bengkel Mitra Sejahtera · NPWP 02.654.987.1-024.000</span>
            <span>cs@bengkelmitra.id · +62 811-1900-4400</span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.BengkelWebPage = BengkelWebPage;