// Header + Footer for Option A

function Header({ active }) {
  const { t } = useTheme();
  const { navigate } = useRouter();
  const s = useStyles();
  const nav = [
    { k: 'home', label: 'Trang chủ', path: '/' },
    { k: 'clinics', label: 'Phòng khám', path: '/clinics' },
    { k: 'services', label: 'So sánh giá', path: '/services' },
    { k: 'articles', label: 'Kiến thức', path: '/articles' },
    { k: 'about', label: 'Giới thiệu', path: '/about' },
  ];
  const [q, setQ] = React.useState('');
  const [focused, setFocused] = React.useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    if (q.trim()) navigate(`/clinics?q=${encodeURIComponent(q.trim())}`);
  };
  return (
    <div style={{ borderBottom: `1px solid ${t.border}`, background: '#fff', position: 'sticky', top: 0, zIndex: 50 }}>
      <div style={{ background: t.navyDark, color: 'rgba(255,255,255,.85)', fontSize: 12, padding: '6px 32px', display: 'flex', gap: 20 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon.Phone size={12}/> 1900 6868</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon.Clock size={12}/> 8:00 — 20:00 · T2–CN</span>
        <div style={{ flex: 1 }}/>
        <span style={{ opacity: 0.8, cursor: 'pointer' }}>Dành cho phòng khám</span>
        <span>·</span>
        <span style={{ opacity: 0.8, cursor: 'pointer' }}>Đăng nhập</span>
      </div>
      <div style={{ padding: '16px 32px', display: 'flex', alignItems: 'center', gap: 28, maxWidth: 1400, margin: '0 auto' }}>
        <a onClick={() => navigate('/')} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
          <div style={{ width: 36, height: 36, borderRadius: t.radius, background: t.primary, color: '#fff', display: 'grid', placeItems: 'center' }}>
            <ToothMark size={20} color="#fff"/>
          </div>
          <div style={{ lineHeight: 1.1 }}>
            <div style={{ fontSize: 16, fontWeight: 700, color: t.primary, letterSpacing: -0.3 }}>Kiến Thức Nha Khoa</div>
            <div style={{ fontSize: 10.5, color: t.textMuted, fontWeight: 500, letterSpacing: 0.3, textTransform: 'uppercase' }}>Review · So sánh · Kiến thức</div>
          </div>
        </a>
        <nav style={{ display: 'flex', gap: 2, flex: 1 }}>
          {nav.map(n => (
            <a key={n.k} className="nav-link" onClick={() => navigate(n.path)} style={{
              padding: '8px 14px', borderRadius: 6, fontSize: 14, fontWeight: active === n.k ? 600 : 500,
              color: active === n.k ? t.primary : t.textMuted,
              background: active === n.k ? t.surface : 'transparent',
              cursor: 'pointer',
            }}>{n.label}</a>
          ))}
        </nav>
        <form onSubmit={onSubmit} style={{ position: 'relative' }}>
          <Icon.Search size={14} style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: t.textSubtle, pointerEvents: 'none' }}/>
          <input
            value={q} onChange={e => setQ(e.target.value)}
            onFocus={() => setFocused(true)}
            onBlur={() => setTimeout(() => setFocused(false), 200)}
            placeholder="Tìm phòng khám, bài viết..."
            style={{
              border: `1px solid ${focused ? t.blue : t.border}`, borderRadius: 8, padding: '8px 12px 8px 30px', fontSize: 13,
              width: 220, color: t.text, background: t.surface, outline: 'none', transition: 'border-color .15s, width .2s',
            }}
          />
          {focused && q && <SearchResults query={q}/>}
        </form>
        <button className="btn-primary" onClick={() => navigate('/booking')} style={s.btnPrimary}><Icon.Calendar size={14}/> Đặt lịch</button>
      </div>
    </div>
  );
}

