/* global React */
/* EgoYüzme · Page · Branches (Şubeler) */

const PinIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/>
  </svg>
);

const ClockIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
  </svg>
);

const PhoneIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <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>
);

const BranchesPage = () => (
  <main className="page-enter">
    <PageHero
      crumbs={[{ label: "Ana Sayfa", href: "#/" }, { label: "Şubeler" }]}
      eyebrow="Şubeler"
      title="Şubelerimiz."
      lead="Yüzme öğrenmek isteyen herkesin hizmetlerimizden faydalanmasını sağlamak için, size en yakın şubemizden bize ulaşabilirsiniz."
      image={window.__resources.photoPool}
    />

    <section className="section">
      <div className="container">
        <div className="branch-detail-grid">
          {BRANCHES.map(b => (
            <article key={b.id} className="branch-detail-card">
              <div className="map">
                <PinIcon />
              </div>
              <div className="body">
                <div className="name">{b.name}</div>
                <div className="addr">{b.addr}</div>
                <div className="meta-row">
                  <span><PhoneIcon /> {b.phone}</span>
                  <span><ClockIcon /> {b.hours}</span>
                </div>
                <div className="flex gap-2" style={{ flexWrap: "wrap", marginBottom: 14 }}>
                  {b.features.map(f => <Chip key={f} variant="soft">{f}</Chip>)}
                  <Chip variant="outline">{b.lanes} kulvar</Chip>
                </div>
                <div className="actions">
                  <Button variant="primary" size="sm" rightIcon="arrow-right" onClick={() => window.location.hash = "/iletisim"}>
                    Deneme dersi
                  </Button>
                  <Button variant="secondary" size="sm" leftIcon="message-circle" onClick={() => window.open("https://wa.me/905551234567", "_blank")}>
                    WhatsApp
                  </Button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>

    {/* Ders saatleri notu — marka metninden */}
    <section className="section section--surface">
      <div className="container narrow">
        <Eyebrow>Ders saatleri</Eyebrow>
        <h2 className="mt-2">Esnek ders saatleri.</h2>
        <p style={{ color: "var(--fg-muted)", marginTop: 12 }}>
          EGO Sport Maltepe Yüzme Akademisi, haftanın her günü sabah saatlerinden akşam saatlerine kadar
          farklı ders saatleri sunar. Ders saatleri, öğrencilerin programlarına ve isteklerine göre ayarlanabilir.
        </p>
      </div>
    </section>

    <CtaBand
      title="Yüzme öğrenmek isteyen herkese eğitim veririz."
      lead="Her seviyeden öğrenciyi kabul ederiz. Kayıt işlemleri web sitesinden veya telefonla yapılabilmektedir."
    />
  </main>
);

Object.assign(window, { BranchesPage });