/* global React */
const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React;

// === NAV ===
function Nav() {
  const [scrolled, setScrolled] = useStateC(false);
  const [active, setActive] = useStateC('home');
  const [menuOpen, setMenuOpen] = useStateC(false);
  useEffectC(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
      // active section
      const sections = ['home','branslar','tesis','program','uyelik','egitmenler','galeri','iletisim'];
      let cur = 'home';
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top < 120) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id:'home',       t:'Anasayfa' },
    { id:'branslar',   t:'Branşlar' },
    { id:'tesis',      t:'Tesis' },
    { id:'program',    t:'Program' },
    { id:'uyelik',     t:'Üyelikler' },
    { id:'egitmenler', t:'Eğitmenler' },
    { id:'galeri',     t:'Galeri' },
    { id:'iletisim',   t:'İletişim' },
  ];

  return (
    <>
    <div className="topbar" role="banner">
      <div className="topbar-stripes" aria-hidden="true"></div>
      <div className="container topbar-inner">
        <a className="topbar-side topbar-left" href="https://maps.google.com/?q=Body+Life+Gym+Samandağ" target="_blank" rel="noopener">
          <i className="bi bi-geo-alt-fill"></i> <span>Konum Al</span>
        </a>
        <span className="topbar-title">BODY&nbsp;LIFE&nbsp;GYM</span>
        <a className="topbar-side topbar-right" href="https://www.instagram.com/bodylifegymm/" target="_blank" rel="noopener" aria-label="Instagram">
          <i className="bi bi-instagram"></i> <span>@bodylifegymm</span>
        </a>
      </div>
      <div className="topbar-stripes" aria-hidden="true"></div>
    </div>
    <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#home" className="logo">
          <img src="/assets/logo.jpeg" alt="Body Life Gym Samandağ Hatay spor salonu logosu" className="logo-img" />
        </a>
        <nav>
          <ul className={`nav-links ${menuOpen ? 'open' : ''}`}>
            {menuOpen && (
              <li style={{ position: 'absolute', top: 20, right: 20 }}>
                <button onClick={() => setMenuOpen(false)} style={{ fontSize: 32, color: 'var(--accent)', background: 'none', border: 'none', cursor: 'pointer' }}>
                  <i className="bi bi-x-lg"></i>
                </button>
              </li>
            )}
            {links.map(l => (
              <li key={l.id}>
                <a href={`#${l.id}`} className={active === l.id ? 'active' : ''} onClick={() => setMenuOpen(false)}>{l.t}</a>
              </li>
            ))}
            {menuOpen && (
              <li style={{ marginTop: 16 }}>
                <a href="https://wa.me/905302602024" className="btn btn-wa" style={{ height: 48, fontSize: 14 }}>
                  <i className="bi bi-whatsapp"></i> WhatsApp
                </a>
              </li>
            )}
          </ul>
        </nav>
        <div className="nav-cta">
          <a href="https://wa.me/905302602024" className="btn btn-wa">
            <i className="bi bi-whatsapp"></i> WhatsApp
          </a>
          <a href="#uyelik" className="btn btn-primary">Üye Ol</a>
        </div>
        <button className="nav-burger" aria-label="Menu" onClick={() => setMenuOpen(!menuOpen)}><i className={`bi ${menuOpen ? 'bi-x-lg' : 'bi-list'}`}></i></button>
      </div>
    </header>
    </>
  );
}

