// v67 — Neo Bauhaus / De Stijl (Animado, Maximalista)
const V67Bauhaus = ({ data, lang, setLang = () => {} }) => {
  const { useState, useEffect } = React;
  const t = (es, en) => lang === 'es' ? es : en;

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

        /* Rotating shapes */
        @keyframes bhRotateCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes bhRotateCCW { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
        @keyframes bhScale { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
        @keyframes bhSlideIn { from { transform: translateX(-100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        @keyframes bhMarch {
          0% { background-position: 0 0; }
          100% { background-position: 40px 0; }
        }
        @keyframes bhPop { from { transform: scale(0) rotate(-180deg); opacity:0; } to { transform: scale(1) rotate(0deg); opacity:1; } }

        .bh-title { font-family: 'Bebas Neue', 'Arial Black', sans-serif; letter-spacing: 1px; line-height: 0.9; }
        .bh-mono { font-family: 'Space Mono', monospace; }

        /* Animated Bauhaus decorative shapes */
        .bh-wheel {
          position: fixed; pointer-events: none; z-index: 0;
          border-radius: 50%; border: 8px solid;
        }
        .bh-triangle {
          position: fixed; pointer-events: none; z-index: 0;
          width: 0; height: 0;
        }

        /* Marching ants border */
        .bh-marching {
          background-image: repeating-linear-gradient(90deg, #111 0, #111 10px, transparent 10px, transparent 20px);
          background-size: 40px 100%;
          animation: bhMarch 1s linear infinite;
        }

        .bh-card {
          border: 4px solid #111;
          padding: 40px;
          background: #f4f1e9;
          position: relative;
          z-index: 10;
          overflow: hidden;
          transition: 0.2s;
        }
        .bh-card::after {
          content: '';
          position: absolute;
          top: 0; left: 0;
          width: 8px; height: 100%;
          transition: 0.2s;
        }
        .bh-card:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 #111; }

        .bh-btn {
          background: #111; color: #f4f1e9; padding: 18px 36px;
          font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 2px;
          text-decoration: none; display: inline-block; transition: 0.15s; border: 3px solid #111;
          position: relative; overflow: hidden;
        }
        .bh-btn:hover { background: #e83f2c; border-color: #e83f2c; transform: translate(4px, 4px); }

        .bh-proj-card {
          padding: 36px; border: 4px solid #111; position: relative;
          overflow: hidden; transition: 0.2s;
        }
        .bh-proj-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 #111; }

        .bh-number {
          font-family: 'Bebas Neue', sans-serif;
          font-size: 140px; line-height: 1; opacity: 0.07;
          position: absolute; bottom: -20px; right: 10px; pointer-events: none;
        }

        .bh-divider {
          height: 8px;
          background: repeating-linear-gradient(90deg, #e83f2c 0, #e83f2c 40px, #2864c6 40px, #2864c6 80px, #f9e03b 80px, #f9e03b 120px, #111 120px, #111 160px);
        }
      `}</style>

      {/* Decorative animated shapes */}
      {/* Large red circle — top right, rotates */}
      <div style={{ position: 'fixed', top: '-25vw', right: '-15vw', width: '60vw', height: '60vw', borderRadius: '50%', background: '#e83f2c', mixBlendMode: 'multiply', zIndex: 0, pointerEvents: 'none', animation: 'bhRotateCW 60s linear infinite', opacity: 0.9 }} />
      {/* Blue rectangle — bottom left */}
      <div style={{ position: 'fixed', bottom: '-10vw', left: '-5vw', width: '45vw', height: '45vw', background: '#2864c6', mixBlendMode: 'multiply', zIndex: 0, pointerEvents: 'none', animation: 'bhRotateCCW 45s linear infinite' }} />
      {/* Yellow circle — center */}
      <div style={{ position: 'fixed', top: '30%', left: '25%', width: '50vw', height: '50vw', borderRadius: '50%', background: '#f9e03b', mixBlendMode: 'multiply', zIndex: 0, pointerEvents: 'none', animation: 'bhScale 8s ease-in-out infinite', opacity: 0.85 }} />
      {/* Black ring — mid-right */}
      <div className="bh-wheel" style={{ top: '20%', right: '5%', width: '20vw', height: '20vw', borderColor: '#111', animation: 'bhRotateCW 20s linear infinite' }} />
      {/* Red ring */}
      <div className="bh-wheel" style={{ bottom: '15%', left: '8%', width: '14vw', height: '14vw', borderColor: '#e83f2c', animation: 'bhRotateCCW 15s linear infinite', zIndex: 5 }} />

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

      {/* Hero — full viewport */}
      <section style={{ minHeight: '100vh', display: 'grid', gridTemplateColumns: '1fr 1fr', position: 'relative', zIndex: 10, borderBottom: '8px solid #111' }}>

        {/* Left: name + role */}
        <div style={{ padding: '8vw 6vw', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', borderRight: '8px solid #111', background: 'rgba(244,241,233,0.9)' }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: 4, textTransform: 'uppercase', marginBottom: 24, fontFamily: 'Space Mono, monospace' }}>
            {data.location}
          </div>
          <h1 className="bh-title" style={{ fontSize: 'clamp(70px, 10vw, 160px)', margin: 0 }}>
            {data.name.split(' ')[0]}
          </h1>
          <div style={{ height: 8, background: '#e83f2c', margin: '12px 0', width: 'clamp(100px, 30vw, 400px)' }} />
          <h1 className="bh-title" style={{ fontSize: 'clamp(70px, 10vw, 160px)', margin: 0 }}>
            {data.name.split(' ').slice(1).join(' ')}
          </h1>
        </div>

        {/* Right: role + tagline + CTA */}
        <div style={{ padding: '8vw 6vw', display: 'flex', flexDirection: 'column', justifyContent: 'center', background: '#111', color: '#f4f1e9' }}>
          <div style={{ height: 8, background: '#f9e03b', marginBottom: 32, width: '80%' }} />
          <div className="bh-title" style={{ fontSize: 'clamp(28px, 4vw, 56px)', color: '#e83f2c', marginBottom: 24, lineHeight: 1 }}>
            {t(data.role_es, data.role_en).toUpperCase()}
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.6, fontWeight: 400, color: 'rgba(244,241,233,0.8)', marginBottom: 40, maxWidth: 440 }}>
            {t(data.tagline_es, data.tagline_en)}
          </p>
          <div>
            <a href={`mailto:${data.email}`} className="bh-btn" style={{ background: '#e83f2c', borderColor: '#e83f2c', color: '#fff' }}>
              {t('CONTACTAR', 'CONTACT')}
            </a>
          </div>
          <div style={{ height: 8, background: '#2864c6', marginTop: 48, width: '60%' }} />
        </div>

      </section>

      {/* Marching divider */}
      <div className="bh-marching" style={{ height: 8 }} />

      {/* About + Stack grid */}
      <section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', position: 'relative', zIndex: 10, borderBottom: '8px solid #111' }}>

        <div className="bh-card" style={{ borderRight: '4px solid #111', borderBottom: 'none', background: '#fff' }}>
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 8, background: '#e83f2c' }} />
          <div style={{ paddingTop: 8 }}>
            <h2 className="bh-title" style={{ fontSize: 72, margin: '0 0 24px', color: '#111' }}>INFO</h2>
            <p style={{ fontSize: 18, lineHeight: 1.7, fontWeight: 400, marginBottom: 16 }}>{t(data.about_es[0], data.about_en[0])}</p>
            {data.about_es[1] && <p style={{ fontSize: 18, lineHeight: 1.7, fontWeight: 400 }}>{t(data.about_es[1], data.about_en[1])}</p>}
          </div>
        </div>

        <div className="bh-card" style={{ background: '#f9e03b', borderBottom: 'none' }}>
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 8, background: '#2864c6' }} />
          <div style={{ paddingTop: 8 }}>
            <h2 className="bh-title" style={{ fontSize: 72, margin: '0 0 24px' }}>STACK</h2>
            {data.stack.map(g => (
              <div key={g.group_es} style={{ marginBottom: 20, borderBottom: '2px solid rgba(0,0,0,0.15)', paddingBottom: 16 }}>
                <div className="bh-mono" style={{ fontWeight: 700, fontSize: 12, textTransform: 'uppercase', letterSpacing: 3, marginBottom: 8, opacity: 0.6 }}>
                  {t(g.group_es, g.group_en)}
                </div>
                <div style={{ fontSize: 18, fontWeight: 700 }}>{g.items.join(' + ')}</div>
              </div>
            ))}
          </div>
        </div>

      </section>

      {/* Color divider */}
      <div className="bh-divider" />

      {/* Projects */}
      <section style={{ padding: '80px 5vw', position: 'relative', zIndex: 10 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 24, marginBottom: 48, borderBottom: '8px solid #111', paddingBottom: 16 }}>
          <h2 className="bh-title" style={{ fontSize: 'clamp(60px, 10vw, 140px)', margin: 0 }}>WORK</h2>
          <div className="bh-mono" style={{ fontSize: 14, opacity: 0.5, letterSpacing: 2 }}>
            {data.projects.length} {t('PROYECTOS', 'PROJECTS')}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 0 }}>
          {data.projects.map((p, i) => {
            const palettes = [
              { bg: '#e83f2c', text: '#fff', accent: '#f9e03b' },
              { bg: '#2864c6', text: '#fff', accent: '#e83f2c' },
              { bg: '#f9e03b', text: '#111', accent: '#2864c6' },
              { bg: '#fff',    text: '#111', accent: '#e83f2c' },
            ];
            const pal = palettes[i % 4];
            return (
              <div key={p.id} className="bh-proj-card" style={{ background: pal.bg, color: pal.text }}>
                <div className="bh-number">{String(i + 1).padStart(2, '0')}</div>
                <div style={{ position: 'absolute', top: 0, right: 0, width: 40, height: 40, background: pal.accent }} />
                <div className="bh-mono" style={{ fontSize: 12, letterSpacing: 3, textTransform: 'uppercase', marginBottom: 12, opacity: 0.6 }}>
                  {p.year} / {t(p.kind_es, p.kind_en)}
                </div>
                <h3 className="bh-title" style={{ fontSize: 48, margin: '0 0 16px', lineHeight: 1 }}>
                  {t(p.name_es, p.name_en)}
                </h3>
                <p style={{ fontSize: 16, lineHeight: 1.6, marginBottom: 20, opacity: 0.85 }}>{t(p.short_es, p.short_en)}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {p.tags.map(tag => (
                    <span key={tag} style={{ border: `2px solid ${pal.text === '#fff' ? 'rgba(255,255,255,0.5)' : '#111'}`,
                      padding: '4px 12px', fontSize: 11, fontWeight: 700, fontFamily: 'Space Mono, monospace', letterSpacing: 1 }}>
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Color divider */}
      <div className="bh-divider" style={{ transform: 'scaleX(-1)' }} />

      {/* Footer */}
      <footer style={{ background: '#111', color: '#f4f1e9', padding: '10vw 5vw', position: 'relative', zIndex: 10 }}>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 8, background: '#f9e03b' }} />
        <div style={{ position: 'absolute', top: 8, left: 0, right: 0, height: 4, background: '#e83f2c' }} />
        <h2 className="bh-title" style={{ fontSize: 'clamp(60px, 10vw, 160px)', color: '#e83f2c', margin: '0 0 48px', lineHeight: 0.9 }}>
          CONTACT
        </h2>
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          <a href={`mailto:${data.email}`} className="bh-btn" style={{ background: '#f9e03b', borderColor: '#f9e03b', color: '#111' }}>EMAIL</a>
          <a href={`https://linkedin.com/in/${data.linkedin}`} target="_blank" rel="noopener noreferrer" className="bh-btn" style={{ background: '#2864c6', borderColor: '#2864c6', color: '#fff' }}>LINKEDIN</a>
          {data.github && <a href={`https://github.com/${data.github}`} target="_blank" rel="noopener noreferrer" className="bh-btn">GITHUB</a>}
        </div>
        <div className="bh-mono" style={{ marginTop: 60, fontSize: 12, opacity: 0.3, letterSpacing: 4 }}>{data.location.toUpperCase()}</div>
      </footer>
    </div>
  );
};
window.V67Bauhaus = V67Bauhaus;