// nexa-sections.jsx — page sections

const WSP_URL = "https://wa.me/5492645527066?text=" + encodeURIComponent("Hola Nexa, quiero escalar mi negocio.");
const CAL_URL = "https://calendar.app.google/Y5LoMvK5aUE3Xx34A";
const IG_URL = "https://www.instagram.com/nexa.bg/";

// ---------- TopBanner (REMOVED) ----------
const TopBanner = () => null;

// ---------- Nav ----------
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: '14px 0',
      background: scrolled ? 'rgba(4,8,15,0.78)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'background .3s, border-color .3s, padding .3s',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
        <Logo markSize={36} wordSize={26} eb={10} trk={3.5} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }} className="nav-links">
          <a href="#servicios" className="nav-link">Servicios</a>
          <a href="#sistemas" className="nav-link">Sistemas</a>
          <a href="#proceso" className="nav-link">Proceso</a>
          <a href={CAL_URL} className="btn ghost" style={{ padding: '10px 18px', fontSize: 13.5 }}>
            <CalendarIcon size={14} /> Agendar
            <ArrowUR size={12} />
          </a>
        </div>
      </div>
    </nav>
  );
};

// ---------- Hero ----------
const Hero = () => {
  const heroRef = React.useRef(null);
  React.useEffect(() => {
    const el = heroRef.current; if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      el.style.setProperty('--mx', x.toFixed(3));
      el.style.setProperty('--my', y.toFixed(3));
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <section id="top" ref={heroRef} className="hero hero-centered" style={{
      position: 'relative',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      paddingTop: 160, paddingBottom: 80,
      overflow: 'hidden', textAlign: 'center',
      '--mx': 0, '--my': 0,
    }}>
      <div className="grid-bg" />
      {/* orbs */}
      <div className="orb" style={{ width: 520, height: 520, background: 'radial-gradient(circle, #4D7CFE 0%, transparent 60%)', top: '-10%', left: '-10%' }} />
      <div className="orb" style={{ width: 420, height: 420, background: 'radial-gradient(circle, #1F3A8A 0%, transparent 60%)', bottom: '-15%', right: '-5%', animationName: 'floatY2', animationDuration: '18s' }} />

      {/* parallax shapes removed — now handled globally by AmbientShapes */}

      <div className="container" style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div className="reveal in" style={{ marginBottom: 24 }}>
          <span className="eyebrow">Talleres Industriales</span>
        </div>

        <h1 className="display word-reveal hero-h1-centered" style={{ marginBottom: 20, maxWidth: '18ch', fontSize: 'clamp(38px, 6vw, 76px)', lineHeight: 1.05 }}>
          <span className="word" style={{ animationDelay: '0.05s' }}>Ayudamos</span>{' '}
          <span className="word" style={{ animationDelay: '0.10s' }}>a</span>{' '}
          <span className="word" style={{ animationDelay: '0.15s' }}>talleres</span>{' '}
          <span className="word" style={{ animationDelay: '0.20s' }}>industriales</span>{' '}
          <span className="word ital" style={{ animationDelay: '0.28s', fontStyle: 'italic', color: 'var(--fg-2)' }}>a</span>{' '}
          <span className="word ital" style={{ animationDelay: '0.32s', fontStyle: 'italic', color: 'var(--fg-2)' }}>conseguir</span>{' '}
          <span className="word accent" style={{ animationDelay: '0.40s', color: 'var(--accent-2)', fontStyle: 'italic' }}>más trabajos.</span>
        </h1>

        <p className="lead reveal in d2" style={{ marginBottom: 36, maxWidth: 540, fontSize: 'clamp(15px, 1.3vw, 17px)' }}>
          Sistemas comerciales que ordenan consultas y mejoran seguimientos.
        </p>

        <div className="reveal in d2 hero-video-inline" style={{ width: '100%', maxWidth: 820, marginBottom: 36 }}>
          <InlineShowreel />
        </div>

        <div className="reveal in d3" style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center' }}>
          <a href={CAL_URL} className="btn primary">
            <CalendarIcon size={15} /> Agendar diagnóstico
            <ArrowUR size={13} />
          </a>
          <a href={WSP_URL} target="_blank" rel="noopener" className="btn wsp">
            <span className="dot" />
            Hablar por WhatsApp
            <ArrowUR size={13} />
          </a>
        </div>
      </div>
    </section>
  );
};

const HeroStat = ({ k, v }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 180 }}>
    <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{k}</span>
    <span style={{ fontSize: 15, color: 'var(--fg)', fontWeight: 500 }}>{v}</span>
  </div>
);

