/* global React */
/* EgoYüzme · Page · Why Us (Neden Biz) */

const WhyUsPage = () => (
  <main className="page-enter">
    <PageHero
      crumbs={[{ label: "Ana Sayfa", href: "#/" }, { label: "Neden Biz?" }]}
      eyebrow="Neden Biz"
      title="EGO Sport Maltepe Yüzme Akademisi'ni tercih etmeniz için birçok sebep bulunmaktadır."
      lead="İşte size bazı nedenler."
      image={window.__resources.photoAdult}
    />

    {/* Feature 1 — Profesyonel kadro */}
    <section className="section">
      <div className="container">
        <div className="split-grid">
          <div>
            <Eyebrow>Profesyonel Eğitim Kadrosu</Eyebrow>
            <h2 className="mt-2">Profesyonel yüzme eğitmenleri tarafından yönetilen bir akademi.</h2>
            <p style={{ marginTop: 16, color: "var(--fg-muted)", lineHeight: 1.7 }}>
              EGO Sport Maltepe Yüzme Akademisi, profesyonel yüzme eğitmenleri tarafından yönetilmektedir.
              Eğitmenlerimiz, yıllarca yüzme sporuyla ilgilenmiş ve birçok yarışmada başarılı olmuş kişilerdir.
              Bu nedenle, öğrencilerimize en iyi yüzme deneyimini sunmak için en iyi eğitmen kadrosuna sahibiz.
            </p>
            <ul className="checks" style={{ marginTop: 20 }}>
              {[
                "Yıllarca yüzme sporuyla ilgilenmiş eğitmenler",
                "Birçok yarışmada başarı elde etmiş kadro",
                "En iyi yüzme deneyimini sunmak için en iyi eğitmen kadrosu",
              ].map(t => (
                <li key={t}>
                  <span className="ck"><CheckCircle /></span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="imagery" style={{ backgroundImage: `url(${window.__resources.photoTech})` }}>
            <img className="wm" src="assets/watermarks/photo-watermark-white.png" alt="" aria-hidden="true" />
          </div>
        </div>
      </div>
    </section>

    {/* Feature 2 — 360 derecelik video — blue band */}
    <section className="section section--blue">
      <div className="container">
        <div className="split-grid">
          <div className="imagery" style={{ backgroundImage: `url(${window.__resources.photoMed})` }}>
            <img className="wm" src="assets/watermarks/photo-watermark-white.png" alt="" aria-hidden="true" />
          </div>
          <div>
            <Eyebrow color="#BDE6F0">360 Derecelik Video Sistemi Teknolojisi</Eyebrow>
            <h2 className="mt-2" style={{ color: "#fff" }}>
              Yüzme performanslarını canlı takip, hataları anında düzeltme.
            </h2>
            <p style={{ marginTop: 16, color: "rgba(255,255,255,0.88)", lineHeight: 1.7 }}>
              EGO Sport Maltepe Yüzme Akademisi, en son teknolojileri kullanarak öğrencilerinin yüzme becerilerini
              geliştirmeye odaklanmaktadır. 360 derecelik video sistemi teknolojisi sayesinde, öğrencilerimizin
              yüzme performanslarını canlı olarak takip edebiliyor ve hataları anında düzeltebiliyoruz.
              Bu teknoloji, öğrencilerimizin daha hızlı bir şekilde yüzme becerilerini geliştirmelerine yardımcı olur.
            </p>
            <div className="cta-row" style={{ marginTop: 22 }}>
              <Button variant="accent" rightIcon="arrow-right" onClick={() => window.location.hash = "/iletisim"}>
                İletişime geçin
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* Feature 3 — Kişiye Özel Eğitim + Feature 4 — Havuz */}
    <section className="section">
      <div className="container">
        <div className="value-grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
          <div className="value-card">
            <div className="icon-wrap">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
              </svg>
            </div>
            <Eyebrow>Kişiye Özel Eğitim</Eyebrow>
            <h3 className="mt-2">Bireysel ve grup dersleri.</h3>
            <p>
              Öğrencilerimize bireysel ve grup dersleri sunarak, yüzme becerilerini en etkili şekilde geliştirmelerine
              yardımcı oluruz. Bireysel derslerde, öğrencilerimizin ihtiyaçlarına özel olarak odaklanarak,
              özel bir yüzme programı oluştururuz.
            </p>
          </div>
          <div className="value-card accent">
            <div className="icon-wrap">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/>
                <path d="M2 16c4 0 4-2 8-2s4 2 8 2"/>
              </svg>
            </div>
            <Eyebrow color="var(--ego-orange-600)">Havuzumuz</Eyebrow>
            <h3 className="mt-2">En son teknolojilerle donatılmış havuz.</h3>
            <p>
              EGO Sport Maltepe Yüzme Akademisi'nin havuzu, en son teknolojilerle donatılmıştır. Bu sayede,
              öğrencilerimiz en iyi yüzme deneyimini yaşarlar. Ayrıca, havuzumuzda su sıcaklığına özen göstererek,
              öğrencilerimizin rahat bir şekilde yüzme yapmalarını sağlarız.
            </p>
          </div>
        </div>
      </div>
    </section>

    {/* Feature 5 — Kaliteli Hizmet */}
    <section className="section section--surface">
      <div className="container">
        <div className="prose">
          <Eyebrow>Kaliteli Hizmet</Eyebrow>
          <h2 className="mt-2">Öğrencilerimize kaliteli bir hizmet sunmayı amaçlıyoruz.</h2>
          <p className="lead-p mt-6">
            EGO Sport Maltepe Yüzme Akademisi, öğrencilerimize kaliteli bir hizmet sunmayı amaçlamaktadır.
            Öğrencilerimizin ihtiyaçlarına göre özel bir yüzme programı hazırlarız ve onların yüzme becerilerini
            geliştirmelerine yardımcı oluruz.
          </p>
          <div className="quote-block">
            <div className="q-text">
              EGO Sport Maltepe Yüzme Akademisi'ni tercih etmeniz, en iyi yüzme deneyimini yaşamanızı sağlayacaktır.
              360 derecelik video sistemi teknolojisi ve profesyonel eğitmen kadromuz sayesinde,
              yüzme becerilerinizi en üst seviyeye çıkarmak için bize katılın.
            </div>
            <div className="q-attrib">— EgoYüzme ekibi</div>
          </div>
        </div>
      </div>
    </section>

    <CtaBand
      title="En iyi yüzme deneyimini yaşamanızı sağlayacaktır."
      lead="360 derecelik video sistemi teknolojisi ve profesyonel eğitmen kadromuz sayesinde, yüzme becerilerinizi en üst seviyeye çıkarmak için bize katılın."
    />
  </main>
);

Object.assign(window, { WhyUsPage });