window.EKO.header = function(V){
  return (
    <header style={css("position:sticky;top:0;z-index:60;background:var(--km-paper);border-bottom:1px solid var(--km-line);box-shadow:0 1px 2px rgba(15,27,45,.04)")}>
      <div style={css("max-width:1240px;margin:0 auto;padding:0 16px;height:60px;display:flex;align-items:center;gap:14px")}>
        <button onClick={V.toggleMenu} aria-label="Ekosistem menüsünü aç" style={css("display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px")}>
          <span style={css("display:inline-flex;color:var(--km-deep)")}>{V.icMenu}</span>
          <span style={css("font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--km-deep)")}>Kolay<span style={css("color:var(--km-mod)")}>{V.wordmarkSuf}</span></span>
        </button>

        <div className="km-search-center" style={css("flex:1;max-width:540px;margin:0 auto;display:flex;align-items:center;gap:9px;background:var(--km-paper-2);border:1px solid var(--km-line);border-radius:12px;padding:0 12px;height:42px")}>
          <span style={css("color:var(--km-ink-400);display:inline-flex")}>{V.icSearch}</span>
          <input value={V.query} onInput={V.onQuery} placeholder={V.activeModule.ph} aria-label="Ara" style={css("flex:1;border:0;background:none;outline:none;font-size:14px;color:var(--km-ink-900);min-width:0")}/>
          <button onClick={V.openPhoto} aria-label="Foto ile ara" title="Foto ile ara" style={css("display:inline-flex;align-items:center;color:var(--km-ink-500);padding:4px;border-radius:8px")}>{V.icCamera}</button>
          <button onClick={V.doSearch} style={css("font-size:12px;font-weight:600;color:#fff;background:var(--km-deep);padding:7px 12px;border-radius:8px")}>Ara</button>
        </div>

        <a href="/giris" aria-label="Giriş yap / üye ol" style={css("margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--km-ink-700);border:1px solid var(--km-line-strong);background:var(--km-paper);padding:8px 13px;border-radius:9px")}><span style={css("display:flex;color:var(--km-deep)")}>{V.icUser}</span>Giriş</a>
        <nav className="km-desktop-nav" aria-label="Modül navigasyonu" style={css("display:flex;align-items:center;gap:4px")}>
          <span style={css("position:relative;display:inline-flex")}>
            <button onClick={V.openLoc} aria-label="Lokasyon filtresi" style={css("display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--km-ink-700);border:1px solid var(--km-line-strong);background:var(--km-paper);padding:8px 11px;border-radius:9px")}><span style={css("display:flex;color:var(--km-deep)")}>{V.icPin}</span>{V.loc}<span style={css("font-size:10px;color:var(--km-ink-400)")}>▾</span></button>
            { (V.locOpen) ? (<>
            <span onClick={V.closeLoc} style={css("position:fixed;inset:0;z-index:59")}></span>
            <span style={css("position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:190px;background:var(--km-paper);border:1px solid var(--km-line);border-radius:11px;box-shadow:var(--shadow-3);overflow:hidden;display:block")}>
              { (V.locList || []).map(function(l, $index){ return ( <button key={$index} onClick={l.set} style={css("width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:" + l.active + ";color:" + l.color + ";padding:9px 13px;background:" + l.bg + ";border:0;border-bottom:1px solid var(--km-line)")}>{l.label}{ (l.on) ? (<><span style={css("display:flex;color:var(--km-deep)")}>{V.icCheck}</span></>) : null }</button> ); }) }
            </span>
            </>) : null }
          </span>
          <button onClick={V.goPanel} style={css("font-size:13px;font-weight:600;color:#fff;background:var(--km-mod);padding:9px 14px;border-radius:9px")}>Panel</button>
        </nav>
      </div>
      <div className="km-search-mobile" style={css("padding:0 16px 12px")}>
        <div style={css("display:flex;align-items:center;gap:9px;background:var(--km-paper-2);border:1px solid var(--km-line);border-radius:12px;padding:0 12px;height:44px")}>
          <span style={css("color:var(--km-ink-400);display:inline-flex")}>{V.icSearch}</span>
          <input value={V.query} onInput={V.onQuery} placeholder={V.activeModule.ph} aria-label="Ara" style={css("flex:1;border:0;background:none;outline:none;font-size:15px;min-width:0")}/>
          <button onClick={V.openPhoto} aria-label="Foto ile ara" title="Foto ile ara" style={css("display:inline-flex;align-items:center;color:var(--km-ink-500);padding:4px")}>{V.icCamera}</button>
          <button onClick={V.doSearch} style={css("font-size:13px;font-weight:600;color:#fff;background:var(--km-deep);padding:8px 13px;border-radius:8px")}>Ara</button>
        </div>
      </div>
    </header>
  );
};

