// directory.jsx — business directory + shared bottom sheets. Exported to window.

// ---------- generic bottom sheet ----------
function Sheet({ children, onClose, height = '72%' }) {
  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, zIndex: 80, display: 'flex', flexDirection: 'column',
      justifyContent: 'flex-end', background: 'rgba(15,23,42,0.42)', animation: 'gsFade 180ms var(--ease)' }}>
      <div onClick={e => e.stopPropagation()} style={{ height, background: 'var(--surface)',
        borderTopLeftRadius: 24, borderTopRightRadius: 24, boxShadow: 'var(--sh-up)', display: 'flex', flexDirection: 'column',
        overflow: 'hidden', animation: 'gsSheetUp 280ms var(--ease)' }}>
        <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 10, paddingBottom: 4, flexShrink: 0 }}>
          <span style={{ width: 40, height: 5, borderRadius: 5, background: 'var(--border-strong)' }} />
        </div>
        {children}
      </div>
    </div>
  );
}

function SheetAction({ icon, label, onClick, primary }) {
  return (
    <button onClick={onClick} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
      padding: '12px 4px', borderRadius: 'var(--r-md)', cursor: 'pointer', fontFamily: 'var(--font)',
      border: `1px solid ${primary ? 'var(--primary)' : 'var(--border)'}`, background: primary ? 'var(--primary)' : 'var(--surface)' }}>
      <Icon name={icon} size={20} color={primary ? '#fff' : 'var(--primary)'} />
      <span style={{ fontSize: 11.5, fontWeight: 700, color: primary ? '#fff' : 'var(--text-2)' }}>{label}</span>
    </button>
  );
}

// ---------- place detail sheet ----------
function PlaceSheet({ place, onClose }) {
  const dc = DIR_CATS.find(d => d.key === place.cat) || DIR_CATS[0];
  return (
    <Sheet onClose={onClose} height="76%">
      <div style={{ flex: 1, overflowY: 'auto', scrollbarWidth: 'none' }}>
        <div style={{ position: 'relative', height: 200 }}>
          <image-slot id={'sheet-' + place.slot} shape="rect" fit="cover" placeholder="Foto tempat"
            style={{ display: 'block', width: '100%', height: '100%', background: `color-mix(in srgb, ${place.color} 16%, var(--surface))` }}></image-slot>
          <button onClick={onClose} style={{ position: 'absolute', top: 12, right: 12, width: 34, height: 34, borderRadius: '50%',
            border: 'none', background: 'rgba(255,255,255,0.92)', display: 'grid', placeItems: 'center', cursor: 'pointer', backdropFilter: 'blur(4px)' }}>
            <Icon name="x" size={18} color="var(--s-900)" />
          </button>
          {place.openNow
            ? <span className="mono" style={{ position: 'absolute', left: 16, bottom: 14, padding: '4px 10px', borderRadius: 'var(--r-chip)', background: 'var(--lime)', color: '#fff', fontSize: 11, fontWeight: 700, letterSpacing: '0.05em' }}>BUKA</span>
            : <span className="mono" style={{ position: 'absolute', left: 16, bottom: 14, padding: '4px 10px', borderRadius: 'var(--r-chip)', background: 'var(--s-500)', color: '#fff', fontSize: 11, fontWeight: 700, letterSpacing: '0.05em' }}>TUTUP</span>}
        </div>
        <div style={{ padding: '18px 20px 12px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 7 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: dc.color }} />
            <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--text-2)' }}>{dc.label}</span>
            {place.sponsored && <span className="mono" style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px', borderRadius: 'var(--r-chip)', background: 'var(--amber-50)', color: 'var(--amber-700)', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.06em' }}><Icon name="sponsor" size={11} color="var(--amber)" /> FEATURED</span>}
          </div>
          <h2 style={{ fontSize: 22, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.02em', marginBottom: 8 }}>{place.name}</h2>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 14, fontWeight: 700, color: 'var(--text-1)' }}>
              <Icon name="star" size={16} color="var(--amber)" /> {place.rating}
              <span className="mono" style={{ fontWeight: 500, color: 'var(--text-3)', fontSize: 12.5 }}>({place.reviews})</span>
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 13, color: 'var(--text-2)' }}>
              <Icon name="pin" size={14} color="var(--text-3)" /> {place.area}
            </span>
          </div>
          <p style={{ fontSize: 14, color: 'var(--text-2)', marginTop: 10, lineHeight: 1.5 }}>{place.tagline}</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 1, padding: '0 20px', marginBottom: 6 }}>
          {[['clock', 'Jam buka', place.hours], ['phone', 'Telepon', place.phone], ['pin', 'Alamat', place.area + ', Gading Serpong']].map(([ic, k, v]) => (
            <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 0', borderBottom: '1px solid var(--border)' }}>
              <Icon name={ic} size={18} color="var(--text-3)" />
              <span style={{ fontSize: 13, color: 'var(--text-3)', width: 78 }}>{k}</span>
              <span className={ic === 'phone' ? 'mono' : ''} style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--text-1)', flex: 1 }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding: '12px 20px', paddingBottom: 26, borderTop: '1px solid var(--border)', background: 'var(--surface)' }}>
        <div style={{ display: 'flex', gap: 9 }}>
          <SheetAction icon="map" label="Peta" />
          <SheetAction icon="phone" label="Telepon" />
          <SheetAction icon="globe" label="Website" />
          <SheetAction icon="heart" label="Simpan" />
        </div>
      </div>
    </Sheet>
  );
}