const ParallaxShapes = () => {
  // mouse-driven floats, plus idle drift
  const Sh = ({ x, y, size, depth, children, rotate = 0, drift = 0 }) => (
    <div style={{
      position: 'absolute', left: x, top: y,
      width: size, height: size,
      transform: `translate(calc(var(--mx,0) * ${depth}px), calc(var(--my,0) * ${depth}px)) rotate(${rotate}deg)`,
      transition: 'transform .4s cubic-bezier(.2,.8,.2,1)',
      animation: `floatY ${10 + drift}s ease-in-out ${drift}s infinite`,
      pointerEvents: 'none', opacity: .9,
    }}>{children}</div>
  );
  return (
    <>
      <Sh x="78%" y="14%" size={120} depth={-30} rotate={12} drift={0}>
        <svg viewBox="0 0 64 64" width="120" height="120" fill="none" style={{ color: 'rgba(122,160,255,0.6)' }}>
          <circle cx="32" cy="32" r="29" stroke="currentColor" strokeWidth="1.2" fill="none"/>
          <path d="M 17 17 L 24.2 17 L 30.5 26.5 L 32 28.4 L 33.5 26.5 L 39.8 17 L 47 17 L 36.6 32 L 47 47 L 39.8 47 L 32 36 L 24.2 47 L 17 47 L 27.4 32 Z" fill="currentColor" opacity="0.18"/>
        </svg>
      </Sh>
      <Sh x="86%" y="64%" size={64} depth={20} rotate={0} drift={3}>
        <div style={{ width: 64, height: 64, borderRadius: 14, background: 'linear-gradient(135deg, rgba(77,124,254,0.5), rgba(77,124,254,0.05))', border: '1px solid rgba(122,160,255,0.3)' }} />
      </Sh>
      <Sh x="8%" y="68%" size={56} depth={-18} rotate={45} drift={5}>
        <div style={{ width: 56, height: 56, border: '1.2px solid rgba(245,247,250,0.25)', borderRadius: 8 }} />
      </Sh>
      <Sh x="60%" y="78%" size={28} depth={40} rotate={0} drift={2}>
        <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#7AA0FF', boxShadow: '0 0 24px #4D7CFE' }} />
      </Sh>
      <Sh x="14%" y="22%" size={28} depth={26} rotate={0} drift={4}>
        <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'rgba(245,247,250,0.7)' }} />
      </Sh>
      {/* dotted curve */}
      <svg width="320" height="280" viewBox="0 0 320 280" style={{ position: 'absolute', right: '4%', top: '38%', pointerEvents: 'none', opacity: 0.5, transform: 'translate(calc(var(--mx,0) * 10px), calc(var(--my,0) * 10px))' }}>
        <path d="M 0 200 Q 100 0, 320 80" stroke="rgba(122,160,255,0.7)" strokeWidth="1.2" strokeDasharray="2 6" fill="none"/>
      </svg>
    </>
  );
};

// ---------- Inline Showreel — YouTube embed con UI premium ----------
const YT_ID = "opUi7GWvUOA";

