// Shared data + primitives for both design options
// Fallback data (used while loading or if API fails)
const FALLBACK_CLINICS = [
{
id: 'c1',
name: 'Nha Khoa Kim Phú Nhuận',
district: 'Phú Nhuận',
address: '123 Phan Đình Phùng, P.15',
rating: 4.8,
reviews: 1247,
services: ['Niềng răng', 'Implant', 'Tẩy trắng', 'Bọc sứ'],
price: 'Từ 500k',
verified: true,
years: 18,
doctors: 12,
hue: 210,
},
{
id: 'c2',
name: 'Peace Dentistry Phú Nhuận',
district: 'Phú Nhuận',
address: '88 Nguyễn Văn Trỗi, P.8',
rating: 4.9,
reviews: 892,
services: ['Implant', 'Niềng Invisalign', 'Veneer'],
price: 'Từ 800k',
verified: true,
years: 10,
doctors: 8,
hue: 180,
},
{
id: 'c3',
name: 'Nha Khoa Sài Gòn B.H',
district: 'Phú Nhuận',
address: '456 Hoàng Văn Thụ, P.4',
rating: 4.7,
reviews: 2103,
services: ['Niềng răng', 'Nhổ răng khôn', 'Trám răng'],
price: 'Từ 300k',
verified: true,
years: 22,
doctors: 15,
hue: 160,
},
{
id: 'c4',
name: 'Nha Khoa Paris Phú Nhuận',
district: 'Phú Nhuận',
address: '12 Nguyễn Kiệm, P.3',
rating: 4.6,
reviews: 1589,
services: ['Niềng răng', 'Implant', 'Bọc răng sứ'],
price: 'Từ 600k',
verified: true,
years: 15,
doctors: 10,
hue: 230,
},
{
id: 'c5',
name: 'Nha Khoa Việt Smile',
district: 'Phú Nhuận',
address: '77 Lê Văn Sỹ, P.13',
rating: 4.5,
reviews: 634,
services: ['Niềng răng trẻ em', 'Tẩy trắng', 'Trám răng'],
price: 'Từ 250k',
verified: false,
years: 7,
doctors: 5,
hue: 195,
},
];
const FALLBACK_ARTICLES = [
{
id: 'a1',
category: 'Niềng răng',
title: 'Niềng răng mắc cài kim loại: Ưu điểm, nhược điểm & chi phí 2026',
excerpt: 'Phương pháp niềng răng mắc cài kim loại vẫn là lựa chọn phổ biến nhất tại Việt Nam. Cùng tìm hiểu chi tiết về hiệu quả, thời gian và chi phí...',
author: 'BS. Nguyễn Thị Minh',
date: '18/04/2026',
readTime: 8,
views: '12.4k',
featured: true,
},
{
id: 'a2',
category: 'Implant',
title: 'Trồng răng Implant: Quy trình 5 bước chuẩn y khoa',
excerpt: 'Implant nha khoa là giải pháp phục hình răng mất hiện đại nhất. Bài viết mô tả quy trình từ khám, cắm trụ đến gắn mão sứ...',
author: 'BS. Trần Văn Hùng',
date: '15/04/2026',
readTime: 12,
views: '8.9k',
},
{
id: 'a3',
category: 'Chăm sóc',
title: '7 thói quen khiến răng vàng nhanh chóng bạn nên tránh',
excerpt: 'Cà phê, trà, thuốc lá... có thực sự là nguyên nhân chính khiến răng xỉn màu? Nha sĩ chia sẻ sự thật ít người biết.',
author: 'BS. Lê Hải Anh',
date: '12/04/2026',
readTime: 6,
views: '24.1k',
},
{
id: 'a4',
category: 'Tẩy trắng',
title: 'Tẩy trắng răng tại nhà: An toàn hay chỉ là quảng cáo?',
excerpt: 'Các sản phẩm tẩy trắng tại nhà đang được quảng bá mạnh. Đâu là sự thật về độ an toàn và hiệu quả thực sự?',
author: 'BS. Phạm Thu Hà',
date: '10/04/2026',
readTime: 7,
views: '15.7k',
},
{
id: 'a5',
category: 'Trẻ em',
title: 'Khi nào nên đưa trẻ đi khám răng lần đầu?',
excerpt: 'Hiệp hội Nha khoa Hoa Kỳ khuyến cáo trẻ nên được khám răng từ khi mọc chiếc răng sữa đầu tiên...',
author: 'BS. Đỗ Ngọc Lan',
date: '08/04/2026',
readTime: 5,
views: '6.2k',
},
{
id: 'a6',
category: 'Răng khôn',
title: 'Nhổ răng khôn: Khi nào cần, khi nào không?',
excerpt: 'Không phải ai cũng cần nhổ răng khôn. Hướng dẫn chi tiết giúp bạn nhận biết dấu hiệu và quyết định đúng.',
author: 'BS. Hoàng Minh Tuấn',
date: '05/04/2026',
readTime: 9,
views: '18.3k',
},
];
// Dynamic data store (populated from API)
let CLINICS = [...FALLBACK_CLINICS];
let ARTICLES = [...FALLBACK_ARTICLES];
const SERVICES = [
{ id: 's1', name: 'Niềng răng mắc cài', min: 25, max: 55, unit: 'triệu', duration: '18-24 tháng' },
{ id: 's2', name: 'Niềng Invisalign', min: 80, max: 150, unit: 'triệu', duration: '12-18 tháng' },
{ id: 's3', name: 'Cấy ghép Implant', min: 18, max: 45, unit: 'triệu/trụ', duration: '3-6 tháng' },
{ id: 's4', name: 'Bọc răng sứ', min: 2.5, max: 15, unit: 'triệu/răng', duration: '5-7 ngày' },
{ id: 's5', name: 'Tẩy trắng răng', min: 1.5, max: 5, unit: 'triệu', duration: '1-2 buổi' },
{ id: 's6', name: 'Trám răng thẩm mỹ', min: 0.3, max: 1.2, unit: 'triệu/răng', duration: '30 phút' },
];
const DISTRICTS = ['Tất cả', 'Phú Nhuận', 'Quận 1', 'Quận 3', 'Quận 10', 'Bình Thạnh', 'Tân Bình'];
const FAQS = [
{ q: 'Niềng răng có đau không?', a: 'Đau nhẹ trong 3-5 ngày đầu sau khi gắn mắc cài, sau đó quen dần. Mỗi lần siết dây cung cũng có thể gây ê nhẹ 1-2 ngày.' },
{ q: 'Implant có tồn tại suốt đời không?', a: 'Với chăm sóc tốt, trụ Implant titanium có thể dùng 20-30 năm hoặc lâu hơn. Phần mão sứ có thể cần thay sau 10-15 năm.' },
{ q: 'Tẩy trắng răng có hại men răng không?', a: 'Tẩy trắng đúng kỹ thuật tại phòng khám an toàn. Tuy nhiên không nên lạm dụng, khoảng cách tối thiểu giữa 2 lần là 6 tháng.' },
{ q: 'Trẻ em mấy tuổi nên niềng răng?', a: 'Thời điểm lý tưởng là 10-14 tuổi khi xương hàm còn phát triển. Tuy nhiên có thể can thiệp sớm từ 6-7 tuổi nếu có sai lệch nghiêm trọng.' },
];
// Placeholder "image" — a soft gradient square with a tiny tooth glyph label
function ImgPlaceholder({ hue = 210, sat = 30, label, height = '100%', radius = 0, style = {}, light = false }) {
const bg1 = `oklch(${light ? 0.92 : 0.88} ${sat / 200} ${hue})`;
const bg2 = `oklch(${light ? 0.96 : 0.94} ${sat / 300} ${hue + 20})`;
return (
{/* subtle stripes */}
{label && (
{label}
)}