// Category & Brand detail pages, plus 404

// Static guide content per category — would come from snapshot.contentBlocks[PROSE] in production
const CATEGORY_CONTENT = {
  'balik-bulucu': {
    desc: 'Tekneniz için balık bulucu ve chartplotter karşılaştırması. Garmin, Raymarine, Simrad ve Lowrance modellerinin güncel fiyatları onlarca satıcıda yan yana.',
    subcats: ['Sade Balık Bulucu', 'Chartplotter Combo', 'MFD (Multifunction Display)', 'Transducer', 'Aksesuar'],
    guide: [
      { h: 'Ekran boyutu nasıl seçilir?', p: 'Konsol genişliğiniz ve oturma mesafeniz iki ana faktör. 6-9 m teknede 7"-9" ekran rahat görüş için yeterli; 10 m üstü teknelerde 9"-12" tercih edilir. Kombo seçerken sonar + harita ekranını iki yarıya bölüp bölmeyeceğinizi düşünün.' },
      { h: 'Sonar (iskandil) teknolojileri', p: 'CHIRP geniş frekans bandı sayesinde geleneksel sonardan daha net hedef ayırt eder. ClearVü/SideVü tabanı fotoğraf gibi gösterir; balık üstünden ziyade yapı ve dip okumasında üstündür. Tekne tabanınızın türü transducer montaj seçeneklerini belirler.' },
      { h: 'Kolaymarin nasıl çalışıyor?', p: 'Her ürün için saatlik snapshot alıyoruz — fiyat, stok, kargo süresi ve son güncelleme zamanı. Sepet yok. Karar verdiğinizde sizi doğrudan satıcının sayfasına yönlendiriyoruz.' },
    ],
  },
  'capa-vinci': {
    desc: 'Dikey, yatay ve kombine çapa vinçleri 7-25 metre tekneler için. Lewmar, Quick, Maxwell ve Anchorlift modellerinin canlı stok ve fiyat karşılaştırması.',
    subcats: ['Dikey Vinç', 'Yatay Vinç', 'Kumanda Paneli', 'Yedek Motor'],
    guide: [
      { h: 'Vinç gücü nasıl hesaplanır?', p: 'Genel kural: çapa + zincirin toplam ağırlığının 3 katına eşit veya üzerinde çekme kapasitesi. 8mm zincir ve 12 kg çapa için 350-400W yeterli; 10mm zincir + 20 kg çapaya 700W ve üzeri gerekir.' },
      { h: 'Sağ veya sol dönüş?', p: 'Halat/zincir taşıyıcısının (gypsy) yönü teknenizin baş güvertesindeki delik konumuna göre belirlenir. Standart V700 sağ-yön. Tekne planınızı satıcınızla onaylayın.' },
    ],
  },
  'sintine-pompasi': {
    desc: 'Otomatik ve manuel sintine pompaları, anahtarlar ve aksesuarlar. Rule, Whale, Johnson Pump modelleri canlı fiyatlarla.',
    subcats: ['Otomatik Pompa', 'Manuel Pompa', 'Seviye Anahtarı', 'Hortum & Bağlantı'],
    guide: [
      { h: 'GPH (gallon per hour) ne demek?', p: 'Saatlik akış hızı. 6m altı teknelerde 500-800 GPH yeterli; 6-9m teknelerde 1100-1500 GPH; 9m üstünde 2000 GPH ve üzeri önerilir. İdeal olarak iki pompa: birincil + acil yedek.' },
    ],
  },
  'motor-parcalari': {
    desc: 'Yanmar, Volvo Penta, Mercury, Yamaha ve Suzuki için orijinal yedek parçalar — filtreler, bujiler, contalar ve yağ pompaları.',
    subcats: ['Yağ Filtresi', 'Yakıt Filtresi', 'Hava Filtresi', 'Buji', 'Kayış & Hortum', 'Conta'],
    guide: [
      { h: 'OEM ile aftermarket farkı', p: 'OEM (Original Equipment Manufacturer) parça motor üreticisinin etiketini taşır ve garanti üzerinde belirleyici olabilir. Aftermarket aynı kaliteyi sunabilir ancak garanti süresince OEM tercih ederiz.' },
    ],
  },
  'pervane': { desc: 'Alüminyum ve paslanmaz pervane, şaftlar ve aksesuarlar.', subcats: ['Alüminyum', 'Paslanmaz', 'Şaft'], guide: [] },
  'bakim-boya': { desc: 'Antifouling boyalar, primer, vernik ve bakım kimyasalları.', subcats: ['Antifouling', 'Primer', 'Vernik', 'Temizleyici'], guide: [] },
  'guvenlik': { desc: 'Can yelekleri, can simitleri, yangın söndürücüler ve VHF telsizler.', subcats: ['Can Yeleği', 'Can Simidi', 'Yangın', 'VHF Telsiz'], guide: [] },
  'halat-zincir': { desc: 'Demir halatları, çapa zincirleri, palamar halatları ve aksesuarlar.', subcats: ['Demir Halatı', 'Çapa Zinciri', 'Palamar', 'Bağlama Halatı'], guide: [] },
};

const BRAND_CONTENT = {
  'garmin': {
    desc: 'Amerikan menşeli, marin elektroniğinde dünya lideri. Echomap balık bulucu serisi, GPSMAP chartplotterleri ve quatix akıllı saat ailesi ile öne çıkar. Türkiye\'de 5+ doğrulanmış satıcıda 184 model.',
    founded: 1989, hq: 'Olathe, Kansas · ABD',
    categories: ['balik-bulucu', 'guvenlik'],
  },
  'raymarine': {
    desc: 'İngiltere kökenli marin elektronik markası. Axiom MFD serisi ve Quantum radar ailesi profesyonel teknede yaygın.',
    founded: 1923, hq: 'Fareham · İngiltere',
    categories: ['balik-bulucu'],
  },
  'lewmar': {
    desc: 'Çapa vinçleri, kapak menteşeleri ve güverte donanımında 70 yılı aşkın geçmiş.',
    founded: 1946, hq: 'Havant · İngiltere',
    categories: ['capa-vinci', 'halat-zincir'],
  },
  'yanmar': {
    desc: 'Yelkenli ve trolerlerde standart dizel motor markası. Orijinal yedek parça desteği 30+ yıl.',
    founded: 1912, hq: 'Osaka · Japonya',
    categories: ['motor-parcalari'],
  },
  'mercury': {
    desc: 'Outboard motor ve pervane segmentinde dünya pazarında ilk üç.',
    founded: 1939, hq: 'Fond du Lac, Wisconsin · ABD',
    categories: ['motor-parcalari', 'pervane'],
  },
  'quicksilver': { desc: 'Mercury\'nin bakım ve aksesuar markası — antifouling boyadan motor yağına.', founded: 1972, hq: 'Wisconsin · ABD', categories: ['bakim-boya', 'motor-parcalari'] },
  'volvo-penta': { desc: 'Şaftlı dizel ve sterndrive motor sistemleri.', founded: 1907, hq: 'Göteborg · İsveç', categories: ['motor-parcalari'] },
  'simrad': { desc: 'Profesyonel balıkçılık ve yelken yarış elektroniği.', founded: 1946, hq: 'Egersund · Norveç', categories: ['balik-bulucu'] },
  'ngk': { desc: 'Buji ve ateşleme parçalarında küresel standart.', founded: 1936, hq: 'Nagoya · Japonya', categories: ['motor-parcalari'] },
  'rule': { desc: 'Sintine pompası segmentinin altın standardı; Xylem grubu altında.', founded: 1956, hq: 'Massachusetts · ABD', categories: ['sintine-pompasi'] },
};

