// v66 — Holo Glass (Holográfico reactivo al mouse)
const V66Holo = ({ data, lang, setLang = () => {} }) => {
  const { useState, useEffect, useRef } = React;
  const t = (es, en) => lang === 'es' ? es : en;

  const containerRef = useRef(null);
  const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });

  useEffect(() => {
    const handleMove = (e) => {
      const rect = document.documentElement;
      setMouse({
        x: e.clientX / rect.clientWidth,
        y: e.clientY / rect.clientHeight,
      });
    };
    window.addEventListener('mousemove', handleMove);
    return () => window.removeEventListener('mousemove', handleMove);
  }, []);

  const hueShift = Math.round(mouse.x * 360);
  const foilAngle = Math.round(mouse.x * 180 + mouse.y * 90);
  const specularX = Math.round(mouse.x * 100);
  const specularY = Math.round(mouse.y * 100);

  const holoFoil = (alpha = 0.8) =>
    `conic-gradient(from ${foilAngle}deg at ${specularX}% ${specularY}%,
      hsl(${hueShift},100%,70%,${alpha}),
      hsl(${(hueShift+60)%360},100%,60%,${alpha}),
      hsl(${(hueShift+120)%360},100%,70%,${alpha}),
      hsl(${(hueShift+180)%360},100%,65%,${alpha}),
      hsl(${(hueShift+240)%360},100%,70%,${alpha}),
      hsl(${(hueShift+300)%360},100%,65%,${alpha}),
      hsl(${hueShift},100%,70%,${alpha}))`;

  return (
    <div ref={containerRef} style={{ minHeight: '100vh', fontFamily: '"Inter", sans-serif', color: '#fff', position: 'relative', overflow: 'hidden', background: '#0a0a14' }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap');

        @keyframes hoRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes hoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
        @keyframes hoIriPulse {
          0%   { filter: hue-rotate(0deg) brightness(1); }
          50%  { filter: hue-rotate(180deg) brightness(1.2); }
          100% { filter: hue-rotate(360deg) brightness(1); }
        }

        .ho-glass {
          background: rgba(255,255,255,0.04);
          backdrop-filter: blur(24px);
          -webkit-backdrop-filter: blur(24px);
          border: 1px solid rgba(255,255,255,0.12);
          border-radius: 20px;
          position: relative;
          overflow: hidden;
          transition: transform 0.2s;
        }
        .ho-glass::before {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: inherit;
          opacity: 0;
          transition: opacity 0.3s;
          pointer-events: none;
        }
        .ho-glass:hover { transform: translateY(-4px); }
        .ho-glass:hover::before { opacity: 1; }

        .ho-foil-text {
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          animation: hoIriPulse 4s linear infinite;
        }

        .ho-orb {
          position: fixed;
          border-radius: 50%;
          filter: blur(90px);
          pointer-events: none;
          animation: hoFloat 8s ease-in-out infinite;
        }

        @keyframes hoShimmer {
          0%   { left: -100%; }
          100% { left: 200%; }
        }
        .ho-shimmer-line {
          position: absolute;
          top: 0; bottom: 0; width: 40%;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
          pointer-events: none;
          animation: hoShimmer 3s ease-in-out infinite;
        }

        .ho-btn {
          padding: 14px 32px; border-radius: 50px; font-size: 15px; font-weight: 700;
          cursor: pointer; transition: 0.25s; text-decoration: none; display: inline-block;
          border: 1px solid rgba(255,255,255,0.3); color: #fff; letter-spacing: 0.5px;
          position: relative; overflow: hidden;
        }
        .ho-btn:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(255,255,255,0.2); }
      `}</style>

      {/* Orbs */}
      <div className="ho-orb" style={{
        width: '60vw', height: '60vw',
        background: `hsl(${hueShift}, 100%, 40%)`,
        top: `${mouse.y * 30 - 15}%`, left: `${mouse.x * 30 - 15}%`,
        opacity: 0.25, animationDelay: '0s', transition: 'top 1.5s ease, left 1.5s ease, background 0.5s'
      }} />
      <div className="ho-orb" style={{
        width: '50vw', height: '50vw',
        background: `hsl(${(hueShift + 150) % 360}, 100%, 45%)`,
        bottom: `${(1 - mouse.y) * 30}%`, right: `${(1 - mouse.x) * 30 - 5}%`,
        opacity: 0.2, animationDelay: '-4s', transition: 'bottom 1.5s ease, right 1.5s ease, background 0.5s'
      }} />
      <div className="ho-orb" style={{
        width: '40vw', height: '40vw',
        background: `hsl(${(hueShift + 270) % 360}, 100%, 50%)`,
        top: '30%', left: '30%',
        opacity: 0.15, animationDelay: '-2s',
      }} />

      <div style={{ maxWidth: 1400, margin: '0 auto', padding: '40px 24px', position: 'relative', zIndex: 2 }}>

        {/* Header */}
        <div className="ho-glass" style={{ padding: '20px 32px', marginBottom: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div className="ho-shimmer-line" />
          <div style={{ fontWeight: 900, fontSize: 20, letterSpacing: 3 }}>
            <span className="ho-foil-text" style={{ backgroundImage: holoFoil() }}>
              {data.nameShort?.toUpperCase() || data.name.split(' ').map(w => w[0]).join('')}
            </span>
          </div>
          <LangToggle lang={lang} setLang={setLang} theme="dark" />
        </div>

        {/* Hero */}
        <div className="ho-glass" style={{ padding: '80px 60px', marginBottom: 32, textAlign: 'center', position: 'relative' }}>
          <div className="ho-shimmer-line" />
          <div style={{ fontSize: 12, letterSpacing: 8, textTransform: 'uppercase', marginBottom: 24, opacity: 0.6 }}>{data.location}</div>
          <h1 style={{ fontSize: 'clamp(48px, 9vw, 120px)', fontWeight: 900, margin: '0 0 16px', letterSpacing: -3, lineHeight: 1 }}>
            <span className="ho-foil-text" style={{ backgroundImage: holoFoil(1) }}>{data.name}</span>
          </h1>
          <div style={{ fontSize: 'clamp(18px, 2.5vw, 28px)', fontWeight: 200, margin: '0 0 28px', opacity: 0.85 }}>
            {t(data.role_es, data.role_en)}
          </div>
          <p style={{ fontSize: 16, maxWidth: 540, margin: '0 auto 40px', lineHeight: 1.7, opacity: 0.7 }}>
            {t(data.tagline_es, data.tagline_en)}
          </p>
          <a href={`mailto:${data.email}`} className="ho-btn"
            style={{ background: holoFoil(0.9), color: '#000', border: 'none', fontWeight: 900 }}>
            {t('Iniciar Proyecto', 'Start a Project')}
          </a>
        </div>

        {/* About + Experience */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: 32, marginBottom: 32 }}>
          <div className="ho-glass" style={{ padding: 48 }}>
            <div className="ho-shimmer-line" />
            <h2 style={{ fontSize: 28, fontWeight: 900, marginBottom: 24 }}>
              <span className="ho-foil-text" style={{ backgroundImage: holoFoil() }}>{t('SOBRE MÍ', 'ABOUT ME')}</span>
            </h2>
            {(lang === 'es' ? data.about_es : data.about_en).map((p, i) => (
              <p key={i} style={{ fontSize: 15, lineHeight: 1.75, opacity: 0.85, marginBottom: 12 }}>{p}</p>
            ))}
          </div>

          <div className="ho-glass" style={{ padding: 48 }}>
            <div className="ho-shimmer-line" />
            <h2 style={{ fontSize: 28, fontWeight: 900, marginBottom: 24 }}>
              <span className="ho-foil-text" style={{ backgroundImage: holoFoil(1) }}>STACK</span>
            </h2>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              {data.stack.flatMap(s => s.items).map((item, i) => (
                <span key={i} style={{
                  padding: '8px 16px', borderRadius: 20, fontSize: 13, fontWeight: 700,
                  background: 'rgba(255,255,255,0.06)',
                  border: '1px solid rgba(255,255,255,0.15)',
                  backdropFilter: 'blur(4px)',
                  color: `hsl(${(hueShift + i * 30) % 360}, 80%, 80%)`
                }}>{item}</span>
              ))}
            </div>
          </div>
        </div>

        {/* Projects */}
        <div className="ho-glass" style={{ padding: 48, marginBottom: 32 }}>
          <div className="ho-shimmer-line" />
          <h2 style={{ fontSize: 36, fontWeight: 900, textAlign: 'center', marginBottom: 40 }}>
            <span className="ho-foil-text" style={{ backgroundImage: holoFoil() }}>PORTAFOLIO</span>
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
            {data.projects.map((p, i) => (
              <div key={p.id} style={{
                padding: 28, borderRadius: 14, position: 'relative', overflow: 'hidden',
                background: `radial-gradient(circle at ${specularX}% ${specularY}%, rgba(255,255,255,0.06), rgba(0,0,0,0.2))`,
                border: '1px solid rgba(255,255,255,0.08)',
                transition: 'transform 0.2s'
              }}
                onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.02)'}
                onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
              >
                <div style={{ fontSize: 11, opacity: 0.5, letterSpacing: 3, textTransform: 'uppercase', marginBottom: 10 }}>{t(p.kind_es, p.kind_en)}</div>
                <h3 style={{ fontSize: 22, fontWeight: 700, margin: '0 0 10px', lineHeight: 1.2 }}>{t(p.name_es, p.name_en)}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.65, opacity: 0.72, marginBottom: 18 }}>{t(p.short_es, p.short_en)}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {p.tags.map(tag => (
                    <span key={tag} style={{ padding: '3px 10px', borderRadius: 20, fontSize: 11,
                      background: `hsl(${(hueShift + i * 60) % 360}, 50%, 25%)`,
                      color: `hsl(${(hueShift + i * 60) % 360}, 80%, 80%)`,
                      border: `1px solid hsl(${(hueShift + i * 60) % 360}, 60%, 40%)` }}>
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Footer */}
        <div className="ho-glass" style={{ padding: '60px 48px', textAlign: 'center', position: 'relative' }}>
          <div className="ho-shimmer-line" />
          <h2 style={{ fontSize: 'clamp(32px, 5vw, 64px)', fontWeight: 900, marginBottom: 32 }}>
            <span className="ho-foil-text" style={{ backgroundImage: holoFoil() }}>
              {t('SIGAMOS CONVERSANDO', "LET'S KEEP TALKING")}
            </span>
          </h2>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 16, flexWrap: 'wrap' }}>
            <a href={`mailto:${data.email}`} className="ho-btn"
              style={{ background: holoFoil(0.85), color: '#000', border: 'none', fontWeight: 900 }}>
              EMAIL
            </a>
            <a href={`https://linkedin.com/in/${data.linkedin}`} target="_blank" rel="noopener noreferrer" className="ho-btn"
              style={{ background: 'rgba(255,255,255,0.1)' }}>
              LINKEDIN
            </a>
          </div>
        </div>

      </div>
    </div>
  );
};
window.V66Holo = V66Holo;