// App.jsx — main app with nav, language switcher, all sections

function Nav({ lang, setLang, t }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth' });
    setMenuOpen(false);
  };

  return (
    <nav className="bld-nav" style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 500,
      background: scrolled ? 'rgba(15,17,26,0.95)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid #1e293b' : '1px solid transparent',
      transition: 'all 0.3s',
      padding: '0 32px',
    }}>
      <div className="bld-nav-inner" style={{ maxWidth: 1200, margin: '0 auto', height: 64, display: 'flex', alignItems: 'center', gap: 32 }}>
        {/* Logo */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
          <div style={{ width: 32, height: 32, borderRadius: 9, background: 'linear-gradient(135deg, #3b82f6, #2563eb)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <span style={{ fontSize: 14, fontWeight: 900, color: '#fff', fontFamily: "'Outfit', sans-serif" }}>B</span>
          </div>
          <span style={{ fontSize: 17, fontWeight: 800, color: '#e2e8f0', fontFamily: "'Outfit', sans-serif", letterSpacing: '-0.5px' }}>BLD</span>
          <span className="bld-nav-pilot-tag" style={{ fontSize: 10, color: '#475569', fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', background: '#1e293b', borderRadius: 4, padding: '2px 6px' }}>PILOT</span>
        </div>

        {/* Links */}
        <div style={{ display: 'flex', gap: 4, flex: 1, justifyContent: 'center' }} className="nav-links">
          {[['pricing', t.nav.pricing], ['form', t.nav.product], ['next', t.nav.howItWorks]].map(([id, label]) => (
            <button key={id} onClick={() => scrollTo(id)} style={{
              background: 'transparent', border: 'none', color: '#64748b',
              fontSize: 14, fontWeight: 500, cursor: 'pointer', padding: '8px 16px', borderRadius: 8,
              transition: 'color 0.15s', fontFamily: "'DM Sans', sans-serif",
            }}
              onMouseEnter={e => e.target.style.color='#e2e8f0'}
              onMouseLeave={e => e.target.style.color='#64748b'}
            >{label}</button>
          ))}
        </div>

        {/* Lang switcher */}
        <div style={{ display: 'flex', gap: 2, background: '#151925', border: '1px solid #1e293b', borderRadius: 8, padding: 3 }}>
          {LANGS.map(l => (
            <button key={l} onClick={() => setLang(l)} style={{
              background: lang === l ? '#1e293b' : 'transparent',
              border: 'none', color: lang === l ? '#e2e8f0' : '#475569',
              fontSize: 11, fontWeight: 700, cursor: 'pointer', padding: '4px 10px',
              borderRadius: 6, textTransform: 'uppercase', letterSpacing: 1,
              transition: 'all 0.15s', fontFamily: "'DM Sans', sans-serif",
            }}>{l}</button>
          ))}
        </div>

        {/* CTA */}
        <button className="bld-nav-cta" onClick={() => scrollTo('form')} style={{
          background: 'linear-gradient(135deg, #3b82f6, #2563eb)',
          color: '#fff', border: 'none', borderRadius: 9,
          padding: '9px 20px', fontSize: 13, fontWeight: 700, cursor: 'pointer',
          boxShadow: '0 4px 16px rgba(59,130,246,0.3)',
          fontFamily: "'DM Sans', sans-serif",
          whiteSpace: 'nowrap',
        }}>{t.nav.pilot}</button>
      </div>
    </nav>
  );
}

function Footer({ t }) {
  return (
    <footer className="bld-footer" style={{ background: '#0b0d14', borderTop: '1px solid #1e293b', padding: '48px 32px' }}>
      <div className="bld-footer-inner" style={{ maxWidth: 1100, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 20 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: 'linear-gradient(135deg, #3b82f6, #2563eb)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ fontSize: 12, fontWeight: 900, color: '#fff' }}>B</span>
            </div>
            <span style={{ fontSize: 16, fontWeight: 800, color: '#e2e8f0', fontFamily: "'Outfit', sans-serif" }}>BLD Construction Software</span>
          </div>
          <p style={{ fontSize: 13, color: '#475569', margin: 0 }}>{t.footer.tagline}</p>
          <p style={{ fontSize: 12, color: '#334155', margin: '4px 0 0' }}>{t.footer.pilot}</p>
        </div>
        <div className="bld-footer-right" style={{ textAlign: 'right' }}>
          <a href={`mailto:${t.footer.email}`} style={{ fontSize: 14, color: '#3b82f6', fontWeight: 600 }}>{t.footer.email}</a>
          <p style={{ fontSize: 12, color: '#334155', marginTop: 6 }}>{t.footer.rights}</p>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const [lang, setLang] = React.useState(() => {
    const saved = localStorage.getItem('bld_lang');
    if (saved && LANGS.includes(saved)) return saved;
    const browser = navigator.language.slice(0, 2).toLowerCase();
    if (browser === 'uk') return 'uk';
    if (browser === 'ru') return 'ru';
    return 'en';
  });

  React.useEffect(() => { localStorage.setItem('bld_lang', lang); }, [lang]);

  const t = T[lang];
  const scrollToForm = () => {
    const el = document.getElementById('form');
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div style={{ fontFamily: "'DM Sans', sans-serif", background: '#0f111a', minHeight: '100vh', overflowX: 'hidden' }}>
      <Nav lang={lang} setLang={setLang} t={t} />
      <Hero t={t} lang={lang} onCTA={scrollToForm} />
      <PilotBlock t={t} onCTA={scrollToForm} />
      <WhatYouGet t={t} lang={lang} />
      <HowWorks t={t} />
      <TelegramScene t={t} lang={lang} />
      <ChatSection t={t} lang={lang} />
      <Pricing t={t} onCTA={scrollToForm} />
      <LeadForm t={t} lang={lang} />
      <NextSteps t={t} />
      <Footer t={t} />
      <AIChat t={t} lang={lang} />
    </div>
  );
}

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