{{define "content"}}
<section class="hero-strip">
  <div class="container hero-grid">
    <div class="hero-banner reveal">
      <div class="hero-banner-copy">
        {{if .S.HeroChip}}<span class="hero-chip">{{.S.HeroChip}}</span>{{end}}
        <h1>{{if .S.HeroTitle}}{{safe .S.HeroTitle}}{{else}}Akülü araçlarda <em>ücretsiz kargo</em> + 2 yıl garanti{{end}}</h1>
        <p>{{if .S.HeroSub}}{{.S.HeroSub}}{{else}}CE sertifikalı akülü arabalar, jipler, motosikletler ve engelli araçları — havale/EFT ile güvenli ödeme, 24 saatte kargoda.{{end}}</p>
        <div class="hero-actions">
          <a class="btn btn-primary btn-lg" href="/urunler">Hemen İncele
            <svg class="ico ico-sm"><use href="/static/icons.svg#i-arrow"/></svg>
          </a>
          {{with .S.MainPhone}}
          <a class="btn btn-white btn-lg" href="{{tel .}}">
            <svg class="ico ico-sm"><use href="/static/icons.svg#i-phone"/></svg>{{.}}
          </a>
          {{end}}
        </div>
      </div>
      <div class="hero-deco">
        <svg viewBox="0 0 48 48" width="150" height="150"><path d="M9.5 35.5 C8.1 35.5 7 34.4 7 33 L7 31.6 C7 28.4 9.1 26.1 12.4 25.6 L15.7 25.1 18.6 20.4 C19.6 18.8 21.2 17.9 23.1 17.9 L26 17.9 C27.9 17.9 29.5 18.8 30.5 20.3 L33.5 25 36.4 25.5 C39.4 26 41.5 28.3 41.5 31.3 L41.5 33 C41.5 34.4 40.4 35.5 39 35.5 Z M29.8 24.2 L28.4 21.7 C28 21 27.3 20.6 26.5 20.6 L25 20.6 C24.2 20.6 23.5 21 23.1 21.7 L21.7 24.2 Z M20.1 35 A4.6 4.6 0 1 1 10.9 35 A4.6 4.6 0 1 1 20.1 35 Z M17.5 35 A2 2 0 1 0 13.5 35 A2 2 0 1 0 17.5 35 Z M38.1 35 A4.6 4.6 0 1 1 28.9 35 A4.6 4.6 0 1 1 38.1 35 Z M35.5 35 A2 2 0 1 0 31.5 35 A2 2 0 1 0 35.5 35 Z" fill="currentColor"/></svg>
      </div>
    </div>
    <div class="hero-minis">
      <a class="mini-banner mini-1 reveal" href="/urunler?kategori=akulu-jip">
        <svg class="ico ico-lg"><use href="/static/icons.svg#i-suv"/></svg>
        <div><strong>Akülü Jipler</strong><span>4x4 keyfi burada</span></div>
        <svg class="ico ico-sm mini-arrow"><use href="/static/icons.svg#i-arrow"/></svg>
      </a>
      <a class="mini-banner mini-2 reveal" href="/urunler?kategori=engelli-araci">
        <svg class="ico ico-lg"><use href="/static/icons.svg#i-wheel"/></svg>
        <div><strong>Engelli Araçları</strong><span>Konfor ve özgürlük</span></div>
        <svg class="ico ico-sm mini-arrow"><use href="/static/icons.svg#i-arrow"/></svg>
      </a>
    </div>
  </div>
</section>

<section class="trustbar">
  <div class="container trustbar-in reveal">
    <div class="trust-item"><svg class="ico"><use href="/static/icons.svg#i-truck"/></svg><div><strong>Ücretsiz Kargo</strong><span>Türkiye geneli sigortalı</span></div></div>
    <div class="trust-item"><svg class="ico"><use href="/static/icons.svg#i-shield"/></svg><div><strong>2 Yıl Garanti</strong><span>Faturalı ve belgeli</span></div></div>
    <div class="trust-item"><svg class="ico"><use href="/static/icons.svg#i-card"/></svg><div><strong>Havale/EFT</strong><span>Güvenli kolay ödeme</span></div></div>
    <div class="trust-item"><svg class="ico"><use href="/static/icons.svg#i-headset"/></svg><div><strong>Canlı Destek</strong><span>Telefon &amp; WhatsApp</span></div></div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="section-head reveal">
      <h2>Kategoriler</h2>
      <a class="section-link" href="/urunler">Tümünü Gör <svg class="ico ico-xs"><use href="/static/icons.svg#i-arrow"/></svg></a>
    </div>
    <div class="cat-grid">
      {{range .Categories}}
      <a class="cat-card reveal" href="/urunler?kategori={{.Slug}}">
        <span class="cat-ico">
          <svg class="ico ico-lg"><use href="/static/icons.svg#{{if eq .Slug "akulu-araba"}}i-car{{else if eq .Slug "akulu-jip"}}i-suv{{else if eq .Slug "akulu-motor"}}i-moto{{else}}i-wheel{{end}}"/></svg>
        </span>
        <span class="cat-name">{{.Name}}</span>
        <span class="cat-link">İncele <svg class="ico ico-xs"><use href="/static/icons.svg#i-arrow"/></svg></span>
      </a>
      {{end}}
    </div>
  </div>
