// site-jogador/js/grid-diferenciais.jsx
//
// Grid de 6 diferenciais REAIS do servidor (substitui os 4 cards genéricos
// PVEVP/Base Building/Facções/Economia que foram removidos).
//
// Cada card explica em 1-2 frases POR QUE esse servidor é diferente,
// baseado em coisas que já existem ou estão em construção próxima.
// Ícones unicode/símbolos como placeholder até receber assets visuais.

const FEATURES = [
  {
    icon: '⬢',
    label: 'EQUIPAMENTO A.U.R.A.',
    status: 'pronto',
    statusLabel: 'PRONTO',
    description: 'Três tiers de armadura desenhada do zero pra esse servidor. Não existe em nenhum outro lugar — toda peça tem trade-off real (peso, calor, mobilidade).',
  },
  {
    icon: '◈',
    label: 'BALANCE PRÓPRIO',
    status: 'pronto',
    statusLabel: 'PRONTO',
    description: 'Sem kit invencível. Defesa vanilla recalibrada pra dar peso real à escolha de armadura. Bullet/Bite/Scratch redistribuídos pra evitar exploits clássicos.',
  },
  {
    icon: '◇',
    label: 'CRAFTING PROGRESSIVO',
    status: 'em-dev',
    statusLabel: 'EM DEV',
    description: 'Receitas escaláveis: T1 acessível com itens vanilla, T3 endgame com componentes raros. Banca de trabalho com tiers (improvisada → oficina → militar).',
  },
  {
    icon: '◆',
    label: 'ANTI-GRIEFING SÉRIO',
    status: 'planejado',
    statusLabel: 'PLANEJADO',
    description: 'Sistema desenhado por quem viveu de tudo: wipes acidentais, exploits, bases destruídas. Proteção real pra novatos sem matar o PvP de quem busca.',
  },
  {
    icon: '✦',
    label: 'TRANSPARÊNCIA TOTAL',
    status: 'pronto',
    statusLabel: 'PRONTO',
    description: 'Roadmap aberto, gastos públicos, decisões registradas. Você sabe pra onde a doação vai, o que está sendo construído e quando. Tudo documentado.',
  },
  {
    icon: '✧',
    label: 'EXPERIÊNCIA COM CAMADAS',
    status: 'planejado',
    statusLabel: 'PLANEJADO',
    description: 'Lore que recompensa quem investiga, sistemas que se conectam (NPCs ↔ economia ↔ quests), dificuldade que respeita o jogador. Quest System integrado.',
  },
];

const STATUS_COLORS = {
  pronto:     '#22c55e',
  'em-dev':   '#f59e0b',
  planejado:  '#3b82f6',
};

function FeatureCard({ feature }) {
  const [hovered, setHovered] = React.useState(false);
  const statusColor = STATUS_COLORS[feature.status];

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        background: 'rgba(28,28,28,0.7)',
        backdropFilter: 'blur(20px) saturate(1.2)',
        WebkitBackdropFilter: 'blur(20px) saturate(1.2)',
        border: '1px solid rgba(255,255,255,0.08)',
        borderTop: `2px solid ${statusColor}80`,
        padding: '28px 24px',
        display: 'flex',
        flexDirection: 'column',
        gap: 16,
        transition: 'transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s',
        transform: hovered ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hovered ? `0 8px 24px rgba(0,0,0,0.4), 0 0 16px ${statusColor}30` : 'none',
        position: 'relative',
        minHeight: 220,
      }}
    >
      {/* Status badge */}
      <div style={{
        position: 'absolute', top: 12, right: 12,
        fontFamily: 'Share Tech Mono', fontSize: 9,
        color: statusColor, letterSpacing: '0.18em',
        padding: '3px 8px',
        border: `1px solid ${statusColor}60`,
        background: `${statusColor}10`,
      }}>
        {feature.statusLabel}
      </div>

      {/* Ícone gigante */}
      <div style={{
        fontFamily: 'Share Tech Mono', fontSize: 56,
        color: 'rgba(168,255,0,0.85)', lineHeight: 1,
        filter: 'drop-shadow(0 0 14px rgba(168,255,0,0.35))',
        marginBottom: 4,
      }}>
        {feature.icon}
      </div>

      {/* Título */}
      <h3 style={{
        fontFamily: 'Rajdhani', fontWeight: 700,
        fontSize: 18, letterSpacing: '0.06em',
        textTransform: 'uppercase',
        color: '#fff',
        lineHeight: 1.2,
      }}>
        {feature.label}
      </h3>

      {/* Descrição */}
      <p style={{
        fontFamily: 'Rajdhani', fontWeight: 400,
        fontSize: 13, lineHeight: 1.7,
        color: 'rgba(255,255,255,0.6)',
        flex: 1,
      }}>
        {feature.description}
      </p>
    </div>
  );
}

function GridDiferenciais() {
  return (
    <section style={{ padding: '80px 5vw', position: 'relative', borderTop: '1px solid rgba(255,255,255,0.04)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>

        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <div style={{ width: 24, height: 2, background: '#a8ff00' }} />
          <span style={{ fontFamily: 'Share Tech Mono', fontSize: 11, color: '#a8ff00', letterSpacing: '0.18em' }}>
            POR QUE ESSE SERVIDOR
          </span>
        </div>

        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 40 }}>
          <h2 style={{
            fontFamily: 'Rajdhani', fontWeight: 700,
            fontSize: 'clamp(28px, 4vw, 48px)', lineHeight: 1.05,
            textTransform: 'uppercase',
            maxWidth: 720,
          }}>
            6 COISAS QUE VOCÊ NÃO ENCONTRA<br />
            <span style={{ color: '#a8ff00' }}>EM SERVIDOR GENÉRICO DE PZ</span>
          </h2>
          <p style={{
            color: 'rgba(255,255,255,0.5)', fontSize: 13,
            maxWidth: 320, lineHeight: 1.6, fontFamily: 'Share Tech Mono',
            letterSpacing: '0.02em',
          }}>
            Cada item rotulado com status real: <span style={{ color: STATUS_COLORS.pronto }}>PRONTO</span>, <span style={{ color: STATUS_COLORS['em-dev'] }}>EM DEV</span>, <span style={{ color: STATUS_COLORS.planejado }}>PLANEJADO</span>.
          </p>
        </div>

        {/* Grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 16,
        }}>
          {FEATURES.map(f => (
            <FeatureCard key={f.label} feature={f} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { GridDiferenciais });