// === HERO ===
function Hero({ heroTitle, heroSub }) {
  return (
    <section id="home" className="hero">
      <div className="hero-bg"></div>
      <div className="hero-photo"></div>

      <div className="container hero-inner">
        <div>
          <div className="hero-eyebrow">
            <span className="dot"></span>
            <span>Samandağ · Antakya · Hatay</span>
          </div>
          <h1 dangerouslySetInnerHTML={{ __html: heroTitle }}></h1>
          <p className="hero-sub">{heroSub}</p>
          <p className="seo-tagline" aria-label="Hatay spor salonu, Samandağ fitness merkezi, Antakya gym">
            <strong>Hatay Spor Salonu</strong> · <strong>Samandağ Fitness Merkezi</strong> · <strong>Antakya Gym</strong>
          </p>
          <div className="hero-cta">
            <a href="#tesis" className="btn btn-primary">Tesisimizi Keşfet <i className="bi bi-arrow-right"></i></a>
            <a href="https://wa.me/905302602024" className="btn btn-ghost">
              <i className="bi bi-whatsapp"></i> WhatsApp'tan Bilgi Al
            </a>
          </div>
          <div className="hero-stats">
            <div className="hero-stat"><div className="num">8+</div><div className="lbl">Branş</div></div>
            <div className="hero-stat"><div className="num">40+</div><div className="lbl">Cihaz</div></div>
            <div className="hero-stat"><div className="num">1500m²</div><div className="lbl">Tesis</div></div>
          </div>
        </div>

        <div className="hero-stage" aria-hidden="true">
          <div className="ring"></div>
          <div className="ring r2"></div>
          <div className="ring r3"></div>
          <div className="core"></div>
          <div className="photo-tile t1">
            <img src={window.IMG.hero1} alt="Samandağ spor salonu fitness alanı — Hatay Body Life Gym" />
            <span className="tag">FITNESS</span>
          </div>
          <div className="photo-tile t2">
            <img src={window.IMG.boks} alt="Hatay Antakya boks salonu — Samandağ spor salonu" />
            <span className="tag">BOKS</span>
          </div>
          <div className="photo-tile t3">
            <img src={window.IMG.zumba} alt="Samandağ zumba dersi — Hatay fitness merkezi Body Life Gym" />
            <span className="tag">ZUMBA</span>
          </div>
          <div className="badge-num"><span>HAREKETİN<br/>GÜCÜ</span></div>
        </div>
      </div>

      <div className="scroll-cue">
        <span>Scroll</span>
        <span className="line"></span>
      </div>
    </section>
  );
}

