// hero-v2.jsx — variante de HERO con mockups reales en lugar del "#1".
// Sólo lo carga "Eurekant Website hero.html".

function injectHeroRealStyles() {
  if (document.getElementById('hero-real-styles')) return;
  const s = document.createElement('style');
  s.id = 'hero-real-styles';
  s.textContent = `
    @property --hrBorderAngle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
    @keyframes hrBorderRotate { to { --hrBorderAngle: 360deg; } }
    @keyframes hrBtnShimmer {
      0%, 75%  { background-position: 200% center; opacity: 0; }
      80%      { opacity: 1; }
      95%, 100%{ background-position: -100% center; opacity: 0; }
    }
    @keyframes hrBtnArrow { 0%, 60%, 100% { transform: translateX(0); } 80% { transform: translateX(5px); } }
    @keyframes hrFloatA { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-0.4deg); } }
    @keyframes hrFloatB { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(0.6deg); } }
    @keyframes hrDeviceIn { from { opacity: 0; transform: translateY(60px) scale(.9); } to { opacity: 1; transform: none; } }
    .hr-cta-wrap {
      position: relative; display: inline-block; border-radius: 14px; padding: 2px;
      background: conic-gradient(from var(--hrBorderAngle),
        transparent 0%, #2199ea 12%, #63b7f0 22%, #137dc5 32%, transparent 44%, transparent 100%);
      animation: hrBorderRotate 2.5s linear infinite;
      transition: transform 0.3s cubic-bezier(.2,.8,.3,1);
    }
    .hr-cta-wrap:hover { transform: scale(1.04); }
    .hr-cta-inner {
      position: relative; overflow: hidden;
      padding: 20px 36px; background: linear-gradient(135deg, #2199ea 20%, #137dc5); color: #fff;
      border: none; border-radius: 12px;
      font-family: var(--font-heading); font-size: 15px; font-weight: 500;
      letter-spacing: 0.02em; cursor: pointer; display: flex; align-items: center; gap: 8px;
    }
    .hr-cta-inner::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
      background-size: 200% 100%; animation: hrBtnShimmer 9s ease-in-out infinite; pointer-events: none;
    }
    .hr-cta-arrow { display: inline-block; animation: hrBtnArrow 3s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) {
      .hr-cta-wrap, .hr-device { animation: none !important; }
    }
  `;
  document.head.appendChild(s);
}

