// v65 — Acid Graphics (Cyberdelic) — FULL REWRITE
const V65Acid = ({ data, lang, setLang = () => {} }) => {
  const { useState, useEffect, useRef } = React;
  const t = (es, en) => lang === 'es' ? es : en;

  const [hue, setHue] = useState(0);
  const [glitch, setGlitch] = useState(false);
  const rafRef = useRef(null);
  const hueRef = useRef(0);

  useEffect(() => {
    let last = 0;
    const tick = (ts) => {
      if (ts - last > 16) {
        hueRef.current = (hueRef.current + 0.4) % 360;
        setHue(Math.round(hueRef.current));
        last = ts;
      }
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafRef.current);
  }, []);

  useEffect(() => {
    const id = setInterval(() => {
      setGlitch(true);
      setTimeout(() => setGlitch(false), 200);
    }, 3000);
    return () => clearInterval(id);
  }, []);

  const cycle = (offset = 0) => `hsl(${(hue + offset) % 360}, 100%, 50%)`;

  return (
    <div style={{ background: '#000', color: '#fff', minHeight: '100vh', fontFamily: '"Space Grotesk", "Helvetica Neue", sans-serif', overflowX: 'hidden', position: 'relative' }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Syne:wght@800&family=Space+Grotesk:wght@400;700&display=swap');

        /* SVG noise overlay */
        .ac-noise {
          position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04;
          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          background-size: 200px;
        }
        .ac-title { font-family: 'Syne', sans-serif; text-transform: uppercase; font-weight: 800; }

        @keyframes acScan {
          0% { transform: translateY(-100%); }
          100% { transform: translateY(100vh); }
        }
        .ac-scanline {
          position: fixed; left: 0; right: 0; height: 3px; z-index: 2; pointer-events: none;
          background: rgba(204,255,0,0.15);
          animation: acScan 4s linear infinite;
        }

        @keyframes acMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .ac-marquee-track { display: flex; width: 200%; animation: acMarquee 12s linear infinite; }

        @keyframes acBorderPulse {
          0%,100% { box-shadow: 4px 4px 0 #ccff00; }
          50% { box-shadow: 4px 4px 0 #ff0099, -4px -4px 0 #00ffff; }
        }
        .ac-card {
          border: 3px solid #ccff00; padding: 36px; background: rgba(204,255,0,0.03);
          transition: 0.15s; position: relative; overflow: hidden;
        }
        .ac-card::before {
          content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
          background: linear-gradient(90deg, transparent, rgba(204,255,0,0.07), transparent);
          transition: 0.5s;
        }
        .ac-card:hover::before { left: 150%; }
        .ac-card:hover { border-color: #ff0099; animation: acBorderPulse 0.5s ease infinite; }

        @keyframes acChromaticShift {
          0%   { text-shadow: -3px 0 #ff0099, 3px 0 #00ffff; }
          25%  { text-shadow: 3px -2px #ff0099, -3px 2px #ccff00; }
          50%  { text-shadow: -4px 2px #00ffff, 4px -2px #ff0099; }
          75%  { text-shadow: 2px 3px #ccff00, -2px -3px #00ffff; }
          100% { text-shadow: -3px 0 #ff0099, 3px 0 #00ffff; }
        }
        .ac-glitch-text { animation: acChromaticShift 0.1s steps(1) infinite; }

        @keyframes acTagSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .ac-spinner { animation: acTagSpin 8s linear infinite; display: inline-block; }

        .ac-btn {
          background: transparent; color: #ccff00; border: 3px solid #ccff00;
          padding: 18px 40px; font-size: 18px; font-weight: 800; text-transform: uppercase;
          cursor: pointer; transition: 0.15s; text-decoration: none; display: inline-block;
          font-family: 'Syne', sans-serif; letter-spacing: 2px; position: relative;
        }
        .ac-btn::after {
          content: ''; position: absolute; inset: 3px; border: 1px solid rgba(204,255,0,0.2);
        }
        .ac-btn:hover {
          background: #ff0099; color: #000; border-color: #ff0099;
          box-shadow: 8px 8px 0 #ccff00, -2px -2px 0 #00ffff;
          transform: translate(-4px, -4px);
        }
        .ac-tag { border: 2px solid; padding: '5px 12px'; font-size: 12px; font-weight: 700; letter-spacing: 1px; }

        @keyframes acFloat {
          0%,100% { transform: translateY(0) rotate(0deg); }
          33% { transform: translateY(-20px) rotate(3deg); }
          66% { transform: translateY(10px) rotate(-2deg); }
        }
        .ac-deco { position: absolute; pointer-events: none; animation: acFloat 6s ease-in-out infinite; }
      `}</style>

      {/* Texture overlays */}
      <div className="ac-noise" />
      <div className="ac-scanline" />

      {/* Animated color background strips */}
      <div style={{ position: 'fixed', inset: 0, zIndex: 0, overflow: 'hidden', pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '33vh', background: `hsl(${hue}, 100%, 3%)`, transition: 'background 0.1s' }} />
        <div style={{ position: 'absolute', top: '33vh', left: 0, right: 0, height: '33vh', background: `hsl(${(hue + 120) % 360}, 100%, 2%)`, transition: 'background 0.1s' }} />
        <div style={{ position: 'absolute', top: '66vh', left: 0, right: 0, height: '34vh', background: `hsl(${(hue + 240) % 360}, 100%, 3%)`, transition: 'background 0.1s' }} />
      </div>

      <div style={{ position: 'relative', zIndex: 3 }}>
        {/* Marquee top */}
        <div style={{ overflow: 'hidden', borderBottom: `4px solid ${cycle()}`, background: '#ccff00', color: '#000', padding: '12px 0' }}>
          <div className="ac-marquee-track">
            {Array(16).fill(null).map((_, i) => (
              <span key={i} className="ac-title" style={{ fontSize: 20, whiteSpace: 'nowrap', paddingRight: 40, letterSpacing: 3 }}>
                ⚠ {data.name} // ACID ⚠ WEB3 ⚠ CYBERDELIC ⚠
              </span>
            ))}
          </div>
        </div>

        {/* Hero */}
        <section style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 5vw', position: 'relative' }}>
          {/* Decorative symbols */}
          <div className="ac-deco" style={{ top: '10%', right: '5%', fontSize: 120, color: cycle(60), opacity: 0.15, filter: 'blur(2px)', animationDelay: '0s' }}>⬡</div>
          <div className="ac-deco" style={{ bottom: '10%', left: '3%', fontSize: 180, color: cycle(180), opacity: 0.1, filter: 'blur(3px)', animationDelay: '-2s' }}>◈</div>
          <div className="ac-deco" style={{ top: '40%', right: '15%', fontSize: 60, color: cycle(300), opacity: 0.2, animationDelay: '-4s' }}>⬟</div>

          <div style={{ fontSize: 14, letterSpacing: 8, textTransform: 'uppercase', color: cycle(), marginBottom: 20, fontWeight: 700 }}>
            {data.location} — ACID EDITION
          </div>

          <h1 className={`ac-title ${glitch ? 'ac-glitch-text' : ''}`}
            style={{ fontSize: 'clamp(70px, 14vw, 200px)', lineHeight: 0.9, margin: '0 0 30px', color: '#ccff00',
              textShadow: glitch ? undefined : `-4px 0 ${cycle(180)}, 4px 0 ${cycle(300)}` }}>
            {data.name.split(' ')[0]}<br/>
            <span style={{ color: cycle(60), WebkitTextStroke: '1px #ccff00' }}>{data.name.split(' ').slice(1).join(' ')}</span>
          </h1>

          <div style={{ display: 'inline-block', marginBottom: 30 }}>
            <div className="ac-title" style={{ fontSize: 'clamp(20px, 3vw, 36px)', border: `3px solid ${cycle()}`,
              padding: '10px 24px', color: '#fff', transform: 'rotate(-1deg)', display: 'inline-block', background: 'rgba(0,0,0,0.8)' }}>
              {t(data.role_es, data.role_en).toUpperCase()}
            </div>
          </div>

          <p style={{ fontSize: 18, maxWidth: 600, lineHeight: 1.7, color: 'rgba(255,255,255,0.7)', marginBottom: 50 }}>
            {t(data.tagline_es, data.tagline_en)}
          </p>

          <div style={{ display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href={`mailto:${data.email}`} className="ac-btn">{t('CONTACTAR', 'CONTACT')}</a>
            <LangToggle lang={lang} setLang={setLang} theme="dark" />
          </div>
        </section>

        {/* Two-column grid */}
        <section style={{ padding: '80px 5vw', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: 40, maxWidth: 1600, margin: '0 auto' }}>
          <div className="ac-card">
            <h2 className="ac-title" style={{ fontSize: 48, color: '#ff0099', marginBottom: 20,
              textShadow: `-2px 0 ${cycle()}, 2px 0 ${cycle(180)}` }}>
              {t('SOBRE MÍ', 'ABOUT ME')}
            </h2>
            <div style={{ height: 3, background: `linear-gradient(90deg, #ccff00, #ff0099, ${cycle()})`, marginBottom: 24 }} />
            {(lang === 'es' ? data.about_es : data.about_en).slice(0, 2).map((p, i) => (
              <p key={i} style={{ fontSize: 17, lineHeight: 1.7, color: 'rgba(255,255,255,0.85)', marginBottom: 12 }}>{p}</p>
            ))}
          </div>

          <div className="ac-card">
            <h2 className="ac-title" style={{ fontSize: 48, color: '#ccff00', marginBottom: 20,
              textShadow: `-2px 0 ${cycle(120)}, 2px 0 ${cycle(240)}` }}>
              STACK
            </h2>
            <div style={{ height: 3, background: `linear-gradient(90deg, #ff0099, #ccff00, ${cycle(90)})`, marginBottom: 24 }} />
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              {data.stack.flatMap(s => s.items).map((item, i) => (
                <span key={i} style={{
                  background: i % 3 === 0 ? '#ccff00' : i % 3 === 1 ? '#ff0099' : cycle(i * 40),
                  color: '#000', padding: '8px 16px', fontSize: 14, fontWeight: 800,
                  textTransform: 'uppercase', letterSpacing: 1, fontFamily: '"Syne", sans-serif'
                }}>{item}</span>
              ))}
            </div>
          </div>
        </section>

        {/* Projects */}
        <section style={{ borderTop: `4px solid ${cycle()}`, borderBottom: `4px solid #ff0099` }}>
          <div style={{ padding: '60px 5vw 20px' }}>
            <h2 className="ac-title" style={{ fontSize: 'clamp(50px, 8vw, 120px)', color: '#ccff00', margin: 0,
              textShadow: `0 0 30px ${cycle()}` }}>
              {t('MISIONES', 'MISSIONS')}
            </h2>
          </div>
          <div style={{ display: 'flex', overflowX: 'auto', gap: 30, padding: '20px 5vw 60px', scrollSnapType: 'x mandatory' }}>
            {data.projects.map((p, i) => {
              const c = [cycle(i * 50), cycle(i * 50 + 120), '#ccff00', '#ff0099'][i % 4];
              return (
                <div key={p.id} style={{ minWidth: 'min(90vw, 440px)', scrollSnapAlign: 'start',
                  border: `3px solid ${c}`, padding: 36, background: `${c}08`, flexShrink: 0,
                  position: 'relative' }}>
                  <div style={{ position: 'absolute', top: 12, right: 16, fontFamily: '"Syne", sans-serif',
                    fontSize: 48, fontWeight: 800, color: c, opacity: 0.12, lineHeight: 1 }}>
                    {String(i + 1).padStart(2, '0')}
                  </div>
                  <div className="ac-title" style={{ fontSize: 13, color: c, letterSpacing: 3, marginBottom: 12 }}>
                    {p.year} // {t(p.kind_es, p.kind_en)}
                  </div>
                  <h3 className="ac-title" style={{ fontSize: 32, color: '#fff', margin: '0 0 16px', lineHeight: 1 }}>
                    {t(p.name_es, p.name_en)}
                  </h3>
                  <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, marginBottom: 24 }}>
                    {t(p.short_es, p.short_en)}
                  </p>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    {p.tags.map(tag => (
                      <span key={tag} style={{ border: `2px solid ${c}`, color: c, padding: '4px 10px', fontSize: 11, fontWeight: 700, letterSpacing: 1 }}>
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </section>

        {/* Footer */}
        <footer style={{ padding: '120px 5vw', textAlign: 'center', position: 'relative' }}>
          <div className="ac-spinner" style={{ fontSize: 80, position: 'absolute', top: '10%', left: '5%', opacity: 0.1 }}>⬡</div>
          <div className="ac-spinner" style={{ fontSize: 60, position: 'absolute', bottom: '15%', right: '8%', opacity: 0.1, animationDirection: 'reverse' }}>◈</div>
          <h2 className="ac-title" style={{ fontSize: 'clamp(50px, 10vw, 140px)', margin: '0 0 20px', color: '#ff0099',
            textShadow: `-4px 0 ${cycle()}, 4px 0 ${cycle(180)}, 0 0 40px #ff009960` }}>
            {t('HABLEMOS', "LET'S TALK")}
          </h2>
          <div style={{ fontSize: 20, color: cycle(), marginBottom: 50, fontWeight: 300 }}>{data.location}</div>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
            <a href={`mailto:${data.email}`} className="ac-btn" style={{ background: '#ff0099', color: '#000', borderColor: '#ff0099' }}>EMAIL</a>
            <a href={`https://linkedin.com/in/${data.linkedin}`} target="_blank" rel="noopener noreferrer" className="ac-btn">LINKEDIN</a>
            {data.github && <a href={`https://github.com/${data.github}`} target="_blank" rel="noopener noreferrer" className="ac-btn">GITHUB</a>}
          </div>
        </footer>
      </div>
    </div>
  );
};
window.V65Acid = V65Acid;
