/* NexGen Builders — main App */

const ACCENT_BLUE = { blue: '#3D7EFF', blueHot: '#5B9CFF', cyan: '#22D3EE', coral: '#FF5757' };

function App() {
  const [lang, setLang] = React.useState(window.DJANGO_LANG || 'el');

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--blue', ACCENT_BLUE.blue);
    root.style.setProperty('--blue-hot', ACCENT_BLUE.blueHot);
    root.style.setProperty('--cyan', ACCENT_BLUE.cyan);
    root.style.setProperty('--coral', ACCENT_BLUE.coral);
  }, []);

  React.useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  const dict = window.I18N[lang];
  const { Nav, Hero, Marquee, Programs, WhyUs, Achievements, Areas, FAQ, Careers, CTA, Footer } = window.NGB;

  const heroSrc = _a('assets/photo-classroom.jpg');

  return (
    <React.Fragment>
      <div className="bg-grid"></div>
      <div className="bg-dots"></div>
      <div className="bg-ambient"></div>

      <div className="wrap">
        <Nav lang={lang} setLang={setLang} t={dict}/>
        <Hero t={dict} heroSrc={heroSrc}/>
        <div style={{ background: 'var(--blue)' }}>
          <Marquee t={dict}/>
        </div>
        <Programs t={dict}/>
        <WhyUs t={dict}/>
        <Achievements t={dict}/>
        <Areas t={dict}/>
        <FAQ t={dict}/>
        <Careers t={dict}/>
        <CTA t={dict}/>
        <Footer t={dict}/>
      </div>
    </React.Fragment>
  );
}

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