// ---------- report detail sheet ----------
function CommentsSection({ reportId, authed, onRequireAuth }) {
  const [list, setList] = React.useState(null);
  const [body, setBody] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const load = React.useCallback(() => { gsData.loadComments(reportId).then(setList); }, [reportId]);
  React.useEffect(() => { load(); }, [load]);
  const send = async () => {
    if (!authed) { onRequireAuth && onRequireAuth(); return; }
    if (!body.trim() || busy) return;
    setBusy(true);
    const res = await gsData.addComment(reportId, body.trim());
    setBusy(false);
    if (!res || !res.error) { setBody(''); load(); }
  };
  return (
    <div style={{ marginTop: 4 }}>
      <h4 style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--text-2)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 12 }}>
        Diskusi {list ? '(' + list.length + ')' : ''}
      </h4>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 14 }}>
        {list === null && <div style={{ fontSize: 13, color: 'var(--text-3)' }}>Memuat...</div>}
        {list && list.length === 0 && <div style={{ fontSize: 13, color: 'var(--text-3)' }}>Belum ada komentar. Mulai diskusi.</div>}
        {list && list.map(cm => (
          <div key={cm.id} style={{ display: 'flex', gap: 10 }}>
            <span style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--blue)', display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 700, fontSize: 12, flexShrink: 0 }}>{(cm.author || 'W')[0].toUpperCase()}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)' }}>{cm.author}</span>
                <span className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)' }}>{cm.time}</span>
              </div>
              <div style={{ fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.45 }}>{cm.body}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <input value={body} onChange={e => setBody(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') send(); }}
          placeholder={authed ? "Tulis komentar..." : "Masuk untuk berkomentar"} onFocus={() => { if (!authed && onRequireAuth) onRequireAuth(); }} style={{ flex: 1, padding: '11px 14px', borderRadius: 'var(--r-chip)', border: '1px solid var(--border)', background: 'var(--surface-2)', fontFamily: 'var(--font)', fontSize: 13.5, color: 'var(--text-1)', outline: 'none' }} />
        <button onClick={send} disabled={busy} style={{ width: 42, height: 42, borderRadius: '50%', border: 'none', cursor: 'pointer', background: 'var(--primary)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
          <Icon name="send" size={18} color="#fff" />
        </button>
      </div>
    </div>
  );
}

function ReportDetailSheet({ report, onClose, myUps = {}, onUp, authed, onRequireAuth }) {
  const c = CATS[report.cat] || CATS.lainnya;
  const upActive = !!myUps[report.id];
  const tl = {
    open: [['Dilaporkan', report.time, true], ['Ditinjau pengurus', 'menunggu', false]],
    proses: [['Dilaporkan', report.time, true], ['Diterima pengurus', 'aktif', true], ['Sedang ditangani', 'aktif', true], ['Selesai', 'menunggu', false]],
    selesai: [['Dilaporkan', report.time, true], ['Ditangani', 'selesai', true], ['Selesai', 'beres', true]],
  }[report.status];
  return (
    <Sheet onClose={onClose} height="90%">
      <div style={{ flex: 1, overflowY: 'auto', scrollbarWidth: 'none' }}>
        {report.photo && report.photo_url && (
          <div style={{ position: 'relative', height: 196 }}>
            <img src={report.photo_url} alt="" style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
        )}
        <div style={{ padding: '16px 20px 0', position: 'relative' }}>
          <button onClick={onClose} style={{ position: 'absolute', top: -2, right: 16, width: 34, height: 34, borderRadius: '50%',
            border: 'none', background: 'var(--surface-2)', display: 'grid', placeItems: 'center', cursor: 'pointer' }}>
            <Icon name="x" size={18} color="var(--text-1)" />
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 11px', borderRadius: 'var(--r-chip)', background: c.soft, color: c.color, fontSize: 12, fontWeight: 700 }}>
              <Icon name={c.icon} size={14} color={c.color} /> {c.label}
            </span>
            <StatusChip status={report.status} />
          </div>
          <h2 style={{ fontSize: 20, fontWeight: 800, color: 'var(--text-1)', lineHeight: 1.25, letterSpacing: '-0.02em', marginBottom: 10 }}>{report.title}</h2>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--text-2)', marginBottom: 16, flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon name="pin" size={14} color="var(--text-3)" /> {report.area}</span>
            <span className="mono" style={{ color: 'var(--text-3)' }}>· {report.time}</span>
          </div>
          {report.desc && <p style={{ fontSize: 14.5, color: 'var(--text-2)', lineHeight: 1.6, marginBottom: 16 }}>{report.desc}</p>}

          {report.instagram_url && (
            <a href={report.instagram_url} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 14px', borderRadius: 'var(--r-chip)', border: '1px solid var(--border)', background: 'var(--surface-2)', color: 'var(--violet)', fontWeight: 700, fontSize: 13, textDecoration: 'none', marginBottom: 16 }}>
              <Icon name="globe" size={16} color="var(--violet)" /> Lihat di Instagram
            </a>
          )}

          <div style={{ height: 130, borderRadius: 'var(--r-card)', overflow: 'hidden', border: '1px solid var(--border)', marginBottom: 20, position: 'relative' }}>
            <GsMap reports={[report]} selectedId={report.id} dark={false} />
          </div>

          <div style={{ marginBottom: 18 }}>
            <h4 style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--text-2)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 12 }}>Status</h4>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {tl.map(([label, sub, done], i) => (
                <div key={label} style={{ display: 'flex', gap: 12 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <span style={{ width: 16, height: 16, borderRadius: '50%', background: done ? c.color : 'var(--surface)', border: `2px solid ${done ? c.color : 'var(--border-strong)'}`, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                      {done && <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#fff' }} />}
                    </span>
                    {i < tl.length - 1 && <span style={{ width: 2, flex: 1, minHeight: 20, background: done ? c.color : 'var(--border)' }} />}
                  </div>
                  <div style={{ paddingBottom: 14 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 700, color: done ? 'var(--text-1)' : 'var(--text-3)' }}>{label}</div>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>{sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', borderRadius: 'var(--r-md)', background: 'var(--surface-2)', marginBottom: 18 }}>
            <span style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--blue)', display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 700, fontSize: 13 }}>
              {report.anon ? '?' : (report.reporter || 'W').slice(0, 1)}
            </span>
            <div>
              <div style={{ fontSize: 12, color: 'var(--text-3)' }}>Dilaporkan oleh</div>
              <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--text-1)' }}>{report.reporter}</div>
            </div>
          </div>

          <CommentsSection reportId={report.id} authed={authed} onRequireAuth={onRequireAuth} />
          <div style={{ height: 12 }} />
        </div>
      </div>
      <div style={{ display: 'flex', gap: 10, padding: '12px 20px', paddingBottom: 'max(20px, env(safe-area-inset-bottom))', borderTop: '1px solid var(--border)', background: 'var(--surface)' }}>
        <span onClick={() => onUp && onUp(report.id)}><Upvote count={report.up} active={upActive} /></span>
        <div style={{ flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7, padding: '12px', borderRadius: 'var(--r-chip)',
          border: '1px solid var(--border)', background: 'var(--surface)', color: 'var(--text-2)', fontFamily: 'var(--font)', fontWeight: 700, fontSize: 13 }}>
          <Icon name="send" size={16} color="var(--text-3)" /> {report.comments} komentar
        </div>
      </div>
    </Sheet>
  );
}

// ---------- sponsor banner ----------
function SponsorBanner({ places = [] }) {
  const sponsors = places.filter(p => p.sponsored);
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI(v => (v + 1) % sponsors.length), 4200);
    return () => clearInterval(id);
  }, [sponsors.length]);
  if (!sponsors.length) return null;
  const s = sponsors[i];
  return (
    <div style={{ position: 'relative', height: 132, borderRadius: 'var(--r-card)', overflow: 'hidden', boxShadow: 'var(--sh-1)', border: '1px solid var(--border)' }}>
      <image-slot id={'spon-' + s.slot} shape="rect" fit="cover" placeholder="Foto sponsor"
        style={{ display: 'block', width: '100%', height: '100%', background: `color-mix(in srgb, ${s.color} 22%, var(--surface))` }}></image-slot>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(15,23,42,0.82) 0%, rgba(15,23,42,0.4) 55%, transparent 100%)', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 18px' }}>
        <span className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, alignSelf: 'flex-start', padding: '3px 8px', borderRadius: 'var(--r-chip)', background: 'rgba(255,255,255,0.18)', color: '#FFD9DB', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', marginBottom: 8, backdropFilter: 'blur(4px)' }}>
          <Icon name="sponsor" size={11} color="#FFC9A8" /> SPONSORED
        </span>
        <div style={{ fontSize: 19, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', marginBottom: 3 }}>{s.name}</div>
        <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.85)', marginBottom: 11, maxWidth: '70%' }}>{s.tagline}</div>
        <span style={{ alignSelf: 'flex-start', padding: '7px 14px', borderRadius: 'var(--r-chip)', background: 'var(--cta)', color: '#fff', fontSize: 12.5, fontWeight: 700 }}>Lihat Tempat</span>
      </div>
      <div style={{ position: 'absolute', bottom: 10, right: 14, display: 'flex', gap: 5 }}>
        {sponsors.map((_, j) => <span key={j} style={{ width: j === i ? 16 : 6, height: 6, borderRadius: 3, background: j === i ? '#fff' : 'rgba(255,255,255,0.5)', transition: 'width var(--dur) var(--ease)' }} />)}
      </div>
    </div>
  );
}