window.EKO.menuDrawer = function(V){
  return (
    <div onClick={V.closeMenu} style={css("position:fixed;inset:0;z-index:90;background:rgba(15,27,45,.42)")}>
      <div onClick={V.stop} role="dialog" aria-label="Kolaymarin Ekosistemi" style={css("position:absolute;top:0;left:0;height:100%;width:min(440px,92vw);background:var(--km-paper);box-shadow:var(--shadow-4);overflow-y:auto")}>
        <div style={css("position:sticky;top:0;background:var(--km-deep);color:#fff;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;z-index:1")}>
          <button onClick={V.goHome} aria-label="Ekosistem ana sayfasına dön" style={css("text-align:left;background:none;border:0;cursor:pointer;padding:0")}>
            <div style={css("font-weight:800;font-size:17px;color:#fff")}>Kolaymarin Ekosistemi</div>
            <div style={css("font-size:12px;color:#A8C4DC;margin-top:2px")}>Türkiye'nin denizcilik arama + ticaret ağı · başa dön</div>
          </button>
          <button onClick={V.closeMenu} aria-label="Menüyü kapat" style={css("color:#fff;padding:6px;border-radius:8px;display:flex")}>{V.icX}</button>
        </div>
        <div style={css("padding:14px 14px 28px")}>
          { (V.groups || []).map(function(g, $index){ return (
            <div key={$index} style={css("margin-bottom:6px")}>
              <div style={css("font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--km-ink-400);padding:12px 8px 6px")}>{g.cat}</div>
              { (g.items || []).map(function(m, $index){ return (
                <button key={$index} onClick={m.open} style={css("width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:11px 10px;border-radius:11px;background:" + m.bg)}>
                  <span style={css("flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:" + m.accentSoft + ";color:" + m.accent)}>{m.iconEl}</span>
                  <span aria-hidden="true" style={css("flex:none;width:34px;height:34px;border-radius:8px;overflow:hidden;position:relative")}><ImageSlot src={m.coverSrc} fit="cover" placeholder="" style={css("width:100%;height:100%;display:block")} /></span>
                  <span style={css("flex:1;min-width:0")}>
                    <span style={css("display:block;font-size:14px;font-weight:700;color:var(--km-ink-900)")}>{m.name}</span>
                    <span style={css("display:block;font-size:12px;color:var(--km-ink-500);line-height:1.35;margin-top:1px")}>{m.short}</span>
                  </span>
                  { (m.active) ? (<><span style={css("flex:none;color:var(--km-deep);display:flex")}>{V.icCheck}</span></>) : null }
                </button>
              ); }) }
            </div>
          ); }) }
        </div>
      </div>
    </div>
  );
};