// === MARQUEE ===
function Marquee() {
  const items = ['FITNESS','ZUMBA','PİLATES','BOKS','KARDİYO','PERSONAL TRAINING','GRUP DERSLERİ','SAUNA','REFORMER','HIIT'];
  const stream = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {stream.map((it, i) => (
          <span key={i} className={`marquee-item ${i % 2 ? 'alt' : ''}`}>
            {it}<span className="star">✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// === COMPLEX (Section 1) ===
function ComplexSection() {
  return (
    <section id="tesis" className="section">
      <div className="container">
        <div className="section-num">01 — Tesis</div>
        <div className="section-header">
          <h2>BÜYÜK BİR <span className="acc">SPOR<br/>KOMPLEKSİ</span> ATMOSFERİ</h2>
          <p className="lead">Body Life Gym; fitness, kardiyo, zumba, pilates, boks ve personal training alanlarını tek çatı altında sunan modern bir spor kompleksidir. Samandağ'ın merkezi konumunda 1500 m² alan içinde planlanmış, ferah ve hijyenik antrenman bölgeleri.</p>
        </div>

        <div className="complex-grid">
          <div className="complex-hero-card reveal">
            <div className="ph" style={{ backgroundImage: "url('/assets/gym-interior.webp')" }} role="img" aria-label="Body Life Gym Samandağ Hatay spor salonu iç mekan — fitness alanı"></div>
            <div className="corner"><span className="dot"></span> Şu an açık</div>
            <div className="body">
              <h3>TEK TESİSTE<br/>HER ANTRENMAN.</h3>
              <p>Kardiyo, ağırlık, fonksiyonel, grup ders stüdyosu, pilates reformer odası, boks alanı ve sauna — hepsi bir arada.</p>
            </div>
          </div>
          <div className="complex-side">
            <div className="complex-stat reveal"><div className="num">1500</div><div className="lbl">m² Toplam Alan</div><div className="desc">Kardiyo, ağırlık ve grup ders stüdyosu için ferah bölmeler.</div></div>
            <div className="complex-stat reveal"><div className="num">8</div><div className="lbl">Farklı Branş</div><div className="desc">Fitness'ten zumbaya, pilates'ten boksa profesyonel kadro.</div></div>
            <div className="complex-stat reveal"><div className="num">24/7</div><div className="lbl">Hijyen Standardı</div><div className="desc">Düzenli temizlik, dezenfeksiyon ve havalandırma rutini.</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === BRANSLAR (Section 2) ===
function BranslarSection() {
  return (
    <section id="branslar" className="section">
      <div className="container">
        <div className="section-num">02 — Branşlar</div>
        <div className="section-header">
          <h2>SEKİZ BRANŞ. <span className="acc">TEK TESİS.</span></h2>
          <p className="lead">Her hedefe, her enerjiye uygun bir antrenman alanı. Kart üzerine gel — branşı keşfet.</p>
        </div>

        <div className="bransh-grid">
          {window.BRANDS.map((b, i) => (
            <a key={b.id} href={`/branslar#${b.id}`} className="bransh-card reveal">
              <div className="ph" style={{ backgroundImage:`url(${b.img})` }}></div>
              <div className="num">0{i + 1}</div>
              <div className="icon"><i className={`bi ${b.icon}`}></i></div>
              <div className="body">
                <h3>{b.t}</h3>
                <p>{b.d}</p>
              </div>
              <div className="arrow"><i className="bi bi-arrow-up-right"></i></div>
            </a>
          ))}
        </div>

        <div style={{ textAlign:'center', marginTop:48 }}>
          <a href="/branslar" className="btn btn-ghost">Tüm branşları detaylı incele <i className="bi bi-arrow-right"></i></a>
        </div>
      </div>
    </section>
  );
}

// === EQUIPMENT (Section 3) ===
function EquipSection() {
  return (
    <section className="section" style={{ paddingTop:0 }}>
      <div className="container">
        <div className="section-num">03 — Cihazlar</div>
        <div className="section-header">
          <h2>40+ CİHAZ. <span className="acc">YENİ NESİL.</span></h2>
          <p className="lead">Markalı kardiyo serisi, ayarlanabilir ağırlık makineleri, profesyonel boks ve pilates ekipmanları.</p>
        </div>

        <div className="equip-rail">
          {window.EQUIPMENT.map((e, i) => (
            <div key={i} className="equip-card reveal">
              <div className="visual">
                <span className="corner-dot">No.{String(i+1).padStart(2,'0')}</span>
                <img src={e.img} alt={`${e.name} cihazı — Samandağ Hatay Antakya spor salonu fitness ekipmanı Body Life Gym`} />
              </div>
              <h4>{e.name}</h4>
              <div className="meta">{e.meta}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === PROGRAM (Section 4) ===
function ProgramSection() {
  const [active, setActive] = useStateC(0);
  return (
    <section id="program" className="section program">
      <div className="container">
        <div className="section-num">04 — Haftalık Program</div>
        <div className="section-header">
          <h2>HAFTANIN <span className="acc">RİTMİ</span></h2>
          <p className="lead">Pazartesi'den cumartesiye dolu bir program. Sabah erken, akşam geç — uygun saatte ders var.</p>
        </div>

        <div className="program-rail">
          {window.PROGRAM.map((d, i) => (
            <div key={i} className={`day-card ${active === i ? 'active' : ''}`} onMouseEnter={() => setActive(i)}>
              <div className="day">{d.day}</div>
              <div className="date">{d.date}</div>
              {d.sessions.map((s, j) => (
                <div key={j} className="session">
                  <div className="session-time">{s.time}</div>
                  <div className="session-name">{s.name}</div>
                  <div className="session-coach">{s.coach}</div>
                </div>
              ))}
            </div>
          ))}
        </div>
        <p className="meta" style={{ marginTop:24, textAlign:'center' }}>
          <i className="bi bi-info-circle"></i> Pazar günü tesis kapalıdır. Açılış 08:30 — Kapanış 22:00.
        </p>
      </div>
    </section>
  );
}

// === WHY (Section 5) ===
function WhySection() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-num">05 — Neden Body Life</div>
        <div className="section-header">
          <h2>NEDEN <span className="acc">BODY LIFE GYM?</span></h2>
          <p className="lead">Sıradan bir spor salonu değil — Samandağ'ın en kapsamlı fitness kompleksi.</p>
        </div>
        <div className="why-grid reveal">
          {window.WHY.map((w, i) => (
            <div key={i} className="why-cell">
              <div className="num">0{i+1} / 08</div>
              <div className="icon"><i className={`bi ${w.i}`}></i></div>
              <h4>{w.t}</h4>
              <p>{w.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === MEMBERSHIP (Section 6) ===
function PlansSection() {
  return (
    <section id="uyelik" className="section">
      <div className="container">
        <div className="section-num">06 — Üyelik Paketleri</div>
        <div className="section-header">
          <h2>PAKET <span className="acc">SEÇ.</span><br/>ANTRENMANA BAŞLA.</h2>
          <p className="lead">Üç esnek paket. Her bütçeye, her hedefe uygun bir başlangıç. WhatsApp'tan size özel teklif alabilirsiniz.</p>
        </div>
        <div className="plans">
          {window.PLANS.map((p, i) => (
            <div key={i} className={`plan-card reveal ${p.featured ? 'featured' : ''}`}>
              {p.featured && <div className="plan-badge">EN POPÜLER</div>}
              <div className="name">{p.name}</div>
              <div className="tag">{p.tag}</div>
              <div className="price">
                <span className="amount">{p.amount}</span>
                <span className="currency">₺</span>
                <span className="per">/ ay</span>
              </div>
              <ul>
                {p.features.map((f, j) => (
                  <li key={j} className={f.on ? '' : 'muted'}>{f.txt}</li>
                ))}
              </ul>
              <a href="https://wa.me/905302602024" className={`btn ${p.featured ? 'btn-primary' : 'btn-ghost'}`} style={{ width:'100%', justifyContent:'center' }}>
                {p.featured ? 'Hemen Üye Ol' : 'WhatsApp\'tan Sor'}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === GALLERY (Section 7) ===
function GallerySection() {
  // API'den gelen galeri items varsa onu kullan
  const defaultItems = [
    { cls:'g1', img: window.IMG.g1, cat:'FITNESS',  ttl:'Ana Salon' },
    { cls:'g2', img: window.IMG.g2, cat:'KARDİYO',  ttl:'Bandlar & Bisikletler' },
    { cls:'g3', img: window.IMG.g3, cat:'PİLATES',  ttl:'Reformer Stüdyosu' },
    { cls:'g4', img: window.IMG.g4, cat:'BOKS',     ttl:'Boks Alanı' },
    { cls:'g5', img: window.IMG.g5, cat:'KARDİYO',  ttl:'Treadmill Hattı' },
    { cls:'g6', img: window.IMG.g6, cat:'AĞIRLIK',  ttl:'Free Weights' },
    { cls:'g7', img: window.IMG.g7, cat:'PERSONAL', ttl:'PT Bölümü' },
    { cls:'g8', img: window.IMG.g8, cat:'CABLE',    ttl:'Crossover Hattı' },
  ];

  let items = defaultItems;
  try {
    const galleryJson = window._siteSettings && window._siteSettings['gallery_items'];
    if (galleryJson) {
      const parsed = JSON.parse(galleryJson);
      if (parsed && parsed.length > 0) {
        const apiBase = window.location.hostname === 'localhost' ? '' : 'https://api.bodylifegym.com.tr';
        items = parsed.map(function(g, i) {
          const imgUrl = g.image && g.image.startsWith('http') ? g.image : (apiBase + (g.image || ''));
          return { cls: 'g' + (i + 1), img: imgUrl, cat: g.category || 'GENEL', ttl: g.title || '' };
        });
      }
    }
  } catch(e) {}

  return (
    <section id="galeri" className="section">
      <div className="container">
        <div className="section-num">07 — Galeri</div>
        <div className="section-header">
          <h2>İÇERİDEN <span className="acc">BAKIN.</span></h2>
          <p className="lead">Tesisi ziyaret etmeden önce her bölmeyi, her ekipmanı yakından gör.</p>
        </div>
        <div className="gallery">
          {items.map((g, i) => (
            <div key={i} className={`g ${g.cls}`}>
              <img src={g.img} alt={`${g.ttl} — Samandağ spor salonu Hatay Body Life Gym ${g.cat}`} loading="lazy" />
              <div className="label">
                <div className="cat">{g.cat}</div>
                <div className="ttl">{g.ttl}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === TRAINERS (Section 8) ===
function TrainersSection() {
  return (
    <section id="egitmenler" className="section">
      <div className="container">
        <div className="section-num">08 — Eğitmenler</div>
        <div className="section-header">
          <h2>SEKİZ KİŞİLİK <span className="acc">PROFESYONEL</span> KADRO</h2>
          <p className="lead">Sertifikalı, deneyimli ve motive — her branş için bir uzman.</p>
        </div>
        <div className="trainer-grid">
          {window.TRAINERS.map((t, i) => (
            <div key={i} className="trainer">
              <div className="ph" style={{ backgroundImage:`url(${t.img})` }}></div>
              <div className="num">0{i+1}</div>
              <div className="role">{t.role}</div>
              <div className="body">
                <h4>{t.name}</h4>
                <div className="spec">{t.spec}</div>
                <div className="socials">
                  <a href="https://instagram.com/bodylifegymm" target="_blank" rel="noopener" aria-label="Instagram"><i className="bi bi-instagram"></i></a>
                  <a href="https://wa.me/905302602024" target="_blank" rel="noopener" aria-label="WhatsApp"><i className="bi bi-whatsapp"></i></a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === TESTIMONIALS (Section 9) ===
function TestimonialsSection() {
  return (
    <section className="section testimonials">
      <div className="container">
        <div className="section-num">09 — Üye Yorumları</div>
        <div className="section-header">
          <h2>ÜYELERİMİZ <span className="acc">NE DİYOR?</span></h2>
          <p className="lead">Farklı branşlardan gerçek üyelerin Body Life Gym deneyimi.</p>
        </div>
        <div className="testi-rail">
          {window.TESTIMONIALS.slice(0,3).map((t, i) => (
            <div key={i} className="testi-card">
              <div className="quote">"</div>
              <div className="stars">★ ★ ★ ★ ★</div>
              <blockquote>{t.text}</blockquote>
              <div className="person">
                <div className="avatar" style={{ backgroundImage:`url(${window.IMG['t' + (i+1)]})`, backgroundColor: 'var(--ink-700)' }}></div>
                <div>
                  <div className="name">{t.name}</div>
                  <div className="branch">{t.branch}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="testi-rail" style={{ marginTop:20 }}>
          {window.TESTIMONIALS.slice(3,6).map((t, i) => (
            <div key={i} className="testi-card">
              <div className="quote">"</div>
              <div className="stars">★ ★ ★ ★ ★</div>
              <blockquote>{t.text}</blockquote>
              <div className="person">
                <div className="avatar" style={{ backgroundImage:`url(${window.IMG['t' + (i+4)]})`, backgroundColor: 'var(--ink-700)' }}></div>
                <div>
                  <div className="name">{t.name}</div>
                  <div className="branch">{t.branch}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === CTA + CONTACT (Section 10) ===
function CTASection() {
  return (
    <section id="iletisim" className="cta-strip">
      <div className="container cta-strip-inner">
        <div>
          <div style={{ fontFamily:'var(--font-display)', letterSpacing:'0.3em', fontSize:14, marginBottom:16 }}>10 — İLETİŞİM</div>
          <h2>TEK TESİSTE<br/>DAHA FAZLA <span style={{ WebkitTextStroke:'2px #000', color:'transparent' }}>HAREKET</span>,<br/>DAHA FAZLA ENERJİ.</h2>
          <p>Body Life Gym'in fitness, zumba, pilates, boks ve modern cihaz alanlarını keşfet. Bugün başla, değişimi hisset.</p>
          <div className="hero-cta cta-strip-actions" style={{ marginBottom:0 }}>
            <a href="https://wa.me/905302602024" className="btn btn-primary"><i className="bi bi-whatsapp"></i> WhatsApp'tan Yaz</a>
            <a href="https://maps.google.com/?q=Dönmez+İş+Merkezi+Samandağ" className="btn btn-ghost"><i className="bi bi-geo-alt-fill"></i> Konum Al</a>
            <a href="#uyelik" className="btn btn-ghost"><i className="bi bi-card-list"></i> Üyelikleri İncele</a>
          </div>
        </div>

        <div className="info-card">
          <h4>İLETİŞİM</h4>
          <div className="info-row">
            <div className="ic"><i className="bi bi-telephone-fill"></i></div>
            <div><div className="lbl">Telefon</div><div className="val">0530 260 20 24</div></div>
          </div>
          <div className="info-row">
            <div className="ic"><i className="bi bi-geo-alt-fill"></i></div>
            <div><div className="lbl">Adres</div><div className="val">Dönmez İş Merkezi, Tomruksuyu, Sarı sk No:21<br/>31880 Samandağ / Hatay</div></div>
          </div>
          <div className="info-row">
            <div className="ic"><i className="bi bi-clock-fill"></i></div>
            <div><div className="lbl">Çalışma Saatleri</div><div className="val">Pzt – Cmt: 08:30 – 22:00<br/>Pazar: Kapalı</div></div>
          </div>
          <div className="info-row">
            <div className="ic"><i className="bi bi-instagram"></i></div>
            <div><div className="lbl">Instagram</div><div className="val">@bodylifegymm</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === FOOTER ===
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <h3><span className="acc">BODY LIFE</span> GYM</h3>
            <p>Samandağ'ın en kapsamlı fitness kompleksi. Fitness, zumba, pilates, boks, kardiyo, personal training ve sauna — tek çatı altında.</p>
            <div className="footer-socials">
              <a href="https://instagram.com/bodylifegymm" aria-label="Instagram"><i className="bi bi-instagram"></i></a>
              <a href="https://wa.me/905302602024" aria-label="WhatsApp"><i className="bi bi-whatsapp"></i></a>
              <a href="tel:05302602024" aria-label="Phone"><i className="bi bi-telephone-fill"></i></a>
              <a href="https://facebook.com/bodylifegym" target="_blank" rel="noopener" aria-label="Facebook"><i className="bi bi-facebook"></i></a>
            </div>
          </div>
          <div className="footer-col">
            <h5>Branşlar</h5>
            <ul>
              <li><a href="/branslar#fitness">Fitness</a></li>
              <li><a href="/branslar#zumba">Zumba</a></li>
              <li><a href="/branslar#pilates">Pilates</a></li>
              <li><a href="/branslar#boks">Boks</a></li>
              <li><a href="/branslar#kardiyo">Kardiyo</a></li>
              <li><a href="/branslar#pt">Personal Training</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Sayfalar</h5>
            <ul>
              <li><a href="#tesis">Tesis</a></li>
              <li><a href="#program">Haftalık Program</a></li>
              <li><a href="#uyelik">Üyelik Paketleri</a></li>
              <li><a href="#egitmenler">Eğitmenler</a></li>
              <li><a href="#galeri">Galeri</a></li>
              <li><a href="#iletisim">İletişim</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>İletişim</h5>
            <p><strong>0530 260 20 24</strong></p>
            <p>Dönmez İş Merkezi<br/>Tomruksuyu, Sarı sk No:21<br/>31880 Samandağ / Hatay</p>
            <p><strong>Pzt – Cmt</strong> · 08:30 – 22:00<br/><strong>Pazar</strong> · Kapalı</p>
          </div>
        </div>
        <section className="seo-block" aria-label="Hatay Samandağ Antakya Spor Salonu">
          <h2>Hatay Spor Salonu · Samandağ Fitness Merkezi · Antakya Gym</h2>
          <p>
            <strong>Body Life Gym</strong>, <strong>Hatay'ın</strong> ve <strong>Samandağ'ın</strong> en kapsamlı <strong>spor salonu</strong> ve <strong>fitness merkezidir</strong>.
            <strong> Samandağ spor salonu</strong> arayışınızda <strong>Antakya</strong> ve çevre ilçelerden ulaşılabilen modern bir <strong>fitness center</strong> olarak; <strong>fitness, zumba, pilates, boks, kardiyo, personal training</strong> ve <strong>sauna</strong> hizmetlerini tek çatı altında sunuyoruz.
            1.500 m²'lik <strong>Hatay fitness</strong> kompleksimiz, 40+ profesyonel cihaz, ücretsiz tartı analizi, <strong>kadınlara özel saatler</strong> ve uzman <strong>personal trainer</strong> kadrosuyla bölgenin en güçlü <strong>gym</strong> deneyimini sunar.
          </p>
          <p>
            <strong>Samandağ gym</strong>, <strong>Antakya spor salonu</strong>, <strong>Hatay fitness merkezi</strong> arıyorsanız Body Life Gym sizin için doğru adres. Tomruksuyu / Samandağ konumumuzla <strong>Defne, Antakya, Arsuz, İskenderun</strong> gibi <strong>Hatay ilçelerinden</strong> kolay ulaşım imkanı sunuyoruz. <strong>Pazartesi-Cumartesi 08:30 – 22:00</strong> saatleri arasında açığız.
          </p>
          <ul className="seo-tags">
            <li>Spor Salonu Hatay</li>
            <li>Spor Salonu Samandağ</li>
            <li>Spor Salonu Antakya</li>
            <li>Hatay Gym</li>
            <li>Samandağ Fitness</li>
            <li>Antakya Fitness Center</li>
            <li>Hatay Pilates</li>
            <li>Samandağ Zumba</li>
            <li>Antakya Boks</li>
            <li>Hatay Personal Training</li>
            <li>Sauna Samandağ</li>
            <li>Kadınlara Özel Spor Salonu Hatay</li>
          </ul>
        </section>
        <div className="footer-bottom" style={{ flexDirection: 'column', alignItems: 'center', gap: 12 }}>
          <a href="https://woxoyazilim.com" target="_blank" rel="noopener" className="footer-credit" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span>Designed by</span>
            <img src="/assets/woxo-logo.png" alt="Woxo Software Co." style={{ height: 22 }} />
          </a>
          <span style={{ fontSize: 11, opacity: 0.4 }}>© {new Date().getFullYear()} Body Life Gym. Tüm hakları saklıdır.</span>
        </div>
      </div>
    </footer>
  );
}

// === STICKY CTAS ===
function StickyCTAs() {
  return (
    <>
      <a href="https://wa.me/905302602024" className="sticky-wa">
        <i className="bi bi-whatsapp"></i> WhatsApp ile Yaz
      </a>
      <a href="tel:05302602024" className="sticky-phone">
        <i className="bi bi-telephone-fill"></i> 0530 260 20 24
      </a>
    </>
  );
}

// === Reveal observer ===
function useReveal() {
  useEffectC(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('visible');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

Object.assign(window, {
  Nav, Hero, Marquee, ComplexSection, BranslarSection, EquipSection,
  ProgramSection, WhySection, PlansSection, GallerySection, TrainersSection,
  TestimonialsSection, CTASection, Footer, StickyCTAs, useReveal
});