// ===== Category Page =====
function CategoryPage({ slug, onCompareToggle, compareSet }) {
  const cat = CATEGORIES.find(c => c.slug === slug);
  const content = CATEGORY_CONTENT[slug];
  const [subcatActive, setSubcatActive] = React.useState(null);
  const [brandFilter, setBrandFilter] = React.useState(new Set());

  if (!cat) return <NotFound/>;

  let products = PRODUCTS.filter(p => p.categorySlug === slug);
  // augment with more "mock" products from other slugs if list is too short (for show)
  let related = products.length > 0 ? products : PRODUCTS;

  const brandFacet = {};
  related.forEach(p => brandFacet[p.brand] = (brandFacet[p.brand] || 0) + 1);
  const brandList = Object.entries(brandFacet).sort((a, b) => b[1] - a[1]);

  // apply brand filter
  let filtered = brandFilter.size ? related.filter(p => brandFilter.has(p.brand)) : related;

  const cheapest = [...filtered].sort((a, b) => productLowest(a) - productLowest(b)).slice(0, 5);

  // category-level stats
  const totalOffers = filtered.reduce((sum, p) => sum + p.offers.length, 0);
  const minPrice = filtered.length ? Math.min(...filtered.map(productLowest)) : 0;
  const merchantSet = new Set();
  filtered.forEach(p => p.offers.forEach(o => merchantSet.add(o.merchantId)));

  // Most freshly scanned offer across category — "alive engine" signal
  const allOffers = filtered.flatMap(p => p.offers);
  const freshestOffer = allOffers.length
    ? allOffers.reduce((a, b) => new Date(a.lastSeenAt) > new Date(b.lastSeenAt) ? a : b)
    : null;

  // Last hour "activity" — deterministic mock based on data scale
  const hourlyUpdates = Math.max(8, Math.round(totalOffers * 0.04));
  const dayStockChanges = Math.max(3, Math.round(filtered.length * 0.6));

  // "Price drops in 24h" — deterministic: use the bottom 3 products with biggest spread between low and avg
  const priceDrops = [...filtered]
    .map(p => {
      const low = productLowest(p);
      const avg = (p.statistics?.avg30) || (productHighest(p) + low) / 2;
      const drop = Math.round(((avg - low) / avg) * 100);
      return { p, low, drop };
    })
    .filter(x => x.drop > 1)
    .sort((a, b) => b.drop - a.drop)
    .slice(0, 3);

  // "Most compared" — deterministic by offer count
  const mostCompared = [...filtered].sort((a, b) => b.offers.length - a.offers.length).slice(0, 3);

  return (
    <main id="main" data-screen-label={`Category ${cat.name}`}>
      <section className="detail-hero">
        <div className="container">
          <Breadcrumbs items={['Anasayfa', 'Kategoriler', cat.name]}/>

          <div className="detail-hero__inner">
            <div>
              <div className="detail-hero__eyebrow">
                <Icon name={cat.icon} size={11} stroke={2}/> Kategori
              </div>
              <h1 className="detail-hero__title">{cat.name}</h1>
              <p className="detail-hero__lede">{content?.desc}</p>
            </div>
            <div className="detail-hero__metrics">
              <div className="detail-hero__metric">
                <div className="detail-hero__metric-num tabular">{formatNum(cat.count)}</div>
                <div className="detail-hero__metric-lbl">ürün izleniyor</div>
              </div>
              <div className="detail-hero__metric">
                <div className="detail-hero__metric-num tabular">{merchantSet.size}</div>
                <div className="detail-hero__metric-lbl">marine mağazada</div>
              </div>
              <div className="detail-hero__metric">
                <div className="detail-hero__metric-num tabular">{formatPrice(minPrice)}</div>
                <div className="detail-hero__metric-lbl">en uygun fiyat</div>
              </div>
            </div>
          </div>

          {/* live activity ticker — Ata: "canlı veri motoru hissi" */}
          <div className="cat-pulse" aria-label="Canlı tarama aktivitesi">
            <span className="cat-pulse__dot" aria-hidden="true"></span>
            <span>
              Son saatte <strong className="tabular">{hourlyUpdates}</strong> fiyat güncellendi
              <span className="cat-pulse__sep">·</span>
              Son 24 saatte <strong className="tabular">{dayStockChanges}</strong> stok değişti
              {freshestOffer && (
                <>
                  <span className="cat-pulse__sep">·</span>
                  En taze tarama <strong>{timeAgoTr(freshestOffer.lastSeenAt)}</strong>
                </>
              )}
            </span>
          </div>
        </div>
      </section>

      <div className="container">
        {content?.subcats?.length > 0 && (
          <section className="sec" style={{ marginTop: 32 }}>
            <div className="chip-row">
              <button
                className={`chip ${subcatActive === null ? 'chip--on' : ''}`}
                onClick={() => setSubcatActive(null)}
              >Tümü</button>
              {content.subcats.map(s => (
                <button
                  key={s}
                  className={`chip ${subcatActive === s ? 'chip--on' : ''}`}
                  onClick={() => setSubcatActive(s)}
                >{s}</button>
              ))}
            </div>
          </section>
        )}

        <div className="detail-grid">
          <div>
            <section className="sec" style={{ marginTop: 0 }}>
              <div className="sec__head">
                <h2 className="sec__title">Şu an en uygun {filtered.length > 0 ? cheapest.length : 0} teklif</h2>
                <span className="sec__sub">Saatlik fiyat snapshot · en düşüğe göre sıralı</span>
              </div>

              {cheapest.length > 0 ? (
                <div className="cheapest-rail">
                  {cheapest.map((p, i) => {
                    const low = productLowest(p);
                    const cheapestOffer = p.offers.find(o => o.price === low);
                    const newestOffer = p.offers.reduce(
                      (a, b) => new Date(a.lastSeenAt) > new Date(b.lastSeenAt) ? a : b
                    );
                    const fastest = p.offers
                      .filter(o => o.stockStatus !== 'PREORDER')
                      .sort((a, b) => parseInt(a.shippingDays) - parseInt(b.shippingDays))[0];
                    return (
                      <a href={urlForProduct(p)} className={`cheapest-row ${i === 0 ? 'cheapest-row--lead' : ''}`} key={p.shortSlug}>
                        <span className={`cheapest-row__num ${i === 0 ? 'cheapest-row__num--top' : ''}`}>#{i+1}</span>
                        <div className="cheapest-row__img"/>
                        <div className="cheapest-row__core">
                          <div className="cheapest-row__brand">{p.brand}</div>
                          <div className="cheapest-row__name">{p.h1}</div>
                          <div className="cheapest-row__meta">
                            <span className="cheapest-row__meta-item">
                              <Icon name="check-circle" size={11} stroke={2}/> Son tarama {timeAgoTr(newestOffer.lastSeenAt)}
                            </span>
                            {fastest && (
                              <span className="cheapest-row__meta-item">
                                <Icon name="truck" size={11} stroke={1.8}/> {fastest.shippingDays}
                              </span>
                            )}
                          </div>
                          {i === 0 && (
                            <div className="cheapest-row__reasons" aria-label="Neden #1">
                              <span className="reason-pill reason-pill--good">
                                <Icon name="check" size={10} stroke={3}/> En düşük fiyat
                              </span>
                              <span className="reason-pill">
                                {p.offers.length} marine satıcısında
                              </span>
                              <span className="reason-pill">
                                {merchantById(cheapestOffer.merchantId).name}'da
                              </span>
                            </div>
                          )}
                        </div>
                        <div className="cheapest-row__price tabular">
                          {formatPrice(low)}
                          <small>{p.offers.length} mağazadan</small>
                        </div>
                        <div className="cheapest-row__cta"><Icon name="arrow-right" size={14}/></div>
                      </a>
                    );
                  })}
                </div>
              ) : (
                <p style={{ color: 'var(--km-ink-500)', fontSize: 14 }}>Bu filtrelerle eşleşen ürün bulunamadı.</p>
              )}
            </section>

            <section className="sec">
              <div className="sec__head">
                <h2 className="sec__title">Tüm ürünler</h2>
                <span className="sec__sub">{filtered.length} ürün · canlı snapshot</span>
              </div>
              <CategoryProductGrid products={filtered} onCompareToggle={onCompareToggle} compareSet={compareSet}/>
            </section>

            {content?.guide?.length > 0 && (
              <section className="sec">
                <div className="sec__head">
                  <h2 className="sec__title">{cat.name} satın alma kılavuzu</h2>
                </div>
                <div className="prose">
                  {content.guide.map((g, i) => (
                    <React.Fragment key={i}>
                      <h3>{g.h}</h3>
                      <p>{g.p}</p>
                    </React.Fragment>
                  ))}
                </div>
              </section>
            )}
          </div>

          <aside className="cat-aside">
            {brandList.length > 0 && (
              <div className="aside-card">
                <h3 className="aside-card__title">Markaya göre filtrele</h3>
                <div className="chip-row">
                  {brandList.map(([b, count]) => (
                    <button
                      key={b}
                      className="brand-chip"
                      onClick={() => {
                        const next = new Set(brandFilter);
                        if (next.has(b)) next.delete(b); else next.add(b);
                        setBrandFilter(next);
                      }}
                      style={brandFilter.has(b) ? { borderColor: 'var(--km-deep)', color: 'var(--km-deep)', background: 'var(--km-deep-soft)' } : {}}
                    >
                      {b} <span className="brand-chip__count tabular">{count}</span>
                    </button>
                  ))}
                </div>
              </div>
            )}

            {priceDrops.length > 0 && (
              <div className="aside-card aside-card--insight">
                <h3 className="aside-card__title">
                  <span className="aside-card__title-dot aside-card__title-dot--good"></span>
                  Son 24 saatte fiyatı düşenler
                </h3>
                <ul className="insight-list">
                  {priceDrops.map(({ p, low, drop }) => (
                    <li key={p.shortSlug}>
                      <a href={urlForProduct(p)} className="insight-row">
                        <div className="insight-row__name">
                          <span className="insight-row__brand">{p.brand}</span>
                          {p.h1.replace(`${p.brand} `, '').slice(0, 40)}
                          {p.h1.length > 40 && '…'}
                        </div>
                        <div className="insight-row__delta">
                          <span className="insight-row__price tabular">{formatPrice(low)}</span>
                          <span className="insight-row__pct tabular">−{drop}%</span>
                        </div>
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            )}

            {mostCompared.length > 0 && (
              <div className="aside-card aside-card--insight">
                <h3 className="aside-card__title">En çok karşılaştırılan</h3>
                <ul className="insight-list">
                  {mostCompared.map((p, i) => (
                    <li key={p.shortSlug}>
                      <a href={urlForProduct(p)} className="insight-row">
                        <span className="insight-row__rank tabular">{i+1}</span>
                        <div className="insight-row__name">
                          <span className="insight-row__brand">{p.brand}</span>
                          {p.h1.replace(`${p.brand} `, '').slice(0, 38)}
                          {p.h1.length > 38 && '…'}
                        </div>
                        <span className="insight-row__merchants tabular">{p.offers.length}</span>
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            )}

            <div className="aside-card aside-card--guarantee">
              <h3 className="aside-card__title">Kolaymarin garantisi</h3>
              <ul className="guarantee-list">
                <li>
                  <Icon name="check" size={12} stroke={3}/>
                  <span><strong>Saatlik fiyat snapshot</strong> — her teklifin son tarama zamanı görünür</span>
                </li>
                <li>
                  <Icon name="check" size={12} stroke={3}/>
                  <span><strong>Sepet yok, üyelik yok</strong> — satışı her zaman satıcı yapar</span>
                </li>
                <li>
                  <Icon name="check" size={12} stroke={3}/>
                  <span><strong>KVKK uyumlu</strong> — ham IP saklamaz, sadece anonim trafik metriği</span>
                </li>
              </ul>
            </div>

            <div className="aside-card aside-card--soft">
              <h3 className="aside-card__title">İlgili kategoriler</h3>
              <ul style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                {CATEGORIES.filter(c => c.slug !== slug).slice(0, 5).map(c => (
                  <li key={c.slug}>
                    <a href={urlForCategory(c.slug)} className="related-cat-link">
                      <span><Icon name={c.icon} size={12} stroke={1.8} style={{ marginRight: 8, color: 'var(--km-deep)' }}/>{c.name}</span>
                      <span className="tabular" style={{ fontSize: 11, color: 'var(--km-ink-400)' }}>{formatNum(c.count)}</span>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </aside>
        </div>
      </div>
    </main>
  );
}

// Denser product card grid — shows snapshot freshness, merchant count, price spread
function CategoryProductGrid({ products, onCompareToggle, compareSet }) {
  return (
    <div className="cat-prod-grid">
      {products.map(p => {
        const low = productLowest(p);
        const high = productHighest(p);
        const spread = Math.round(((high - low) / low) * 100);
        const inStockCount = p.offers.filter(o => o.stockStatus === 'IN_STOCK').length;
        const newestOffer = p.offers.reduce(
          (a, b) => new Date(a.lastSeenAt) > new Date(b.lastSeenAt) ? a : b
        );
        const inCompare = compareSet.has(p.shortSlug);
        return (
          <a href={urlForProduct(p)} className="cat-prod-card" key={p.shortSlug}>
            <div className="cat-prod-card__img" style={p.imageUrl ? {
              backgroundImage: `url(${p.imageUrl})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            } : undefined}>
              <button
                className={`prod-card__compare ${inCompare ? 'prod-card__compare--on' : ''}`}
                onClick={(e) => { e.preventDefault(); onCompareToggle(p.shortSlug); }}
                aria-label={inCompare ? 'Karşılaştırmadan çıkar' : 'Karşılaştırmaya ekle'}
                title="Karşılaştırmaya ekle"
              >
                {inCompare ? <Icon name="check" size={14} stroke={2.4}/> : <Icon name="plus" size={14} stroke={2.4}/>}
              </button>
              <span className="cat-prod-card__fresh">
                <span className="cat-prod-card__fresh-dot" aria-hidden="true"></span>
                {timeAgoTr(newestOffer.lastSeenAt)}
              </span>
            </div>
            <div className="cat-prod-card__body">
              <div className="cat-prod-card__brand">{p.brand}</div>
              <div className="cat-prod-card__name">{p.h1.replace(`${p.brand} `, '')}</div>
              <div className="cat-prod-card__priceRow">
                <div className="cat-prod-card__price tabular">
                  <small>başlangıç</small>
                  {formatPrice(low)}
                </div>
                {spread > 1 && (
                  <span className="cat-prod-card__spread tabular" title={`En düşük ile en yüksek arası ${spread}%`}>
                    %{spread} fark
                  </span>
                )}
              </div>
              <div className="cat-prod-card__merch">
                <span><strong className="tabular">{p.offers.length}</strong> mağaza</span>
                <span className="cat-prod-card__dot">·</span>
                <span><strong className="tabular">{inStockCount}</strong> stokta</span>
              </div>
            </div>
          </a>
        );
      })}
    </div>
  );
}

// ===== Brand Page =====
function BrandPage({ slug, onCompareToggle, compareSet }) {
  const brand = POPULAR_BRANDS.find(b => b.slug === slug) || { slug, name: slug.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase()), products: 100 };
  const content = BRAND_CONTENT[slug] || { desc: `${brand.name} ürünlerinin satıcı karşılaştırması.`, categories: [] };

  let products = PRODUCTS.filter(p => p.brandSlug === slug);
  if (products.length === 0) products = PRODUCTS.slice(0, 4);

  // merchant distribution across this brand
  const merchCount = {};
  products.forEach(p => p.offers.forEach(o => merchCount[o.merchantId] = (merchCount[o.merchantId] || 0) + 1));
  const merchSorted = Object.entries(merchCount).sort((a, b) => b[1] - a[1]).map(([id, c]) => ({ ...merchantById(id), count: c }));
  const maxCount = Math.max(...Object.values(merchCount), 1);

  const seal = brand.name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
  const countryCode = ({
    'garmin': 'USA', 'raymarine': 'GBR', 'lewmar': 'GBR', 'yanmar': 'JPN', 'mercury': 'USA',
    'quicksilver': 'USA', 'volvo-penta': 'SWE', 'simrad': 'NOR', 'ngk': 'JPN', 'rule': 'USA',
  })[slug] || 'INT';

  // Partner / authorized distributor in TR (highest tier merchant carrying this brand)
  const partner = merchSorted.find(m => m.tier === 'PARTNER');

  // ===== Marine Intelligence — deterministic scores from data =====
  const totalOffers = products.reduce((s, p) => s + p.offers.length, 0);
  const inStockOffers = products.reduce((s, p) => s + p.offers.filter(o => o.stockStatus === 'IN_STOCK').length, 0);
  const stockScore = totalOffers ? Math.round((inStockOffers / totalOffers) * 100) : 0;

  // Türkiye bulunabilirlik = merchant count vs MERCHANTS total
  const allMerchantsCount = (window.MERCHANTS || []).length || 12;
  const availabilityScore = Math.round((merchSorted.length / allMerchantsCount) * 100);

  // Ortalama teslim (median of shippingDays first number)
  const shipDays = products.flatMap(p => p.offers).map(o => parseInt((o.shippingDays || '99').split('-')[0]) || 99).sort((a, b) => a - b);
  const medianShip = shipDays[Math.floor(shipDays.length / 2)] || 0;

  // Fiyat stabilitesi — std-dev proxy
  const priceVolatility = (() => {
    if (!products.length) return 0;
    const ratios = products.map(p => {
      const low = productLowest(p), high = productHighest(p);
      return low ? (high - low) / low : 0;
    });
    const avg = ratios.reduce((s, x) => s + x, 0) / ratios.length;
    return Math.round((1 - Math.min(avg, 0.5) / 0.5) * 100);
  })();

  // Daily activity for the brand
  const todayPriceChanges = Math.max(2, Math.round(totalOffers * 0.18));
  const month30Change = (Math.random() < 0.5 ? -1 : 1) * (1 + (slug.charCodeAt(0) % 5));

  // "Kimler için uygun?" — derived per brand, falls back to generic
  const idealForMap = {
    'garmin': ['Balıkçılık odaklı kullanıcılar', 'Touchscreen MFD isteyenler', 'Orta-üst segment 7-12 m tekneler', 'Quatix akıllı saat ekosistemi'],
    'raymarine': ['Profesyonel ve uzun seyir tekneleri', 'Radar entegrasyonu öncelikli', 'Quantum CHIRP isteyen avcılar', 'Açık deniz teknesi'],
    'lewmar': ['7-25 m yelken/motor tekneleri', 'Vinç + güverte donanımı paketi', 'Onarım yedek parça erişimi kritik'],
    'yanmar': ['Yelken ve troler tekneler', 'Orijinal yedek parça öncelikli', 'Uzun ömür dizel kullanım'],
    'mercury': ['Outboard motor sahipleri', '9.9-300 HP segment', 'Geniş satıcı ağı isteyenler'],
    'volvo-penta': ['Sterndrive ve şaftlı dizel motorlar', 'OEM yedek parça', 'Aksiyel ihtiyaçlar (jeneratör + tahrik)'],
    'simrad': ['Profesyonel balıkçılık', 'Yelken yarış elektroniği', 'NSS evo3S ekosistemi'],
  };
  const idealFor = idealForMap[slug] || [`${brand.name} ürünlerini tercih edenler`, 'Marine elektroniği / donanımı bakım kullanıcıları', 'OEM kalite önceliği'];

  const vsMap = {
    'garmin': [
      { brand: 'Raymarine', adv: 'Daha geniş Türkiye satıcı ağı; touch UI rakibinden daha güçlü' },
      { brand: 'Simrad', adv: 'Daha geniş chartplotter ürün gamı, daha uygun fiyat segmenti' },
    ],
    'raymarine': [
      { brand: 'Garmin', adv: 'Daha güçlü sonar/radar ekosistemi; Axiom MFD avantajı' },
      { brand: 'Simrad', adv: 'Profesyonel kullanım için NMEA 2000 derinliği' },
    ],
    'yanmar': [
      { brand: 'Volvo Penta', adv: 'Yelkenli tekne segmentinde standart; uzun yedek parça desteği' },
    ],
    'mercury': [
      { brand: 'Yamaha', adv: 'Daha geniş yetkili servis ağı; yüksek HP segmentinde lider' },
    ],
  };
  const vsBrands = vsMap[slug] || [];

  return (
    <main id="main" data-screen-label={`Brand ${brand.name}`}>
      <section className="detail-hero">
        <div className="container">
          <Breadcrumbs items={['Anasayfa', 'Markalar', brand.name]}/>

          <div className="detail-hero__inner">
            <div className="brand-hero__id">
              <div className="brand-seal">
                {seal}
                <span className="brand-seal__country">{countryCode}</span>
              </div>
              <div>
                <div className="detail-hero__eyebrow">Marka</div>
                <h1 className="detail-hero__title">{brand.name}</h1>
                <p className="detail-hero__lede">{content.desc}</p>
                <div className="brand-id__chips">
                  {content.founded && <span className="brand-id-chip">EST. {content.founded}</span>}
                  {content.hq && <span className="brand-id-chip">{content.hq.split('·')[0].trim().toUpperCase()}</span>}
                  {partner && (
                    <span className="brand-id-chip brand-id-chip--partner">
                      <Icon name="check" size={10} stroke={3}/> Yetkili Distribütör
                    </span>
                  )}
                </div>
              </div>
            </div>
            <div className="detail-hero__metrics">
              <div className="detail-hero__metric">
                <div className="detail-hero__metric-num tabular">{formatNum(brand.products)}</div>
                <div className="detail-hero__metric-lbl">ürün izleniyor</div>
              </div>
              <div className="detail-hero__metric">
                <div className="detail-hero__metric-num tabular">{merchSorted.length}</div>
                <div className="detail-hero__metric-lbl">marine mağazada</div>
              </div>
              <div className="detail-hero__metric">
                <div className="detail-hero__metric-num tabular">{content.categories?.length || 1}</div>
                <div className="detail-hero__metric-lbl">kategoride</div>
              </div>
            </div>
          </div>

          {/* Live activity ticker — black "instrumentation panel" */}
          <div className="brand-activity">
            <div className="brand-activity__stat">
              <span className="brand-activity__num tabular">{todayPriceChanges}</span>
              <span className="brand-activity__lbl">bugün fiyat güncellendi</span>
            </div>
            <div className="brand-activity__stat">
              <span className={`brand-activity__num tabular ${month30Change < 0 ? 'brand-activity__num--down' : 'brand-activity__num--up'}`}>
                {month30Change < 0 ? '↓' : '↑'} {Math.abs(month30Change)}%
              </span>
              <span className="brand-activity__lbl">30 günlük ort. değişim</span>
            </div>
            <div className="brand-activity__stat">
              <span className="brand-activity__num tabular">{inStockOffers}</span>
              <span className="brand-activity__lbl">aktif stokta teklif</span>
            </div>
            <div className="brand-activity__stat">
              <span className="brand-activity__num tabular">{medianShip}-{medianShip + 2} gün</span>
              <span className="brand-activity__lbl">ortalama teslim süresi</span>
            </div>
          </div>
        </div>
      </section>

      <div className="container">
        {/* Marine Intelligence — scorecard */}
        <section className="sec" style={{ marginTop: 32 }}>
          <div className="sec__head">
            <h2 className="sec__title">Marine Intelligence</h2>
            <span className="sec__sub">{brand.name} markasının Türkiye snapshot'ı</span>
          </div>
          <div className="mi-grid">
            <div className="mi-card">
              <div className="mi-card__lbl">Stok skoru</div>
              <div className="mi-card__num tabular">{stockScore}<small>/100</small></div>
              <div className="mi-card__bar"><div className="mi-card__bar-fill" style={{ width: stockScore + '%' }}/></div>
              <div className="mi-card__sub">Tekliflerin <strong>%{stockScore}</strong>'i şu an stokta</div>
            </div>
            <div className="mi-card">
              <div className="mi-card__lbl">Türkiye bulunabilirlik</div>
              <div className="mi-card__num tabular">{availabilityScore}<small>/100</small></div>
              <div className="mi-card__bar"><div className="mi-card__bar-fill" style={{ width: availabilityScore + '%' }}/></div>
              <div className="mi-card__sub">{merchSorted.length} marine mağazada listeleniyor</div>
            </div>
            <div className="mi-card">
              <div className="mi-card__lbl">Ortalama teslim</div>
              <div className="mi-card__num tabular">{medianShip}<small>iş günü</small></div>
              <div className="mi-card__bar"><div className="mi-card__bar-fill" style={{ width: Math.max(20, 100 - medianShip * 10) + '%' }}/></div>
              <div className="mi-card__sub">stoktaki tekliflerin medyanı</div>
            </div>
            <div className="mi-card">
              <div className="mi-card__lbl">Fiyat stabilitesi</div>
              <div className="mi-card__num tabular">{priceVolatility}<small>/100</small></div>
              <div className="mi-card__bar"><div className="mi-card__bar-fill" style={{ width: priceVolatility + '%' }}/></div>
              <div className="mi-card__sub">son 30 günde fiyat oynaklığı</div>
            </div>
          </div>
        </section>

        {/* "Kimler için uygun?" + "Marka kıyası" */}
        <section className="sec">
          <div className="brand-fit">
            <div className="fit-card">
              <h3>
                <span className="fit-card__icon"><Icon name="check" size={14} stroke={2.4}/></span>
                {brand.name} kimler için uygun?
              </h3>
              <ul className="fit-list">
                {idealFor.map((line, i) => (
                  <li key={i}>
                    <Icon name="check" size={14} stroke={2.4}/>
                    <span>{line}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="fit-card vs-card">
              <h3 style={{ marginBottom: 8 }}>
                <span className="fit-card__icon"><Icon name="compare" size={14} stroke={2}/></span>
                Alternatif markalar
              </h3>
              {vsBrands.length > 0 ? vsBrands.map((vs, i) => (
                <div className="vs-row" key={i}>
                  <div className="vs-row__brand">{brand.name}</div>
                  <div className="vs-row__sep">vs</div>
                  <div>
                    <div className="vs-row__brand"><a href={`#/marka/${vs.brand.toLowerCase()}`}>{vs.brand}</a></div>
                    <div className="vs-row__advantage">{vs.adv}</div>
                  </div>
                </div>
              )) : (
                <p style={{ fontSize: 13, color: 'var(--km-ink-500)' }}>
                  {brand.name} için aktif kıyas verisi yakında. Karşılaştırmaya bir {brand.name} ürünü ekleyip rakipleriyle yan yana koyabilirsiniz.
                </p>
              )}
            </div>
          </div>
        </section>

        <div className="detail-grid">
          <div>
            {content.categories?.length > 0 && (
              <section className="sec" style={{ marginTop: 0 }}>
                <div className="sec__head">
                  <h2 className="sec__title">En popüler {brand.name} kategorileri</h2>
                  <span className="sec__sub">Marka → kategori → ürün akışı</span>
                </div>
                <div className="brand-cover-grid">
                  {content.categories.map(cslug => {
                    const c = CATEGORIES.find(x => x.slug === cslug);
                    if (!c) return null;
                    return (
                      <a href={urlForCategory(c.slug)} className="brand-cover" key={c.slug}>
                        <div className="brand-cover__seal" style={{ background: 'var(--km-deep-soft)' }}>
                          <Icon name={c.icon} size={20} stroke={1.8}/>
                        </div>
                        <div className="brand-cover__name">{c.name}</div>
                        <div className="brand-cover__count tabular">{formatNum(c.count)} ürün</div>
                      </a>
                    );
                  })}
                </div>
              </section>
            )}

            <section className="sec">
              <div className="sec__head">
                <h2 className="sec__title">Öne çıkan ürünler</h2>
                <span className="sec__sub">En çok karşılaştırılan {brand.name} modelleri</span>
              </div>
              <CategoryProductGrid products={products} onCompareToggle={onCompareToggle} compareSet={compareSet}/>
            </section>

            <section className="sec">
              <div className="sec__head">
                <h2 className="sec__title">{brand.name} hangi satıcılarda?</h2>
                <span className="sec__sub">Bu markaya ait teklif dağılımı</span>
              </div>
              <div className="merch-table">
                {merchSorted.map(m => (
                  <div className="merch-row" key={m.id}>
                    <div className="merch-row__logo">{m.logo}</div>
                    <div>
                      <div className="merch-row__name">{m.name} {m.tier === 'PARTNER' && <span className="chip chip--solid" style={{ fontSize: 10, padding: '1px 7px', marginLeft: 6 }}>Partner</span>}</div>
                      <div className="merch-row__loc">{m.location}</div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, fontSize: 12, color: 'var(--km-ink-500)' }}>
                        <Icon name="star" size={11} stroke={0} style={{ fill: 'var(--km-accent)', color: 'var(--km-accent)' }}/>
                        {m.rating}
                      </span>
                    </div>
                    <div className="merch-row__bar">
                      <div className="merch-row__bar-fill" style={{ width: `${(m.count / maxCount) * 100}%` }}/>
                    </div>
                    <span className="merch-row__count">{m.count}</span>
                  </div>
                ))}
              </div>
            </section>
          </div>

          <aside className="cat-aside">
            {partner && (
              <div className="distributor-card">
                <div className="distributor-card__lbl">
                  <Icon name="check" size={8} stroke={4}/>
                  Türkiye Yetkili Distribütörü
                </div>
                <div className="distributor-card__name">{partner.name}</div>
                <div className="distributor-card__meta">
                  {partner.location} · ★ {partner.rating} · {partner.count} {brand.name} ürünü
                </div>
              </div>
            )}

            <div className="aside-card">
              <h3 className="aside-card__title">Hızlı bilgi</h3>
              <dl style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <dt style={{ color: 'var(--km-ink-500)' }}>Ürün sayısı</dt>
                  <dd style={{ fontWeight: 600 }} className="tabular">{formatNum(brand.products)}</dd>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <dt style={{ color: 'var(--km-ink-500)' }}>Aktif marine mağaza</dt>
                  <dd style={{ fontWeight: 600 }} className="tabular">{merchSorted.length}</dd>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <dt style={{ color: 'var(--km-ink-500)' }}>Bugün fiyat güncelleme</dt>
                  <dd style={{ fontWeight: 600 }} className="tabular">{todayPriceChanges}</dd>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <dt style={{ color: 'var(--km-ink-500)' }}>Ortalama teslim</dt>
                  <dd style={{ fontWeight: 600 }} className="tabular">{medianShip}-{medianShip + 2} gün</dd>
                </div>
              </dl>
            </div>

            <div className="aside-card aside-card--soft">
              <h3 className="aside-card__title">Diğer markalar</h3>
              <ul style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                {POPULAR_BRANDS.filter(b => b.slug !== slug).slice(0, 6).map(b => (
                  <li key={b.slug}>
                    <a href={`#/marka/${b.slug}`} className="related-cat-link">
                      <span style={{ fontWeight: 500 }}>{b.name}</span>
                      <span style={{ fontSize: 11, color: 'var(--km-ink-400)' }} className="tabular">{b.products}</span>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </aside>
        </div>
      </div>
    </main>
  );
}

// ===== Brands Index Page =====
// Brand metadata — country code + product family + auth-distributor flag
const BRAND_META = {
  'garmin':      { country: 'USA', family: 'Elektronik',  founded: 1989, hq: 'Olathe, Kansas' },
  'raymarine':   { country: 'GBR', family: 'Elektronik',  founded: 1923, hq: 'Fareham' },
  'simrad':      { country: 'NOR', family: 'Elektronik',  founded: 1946, hq: 'Egersund' },
  'lowrance':    { country: 'USA', family: 'Elektronik',  founded: 1957, hq: 'Tulsa' },
  'yanmar':      { country: 'JPN', family: 'Motor',       founded: 1912, hq: 'Osaka' },
  'mercury':     { country: 'USA', family: 'Motor',       founded: 1939, hq: 'Fond du Lac' },
  'volvo-penta': { country: 'SWE', family: 'Motor',       founded: 1907, hq: 'Göteborg' },
  'yamaha':      { country: 'JPN', family: 'Motor',       founded: 1955, hq: 'Iwata' },
  'suzuki':      { country: 'JPN', family: 'Motor',       founded: 1909, hq: 'Hamamatsu' },
  'ngk':         { country: 'JPN', family: 'Motor',       founded: 1936, hq: 'Nagoya' },
  'lewmar':      { country: 'GBR', family: 'Donanım',     founded: 1946, hq: 'Havant' },
  'quick':       { country: 'ITA', family: 'Donanım',     founded: 1985, hq: 'Ravenna' },
  'maxwell':     { country: 'NZL', family: 'Donanım',     founded: 1969, hq: 'Auckland' },
  'rule':        { country: 'USA', family: 'Sintine',     founded: 1956, hq: 'Massachusetts' },
  'whale':       { country: 'GBR', family: 'Sintine',     founded: 1810, hq: 'Bangor' },
  'quicksilver': { country: 'USA', family: 'Bakım & Boya', founded: 1972, hq: 'Wisconsin' },
};

const BRAND_FAMILIES = ['Elektronik', 'Motor', 'Donanım', 'Sintine', 'Bakım & Boya'];

function BrandsIndexPage() {
  const [familyFilter, setFamilyFilter] = React.useState(null);
  const [sortBy, setSortBy] = React.useState('products');

  // PARTNER merchant set — brands with any partner-tier merchant in their offers
  const partnerBrands = new Set();
  PRODUCTS.forEach(p => {
    if (p.offers.some(o => merchantById(o.merchantId).tier === 'PARTNER')) {
      partnerBrands.add(p.brandSlug);
    }
  });

  // merchant coverage per brand
  const brandMerchants = {};
  PRODUCTS.forEach(p => {
    if (!brandMerchants[p.brandSlug]) brandMerchants[p.brandSlug] = new Set();
    p.offers.forEach(o => brandMerchants[p.brandSlug].add(o.merchantId));
  });

  // augment + filter + sort
  let brands = POPULAR_BRANDS.map(b => {
    const meta = BRAND_META[b.slug] || {};
    return {
      ...b,
      ...meta,
      isPartner: partnerBrands.has(b.slug),
      merchantCount: brandMerchants[b.slug]?.size || Math.max(1, Math.round(b.products / 50)),
      seal: b.name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase(),
    };
  });

  if (familyFilter) brands = brands.filter(b => b.family === familyFilter);
  brands = brands.sort((a, b) => {
    if (sortBy === 'products') return b.products - a.products;
    if (sortBy === 'name') return a.name.localeCompare(b.name);
    if (sortBy === 'merchants') return b.merchantCount - a.merchantCount;
    return 0;
  });

  const totalProducts = POPULAR_BRANDS.reduce((s, b) => s + b.products, 0);

  return (
    <main id="main" data-screen-label="Brands Index">
      <section className="detail-hero">
        <div className="container">
          <Breadcrumbs items={['Anasayfa', 'Markalar']}/>
          <div className="detail-hero__inner">
            <div>
              <div className="detail-hero__eyebrow">
                <Icon name="partner" size={11} stroke={2}/> Marka indeksi
              </div>
              <h1 className="detail-hero__title">Marine markalar</h1>
              <p className="detail-hero__lede">
                Türkiye'de aktif olarak satıcılarda izlenen <strong>{POPULAR_BRANDS.length} marine markası</strong>.
                Garmin elektronik, Yanmar motor, Lewmar donanım, Rule sintine, Quicksilver bakım — her marka için canlı stok,
                fiyat snapshot'ı ve yetkili distribütör bilgisi.
              </p>
            </div>
            <div className="detail-hero__metrics">
              <div className="detail-hero__metric">
                <div className="detail-hero__metric-num tabular">{POPULAR_BRANDS.length}</div>
                <div className="detail-hero__metric-lbl">marka izleniyor</div>
              </div>
              <div className="detail-hero__metric">
                <div className="detail-hero__metric-num tabular">{formatNum(totalProducts)}</div>
                <div className="detail-hero__metric-lbl">toplam ürün</div>
              </div>
              <div className="detail-hero__metric">
                <div className="detail-hero__metric-num tabular">{partnerBrands.size}</div>
                <div className="detail-hero__metric-lbl">yetkili distribütör</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <div className="container">
        <section className="sec" style={{ marginTop: 32 }}>
          <div className="brand-toolbar">
            <div className="chip-row">
              <button
                className={`chip ${familyFilter === null ? 'chip--on' : ''}`}
                onClick={() => setFamilyFilter(null)}
              >Tümü <span className="tabular" style={{ opacity: 0.6, marginLeft: 4 }}>{POPULAR_BRANDS.length}</span></button>
              {BRAND_FAMILIES.map(f => {
                const count = POPULAR_BRANDS.filter(b => (BRAND_META[b.slug] || {}).family === f).length;
                return (
                  <button
                    key={f}
                    className={`chip ${familyFilter === f ? 'chip--on' : ''}`}
                    onClick={() => setFamilyFilter(f)}
                  >{f} <span className="tabular" style={{ opacity: 0.6, marginLeft: 4 }}>{count}</span></button>
                );
              })}
            </div>
            <div className="brand-toolbar__sort">
              <span className="brand-toolbar__sort-label">Sırala:</span>
              <button className={`sort-btn ${sortBy === 'products' ? 'sort-btn--on' : ''}`} onClick={() => setSortBy('products')}>Ürün sayısı</button>
              <button className={`sort-btn ${sortBy === 'merchants' ? 'sort-btn--on' : ''}`} onClick={() => setSortBy('merchants')}>Satıcı sayısı</button>
              <button className={`sort-btn ${sortBy === 'name' ? 'sort-btn--on' : ''}`} onClick={() => setSortBy('name')}>İsim (A→Z)</button>
            </div>
          </div>
        </section>

        <section className="sec">
          <div className="brands-grid">
            {brands.map(b => (
              <a key={b.slug} href={urlForBrand(b.slug)} className={`brand-card ${b.isPartner ? 'brand-card--partner' : ''}`}>
                <div className="brand-card__top">
                  <div className="brand-card__seal" aria-hidden="true">
                    {b.seal}
                    {b.country && <span className="brand-card__country">{b.country}</span>}
                  </div>
                  {b.isPartner && (
                    <span className="brand-card__partner" title="Yetkili distribütör mevcut">
                      <Icon name="check" size={9} stroke={4}/> Yetkili
                    </span>
                  )}
                </div>
                <div className="brand-card__id">
                  <h3 className="brand-card__name">{b.name}</h3>
                  {b.family && <span className="brand-card__family">{b.family}</span>}
                </div>
                <div className="brand-card__meta">
                  {b.founded && <span className="brand-card__est mono">EST. {b.founded}</span>}
                  {b.hq && <span className="brand-card__hq">{b.hq.split(',')[0]}</span>}
                </div>
                <div className="brand-card__stats">
                  <div>
                    <span className="brand-card__num tabular">{formatNum(b.products)}</span>
                    <span className="brand-card__lbl">ürün</span>
                  </div>
                  <div>
                    <span className="brand-card__num tabular">{b.merchantCount}</span>
                    <span className="brand-card__lbl">mağaza</span>
                  </div>
                </div>
                <div className="brand-card__cta">
                  <span>Marka sayfasına git</span>
                  <Icon name="arrow-right" size={13} stroke={2}/>
                </div>
              </a>
            ))}
          </div>
        </section>

        {/* Comparison hint section — encourages discovery */}
        <section className="sec" style={{ marginBottom: 64 }}>
          <div className="brand-pairs">
            <h2 className="brand-pairs__title">Popüler marka kıyasları</h2>
            <p className="brand-pairs__sub">Marine kullanıcılarının en sık karşılaştırdığı marka çiftleri</p>
            <div className="brand-pairs__grid">
              {[
                ['garmin', 'raymarine', 'Chartplotter & balık bulucu'],
                ['yanmar', 'volvo-penta', 'Dizel motor yedek parça'],
                ['mercury', 'yamaha', 'Outboard motor'],
                ['rule', 'whale', 'Sintine pompası'],
              ].map(([a, c, topic], i) => {
                const ba = POPULAR_BRANDS.find(x => x.slug === a);
                const bc = POPULAR_BRANDS.find(x => x.slug === c);
                if (!ba || !bc) return null;
                return (
                  <a key={i} href={urlForBrand(a)} className="brand-pair">
                    <span className="brand-pair__brand">{ba.name}</span>
                    <span className="brand-pair__vs">vs</span>
                    <span className="brand-pair__brand">{bc.name}</span>
                    <span className="brand-pair__topic">{topic}</span>
                  </a>
                );
              })}
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}

// ===== Categories Index Page (simple — reuses cat-tile) =====
function CategoriesIndexPage() {
  return (
    <main id="main" data-screen-label="Categories Index">
      <section className="detail-hero">
        <div className="container">
          <Breadcrumbs items={['Anasayfa', 'Kategoriler']}/>
          <div className="detail-hero__inner">
            <div>
              <div className="detail-hero__eyebrow">
                <Icon name="box" size={11} stroke={2}/> Kategori indeksi
              </div>
              <h1 className="detail-hero__title">Tüm kategoriler</h1>
              <p className="detail-hero__lede">
                Marine yedek parçası 8 ana kategoride toplanıyor. Her kategoride aktif satıcıların stok ve fiyat
                snapshot'ı saatlik güncellenir.
              </p>
            </div>
            <div className="detail-hero__metrics">
              <div className="detail-hero__metric">
                <div className="detail-hero__metric-num tabular">{CATEGORIES.length}</div>
                <div className="detail-hero__metric-lbl">ana kategori</div>
              </div>
              <div className="detail-hero__metric">
                <div className="detail-hero__metric-num tabular">{formatNum(CATEGORIES.reduce((s, c) => s + c.count, 0))}</div>
                <div className="detail-hero__metric-lbl">toplam ürün</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div className="container">
        <section className="sec" style={{ marginTop: 32, marginBottom: 64 }}>
          <div className="cat-grid">
            {CATEGORIES.map(c => (
              <a className="cat-tile" key={c.slug} href={urlForCategory(c.slug)}>
                <div className="cat-tile__icon"><Icon name={c.icon} size={20} stroke={1.6}/></div>
                <div className="cat-tile__name">{c.name}</div>
                <div className="cat-tile__count tabular">{formatNum(c.count)} ürün</div>
              </a>
            ))}
          </div>
        </section>
      </div>
    </main>
  );
}

// ===== 404 =====
function NotFound() {
  return (
    <main id="main" className="container" data-screen-label="404" style={{ padding: '120px 0 80px', textAlign: 'center' }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 96, height: 96, borderRadius: '50%',
        background: 'var(--km-deep-soft)', color: 'var(--km-deep)',
        marginBottom: 24,
      }}>
        <Icon name="anchor" size={40} stroke={1.4}/>
      </div>
      <h1 style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 12 }}>
        Aradığınız sayfa demirlemiş.
      </h1>
      <p style={{ fontSize: 16, color: 'var(--km-ink-500)', maxWidth: 440, margin: '0 auto 24px' }}>
        Ürün taşınmış olabilir veya bağlantı geçersiz. Aramayı buradan tekrar başlatabilirsiniz.
      </p>
      <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
        <a href="#/" className="btn btn--primary btn--lg">Anasayfaya dön</a>
        <a href="#/" className="btn btn--ghost btn--lg" onClick={(e) => { e.preventDefault(); document.querySelector('.search-bar input')?.focus(); }}>Arama yap</a>
      </div>
    </main>
  );
}

Object.assign(window, { CategoryPage, BrandPage, BrandsIndexPage, CategoriesIndexPage, NotFound });