/* global React, ReactDOM */

function App() {
  // global reveal observer
  useReveal();

  // Single source of truth for tweaks
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS || {
    fontPair: 'editorial',
    accent:  '#7D78A3', accent2: '#A29CBB', accent3: '#F1B2AC',
    tone: 'lavanda',
  });

  // Apply theme CSS variables whenever tweaks change
  React.useEffect(() => { applyTheme(t); }, [t.fontPair, t.accent, t.accent2, t.accent3, t.tone]);

  const [showToast, setShowToast] = React.useState(true);
  React.useEffect(() => {
    const timer = setTimeout(() => setShowToast(false), 8000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="bg-bone text-ink overflow-x-clip">
      {showToast && (
        <div style={{
          position: 'fixed', bottom: 24, right: 24, zIndex: 9999,
          background: 'var(--bataj-ink)', color: 'var(--bataj-paper)',
          padding: '16px 20px', borderRadius: 12,
          boxShadow: '0 20px 40px rgba(0,0,0,0.4)',
          display: 'flex', alignItems: 'center', gap: 16,
          fontFamily: 'var(--bataj-sans)', fontSize: 13,
          animation: 'fade-in-up 0.5s ease-out forwards',
        }}>
          <div>
            <div style={{ fontWeight: 600, marginBottom: 4 }}>¡Bienvenido a Bataj!</div>
            <div style={{ opacity: 0.7, fontSize: 12 }}>[SYS_AUDIO_STREAMING: ACTIVE] Haz clic en el procesador nodal para silenciar.</div>
          </div>
          <button 
            onClick={() => setShowToast(false)}
            style={{
              background: 'rgba(255,255,255,0.1)', border: 'none', 
              color: '#fff', width: 28, height: 28, borderRadius: 99,
              cursor: 'pointer', display: 'grid', placeItems: 'center'
            }}>✕</button>
        </div>
      )}
      <Nav />
      <main>
        <Hero />
        <Manifesto />
        <ProductsScrollReel />
        <Stats />
        <Process />
        <CTAFooter />
      </main>
      <BatajTweaks t={t} setTweak={setTweak} showProductStyle={false} />
    </div>
  );
}

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