// QASIET CITY — main app

const PALETTES = {
  gold_gray: {
    name: 'Золото + графит (бренд)',
    primary: '#3D3933',
    primaryDeep: '#1F1D1A',
    primarySoft: '#E6DFD2',
    accent: '#E1B778',
    bg: '#F7F4EE',
    bgAlt: '#EFEAE0',
    ink: '#1F1D1A',
    inkSoft: '#5A554C',
    line: '#DDD5C5',
  },
  gold_light: {
    name: 'Золото + светлый',
    primary: '#8C7A4E',
    primaryDeep: '#5A4E33',
    primarySoft: '#E4D7B6',
    accent: '#E1B778',
    bg: '#FBF8F1',
    bgAlt: '#F2EBDC',
    ink: '#1F1D1A',
    inkSoft: '#615A4B',
    line: '#E2DAC7',
  },
  graphite_gold: {
    name: 'Графит + золото',
    primary: '#1F1F1F',
    primaryDeep: '#0E0E0E',
    primarySoft: '#3A3A3A',
    accent: '#E1B778',
    bg: '#F4F1EA',
    bgAlt: '#E8E3D6',
    ink: '#0E0E0E',
    inkSoft: '#5A5A5A',
    line: '#D8D3C4',
  },
};

const FONT_PAIRS = {
  manrope: { name: 'Manrope + Inter', display: 'Manrope', text: 'Inter' },
  cormorant: { name: 'Cormorant + Inter', display: 'Cormorant Garamond', text: 'Inter' },
  space: { name: 'Space Grotesk + Inter', display: 'Space Grotesk', text: 'Inter' },
};

const DENSITIES = {
  airy: { name: 'Просторная', sectionY: '120px', maxw: '1320px' },
  comfortable: { name: 'Стандартная', sectionY: '96px', maxw: '1280px' },
  dense: { name: 'Плотная', sectionY: '72px', maxw: '1240px' },
};

// Real photos of QASIET CITY
const IMAGES = {
  hero: 'assets/hero-new.jpg',
  about: 'assets/facade-tower.jpg',
  advFeature: 'assets/courtyard.jpg',
  developer: 'assets/facade-front.jpg',
  gallery: [
    'assets/gallery-aerial.jpg',
    'assets/gallery-entrance.jpg',
    'assets/gallery-tower-mall.jpg',
    'assets/facade-tower.jpg',
    'assets/courtyard.jpg',
  ],
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "gold_gray",
  "fontPair": "manrope",
  "density": "comfortable"
}/*EDITMODE-END*/;

function App() {
  const [lang, setLang] = useState('ru');
  const [scrolled, setScrolled] = useState(false);

  // Apply theme tokens (fixed defaults)
  useEffect(() => {
    const p = PALETTES.gold_gray;
    const f = FONT_PAIRS.manrope;
    const d = DENSITIES.comfortable;
    const root = document.documentElement;
    root.style.setProperty('--primary', p.primary);
    root.style.setProperty('--primary-deep', p.primaryDeep);
    root.style.setProperty('--primary-soft', p.primarySoft);
    root.style.setProperty('--accent', p.accent);
    root.style.setProperty('--bg', p.bg);
    root.style.setProperty('--bg-alt', p.bgAlt);
    root.style.setProperty('--ink', p.ink);
    root.style.setProperty('--ink-soft', p.inkSoft);
    root.style.setProperty('--line', p.line);
    root.style.setProperty('--font-display', `'${f.display}', system-ui, sans-serif`);
    root.style.setProperty('--font-text', `'${f.text}', system-ui, sans-serif`);
    root.style.setProperty('--section-y', d.sectionY);
    root.style.setProperty('--maxw', d.maxw);
  }, []);

  // Scroll handling
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Reveal-on-scroll
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });

  return (
    <>
      <Header lang={lang} setLang={setLang} scrolled={scrolled} />
      <main>
        <Hero lang={lang} heroImg={IMAGES.hero} />
        <About lang={lang} aboutImg={IMAGES.about} />
        <Advantages lang={lang} advImg={IMAGES.advFeature} />
        <Tech lang={lang} />
        <Yard lang={lang} />
        <Plans lang={lang} />
        <Gallery lang={lang} images={IMAGES.gallery} />
        <Location lang={lang} />
        <Mortgage lang={lang} />
        <Warranty lang={lang} />
        <Developer lang={lang} devImg={IMAGES.developer} />
        <FAQ lang={lang} />
        <Contact lang={lang} />
      </main>
      <Footer lang={lang} />
      <WhatsAppFab lang={lang} />
    </>
  );
}

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