</section>

{{if .Featured}}
<section class="section">
  <div class="container">
    <div class="section-head reveal">
      <h2>Öne Çıkan Ürünler</h2>
      <a class="section-link" href="/urunler">Tümünü Gör <svg class="ico ico-xs"><use href="/static/icons.svg#i-arrow"/></svg></a>
    </div>
    <div class="product-grid">
      {{range .Featured}}
      <article class="product-card reveal">
        <a class="product-img" href="/urun/{{.ID}}/{{.Slug}}">
          {{if .OldPrice}}<span class="badge-discount">%{{discount .OldPrice .Price}}</span>{{end}}
          <img src="{{.Image}}" alt="{{.Name}}" loading="lazy">
        </a>
        <div class="product-body">
          <span class="product-cat">{{if .Brand}}{{.Brand}}{{else}}{{cat .Category}}{{end}}</span>
          <h3><a href="/urun/{{.ID}}/{{.Slug}}">{{.Name}}</a></h3>
          {{if or .Voltage .Remote}}
          <div class="tag-row">
            {{if .Voltage}}<span class="tag tag-volt">{{.Voltage}}</span>{{end}}
            {{if .Remote}}<span class="tag">Kumandalı</span>{{end}}
          </div>
          {{end}}
          <span class="ship-badge"><svg class="ico ico-xs"><use href="/static/icons.svg#i-truck"/></svg>Ücretsiz Kargo</span>
          <div class="product-price">
            {{if .OldPrice}}<s>{{money .OldPrice}} ₺</s>{{end}}
            <strong>{{money .Price}} ₺</strong>
          </div>
          <div class="product-actions">
            {{if $.S.PaymentVisible}}<a class="btn btn-primary btn-sm" href="/satin-al?urun={{.ID}}">Satın Al</a>{{end}}
            <a class="btn btn-outline btn-sm" href="/urun/{{.ID}}/{{.Slug}}">İncele</a>
          </div>
        </div>
      </article>
      {{end}}
    </div>
  </div>
</section>
{{end}}

<section class="section">
  <div class="container">
    <div class="howto reveal">
      <div class="howto-head">
        <h2>Nasıl satın alırım?</h2>
        <p>3 kolay adımda aracınız kapınızda.</p>
      </div>
      <div class="steps">
        <div class="step"><span class="step-no">1</span><div><h3>Aracınızı Seçin</h3><p>Ürünler sayfasından modeli inceleyin, sorularınız için bizi arayın.</p></div></div>
        <div class="step"><span class="step-no">2</span><div><h3>Sipariş Verin</h3><p>Satın Al formunu doldurun veya telefonla sipariş verin.</p></div></div>
        <div class="step"><span class="step-no">3</span><div><h3>Havale ile Ödeyin</h3><p>IBAN'a ödemenizi yapın, 24 saat içinde kargoda.</p></div></div>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="section-head reveal">
      <h2>Müşterilerimiz ne diyor?</h2>
    </div>
    <div class="quote-grid">
      <div class="quote reveal"><div class="stars"><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg></div><p>"Oğluma aldığımız jip beklediğimizden de kaliteli çıktı. Aynı gün kargoya verdiler, ertesi gün elimizdeydi."</p><span>— Murat K., İstanbul</span></div>
      <div class="quote reveal"><div class="stars"><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg></div><p>"Annem için engelli aracı aldık. Telefonda tek tek her şeyi anlattılar, kurulumu bile tarif ettiler. Teşekkürler."</p><span>— Zeynep A., Ankara</span></div>
      <div class="quote reveal"><div class="stars"><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg><svg class="ico ico-sm"><use href="/static/icons.svg#i-star"/></svg></div><p>"Fiyatlar piyasanın altında, üstelik orijinal ürün. Kızımın doğum günü hediyesi tam zamanında geldi."</p><span>— Serkan D., İzmir</span></div>
    </div>
  </div>
</section>

{{with .S.MainPhone}}
<section class="cta-band">
  <div class="container cta-in reveal">
    <div>
      <h2>Karar veremediniz mi?</h2>
      <p>Uzman ekibimizi arayın, bütçenize en uygun aracı birlikte seçelim.</p>
    </div>
    <a class="btn btn-primary btn-lg" href="{{tel .}}">
      <svg class="ico ico-sm"><use href="/static/icons.svg#i-phone"/></svg>{{.}}
    </a>
  </div>
</section>
{{end}}
{{end}}