// Main app
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "lima",
  "displayFont": "Anton"
}/*EDITMODE-END*/;

const ACCENTS = {
  lima:    '#CED434',
  violeta: '#573A96',
  tinta:   '#05050C',
};

function App() {
  const [t, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  React.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.08, rootMargin: '0px 0px -40px 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    const root = document.documentElement;
    const accent = ACCENTS[t.accent] || ACCENTS.lima;
    root.style.setProperty('--accent', accent);

    // Override fire-* colors only when the accent differs from the baked default
    let s = document.getElementById('__accent_override');
    if (accent === ACCENTS.lima) { if (s) s.textContent = ''; return; }
    if (!s) {
      s = document.createElement('style');
      s.id = '__accent_override';
      document.head.appendChild(s);
    }
    s.textContent = `
      .text-fire-500, .text-fire-400 { color: ${accent} !important; }
      .bg-fire-500,   .bg-fire-400   { background-color: ${accent} !important; }
      .border-fire-500, .border-fire-400 { border-color: ${accent} !important; }
      .hover\\:text-fire-500:hover { color: ${accent} !important; }
      .hover\\:bg-fire-500:hover   { background-color: ${accent} !important; }
      .btn-fire { background: ${accent} !important; }
      ::selection { background: ${accent}; color: #0a0a0a; }
      .spray-under { background-image: linear-gradient(transparent 70%, ${accent}99 70%); }
    `;

  }, [t]);

  React.useEffect(() => {
    if (t.displayFont === 'Anton') {
      document.querySelectorAll('.font-display').forEach(el => { el.style.fontFamily = ''; });
      return;
    }
    document.querySelectorAll('.font-display').forEach(el => {
      el.style.fontFamily = `"${t.displayFont}", Impact, sans-serif`;
    });
  }, [t.displayFont]);

  // Load tweak fonts
  React.useEffect(() => {
    const id = '__tweak_fonts_hh';
    if (document.getElementById(id)) return;
    const link = document.createElement('link');
    link.id = id;
    link.rel = 'stylesheet';
    link.href = 'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Archivo+Black&family=Big+Shoulders+Display:wght@800;900&family=Bowlby+One&display=swap';
    document.head.appendChild(link);
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <Elementos />
      <QuienesSomos />
      <Proyectos />
      <Lineup />
      <Gallery />
      <Redes />
      <CTA />
      <Footer />

      {window.TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Color" />
          <TweakColor
            label="Acento"
            value={ACCENTS[t.accent]}
            onChange={(v) => {
              const id = Object.keys(ACCENTS).find(k => ACCENTS[k].toLowerCase() === String(v).toLowerCase());
              if (id) setTweak('accent', id);
            }}
            options={Object.values(ACCENTS)}
          />
          <TweakSection label="Tipografía" />
          <TweakSelect
            label="Display"
            value={t.displayFont}
            onChange={(v) => setTweak('displayFont', v)}
            options={[
              { value: 'Anton',                 label: 'Anton' },
              { value: 'Bebas Neue',            label: 'Bebas Neue' },
              { value: 'Archivo Black',         label: 'Archivo Black' },
              { value: 'Big Shoulders Display', label: 'Big Shoulders' },
              { value: 'Bowlby One',            label: 'Bowlby One' },
            ]}
          />
        </TweaksPanel>
      )}
    </>
  );
}

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