// main.jsx — App composition + tweaks
const { useState: __ms, useEffect: __me } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF3EA5",
  "speed": 1,
  "density": "regular",
  "dark": false,
  "hero": "orb"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  '#FF3EA5',  // magenta
  '#4361FF',  // azure
  '#C8FF3E',  // lime
  '#FF6B1A',  // tangerine
  '#9D5BFF',  // violet
  '#2DD4FF',  // cyan
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = __ms('es');
  const dict = COPY[lang];

  // El panel de Tweaks solo aparece en modo dev (?dev=1) o en localhost
  const isDev = typeof window !== 'undefined' && (
    /[?&]dev=1\b/.test(window.location.search) ||
    /^(localhost|127\.|192\.168\.|0\.0\.0\.0)/.test(window.location.hostname)
  );

  useCustomCursor();
  useReveal();

  // Refrescar íconos Lucide cuando React re-renderiza
  __me(() => {
    const id = setTimeout(() => { if (window.refreshLucide) window.refreshLucide(); }, 50);
    return () => clearTimeout(id);
  });

  __me(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--magenta', t.accent);
    const speed = Number(t.speed) || 1;
    root.style.setProperty('--speed', String(speed));
    const dens = { compact: 0.7, regular: 1, comfy: 1.3 }[t.density] || 1;
    root.style.setProperty('--density', String(dens));
    root.setAttribute('data-theme', t.dark ? 'dark' : 'light');
  }, [t]);

  __me(() => {
    requestAnimationFrame(() => {
      document.querySelectorAll('.reveal, .reveal-word').forEach(el => el.classList.add('in'));
    });
  }, [lang]);

  return (
    <>
      <Nav t={dict} lang={lang} setLang={setLang} />
      <Hero variant={t.hero} t={dict} />
      <MarqueeBand words={dict.marquee_words} />
      <Services t={dict} />
      <Portfolio t={dict} />
      <Media t={dict} />
      <Process t={dict} />
      <Stack t={dict} />
      <Stats t={dict} />
      <Testimonials t={dict} />
      <Team t={dict} />
      <Contact t={dict} />
      <FAQ t={dict} />
      <Footer t={dict} lang={lang} />

      {isDev && <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakRadio label="Variante" value={t.hero}
          options={['orb', 'split', 'stack']}
          onChange={(v) => setTweak('hero', v)} />

        <TweakSection label="Acento" />
        <TweakColor label="Color principal" value={t.accent}
          options={ACCENT_OPTIONS} onChange={(v) => setTweak('accent', v)} />
        <TweakToggle label="Modo oscuro" value={t.dark}
          onChange={(v) => setTweak('dark', v)} />

        <TweakSection label="Ritmo" />
        <TweakRadio label="Densidad" value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)} />
        <TweakSlider label="Velocidad" value={t.speed}
          min={0.5} max={2} step={0.1} unit="×"
          onChange={(v) => setTweak('speed', v)} />
      </TweaksPanel>}
    </>
  );
}

function MarqueeBand({ words }) {
  return (
    <div style={{
      background: 'var(--ink)', color: 'var(--bg)',
      padding: '32px 0', overflow: 'hidden',
      borderTop: '1.5px solid var(--ink)', borderBottom: '1.5px solid var(--ink)'
    }}>
      <div className="marquee">
        <div className="marquee-track" style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(48px, 7vw, 120px)',
          fontWeight: 700, fontStyle: 'italic',
          letterSpacing: '-0.04em', lineHeight: 0.9
        }}>
          {Array(3).fill(0).map((_, k) => (
            <React.Fragment key={k}>
              {words.map((w, i) => (
                <span key={i + k * 100} style={{ display: 'inline-flex', alignItems: 'center', gap: '4rem' }}>
                  <span className={i % 2 === 0 ? 'chrome-text' : 'irid-text'}>{w}</span>
                  <Star size={36} color="var(--magenta)" />
                </span>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

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