/* global React */
/* EgoYüzme · Page · Home */

const HomePage = () => {
  const [age, setAge] = React.useState("7-12");
  const [branch, setBranch] = React.useState("maltepe");

  const filteredPrograms = PROGRAMS.filter(p => {
    if (age === "3-6")   return ["temel", "ozel"].includes(p.id);
    if (age === "7-12")  return ["temel", "teknik", "performans", "medikal", "ozel"].includes(p.id);
    if (age === "13+")   return ["teknik", "performans", "medikal"].includes(p.id);
    if (age === "adult") return ["yetiskin", "medikal"].includes(p.id);
    return true;
  });

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

  return (
    <main className="page-enter">
      <Hero onPrimary={() => window.location.hash = "/iletisim"} onSecondary={() => scrollTo("programlar")} />

      {/* Trust strip floating between hero and content */}
      <div className="home-trust-wrap" style={{ marginTop: -56, position: "relative", zIndex: 10 }}>
        <TrustStrip />
      </div>

      {/* Programs */}
      <section className="section" id="programlar">
        <div className="container">
          <div className="flex items-center" style={{ justifyContent: "space-between", flexWrap: "wrap", gap: 16 }}>
            <div>
              <Eyebrow>Programlar</Eyebrow>
              <h2 className="mt-2">Her yaşa ve seviyeye uygun yüzme eğitimleri.</h2>
              <p style={{ color: "var(--fg-muted)", maxWidth: 560, marginTop: 8 }}>
                Her öğrencinin farklı öğrenme stilleri, zeka türleri ve beceri seviyeleri vardır.
                Aşağıdaki yaş grubunu seçerek size uygun programları görün.
              </p>
            </div>
            <AgeFilter value={age} onChange={setAge} />
          </div>
          <div className="mt-8">
            <ProgramGrid programs={filteredPrograms} />
          </div>
          <div className="mt-8" style={{ textAlign: "center" }}>
            <Button variant="secondary" rightIcon="arrow-right" onClick={() => window.location.hash = "/programlar"}>
              Tüm programları görüntüle
            </Button>
          </div>
        </div>
      </section>

      {/* Why us — feature blue band */}
      <section className="section section--blue">
        <div className="container">
          <div className="split-grid">
            <div>
              <Eyebrow color="#BDE6F0">Bizim farkımız</Eyebrow>
              <h2 className="mt-2" style={{ color: "#fff", letterSpacing: ".04em" }}>
                Eğer bir çocuk bizim öğrettiğimiz yoldan öğrenemiyorsa<br />
                belki de biz onun öğrendiği yoldan öğretmeliyiz.
              </h2>
              <p style={{ color: "rgba(255,255,255,.85)", marginTop: 14, maxWidth: 520 }}>
                En son teknolojileri kullanarak öğrencilerimizin yüzme performanslarını canlı olarak takip edebiliyor
                ve hataları anında düzeltebiliyoruz. Profesyonel yüzme eğitmenlerimiz, yıllarca yüzme sporuyla
                ilgilenmiş ve birçok yarışmada başarılı olmuş kişilerdir.
              </p>
              <ul className="checks" style={{ listStyle: "none", padding: 0, margin: "20px 0", display: "flex", flexDirection: "column", gap: 10 }}>
                {[
                  "Yıllarca yüzme sporuyla ilgilenmiş profesyonel eğitmenler",
                  "360 derecelik video sistemi teknolojisi",
                  "Bireysel ve grup dersleri",
                  "En son teknolojilerle donatılmış havuz",
                ].map(t => (
                  <li key={t} style={{ display: "flex", gap: 10, alignItems: "flex-start", color: "rgba(255,255,255,0.92)", fontSize: "var(--fs-14)" }}>
                    <span style={{ width: 22, height: 22, borderRadius: 999, background: "rgba(255,255,255,0.15)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", flex: "none", marginTop: 2 }}>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
              <div className="cta-row" style={{ marginTop: 22 }}>
                <Button variant="accent" size="lg" onClick={() => window.location.hash = "/iletisim"} rightIcon="arrow-right">
                  Hemen kayıt ol
                </Button>
                <Button variant="secondary--on-blue" size="lg" leftIcon="message-circle" onClick={() => window.open("https://wa.me/905551234567", "_blank")}>
                  WhatsApp'tan yaz
                </Button>
              </div>
            </div>
            <div style={{
              borderRadius: "var(--r-lg)",
              overflow: "hidden",
              aspectRatio: "4 / 3",
              boxShadow: "var(--shadow-blue-glow)",
              position: "relative",
              backgroundImage: `url(${window.__resources.photoAdult})`,
              backgroundSize: "cover",
              backgroundPosition: "center"
            }}>
              <img
                src="assets/watermarks/photo-watermark-white.png"
                alt=""
                style={{ position: "absolute", right: 14, bottom: 14, width: 54, height: 54, opacity: 0.7 }}
              />
            </div>
          </div>
        </div>
      </section>

      {/* Branches */}
      <section className="section section--surface" id="subeler">
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto" }}>
            <Eyebrow>Şubeler</Eyebrow>
            <h2 className="mt-2">Şubelerimiz.</h2>
            <p style={{ color: "var(--fg-muted)", marginTop: 8 }}>
              Size en yakın şubeyi seçin, kayıt için iletişime geçin. Kayıt işlemleri web sitesinden veya telefonla yapılabilmektedir.
            </p>
          </div>
          <div className="mt-8">
            <div className="branch-grid">
              {BRANCHES.map(b => (
                <button
                  key={b.id}
                  className="branch-card"
                  style={{
                    textAlign: "left", cursor: "pointer",
                    borderColor: branch === b.id ? "var(--ego-blue)" : "var(--border)",
                    background: branch === b.id ? "var(--ego-blue-50)" : "#fff",
                  }}
                  onClick={() => setBranch(b.id)}
                >
                  <Chip variant={branch === b.id ? "solidBlue" : "outline"}>
                    {branch === b.id ? "Seçildi" : "Şube"}
                  </Chip>
                  <div className="name" style={{ marginTop: 4 }}>{b.name}</div>
                  <div className="addr">{b.addr}</div>
                </button>
              ))}
            </div>
          </div>
          <div className="mt-8" style={{ textAlign: "center" }}>
            <Button variant="secondary" rightIcon="arrow-right" onClick={() => window.location.hash = "/subeler"}>
              Tüm şubeleri ayrıntılı gör
            </Button>
          </div>
        </div>
      </section>

      {/* FAQ preview */}
      <section className="section section--surface" id="sss">
        <div className="container narrow">
          <div style={{ textAlign: "center" }}>
            <Eyebrow>Sıkça sorulan sorular</Eyebrow>
            <h2 className="mt-2">Veliler en çok bunları sorar.</h2>
          </div>
          <div className="mt-8">
            <FAQ items={FAQ_DATA.slice(0, 6)} />
          </div>
          <div className="mt-8" style={{ textAlign: "center" }}>
            <Button variant="secondary" rightIcon="arrow-right" onClick={() => window.location.hash = "/sss"}>
              Tüm soruları gör
            </Button>
          </div>
        </div>
      </section>

      {/* Enrollment */}
      <section className="section" id="kayit">
        <div className="container narrow">
          <EnrollmentCTA defaultBranch={branch} />
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { HomePage });