// SEO landing: /en-ucuz-<kategori>
// Per DESIGN.md §5.1 — programmatic SEO surface, MARINE_SEO_PAGE type (CHEAPEST_LANDING variant)
// Renders top-10 cheapest products in a category with strong indexable copy + ranked list

const SEO_CONTENT = {
  'balik-bulucu': {
    h1: 'En Ucuz Balık Bulucu & Chartplotter',
    intro: 'Türkiye\'deki marine satıcılarının <strong>balık bulucu ve chartplotter</strong> fiyatlarını saatlik karşılaştırıyoruz. 1.240 modelin gerçek anlık fiyatı, stok bilgisi ve kargo süresi yan yana. Garmin Echomap, Raymarine Axiom, Simrad NSS ve Lowrance HDS modellerinin <em>bu hafta</em> en ucuz teklifleri aşağıda.',
    intent: 'Karar verirken sadece fiyata değil, kargo süresine, satıcı güvenilirliğine ve stok durumuna da bakıyoruz. <strong>14 günden eski</strong> teklifler sıralamadan otomatik düşürülür.',
    guide: [
      { h: 'Bütçe segmentleri', p: 'Ekonomik segment ₺8.000-15.000 arası 5-7" entry seviye balık bulucular kapsıyor. Orta segment ₺18.000-32.000 ile 9" combo modeller. Profesyonel segment ₺40.000+ MFD ve radar uyumlu sistemler.' },
      { h: 'Hangi marka, kime uygun?', p: '<strong>Garmin</strong> kullanıcı dostu menüsü ile yeni başlayanlar için ideal. <strong>Raymarine</strong> büyük tekne yarışçısı tercih ediyor. <strong>Simrad</strong> profesyonel balıkçılıkta güçlü.' },
      { h: 'Stok ve kargo neden önemli?', p: 'Marine ürünleri sezonluk olarak hızla tükenir. "Stokta görünüyor" yazan satıcının verisi 14 günden eskiyse Kolaymarin bunu sayfadan gizler — kayıp sipariş yaşamazsınız.' },
    ],
    related: ['capa-vinci', 'sintine-pompasi', 'guvenlik'],
  },
  'capa-vinci': {
    h1: 'En Ucuz Çapa Vinci',
    intro: '<strong>Lewmar, Quick, Maxwell ve Anchorlift</strong> çapa vinçleri 700W\'tan 1500W\'a kadar Türkiye\'nin en ucuz fiyatları. 4 satıcıdan canlı stok karşılaştırması.',
    intent: 'Tekne büyüklüğünüze göre doğru gücü seçmek vinç ömrü için kritik. Aşağıdaki listede her ürünün uygun olduğu tekne boyu da belirtilir.',
    guide: [
      { h: 'Çapa + zincir ağırlığı', p: 'Vinç çekiş kapasitesi, çapa + zincir toplam ağırlığının 3 katı olmalı. 8mm zincir ve 12kg çapa için 350-400W yeterli.' },
      { h: 'Dikey mi yatay mı?', p: 'Dikey vinç (V700, V900) standart küçük-orta tekneler için. Yatay vinç (HX, RC) güverte alanı kısıtlı bay teknelerinde tercih edilir.' },
    ],
    related: ['halat-zincir', 'guvenlik'],
  },
  'sintine-pompasi': {
    h1: 'En Ucuz Sintine Pompası',
    intro: 'Rule, Whale ve Johnson Pump <strong>otomatik sintine pompaları</strong>. 1100 GPH\'den 2000 GPH\'ye kadar canlı fiyat karşılaştırması.',
    intent: 'Yedek pompa hayat kurtarır. Bu sayfadaki tüm modeller stoktadır; "stokta yok" gösteren satıcıları otomatik filtreliyoruz.',
    guide: [
      { h: 'Doğru GPH seçimi', p: '6m altı: 500-800 GPH. 6-9m: 1100-1500 GPH. 9m üstü: 2000+ GPH. İdeal kurulum: birincil + yedek.' },
    ],
    related: ['motor-parcalari', 'guvenlik'],
  },
  'motor-parcalari': {
    h1: 'En Ucuz Marine Motor Yedek Parça',
    intro: '<strong>Yanmar, Volvo Penta, Mercury, Yamaha, Suzuki</strong> için orijinal ve kalibre edilmiş yedek parça: yağ filtresi, yakıt filtresi, buji, kayış, conta.',
    intent: 'Sezon başı bakımı için seçilmiş 50+ kritik yedek parçanın en uygun fiyatları. Tüm parçalar OEM uyumlu.',
    guide: [],
    related: ['bakim-boya', 'pervane'],
  },
};

