// Clinics list + Clinic detail + Services compare

function ClinicsList() {
  const { t } = useTheme();
  const s = useStyles();
  const { route, navigate } = useRouter();
  const [query, setQuery] = React.useState(route.params.q || '');
  const [district, setDistrict] = React.useState(route.params.district || 'Tất cả');
  const [services, setServices] = React.useState([]);
  const [minRating, setMinRating] = React.useState(0);
  const [sort, setSort] = React.useState('rating');

  const filtered = React.useMemo(() => {
    let list = CLINICS.slice();
    if (query) {
      const q = query.toLowerCase();
      list = list.filter(c => c.name.toLowerCase().includes(q) || c.address.toLowerCase().includes(q) || c.services.some(s => s.toLowerCase().includes(q)));
    }
    if (district !== 'Tất cả') list = list.filter(c => c.district === district);
    if (services.length) list = list.filter(c => services.some(s => c.services.includes(s)));
    if (minRating) list = list.filter(c => c.rating >= minRating);
    if (sort === 'rating') list.sort((a, b) => b.rating - a.rating);
    else if (sort === 'reviews') list.sort((a, b) => b.reviews - a.reviews);
    return list;
  }, [query, district, services, minRating, sort]);

  const toggleService = (sv) => setServices(prev => prev.includes(sv) ? prev.filter(x => x !== sv) : [...prev, sv]);

  return (
    <div>
      <div style={{ padding: '24px 32px 20px', borderBottom: `1px solid ${t.border}`, background: '#fff' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <div style={{ fontSize: 12, color: t.textMuted, marginBottom: 8 }}><a onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>Trang chủ</a> / <span style={{ color: t.text }}>Phòng khám{district !== 'Tất cả' && ` tại ${district}`}</span></div>
          <h1 style={{ fontSize: 28, fontWeight: 700, margin: 0, color: t.primary, letterSpacing: -0.5 }}>Phòng khám nha khoa {district !== 'Tất cả' && `tại Q. ${district}`}</h1>
          <div style={{ fontSize: 13, color: t.textMuted, marginTop: 4 }}>Tìm thấy <b style={{ color: t.text }}>{filtered.length} phòng khám</b> · Đã thẩm định bởi Hội đồng Biên tập</div>
        </div>
      </div>

      <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '260px 1fr', gap: 0 }}>
        <aside style={{ padding: '24px 20px', borderRight: `1px solid ${t.border}`, background: '#fff', minHeight: 600 }}>
          <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 14, color: t.primary, display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon.Filter size={13}/> Bộ lọc
          </div>
          <div style={{ marginBottom: 22 }}>
            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, color: t.textMuted, marginBottom: 8 }}>Khu vực</div>
            {DISTRICTS.map(d => (
              <label key={d} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0', fontSize: 13, cursor: 'pointer' }}>
                <input type="radio" name="district" checked={d === district} onChange={() => setDistrict(d)} style={{ accentColor: t.primary }}/>
                {d}
              </label>
            ))}
          </div>
          <div style={{ marginBottom: 22 }}>
            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, color: t.textMuted, marginBottom: 8 }}>Dịch vụ</div>
            {['Niềng răng', 'Implant', 'Tẩy trắng', 'Bọc sứ', 'Nhổ răng khôn', 'Trám răng'].map(sv => (
              <label key={sv} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0', fontSize: 13, cursor: 'pointer' }}>
                <input type="checkbox" checked={services.includes(sv)} onChange={() => toggleService(sv)} style={{ accentColor: t.primary }}/>
                {sv}
              </label>
            ))}
          </div>
          <div style={{ marginBottom: 22 }}>
            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, color: t.textMuted, marginBottom: 8 }}>Đánh giá tối thiểu</div>
            {[0, 4, 4.5, 4.8].map(r => (
              <label key={r} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0', fontSize: 13, cursor: 'pointer' }}>
                <input type="radio" name="rating" checked={r === minRating} onChange={() => setMinRating(r)} style={{ accentColor: t.primary }}/>
                {r === 0 ? 'Tất cả' : <><StarRow rating={r} size={11}/> <span style={{ fontSize: 11, color: t.textMuted }}>{r}+</span></>}
              </label>
            ))}
          </div>
          <button onClick={() => { setQuery(''); setDistrict('Tất cả'); setServices([]); setMinRating(0); }} className="btn-ghost" style={{ ...s.btnGhost, width: '100%', padding: '8px 12px', fontSize: 12, justifyContent: 'center' }}>Đặt lại bộ lọc</button>
        </aside>

        <div style={{ padding: '24px 32px', background: t.surface }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16, alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            <div style={{ position: 'relative', flex: 1, maxWidth: 400 }}>
              <Icon.Search size={14} style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: t.textSubtle }}/>
              <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Tìm trong kết quả..." style={{ width: '100%', padding: '10px 14px 10px 36px', border: `1px solid ${t.border}`, borderRadius: t.radius, fontSize: 13, background: '#fff' }}/>
            </div>
            <div style={{ fontSize: 12, color: t.textMuted, display: 'flex', alignItems: 'center', gap: 6 }}>
              Sắp xếp:
              <select value={sort} onChange={e => setSort(e.target.value)} style={{ border: `1px solid ${t.border}`, borderRadius: 6, padding: '7px 10px', fontSize: 12, background: '#fff' }}>
                <option value="rating">Đánh giá cao nhất</option>
                <option value="reviews">Nhiều review nhất</option>
              </select>
            </div>
          </div>

          {filtered.length === 0 ? (
            <div style={{ background: '#fff', border: `1px solid ${t.border}`, borderRadius: t.radius, padding: 40, textAlign: 'center' }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: t.primary, marginBottom: 6 }}>Không tìm thấy phòng khám nào</div>
              <div style={{ fontSize: 13, color: t.textMuted }}>Thử điều chỉnh bộ lọc hoặc bỏ bớt điều kiện</div>
            </div>
          ) : filtered.map(c => <ClinicRow key={c.id} clinic={c}/>)}
        </div>
      </div>
    </div>
  );
}

