// site-jogador/js/sobre-hique.jsx
//
// Seção "Sobre — Hique". Copy oficial aprovada em
// site-jogador/docs/copy-sobre.md.
//
// Layout: 2 colunas em desktop (avatar + texto), 1 coluna em mobile.
// Avatar é placeholder com inicial "H" estilo dossier — Henrique
// fornece foto/arte real depois.

const COPY = [
  'Esse servidor está sendo construído por uma pessoa, eu. Profissional de marketing, designer, diretor de arte, motion designer, ilustrador e editor de vídeo. Vibe coder e gamer nas horas vagas. Fã de Metal Gear Solid e Hunter x Hunter, com gosto difícil pra experiências com camadas e lore que respeita quem investiga.',
  'Mais de 2.700 horas dentro de Project Zomboid, dois anos administrando servidor na B41, co-fundador do Doom Project (4 mil membros no Discord). Nesse caminho passei por quase tudo que pode dar errado: wipes acidentais, mods que comeram saves inteiros, ataques de hacker, brigas feias, discussões acaloradas que duraram semanas. Hoje sei exatamente onde a maioria dos servidores trava, e onde dar atenção pra entregar qualidade de vida real pra quem joga.',
  'Em projetos anteriores faltou infraestrutura pra fazer o servidor dos meus sonhos. Agora dedico tempo integral pra construir uma experiência que ninguém viu na comunidade de PZ.',
  'Sou perfeccionista. Esse projeto não tem patrocínio, não tem prazo, não tem investidor. Só uma régua alta de qualidade e o ritmo de quem está construindo o servidor que sempre quis jogar.',
];

const TAGS = [
  '2.700+ HORAS PZ',
  '2 ANOS ADMIN B41',
  'CO-FUNDADOR DOOM PROJECT',
  '4K+ MEMBROS DISCORD',
  'SOLO',
  'SEM PATROCÍNIO',
];

function HiqueAvatar() {
  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: 220, aspectRatio: '1/1' }}>
      {/* Frame */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(135deg, rgba(168,255,0,0.08) 0%, rgba(168,255,0,0.02) 50%, rgba(0,0,0,0.4) 100%)',
        border: '1px solid rgba(168,255,0,0.25)',
        clipPath: 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))',
      }} />

      {/* Cantos técnicos */}
      {['tl','tr','bl','br'].map(p => (
        <div key={p} style={{
          position: 'absolute',
          width: 14, height: 14,
          ...(p[0] === 't' ? { top: 5 } : { bottom: 5 }),
          ...(p[1] === 'l' ? { left: 5 } : { right: 5 }),
          borderTop: p[0] === 't' ? '2px solid #a8ff00' : 'none',
          borderBottom: p[0] === 'b' ? '2px solid #a8ff00' : 'none',
          borderLeft: p[1] === 'l' ? '2px solid #a8ff00' : 'none',
          borderRight: p[1] === 'r' ? '2px solid #a8ff00' : 'none',
        }} />
      ))}

      {/* Inicial gigante (placeholder até receber foto) */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexDirection: 'column', gap: 6,
      }}>
        <div style={{
          fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 'clamp(80px, 14vw, 120px)',
          color: 'rgba(168,255,0,0.85)', lineHeight: 1,
          filter: 'drop-shadow(0 0 18px rgba(168,255,0,0.4))',
          letterSpacing: '-0.05em',
        }}>
          H
        </div>
        <div style={{
          fontFamily: 'Share Tech Mono', fontSize: 8,
          color: 'rgba(168,255,0,0.5)', letterSpacing: '0.3em',
        }}>
          [DOSSIER #001]
        </div>
      </div>

      {/* Scanlines decorativas */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(168,255,0,0.04) 3px, rgba(168,255,0,0.04) 4px)',
        pointerEvents: 'none',
        clipPath: 'polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px))',
      }} />

      {/* Tag inferior */}
      <div style={{
        position: 'absolute', bottom: 12, left: 12, right: 12,
        background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(8px)',
        padding: '5px 9px',
        fontFamily: 'Share Tech Mono', fontSize: 8,
        color: 'rgba(255,255,255,0.7)', letterSpacing: '0.16em',
        display: 'flex', justifyContent: 'space-between',
        borderLeft: '2px solid #a8ff00',
      }}>
        <span>HENRIQUE</span>
        <span style={{ color: '#a8ff00' }}>ATIVO</span>
      </div>
    </div>
  );
}

function SobreHique() {
  return (
    <section style={{ padding: '70px 5vw', position: 'relative' }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>

        {/* Section label */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
          <div style={{ width: 22, height: 2, background: '#a8ff00' }} />
          <span style={{ fontFamily: 'Share Tech Mono', fontSize: 10, color: '#a8ff00', letterSpacing: '0.18em' }}>
            QUEM CONSTRÓI
          </span>
        </div>

        {/* Layout 2 colunas */}
        <div className="sobre-grid" style={{
          display: 'grid',
          gridTemplateColumns: '220px 1fr',
          gap: 40,
          alignItems: 'start',
          marginTop: 24,
        }}>
          <style>{`
            @media (max-width: 760px) {
              .sobre-grid {
                grid-template-columns: 1fr !important;
                gap: 28px !important;
              }
              .sobre-avatar-wrap {
                max-width: 200px;
                margin: 0 auto;
              }
            }
          `}</style>

          {/* Avatar */}
          <div className="sobre-avatar-wrap">
            <HiqueAvatar />
          </div>

          {/* Texto */}
          <div>
            <h2 style={{
              fontFamily: 'Rajdhani', fontWeight: 700,
              fontSize: 'clamp(34px, 4.5vw, 52px)',
              lineHeight: 0.95, marginBottom: 18,
              textTransform: 'uppercase',
              letterSpacing: '-0.01em',
              color: '#fff',
            }}>
              HIQUE
            </h2>

            {/* Tags */}
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 22 }}>
              {TAGS.map(t => (
                <span key={t} style={{
                  fontFamily: 'Share Tech Mono', fontSize: 9,
                  color: 'rgba(168,255,0,0.7)', letterSpacing: '0.14em',
                  padding: '4px 9px',
                  border: '1px solid rgba(168,255,0,0.3)',
                  background: 'rgba(168,255,0,0.05)',
                }}>
                  {t}
                </span>
              ))}
            </div>

            {/* Parágrafos */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {COPY.map((p, i) => (
                <p key={i} style={{
                  fontFamily: 'Rajdhani', fontWeight: 500,
                  fontSize: 14,
                  lineHeight: 1.7,
                  color: i === 0 ? 'rgba(255,255,255,0.88)' : 'rgba(255,255,255,0.65)',
                  letterSpacing: '0.005em',
                }}>
                  {p}
                </p>
              ))}
            </div>

            {/* Assinatura discreta */}
            <div style={{
              marginTop: 24, paddingTop: 16,
              borderTop: '1px solid rgba(168,255,0,0.15)',
              fontFamily: 'Share Tech Mono', fontSize: 9,
              color: 'rgba(255,255,255,0.32)', letterSpacing: '0.15em',
            }}>
              — HENRIQUE / SOLO DEV / 2026
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SobreHique });