function SearchResults({ query }) {
  const { t } = useTheme();
  const { navigate } = useRouter();
  const q = query.toLowerCase();
  const clinics = CLINICS.filter(c => c.name.toLowerCase().includes(q) || c.address.toLowerCase().includes(q) || c.services.some(s => s.toLowerCase().includes(q))).slice(0, 3);
  const articles = ARTICLES.filter(a => a.title.toLowerCase().includes(q) || a.category.toLowerCase().includes(q)).slice(0, 3);
  return (
    <div style={{ position: 'absolute', top: '100%', right: 0, width: 380, background: '#fff', border: `1px solid ${t.border}`, borderRadius: 10, boxShadow: t.shadowHover, marginTop: 6, padding: 12, maxHeight: 400, overflow: 'auto' }}>
      {clinics.length === 0 && articles.length === 0 && <div style={{ fontSize: 13, color: t.textMuted, padding: 12, textAlign: 'center' }}>Không tìm thấy kết quả cho "{query}"</div>}
      {clinics.length > 0 && (
        <>
          <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1, color: t.textSubtle, padding: '4px 8px' }}>Phòng khám</div>
          {clinics.map(c => (
            <div key={c.id} onClick={() => navigate(`/clinic/${c.id}`)} style={{ padding: '8px 8px', display: 'flex', gap: 10, alignItems: 'center', borderRadius: 6, cursor: 'pointer' }}
                 onMouseEnter={e => e.currentTarget.style.background = t.surface}
                 onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
              <ImgPlaceholder hue={c.hue} sat={35} style={{ width: 36, height: 36, borderRadius: 6, flexShrink: 0 }}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: t.primary }}>{c.name}</div>
                <div style={{ fontSize: 11, color: t.textMuted }}>{c.address} · ⭐ {c.rating}</div>
              </div>
            </div>
          ))}
        </>
      )}
      {articles.length > 0 && (
        <>
          <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1, color: t.textSubtle, padding: '8px 8px 4px' }}>Bài viết</div>
          {articles.map(a => (
            <div key={a.id} onClick={() => navigate(`/article/${a.id}`)} style={{ padding: '8px 8px', borderRadius: 6, cursor: 'pointer' }}
                 onMouseEnter={e => e.currentTarget.style.background = t.surface}
                 onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
              <div style={{ fontSize: 13, fontWeight: 600, color: t.primary, lineHeight: 1.3 }}>{a.title}</div>
              <div style={{ fontSize: 11, color: t.textMuted, marginTop: 2 }}>{a.category} · {a.readTime} phút đọc</div>
            </div>
          ))}
        </>
      )}
    </div>
  );
}

function Footer() {
  const { t } = useTheme();
  const { navigate } = useRouter();
  return (
    <footer style={{ background: t.navyDark, color: 'rgba(255,255,255,.7)', padding: '40px 32px 20px', marginTop: 40 }}>
      <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr', gap: 36 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <div style={{ width: 32, height: 32, borderRadius: 8, background: t.coral, display: 'grid', placeItems: 'center' }}>
              <ToothMark size={18} color="#fff"/>
            </div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 700, color: '#fff' }}>Kiến Thức Nha Khoa</div>
              <div style={{ fontSize: 10, opacity: 0.7, letterSpacing: 0.5, textTransform: 'uppercase' }}>Review · So sánh · Kiến thức</div>
            </div>
          </div>
          <p style={{ fontSize: 12.5, lineHeight: 1.6, margin: 0 }}>Cổng thông tin độc lập về nha khoa tại Việt Nam. Mọi review & bảng giá được thẩm định bởi đội ngũ biên tập có chứng chỉ hành nghề.</p>
        </div>
        {[
          { title: 'Khám phá', items: [['Phòng khám', '/clinics'], ['So sánh giá', '/services'], ['Đặt lịch', '/booking'], ['Kiến thức', '/articles']] },
          { title: 'Dịch vụ', items: [['Niềng răng', '/articles'], ['Implant', '/articles'], ['Tẩy trắng', '/articles'], ['Nhổ răng khôn', '/articles']] },
          { title: 'Về chúng tôi', items: [['Giới thiệu', '/about'], ['Quy trình thẩm định', '/about'], ['Liên hệ', '/about'], ['Bảo mật', '/about']] },
          { title: 'Hỗ trợ', items: [['FAQ', '/about'], ['Hotline 1900 6868', null], ['Email support', null]] },
        ].map(col => (
          <div key={col.title}>
            <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1, color: '#fff', marginBottom: 12 }}>{col.title}</div>
            {col.items.map(([label, path]) => (
              <div key={label} onClick={() => path && navigate(path)} style={{ fontSize: 12.5, padding: '5px 0', cursor: path ? 'pointer' : 'default', color: 'rgba(255,255,255,.65)' }}>
                {label}
              </div>
            ))}
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1400, margin: '28px auto 0', paddingTop: 18, borderTop: `1px solid rgba(255,255,255,.1)`, fontSize: 11.5, display: 'flex', justifyContent: 'space-between', color: 'rgba(255,255,255,.5)' }}>
        <span>© 2026 Kiến Thức Nha Khoa. Thông tin tham khảo — không thay thế tư vấn y khoa.</span>
        <span>Version 1.0 · Cập nhật 04/2026</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Footer });