// Cluster de dispositivos reales — laptop Tasty al fondo + phone Comunidad Cima adelante
function HeroMockups({ mouse }) {
  const F = window.F;
  const px = (mouse.x - 0.5) * 30;
  const py = (mouse.y - 0.5) * 30;
  return (
    <div style={{ position: 'relative', width: '100%', minHeight: 480, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      {/* glow */}
      <div style={{
        position: 'absolute', width: '80%', height: '70%', borderRadius: '50%',
        background: `radial-gradient(circle, ${F.accentGlow}, transparent 70%)`,
        filter: 'blur(70px)', opacity: 0.75
      }} />
      {/* laptop Tasty */}
      <div style={{
        position: 'relative', width: '96%', maxWidth: 620,
        transform: `translate3d(${px * 0.4}px, ${py * 0.4}px, 0)`,
        animation: 'hrDeviceIn 1s cubic-bezier(.16,.84,.3,1) 900ms backwards'
      }}>
        <img className="hr-device" src="assets/product-tasty-control.png" alt="Tasty Control"
          style={{
            width: '100%', height: 'auto', display: 'block',
            filter: 'drop-shadow(0 40px 70px rgba(0,0,0,0.6))',
            animation: 'hrFloatA 8s ease-in-out infinite'
          }} />
      </div>
      {/* phone Comunidad Cima — al frente, abajo izquierda */}
      <div style={{
        position: 'absolute', left: '2%', bottom: '2%', width: '30%', maxWidth: 165, zIndex: 3,
        transform: `translate3d(${px * 0.9}px, ${py * 0.9}px, 0)`,
        animation: 'hrDeviceIn 1s cubic-bezier(.16,.84,.3,1) 1200ms backwards'
      }}>
        <img className="hr-device" src="assets/product-comunidad-cima.png" alt="Comunidad Cima"
          style={{
            width: '100%', height: 'auto', display: 'block',
            filter: 'drop-shadow(0 30px 50px rgba(0,0,0,0.65))',
            animation: 'hrFloatB 7s ease-in-out infinite 0.6s'
          }} />
      </div>
      {/* chip flotante */}
      <div style={{
        position: 'absolute', top: '6%', right: '4%', zIndex: 4,
        padding: '8px 16px', borderRadius: 999,
        background: 'rgba(10,14,28,0.75)', border: `1px solid ${F.accent}`, backdropFilter: 'blur(8px)',
        fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, color: F.accent,
        letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 8,
        animation: 'hrDeviceIn 1s cubic-bezier(.16,.84,.3,1) 1500ms backwards'
      }}>
        <span style={{ width: 7, height: 7, borderRadius: '50%', background: F.ok, boxShadow: `0 0 10px ${F.ok}` }} />
        En producción
      </div>
    </div>
  );
}

function FHeroReal({ content }) {
  const F = window.F;
  const tweaks = React.useContext(window.TweaksCtx) || {};
  const heroRef = React.useRef(null);
  const canvasRef = React.useRef(null);
  const progress = useScrollProgress(heroRef);
  const [mouse, setMouse] = React.useState({ x: 0.5, y: 0.5 });
  const rotatingWords = React.useMemo(
    () => content.hero.rotating || [content.hero.title[0]],
    [content.hero.rotating, content.hero.title]
  );

  React.useEffect(() => { injectHeroRealStyles(); }, []);

  // Particle network (igual que el hero original)
  React.useEffect(() => {
    const c = canvasRef.current;
    if (!c) return;
    const ctx = c.getContext('2d');
    let w, h, raf;
    const dpr = Math.min(2, window.devicePixelRatio || 1);
    const resize = () => {
      const r = c.getBoundingClientRect();
      w = r.width; h = r.height;
      c.width = w * dpr; c.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(c);
    const N = 48;
    const pts = Array.from({ length: N }, () => ({
      x: Math.random() * w, y: Math.random() * h,
      vx: (Math.random() - 0.5) * 0.3, vy: (Math.random() - 0.5) * 0.3,
      r: 0.8 + Math.random() * 1.6
    }));
    const loop = () => {
      ctx.clearRect(0, 0, w, h);
      ctx.strokeStyle = 'rgba(120,140,210,0.06)';
      ctx.lineWidth = 1;
      for (let x = 0; x < w; x += 60) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke(); }
      for (let y = 0; y < h; y += 60) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke(); }
      for (const p of pts) {
        p.x += p.vx; p.y += p.vy;
        if (p.x < 0 || p.x > w) p.vx *= -1;
        if (p.y < 0 || p.y > h) p.vy *= -1;
      }
      for (let i = 0; i < pts.length; i++) {
        for (let j = i + 1; j < pts.length; j++) {
          const dx = pts[i].x - pts[j].x, dy = pts[i].y - pts[j].y;
          const d = Math.hypot(dx, dy);
          if (d < 170) {
            ctx.strokeStyle = `rgba(33,153,234,${(1 - d / 170) * 0.4})`;
            ctx.lineWidth = 0.7;
            ctx.beginPath(); ctx.moveTo(pts[i].x, pts[i].y); ctx.lineTo(pts[j].x, pts[j].y); ctx.stroke();
          }
        }
      }
      for (const p of pts) {
        ctx.fillStyle = F.accent;
        ctx.shadowColor = F.accent; ctx.shadowBlur = 14;
        ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill();
      }
      ctx.shadowBlur = 0;
      raf = requestAnimationFrame(loop);
    };
    loop();
    return () => { cancelAnimationFrame(raf); ro.disconnect(); };
  }, []);

  React.useEffect(() => {
    const onMove = (e) => {
      const el = heroRef.current; if (!el) return;
      const r = el.getBoundingClientRect();
      setMouse({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height });
    };
    const el = heroRef.current; if (!el) return;
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);

  const px = (mouse.x - 0.5) * 24;
  const py = (mouse.y - 0.5) * 24;

  return (
    <section ref={heroRef} style={{
      position: 'relative', padding: '180px 80px 120px', overflow: 'hidden', minHeight: '100vh',
      background: `
        radial-gradient(ellipse at ${mouse.x * 100}% ${mouse.y * 100}%, ${F.accentGlow} 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(19,125,197,0.18) 0%, transparent 55%),
        ${F.bg}`,
      transition: 'background 0.4s'
    }}>
      <canvas ref={canvasRef} style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        opacity: tweaks.showParticles === false ? 0 : 0.7,
        transform: `translate3d(${-px * 0.5}px, ${-py * 0.5 - progress * 80}px, 0)`,
        transition: 'transform .3s ease-out, opacity .5s'
      }} />
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: `linear-gradient(${F.line} 1px, transparent 1px), linear-gradient(90deg, ${F.line} 1px, transparent 1px)`,
        backgroundSize: '120px 120px',
        transform: `translate3d(${px}px, ${py - progress * 120}px, 0)`, opacity: 0.6
      }} />

      <div style={{
        position: 'relative', maxWidth: 1280, margin: '0 auto', paddingTop: 20,
        display: 'grid', gridTemplateColumns: '1.02fr 0.98fr', gap: 56, alignItems: 'center'
      }}>
        {/* Columna izquierda — copy */}
        <div>
          <div style={{
            color: F.accent, fontSize: 12, letterSpacing: '0.2em',
            marginBottom: 40, display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'var(--font-mono)'
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%', background: F.accent,
              boxShadow: `0 0 14px ${F.accent}`, animation: 'finalPulse 2s infinite'
            }} />
            <RevealWords text={content.hero.eyebrow} stagger={40} delay={300} />
          </div>

          <h1 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 500,
            fontSize: 'clamp(48px, 5.4vw, 92px)', lineHeight: 0.95, margin: 0, color: F.text,
            letterSpacing: '-0.03em',
            transform: `translate3d(${px * -0.25}px, ${py * -0.2 - progress * 40}px, 0)`,
            transition: 'transform .4s cubic-bezier(.2,.7,.3,1)'
          }}>
            <div style={{ overflow: 'hidden', paddingBottom: 8, whiteSpace: 'nowrap' }}>
              <GlitchWord words={rotatingWords} interval={tweaks.rotateInterval || 3500} scrambleMs={700} />
              <span style={{ display: 'inline-block', marginLeft: '0.25em' }}>
                <RevealText text={content.hero.titleRest || 'que'} stagger={35} delay={600} />
              </span>
            </div>
            <div style={{ overflow: 'hidden', paddingBottom: 8 }}>
              <RevealText text={content.hero.title[1]} stagger={35} delay={1000} gradient />
            </div>
          </h1>

          <p style={{
            color: F.textDim, fontSize: 20, lineHeight: 1.5, maxWidth: 560, marginTop: 36, fontWeight: 300,
            opacity: 0, animation: 'finalFadeUp 1s cubic-bezier(.16,.84,.3,1) 1800ms forwards'
          }}>{content.hero.sub}</p>

          <div style={{
            display: 'flex', gap: 16, marginTop: 44, flexWrap: 'wrap',
            opacity: 0, animation: 'finalFadeUp 1s cubic-bezier(.16,.84,.3,1) 2100ms forwards'
          }}>
            <Magnetic strength={0.3}>
              <div className="hr-cta-wrap">
                <button className="hr-cta-inner" onClick={() => { window.location.href = 'agendar'; }}>
                  {content.hero.cta1} <span className="hr-cta-arrow">→</span>
                </button>
              </div>
            </Magnetic>
            <Magnetic strength={0.2}>
              <button style={{
                padding: '20px 36px', background: 'transparent', color: F.text,
                border: `1px solid ${F.lineStrong}`, borderRadius: 12,
                fontFamily: 'var(--font-heading)', fontSize: 15, fontWeight: 500, cursor: 'pointer'
              }} onClick={() => { const el = document.getElementById('proceso'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); }}>{content.hero.cta2}</button>
            </Magnetic>
          </div>

          {tweaks.showTerminal !== false && <FTerminalBar text={content.hero.meta} />}
        </div>

        {/* Columna derecha — mockups reales */}
        <Parallax speed={0.25}>
          <HeroMockups mouse={mouse} />
        </Parallax>
      </div>

      <div style={{
        position: 'absolute', bottom: 40, left: '50%', transform: 'translateX(-50%)',
        opacity: 0, animation: 'finalFadeUp 1s 2400ms forwards',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12
      }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: F.textMute, letterSpacing: '0.25em' }}>SCROLL</div>
        <div style={{ width: 1, height: 48, background: `linear-gradient(180deg, ${F.accent}, transparent)`, animation: 'finalFloat 2s ease-in-out infinite' }} />
      </div>
    </section>
  );
}

Object.assign(window, { FHeroReal, HeroMockups });