function SeoLandingPage({ slug, onCompareToggle, compareSet }) {
  const cat = CATEGORIES.find(c => c.slug === slug);
  const content = SEO_CONTENT[slug];

  if (!cat || !content) return <NotFound/>;

  let products = PRODUCTS.filter(p => p.categorySlug === slug);
  if (products.length < 3) products = PRODUCTS;
  const ranked = [...products].sort((a, b) => productLowest(a) - productLowest(b)).slice(0, 10);

  const merchantSet = new Set();
  ranked.forEach(p => p.offers.forEach(o => merchantSet.add(o.merchantId)));

  const lastUpdate = ranked.reduce((latest, p) => {
    const newest = p.offers.reduce((a, b) => new Date(a.lastSeenAt) > new Date(b.lastSeenAt) ? a : b);
    return new Date(newest.lastSeenAt) > new Date(latest) ? newest.lastSeenAt : latest;
  }, ranked[0].offers[0].lastSeenAt);

  return (
    <main id="main" data-screen-label={`SEO en-ucuz ${slug}`}>
      <section className="seo-hero">
        <div className="container">
          <Breadcrumbs items={['Anasayfa', cat.name, `En ucuz ${cat.name}`]}/>

          <h1 className="seo-hero__h1">
            {content.h1.split(' ').map((w, i) =>
              w === 'Ucuz' ? <mark key={i}>{w} </mark> : <React.Fragment key={i}>{w} </React.Fragment>
            )}
            <span style={{ color: 'var(--km-ink-400)', fontSize: '0.6em', fontWeight: 500, display: 'block', marginTop: 8, letterSpacing: 'normal' }}>
              · Mayıs 2026 · Canlı fiyatlar
            </span>
          </h1>
          <p className="seo-hero__lede" dangerouslySetInnerHTML={{ __html: content.intro }}/>
          <p className="seo-hero__lede" dangerouslySetInnerHTML={{ __html: content.intent }} style={{ marginTop: 12 }}/>

          <div className="seo-hero__meta">
            <span><strong className="tabular">{ranked.length}</strong> en uygun model</span>
            <span>·</span>
            <span><strong className="tabular">{merchantSet.size}</strong> aktif satıcı tarandı</span>
            <span>·</span>
            <span>Son güncelleme: <strong>{timeAgoTr(lastUpdate)}</strong></span>
            <span>·</span>
            <span style={{ color: 'var(--km-good)', fontWeight: 600 }}>● canlı</span>
          </div>
        </div>
      </section>

      <div className="container">
        <div className="detail-grid">
          <div>
            <section className="sec" id="ranking" style={{ marginTop: 0 }}>
              <div className="sec__head">
                <h2 className="sec__title">{cat.name} sıralaması · fiyat artan</h2>
                <span className="sec__sub">Tüm satıcılardan en düşük teklif</span>
              </div>

              <div className="seo-ranking">
                {ranked.map((p, i) => {
                  const low = productLowest(p);
                  const cheapestOffer = p.offers.find(o => o.price === low);
                  const merchant = merchantById(cheapestOffer.merchantId);
                  return (
                    <a href={urlForProduct(p)} className="seo-rank-row" key={p.shortSlug}>
                      <span className={`seo-rank-row__num ${i === 0 ? 'seo-rank-row__num--top1' : ''}`}>#{i+1}</span>
                      <div className="seo-rank-row__img"/>
                      <div>
                        <div className="seo-rank-row__brand">{p.brand}</div>
                        <div className="seo-rank-row__name">{p.h1}</div>
                        <div className="seo-rank-row__meta">
                          <span style={{ color: 'var(--km-good)', fontWeight: 600 }}>● {merchant.name}'da en uygun</span>
                          <span>· {p.offers.length} satıcıdan</span>
                          <span>· {timeAgoTr(cheapestOffer.lastSeenAt)} güncel</span>
                        </div>
                      </div>
                      <div>
                        <div className="seo-rank-row__price tabular">{formatPrice(low)}</div>
                        <small style={{ color: 'var(--km-ink-500)', fontSize: 11 }}>başlangıç</small>
                      </div>
                      <span className="seo-rank-row__cta">Detaylar <Icon name="arrow-right" size={12}/></span>
                    </a>
                  );
                })}
              </div>

              <p style={{ fontSize: 12, color: 'var(--km-ink-400)', marginTop: 16, lineHeight: 1.6 }}>
                Sıralama snapshot'tan beslenir ve sayfa yenilenmeden değişmez. Tıkladığınızda satıcının kendi sayfasındaki anlık fiyat geçerlidir.
                Stoğu tükenen ürün sıradaki sıraya kaydırılır; <strong>14 günden eski</strong> teklifler hiç gösterilmez.
              </p>
            </section>

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

            <section className="sec" id="faq">
              <div className="sec__head">
                <h2 className="sec__title">Sıkça sorulanlar</h2>
              </div>
              <Faq items={[
                ['Bu fiyatlar gerçek mi?', 'Evet. Saatlik snapshot ile satıcı sitelerinden okunur. Yine de tıkladığınızda satıcıdaki anlık fiyatı son kez kontrol etmenizi öneririz.'],
                ['Kolaymarin bu ürünleri satıyor mu?', 'Hayır. Karşılaştırma yapıyoruz, satıcıya yönlendiriyoruz. Sepet ve ödeme satıcının sitesinde.'],
                ['Listelenen ürünler nasıl seçildi?', `Aktif satıcılarda stoğu olan, ${cat.name} kategorisinde en yüksek arama hacmine sahip 10 modeli ekledik.`],
                ['Sıralama nasıl yapılıyor?', 'Bu sayfada saf fiyat artan. PDP sayfalarında ise fiyat + stok tazeliği + satıcı güvenilirliği birleşik skor.'],
              ]}/>
            </section>
          </div>

          <aside>
            <div className="aside-card">
              <h3 className="aside-card__title">Sayfa içi</h3>
              <nav className="toc">
                <a href="#ranking">Fiyat sıralaması</a>
                {content.guide.length > 0 && <a href="#guide">Satın alma kılavuzu</a>}
                <a href="#faq">Sıkça sorulanlar</a>
              </nav>
            </div>

            <div className="aside-card">
              <h3 className="aside-card__title">İlgili sayfalar</h3>
              <ul style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <li>
                  <a href={urlForCategory(slug)} style={{ display: 'block', padding: '6px 10px', borderRadius: 6, fontSize: 13, color: 'var(--km-ink-700)' }}>
                    Tüm {cat.name} →
                  </a>
                </li>
                {(content.related || []).map(s => {
                  const c = CATEGORIES.find(x => x.slug === s);
                  if (!c) return null;
                  return (
                    <li key={s}>
                      <a href={`#/en-ucuz-${s}`} style={{ display: 'block', padding: '6px 10px', borderRadius: 6, fontSize: 13, color: 'var(--km-ink-700)' }}>
                        En ucuz {c.name} →
                      </a>
                    </li>
                  );
                })}
              </ul>
            </div>

            <div className="aside-card" style={{ background: 'var(--km-ink-900)', color: 'rgba(255,255,255,0.85)', borderColor: 'transparent' }}>
              <h3 className="aside-card__title" style={{ color: 'rgba(255,255,255,0.5)' }}>SEO snapshot</h3>
              <dl style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12, fontFamily: 'var(--font-mono)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <dt style={{ color: 'rgba(255,255,255,0.5)' }}>type</dt><dd>MARINE_SEO_PAGE</dd>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <dt style={{ color: 'rgba(255,255,255,0.5)' }}>variant</dt><dd>CHEAPEST_LANDING</dd>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <dt style={{ color: 'rgba(255,255,255,0.5)' }}>indexable</dt><dd style={{ color: 'var(--km-good)' }}>true</dd>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <dt style={{ color: 'rgba(255,255,255,0.5)' }}>review</dt><dd style={{ color: 'var(--km-accent)' }}>auto</dd>
                </div>
              </dl>
            </div>
          </aside>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { SeoLandingPage });