// ---------- directory screen ----------
function Directory({ dark, openPlace, t, places = [] }) {
  const [cat, setCat] = React.useState('all');
  const [view, setView] = React.useState('grid');
  const shown = (t.showSponsored ? places : places.filter(p => !p.sponsored))
    .filter(p => cat === 'all' || p.cat === cat);

  return (
    <div style={{ height: '100%', overflowY: 'auto', background: 'var(--bg)', scrollbarWidth: 'none' }}>
      <div style={{ paddingTop: SAFE_TOP, background: 'var(--surface)', borderBottom: '1px solid var(--border)' }}>
        <div style={{ padding: '8px 20px 14px' }}>
          <h2 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.03em', color: 'var(--text-1)', marginBottom: 13 }}>Direktori</h2>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', borderRadius: 'var(--r-card)', background: 'var(--surface-2)', border: '1px solid var(--border)' }}>
            <Icon name="search" size={19} color="var(--text-3)" />
            <input placeholder="Cari resto, salon, apotek..." style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font)', fontSize: 14, fontWeight: 500, color: 'var(--text-1)' }} />
            <Icon name="mic" size={18} color="var(--primary)" />
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, overflowX: 'auto', padding: '0 20px 14px', scrollbarWidth: 'none' }}>
          <Pill active={cat === 'all'} onClick={() => setCat('all')}>Semua</Pill>
          {DIR_CATS.map(d => (
            <Pill key={d.key} active={cat === d.key} onClick={() => setCat(d.key)} color={d.color}>
              <Icon name={d.icon} size={15} color={cat === d.key ? '#fff' : d.color} /> {d.label}
            </Pill>
          ))}
        </div>
      </div>

      {places.some(p => p.sponsored) && (
        <div style={{ padding: '16px 20px 0' }}>
          <SponsorBanner places={places} />
        </div>
      )}

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 20px 12px' }}>
        <span style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--text-2)' }}><span className="mono">{shown.length}</span> tempat</span>
        <div style={{ display: 'flex', gap: 4, padding: 3, borderRadius: 'var(--r-chip)', background: 'var(--surface-2)', border: '1px solid var(--border)' }}>
          {['grid', 'list'].map(v => (
            <button key={v} onClick={() => setView(v)} style={{ display: 'grid', placeItems: 'center', width: 30, height: 26, borderRadius: 'var(--r-chip)', border: 'none', cursor: 'pointer', background: view === v ? 'var(--surface)' : 'transparent', boxShadow: view === v ? 'var(--sh-1)' : 'none' }}>
              <Icon name={v === 'grid' ? 'grid' : 'mega'} size={15} color={view === v ? 'var(--primary)' : 'var(--text-3)'} sw={v === 'grid' ? 2 : 2} />
            </button>
          ))}
        </div>
      </div>

      {view === 'grid' ? (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 13, padding: '0 20px' }}>
          {shown.length === 0 ? (<div style={{ gridColumn: '1 / -1', padding: '28px 16px', textAlign: 'center', color: 'var(--text-3)', fontSize: 13.5 }}>Direktori bisnis segera hadir.</div>) : shown.map(p => <PlaceCard key={p.id} place={p} onOpen={openPlace} />)}
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 11, padding: '0 20px' }}>
          {shown.map(p => <PlaceRow key={p.id} place={p} onOpen={openPlace} />)}
        </div>
      )}
      <div style={{ height: 96 }} />
    </div>
  );
}