const InlineShowreel = () => {
  const [activated, setActivated] = React.useState(false);
  const iframeRef = React.useRef(null);

  const activateSound = (e) => {
    e && e.stopPropagation();
    // Recargamos el iframe sin mute al hacer click
    setActivated(true);
  };

  return (
    <div onClick={!activated ? activateSound : undefined} style={{
      position: 'relative', borderRadius: 24, overflow: 'hidden',
      aspectRatio: '16/9',
      background: '#04080F',
      border: '1px solid var(--border-2)',
      boxShadow: '0 40px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(122,160,255,0.08) inset, 0 0 80px rgba(77,124,254,0.15)',
      cursor: !activated ? 'pointer' : 'default',
    }}>
      <iframe
        ref={iframeRef}
        src={activated
          ? `https://www.youtube-nocookie.com/embed/${YT_ID}?autoplay=1&mute=0&controls=1&rel=0&modestbranding=1&playsinline=1&iv_load_policy=3&fs=1`
          : `https://www.youtube-nocookie.com/embed/${YT_ID}?autoplay=1&mute=1&loop=1&playlist=${YT_ID}&controls=0&rel=0&modestbranding=1&playsinline=1&iv_load_policy=3&disablekb=1`
        }
        title="Nexa — Sistema Comercial"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
      />

      {/* Overlay solo cuando está muteado — bloquea clicks al iframe */}
      {!activated && (
        <>
          {/* Click-blocker transparente sobre el iframe */}
          <div style={{ position: 'absolute', inset: 0, zIndex: 2, background: 'transparent' }} />

          {/* Top gradient */}
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 80, pointerEvents: 'none', zIndex: 3, background: 'linear-gradient(180deg, rgba(4,8,15,0.6) 0%, transparent 100%)' }} />

          {/* LIVE badge */}
          <div style={{ position: 'absolute', top: 16, left: 16, zIndex: 4, display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg)', textShadow: '0 1px 8px rgba(0,0,0,0.5)' }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#FF4444', boxShadow: '0 0 12px #FF4444', animation: 'pulse 1.6s ease-in-out infinite' }} />
            Reproduciendo
          </div>

          {/* Sound button top right */}
          <button onClick={activateSound} style={{
            position: 'absolute', top: 14, right: 14, zIndex: 5,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 14px', borderRadius: 999,
            background: 'rgba(255,255,255,0.96)', color: 'var(--bg)',
            border: 'none', cursor: 'pointer',
            fontFamily: 'var(--sans)', fontSize: 12.5, fontWeight: 500, lineHeight: 1,
            boxShadow: '0 6px 20px rgba(0,0,0,0.4)',
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" fill="currentColor"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
            Activar sonido
          </button>

          {/* Big tap-to-unmute cue */}
          <div onClick={activateSound} style={{
            position: 'absolute', inset: 0, zIndex: 4,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14,
            background: 'rgba(4,8,15,0.18)',
            animation: 'msgIn .6s cubic-bezier(0.16,1,0.3,1) .8s both',
            cursor: 'pointer',
          }}>
            <div style={{
              width: 84, height: 84, borderRadius: '50%',
              background: 'rgba(255,255,255,0.98)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--bg)',
              boxShadow: '0 16px 50px rgba(77,124,254,0.45), 0 0 0 8px rgba(255,255,255,0.08)',
              animation: 'pulse 2s ease-in-out infinite',
            }}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" fill="currentColor"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
            </div>
            <div style={{ fontFamily: 'var(--serif-display)', fontStyle: 'italic', fontSize: 'clamp(18px, 2.4vw, 26px)', color: 'var(--fg)', textShadow: '0 2px 12px rgba(0,0,0,0.5)' }}>
              Tocá para activar sonido
            </div>
          </div>
        </>
      )}
    </div>
  );
};

