{{define "content"}}
<div class="container">
  <nav class="crumbs reveal">
    <a href="/">Anasayfa</a>
    <svg class="ico ico-xs"><use href="/static/icons.svg#i-arrow"/></svg>
    <span>İletişim</span>
  </nav>

  <div class="page-title reveal">
    <h1>İletişim</h1>
    <p>Bize ulaşın — telefon, WhatsApp veya aşağıdaki formla.</p>
  </div>

  <div class="contact-grid">
    <div class="contact-info reveal">
      {{if .S.VisiblePhones}}
      <div class="contact-card panel-w">
        <h3><svg class="ico"><use href="/static/icons.svg#i-phone"/></svg>Telefon</h3>
        {{range .S.VisiblePhones}}
        <a class="contact-line" href="{{tel .Number}}">{{if .Label}}{{.Label}}: {{end}}<strong>{{.Number}}</strong></a>
        {{end}}
      </div>
      {{end}}
      {{if .S.ShowWhatsApp}}
      <div class="contact-card panel-w">
        <h3><svg class="ico"><use href="/static/icons.svg#i-wa"/></svg>WhatsApp</h3>
        <a class="contact-line" href="{{wa .S.WhatsApp}}" target="_blank" rel="noopener"><strong>{{.S.WhatsApp}}</strong></a>
      </div>
      {{end}}
      {{if .S.Email}}
      <div class="contact-card panel-w">
        <h3><svg class="ico"><use href="/static/icons.svg#i-mail"/></svg>E-posta</h3>
        <a class="contact-line" href="mailto:{{.S.Email}}"><strong>{{.S.Email}}</strong></a>
      </div>
      {{end}}
      {{if .S.Address}}
      <div class="contact-card panel-w">
        <h3><svg class="ico"><use href="/static/icons.svg#i-pin"/></svg>Adres</h3>
        <p>{{.S.Address}}</p>
        {{if .S.WorkHours}}<p class="muted">{{.S.WorkHours}}</p>{{end}}
      </div>
      {{end}}
    </div>

    <div class="contact-form-wrap panel-w reveal">
      <h2>Mesaj Gönderin</h2>
      {{if .OK}}<div class="alert alert-ok"><svg class="ico ico-sm"><use href="/static/icons.svg#i-check-c"/></svg>Mesajınız alındı! En kısa sürede size dönüş yapacağız.</div>{{end}}
      <form class="form" action="/iletisim" method="post">
        <div class="form-row">
          <label>Ad Soyad *<input type="text" name="name" required></label>
          <label>Telefon<input type="tel" name="phone"></label>
        </div>
        <label>E-posta<input type="email" name="email"></label>
        <label>Mesajınız *<textarea name="body" rows="5" required></textarea></label>
        <button class="btn btn-primary btn-lg" type="submit">Gönder</button>
      </form>
    </div>
  </div>
</div>
{{end}}