// Elegancy Glass — App
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#25447b",
  "darkMode": false,
  "showGalleryTags": true
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  "Elegancy Blue": "#25447b",
  "Azul escuro": "#1d3561",
  "Azul médio": "#2e5fa3",
  "Grafite": "#3a4a5c",
  "Champagne": "#b08555",
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply theme + accent
  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-theme', tweaks.darkMode ? 'dark' : 'light');
    root.style.setProperty('--accent', tweaks.accent);
    // derive deep variant
    root.style.setProperty('--accent-deep', shade(tweaks.accent, -15));
  }, [tweaks.accent, tweaks.darkMode]);

  // Reveal-on-scroll
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    document.querySelectorAll('.section, .testimonial, .service, .why-cell, .process-item, .gallery-item, .faq-item, .hero-meta-item').forEach(el => {
      el.classList.add('reveal');
      obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <Nav/>
      <Hero/>
      <Marquee/>
      <Services/>
      <Why/>
      <Process/>
      <Portfolio/>
      <Video/>
      <Cobertura/>
      <Testimonials/>
      <FAQ/>
      <Contato/>
      <Footer/>
      <FAB/>
      <CookieBanner/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Aparência">
          <TweakToggle
            label="Modo escuro"
            value={tweaks.darkMode}
            onChange={(v) => setTweak('darkMode', v)}
          />
        </TweakSection>
        <TweakSection label="Cor de acento">
          <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:8, marginBottom:8}}>
            {Object.entries(ACCENT_PRESETS).map(([name, color]) => (
              <button key={name}
                onClick={() => setTweak('accent', color)}
                title={name}
                style={{
                  height: 36,
                  borderRadius: 6,
                  background: color,
                  border: tweaks.accent === color ? '2px solid #000' : '1px solid #e5e5e5',
                  cursor: 'pointer',
                }}/>
            ))}
          </div>
          <TweakColor
            label="Custom"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
          />
        </TweakSection>
        <TweakSection label="Galeria">
          <TweakToggle
            label="Mostrar tags ao passar o mouse"
            value={tweaks.showGalleryTags}
            onChange={(v) => setTweak('showGalleryTags', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function shade(hex, percent) {
  const c = hex.replace('#','');
  const r = parseInt(c.slice(0,2),16);
  const g = parseInt(c.slice(2,4),16);
  const b = parseInt(c.slice(4,6),16);
  const f = (1 + percent/100);
  const cap = (n) => Math.max(0, Math.min(255, Math.round(n*f)));
  return '#' + [cap(r), cap(g), cap(b)].map(x => x.toString(16).padStart(2,'0')).join('');
}

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