function ClinicRow({ clinic }) {
  const { t } = useTheme();
  const s = useStyles();
  const { navigate } = useRouter();
  return (
    <div className="clinic-card" onClick={() => navigate(`/clinic/${clinic.id}`)} style={{ background: '#fff', border: `1px solid ${t.border}`, borderRadius: t.radius + 2, padding: 16, marginBottom: 12, display: 'grid', gridTemplateColumns: '200px 1fr auto', gap: 18 }}>
      <ImgPlaceholder hue={clinic.hue} sat={35} label={clinic.name.split(' ')[0]} style={{ borderRadius: t.radius, height: 150 }}/>
      <div>
        <div style={{ display: 'flex', gap: 6, marginBottom: 6 }}>
          {clinic.verified && <span style={{ fontSize: 10.5, padding: '2px 8px', background: t.mint, color: t.mintText, borderRadius: 10, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 3 }}><Icon.Shield size={9}/>Đã thẩm định</span>}
          <span style={{ fontSize: 10.5, padding: '2px 8px', background: t.blueLight, color: t.blue, borderRadius: 10, fontWeight: 600 }}>{clinic.years} năm</span>
        </div>
        <h3 style={{ fontSize: 18, fontWeight: 700, margin: '0 0 5px', color: t.primary }}>{clinic.name}</h3>
        <div style={{ fontSize: 12.5, color: t.textMuted, display: 'flex', alignItems: 'center', gap: 5, marginBottom: 8 }}>
          <Icon.MapPin size={12}/> {clinic.address}, Q. {clinic.district}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
          <StarRow rating={clinic.rating} size={13}/>
          <span style={{ fontSize: 13.5, fontWeight: 700, fontFamily: t.numFont }}>{clinic.rating}</span>
          <span style={{ fontSize: 12, color: t.textSubtle }}>({clinic.reviews.toLocaleString()} đánh giá)</span>
          <span style={{ color: t.border, margin: '0 4px' }}>·</span>
          <span style={{ fontSize: 12, color: t.textMuted, display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon.User size={11}/>{clinic.doctors} bác sĩ</span>
        </div>
        <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
          {clinic.services.map(sv => (
            <span key={sv} style={{ fontSize: 11, padding: '3px 9px', background: t.surface, borderRadius: 12, color: t.text, fontWeight: 500 }}>{sv}</span>
          ))}
        </div>
      </div>
      <div style={{ textAlign: 'right', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 10.5, color: t.textSubtle }}>Khám từ</div>
          <div style={{ fontSize: 22, fontWeight: 700, color: t.coral, fontFamily: t.numFont, letterSpacing: -0.3 }}>{clinic.price}</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <button className="btn-primary" onClick={(e) => { e.stopPropagation(); navigate(`/clinic/${clinic.id}`); }} style={{ ...s.btnPrimary, padding: '9px 18px', fontSize: 12.5, whiteSpace: 'nowrap', justifyContent: 'center' }}>Xem chi tiết</button>
          <button className="btn-ghost" onClick={(e) => { e.stopPropagation(); navigate(`/booking?clinic=${clinic.id}`); }} style={{ ...s.btnGhost, padding: '8px 18px', fontSize: 12.5, whiteSpace: 'nowrap', justifyContent: 'center' }}>Đặt lịch</button>
        </div>
      </div>
    </div>
  );
}

function ClinicDetail() {
  const { t } = useTheme();
  const s = useStyles();
  const { route, navigate } = useRouter();
  const id = route.path.split('/')[2];
  const c = CLINICS.find(x => x.id === id) || CLINICS[0];
  const [tab, setTab] = React.useState('overview');
  const [dayIdx, setDayIdx] = React.useState(1);
  const [timeSlot, setTimeSlot] = React.useState('10:30');
  return (
    <div>
      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '12px 32px 0' }}>
        <div style={{ fontSize: 12, color: t.textMuted }}><a onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>Trang chủ</a> / <a onClick={() => navigate('/clinics')} style={{ cursor: 'pointer' }}>Phòng khám</a> / <span style={{ color: t.text }}>{c.name}</span></div>
      </div>
      {/* Gallery */}
      <div style={{ maxWidth: 1400, margin: '12px auto 0', padding: '0 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 6, height: 320, borderRadius: t.radius + 2, overflow: 'hidden' }}>
          <ImgPlaceholder hue={c.hue} sat={30} label="Phòng chờ"/>
          <div style={{ display: 'grid', gap: 6 }}>
            <ImgPlaceholder hue={c.hue + 20} sat={30} label="Ghế điều trị"/>
            <ImgPlaceholder hue={c.hue - 20} sat={30} label="Trang thiết bị"/>
          </div>
          <div style={{ display: 'grid', gap: 6, position: 'relative' }}>
            <ImgPlaceholder hue={c.hue + 40} sat={30} label="Ngoại thất"/>
            <ImgPlaceholder hue={c.hue - 40} sat={30} label="Đội ngũ"/>
            <div style={{ position: 'absolute', bottom: 12, right: 12, background: 'rgba(255,255,255,.95)', padding: '6px 12px', borderRadius: 6, fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 5, cursor: 'pointer' }}>
              <Icon.Eye size={12}/> Xem 24 ảnh
            </div>
          </div>
        </div>
      </div>
      {/* Header info */}
      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '24px 32px', borderBottom: `1px solid ${t.border}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'start' }}>
          <div>
            <div style={{ display: 'flex', gap: 6, marginBottom: 10, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 10.5, padding: '3px 9px', background: t.mint, color: t.mintText, borderRadius: 10, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 3 }}><Icon.Shield size={10}/>Đã thẩm định</span>
              <span style={{ fontSize: 10.5, padding: '3px 9px', background: t.blueLight, color: t.blue, borderRadius: 10, fontWeight: 600 }}>{c.years} năm kinh nghiệm</span>
              <span style={{ fontSize: 10.5, padding: '3px 9px', background: t.yellow, color: '#8B6914', borderRadius: 10, fontWeight: 600 }}>Top 5 Phú Nhuận</span>
            </div>
            <h1 style={{ fontSize: 30, fontWeight: 800, margin: '0 0 8px', color: t.primary, letterSpacing: -0.6 }}>{c.name}</h1>
            <div style={{ display: 'flex', gap: 18, fontSize: 13, color: t.textMuted, alignItems: 'center', marginBottom: 14, flexWrap: 'wrap' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon.MapPin size={13}/>{c.address}, Q. {c.district}</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon.Clock size={13}/>Mở: 8:00 — 20:00</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon.Phone size={13}/>028 1234 5678</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ background: t.coral, color: '#fff', padding: '6px 12px', borderRadius: 6, fontSize: 20, fontWeight: 800, fontFamily: t.numFont }}>{c.rating}</div>
                <div>
                  <StarRow rating={c.rating} size={14}/>
                  <div style={{ fontSize: 11, color: t.textMuted, marginTop: 2 }}>{c.reviews.toLocaleString()} đánh giá</div>
                </div>
              </div>
              <div style={{ width: 1, height: 40, background: t.border }}/>
              <div>
                <div style={{ fontSize: 11, color: t.textSubtle }}>Giá khám từ</div>
                <div style={{ fontSize: 22, fontWeight: 800, color: t.coral, fontFamily: t.numFont, letterSpacing: -0.5 }}>{c.price}</div>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <button className="btn-coral" onClick={() => navigate(`/booking?clinic=${c.id}`)} style={{ ...s.btnCoral, padding: '12px 26px', fontSize: 14 }}><Icon.Calendar size={14}/>Đặt lịch miễn phí</button>
            <button className="btn-ghost" style={{ ...s.btnGhost, padding: '10px 26px' }}><Icon.Phone size={14}/>Gọi ngay</button>
            <button className="btn-ghost" style={{ ...s.btnGhost, padding: '10px 26px' }}><Icon.Heart size={14}/>Lưu</button>
          </div>
        </div>
      </div>
      {/* Tabs */}
      <div style={{ borderBottom: `1px solid ${t.border}`, background: '#fff', position: 'sticky', top: 75, zIndex: 20 }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', padding: '0 32px', display: 'flex', gap: 2 }}>
          {['overview','services','reviews','doctors','location'].map(tb => {
            const labels = { overview: 'Tổng quan', services: 'Bảng giá', reviews: `Review (${c.reviews.toLocaleString()})`, doctors: 'Bác sĩ', location: 'Vị trí' };
            return (
              <button key={tb} onClick={() => setTab(tb)} style={{
                padding: '14px 18px', border: 'none', background: 'transparent', cursor: 'pointer',
                fontSize: 13.5, fontWeight: tab === tb ? 600 : 500, color: tab === tb ? t.primary : t.textMuted,
                borderBottom: tab === tb ? `2px solid ${t.primary}` : '2px solid transparent',
              }}>{labels[tb]}</button>
            );
          })}
        </div>
      </div>
      {/* Content + right rail */}
      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '24px 32px', display: 'grid', gridTemplateColumns: '1fr 340px', gap: 28 }}>
        <div>
          {tab === 'overview' && <>
            <section style={{ marginBottom: 28 }}>
              <h2 style={{ fontSize: 18, fontWeight: 700, color: t.primary, margin: '0 0 10px' }}>Giới thiệu</h2>
              <p style={{ fontSize: 14, color: t.text, lineHeight: 1.7, margin: 0 }}>{c.name} là phòng khám nha khoa có {c.years} năm kinh nghiệm, được Bộ Y tế cấp phép hoạt động. Trang thiết bị nhập khẩu từ Đức và Mỹ, đội ngũ {c.doctors} bác sĩ có chứng chỉ hành nghề. Chuyên sâu về {c.services.slice(0, 2).join(', ').toLowerCase()} và phục hình thẩm mỹ.</p>
            </section>
            <section style={{ marginBottom: 28 }}>
              <h2 style={{ fontSize: 18, fontWeight: 700, color: t.primary, margin: '0 0 12px' }}>Điểm nổi bật</h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
                {[
                  { icon: <Icon.Shield size={16}/>, text: 'Giấy phép hoạt động Bộ Y tế' },
                  { icon: <Icon.User size={16}/>, text: `${c.doctors} bác sĩ có CCHN` },
                  { icon: <Icon.Check size={16}/>, text: 'Thiết bị nhập khẩu Đức, Mỹ' },
                  { icon: <Icon.Heart size={16}/>, text: 'Bảo hành dịch vụ 5 năm' },
                ].map((f, i) => (
                  <div key={i} style={{ padding: 12, border: `1px solid ${t.border}`, borderRadius: t.radius, display: 'flex', gap: 10, alignItems: 'center' }}>
                    <div style={{ width: 32, height: 32, borderRadius: 8, background: t.blueLight, color: t.blue, display: 'grid', placeItems: 'center' }}>{f.icon}</div>
                    <span style={{ fontSize: 13, fontWeight: 500 }}>{f.text}</span>
                  </div>
                ))}
              </div>
            </section>
            <section>
              <h2 style={{ fontSize: 18, fontWeight: 700, color: t.primary, margin: '0 0 12px' }}>Review mới nhất</h2>
              {[
                { name: 'Nguyễn Minh H.', rating: 5, date: '15/04/2026', service: 'Niềng Invisalign', text: 'Bác sĩ tư vấn rất kỹ, giải thích từng bước. Sau 8 tháng răng đã đều rõ rệt. Giá cao hơn chỗ khác một chút nhưng đáng tiền.' },
                { name: 'Trần Thị L.', rating: 4, date: '12/04/2026', service: 'Tẩy trắng', text: 'Phòng khám sạch sẽ, nhân viên nhiệt tình. Tẩy trắng xong răng sáng được 4 tông, hơi ê 2 ngày đầu nhưng hết nhanh.' },
              ].map((r, i) => (
                <div key={i} style={{ padding: 16, border: `1px solid ${t.border}`, borderRadius: t.radius, marginBottom: 10 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8, gap: 10 }}>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 13 }}>{r.name}</div>
                      <div style={{ fontSize: 11, color: t.textSubtle }}>{r.date} · Đã xác minh đặt lịch</div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <StarRow rating={r.rating} size={12}/>
                      <span style={{ fontSize: 10.5, padding: '2px 8px', background: t.blueLight, color: t.blue, borderRadius: 10, fontWeight: 600 }}>{r.service}</span>
                    </div>
                  </div>
                  <p style={{ fontSize: 13, color: t.text, lineHeight: 1.6, margin: 0 }}>{r.text}</p>
                </div>
              ))}
            </section>
          </>}
          {tab === 'services' && (
            <div style={{ border: `1px solid ${t.border}`, borderRadius: t.radius, overflow: 'hidden' }}>
              {SERVICES.map((sv, i) => (
                <div key={sv.id} style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr auto', padding: '14px 18px', borderBottom: i < SERVICES.length - 1 ? `1px solid ${t.border}` : 'none', alignItems: 'center', fontSize: 13 }}>
                  <div style={{ fontWeight: 600 }}>{sv.name}</div>
                  <div style={{ fontSize: 11, color: t.textMuted }}>{sv.duration}</div>
                  <div style={{ fontFamily: t.numFont, fontWeight: 700, color: t.primary }}>{sv.min}—{sv.max} <span style={{ color: t.textMuted, fontSize: 11, fontWeight: 400 }}>{sv.unit}</span></div>
                  <button className="btn-ghost" onClick={() => navigate(`/booking?clinic=${c.id}`)} style={{ ...s.btnGhost, padding: '6px 14px', fontSize: 12 }}>Đặt</button>
                </div>
              ))}
            </div>
          )}
          {tab === 'reviews' && <div style={{ padding: 40, textAlign: 'center', color: t.textMuted, border: `1px solid ${t.border}`, borderRadius: t.radius }}>Đang hiển thị tất cả {c.reviews.toLocaleString()} reviews — (demo, cuộn xem review trong tab Tổng quan)</div>}
          {tab === 'doctors' && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
              {[1,2,3,4,5,6].map(i => (
                <div key={i} style={{ padding: 14, border: `1px solid ${t.border}`, borderRadius: t.radius, textAlign: 'center', background: '#fff' }}>
                  <ImgPlaceholder hue={200 + i * 15} sat={20} style={{ width: 70, height: 70, borderRadius: 35, margin: '0 auto 10px' }}/>
                  <div style={{ fontSize: 13, fontWeight: 700, color: t.primary }}>BS. CK{i === 1 ? 'I' : 'II'} Nguyễn Văn {['A','B','C','D','E','F'][i-1]}</div>
                  <div style={{ fontSize: 11, color: t.textMuted, marginBottom: 6 }}>Chuyên khoa Chỉnh nha</div>
                  <div style={{ fontSize: 10, padding: '2px 8px', background: t.mint, color: t.mintText, borderRadius: 10, display: 'inline-block', fontWeight: 600 }}>CCHN 01234{i}</div>
                </div>
              ))}
            </div>
          )}
          {tab === 'location' && <ImgPlaceholder hue={140} sat={20} label="Google Maps" style={{ height: 400, borderRadius: t.radius }}/>}
        </div>
        {/* Right rail - booking */}
        <aside>
          <div style={{ border: `1px solid ${t.border}`, borderRadius: t.radius + 2, padding: 18, position: 'sticky', top: 140, background: '#fff', boxShadow: t.shadow }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: t.primary, marginBottom: 12 }}>Đặt lịch nhanh</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6, marginBottom: 14 }}>
              {['T2','T3','T4','T5'].map((d, i) => (
                <div key={d} onClick={() => setDayIdx(i)} style={{ textAlign: 'center', padding: '8px 4px', border: `1.5px solid ${i === dayIdx ? t.primary : t.border}`, background: i === dayIdx ? t.primary : '#fff', color: i === dayIdx ? '#fff' : t.text, borderRadius: 6, cursor: 'pointer', transition: 'all .15s' }}>
                  <div style={{ fontSize: 10, opacity: 0.7 }}>{d}</div>
                  <div style={{ fontSize: 16, fontWeight: 700, fontFamily: t.numFont }}>{21 + i}</div>
                </div>
              ))}
            </div>
            <div style={{ fontSize: 11, color: t.textMuted, marginBottom: 8 }}>Khung giờ trống</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginBottom: 16 }}>
              {['09:00','10:30','14:00','15:30','17:00','19:00'].map(tm => (
                <div key={tm} onClick={() => setTimeSlot(tm)} style={{ textAlign: 'center', padding: '8px 0', border: `1.5px solid ${tm === timeSlot ? t.primary : t.border}`, background: tm === timeSlot ? t.primary : '#fff', color: tm === timeSlot ? '#fff' : t.text, borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: t.numFont, transition: 'all .15s' }}>{tm}</div>
              ))}
            </div>
            <button className="btn-coral" onClick={() => navigate(`/booking?clinic=${c.id}`)} style={{ ...s.btnCoral, width: '100%', padding: '12px', fontSize: 13.5, justifyContent: 'center' }}>Đặt lịch miễn phí</button>
            <div style={{ display: 'flex', gap: 6, marginTop: 12, fontSize: 11, color: t.textMuted, alignItems: 'center', justifyContent: 'center' }}>
              <Icon.Shield size={11}/> Xác nhận trong 15 phút
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function ServicesCompare() {
  const { t } = useTheme();
  const s = useStyles();
  const { navigate } = useRouter();
  return (
    <div>
      <div style={{ padding: '28px 32px 20px', borderBottom: `1px solid ${t.border}`, background: '#fff' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <div style={{ fontSize: 12, color: t.textMuted, marginBottom: 6 }}><a onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>Trang chủ</a> / Bảng giá</div>
          <h1 style={{ fontSize: 30, fontWeight: 800, margin: '0 0 6px', color: t.primary, letterSpacing: -0.5 }}>So sánh giá dịch vụ nha khoa 2026</h1>
          <p style={{ fontSize: 14, color: t.textMuted, margin: 0 }}>Khảo sát công khai từ 42 phòng khám tại TP.HCM · Cập nhật 04/2026</p>
        </div>
      </div>
      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '24px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 24 }}>
          {[
            { v: '42', l: 'Phòng khám khảo sát' },
            { v: '156', l: 'Dịch vụ so sánh' },
            { v: '28%', l: 'Chênh lệch giá TB' },
            { v: '04/2026', l: 'Cập nhật' },
          ].map((st, i) => (
            <div key={i} style={{ padding: 18, border: `1px solid ${t.border}`, borderRadius: t.radius + 2, background: '#fff' }}>
              <div style={{ fontSize: 26, fontWeight: 800, color: t.primary, fontFamily: t.numFont, letterSpacing: -0.5 }}>{st.v}</div>
              <div style={{ fontSize: 12.5, color: t.textMuted }}>{st.l}</div>
            </div>
          ))}
        </div>
        <div style={{ background: '#fff', border: `1px solid ${t.border}`, borderRadius: t.radius + 2, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '2.2fr 1fr 1fr 1.8fr 1fr', padding: '14px 20px', background: t.primary, color: '#fff', fontSize: 11.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.6 }}>
            <div>Dịch vụ</div>
            <div>Thấp nhất</div>
            <div>Cao nhất</div>
            <div>Phân bố</div>
            <div>Thời gian</div>
          </div>
          {SERVICES.map((sv, i) => {
            const range = sv.max - sv.min;
            return (
              <div key={sv.id} style={{ display: 'grid', gridTemplateColumns: '2.2fr 1fr 1fr 1.8fr 1fr', padding: '16px 20px', borderBottom: i < SERVICES.length - 1 ? `1px solid ${t.border}` : 'none', alignItems: 'center' }}>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: t.primary, marginBottom: 2 }}>{sv.name}</div>
                  <div style={{ fontSize: 11, color: t.textMuted }}>{sv.unit}</div>
                </div>
                <div style={{ fontFamily: t.numFont, fontWeight: 700, color: t.mintText, fontSize: 16 }}>{sv.min}</div>
                <div style={{ fontFamily: t.numFont, fontWeight: 700, color: t.coral, fontSize: 16 }}>{sv.max}</div>
                <div>
                  <div style={{ height: 6, background: t.surfaceAlt, borderRadius: 3, position: 'relative' }}>
                    <div style={{ position: 'absolute', left: '10%', right: '15%', height: '100%', background: `linear-gradient(90deg, ${t.mintText}, ${t.blue}, ${t.coral})`, borderRadius: 3 }}/>
                  </div>
                  <div style={{ fontSize: 10.5, color: t.textSubtle, marginTop: 4, fontFamily: t.numFont }}>Phổ biến: {(sv.min + range * 0.4).toFixed(1)}—{(sv.min + range * 0.7).toFixed(1)}</div>
                </div>
                <div style={{ fontSize: 12.5, color: t.textMuted }}>{sv.duration}</div>
              </div>
            );
          })}
        </div>
        <div style={{ fontSize: 11.5, color: t.textSubtle, marginTop: 14, display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon.Shield size={12}/> Giá khảo sát chỉ mang tính tham khảo. Chi phí cuối cùng phụ thuộc tình trạng răng và dịch vụ cụ thể.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ClinicsList, ClinicDetail, ServicesCompare });