// v69 — Lava Lamp con filtro gooey SVG (como v8-aurora pero cálido)
const V69Lava = ({ data, lang, setLang = () => {} }) => {
  const { useEffect, useRef } = React;
  const t = (es, en) => lang === 'es' ? es : en;

  return (
    <div style={{ background: '#180a02', color: '#fff', minHeight: '100vh', fontFamily: '"Segoe UI", system-ui, sans-serif', position: 'relative', overflowX: 'hidden' }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;600&display=swap');

        /* Gooey blobs layer */
        .lv-blobs {
          position: fixed; inset: 0; z-index: 0; pointer-events: none;
          filter: url(#lv-goo);
        }
        .lv-blob {
          position: absolute; border-radius: 50%;
          will-change: transform;
        }

        @keyframes lvBlob1 {
          0%,100% { transform: translate(0,0) scale(1); }
          25% { transform: translate(15vw,10vh) scale(1.2); }
          50% { transform: translate(5vw,25vh) scale(0.9); }
          75% { transform: translate(-10vw,15vh) scale(1.15); }
        }
        @keyframes lvBlob2 {
          0%,100% { transform: translate(0,0) scale(1); }
          33% { transform: translate(-20vw,-15vh) scale(1.3); }
          66% { transform: translate(10vw,-30vh) scale(0.85); }
        }
        @keyframes lvBlob3 {
          0%,100% { transform: translate(0,0) scale(1); }
          20% { transform: translate(25vw,5vh) scale(0.95); }
          60% { transform: translate(-15vw,-20vh) scale(1.25); }
        }
        @keyframes lvBlob4 {
          0%,100% { transform: translate(0,0) scale(1); }
          40% { transform: translate(10vw,20vh) scale(1.1); }
          80% { transform: translate(-5vw,-10vh) scale(0.9); }
        }
        @keyframes lvBlob5 {
          0%,100% { transform: translate(0,0) scale(1); }
          30% { transform: translate(-18vw,8vh) scale(1.2); }
          70% { transform: translate(12vw,-15vh) scale(0.95); }
        }

        /* Warm card */
        .lv-card {
          background: rgba(255,140,60,0.07);
          border: 1px solid rgba(255,160,80,0.15);
          border-radius: 24px;
          padding: 48px;
          position: relative;
          z-index: 10;
          overflow: hidden;
          backdrop-filter: blur(32px);
          -webkit-backdrop-filter: blur(32px);
          transition: 0.3s;
        }
        .lv-card::before {
          content: '';
          position: absolute; top: 0; left: 0; right: 0; height: 1px;
          background: linear-gradient(90deg, transparent, rgba(255,200,100,0.4), transparent);
        }
        .lv-card:hover {
          background: rgba(255,140,60,0.12);
          border-color: rgba(255,160,80,0.3);
          transform: translateY(-4px);
          box-shadow: 0 20px 60px rgba(180,60,0,0.3);
        }

        .lv-title { font-family: 'DM Serif Display', Georgia, serif; line-height: 1.05; }
        .lv-body { font-family: 'DM Sans', system-ui, sans-serif; }

        .lv-btn {
          padding: 16px 40px; border-radius: 50px; font-size: 16px;
          font-weight: 600; text-decoration: none; display: inline-block;
          transition: 0.3s; font-family: 'DM Sans', sans-serif; letter-spacing: 0.5px;
        }

        .lv-tag {
          padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
          font-family: 'DM Sans', sans-serif; letter-spacing: 0.5px;
        }

        @keyframes lvFloat {
          0%,100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }
        .lv-float { animation: lvFloat 4s ease-in-out infinite; }

        .lv-divider {
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(255,160,80,0.3), transparent);
          margin: 16px 0;
        }

        .lv-number {
          font-family: 'DM Serif Display', serif;
          font-size: 120px; opacity: 0.05;
          position: absolute; bottom: -20px; right: 20px;
          pointer-events: none; line-height: 1;
        }
      `}</style>

      {/* SVG Gooey filter */}
      <svg style={{ position: 'fixed', width: 0, height: 0, top: 0, left: 0 }} aria-hidden="true">
        <defs>
          <filter id="lv-goo" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="28" result="blur" />
            <feColorMatrix in="blur" mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -8"
              result="goo" />
            <feBlend in="SourceGraphic" in2="goo" mode="normal" />
          </filter>
        </defs>
      </svg>

      {/* Gooey blobs */}
      <div className="lv-blobs">
        <div className="lv-blob" style={{ width: '42vw', height: '42vw', background: '#c83c00', top: '5%', left: '10%', animation: 'lvBlob1 22s ease-in-out infinite' }} />
        <div className="lv-blob" style={{ width: '38vw', height: '38vw', background: '#e05500', top: '40%', right: '5%', animation: 'lvBlob2 28s ease-in-out infinite' }} />
        <div className="lv-blob" style={{ width: '30vw', height: '30vw', background: '#ff8c20', bottom: '5%', left: '25%', animation: 'lvBlob3 18s ease-in-out infinite' }} />
        <div className="lv-blob" style={{ width: '25vw', height: '25vw', background: '#d44000', top: '60%', left: '5%', animation: 'lvBlob4 24s ease-in-out infinite' }} />
        <div className="lv-blob" style={{ width: '35vw', height: '35vw', background: '#b83000', top: '20%', right: '20%', animation: 'lvBlob5 32s ease-in-out infinite' }} />
      </div>

      <div style={{ position: 'fixed', top: 28, right: 28, 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: '0 5vw', position: 'relative', zIndex: 10 }}>
        <div className="lv-float" style={{ fontSize: 14, letterSpacing: 6, textTransform: 'uppercase',
          color: 'rgba(255,160,80,0.8)', marginBottom: 28, fontFamily: 'DM Sans, sans-serif' }}>
          {data.location}
        </div>
        <h1 className="lv-title" style={{ fontSize: 'clamp(56px, 10vw, 140px)', margin: '0 0 20px',
          color: '#fff', fontWeight: 400 }}>
          {data.name}
        </h1>
        <div className="lv-divider" style={{ width: 'min(400px, 80vw)', margin: '0 auto 20px' }} />
        <div className="lv-body" style={{ fontSize: 'clamp(18px, 3vw, 32px)', fontWeight: 300,
          color: 'rgba(255,200,150,0.9)', marginBottom: 28 }}>
          {t(data.role_es, data.role_en)}
        </div>
        <p className="lv-body" style={{ fontSize: 18, maxWidth: 560, lineHeight: 1.75,
          color: 'rgba(255,255,255,0.65)', marginBottom: 48 }}>
          {t(data.tagline_es, data.tagline_en)}
        </p>
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center' }}>
          <a href={`mailto:${data.email}`} className="lv-btn"
            style={{ background: 'rgba(220,80,20,0.9)', color: '#fff', boxShadow: '0 8px 30px rgba(200,60,0,0.4)' }}>
            {t('¿Hablamos?', "Let's Talk")}
          </a>
          <a href={`#work`} className="lv-btn"
            style={{ background: 'rgba(255,255,255,0.08)', color: '#fff', border: '1px solid rgba(255,160,80,0.3)' }}>
            {t('Ver Trabajo', 'See Work')}
          </a>
        </div>
      </section>

      {/* About + Stack */}
      <section style={{ padding: '80px 5vw', maxWidth: 1400, margin: '0 auto',
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 32, position: 'relative', zIndex: 10 }}>

        <div className="lv-card">
          <h2 className="lv-title" style={{ fontSize: 44, marginBottom: 24, fontWeight: 400, color: 'rgba(255,200,150,0.95)' }}>
            {t('Sobre Mí', 'About Me')}
          </h2>
          <div className="lv-divider" />
          {(lang === 'es' ? data.about_es : data.about_en).map((p, i) => (
            <p key={i} className="lv-body" style={{ fontSize: 16, lineHeight: 1.8, color: 'rgba(255,255,255,0.8)', marginBottom: 12 }}>{p}</p>
          ))}
        </div>

        <div className="lv-card">
          <h2 className="lv-title" style={{ fontSize: 44, marginBottom: 24, fontWeight: 400, color: 'rgba(255,200,150,0.95)' }}>
            Stack
          </h2>
          <div className="lv-divider" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, marginTop: 8 }}>
            {data.stack.map(g => (
              <div key={g.group_es}>
                <div className="lv-body" style={{ fontSize: 11, letterSpacing: 3, textTransform: 'uppercase',
                  color: 'rgba(255,160,80,0.7)', marginBottom: 8, fontWeight: 600 }}>
                  {t(g.group_es, g.group_en)}
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {g.items.map((item, j) => (
                    <span key={j} className="lv-tag" style={{
                      background: `rgba(${180 + j * 10},${50 + j * 15},0,0.25)`,
                      color: 'rgba(255,200,150,0.9)',
                      border: '1px solid rgba(255,140,60,0.2)'
                    }}>{item}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

      </section>

      {/* Projects */}
      <section id="work" style={{ padding: '40px 5vw 100px', maxWidth: 1600, margin: '0 auto', position: 'relative', zIndex: 10 }}>
        <h2 className="lv-title" style={{ fontSize: 'clamp(48px, 7vw, 100px)', textAlign: 'center',
          marginBottom: 60, fontWeight: 400, color: 'rgba(255,200,150,0.95)' }}>
          {t('Portafolio', 'Portfolio')}
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: 28 }}>
          {data.projects.map((p, i) => {
            const warmBgs = [
              'rgba(200,60,0,0.18)', 'rgba(240,100,20,0.12)',
              'rgba(180,40,0,0.2)', 'rgba(220,80,10,0.15)'
            ];
            return (
              <div key={p.id} className="lv-card" style={{ background: warmBgs[i % 4] }}>
                <div className="lv-number">{String(i + 1).padStart(2, '0')}</div>
                <div className="lv-body" style={{ fontSize: 11, letterSpacing: 3, textTransform: 'uppercase',
                  color: 'rgba(255,160,80,0.7)', marginBottom: 14, fontWeight: 600 }}>
                  {p.year} — {t(p.kind_es, p.kind_en)}
                </div>
                <h3 className="lv-title" style={{ fontSize: 34, margin: '0 0 14px', fontWeight: 400,
                  color: 'rgba(255,220,180,0.95)', lineHeight: 1.1 }}>
                  {t(p.name_es, p.name_en)}
                </h3>
                <p className="lv-body" style={{ fontSize: 15, lineHeight: 1.7, color: 'rgba(255,255,255,0.7)', marginBottom: 22 }}>
                  {t(p.short_es, p.short_en)}
                </p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {p.tags.map(tag => (
                    <span key={tag} className="lv-tag" style={{
                      background: 'rgba(255,120,40,0.15)',
                      border: '1px solid rgba(255,140,60,0.25)',
                      color: 'rgba(255,180,100,0.9)'
                    }}>{tag}</span>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Footer */}
      <footer style={{ padding: '100px 5vw', textAlign: 'center', position: 'relative', zIndex: 10 }}>
        <div style={{ display: 'inline-block' }}>
          <h2 className="lv-title" style={{ fontSize: 'clamp(40px, 7vw, 96px)', fontWeight: 400,
            color: 'rgba(255,200,150,0.95)', marginBottom: 12 }}>
            {t('¿Hablamos?', "Let's Talk")}
          </h2>
          <div className="lv-divider" />
        </div>
        <p className="lv-body" style={{ fontSize: 18, color: 'rgba(255,255,255,0.5)', margin: '24px auto 48px', maxWidth: 400 }}>
          {data.email}
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 16, flexWrap: 'wrap' }}>
          <a href={`mailto:${data.email}`} className="lv-btn"
            style={{ background: 'rgba(200,60,0,0.85)', color: '#fff', boxShadow: '0 8px 30px rgba(180,40,0,0.4)' }}>
            EMAIL
          </a>
          <a href={`https://linkedin.com/in/${data.linkedin}`} target="_blank" rel="noopener noreferrer" className="lv-btn"
            style={{ background: 'rgba(255,255,255,0.07)', color: 'rgba(255,200,150,0.9)', border: '1px solid rgba(255,140,60,0.25)' }}>
            LINKEDIN
          </a>
        </div>
        <div className="lv-body" style={{ marginTop: 80, fontSize: 12, opacity: 0.3, letterSpacing: 4, textTransform: 'uppercase' }}>
          {data.location}
        </div>
      </footer>
    </div>
  );
};
window.V69Lava = V69Lava;