// Nasıl çalışır — How it works page
// Explains the marketplace model: 3-step user flow, freshness, trust tiers, KVKK

function HowItWorksPage() {
  return (
    <main id="main" data-screen-label="How it works">
      <section className="detail-hero" style={{ paddingBottom: 24 }}>
        <div className="container">
          <Breadcrumbs items={['Anasayfa', 'Nasıl çalışır']}/>
          <div className="how-hero">
            <div className="how-hero__copy">
              <div className="detail-hero__eyebrow">
                <Icon name="sparkle" size={11} stroke={2}/> Trust manifesto
              </div>
              <h1 className="detail-hero__title">Bir yerde tekneye, bir yerde fiyata bakıyorduk. Artık ikisi tek arama.</h1>
              <p className="detail-hero__lede">
                kolaymarin, Türkiye'deki marine yedek parça satıcılarının fiyat ve stoklarını saatlik tarayan bir
                <strong> karşılaştırma motorudur</strong>. Bu sayfa nasıl çalıştığımızı, satıcıları nasıl doğruladığımızı ve
                veriyi nasıl canlı tuttuğumuzu açıklar.
              </p>
            </div>

            <aside className="how-hero__visual" aria-hidden="true">
              <div className="how-hero__photo">
                <img
                  src="https://images.unsplash.com/photo-1518562180175-34a163b1a9a6?auto=format&fit=crop&w=1100&q=80"
                  alt=""
                  loading="eager"
                  decoding="async"
                />
                <div className="how-hero__photo-grad"/>
              </div>

              {/* "Bu marinadaki tekneler için 47 satıcıdan veri çekiyoruz" */}
              <div className="how-hero__chip">
                <span className="how-hero__chip-dot"/>
                <div>
                  <div className="how-hero__chip-lbl">CANLI TARAMA</div>
                  <div className="how-hero__chip-text">47 satıcı · saatlik snapshot</div>
                </div>
              </div>

              <div className="how-hero__badge">
                <div className="how-hero__badge-row">
                  <Icon name="check-circle" size={14} stroke={2.2}/>
                  <span>doğrulanmış marine satıcılarda</span>
                </div>
                <div className="how-hero__badge-num tabular">{formatNum(28940)}+</div>
                <div className="how-hero__badge-sub">ürün izleniyor</div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <div className="container">
        {/* MANIFESTO — we don't sell */}
        <section className="sec" style={{ marginTop: 32 }}>
          <div className="manifesto">
            <div className="manifesto__icon" aria-hidden="true">
              <Icon name="sparkle" size={20} stroke={1.8}/>
            </div>
            <div>
              <p className="manifesto__big">
                <strong>kolaymarin ürün satmaz.</strong>
                <br/>
                Sadece sizi doğru satıcıya yönlendirir.
              </p>
              <p className="manifesto__sub">
                Sepet, üyelik, ödeme akışı yok. KDV, kargo, fatura, iade, garanti — hepsi satıcı ile sizin
                aranızda. Biz sadece <strong>fiyat, stok ve teslim süresi snapshot'ını</strong> tek ekranda toplar,
                sizi bilinçli seçime ulaştırırız.
              </p>
            </div>
          </div>
        </section>

        {/* LIVE TELEMETRY — "alive engine" feel */}
        <section className="sec" style={{ marginTop: 32 }}>
          <div className="telemetry">
            <div className="telemetry__head">
              <span className="telemetry__pulse" aria-hidden="true"></span>
              <span className="telemetry__title">Şu anda çalışan</span>
              <span className="telemetry__sub">canlı tarama motoru</span>
            </div>
            <div className="telemetry__grid">
              <div className="telemetry__cell">
                <div className="telemetry__num tabular">{formatNum(MARKETPLACE_STATS.merchantCount)}</div>
                <div className="telemetry__lbl">satıcı tarandı</div>
                <div className="telemetry__hint mono">son 60 dk</div>
              </div>
              <div className="telemetry__cell">
                <div className="telemetry__num tabular">{formatNum(MARKETPLACE_STATS.productCount)}</div>
                <div className="telemetry__lbl">ürün indeksli</div>
                <div className="telemetry__hint mono">8 ana kategori</div>
              </div>
              <div className="telemetry__cell">
                <div className="telemetry__num tabular">312</div>
                <div className="telemetry__lbl">fiyat güncellendi</div>
                <div className="telemetry__hint mono">son 1 saat</div>
              </div>
              <div className="telemetry__cell">
                <div className="telemetry__num tabular">{formatNum(MARKETPLACE_STATS.offerCount)}</div>
                <div className="telemetry__lbl">aktif snapshot</div>
                <div className="telemetry__hint mono">son 14 gün içinde</div>
              </div>
            </div>
            <div className="telemetry__foot mono">
              cron · hourly · next run in 27 min · region eu-istanbul-1
            </div>
          </div>
        </section>

        {/* MARKETPLACE vs KOLAYMARIN COMPARISON */}
        <section className="sec">
          <div className="sec__head">
            <h2 className="sec__title">Neden marketplace değiliz?</h2>
            <span className="sec__sub">Pazaryeri modeli ve karşılaştırma motoru arasındaki fark</span>
          </div>
          <div className="vs-table">
            <div className="vs-table__head">
              <div></div>
              <div className="vs-table__col vs-table__col--them">
                <span className="vs-table__col-tag">Klasik</span>
                Marketplace
              </div>
              <div className="vs-table__col vs-table__col--us">
                <span className="vs-table__col-tag vs-table__col-tag--us">Biz</span>
                kolaymarin
              </div>
            </div>
            {[
              ['Sıralama mantığı', 'Komisyon / sponsor odaklı', 'Snapshot, fiyat, tazelik odaklı'],
              ['Satıcı görünürlüğü', 'Tek marşantız dahili', 'Tüm satıcılar yan yana'],
              ['Ödeme', 'Pazaryerinde, sepet zorunlu', 'Satıcı sayfasında, sepet yok'],
              ['Garanti & iade', 'Pazaryeri ile satıcı arasında', 'Doğrudan satıcı ile sizin aranızda'],
              ['Üyelik', 'Genelde zorunlu', 'Yok'],
              ['Veri tazeliği', 'Öne çıkarılmaz', 'Her teklifte görünür damga'],
              ['Ekosistem', 'Kapalı', 'Açık yönlendirme'],
            ].map(([k, them, us], i) => (
              <div className="vs-table__row" key={i}>
                <div className="vs-table__k">{k}</div>
                <div className="vs-table__v vs-table__v--them">
                  <Icon name="close" size={12} stroke={2.5}/> {them}
                </div>
                <div className="vs-table__v vs-table__v--us">
                  <Icon name="check" size={12} stroke={2.5}/> {us}
                </div>
              </div>
            ))}
          </div>
        </section>
        {/* THREE STEP FLOW */}
        <section className="sec" style={{ marginTop: 48 }}>
          <div className="sec__head">
            <h2 className="sec__title">3 adımda</h2>
            <span className="sec__sub">Son 30 gün oturum ortalaması: <strong>91 sn</strong> içinde en uygun teklif <em style={{ color: 'var(--km-ink-400)', fontStyle: 'normal' }}>(p50)</em></span>
          </div>

          <div className="hiw-flow">
            <div className="hiw-step">
              <div className="hiw-step__num">01</div>
              <div className="hiw-step__head">
                <Icon name="search" size={20} stroke={1.8}/>
                <h3>Ara veya kategoride gez</h3>
              </div>
              <p>
                Marka, model veya parça numarası ile arayın. 28.000+ marine ürün indeksli; Garmin Echomap'ten
                Yanmar yağ filtresine kadar.
              </p>
              <div className="hiw-step__preview">
                <div className="hiw-fake-search">
                  <Icon name="search" size={14} stroke={2} style={{ color: 'var(--km-ink-400)' }}/>
                  <span>garmin echomap 92sv</span>
                  <kbd>↵</kbd>
                </div>
              </div>
            </div>

            <div className="hiw-step">
              <div className="hiw-step__num">02</div>
              <div className="hiw-step__head">
                <Icon name="compare" size={20} stroke={1.8}/>
                <h3>Karşılaştır</h3>
              </div>
              <p>
                Aynı ürün için tüm satıcıların fiyatını, kargo süresini, stok durumunu ve veri tazeliğini yan yana
                görün. 5 farklı sıralama: fiyat, stok, güven, kargo, önerilen.
              </p>
              <div className="hiw-step__preview">
                <div className="hiw-fake-offer">
                  <div className="hiw-fake-offer__logo">EM</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>East Marine</div>
                    <div style={{ fontSize: 11, color: 'var(--km-good)', fontWeight: 600 }}>✓ Stokta · 2 saat önce</div>
                  </div>
                  <div style={{ fontWeight: 700, fontSize: 15 }} className="tabular">₺28.950</div>
                </div>
                <div className="hiw-fake-offer" style={{ opacity: 0.55 }}>
                  <div className="hiw-fake-offer__logo">DM</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>Deniz Marketi</div>
                    <div style={{ fontSize: 11, color: 'var(--km-ink-500)' }}>Stokta · 5 saat önce</div>
                  </div>
                  <div style={{ fontWeight: 700, fontSize: 15 }} className="tabular">₺29.750</div>
                </div>
              </div>
            </div>

            <div className="hiw-step">
              <div className="hiw-step__num">03</div>
              <div className="hiw-step__head">
                <Icon name="arrow-up-right" size={20} stroke={1.8}/>
                <h3>Satıcıya tek tıkla git</h3>
              </div>
              <p>
                Karar verdiğinizde tek tıkla satıcının kendi sayfasına yönlendirilirsiniz. Kolaymarin'de sepet,
                kayıt, ödeme yok — sadece doğru satıcıya köprü.
              </p>
              <div className="hiw-step__preview">
                <div style={{
                  background: 'var(--km-accent)', color: 'var(--km-ink-900)',
                  padding: '10px 16px', borderRadius: 10, fontWeight: 600, fontSize: 13,
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                }}>
                  East Marine'e git <Icon name="arrow-up-right" size={14} stroke={2.2}/>
                </div>
                <p style={{ fontSize: 11, color: 'var(--km-ink-400)', marginTop: 12, fontFamily: 'var(--font-mono)' }}>
                  GET /referrals/click?o=… → 302
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* PHOTO SEARCH — future differentiator */}
        <section className="sec">
          <div className="photo-explain">
            <div className="photo-explain__copy">
              <div className="detail-hero__eyebrow" style={{ marginBottom: 12 }}>
                <Icon name="camera" size={11} stroke={2}/> Fotoğrafla arama
              </div>
              <h2 style={{ fontSize: 26, letterSpacing: '-0.02em', fontWeight: 700, marginBottom: 12 }}>
                Parçanın adını bilmek zorunda değilsiniz.
              </h2>
              <p style={{ color: 'var(--km-ink-600)', fontSize: 15, lineHeight: 1.6, marginBottom: 16 }}>
                Eski parçanın fotoğrafını çekin, kolaymarin model ve uyumlu alternatifleri bulsun. Marine
                kullanıcılarının çoğu <strong>SKU bilmez</strong>, parça adını hatırlamaz — sadece elindeki
                parçayı alır ve kardeşinin nerede olduğunu sorar. Bu iş için arama çubuğu yetmez.
              </p>
              <ul className="fit-list" style={{ fontSize: 14, marginBottom: 16 }}>
                <li><Icon name="check" size={14} stroke={2.5}/> Foto yükle → marka + model tahmini</li>
                <li><Icon name="check" size={14} stroke={2.5}/> Aktif satıcılarda karşılık bulma</li>
                <li><Icon name="check" size={14} stroke={2.5}/> Uyumlu yedek/aftermarket önerileri</li>
              </ul>
              <a href="#/" className="btn btn--primary">
                Fotoğrafla arama dene <Icon name="arrow-right" size={14}/>
              </a>
            </div>
            <div className="photo-explain__demo">
              <div className="photo-explain__phase">
                <span className="photo-explain__phase-num mono">01</span>
                <div className="photo-explain__dropzone">
                  <Icon name="image" size={28} stroke={1.4} style={{ color: 'var(--km-ink-400)' }}/>
                  <small className="mono">parça fotoğrafı</small>
                </div>
              </div>
              <div className="photo-explain__phase">
                <span className="photo-explain__phase-num mono">02</span>
                <div className="photo-explain__result">
                  <span className="photo-explain__match mono">98% MATCH</span>
                  <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4 }}>Yanmar 3YM30 Yağ Filtresi</div>
                  <div style={{ fontSize: 11, color: 'var(--km-ink-500)' }}>5 satıcıda · ₺189'dan</div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* DATA FRESHNESS */}
        <section className="sec">
          <div className="hiw-band">
            <div>
              <h2 style={{ fontSize: 28, letterSpacing: '-0.02em', fontWeight: 700, marginBottom: 12 }}>
                Veri ne kadar taze?
              </h2>
              <p style={{ color: 'var(--km-ink-600)', fontSize: 16, lineHeight: 1.6, maxWidth: 540 }}>
                Her satıcı için fiyat ve stok bilgisini <strong>saatlik snapshot</strong> ile alıyoruz.
                Sayfada gösterilen her teklif <em>"3 saat önce güncellendi"</em> gibi damga taşır.
                <strong> 14 günden eski</strong> veriyi sıralamadan düşürürüz.
              </p>
            </div>
            <div className="hiw-freshness">
              <div className="hiw-freshness__big tabular">~ 35 dk</div>
              <div className="hiw-freshness__lbl">ortalama veri yaşı</div>
              <div style={{ borderTop: '1px solid var(--km-line)', margin: '16px 0' }}/>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--km-ink-500)' }}>
                <span>Snapshot frekansı</span>
                <strong style={{ color: 'var(--km-ink-900)' }} className="tabular">60 dk</strong>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--km-ink-500)', marginTop: 6 }}>
                <span>Maks. yaş (sıralanmış)</span>
                <strong style={{ color: 'var(--km-ink-900)' }} className="tabular">14 gün</strong>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--km-ink-500)', marginTop: 6 }}>
                <span>Sayfa render LCP</span>
                <strong style={{ color: 'var(--km-ink-900)' }} className="tabular">{'< 1.8 sn'}</strong>
              </div>
            </div>
          </div>
        </section>

        {/* HOW WE VERIFY MERCHANTS */}
        <section className="sec">
          <div className="sec__head">
            <h2 className="sec__title">Satıcıları nasıl doğruluyoruz?</h2>
            <span className="sec__sub">Marketplace değiliz — ama her satıcıyı manuel kontrol ederiz</span>
          </div>
          <div className="verify-grid">
            {[
              { ic: 'shield', t: 'Vergi & ticari sicil', d: 'Türkiye’de aktif vergi numarası, ticari sicil kaydı ve marşantız faaliyet teyidi.' },
              { ic: 'partner', t: 'Manuel onboarding', d: 'Otomatik kayıt yok. Her satıcı ekibimizle birebir görüşür, web sitesi ve operasyon kontrolden geçer.' },
              { ic: 'clock', t: 'Snapshot tutarlılığı', d: 'Saatlik tarama sonuçları önceki snapshot’larla karşılaştırılır; tutarsız fiyat anomalileri otomatik filtrelenir.' },
              { ic: 'warn', t: 'Bozuk fiyat filtresi', d: 'Pazar ortalamasının %30 altı/üstündeki fiyatlar otomatik flag’lanır, manuel revize edilir.' },
              { ic: 'star', t: 'Marka yetkilendirme', d: 'Garmin, Yanmar gibi markaların yetkili distribütörleri <strong>Partner</strong> rozetiyle işaretlenir.' },
              { ic: 'check-circle', t: 'Son güncelleme damgası', d: 'Her teklifte “3 saat önce güncellendi” ibaresi görünür; 14 günden eski veri sıralamadan düşer.' },
            ].map((v, i) => (
              <div className="verify-card" key={i}>
                <span className="verify-card__icon"><Icon name={v.ic} size={16} stroke={1.8}/></span>
                <div>
                  <strong>{v.t}</strong>
                  <p dangerouslySetInnerHTML={{ __html: v.d }}/>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* TRUST TIERS */}
        <section className="sec">
          <div className="sec__head">
            <h2 className="sec__title">Satıcı güven sistemi</h2>
            <span className="sec__sub">Her rozet doğrulamayla kazanılır, satın alınamaz.</span>
          </div>

          <div className="hiw-tiers">
            <div className="hiw-tier">
              <span className="offer__tier tier--STARTER" style={{ alignSelf: 'flex-start' }}>STARTER</span>
              <h3>Başlangıç</h3>
              <p>Yeni katılan satıcılar. Stok ve fiyat verileri doğrulanır ama partner ayrıcalıkları henüz yoktur.</p>
              <ul>
                <li>Saatlik veri taranması</li>
                <li>Temel listeleme</li>
              </ul>
            </div>
            <div className="hiw-tier">
              <span className="offer__tier tier--GROWTH" style={{ alignSelf: 'flex-start' }}>· DOĞRULANDI</span>
              <h3>Doğrulandı</h3>
              <p>30 günde kararlı stok ve fiyat verisi. Site uptime ≥ %99 ve sipariş çıkış oranı eşiklerinde.</p>
              <ul>
                <li>Tüm starter avantajları</li>
                <li>Sıralamada güven katsayısı</li>
                <li>Aylık veri kalitesi raporu</li>
              </ul>
            </div>
            <div className="hiw-tier hiw-tier--featured">
              <span className="offer__tier tier--PARTNER" style={{ alignSelf: 'flex-start' }}>✓ PARTNER</span>
              <h3>Partner</h3>
              <p>Marka yetkilendirmesi ve KVKK + kargo + iade SLA'larına bağlı. En yüksek güven katsayısı.</p>
              <ul>
                <li>Doğrudan API entegrasyonu</li>
                <li>10 dakikada bir snapshot</li>
                <li>Marka sayfasında öncelikli</li>
                <li>Üst düzey görünürlük</li>
              </ul>
            </div>
          </div>
        </section>

        {/* WHAT WE DON'T DO */}
        <section className="sec">
          <div className="sec__head">
            <h2 className="sec__title">Yapmadığımız şeyler</h2>
            <span className="sec__sub">Türk e-ticaret kliyşelerinden uzak duruyoruz</span>
          </div>

          <div className="hiw-anti-grid">
            {[
              { x: 'Sepet', t: 'Ödemeye kolaymarin değil, doğrudan satıcı aracılık eder.' },
              { x: 'Üyelik duvarı', t: 'Karşılaştırma görmek için kayıt olmanıza gerek yok.' },
              { x: 'Çizgili fiyat oyunu', t: 'Sahte "indirim %", uydurma "eski fiyat" yok.' },
              { x: 'Yorum koleksiyonu', t: 'Kolaymarin marketplace değil; ürün yorumu toplamıyoruz.' },
              { x: 'Yapışkan reklam', t: "Sayfa başına 3'ten fazla yapışkan banner yok." },
              { x: 'Push bildirim duvarı', t: 'İlk ziyarette bildirim izni istemeyiz.' },
            ].map(({ x, t }, i) => (
              <div className="hiw-anti" key={i}>
                <span className="hiw-anti__x"><Icon name="close" size={16} stroke={2.4}/></span>
                <div>
                  <strong>{x}</strong>
                  <p>{t}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* KVKK + DATA */}
        <section className="sec">
          <div className="hiw-kvkk">
            <div>
              <span className="detail-hero__eyebrow" style={{ marginBottom: 12 }}>
                <Icon name="shield" size={11} stroke={2}/> KVKK uyumu
              </span>
              <h2 style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 12 }}>
                Sizin tarayıcı izinizi saklamıyoruz.
              </h2>
              <ul style={{ display: 'flex', flexDirection: 'column', gap: 12, color: 'var(--km-ink-700)', fontSize: 14 }}>
                <li style={{ display: 'flex', gap: 10 }}>
                  <Icon name="check-circle" size={18} stroke={2} style={{ color: 'var(--km-good)', flexShrink: 0, marginTop: 1 }}/>
                  Ham IP veya kullanıcı ajanı saklanmaz; aylık <strong>salt-rotated hash</strong>'ler tutulur.
                </li>
                <li style={{ display: 'flex', gap: 10 }}>
                  <Icon name="check-circle" size={18} stroke={2} style={{ color: 'var(--km-good)', flexShrink: 0, marginTop: 1 }}/>
                  Tıklama attribution <strong>append-only</strong> kayda yazılır, geri silinmez (audit için).
                </li>
                <li style={{ display: 'flex', gap: 10 }}>
                  <Icon name="check-circle" size={18} stroke={2} style={{ color: 'var(--km-good)', flexShrink: 0, marginTop: 1 }}/>
                  Türkiye sınırları içinde sunucular; veri transferi yapılmaz.
                </li>
                <li style={{ display: 'flex', gap: 10 }}>
                  <Icon name="check-circle" size={18} stroke={2} style={{ color: 'var(--km-good)', flexShrink: 0, marginTop: 1 }}/>
                  Çerez izni: sadece <strong>analitik</strong>; pazarlama çerezi yok.
                </li>
              </ul>
              <a href="#/" className="btn btn--ghost" style={{ marginTop: 20 }}>
                KVKK aydınlatma metni <Icon name="arrow-right" size={14}/>
              </a>
            </div>
            <pre className="hiw-kvkk__code">
{`POST /referrals/click  (internal only)
GET  /referrals/click?o=<offerId>  → 302

# Stored (append-only):
{
  ip_hash:    sha256(ip + monthly_salt),
  ua_hash:    sha256(ua + monthly_salt),
  session:    nanoid(16),
  km_click_id: nanoid(16),
  offer_id:   <id>,
  at:         <iso>
}

# Never stored: raw IP, raw UA, email.`}
            </pre>
          </div>
        </section>

        {/* FOR MERCHANTS */}
        <section className="sec">
          <div className="hiw-merchant">
            <div>
              <div className="detail-hero__eyebrow" style={{ marginBottom: 12 }}>
                <Icon name="truck" size={11} stroke={2}/> Satıcılar için
              </div>
              <h2 style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 12, color: 'white' }}>
                Marine yedek parça satıcısı mısınız?
              </h2>
              <p style={{ color: 'rgba(255,255,255,0.8)', fontSize: 16, lineHeight: 1.6, marginBottom: 20, maxWidth: 520 }}>
                Ürün feed'inizi (CSV / XML / API) bize verin, ücretsiz olarak listelenin. Komisyon yok;
                yalnızca yönlendirilen tıklama başına sembolik ücret.
                <strong style={{ color: 'white' }}> Partner</strong> tier'a yükselin, marka sayfalarında öne çıkın.
              </p>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                <a href="#/" className="btn btn--accent btn--lg">Başvuru formu <Icon name="arrow-right" size={14}/></a>
                <a href="#/" className="btn btn--ghost btn--lg" style={{ background: 'rgba(255,255,255,0.08)', color: 'white', borderColor: 'rgba(255,255,255,0.18)' }}>
                  Teknik döküman
                </a>
              </div>
            </div>
            <div className="hiw-merchant__stats">
              <div>
                <div className="tabular" style={{ fontSize: 28, fontWeight: 700, color: 'var(--km-accent)' }}>47</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>aktif satıcı</div>
              </div>
              <div>
                <div className="tabular" style={{ fontSize: 28, fontWeight: 700, color: 'var(--km-accent)' }}>%18</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>ort. tıklama dönüşümü</div>
              </div>
              <div>
                <div className="tabular" style={{ fontSize: 28, fontWeight: 700, color: 'var(--km-accent)' }}>0%</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>satış komisyonu</div>
              </div>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <section className="sec">
          <div className="sec__head">
            <h2 className="sec__title">Sık sorulanlar</h2>
          </div>
          <Faq items={[
            ['Kolaymarin\'den satın alabilir miyim?',
             'Hayır. Kolaymarin\'de sepet ve ödeme yok. Karşılaştırmayı yaptıktan sonra sizi satıcının sayfasına yönlendiririz; ödeme orada gerçekleşir. Bu sayede satıcı garanti ve iade haklarınızı doğrudan saklarsınız.'],
            ['Listelenen fiyatlar gerçek mi?',
             'Evet — saatlik snapshot ile satıcının kendi sayfasından okunur. Yine de tıkladığınızda satıcı sayfasındaki güncel fiyatı son kez kontrol etmenizi öneririz; KDV ve özel kampanyalar değişebilir.'],
            ['Bir ürünü göremiyorum, ne yapabilirim?',
             'Arama kutusunda doğru marka/model/parça numarası ile arayın. Bulamadığınız bir ürünü bize bildirin; ilgili satıcılar listeyi günceller.'],
            ['Üye olmadan karşılaştırma yapabilir miyim?',
             'Evet. Karşılaştırma kaydı tarayıcınızın yerel depolaması (localStorage) içinde tutulur; sunucuya gönderilmez.'],
            ['Veri kaynağınız nedir?',
             'Her satıcı bize kendi feed\'ini (CSV, XML, API) verir veya sayfalarını izin verilen aralıkta tararız. Hiçbir kaynak izinsiz scrape edilmez.'],
            ['Komisyon alıyor musunuz?',
             'Satış komisyonu yok. Yönlendirilen tıklama başına satıcıdan sembolik ücret alırız; ücretler satıcıya değil bize fatura edilir, kullanıcı fiyatına yansımaz.'],
          ]}/>
        </section>

        {/* CTA */}
        <section className="sec" style={{ marginBottom: 64 }}>
          <div style={{
            background: 'var(--km-paper-2)',
            border: '1px solid var(--km-line)',
            borderRadius: 16,
            padding: 32,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            gap: 24,
            flexWrap: 'wrap',
          }}>
            <div>
              <h2 style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>Aramanızı başlatın</h2>
              <p style={{ color: 'var(--km-ink-500)', fontSize: 14 }}>28.940 ürün · 47 satıcı · saatlik güncel</p>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <a href="#/" className="btn btn--primary btn--lg">Anasayfa</a>
              <a href={urlForProduct(PRODUCTS[0])} className="btn btn--accent btn--lg">Örnek PDP görün</a>
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}

Object.assign(window, { HowItWorksPage });