// v68 — Neon Club / Y2K Rave — FULL REWRITE con efectos de club
const V68Rave = ({ data, lang, setLang = () => {} }) => {
  const { useState, useEffect, useRef } = React;
  const t = (es, en) => lang === 'es' ? es : en;

  const [beat, setBeat] = useState(0);
  const [laserAngle, setLaserAngle] = useState(0);
  const [scanPos, setScanPos] = useState(0);

  useEffect(() => {
    // BPM = 128 (house music), one beat every ~469ms
    const bpm = setInterval(() => setBeat(b => (b + 1) % 4), 469);
    return () => clearInterval(bpm);
  }, []);

  useEffect(() => {
    let raf;
    let start = null;
    const tick = (ts) => {
      if (!start) start = ts;
      const elapsed = ts - start;
      setLaserAngle(Math.sin(elapsed * 0.0008) * 35);
      setScanPos((elapsed * 0.04) % 110 - 5);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const beatScale = beat === 0 ? 1.04 : beat === 2 ? 1.02 : 1;

  return (
    <div style={{ background: '#050505', color: '#fff', minHeight: '100vh', fontFamily: '"Arial Black", Arial, sans-serif', overflowX: 'hidden', position: 'relative' }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');

        /* Perspective grid floor */
        .rv-grid-floor {
          position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
        }
        .rv-grid-floor::after {
          content: '';
          position: absolute;
          bottom: 0; left: -50%; right: -50%; height: 60vh;
          background-image:
            linear-gradient(rgba(0,255,255,0.12) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0,255,255,0.12) 1px, transparent 1px);
          background-size: 60px 60px;
          transform: perspective(400px) rotateX(70deg);
          transform-origin: 50% 100%;
        }

        @keyframes rvFlicker {
          0%,19%,21%,23%,25%,54%,56%,100% { opacity: 1; }
          20%,24%,55% { opacity: 0.4; }
        }
        @keyframes rvGlow {
          0%,100% { text-shadow: 0 0 10px currentColor, 0 0 30px currentColor; }
          50% { text-shadow: 0 0 20px currentColor, 0 0 60px currentColor, 0 0 100px currentColor; }
        }
        @keyframes rvNeonBorder {
          0%,100% { box-shadow: 0 0 10px #FF00FF, inset 0 0 10px rgba(255,0,255,0.1); }
          50% { box-shadow: 0 0 30px #FF00FF, 0 0 60px #FF00FF, inset 0 0 20px rgba(255,0,255,0.2); }
        }
        @keyframes rvScanLine {
          from { top: -2px; }
          to { top: 100%; }
        }
        @keyframes rvMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        .rv-title {
          font-family: 'Black Ops One', 'Arial Black', sans-serif;
          text-transform: uppercase;
          letter-spacing: 1px;
        }

        .rv-flicker { animation: rvFlicker 5s linear infinite; }
        .rv-glow { animation: rvGlow 2s ease-in-out infinite; }
        .rv-neon-border { animation: rvNeonBorder 1.5s ease-in-out infinite; }

        .rv-card {
          border: 3px solid #FF00FF;
          padding: 36px;
          background: rgba(255,0,255,0.04);
          position: relative;
          overflow: hidden;
          animation: rvNeonBorder 2s ease-in-out infinite;
        }
        .rv-card::before {
          content: '';
          position: absolute;
          top: -2px; left: 0; right: 0; height: 2px;
          background: linear-gradient(90deg, transparent, #FF00FF, transparent);
          animation: rvScanLine 3s linear infinite;
        }

        .rv-btn {
          padding: 16px 36px; font-size: 18px; font-weight: 900;
          text-transform: uppercase; text-decoration: none; border: 3px solid;
          display: inline-block; cursor: pointer; transition: 0.15s;
          font-family: 'Black Ops One', sans-serif; letter-spacing: 2px;
        }
        .rv-btn:hover { transform: scale(1.05); }

        .rv-track-num {
          font-family: 'Black Ops One', monospace;
          font-size: 80px; position: absolute; bottom: -10px; right: 10px;
          opacity: 0.06; pointer-events: none;
        }
        .rv-marquee-track { display: flex; width: 200%; animation: rvMarquee 15s linear infinite; }
      `}</style>

      {/* Grid floor */}
      <div className="rv-grid-floor" />

      {/* Laser SVG */}
      <svg style={{ position: 'fixed', inset: 0, width: '100%', height: '100%', zIndex: 1, pointerEvents: 'none', opacity: 0.6 }} preserveAspectRatio="none">
        <defs>
          <filter id="rv-blur">
            <feGaussianBlur stdDeviation="3" />
          </filter>
        </defs>
        {/* Laser beams from top-center */}
        <line x1="50%" y1="0%" x2={`${50 + Math.sin(laserAngle * Math.PI / 180) * 80}%`} y2="100%"
          stroke="#FF00FF" strokeWidth="1.5" filter="url(#rv-blur)" opacity="0.7" />
        <line x1="50%" y1="0%" x2={`${50 - Math.sin(laserAngle * Math.PI / 180) * 80}%`} y2="100%"
          stroke="#00FFFF" strokeWidth="1.5" filter="url(#rv-blur)" opacity="0.7" />
        <line x1="50%" y1="0%" x2={`${50 + Math.sin((laserAngle + 30) * Math.PI / 180) * 60}%`} y2="100%"
          stroke="#8BFF00" strokeWidth="1" filter="url(#rv-blur)" opacity="0.5" />
        {/* Scan line */}
        <line x1="0" y1={`${scanPos}%`} x2="100%" y2={`${scanPos}%`}
          stroke="#00FFFF" strokeWidth="1" opacity="0.2" />
      </svg>

      {/* Lang toggle */}
      <div style={{ position: 'fixed', top: 24, right: 24, zIndex: 100 }}>
        <LangToggle lang={lang} setLang={setLang} theme="dark" />
      </div>

      {/* Hero */}
      <section style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center',
        alignItems: 'center', textAlign: 'center', padding: '80px 5vw 40px', position: 'relative', zIndex: 2 }}>

        {/* BPM indicator */}
        <div style={{ position: 'absolute', top: 24, left: 24, display: 'flex', gap: 6, alignItems: 'center' }}>
          {[0,1,2,3].map(i => (
            <div key={i} style={{
              width: 8, height: 8, borderRadius: '50%',
              background: beat === i ? '#8BFF00' : 'rgba(139,255,0,0.2)',
              boxShadow: beat === i ? '0 0 10px #8BFF00' : 'none',
              transition: 'all 0.05s'
            }} />
          ))}
          <span style={{ fontSize: 10, color: '#555', letterSpacing: 2, marginLeft: 8, fontFamily: 'monospace' }}>128 BPM</span>
        </div>

        <div className="rv-title rv-flicker" style={{ color: '#00FFFF', fontSize: 18, letterSpacing: 6, marginBottom: 24,
          textShadow: '0 0 10px #00FFFF, 0 0 30px #00FFFF' }}>
          {t('SISTEMA EN LÍNEA', 'SYSTEM ONLINE')} — {data.location.toUpperCase()}
        </div>

        <h1 className="rv-title" style={{
          fontSize: 'clamp(60px, 13vw, 220px)', color: '#8BFF00', margin: 0, lineHeight: 0.9,
          textShadow: '0 0 40px #8BFF00, 0 0 80px rgba(139,255,0,0.4)',
          transform: `scale(${beatScale})`,
          transition: 'transform 0.05s',
        }}>
          {data.name}
        </h1>

        <div className="rv-title rv-glow" style={{ fontSize: 'clamp(24px, 4vw, 56px)', color: '#FF00FF', marginTop: 16,
          lineHeight: 1 }}>
          {t(data.role_es, data.role_en)}
        </div>

        <p style={{ fontSize: 20, maxWidth: 700, margin: '32px auto 48px', lineHeight: 1.6, color: 'rgba(255,255,255,0.75)', fontFamily: 'Arial, sans-serif' }}>
          {t(data.tagline_es, data.tagline_en)}
        </p>

        <a href="#work" className="rv-btn" style={{
          background: '#8BFF00', color: '#000', borderColor: '#8BFF00',
          boxShadow: `0 0 20px #8BFF00, 0 0 40px rgba(139,255,0,0.4)`,
          transform: `scale(${beatScale})`, transition: 'transform 0.05s, box-shadow 0.15s',
        }}>ENTER CLUB</a>
      </section>

      {/* Marquee */}
      <div style={{ overflow: 'hidden', borderTop: '2px solid #8BFF00', borderBottom: '2px solid #8BFF00', padding: '12px 0', background: '#0a0a0a' }}>
        <div className="rv-marquee-track">
          {Array(12).fill(null).map((_, i) => (
            <span key={i} className="rv-title" style={{ fontSize: 18, whiteSpace: 'nowrap', paddingRight: 60,
              color: i % 3 === 0 ? '#8BFF00' : i % 3 === 1 ? '#FF00FF' : '#00FFFF',
              textShadow: `0 0 10px currentColor` }}>
              ◆ {data.name} ◆ WEB DEVELOPER ◆ FULL STACK ◆
            </span>
          ))}
        </div>
      </div>

      {/* About + Stack */}
      <section style={{ padding: '80px 5vw', position: 'relative', zIndex: 2, background: 'rgba(0,0,0,0.7)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 48, maxWidth: 1400, margin: '0 auto' }}>
          <div>
            <h2 className="rv-title rv-glow" style={{ fontSize: 60, color: '#00FFFF', margin: '0 0 28px' }}>ABOUT</h2>
            <div style={{ height: 2, background: 'linear-gradient(90deg, #00FFFF, transparent)', marginBottom: 24 }} />
            <p style={{ fontSize: 18, lineHeight: 1.7, fontFamily: 'Arial, sans-serif', color: 'rgba(255,255,255,0.85)' }}>
              {t(data.about_es[0], data.about_en[0])}
            </p>
          </div>
          <div>
            <h2 className="rv-title rv-glow" style={{ fontSize: 60, color: '#8BFF00', margin: '0 0 28px' }}>STACK</h2>
            <div style={{ height: 2, background: 'linear-gradient(90deg, #8BFF00, transparent)', marginBottom: 24 }} />
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
              {data.stack.flatMap(s => s.items).map((item, i) => {
                const colors = ['#8BFF00', '#FF00FF', '#00FFFF'];
                const c = colors[i % 3];
                return (
                  <span key={i} style={{
                    border: `2px solid ${c}`, color: c, padding: '10px 18px', fontSize: 14,
                    textTransform: 'uppercase', fontWeight: 700,
                    boxShadow: `0 0 10px ${c}40`,
                    fontFamily: 'monospace', letterSpacing: 1,
                    transition: 'all 0.15s',
                  }}
                    onMouseEnter={e => { e.currentTarget.style.background = c; e.currentTarget.style.color = '#000'; }}
                    onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = c; }}
                  >{item}</span>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* Projects */}
      <section id="work" style={{ padding: '80px 5vw', position: 'relative', zIndex: 2 }}>
        <h2 className="rv-title" style={{
          fontSize: 'clamp(60px, 9vw, 130px)', color: '#FF00FF', margin: '0 0 60px', textAlign: 'center',
          textShadow: '0 0 30px #FF00FF, 0 0 60px rgba(255,0,255,0.5)',
          transform: `scale(${beat === 0 ? 1.02 : 1})`, transition: 'transform 0.05s'
        }}>TRACKLIST</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: 40 }}>
          {data.projects.map((p, i) => (
            <div key={p.id} className="rv-card">
              <div className="rv-track-num">{String(i + 1).padStart(2, '0')}</div>
              <div style={{ color: '#00FFFF', fontSize: 16, marginBottom: 12, fontFamily: 'monospace', letterSpacing: 2 }}>
                {p.year} // {t(p.kind_es, p.kind_en)}
              </div>
              <h3 className="rv-title" style={{ fontSize: 40, margin: '0 0 16px', lineHeight: 1,
                color: '#fff', textShadow: '0 0 10px rgba(255,255,255,0.3)' }}>
                {t(p.name_es, p.name_en)}
              </h3>
              <p style={{ fontSize: 16, fontFamily: 'Arial, sans-serif', color: 'rgba(255,255,255,0.7)', marginBottom: 24, lineHeight: 1.6 }}>
                {t(p.short_es, p.short_en)}
              </p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {p.tags.map(tag => (
                  <span key={tag} style={{ background: '#FF00FF', color: '#000', padding: '5px 14px', fontWeight: 800, fontSize: 12, letterSpacing: 1 }}>
                    {tag}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Footer */}
      <footer style={{ padding: '100px 5vw', textAlign: 'center', position: 'relative', zIndex: 2, background: '#0a0000', borderTop: '3px solid #8BFF00' }}>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'linear-gradient(90deg, #8BFF00, #FF00FF, #00FFFF, #8BFF00)', backgroundSize: '200%', animation: 'rvScanLine 3s linear infinite' }} />
        <h2 className="rv-title" style={{
          fontSize: 'clamp(50px, 9vw, 160px)', color: '#00FFFF', margin: '0 0 48px',
          textShadow: '0 0 40px #00FFFF, 0 0 80px rgba(0,255,255,0.4)',
          transform: `scale(${beat === 0 ? 1.02 : 1})`, transition: 'transform 0.05s'
        }}>BOOKING</h2>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
          <a href={`mailto:${data.email}`} className="rv-btn" style={{ background: '#00FFFF', borderColor: '#00FFFF', color: '#000', boxShadow: '0 0 20px #00FFFF' }}>EMAIL</a>
          <a href={`https://linkedin.com/in/${data.linkedin}`} target="_blank" rel="noopener noreferrer" className="rv-btn" style={{ background: '#FF00FF', borderColor: '#FF00FF', color: '#000', boxShadow: '0 0 20px #FF00FF' }}>LINKEDIN</a>
        </div>
        <div style={{ marginTop: 80, fontSize: 12, color: '#333', letterSpacing: 4, fontFamily: 'monospace' }}>
          {data.location.toUpperCase()}
        </div>
      </footer>
    </div>
  );
};
window.V68Rave = V68Rave;