// final-app.jsx — landing final con tweaks que tienen efecto real

const FinalDefaults = /*EDITMODE-BEGIN*/{
  "lang": "es",
  "accent": "#2199ea",
  "showTerminal": true,
  "showParticles": true,
  "magneticHover": true,
  "customCursor": true,
  "rotateInterval": 3500
}/*EDITMODE-END*/;

// Context exposes live tweak values to all sections
const TweaksCtx = React.createContext(FinalDefaults);
window.TweaksCtx = TweaksCtx;

function FinalApp() {
  const [tweaks, setTweaks] = React.useState(FinalDefaults);
  const setTweak = (k, v) => {
    const next = typeof k === 'object' ? { ...tweaks, ...k } : { ...tweaks, [k]: v };
    setTweaks(next);
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*'); } catch (e) {}
  };
  const [editMode, setEditMode] = React.useState(false);

  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || !e.data.type) return;
      if (e.data.type === '__activate_edit_mode') setEditMode(true);
      if (e.data.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // Sync accent into F + CSS var so every section reads new value
  React.useEffect(() => {
    let s = document.getElementById('final-accent-css');
    if (!s) { s = document.createElement('style'); s.id = 'final-accent-css'; document.head.appendChild(s); }
    s.textContent = `:root { --f-accent: ${tweaks.accent}; --f-accent-glow: ${tweaks.accent}73; }`;
    if (window.F) {
      window.F.accent = tweaks.accent;
      window.F.accentGlow = tweaks.accent + '73';
    }
  }, [tweaks.accent]);

  const lang = tweaks.lang || 'es';
  const content = { ...EUREKANT_CONTENT[lang], __lang: lang };
  const scrollY = useGlobalScroll();

  // doc scroll progress
  const [docProg, setDocProg] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setDocProg(h > 0 ? window.scrollY / h : 0);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Custom cursor + trail
  const cursorRef = React.useRef(null);
  const cursorRingRef = React.useRef(null);
  const trailRef = React.useRef([]);
  const trailContainerRef = React.useRef(null);

  React.useEffect(() => {
    if (!tweaks.customCursor) {
      document.body.style.cursor = '';
      return;
    }
    document.body.style.cursor = 'none';

    // Trail particles pool
    const TRAIL = 18;
    const pool = [];
    const container = document.createElement('div');
    container.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:248;overflow:hidden';
    document.body.appendChild(container);
    trailContainerRef.current = container;

    for (let i = 0; i < TRAIL; i++) {
      const dot = document.createElement('div');
      const size = 4 + (TRAIL - i) * 0.6;
      dot.style.cssText = `position:absolute;top:0;left:0;width:${size}px;height:${size}px;border-radius:50%;background:${tweaks.accent};pointer-events:none;opacity:0;will-change:transform,opacity;mix-blend-mode:screen;`;
      container.appendChild(dot);
      pool.push({ el: dot, x: 0, y: 0, opacity: 0 });
    }

    let mouse = { x: 0, y: 0 };
    let positions = Array(TRAIL).fill({ x: 0, y: 0 });
    let rafId;

    const onMove = (e) => {
      mouse.x = e.clientX;
      mouse.y = e.clientY;
      if (cursorRef.current) cursorRef.current.style.transform = `translate3d(${e.clientX - 4}px, ${e.clientY - 4}px, 0)`;
      if (cursorRingRef.current) cursorRingRef.current.style.transform = `translate3d(${e.clientX - 16}px, ${e.clientY - 16}px, 0)`;
    };

    const animate = () => {
      // Each trail point follows the one before it with lag
      positions = positions.map((p, i) => {
        const target = i === 0 ? mouse : positions[i - 1];
        const lag = 0.28 + i * 0.03;
        return { x: p.x + (target.x - p.x) * lag, y: p.y + (target.y - p.y) * lag };
      });

      pool.forEach((p, i) => {
        const pos = positions[i];
        const opacity = (1 - i / TRAIL) * 0.55;
        const size = 4 + (TRAIL - i) * 0.6;
        p.el.style.transform = `translate3d(${pos.x - size / 2}px, ${pos.y - size / 2}px, 0)`;
        p.el.style.opacity = opacity;
      });

      rafId = requestAnimationFrame(animate);
    };

    animate();
    window.addEventListener('mousemove', onMove);
    return () => {
      window.removeEventListener('mousemove', onMove);
      cancelAnimationFrame(rafId);
      document.body.style.cursor = '';
      container.remove();
    };
  }, [tweaks.customCursor, tweaks.accent]);

  return (
    <TweaksCtx.Provider value={tweaks}>
      <div style={{ background: '#060813', minHeight: '100vh', position: 'relative' }}>
        <div style={{
          position: 'fixed', top: 0, left: 0, height: 2,
          width: `${docProg * 100}%`, background: tweaks.accent,
          zIndex: 200, boxShadow: `0 0 12px ${tweaks.accent}`,
          transition: 'width .1s linear'
        }} />

        {tweaks.customCursor && (
          <React.Fragment>
            <div ref={cursorRef} style={{
              position: 'fixed', top: 0, left: 0, width: 8, height: 8, borderRadius: '50%',
              background: tweaks.accent, pointerEvents: 'none', zIndex: 250,
              boxShadow: `0 0 12px ${tweaks.accent}`, mixBlendMode: 'screen'
            }} />
            <div ref={cursorRingRef} style={{
              position: 'fixed', top: 0, left: 0, width: 32, height: 32, borderRadius: '50%',
              border: `1px solid ${tweaks.accent}`, pointerEvents: 'none', zIndex: 249,
              opacity: 0.5, transition: 'transform .15s ease-out'
            }} />
          </React.Fragment>
        )}

        <FNav content={content} lang={lang} setLang={(l) => setTweak('lang', l)} scrollY={scrollY} />
        <FHeroReal content={content} />
        <FMarquee items={content.marquee} dir={1} />
        <FStats stats={content.stats} />
        <FSoluciones content={content} />
        <FProceso content={content} />
        <FPortfolio content={content} />
        <FTestimonios content={content} />
        <FEquipo content={content} />
        <FBlog content={content} />
        <FFaq content={content} />
        <FCtaFinal content={content} />
        <FFooter content={content} />

        {editMode && (
          <FinalTweaksPanel tweaks={tweaks} setTweak={setTweak} onClose={() => {
            setEditMode(false);
            try { window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*'); } catch (e) {}
          }} />
        )}
      </div>
    </TweaksCtx.Provider>
  );
}

function FinalTweaksPanel({ tweaks, setTweak, onClose }) {
  return (
    <div style={{
      position: 'fixed', right: 24, bottom: 24, zIndex: 300,
      width: 340, background: 'rgba(10,14,28,0.96)', backdropFilter: 'blur(16px)',
      border: `1px solid ${tweaks.accent}`, padding: 24,
      fontFamily: 'var(--font-mono)', color: '#e7ecff',
      boxShadow: `0 12px 40px rgba(0,0,0,0.5), 0 0 32px ${tweaks.accent}40`,
      cursor: 'auto'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
        <div style={{ fontSize: 11, letterSpacing: '0.2em', color: tweaks.accent }}>// TWEAKS</div>
        <button onClick={onClose} style={{ background: 'transparent', border: 'none', color: '#e7ecff', cursor: 'pointer', fontSize: 22, lineHeight: 1, padding: 0 }}>×</button>
      </div>

      <TwRow label="IDIOMA">
        <div style={{ display: 'flex', gap: 4 }}>
          {['es', 'en'].map(l => (
            <button key={l} onClick={() => setTweak('lang', l)} style={{
              flex: 1, padding: '8px', background: tweaks.lang === l ? tweaks.accent : 'transparent',
              color: tweaks.lang === l ? '#000' : '#e7ecff',
              border: '1px solid rgba(120,140,210,0.22)', fontSize: 11, cursor: 'pointer',
              fontFamily: 'var(--font-mono)', letterSpacing: '0.1em'
            }}>{l.toUpperCase()}</button>
          ))}
        </div>
      </TwRow>

      <TwRow label="ACENTO">
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {['#2199ea', '#63b7f0', '#59a4d6', '#5cf0b8', '#ffb86b', '#ff5f8f'].map(c => (
            <button key={c} onClick={() => setTweak('accent', c)} style={{
              width: 36, height: 36, background: c,
              border: tweaks.accent === c ? `2px solid #fff` : '1px solid rgba(120,140,210,0.22)',
              cursor: 'pointer', boxShadow: tweaks.accent === c ? `0 0 12px ${c}` : 'none'
            }} />
          ))}
        </div>
      </TwRow>

      <TwRow label={`VELOCIDAD GLITCH: ${(tweaks.rotateInterval / 1000).toFixed(1)}s`}>
        <input type="range" min="2000" max="8000" step="500"
          value={tweaks.rotateInterval}
          onChange={(e) => setTweak('rotateInterval', parseInt(e.target.value))}
          style={{ width: '100%', accentColor: tweaks.accent }} />
      </TwRow>

      <TwToggle label="TERMINAL EN HERO" v={tweaks.showTerminal} on={() => setTweak('showTerminal', !tweaks.showTerminal)} accent={tweaks.accent} />
      <TwToggle label="PARTÍCULAS HERO" v={tweaks.showParticles} on={() => setTweak('showParticles', !tweaks.showParticles)} accent={tweaks.accent} />
      <TwToggle label="MAGNETIC HOVER" v={tweaks.magneticHover} on={() => setTweak('magneticHover', !tweaks.magneticHover)} accent={tweaks.accent} />
      <TwToggle label="CURSOR CUSTOM" v={tweaks.customCursor} on={() => setTweak('customCursor', !tweaks.customCursor)} accent={tweaks.accent} />
    </div>
  );
}

function TwRow({ label, children }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ fontSize: 9, letterSpacing: '0.2em', color: 'rgba(231,236,255,0.5)', marginBottom: 8 }}>{label}</div>
      {children}
    </div>
  );
}
function TwToggle({ label, v, on, accent }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
      <span style={{ fontSize: 10, letterSpacing: '0.15em', color: 'rgba(231,236,255,0.7)' }}>{label}</span>
      <button onClick={on} style={{
        width: 36, height: 18, padding: 2, background: v ? accent : 'rgba(120,140,210,0.22)',
        border: 'none', cursor: 'pointer', position: 'relative', transition: 'background .25s'
      }}>
        <span style={{
          display: 'block', width: 14, height: 14, background: '#fff',
          transform: v ? 'translateX(18px)' : 'translateX(0)',
          transition: 'transform .25s'
        }} />
      </button>
    </div>
  );
}

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