/* global React, ReactDOM */
const { useEffect } = React;

const SETTINGS = {
  yellowShade: "neon",
  bgMode: "glow",
  heroTitle: window._heroTitle || "<span class='stroke'>BODY LIFE GYM</span><br/><span class='glow'>HATAY</span> SPOR SALONU",
  heroSub: window._heroSub || "Samandağ ve Antakya'nın en kapsamlı spor salonu. Fitness, zumba, pilates, boks, kardiyo, personal training ve sauna — Hatay'ın enerji merkezi Body Life Gym'de hedefine ulaş."
};

const SHADES = {
  gold:  { y400:'#FFD700', y500:'#E8C200', y600:'#B59800', glow:'255 215 0' },
  neon:  { y400:'#F5E300', y500:'#E8D700', y600:'#C7B900', glow:'245 227 0' },
  lime:  { y400:'#EAFF00', y500:'#D4E600', y600:'#A8B800', glow:'234 255 0' },
  amber: { y400:'#FFAA00', y500:'#E89500', y600:'#B57400', glow:'255 170 0' },
};

function applyShade(name) {
  const s = SHADES[name] || SHADES.neon;
  const r = document.documentElement;
  r.style.setProperty('--y-400', s.y400);
  r.style.setProperty('--y-500', s.y500);
  r.style.setProperty('--y-600', s.y600);
  r.style.setProperty('--y-glow', s.glow);
}

function App() {
  useEffect(() => { applyShade(SETTINGS.yellowShade); }, []);
  useEffect(() => { document.body.dataset.bg = SETTINGS.bgMode; }, []);

  useReveal();

  return (
    <>
      <Nav />
      <main>
        <Hero heroTitle={SETTINGS.heroTitle} heroSub={SETTINGS.heroSub} />
        <Marquee />
        <ComplexSection />
        <BranslarSection />
        <EquipSection />
        <ProgramSection />
        <WhySection />
        <PlansSection />
        <GallerySection />
        <TrainersSection />
        <TestimonialsSection />
        <CTASection />
      </main>
      <Footer />
      <StickyCTAs />
    </>
  );
}

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