// ---------- Marquee ----------
const Marquee = () => {
  const items = [
    "Más presupuestos",
    "Más seguimiento",
    "Más cierres",
    "Pipeline comercial",
    "WhatsApp ordenado",
    "Métricas reales",
    "Menos caos operativo",
    "Sistema Comercial Industrial",
  ];
  const Item = ({ t }) => (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 16, fontFamily: 'var(--serif-display)', fontSize: 'clamp(28px, 4vw, 56px)', color: 'var(--fg-2)', whiteSpace: 'nowrap' }}>
      <span style={{ fontStyle: 'italic' }}>{t}</span>
      <SparkleIcon size={20} />
    </span>
  );
  return (
    <div style={{ padding: '60px 0', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="marquee">
        <div className="marquee-track">
          {[...items, ...items].map((t, i) => <Item key={i} t={t} />)}
        </div>
      </div>
    </div>
  );
};

// ---------- Video / Showreel ----------
const Showreel = () => {
  const [playing, setPlaying] = React.useState(false);
  return (
    <section className="section showreel-section" style={{ position: 'relative', paddingTop: 32, paddingBottom: 80 }}>
      <div className="container">
        <div className="reveal d1 showreel-wrap" style={{
          position: 'relative', borderRadius: 28, overflow: 'hidden',
          aspectRatio: '16/9', background: 'linear-gradient(135deg, #0B121F, #1a2540)',
          border: '1px solid var(--border-2)',
          boxShadow: '0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset',
          cursor: playing ? 'default' : 'pointer',
        }} onClick={() => !playing && setPlaying(true)}>
          {!playing ? (
            <>
              {/* Decorative bg */}
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 30% 40%, rgba(77,124,254,0.25), transparent 60%)' }} />
              <div className="grid-bg" style={{ opacity: 0.4 }} />
              {/* Center play */}
              <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 24 }}>
                <div style={{
                  width: 96, height: 96, borderRadius: '50%',
                  background: 'rgba(255,255,255,0.96)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--bg)',
                  boxShadow: '0 20px 60px rgba(77,124,254,0.4)',
                  transition: 'transform .4s cubic-bezier(.2,.8,.2,1)',
                }} className="play-button">
                  <PlayIcon size={32} />
                </div>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontFamily: 'var(--serif-display)', fontStyle: 'italic', fontSize: 'clamp(20px, 2.4vw, 28px)', color: 'var(--fg)' }}>
                    "Cómo escalamos negocios con IA"
                  </div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-3)', marginTop: 10 }}>
                    2:34 · Conocé a Nexa
                  </div>
                </div>
              </div>
              {/* Corner labels */}
              <div style={{ position: 'absolute', top: 24, left: 24, display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-2)' }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#FF4444', boxShadow: '0 0 10px #FF4444' }} />
                Showreel
              </div>
              <div className="showreel-play-label" style={{ position: 'absolute', bottom: 24, right: 24, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>
                Reproducir →
              </div>
            </>
          ) : (
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 14, padding: 40, textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>Pendiente</div>
              <div style={{ fontFamily: 'var(--serif-display)', fontStyle: 'italic', fontSize: 'clamp(22px, 2.6vw, 32px)', color: 'var(--fg)' }}>
                Subí tu video o pasame el link <br/>(YouTube / Vimeo / Loom).
              </div>
              <div style={{ fontSize: 14, color: 'var(--fg-2)', maxWidth: 480 }}>
                Lo embebo acá, autoplay opcional, con tu intro contando cómo Nexa ayuda a escalar negocios apoyándose en IA y sistemas a medida.
              </div>
              <button onClick={(e) => { e.stopPropagation(); setPlaying(false); }} className="btn ghost" style={{ marginTop: 8, padding: '10px 18px', fontSize: 13 }}>Volver</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

// ---------- Servicios ----------
const Servicios = () => {
  const items = [
    { ic: <ChatIcon size={28}/>,   t: "Seguimiento automático", d: "Ningún presupuesto queda olvidado." },
    { ic: <WspIcon size={28}/>,    t: "WhatsApp ordenado",     d: "Todas las conversaciones, en un solo lugar." },
    { ic: <GearIcon size={28}/>,   t: "Pipeline comercial",    d: "Sabés qué oportunidades están por cerrar." },
    { ic: <GrowthIcon size={28}/>, t: "Menos dependencia",     d: "El sistema ordena el día del taller." },
    { ic: <GlobeIcon size={28}/>,  t: "Control real",          d: "Consultas, presupuestos y cierres medidos." },
    { ic: <BoltIcon size={28}/>,   t: "Reactivación",          d: "Recuperamos oportunidades que quedaron frías." },
  ];
  return (
    <section id="servicios" className="section" style={{ background: 'var(--bg-2)', position: 'relative' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 80, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 16 }}>
          <div style={{ maxWidth: 720 }}>
            <span className="eyebrow">03 · Resultado</span>
            <h2 className="h2" style={{ marginTop: 22 }}>
              Menos presupuestos perdidos. <br/>
              <span style={{ fontStyle: 'italic', color: 'var(--accent-2)' }}>Más trabajos cerrados.</span>
            </h2>
          </div>
        </div>

        <div className="services-grid">
          {items.map((it, i) => (
            <div key={i} className="card reveal" style={{ animationDelay: `${i*60}ms`, transitionDelay: `${i*60}ms` }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 28 }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: 'rgba(77,124,254,0.12)', border: '1px solid rgba(122,160,255,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent-2)' }}>
                  {it.ic}
                </div>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', color: 'var(--fg-3)' }}>0{i+1}</span>
              </div>
              <h3 className="h3" style={{ marginBottom: 10 }}>{it.t}</h3>
              <p className="body" style={{ color: 'var(--fg-2)' }}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { TopBanner, Nav, Hero, Marquee, Showreel, Servicios, WSP_URL, CAL_URL, IG_URL });
