// Homepage — §8

function HomePage({ onCompareToggle, compareSet, onPhotoSearch }) {
  const [q, setQ] = React.useState('');
  const popular = PRODUCTS.slice(0, 4);
  const submit = (e) => { e.preventDefault(); if (q.trim()) navigate(urlForSearch(q.trim())); };

  return (
    <main id="main" data-screen-label="Home">
      <section className="home-hero">
        <div className="container home-hero__grid">
          <div className="home-hero__copy">
          <div className="home-hero__live">
            <span className="home-hero__live-dot" aria-hidden="true"></span>
            <span>Son tarama <strong>{timeAgoTr(MARKETPLACE_STATS.lastUpdatedAt)}</strong> · <span className="tabular">{formatNum(MARKETPLACE_STATS.merchantCount)}</span> satıcı tarandı</span>
          </div>
          <h1>Türkiye'nin marine yedek parçası için <em>tek arama</em>.</h1>
          <p>
            <strong>Satış yapmıyoruz.</strong> Türkiye'deki marine satıcıların fiyatlarını, stoklarını ve kargo sürelerini tek ekranda karşılaştırıyoruz. Sepet yok, üyelik yok.
          </p>

          <div className="home-hero__searchRow">
            <form className="home-hero__search" onSubmit={submit} role="search">
              <Icon name="search" size={18} stroke={2} style={{ alignSelf: 'center', marginLeft: 14, color: 'var(--km-ink-400)' }}/>
              <input
                type="search"
                value={q}
                onChange={(e) => setQ(e.target.value)}
                placeholder="Ürün, marka veya model — örn. garmin echomap 92sv"
                aria-label="Arama"
              />
              <button type="submit" className="btn btn--primary">Ara</button>
            </form>
            <button
              type="button"
              className="photo-cta"
              onClick={onPhotoSearch}
              aria-label="Fotoğraf ile parça ara"
              title="Parça fotoğrafını yükle, eşleştirelim"
            >
              <Icon name="camera" size={18} stroke={1.8}/>
              <span>Fotoğrafla ara</span>
              <small>parça adını bilmiyorum</small>
            </button>
          </div>

          <div className="home-hero__chips">
            <span className="home-hero__chips-label">Popüler:</span>
            {POPULAR_SEARCHES.map(s => (
              <a key={s} href={urlForSearch(s)}>{s}</a>
            ))}
          </div>

          <ul className="trust-strip" aria-label="Güven göstergeleri">
            <li>
              <span className="trust-strip__tick"><Icon name="check" size={11} stroke={3}/></span>
              <span className="tabular">{formatNum(MARKETPLACE_STATS.merchantCount)}</span> doğrulanmış satıcı
            </li>
            <li>
              <span className="trust-strip__tick"><Icon name="check" size={11} stroke={3}/></span>
              Saatlik fiyat &amp; stok taraması
            </li>
            <li>
              <span className="trust-strip__tick"><Icon name="check" size={11} stroke={3}/></span>
              <span className="tabular">{formatNum(MARKETPLACE_STATS.productCount)}</span>+ ürün karşılaştırması
            </li>
            <li>
              <span className="trust-strip__tick"><Icon name="check" size={11} stroke={3}/></span>
              Türkiye geneli · KDV dahil fiyat
            </li>
          </ul>
          </div>

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

            {/* Floating snapshot card — product-specific overlay */}
            <div className="home-hero__snap">
              <div className="home-hero__snap-head">
                <span className="home-hero__snap-dot"/>
                <span className="home-hero__snap-eyebrow">CANLI FİYAT SNAPSHOT</span>
                <span className="home-hero__snap-time tabular">14:02</span>
              </div>
              <div className="home-hero__snap-product">
                <div className="home-hero__snap-thumb">
                  <Icon name="fish" size={20} stroke={1.4}/>
                </div>
                <div>
                  <div className="home-hero__snap-brand">GARMIN</div>
                  <div className="home-hero__snap-name">Echomap UHD2 92sv</div>
                </div>
              </div>
              <div className="home-hero__snap-offers">
                <div className="home-hero__snap-offer home-hero__snap-offer--best">
                  <div>
                    <span className="home-hero__snap-merch">East Marine</span>
                    <span className="home-hero__snap-tier">PARTNER</span>
                  </div>
                  <div className="home-hero__snap-price tabular">₺28.950</div>
                </div>
                <div className="home-hero__snap-offer">
                  <div><span className="home-hero__snap-merch">Marinex</span></div>
                  <div className="home-hero__snap-price tabular">₺29.490</div>
                </div>
                <div className="home-hero__snap-offer">
                  <div><span className="home-hero__snap-merch">Deniz Marketi</span></div>
                  <div className="home-hero__snap-price tabular">₺29.750</div>
                </div>
              </div>
              <div className="home-hero__snap-footer">
                <span><strong className="tabular">7</strong> mağazada</span>
                <span className="home-hero__snap-sep">·</span>
                <span>fark <strong className="tabular" style={{ color: 'var(--km-good)' }}>%12</strong></span>
                <span className="home-hero__snap-sep">·</span>
                <span>son tarama <strong>2 dk önce</strong></span>
              </div>
            </div>

            {/* Stacked floating badges */}
            <div className="home-hero__badge home-hero__badge--top">
              <Icon name="check-circle" size={14} stroke={2.2}/>
              <div>
                <div className="home-hero__badge-num tabular">47</div>
                <div className="home-hero__badge-lbl">doğrulanmış<br/>marine satıcı</div>
              </div>
            </div>
          </aside>
        </div>
      </section>

      <section className="container">
        <div className="explainer">
          <div className="explainer__head">Nasıl çalışır?</div>
          <p>
            Marine parça fiyatları dağınık. Biz Türkiye'deki satıcıları saatlik tarayıp <strong>stok</strong>, <strong>fiyat</strong> ve <strong>teslim süresini</strong> tek ekranda topluyoruz. Karar verdiğinizde sizi doğrudan satıcının kendi sayfasına yönlendiriyoruz — aradaki kargo, iade, fatura ilişkisi tamamen satıcıyla.
          </p>
          <a href="#/nasil-calisir" className="explainer__link">Süreci ve veri güncelliğini ayrıntılı oku <Icon name="arrow-up-right" size={12}/></a>
        </div>
      </section>

      <section className="container sec" style={{ marginTop: 64 }}>
        <div className="sec__head">
          <h2 className="sec__title">Kategoriler</h2>
          <a href="#/" style={{ fontSize: 13, color: 'var(--km-deep)', fontWeight: 500 }}>Tüm kategoriler →</a>
        </div>
        <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>

      <section className="container sec">
        <div className="stats stats--telemetry">
          <div>
            <div className="stat__num tabular">{formatNum(MARKETPLACE_STATS.merchantCount)}</div>
            <div className="stat__lbl">Doğrulanmış satıcı</div>
            <div className="stat__small">tier sistemi · saatlik kontrol</div>
          </div>
          <div>
            <div className="stat__num tabular">{formatNum(MARKETPLACE_STATS.productCount)}</div>
            <div className="stat__lbl">Karşılaştırılan ürün</div>
            <div className="stat__small">8 ana kategoride</div>
          </div>
          <div>
            <div className="stat__num tabular">{formatNum(MARKETPLACE_STATS.offerCount)}</div>
            <div className="stat__lbl">Aktif fiyat snapshot'ı</div>
            <div className="stat__small">son 14 günde tarandı</div>
          </div>
          <div>
            <div className="stat__num"><span className="stat__pulse" aria-hidden="true"></span>{timeAgoTr(MARKETPLACE_STATS.lastUpdatedAt).replace(' önce', '')}</div>
            <div className="stat__lbl">Son fiyat taraması</div>
            <div className="stat__small">otomatik · 24/7 cron</div>
          </div>
        </div>
      </section>

      <section className="container sec">
        <div className="sec__head">
          <h2 className="sec__title">Şu an en çok karşılaştırılan</h2>
          <a href="#/" style={{ fontSize: 13, color: 'var(--km-deep)', fontWeight: 500 }}>Daha fazla →</a>
        </div>
        <RelatedProducts products={popular} onCompareToggle={onCompareToggle} compareSet={compareSet}/>
      </section>

      <section className="container sec">
        <div className="sec__head">
          <h2 className="sec__title">Çok aranan markalar</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 12 }}>
          {POPULAR_BRANDS.map(b => (
            <a key={b.slug} href="#/" style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '14px 16px', border: '1px solid var(--km-line)', borderRadius: 12,
              transition: 'all .12s', background: 'white',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--km-deep)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--km-line)'; }}>
              <span style={{ fontWeight: 600, fontSize: 14 }}>{b.name}</span>
              <span style={{ fontSize: 12, color: 'var(--km-ink-500)' }} className="tabular">{b.products}</span>
            </a>
          ))}
        </div>
      </section>

      <section className="container sec">
        <div className="how">
          <div className="how__step">
            <div className="how__num">1</div>
            <div className="how__h">Tek arama, onlarca satıcı</div>
            <p className="how__p">Marine yedek parça aradığınızda 47+ satıcının fiyat ve stoğunu tek seferde görürsünüz.</p>
          </div>
          <div className="how__step">
            <div className="how__num">2</div>
            <div className="how__h">Şeffaf karşılaştırma</div>
            <p className="how__p">Sadece fiyat değil — kargo, stok, satıcı güvenilirlik tier'ı ve verinin tazeliği yan yana.</p>
          </div>
          <div className="how__step">
            <div className="how__num">3</div>
            <div className="how__h">Tek tıkla satıcıya</div>
            <p className="how__p">Karar verdiğinizde sepet veya kayıt olmadan doğrudan satıcı sayfasına yönlendiririz.</p>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage });