// Home page for Option A

function Home() {
  const { t } = useTheme();
  const s = useStyles();
  const { navigate } = useRouter();
  const [district, setDistrict] = React.useState('Phú Nhuận');
  const [query, setQuery] = React.useState('');

  const onSearch = (e) => {
    e.preventDefault();
    const params = [];
    if (query.trim()) params.push(`q=${encodeURIComponent(query.trim())}`);
    if (district !== 'Tất cả') params.push(`district=${encodeURIComponent(district)}`);
    navigate(`/clinics${params.length ? '?' + params.join('&') : ''}`);
  };

  return (
    <div>
      {/* HERO */}
      <section style={{ background: `linear-gradient(135deg, #fff 0%, ${t.blueLight} 100%)`, padding: '64px 32px 56px' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', background: '#fff', border: `1px solid ${t.border}`, borderRadius: 100, fontSize: 12, fontWeight: 500, color: t.primary, marginBottom: 20 }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: t.coral }}/>
              Nền tảng review nha khoa độc lập
            </div>
            <h1 style={{ fontSize: 50, fontWeight: 800, lineHeight: 1.05, margin: '0 0 18px', color: t.primary, letterSpacing: -1.5 }}>
              Chọn nha khoa <span style={{ color: t.coral }}>đúng</span>,<br/>chăm răng thông minh.
            </h1>
            <p style={{ fontSize: 16, color: t.textMuted, lineHeight: 1.6, margin: '0 0 28px', maxWidth: 480 }}>
              Tổng hợp 1,240+ phòng khám đã thẩm định, so sánh minh bạch giá dịch vụ, và kiến thức được biên tập bởi nha sĩ có chứng chỉ hành nghề.
            </p>

            {/* Search box */}
            <form onSubmit={onSearch} style={{ background: '#fff', border: `2px solid ${t.borderStrong}`, borderRadius: t.radius + 2, padding: 6, display: 'flex', gap: 4, boxShadow: t.shadow, maxWidth: 540 }}>
              <div style={{ padding: '8px 14px', borderRight: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon.MapPin size={14} style={{ color: t.primary }}/>
                <select value={district} onChange={e => setDistrict(e.target.value)} style={{ border: 'none', outline: 'none', background: 'transparent', fontSize: 13, fontWeight: 500, color: t.primary, cursor: 'pointer' }}>
                  {DISTRICTS.map(d => <option key={d}>{d}</option>)}
                </select>
              </div>
              <input
                value={query} onChange={e => setQuery(e.target.value)}
                placeholder="Niềng răng, Implant, tẩy trắng..."
                style={{ flex: 1, border: 'none', outline: 'none', padding: '10px 12px', fontSize: 14, background: 'transparent', color: t.text }}
              />
              <button type="submit" className="btn-primary" style={{ ...s.btnPrimary, padding: '10px 20px' }}>
                <Icon.Search size={14}/> Tìm
              </button>
            </form>
            <div style={{ display: 'flex', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 12, color: t.textMuted }}>Tìm nhiều:</span>
              {['Niềng răng', 'Implant', 'Tẩy trắng', 'Răng khôn', 'Bọc sứ'].map(term => (
                <span key={term} className="chip-interactive" onClick={() => navigate(`/clinics?q=${encodeURIComponent(term)}`)}
                      style={{ padding: '3px 10px', background: '#fff', border: `1px solid ${t.border}`, borderRadius: 12, fontSize: 12, color: t.text, cursor: 'pointer' }}>{term}</span>
              ))}
            </div>

            {/* Trust stats */}
            <div style={{ display: 'flex', gap: 32, marginTop: 36, paddingTop: 24, borderTop: `1px solid ${t.border}` }}>
              {[
                { v: '1,240+', l: 'Phòng khám' },
                { v: '38,500', l: 'Đánh giá thật' },
                { v: '520+', l: 'Bài viết' },
                { v: '4.8★', l: 'Trust score' },
              ].map(st => (
                <div key={st.l}>
                  <div style={{ fontSize: 22, fontWeight: 800, color: t.primary, fontFamily: t.numFont, letterSpacing: -0.5 }}>{st.v}</div>
                  <div style={{ fontSize: 11, color: t.textMuted }}>{st.l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Hero visual */}
          <div style={{ position: 'relative' }}>
            <ImgPlaceholder hue={205} sat={35} label="Hero · Bác sĩ & bệnh nhân" style={{ height: 480, borderRadius: t.radius + 4 }}/>
            {/* Floating stat card */}
            <div style={{ position: 'absolute', top: 24, right: -16, background: '#fff', padding: 14, borderRadius: t.radius + 2, boxShadow: t.shadowHover, border: `1px solid ${t.border}`, width: 200 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <div style={{ width: 32, height: 32, borderRadius: 16, background: t.mint, color: t.mintText, display: 'grid', placeItems: 'center' }}><Icon.Shield size={16}/></div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700, color: t.primary }}>Đã thẩm định</div>
                  <div style={{ fontSize: 10.5, color: t.textMuted }}>Bởi Hội đồng Biên tập</div>
                </div>
              </div>
              <div style={{ fontSize: 11, color: t.textMuted, lineHeight: 1.5 }}>Không quảng cáo trá hình. Review chỉ từ bệnh nhân đã xác minh.</div>
            </div>
            {/* Floating rating card */}
            <div style={{ position: 'absolute', bottom: -20, left: -16, background: '#fff', padding: '14px 16px', borderRadius: t.radius + 2, boxShadow: t.shadowHover, border: `1px solid ${t.border}`, width: 220 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ background: t.coral, color: '#fff', padding: '4px 10px', borderRadius: 6, fontSize: 17, fontWeight: 700, fontFamily: t.numFont }}>4.8</div>
                <div style={{ flex: 1 }}>
                  <StarRow rating={4.8} size={11}/>
                  <div style={{ fontSize: 10.5, color: t.textMuted }}>38,500 đánh giá</div>
                </div>
              </div>
              <div style={{ fontSize: 10.5, color: t.textSubtle, marginTop: 10, paddingTop: 10, borderTop: `1px solid ${t.border}` }}>Trung bình cao nhất Q. Phú Nhuận</div>
            </div>
          </div>
        </div>
      </section>

      {/* CATEGORY TILES */}
      <section style={{ padding: '48px 32px', background: '#fff' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
            <h2 style={{ fontSize: 24, fontWeight: 700, color: t.primary, margin: 0, letterSpacing: -0.5 }}>Dịch vụ phổ biến</h2>
            <a onClick={() => navigate('/services')} style={{ fontSize: 13, color: t.blue, fontWeight: 500, cursor: 'pointer' }}>Xem bảng giá đầy đủ →</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14 }}>
            {[
              { label: 'Niềng răng', icon: 'braces', hue: 210, count: 42 },
              { label: 'Implant', icon: 'implant', hue: 180, count: 31 },
              { label: 'Tẩy trắng', icon: 'whitening', hue: 50, count: 56 },
              { label: 'Bọc sứ', icon: 'crown', hue: 280, count: 38 },
              { label: 'Nhổ răng khôn', icon: 'wisdom', hue: 340, count: 47 },
              { label: 'Khám tổng quát', icon: 'check', hue: 150, count: 88 },
            ].map(c => (
              <div key={c.label} onClick={() => navigate(`/clinics?q=${encodeURIComponent(c.label)}`)}
                   className="clinic-card" style={{ padding: 16, border: `1px solid ${t.border}`, borderRadius: t.radius, textAlign: 'center', background: '#fff' }}>
                <div style={{ width: 48, height: 48, borderRadius: 10, margin: '0 auto 10px', background: `oklch(0.92 0.05 ${c.hue})`, color: `oklch(0.4 0.1 ${c.hue})`, display: 'grid', placeItems: 'center' }}>
                  <ToothMark size={24} color="currentColor"/>
                </div>
                <div style={{ fontSize: 13, fontWeight: 600, color: t.primary, marginBottom: 2 }}>{c.label}</div>
                <div style={{ fontSize: 11, color: t.textMuted }}>{c.count} phòng khám</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED CLINICS */}
      <section style={{ padding: '48px 32px', background: t.surface }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
            <div>
              <div style={{ display: 'inline-block', padding: '3px 10px', background: t.coralLight, color: t.coral, borderRadius: 12, fontSize: 11, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 8 }}>Top rated · Q. Phú Nhuận</div>
              <h2 style={{ fontSize: 26, fontWeight: 700, color: t.primary, margin: 0, letterSpacing: -0.5 }}>Phòng khám nổi bật</h2>
            </div>
            <a onClick={() => navigate('/clinics')} style={{ fontSize: 13, color: t.blue, fontWeight: 500, cursor: 'pointer' }}>Xem tất cả →</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {CLINICS.slice(0, 3).map(c => <ClinicCard key={c.id} clinic={c}/>)}
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section style={{ padding: '56px 32px', background: '#fff' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 32 }}>
            <div style={{ display: 'inline-block', padding: '3px 10px', background: t.blueLight, color: t.blue, borderRadius: 12, fontSize: 11, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 10 }}>Quy trình</div>
            <h2 style={{ fontSize: 26, fontWeight: 700, color: t.primary, margin: 0, letterSpacing: -0.5 }}>3 bước để tìm phòng khám phù hợp</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, position: 'relative' }}>
            {[
              { n: '01', title: 'Tìm & lọc', text: 'Nhập khu vực hoặc dịch vụ cần tìm. Lọc theo giá, đánh giá, chuyên khoa.', icon: <Icon.Search size={20}/> },
              { n: '02', title: 'So sánh & chọn', text: 'Đọc review thật, xem bảng giá minh bạch, so sánh 3-5 lựa chọn phù hợp.', icon: <Icon.Filter size={20}/> },
              { n: '03', title: 'Đặt lịch miễn phí', text: 'Đặt lịch trực tuyến, nhận xác nhận từ phòng khám trong 15 phút.', icon: <Icon.Calendar size={20}/> },
            ].map((st, i) => (
              <div key={i} style={{ padding: 24, border: `1px solid ${t.border}`, borderRadius: t.radius + 2, background: '#fff', position: 'relative' }}>
                <div style={{ position: 'absolute', top: -14, left: 20, background: t.primary, color: '#fff', fontSize: 11, fontWeight: 700, padding: '4px 10px', borderRadius: 4, fontFamily: t.numFont, letterSpacing: 1 }}>STEP {st.n}</div>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: t.blueLight, color: t.blue, display: 'grid', placeItems: 'center', marginBottom: 12, marginTop: 4 }}>{st.icon}</div>
                <h3 style={{ fontSize: 17, fontWeight: 700, color: t.primary, margin: '0 0 6px' }}>{st.title}</h3>
                <p style={{ fontSize: 13, color: t.textMuted, margin: 0, lineHeight: 1.55 }}>{st.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ARTICLES */}
      <section style={{ padding: '48px 32px', background: t.surface }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
            <div>
              <div style={{ display: 'inline-block', padding: '3px 10px', background: t.mint, color: t.mintText, borderRadius: 12, fontSize: 11, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 8 }}>Biên tập bởi nha sĩ · CCHN</div>
              <h2 style={{ fontSize: 26, fontWeight: 700, color: t.primary, margin: 0, letterSpacing: -0.5 }}>Kiến thức mới nhất</h2>
            </div>
            <a onClick={() => navigate('/articles')} style={{ fontSize: 13, color: t.blue, fontWeight: 500, cursor: 'pointer' }}>Tất cả bài viết →</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 18 }}>
            {/* Featured */}
            <div onClick={() => navigate(`/article/${ARTICLES[0].id}`)} className="article-card" style={{ border: `1px solid ${t.border}`, borderRadius: t.radius + 2, overflow: 'hidden', background: '#fff' }}>
              <ImgPlaceholder hue={200} sat={35} label="Featured" style={{ height: 260 }}/>
              <div style={{ padding: 20 }}>
                <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
                  <span style={{ padding: '3px 9px', background: t.coralLight, color: t.coral, borderRadius: 12, fontSize: 11, fontWeight: 600 }}>{ARTICLES[0].category}</span>
                  <span style={{ padding: '3px 9px', background: t.surface, color: t.textMuted, borderRadius: 12, fontSize: 11 }}>{ARTICLES[0].readTime} phút đọc</span>
                </div>
                <h3 style={{ fontSize: 20, fontWeight: 700, color: t.primary, margin: '0 0 8px', lineHeight: 1.25, letterSpacing: -0.3 }}>{ARTICLES[0].title}</h3>
                <p style={{ fontSize: 13.5, color: t.textMuted, margin: '0 0 12px', lineHeight: 1.55 }}>{ARTICLES[0].excerpt}</p>
                <div style={{ fontSize: 12, color: t.textSubtle, display: 'flex', gap: 10 }}>
                  <span style={{ fontWeight: 600, color: t.text }}>{ARTICLES[0].author}</span>
                  <span>· {ARTICLES[0].date}</span>
                </div>
              </div>
            </div>
            {/* 2 side */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, gridColumn: 'span 2' }}>
              {ARTICLES.slice(1, 3).map((a, i) => (
                <div key={a.id} onClick={() => navigate(`/article/${a.id}`)} className="article-card" style={{ border: `1px solid ${t.border}`, borderRadius: t.radius + 2, background: '#fff', display: 'grid', gridTemplateColumns: '160px 1fr', overflow: 'hidden' }}>
                  <ImgPlaceholder hue={200 + i * 30} sat={30} label={a.category} style={{ height: '100%' }}/>
                  <div style={{ padding: 16 }}>
                    <span style={{ padding: '3px 9px', background: t.blueLight, color: t.blue, borderRadius: 12, fontSize: 11, fontWeight: 600 }}>{a.category}</span>
                    <h3 style={{ fontSize: 15, fontWeight: 700, color: t.primary, margin: '8px 0 6px', lineHeight: 1.3 }}>{a.title}</h3>
                    <p style={{ fontSize: 12.5, color: t.textMuted, margin: '0 0 8px', lineHeight: 1.5 }}>{a.excerpt.slice(0, 100)}...</p>
                    <div style={{ fontSize: 11, color: t.textSubtle }}>{a.date} · {a.readTime} phút · {a.views} lượt xem</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* PRICE COMPARE TEASER */}
      <section style={{ padding: '48px 32px', background: '#fff' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 40, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-block', padding: '3px 10px', background: t.yellow, color: '#8B6914', borderRadius: 12, fontSize: 11, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 12 }}>Minh bạch · 04/2026</div>
            <h2 style={{ fontSize: 28, fontWeight: 700, color: t.primary, margin: '0 0 12px', letterSpacing: -0.5, lineHeight: 1.2 }}>So sánh giá dịch vụ giữa 42 phòng khám TP.HCM</h2>
            <p style={{ fontSize: 14, color: t.textMuted, margin: '0 0 20px', lineHeight: 1.6 }}>Chúng tôi khảo sát công khai giá dịch vụ mỗi 3 tháng. Chênh lệch giữa phòng khám có thể lên đến 40% — biết trước để thương lượng.</p>
            <button className="btn-primary" onClick={() => navigate('/services')} style={{ ...s.btnPrimary, padding: '12px 22px', fontSize: 14 }}>Xem bảng giá đầy đủ <Icon.Arrow size={14}/></button>
          </div>
          <div style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: t.radius + 2, overflow: 'hidden' }}>
            {SERVICES.slice(0, 4).map((srv, i) => (
              <div key={srv.id} style={{ padding: '14px 18px', borderBottom: i < 3 ? `1px solid ${t.border}` : 'none', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1.2fr', alignItems: 'center', gap: 12, background: '#fff' }}>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: t.primary }}>{srv.name}</div>
                  <div style={{ fontSize: 11, color: t.textSubtle }}>{srv.duration}</div>
                </div>
                <div style={{ fontSize: 15, fontWeight: 700, color: t.primary, fontFamily: t.numFont }}>{srv.min}—{srv.max}<span style={{ fontSize: 11, color: t.textMuted, fontWeight: 400, marginLeft: 4 }}>{srv.unit}</span></div>
                <div style={{ height: 4, background: t.border, borderRadius: 2, position: 'relative' }}>
                  <div style={{ position: 'absolute', left: '15%', right: '25%', height: '100%', background: `linear-gradient(90deg, ${t.mintText}, ${t.blue}, ${t.coral})`, borderRadius: 2 }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA booking */}
      <section style={{ padding: '56px 32px', background: `linear-gradient(135deg, ${t.primary} 0%, ${t.navyDark} 100%)`, color: '#fff' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-block', padding: '4px 12px', background: 'rgba(255,255,255,.12)', color: '#fff', borderRadius: 12, fontSize: 11, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 14 }}>Đặt lịch miễn phí</div>
            <h2 style={{ fontSize: 32, fontWeight: 800, margin: '0 0 14px', letterSpacing: -0.8, lineHeight: 1.15 }}>Không chắc chọn phòng khám nào?<br/>Để đội ngũ chúng tôi tư vấn miễn phí.</h2>
            <p style={{ fontSize: 14.5, opacity: 0.82, margin: '0 0 22px', lineHeight: 1.6, maxWidth: 540 }}>Điền thông tin, chuyên viên sẽ gọi lại trong 15 phút — tư vấn độc lập, không nhận hoa hồng từ phòng khám.</p>
            <div style={{ display: 'flex', gap: 10 }}>
              <button className="btn-coral" onClick={() => navigate('/booking')} style={{ ...s.btnCoral, padding: '13px 24px' }}><Icon.Calendar size={15}/> Đặt lịch ngay</button>
              <button onClick={() => navigate('/about')} style={{ background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,.3)', padding: '13px 24px', borderRadius: t.radius, fontSize: 14, fontWeight: 500, cursor: 'pointer' }}>Tìm hiểu thêm</button>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            {[
              { icon: <Icon.Shield size={20}/>, title: 'Thẩm định độc lập', text: 'Mỗi phòng khám đều có CCHN xác minh' },
              { icon: <Icon.Check size={20}/>, title: 'Không quảng cáo', text: 'Không nhận hoa hồng từ phòng khám' },
              { icon: <Icon.Clock size={20}/>, title: 'Xác nhận nhanh', text: 'Xác nhận đặt lịch trong 15 phút' },
              { icon: <Icon.Heart size={20}/>, title: '38,500 review thật', text: 'Từ bệnh nhân đã xác minh điều trị' },
            ].map((card, i) => (
              <div key={i} style={{ padding: 16, background: 'rgba(255,255,255,.08)', borderRadius: t.radius, border: '1px solid rgba(255,255,255,.12)' }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(255,255,255,.12)', display: 'grid', placeItems: 'center', marginBottom: 10, color: '#fff' }}>{card.icon}</div>
                <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 3 }}>{card.title}</div>
                <div style={{ fontSize: 11.5, opacity: 0.75, lineHeight: 1.5 }}>{card.text}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function ClinicCard({ clinic }) {
  const { t } = useTheme();
  const { navigate } = useRouter();
  return (
    <div className="clinic-card" onClick={() => navigate(`/clinic/${clinic.id}`)} style={{ border: `1px solid ${t.border}`, borderRadius: t.radius + 2, overflow: 'hidden', background: '#fff' }}>
      <div style={{ position: 'relative' }}>
        <ImgPlaceholder hue={clinic.hue} sat={35} label={clinic.name.split(' ')[0]} style={{ height: 180 }}/>
        {clinic.verified && (
          <span style={{ position: 'absolute', top: 12, left: 12, padding: '4px 10px', background: '#fff', color: t.mintText, borderRadius: 12, fontSize: 11, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 4, boxShadow: t.shadow }}>
            <Icon.Shield size={10}/> Đã thẩm định
          </span>
        )}
        <button onClick={e => { e.stopPropagation(); }} style={{ position: 'absolute', top: 12, right: 12, width: 32, height: 32, borderRadius: 16, background: '#fff', border: 'none', cursor: 'pointer', display: 'grid', placeItems: 'center', boxShadow: t.shadow, color: t.textSubtle }}>
          <Icon.Heart size={14}/>
        </button>
      </div>
      <div style={{ padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
          <span style={{ fontSize: 11, color: t.textMuted, fontWeight: 500 }}>Q. {clinic.district}</span>
          <span style={{ color: t.border }}>·</span>
          <span style={{ fontSize: 11, color: t.textMuted }}>{clinic.years} năm</span>
        </div>
        <h3 style={{ fontSize: 16, fontWeight: 700, color: t.primary, margin: '0 0 5px' }}>{clinic.name}</h3>
        <div style={{ fontSize: 12, color: t.textMuted, marginBottom: 10, display: 'flex', alignItems: 'center', gap: 4 }}>
          <Icon.MapPin size={11}/> {clinic.address}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
          <StarRow rating={clinic.rating} size={13}/>
          <span style={{ fontSize: 13, fontWeight: 700, fontFamily: t.numFont }}>{clinic.rating}</span>
          <span style={{ fontSize: 11.5, color: t.textSubtle }}>({clinic.reviews.toLocaleString()})</span>
        </div>
        <div style={{ display: 'flex', gap: 5, marginBottom: 12, flexWrap: 'wrap' }}>
          {clinic.services.slice(0, 3).map(s => (
            <span key={s} style={{ padding: '2px 8px', background: t.surface, borderRadius: 10, fontSize: 10.5, color: t.text, fontWeight: 500 }}>{s}</span>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 12, borderTop: `1px solid ${t.border}` }}>
          <div>
            <div style={{ fontSize: 10, color: t.textSubtle }}>Khám từ</div>
            <div style={{ fontSize: 16, fontWeight: 700, color: t.coral, fontFamily: t.numFont }}>{clinic.price}</div>
          </div>
          <span style={{ fontSize: 12, fontWeight: 600, color: t.blue, display: 'inline-flex', alignItems: 'center', gap: 3 }}>Chi tiết <Icon.ChevronRight size={13}/></span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Home, ClinicCard });