/* global React, ReactDOM */
const { useState: useStateB, useEffect: useEffectB } = React;

const BRANCHES_FULL = [
  {
    id:'fitness',
    title:'FITNESS',
    eyebrow:'01 — Branş',
    badge:'Ana Salon',
    img: window.IMG.fitness,
    lead:'Modern ekipmanlarla güç, dayanıklılık ve form kazan. Tüm vücut için planlanmış geniş bir antrenman alanı.',
    body:'Body Life Gym\'in ana fitness alanı 600 m²\'lik açık planlı bir bölmede konumlanır. Kardiyo, ağırlık, fonksiyonel ve esneklik istasyonları arasında akıcı bir geçiş sağlar. Ekipmanlar düzenli bakımdan geçer, alan her gün dezenfekte edilir.',
    features:['Sınırsız tesis erişimi','Açık plan, ferah alan','Tam ekipman çeşitliliği','Form değerlendirme','Hijyenik ortam','Klima & havalandırma'],
    meta:[
      { lbl:'Alan', val:'600 m²' },
      { lbl:'Cihaz', val:'40+' },
      { lbl:'Saat', val:'08:30 – 22:00' },
    ],
  },
  {
    id:'zumba',
    title:'ZUMBA',
    eyebrow:'02 — Branş',
    badge:'Grup Stüdyosu',
    img: window.IMG.zumba,
    lead:'Müzik, ritim ve yüksek enerjiyle kalori yak. Dans ederek antrenman yap, eğlenerek form tut.',
    body:'Sertifikalı Zumba eğitmeni Deniz Kara önderliğinde haftada 3 ders. Latin ritimleri, pop ve dans-fitness karışımı bir grup dersi formatı. Yeni başlayanlardan ileri seviyeye kadar herkes katılabilir.',
    features:['Sertifikalı eğitmen','Aynalı stüdyo','Profesyonel ses sistemi','Haftada 3 ders','Tüm seviyelere açık','Saat başı kalori takibi'],
    meta:[
      { lbl:'Alan', val:'80 m²' },
      { lbl:'Ders/Hafta', val:'3' },
      { lbl:'Süre', val:'60 dk' },
    ],
  },
  {
    id:'pilates',
    title:'PİLATES',
    eyebrow:'03 — Branş',
    badge:'Reformer Stüdyosu',
    img: window.IMG.pilates,
    lead:'Esneklik, denge ve güçlü core yapısı için özel olarak tasarlanmış pilates alanı.',
    body:'Mat ve reformer dersleri için ayrı bölümler. 12 reformer cihazı, blok, top, lastik ve tüm yardımcı ekipmanlar mevcut. Selin Arslan eğitmenliğinde küçük gruplar halinde kişiye özel pozisyon kontrolü.',
    features:['12 reformer cihazı','Mat & reformer dersleri','Küçük grup formatı (max 8)','Postür değerlendirme','Sakatlık sonrası rehabilitasyon','Hamilelik pilates programı'],
    meta:[
      { lbl:'Reformer', val:'12 adet' },
      { lbl:'Grup', val:'Max 8 kişi' },
      { lbl:'Süre', val:'55 dk' },
    ],
  },
  {
    id:'boks',
    title:'BOKS',
    eyebrow:'04 — Branş',
    badge:'Boks Salonu',
    img: window.IMG.boks,
    lead:'Kondisyon, refleks ve güç odaklı yüksek tempolu antrenman. Stres at, form kazan.',
    body:'5 istasyon boks torbası, ring köşesi, hız topu ve pad çalışma alanı. Antrenör Cem Tunç hem teknik hem kondisyon dersleri veriyor. Ekipman tesiste mevcut, kişisel eldiven getirmek opsiyonel.',
    features:['5 istasyon torba','Pad çalışma alanı','Hız topu & speed bag','Teknik & kondisyon dersi','Sparring imkânı','Eldiven temin imkanı'],
    meta:[
      { lbl:'İstasyon', val:'5' },
      { lbl:'Ders/Hafta', val:'4' },
      { lbl:'Süre', val:'60 dk' },
    ],
  },
  {
    id:'kardiyo',
    title:'KARDİYO',
    eyebrow:'05 — Branş',
    badge:'Kardiyo Hattı',
    img: window.IMG.kardiyo,
    lead:'Koşu bantları, bisikletler ve eliptik cihazlarla aktif performans bölümü.',
    body:'Yeni nesil kardiyo serisi: 10 koşu bandı, 8 eliptik bisiklet, sabit bisikletler ve rowing makineleri. Her cihazda kişisel ekran, kalp atış sensörü ve program seçimi. Geniş ferah pencereli alan.',
    features:['10 koşu bandı','8 eliptik bisiklet','4 sabit bisiklet','Rowing makinesi','Kişisel ekran ve sensör','Doğal aydınlatma'],
    meta:[
      { lbl:'Toplam Cihaz', val:'25+' },
      { lbl:'Maks Hız', val:'22 km/s' },
      { lbl:'Eğim', val:'0–15%' },
    ],
  },
  {
    id:'weights',
    title:'AĞIRLIK',
    eyebrow:'06 — Branş',
    badge:'Free Weights',
    img: window.IMG.weights,
    lead:'Smith Machine, dumbbell, barbell ve plate yüklemeli istasyonlar — serbest ağırlık antrenmanı.',
    body:'2 Smith Machine, 6 bench press istasyonu, dumbbell rack 2.5 kg\'dan 50 kg\'a kadar, olympic barbell, leg press ve cable crossover. Ağırlık alanı zemin koruma kaplaması ile kaplı.',
    features:['2 Smith Machine','6 bench press','Dumbbell 2.5 – 50 kg','4 cable crossover','Olympic barbell setleri','Zemin koruma kaplaması'],
    meta:[
      { lbl:'Alan', val:'350 m²' },
      { lbl:'Dumbbell', val:'2.5–50 kg' },
      { lbl:'Bench', val:'6 set' },
    ],
  },
  {
    id:'pt',
    title:'PERSONAL',
    eyebrow:'07 — Branş',
    badge:'1 - 1 Antrenman',
    img: window.IMG.pt,
    lead:'Uzman eğitmenlerle kişisel hedeflerine özel program. Form, kilo, performans ya da rehabilitasyon.',
    body:'Aylin Şen ve Murat Yıldız liderliğinde personal training. İlk seansta hedef belirleme, vücut analizi ve haftalık plan çıkarılır. Beslenme rehberi de pakete dahildir. Premium üyelikte sınırsız.',
    features:['Vücut analizi & ölçüm','Haftalık antrenman planı','Beslenme rehberi','İlerleme takibi','Esnek randevu','Sınırsız (Premium)'],
    meta:[
      { lbl:'Seans', val:'60 dk' },
      { lbl:'Eğitmen', val:'2 PT' },
      { lbl:'Plan', val:'12 hafta' },
    ],
  },
  {
    id:'group',
    title:'GRUP DERSLERİ',
    eyebrow:'08 — Branş',
    badge:'Stüdyo',
    img: window.IMG.group,
    lead:'HIIT, kardiyo, fitness circuit ve full body — yüksek tempolu grup antrenmanları.',
    body:'Grup ders stüdyosu zumba dersleri haricinde HIIT, fitness circuit, full body ve power yoga için kullanılır. Aynalı duvar, profesyonel ses sistemi ve TV ekran. Haftada 6 ders, üyelere ücretsiz.',
    features:['HIIT & circuit dersleri','Full Body Training','Power Yoga','Stretch & Recover','Tüm üyelere ücretsiz','Online rezervasyon'],
    meta:[
      { lbl:'Ders/Hafta', val:'6+' },
      { lbl:'Süre', val:'45–60 dk' },
      { lbl:'Kapasite', val:'18 kişi' },
    ],
  },
];

