// Variante 19 — Cómic / Manga (Pop Art, Halftones, Viñetas)
const V19 = {
  bg: '#f4f4f4',
  ink: '#090909',
  yellow: '#ffde00',
  red: '#e30022',
  cyan: '#00e5ff',
  white: '#ffffff',
};

function V19Comic({ data, lang, setLang = () => {} }) {
  const t = (es, en) => lang === 'es' ? es : en;

  return (
    <div style={{ background: V19.bg, minHeight: '100vh', overflowX: 'hidden', paddingBottom: '80px' }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Space+Grotesk:wght@700&display=swap');
        
        .comic-font {
          font-family: 'Bangers', cursive, system-ui;
          letter-spacing: 2px;
        }
        .comic-text {
          font-family: 'Space Grotesk', sans-serif;
          font-weight: 700;
        }
        
        /* Efecto de Puntos de Trama (Halftone) */
        .halftone-bg {
          background-image: radial-gradient(${V19.ink} 20%, transparent 20%),
                            radial-gradient(${V19.ink} 20%, transparent 20%);
          background-position: 0 0, 4px 4px;
          background-size: 8px 8px;
        }
        .halftone-cyan {
          background-image: radial-gradient(${V19.cyan} 20%, transparent 20%),
                            radial-gradient(${V19.cyan} 20%, transparent 20%);
          background-position: 0 0, 6px 6px;
          background-size: 12px 12px;
        }

        /* Viñeta base */
        .comic-panel {
          background: ${V19.white};
          border: 4px solid ${V19.ink};
          box-shadow: 8px 8px 0px ${V19.ink};
          padding: 20px;
          position: relative;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .comic-panel:hover {
          transform: translate(-4px, -4px);
          box-shadow: 12px 12px 0px ${V19.ink};
        }

        /* Globo de diálogo (Speech Bubble) */
        .speech-bubble {
          position: relative;
          background: ${V19.white};
          border: 4px solid ${V19.ink};
          border-radius: 30px;
          padding: 20px;
          box-shadow: 6px 6px 0px ${V19.ink};
        }
        .speech-bubble::after {
          content: '';
          position: absolute;
          bottom: -24px;
          left: 40px;
          border-width: 24px 24px 0 0;
          border-style: solid;
          border-color: ${V19.white} transparent transparent transparent;
          z-index: 2;
        }
        .speech-bubble::before {
          content: '';
          position: absolute;
          bottom: -31px;
          left: 36px;
          border-width: 28px 28px 0 0;
          border-style: solid;
          border-color: ${V19.ink} transparent transparent transparent;
          z-index: 1;
        }

        /* Responsive */
        @media (max-width: 768px) {
          .comic-grid { grid-template-columns: repeat(6, 1fr) !important; }
          .comic-col-full   { grid-column: 1 / -1 !important; }
          .comic-col-8      { grid-column: span 6 !important; }
          .comic-col-7      { grid-column: span 6 !important; }
          .comic-col-6      { grid-column: span 6 !important; }
          .comic-col-5      { grid-column: span 6 !important; }
          .comic-col-4      { grid-column: span 6 !important; }
          .comic-col-3      { grid-column: span 3 !important; }
          .comic-col-4half  { grid-column: span 3 !important; }
        }
        @media (max-width: 480px) {
          .comic-grid { grid-template-columns: 1fr !important; }
          .comic-grid > * { grid-column: span 1 !important; }
        }

        /* Explosión / Acción */
        .burst {
          background: ${V19.red};
          color: ${V19.white};
          padding: 20px;
          text-align: center;
          clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
          transform: rotate(-5deg);
        }
      `}</style>

      {/* HEADER TIPO PORTADA DE CÓMIC */}
      <div style={{ background: V19.yellow, borderBottom: `6px solid ${V19.ink}`, padding: '10px 20px' }}>
        <div style={{ maxWidth: 1000, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div className="comic-text" style={{ fontSize: 14, textTransform: 'uppercase' }}>
            ISSUE #01 · {data.location} · 2026
          </div>
          <div style={{ display: 'flex', gap: '15px', alignItems: 'center' }}>
            <div className="comic-text" style={{ background: V19.white, border: `3px solid ${V19.ink}`, padding: '2px 8px', fontSize: 14 }}>
              PRICE: FREE
            </div>
            <LangToggle lang={lang} setLang={setLang} theme="light" />
          </div>
        </div>
      </div>

      <div style={{ maxWidth: 1000, margin: '0 auto', padding: '40px 20px' }}>
        
        {/* GRID DE VIÑETAS */}
        <div className="comic-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: '24px' }}>
          
          {/* 1. HERO PANEL */}
          <div className="comic-panel halftone-bg" style={{ gridColumn: '1 / -1', padding: '40px', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', overflow: 'hidden' }}>
            <div style={{ background: V19.cyan, border: `4px solid ${V19.ink}`, padding: '10px 20px', transform: 'rotate(-2deg)', marginBottom: '20px', boxShadow: `4px 4px 0 ${V19.ink}` }}>
              <h2 className="comic-text" style={{ margin: 0, fontSize: 24, textTransform: 'uppercase' }}>{t('Presentando a...', 'Introducing...')}</h2>
            </div>
            
            <h1 className="comic-font" style={{ margin: 0, fontSize: 'clamp(60px, 12vw, 130px)', color: V19.yellow, textShadow: `4px 4px 0 ${V19.red}, 8px 8px 0 ${V19.ink}`, lineHeight: 0.9, transform: 'rotate(-2deg)' }}>
              {data.name.toUpperCase()}
            </h1>
            
            <div className="comic-text" style={{ fontSize: 24, marginTop: 20, background: V19.white, border: `4px solid ${V19.ink}`, padding: '10px 20px', textTransform: 'uppercase' }}>
              {t(data.role_es, data.role_en)}
            </div>
          </div>

          {/* 2. ABOUT BUBBLE PANEL */}
          <div className="comic-panel comic-col-8" style={{ gridColumn: '1 / span 8', background: V19.cyan }}>
            <div className="comic-font" style={{ fontSize: 32, background: V19.white, border: `4px solid ${V19.ink}`, display: 'inline-block', padding: '5px 15px', marginBottom: 20, transform: 'rotate(-3deg)' }}>
              {t('CAPÍTULO 1: ORIGEN', 'CHAPTER 1: ORIGINS')}
            </div>
            <div className="speech-bubble comic-text" style={{ fontSize: 16, lineHeight: 1.6 }}>
              {(lang === 'es' ? data.about_es : data.about_en).map((p, i) => (
                <p key={i} style={{ margin: i === 0 ? 0 : '15px 0 0' }}>{p}</p>
              ))}
            </div>
          </div>

          {/* 3. STATUS / BURST */}
          <div className="comic-col-4" style={{ gridColumn: 'span 4', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
            <div className="halftone-cyan" style={{ position: 'absolute', inset: 0, border: `4px solid ${V19.ink}`, boxShadow: `6px 6px 0 ${V19.ink}` }} />
            <div className="burst comic-font" style={{ position: 'relative', width: '220px', height: '220px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 32, lineHeight: 1, textShadow: `3px 3px 0 ${V19.ink}`, border: `4px solid ${V19.ink}` }}>
              {t('STATUS:', 'STATUS:')}<br/>
              {t('¡DISPONIBLE 2026!', 'AVAILABLE 2026!')}
            </div>
          </div>

          {/* 4. STACK (Poderes) */}
          <div className="comic-panel" style={{ gridColumn: '1 / -1', background: V19.yellow }}>
            <div className="comic-font" style={{ fontSize: 32, background: V19.white, border: `4px solid ${V19.ink}`, display: 'inline-block', padding: '5px 15px', marginBottom: 20, transform: 'rotate(2deg)' }}>
              {t('SUPER PODERES Y HABILIDADES', 'SUPER POWERS & ABILITIES')}
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 15 }}>
              {data.stack.map((g, i) => (
                <div key={i} style={{ background: V19.white, border: `4px solid ${V19.ink}`, padding: '10px', flex: '1 1 200px', boxShadow: `4px 4px 0 ${V19.ink}` }}>
                  <div className="comic-font" style={{ fontSize: 22, color: V19.red, marginBottom: 5 }}>{t(g.group_es, g.group_en)}</div>
                  <div className="comic-text" style={{ fontSize: 14 }}>
                    {g.items.join(' / ')}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 5. PROJECTS (Episodios) */}
          <div style={{ gridColumn: '1 / -1', marginTop: 20 }}>
            <div className="comic-font" style={{ fontSize: 48, color: V19.white, textShadow: `4px 4px 0 ${V19.ink}`, WebkitTextStroke: `2px ${V19.ink}`, textAlign: 'center', marginBottom: 20 }}>
              {t('EPISODIOS DESTACADOS', 'FEATURED EPISODES')}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '24px' }}>
              {data.projects.map((p, i) => (
                <div key={p.id} className="comic-panel" style={{ display: 'flex', flexDirection: 'column' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: `4px solid ${V19.ink}`, paddingBottom: 10, marginBottom: 10 }}>
                    <span className="comic-font" style={{ fontSize: 24, color: V19.cyan, textShadow: `2px 2px 0 ${V19.ink}` }}>Vol. {p.year}</span>
                    <span className="comic-text" style={{ fontSize: 12, background: V19.ink, color: V19.yellow, padding: '2px 8px' }}>{t(p.kind_es, p.kind_en)}</span>
                  </div>
                  <h3 className="comic-font" style={{ margin: '0 0 10px 0', fontSize: 32, lineHeight: 1 }}>{t(p.name_es, p.name_en)}</h3>
                  <p className="comic-text" style={{ margin: '0 0 15px 0', fontSize: 14, flex: 1 }}>{t(p.short_es, p.short_en)}</p>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                    {p.tags.map(t => (
                      <span key={t} className="comic-text" style={{ background: V19.yellow, border: `2px solid ${V19.ink}`, padding: '2px 6px', fontSize: 12 }}>#{t}</span>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 6. EXPERIENCIA */}
          <div className="comic-panel halftone-bg" style={{ gridColumn: '1 / -1', marginTop: 20 }}>
             <div className="comic-font" style={{ fontSize: 40, background: V19.red, color: V19.white, border: `4px solid ${V19.ink}`, display: 'inline-block', padding: '5px 15px', marginBottom: 20, transform: 'rotate(-2deg)', boxShadow: `4px 4px 0 ${V19.ink}` }}>
              {t('LA TRAMA HASTA AHORA...', 'THE STORY SO FAR...')}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '20px' }}>
              {data.experience.map((e, i) => (
                <div key={i} style={{ background: V19.white, border: `4px solid ${V19.ink}`, padding: '15px', position: 'relative' }}>
                  <div className="comic-text" style={{ position: 'absolute', top: -14, left: 10, background: V19.yellow, border: `3px solid ${V19.ink}`, padding: '2px 10px', fontSize: 12 }}>
                    {e.period}
                  </div>
                  <h4 className="comic-font" style={{ margin: '15px 0 5px', fontSize: 24, color: V19.red }}>{e.company}</h4>
                  <div className="comic-text" style={{ fontSize: 14, textTransform: 'uppercase', marginBottom: 10 }}>{t(e.role_es, e.role_en)}</div>
                  <p className="comic-text" style={{ fontSize: 14, margin: 0, lineHeight: 1.5 }}>{t(e.description_es, e.description_en)}</p>
                </div>
              ))}
            </div>
          </div>

          {/* 7. CONTACTO */}
          <div style={{ gridColumn: '1 / -1', marginTop: 40, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
             <div className="comic-font" style={{ fontSize: 60, color: V19.white, textShadow: `4px 4px 0 ${V19.ink}`, WebkitTextStroke: `2px ${V19.ink}`, textAlign: 'center', marginBottom: 30 }}>
              {t('¡LLAMA A LOS REFUERZOS!', 'CALL FOR BACKUP!')}
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 20, justifyContent: 'center' }}>
              <ComicLink href={`mailto:${data.email}`} color={V19.cyan} text={t('CORREO', 'EMAIL')} value={data.email} />
              <ComicLink href={`https://www.linkedin.com/in/${data.linkedin}`} color={V19.yellow} text="LINKEDIN" value={data.linkedinLabel || data.name} />
              {data.github && <ComicLink href={`https://github.com/${data.github}`} color={V19.white} text="GITHUB" value={data.github} />}
              {data.phone && <ComicLink href={`tel:${data.phone.replace(/\s/g, '')}`} color={V19.red} text={t('TELÉFONO', 'PHONE')} value={data.phone} />}
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}

function ComicLink({ href, color, text, value }) {
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
      <div className="comic-panel" style={{ background: color, display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 200, transform: `rotate(${Math.random() * 6 - 3}deg)` }}>
        <div className="comic-font" style={{ fontSize: 32, color: color === V19.red || color === V19.ink ? V19.white : V19.ink, textShadow: color === V19.red ? `2px 2px 0 ${V19.ink}` : 'none' }}>
          {text}
        </div>
        <div className="comic-text" style={{ fontSize: 14, background: V19.white, color: V19.ink, padding: '2px 8px', border: `2px solid ${V19.ink}`, marginTop: 10 }}>
          {value}
        </div>
      </div>
    </a>
  );
}

window.V19Comic = V19Comic;