window.EKO.footer = function(V){
  return (
    <footer style={css("background:var(--km-deep-3);color:#C5D8E8;padding:38px 16px 28px;margin-top:auto")}>
      <div style={css("max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px")}>
        <div>
          <div style={css("font-weight:800;font-size:18px;color:#fff")}>Kolay<span style={css("color:var(--km-accent)")}>marin</span></div>
          <p style={css("font-size:13px;line-height:1.55;margin:10px 0 0;color:#90AAC4")}>Türkiye'nin denizcilik arama + ticaret platformu. {V.platformCount} platform, tek tasarım dili.</p>
          <div style={css("display:flex;gap:9px;margin-top:14px")}>
            <a href="#" aria-label="Instagram" onClick={V.stop} style={css("width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#C5D8E8")}>{V.icInstagram}</a>
            <a href="#" aria-label="YouTube" onClick={V.stop} style={css("width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#C5D8E8")}>{V.icYoutube}</a>
            <a href="#" aria-label="LinkedIn" onClick={V.stop} style={css("width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#C5D8E8")}>{V.icLinkedin}</a>
          </div>
          <div style={css("display:flex;align-items:center;gap:10px;margin-top:16px")}>
            <button onClick={V.toggleLang} aria-label="Dil değiştir" style={css("display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#C5D8E8;border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:6px 11px")}><span style={css("display:flex")}>{V.icGlobe}</span>{V.langLabel}<span style={css("font-size:11px;color:#7E98B4")}>· {V.langOther}</span></button>
            <span style={css("font-size:12px;color:#7E98B4")}>© 2026 Kolaymarin</span>
          </div>
          <div style={css("margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)")}>
            <div style={css("font-size:12.5px;font-weight:700;color:#C5D8E8")}>Talya Smart Investment Yatırım A.Ş.</div>
            <div style={css("font-size:12px;line-height:1.55;color:#7E98B4;margin-top:5px")}>Ege Üniversitesi Teknopark, Erzene Mah. Ankara Cad. Ebiltem Binası No 172/14 Ek2, 35100 Bornova / İzmir</div>
            <a href="mailto:info@talyasmart.com" style={css("display:inline-block;font-size:12.5px;font-weight:600;color:var(--km-accent);margin-top:7px")}>info@talyasmart.com</a>
          </div>
        </div>
        <div>
          <div style={css("font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7E98B4;margin-bottom:10px")}>Kurumsal & Yardım</div>
          <a href="/hakkimizda" style={css("display:block;font-size:13px;padding:4px 0;color:#C5D8E8;text-decoration:none")}>Hakkımızda</a>
          <a href="/iletisim" style={css("display:block;font-size:13px;padding:4px 0;color:#C5D8E8;text-decoration:none")}>İletişim</a>
          <a href="/yardim" style={css("display:block;font-size:13px;padding:4px 0;color:#C5D8E8;text-decoration:none")}>Yardım Merkezi</a>
          <button onClick={V.openSeller} style={css("display:block;font-size:13px;padding:4px 0;text-align:left;color:#C5D8E8")}>Satıcı / İş Ortağı</button>
        </div>
        <div>
          <div style={css("font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7E98B4;margin-bottom:10px")}>Yasal</div>
          <a href="/kvkk" style={css("display:block;font-size:13px;padding:4px 0;color:#C5D8E8;text-decoration:none")}>KVKK Aydınlatma Metni</a>
          <a href="/cerez" style={css("display:block;font-size:13px;padding:4px 0;color:#C5D8E8;text-decoration:none")}>Çerez Politikası</a>
          <a href="/kullanim-sartlari" style={css("display:block;font-size:13px;padding:4px 0;color:#C5D8E8;text-decoration:none")}>Kullanım Şartları</a>
        </div>
        <div>
          <div style={css("font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7E98B4;margin-bottom:10px")}>Yönetim</div>
          <a href="https://admin.kolaymarin.com/tr/login" style={css("display:block;font-size:13px;color:#C5D8E8;padding:4px 0;text-decoration:none")}>Admin Girişi</a>
          <button onClick={V.goPanel} style={css("display:block;font-size:13px;color:#C5D8E8;padding:4px 0;text-align:left")}>Satıcı / İşletme Girişi</button>
          <a href="https://admin.kolaymarin.com/tr/login" style={css("display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--km-deep-3);background:var(--km-accent);padding:8px 13px;border-radius:9px;margin-top:9px;text-decoration:none")}>Admin Konsolu →</a>
        </div>
      </div>
      <div style={css("max-width:1240px;margin:26px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)")}>
        <div style={css("font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7E98B4;margin-bottom:12px")}>Platformlar · {V.platformCount} platform</div>
        <div className="km-foot4">
          { (V.footerProducts || []).map(function(m, $index){ return ( <button key={$index} onClick={m.open} style={css("display:block;font-size:13px;color:#C5D8E8;padding:4px 0;text-align:left")}>{m.name}</button> ); }) }
        </div>
      </div>
      <div style={css("max-width:1240px;margin:22px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#7E98B4")}>Fiyatlar ve bilgiler kaynaklara göre farklı aralıklarla güncellenir; nihai teyit için ilgili satıcı/sağlayıcı ile iletişime geçin.</div>
    </footer>
  );
};

window.EKO.bottomNav = function(V){
  return (
    <nav className="km-bottom-nav" aria-label="Alt navigasyon" style={css("position:fixed;left:0;right:0;bottom:0;z-index:58;background:var(--km-paper);border-top:1px solid var(--km-line);box-shadow:0 -2px 12px rgba(15,27,45,.06);height:64px;align-items:stretch")}>
      <button onClick={V.goHome} style={css("flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:" + V.navHomeColor)}><span style={css("display:flex")}>{V.icHome}</span><span style={css("font-size:10.5px;font-weight:600")}>Ana sayfa</span></button>
      <button onClick={V.openList} style={css("flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:" + V.navSearchColor)}><span style={css("display:flex")}>{V.icSearch}</span><span style={css("font-size:10.5px;font-weight:600")}>Ara</span></button>
      <button onClick={V.goPanel} style={css("flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:" + V.navPanelColor)}><span style={css("display:flex")}>{V.icPanel}</span><span style={css("font-size:10.5px;font-weight:600")}>Panel</span></button>
      <button onClick={V.toggleMenu} style={css("flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--km-ink-500)")}><span style={css("display:flex")}>{V.icMenu}</span><span style={css("font-size:10.5px;font-weight:600")}>Menü</span></button>
    </nav>
  );
};