function BranchNav({ active }) {
  return (
    <div className="branch-nav">
      <div className="container branch-nav-inner">
        {BRANCHES_FULL.map(b => (
          <a key={b.id} href={`#${b.id}`} className={active === b.id ? 'active' : ''}>
            {b.title}
          </a>
        ))}
      </div>
    </div>
  );
}

function BranchBlock({ b, idx }) {
  return (
    <section id={b.id} className="branch-block">
      <div className="container branch-block-inner">
        <div className="branch-text">
          <span className="ix">{b.eyebrow}</span>
          <h2>{b.title}</h2>
          <p className="lead">{b.lead}</p>
          <p>{b.body}</p>
          <ul className="branch-features">
            {b.features.map((f, j) => <li key={j}>{f}</li>)}
          </ul>
          <div className="branch-meta">
            {b.meta.map((m, j) => (
              <div key={j} className="branch-meta-item">
                <div className="lbl">{m.lbl}</div>
                <div className="val">{m.val}</div>
              </div>
            ))}
          </div>
          <div className="hero-cta" style={{ marginBottom:0 }}>
            <a href="https://wa.me/905302602024" className="btn btn-wa"><i className="bi bi-whatsapp"></i> Bilgi Al</a>
            <a href="index.html#uyelik" className="btn btn-ghost">Üyelikleri Gör</a>
          </div>
        </div>
        <div className="branch-visual">
          <img src={b.img} alt={b.title} />
          <span className="corner-tag">{b.badge}</span>
          <div className="floating">
            <div className="num">{String(idx+1).padStart(2,'0')}</div>
            <div className="label">{b.title}<br/><span style={{ color:'var(--accent)' }}>· BODY LIFE GYM</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BranslarApp() {
  const [active, setActive] = useStateB('fitness');

  useEffectB(() => {
    const onScroll = () => {
      let cur = 'fitness';
      for (const b of BRANCHES_FULL) {
        const el = document.getElementById(b.id);
        if (el && el.getBoundingClientRect().top < 200) cur = b.id;
      }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      <Nav />
      <section className="branch-hero">
        <div className="container">
          <div className="crumb">
            <a href="index.html">Anasayfa</a>
            <span className="sep">/</span>
            <span>Branşlar</span>
          </div>
          <h1>SEKİZ BRANŞ.<br/><span className="acc">SONSUZ</span> İHTİMAL.</h1>
          <p>Body Life Gym'de fitness'tan boksa, pilates'ten zumbaya kadar her hedef için profesyonel olarak planlanmış antrenman alanları. Aşağıda her branşın detaylarını, ekipmanlarını ve eğitmenlerini bulabilirsin.</p>
        </div>
      </section>

      <BranchNav active={active} />

      <main>
        {BRANCHES_FULL.map((b, i) => <BranchBlock key={b.id} b={b} idx={i} />)}
      </main>

      <section className="branch-cta">
        <div className="container">
          <div className="branch-cta-inner">
            <div>
              <h2>HANGİ BRANŞ <span className="acc">SENİN İÇİN?</span></h2>
              <p>Tesisi ziyaret et, eğitmenlerle tanış, kendine uygun antrenman alanını seç. WhatsApp'tan randevu alabilir, ya da doğrudan tesise uğrayabilirsin.</p>
            </div>
            <div className="branch-cta-actions">
              <a href="https://wa.me/905302602024" className="btn btn-wa"><i className="bi bi-whatsapp"></i> WhatsApp</a>
              <a href="tel:05302602024" className="btn btn-primary"><i className="bi bi-telephone-fill"></i> Hemen Ara</a>
              <a href="index.html#uyelik" className="btn btn-ghost">Üyelikleri Gör</a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <StickyCTAs />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<BranslarApp />);