// Header + Footer + small chrome

function Header({ onCompareOpen, compareCount, route, onPhotoSearch }) {
  const [q, setQ] = React.useState(route?.q || '');
  const onSubmit = (e) => {
    e.preventDefault();
    if (q.trim()) navigate(urlForSearch(q.trim()));
  };
  React.useEffect(() => { setQ(route?.q || ''); }, [route?.q]);

  return (
    <header className="header">
      <a href="#main" className="skip">İçeriğe geç</a>
      <div className="container header__inner">
        <a href="#/" className="brand" aria-label="kolaymarin anasayfa">
          <span className="brand__mark" aria-hidden="true"></span>
          <span>kolaymarin<small>·tr</small></span>
        </a>
        <form className="search-bar" role="search" onSubmit={onSubmit}>
          <Icon name="search" size={16} stroke={2} style={{ color: 'var(--km-ink-400)', flexShrink: 0 }} />
          <input
            type="search"
            placeholder="Ürün, marka veya model ara — veya fotoğraf yükleyin"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            aria-label="Arama"
          />
          <button
            type="button"
            className="cam-btn"
            onClick={(e) => { e.preventDefault(); onPhotoSearch?.(); }}
            aria-label="Foto ile ara"
            title="Foto ile ara"
          >
            <Icon name="camera" size={15} stroke={1.8}/>
          </button>
          <kbd>↵</kbd>
        </form>
        <nav className="header__nav" aria-label="Birincil">
          <a href="#/kategoriler">Kategoriler</a>
          <a href="#/markalar">Markalar</a>
          <a href="#/nasil-calisir">Nasıl çalışır</a>
        </nav>
        <button
          className="btn btn--ghost btn--sm"
          onClick={onCompareOpen}
          style={{ position: 'relative' }}
          aria-label={`Karşılaştırma sepeti — ${compareCount} ürün`}
        >
          <Icon name="compare" size={14} />
          <span style={{ display: 'none' }} className="hide-mob">Karşılaştır</span>
          {compareCount > 0 && (
            <span style={{
              background: 'var(--km-accent)', color: 'var(--km-ink-900)',
              fontSize: 11, fontWeight: 700, borderRadius: 999, padding: '1px 6px', minWidth: 18, textAlign: 'center'
            }}>{compareCount}</span>
          )}
        </button>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__cols">
          <div>
            <div className="brand" style={{ color: 'white', marginBottom: 12 }}>
              <span className="brand__mark" aria-hidden="true"></span>
              <span style={{ color: 'white' }}>kolaymarin<small style={{ color: 'var(--km-ink-400)' }}>·tr</small></span>
            </div>
            <p style={{ color: 'var(--km-ink-400)', fontSize: 13, lineHeight: 1.5, maxWidth: 320 }}>
              Türkiye'nin marine yedek parça karşılaştırma platformu. Stok ve fiyatları onlarca satıcıdan saatlik olarak topluyor, sizi en uygun teklife yönlendiriyoruz. Sepet yok, üyelik yok — sadece şeffaf karşılaştırma.
            </p>
          </div>
          <div>
            <h4>Keşfet</h4>
            <ul>
              <li><a href="#/kategoriler">Tüm kategoriler</a></li>
              <li><a href="#/markalar">Markalar</a></li>
              <li><a href="#/">En çok aranan</a></li>
              <li><a href="#/">En ucuz teklifler</a></li>
            </ul>
          </div>
          <div>
            <h4>Şirket</h4>
            <ul>
              <li><a href="#/">Hakkımızda</a></li>
              <li><a href="#/satici-basvuru">Satıcı başvurusu</a></li>
              <li><a href="#/nasil-calisir">Nasıl çalışır</a></li>
              <li><a href="#/">İletişim</a></li>
            </ul>
          </div>
          <div>
            <h4>Yasal</h4>
            <ul>
              <li><a href="#/">KVKK Aydınlatma</a></li>
              <li><a href="#/">Çerez politikası</a></li>
              <li><a href="#/">Kullanım koşulları</a></li>
              <li><a href="#/">Veri kaynakları</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 kolaymarin · Sepet yok, sadece karşılaştırma.</span>
          <span className="footer__bottom-meta">
            <span>Sayfa fiyatları satıcı sitesinde son onaylanmalıdır.</span>
            <a href="#/admin" className="footer__admin" title="Yalnızca yetkili personel">
              <Icon name="shield" size={11} stroke={1.8}/> Admin girişi
            </a>
          </span>
        </div>
      </div>
    </footer>
  );
}

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