function PlaceRow({ place, onOpen }) {
  const dc = DIR_CATS.find(d => d.key === place.cat) || DIR_CATS[0];
  return (
    <button onClick={() => onOpen(place)} style={{ display: 'flex', gap: 12, padding: 11, textAlign: 'left', cursor: 'pointer',
      background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-card)', boxShadow: 'var(--sh-1)', fontFamily: 'var(--font)', alignItems: 'center' }}>
      <image-slot id={'row-' + place.slot} shape="rounded" radius="12" placeholder="Foto"
        style={{ display: 'block', width: 76, height: 76, flexShrink: 0, background: `color-mix(in srgb, ${place.color} 16%, var(--surface))` }}></image-slot>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: dc.color }} />
          <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-2)' }}>{dc.label}</span>
        </div>
        <div style={{ fontSize: 15, fontWeight: 800, color: 'var(--text-1)', marginBottom: 4 }}>{place.name}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 12 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontWeight: 700, color: 'var(--text-1)' }}><Icon name="star" size={12} color="var(--amber)" /> {place.rating}</span>
          <span className="mono" style={{ color: 'var(--text-3)' }}>{place.dist}</span>
          <span className="mono" style={{ padding: '2px 7px', borderRadius: 'var(--r-chip)', background: place.openNow ? 'var(--lime-50)' : 'var(--surface-2)', color: place.openNow ? 'var(--lime-700)' : 'var(--text-3)', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.04em' }}>{place.openNow ? 'BUKA' : 'TUTUP'}</span>
        </div>
      </div>
      <Icon name="chevR" size={18} color="var(--text-3)" />
    </button>
  );
}

Object.assign(window, { Directory, PlaceSheet, ReportDetailSheet, SponsorBanner, PlaceRow, Sheet, CommentsSection });
