/* global React */
/* EgoYüzme · Page · Programs (Faaliyetler) */

const DISCIPLINE_COLORS = {
  temel: "var(--discipline-temel)",
  teknik: "var(--discipline-teknik)",
  performans: "var(--discipline-performans)",
  medikal: "var(--discipline-medikal)",
  ozel: "var(--discipline-ozel)",
  yetiskin: "var(--discipline-yetiskin)",
};

const ProgramsPage = () => {
  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 90;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <main className="page-enter">
      <PageHero
        crumbs={[{ label: "Ana Sayfa", href: "#/" }, { label: "Programlar" }]}
        eyebrow="Faaliyetler ve Diğer İçerikler"
        title="Her yaşa ve seviyeye uygun yüzme eğitimleri."
        lead="Çocuk ve yetişkin yüzme, teknik yüzme, temel yüzme, medikal yüzme, özel gereksinimli çocuklara özel yüzme ve performans yüzme grubu gibi seçenekler yer almaktadır."
        image={window.__resources.photoTech}
      />

      {/* Intro */}
      <section className="section">
        <div className="container">
          <div className="prose">
            <Eyebrow>Genel bakış</Eyebrow>
            <h2 className="mt-2">Yüzme konusunda profesyonel hizmet.</h2>
            <p className="lead-p mt-6">
              EGO Sport Maltepe Yüzme Akademisi, her yaşa ve seviyeye uygun yüzme eğitimleri sunarak,
              yüzme konusunda profesyonel hizmet vermektedir. Akademinin eğitim tipleri ve branşları arasında
              çocuk ve yetişkin yüzme, teknik yüzme, temel yüzme, medikal yüzme, özel gereksinimli çocuklara özel
              yüzme ve performans yüzme grubu gibi seçenekler yer almaktadır.
            </p>
          </div>

          {/* Discipline nav pills */}
          <div className="discipline-nav mt-8" style={{ justifyContent: "center" }}>
            {PROGRAMS.map(p => (
              <button
                key={p.id}
                className="discipline-pill"
                onClick={() => scrollTo("prog-" + p.id)}
              >
                <span className="dot" style={{ background: DISCIPLINE_COLORS[p.id] }} />
                {p.eyebrow.charAt(0) + p.eyebrow.slice(1).toLowerCase().replace(/ı/g, "ı")}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Program details */}
      <section style={{ background: "var(--ego-surface)" }}>
        <div className="container">
          {PROGRAMS.map((p, i) => (
            <div className={`program-detail${i % 2 === 1 ? " flip" : ""}`} id={"prog-" + p.id} key={p.id}>
              <div className="imagery" style={{ backgroundImage: `url('${p.image}')` }}>
                <span className="label">{p.eyebrow}</span>
                <img className="wm" src="assets/watermarks/photo-watermark-white.png" alt="" aria-hidden="true" />
              </div>
              <div className="text">
                <Eyebrow color={DISCIPLINE_COLORS[p.id]}>{p.eyebrow}</Eyebrow>
                <h2 className="mt-2">{p.title}</h2>
                <p style={{ color: "var(--fg-muted)", fontSize: "var(--fs-16)", lineHeight: 1.7, marginTop: 14 }}>
                  {p.desc}
                </p>
                <ul className="checks">
                  {p.bullets.map(b => (
                    <li key={b}>
                      <span className="ck"><CheckCircle /></span>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
                <div className="meta">
                  {p.chips.map(c => <Chip key={c} variant="outline">{c}</Chip>)}
                </div>
                <div className="cta-row" style={{ marginTop: 22, display: "flex", gap: 10, flexWrap: "wrap" }}>
                  <Button variant="primary" rightIcon="arrow-right" onClick={() => window.location.hash = "/iletisim"}>
                    Bu program için kayıt
                  </Button>
                  {p.id === "performans" ? (
                    <Button variant="secondary" onClick={() => window.location.hash = "/lisansli-sporcu"}>
                      Lisanslı sporcu olma
                    </Button>
                  ) : null}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Lisanslı sporcu teaser */}
      <section className="section">
        <div className="container">
          <div className="split-grid">
            <div>
              <Eyebrow>Lisanslı sporcu olma fırsatı</Eyebrow>
              <h2 className="mt-2">Akademinin sunduğu en önemli avantajlardan biri.</h2>
              <p style={{ marginTop: 16, color: "var(--fg-muted)", lineHeight: 1.7 }}>
                Performans yüzme grubuna katılan öğrenciler, Türkiye Yüzme Federasyonu tarafından düzenlenen
                yüzme yarışmalarına katılabilirler. Bu yarışmalarda başarılı olan öğrenciler, Türkiye Yüzme
                Federasyonu tarafından lisanslı sporcu olarak kabul edilirler.
              </p>
              <div className="cta-row" style={{ marginTop: 22 }}>
                <Button variant="primary" rightIcon="arrow-right" onClick={() => window.location.hash = "/lisansli-sporcu"}>
                  Lisanslı sporcu olma süreci
                </Button>
              </div>
            </div>
            <div className="imagery" style={{ backgroundImage: `url(${window.__resources.photoPerf})` }}>
              <img className="wm" src="assets/watermarks/photo-watermark-white.png" alt="" aria-hidden="true" />
            </div>
          </div>
        </div>
      </section>

      <CtaBand
        title="Öğrencilerin yüzme becerilerini geliştirmek ve yüzme sporuna ilgi duymalarını sağlamak."
        lead="Her yaş grubundan öğrenciye özel yüzme eğitimi sunarak, onların öğrenme stillerine ve ihtiyaçlarına göre öğretim stratejileri belirliyoruz."
      />
    </main>
  );
};

Object.assign(window, { ProgramsPage });