/* global React */
/* EgoYüzme · Page · Contact (İletişim) */

const ContactPage = () => {
  const [toast, setToast] = React.useState(null);
  const flash = (msg) => { setToast(msg); setTimeout(() => setToast(null), 2400); };

  return (
    <main className="page-enter">
      <PageHero
        crumbs={[{ label: "Ana Sayfa", href: "#/" }, { label: "İletişim" }]}
        eyebrow="İletişim"
        title="Kayıt için bize ulaşın."
        lead="Kayıt işlemleri web sitesinden veya telefonla yapılabilmektedir. Detaylı bilgi için bize ulaşabilirsiniz."
        image={window.__resources.photoAdult}
      />

      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <div>
              <EnrollmentCTA onSubmit={() => flash("Talebiniz bize ulaştı.")} />
            </div>
            <aside className="contact-info">
              <div>
                <Eyebrow>İletişim kanalları</Eyebrow>
                <h2 className="mt-2">Bize ulaşmanın yolları.</h2>
                <p style={{ color: "var(--fg-muted)", marginTop: 12 }}>
                  Kayıt işlemleri web sitesinden veya telefonla yapılabilmektedir.
                </p>
              </div>

              <div className="item">
                <div className="ic">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                  </svg>
                </div>
                <div>
                  <div className="label">Telefon</div>
                  <div className="value"><a href="tel:+905551234567">0 555 123 45 67</a></div>
                </div>
              </div>

              <div className="item">
                <div className="ic">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
                  </svg>
                </div>
                <div>
                  <div className="label">WhatsApp</div>
                  <div className="value"><a href="https://wa.me/905551234567" target="_blank" rel="noopener">+90 555 123 45 67</a></div>
                </div>
              </div>

              <div className="item">
                <div className="ic">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                    <polyline points="22,6 12,13 2,6"/>
                  </svg>
                </div>
                <div>
                  <div className="label">E-posta</div>
                  <div className="value"><a href="mailto:info@egoyuzme.com">info@egoyuzme.com</a></div>
                </div>
              </div>

              <div className="item">
                <div className="ic">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
                  </svg>
                </div>
                <div>
                  <div className="label">Çalışma saatleri</div>
                  <div className="value">Hafta içi 08:00–22:00</div>
                  <div className="value" style={{ color: "var(--fg-muted)", fontWeight: 400, fontSize: "var(--fs-14)" }}>Hafta sonu 09:00–20:00</div>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* Branch list */}
      <section className="section section--surface">
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto" }}>
            <Eyebrow>Şubeler</Eyebrow>
            <h2 className="mt-2">Size yakın şubemize ulaşın.</h2>
            <p style={{ color: "var(--fg-muted)", marginTop: 12 }}>
              Tercih ettiğiniz şubeyi formda işaretleyin veya doğrudan şubenin telefonundan arayın.
            </p>
          </div>
          <div className="branch-grid mt-8">
            {BRANCHES.map(b => (
              <div
                key={b.id}
                className="branch-card"
                style={{ background: "#fff" }}
              >
                <Chip variant="outline">Şube</Chip>
                <div className="name" style={{ marginTop: 4 }}>{b.name}</div>
                <div className="addr">{b.addr}</div>
                <div style={{ marginTop: "auto", paddingTop: 12, fontSize: "var(--fs-13)", color: "var(--ego-blue-700)", fontWeight: "var(--w-semibold)" }}>{b.phone}</div>
              </div>
            ))}
          </div>
          <div className="mt-8" style={{ textAlign: "center" }}>
            <Button variant="secondary" rightIcon="arrow-right" onClick={() => window.location.hash = "/subeler"}>
              Şube ayrıntılarını gör
            </Button>
          </div>
        </div>
      </section>

      {toast ? <div className="toast">{toast}</div> : null}
    </main>
  );
};

Object.assign(window, { ContactPage });