window.EKO.list = function(V){
  return (
    <div style={css("max-width:1240px;margin:0 auto;padding:14px 16px 40px")}>
      <nav aria-label="Konum" style={css("display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--km-ink-500);margin-bottom:12px")}>
        <button onClick={V.goHome} style={css("color:var(--km-ink-500)")}>Ekosistem</button><span style={css("color:var(--km-ink-300)")}>/</span>
        <button onClick={V.goLanding} style={css("color:var(--km-ink-500)")}>{V.activeModule.name}</button><span style={css("color:var(--km-ink-300)")}>/</span>
        <span style={css("color:var(--km-ink-700);font-weight:600")}>{V.L.listTitle}</span>
      </nav>
      <div style={css("display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px")}>
        <h1 style={css("font-size:22px;font-weight:800;margin:0")}>{V.L.listTitle}</h1>
        <span style={css("font-size:13px;color:var(--km-ink-500)")}><b className="km-num" style={css("color:var(--km-ink-700)")}>{V.itemCount}</b> sonuç · {V.L.listFresh}</span>
      </div>

      <div style={css("margin-top:12px")}>
        <div className="km-filterbar" style={css("align-items:center;gap:10px;flex-wrap:wrap")}>
          { (V.filterChips || []).map(function(f, $index){ return ( <button key={$index} onClick={f.set} style={css("font-size:12.5px;font-weight:600;color:" + f.fg + ";background:" + f.bg + ";border:1px solid var(--km-line);border-radius:999px;padding:7px 13px")}>{f.label}</button> ); }) }
          <span style={css("flex:1;min-width:8px")}></span>
          <span style={css("font-size:12px;color:var(--km-ink-400)")}>Sırala:</span>
          { (V.sortOptions || []).map(function(o, $index){ return ( <button key={$index} onClick={o.set} style={css("font-size:12.5px;font-weight:600;color:" + o.fg + ";background:" + o.bg + ";border:1px solid var(--km-line);border-radius:8px;padding:7px 12px")}>{o.label}</button> ); }) }
        </div>
        <button className="km-filterbtn" onClick={V.toggleFilter} style={css("width:100%;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--km-ink-700);background:var(--km-paper);border:1px solid var(--km-line-strong);border-radius:11px;padding:11px")}>{V.icFilter} Filtrele & Sırala{ (V.hasActiveFilter) ? (<><span style={css("background:var(--km-mod);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px")}>{V.activeFilterCount}</span></>) : null }</button>
      </div>

      { (V.hasMap) ? (<>
      <div style={css("margin-top:14px")}>
        <div style={css("position:relative;height:clamp(220px,34vw,300px);border-radius:16px;overflow:hidden;border:1px solid var(--km-line);background:linear-gradient(165deg,#e7f2fb,#cfe6f5 60%,#bcdcef)")}>
          <div aria-hidden="true" style={css("position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0 40px,rgba(255,255,255,.35) 40px 41px),repeating-linear-gradient(0deg,transparent 0 40px,rgba(255,255,255,.35) 40px 41px)")}></div>
          <div aria-hidden="true" style={css("position:absolute;left:-8%;bottom:-32%;width:72%;height:82%;background:" + V.activeModule.accentSoft + ";border-radius:52% 48% 0 0 / 64% 60% 0 0;opacity:.5")}></div>
          <div aria-hidden="true" style={css("position:absolute;right:-14%;top:-26%;width:52%;height:64%;background:" + V.activeModule.accentSoft + ";border-radius:0 0 50% 55% / 0 0 62% 58%;opacity:.38")}></div>
          { (V.items || []).map(function(it, $index){ return (
            <button key={$index} onClick={it.showPin} title={it.title} aria-label={it.title + " — haritada göster"} style={css("position:absolute;left:" + it.pinLeft + ";top:" + it.pinTop + ";transform:translate(-50%,-50%);width:26px;height:26px;border-radius:999px;background:" + V.activeModule.accent + ";color:#fff;border:2px solid #fff;box-shadow:0 2px 6px rgba(15,27,45,.3);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:1")}>{it.pinN}</button>
          ); }) }
          { (V.activePinData) ? (<>
          <div onClick={V.activePinData.open} role="button" style={css("position:absolute;left:" + V.activePinData.left + ";top:" + V.activePinData.top + ";transform:translate(-50%,calc(-100% - 20px));z-index:3;width:200px;background:var(--km-paper);border:1px solid var(--km-line-strong);border-radius:12px;box-shadow:0 14px 30px -10px rgba(15,27,45,.4);padding:12px 13px;cursor:pointer;animation:kmrise .18s ease both")}>
            <div style={css("display:flex;align-items:flex-start;justify-content:space-between;gap:8px")}>
              <span style={css("font-size:13.5px;font-weight:700;color:var(--km-ink-900);line-height:1.25")}>{V.activePinData.title}</span>
              <button onClick={V.stopPin} aria-label="Kapat" style={css("flex:none;color:var(--km-ink-400);display:flex;margin:-2px -3px 0 0")}>{V.icX}</button>
            </div>
            <div style={css("font-size:11.5px;color:var(--km-ink-500);margin-top:2px")}>{V.activePinData.place}</div>
            <div style={css("display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px")}>
              <span style={css("font-size:15px;font-weight:800;color:var(--km-ink-900)")} className="km-num">{V.activePinData.price}<span style={css("font-size:11px;font-weight:500;color:var(--km-ink-400)")}>{V.activePinData.priceUnit}</span></span>
              <span style={css("font-size:10.5px;font-weight:700;color:" + V.activePinData.badgeFg + ";background:" + V.activePinData.badgeBg + ";padding:3px 8px;border-radius:999px")}>{V.activePinData.badge}</span>
            </div>
            <div style={css("display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--km-deep);margin-top:10px")}>Detayı gör {V.icArrow}</div>
            <span aria-hidden="true" style={css("position:absolute;left:50%;bottom:-7px;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:var(--km-paper);border-right:1px solid var(--km-line-strong);border-bottom:1px solid var(--km-line-strong)")}></span>
          </div>
          </>) : null }
          <span style={css("position:absolute;left:12px;bottom:10px;font-family:var(--font-mono);font-size:10.5px;color:var(--km-ink-600);background:rgba(255,255,255,.72);padding:3px 8px;border-radius:6px")}>Harita · pin'ler yaklaşık konumdur</span>
        </div>
      </div>
      </>) : null }
      { (V.listLoading) ? (<>
        <div style={css("display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin-top:14px")}>
          <div className="km-skel" style={css("height:230px")}></div><div className="km-skel" style={css("height:230px")}></div><div className="km-skel" style={css("height:230px")}></div><div className="km-skel" style={css("height:230px")}></div><div className="km-skel" style={css("height:230px")}></div><div className="km-skel" style={css("height:230px")}></div>
        </div>
      </>) : null }
      <div style={css("display:" + V.itemsDisplay + ";grid-template-columns:1fr;gap:16px;margin-top:14px")}>
        <div style={css("display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px")}>
          { (V.items || []).map(function(it, $index){ return (
            <button key={$index} onClick={it.open} className="km-ch" style={css("text-align:left;background:var(--km-paper);border:1px solid var(--km-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column")}>
              <span style={css("position:relative")}>
                <span onClick={V.stop} style={css("display:block;height:140px")}><ImageSlot src={it.coverSrc || V.activeModule.coverSrc} fit="cover" placeholder={it.ph} style={css("width:100%;height:100%;display:block")} /></span>
                <span style={css("position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;background:" + it.badgeBg + ";color:" + it.badgeFg + ";font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px")}>{it.badgeIcon}{it.badge}</span>
              </span>
              <span style={css("padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px")}>
                <span style={css("display:flex;align-items:start;justify-content:space-between;gap:8px")}>
                  <span>
                    <span style={css("display:block;font-size:15px;font-weight:700;color:var(--km-ink-900)")}>{it.title}</span>
                    <span style={css("display:block;font-size:12.5px;color:var(--km-ink-500);margin-top:2px")}>{it.place}</span>
                  </span>
                  <span style={css("text-align:right;flex:none")}>
                    <span style={css("display:block;font-size:15px;font-weight:800;color:var(--km-ink-900)")} className="km-num">{it.price}</span>
                    <span style={css("display:block;font-size:11px;color:var(--km-ink-400)")}>{it.priceUnit}</span>
                  </span>
                </span>
                <span style={css("display:flex;flex-wrap:wrap;gap:5px")}>
                  { (it.tags || []).map(function(t, $index){ return ( <span key={$index} style={css("font-size:11px;color:var(--km-ink-600);background:var(--km-paper-3);padding:3px 8px;border-radius:6px")}>{t}</span> ); }) }
                </span>
                <span style={css("display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px")}>
                  <span style={css("display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--km-ink-400)")}>{V.icClock} {it.fresh}</span>
                  <span style={css("display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:" + V.activeModule.accent)}>Detay {V.icArrow}</span>
                </span>
              </span>
            </button>
          ); }) }
        </div>
      </div>
      { (V.listEmpty) ? (<>
      <div style={css("text-align:center;background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;padding:44px 20px;margin-top:14px")}>
        <span style={css("width:56px;height:56px;border-radius:14px;background:var(--km-paper-3);color:var(--km-ink-400);display:flex;align-items:center;justify-content:center;margin:0 auto")}>{V.icSearch}</span>
        <h2 style={css("font-size:17px;font-weight:700;margin:16px 0 0")}>Sonuç bulunamadı</h2>
        <p style={css("font-size:13.5px;color:var(--km-ink-500);line-height:1.5;margin:8px auto 0;max-width:360px")}>Seçtiğin filtrelere uygun kayıt yok. Filtreleri temizleyip tekrar dene.</p>
        <button onClick={V.clearFilter} style={css("background:var(--km-deep);color:#fff;font-weight:700;font-size:13.5px;padding:11px 20px;border-radius:11px;margin-top:18px")}>Filtreleri temizle</button>
      </div>
      </>) : null }
      <section style={css("margin-top:26px")}>
        <div style={css("background:var(--km-deep-soft);border:1px solid #D2E2EF;border-radius:14px;padding:16px")}>
          <div style={css("font-size:13px;font-weight:700;color:var(--km-deep);margin-bottom:11px")}>İlgili ürünler</div>
          <div style={css("display:flex;flex-wrap:wrap;gap:10px")}>
            { (V.L.cross || []).map(function(x, $index){ return (
              <button key={$index} onClick={x.open} className="km-ch" style={css("text-align:left;flex:1;min-width:230px;background:var(--km-paper);border:1px solid var(--km-line);border-radius:11px;padding:12px 14px;display:flex;align-items:center;gap:11px")}>
                <span style={css("flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:" + x.accentSoft + ";color:" + x.accent)}>{x.iconEl}</span>
                <span style={css("flex:1")}>
                  <span style={css("display:block;font-size:13.5px;font-weight:700;color:var(--km-ink-900)")}>{x.name}</span>
                  <span style={css("display:block;font-size:12px;color:var(--km-ink-500);line-height:1.35;margin-top:1px")}>{x.note}</span>
                </span>
                <span style={css("color:var(--km-ink-300);display:flex")}>{V.icArrow}</span>
              </button>
            ); }) }
          </div>
        </div>
      </section>
    </div>
  );
};
