/* Surgr · Comparison block — vs generic logger apps (Hevy-style) */

const { useState: cmpUseState } = React;

const ROWS = [
  { feat: 'Logar treino',           rivals: 'manual, todo set, todo dia',     surgr: 'auto, com sugestão de carga' },
  { feat: 'Trocar exercício',       rivals: 'você decide sozinho',            surgr: 'IA propõe substituto equivalente' },
  { feat: 'Ajuste de carga',        rivals: 'planilha mental',                surgr: 'baseado no seu RPE de ontem' },
  { feat: 'Dor / lesão',             rivals: 'não cobre',                      surgr: 'avalia, ajusta plano, alerta limite' },
  { feat: 'Plano inicial',           rivals: 'template genérico',              surgr: 'gerado pelo seu objetivo + nível' },
  { feat: 'Treinador disponível',   rivals: 'r/Fitness no Reddit',            surgr: '24/7, no chat, em português' },
  { feat: 'Idioma',                  rivals: 'inglês, mal traduzido',          surgr: 'pt-BR nativo, gíria de academia' },
];

function ComparisonSection() {
  const [hover, setHover] = cmpUseState(null);

  return (
    <section style={{
      padding: '120px 24px',
      maxWidth: 1100, margin: '0 auto',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <p style={{
          fontFamily: 'var(--surgr-font-body)', fontSize: 12, fontWeight: 800,
          letterSpacing: 3, textTransform: 'uppercase', color: 'var(--surgr-accent)',
          margin: 0,
        }}>VS. APPS DE LOGAR TREINO</p>
        <h2 style={{
          fontFamily: 'var(--surgr-font-heading)', fontWeight: 800,
          fontSize: 'clamp(40px, 6vw, 72px)', letterSpacing: -1.5, lineHeight: 1.0,
          color: 'var(--surgr-text-strong)', margin: '14px 0 0', textTransform: 'uppercase',
        }}>
          PLANILHA NÃO<br/>É TREINADOR.
        </h2>
        <p style={{
          maxWidth: 540, margin: '20px auto 0',
          color: 'var(--surgr-text-muted)', fontSize: 16, lineHeight: 1.6, fontWeight: 500,
        }}>
          Apps como Hevy te dão um caderno digital. A Surgr substitui o personal — adapta o
          plano, monitora carga e responde quando você trava.
        </p>
      </div>

      {/* Table */}
      <div style={{
        background: 'rgba(255,255,255,0.02)',
        border: '1px solid rgba(255,255,255,0.06)',
        borderRadius: 24, overflow: 'hidden',
      }}>
        {/* Head */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr',
          padding: '20px 28px', alignItems: 'end',
          borderBottom: '1px solid rgba(255,255,255,0.06)',
        }}>
          <span style={{
            fontSize: 11, fontWeight: 800, letterSpacing: 2,
            textTransform: 'uppercase', color: 'var(--surgr-text-dim)',
          }}>Recurso</span>
          <span style={{
            fontFamily: 'var(--surgr-font-heading)', fontWeight: 700,
            fontSize: 14, letterSpacing: 1.5, textTransform: 'uppercase',
            color: 'var(--surgr-text-muted)',
          }}>App de logar</span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontFamily: 'var(--surgr-font-heading)', fontWeight: 800,
            fontSize: 16, letterSpacing: 2, textTransform: 'uppercase',
            color: 'var(--surgr-accent)',
          }}>
            <span style={{
              width: 22, height: 22, borderRadius: 6,
              background: 'var(--surgr-accent)', color: '#000',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--surgr-font-heading)', fontWeight: 800, fontSize: 13,
            }}>S</span>
            SURGR
          </span>
        </div>

        {/* Rows */}
        {ROWS.map((r, i) => (
          <div key={i}
            onMouseEnter={() => setHover(i)}
            onMouseLeave={() => setHover(null)}
            style={{
              display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr',
              padding: '22px 28px',
              borderBottom: i === ROWS.length - 1 ? 'none' : '1px solid rgba(255,255,255,0.04)',
              background: hover === i ? 'rgba(200,255,0,0.02)' : 'transparent',
              transition: 'background 0.2s ease',
              alignItems: 'center',
            }}>
            <span style={{
              fontFamily: 'var(--surgr-font-heading)', fontWeight: 700,
              fontSize: 17, letterSpacing: 0.3, color: 'var(--surgr-text-strong)',
            }}>{r.feat}</span>
            <span style={{
              fontSize: 14, fontWeight: 500, lineHeight: 1.5,
              color: 'var(--surgr-text-dim)',
              display: 'inline-flex', alignItems: 'center', gap: 10,
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#55556A" strokeWidth="2.5" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
              {r.rivals}
            </span>
            <span style={{
              fontSize: 14, fontWeight: 600, lineHeight: 1.5,
              color: 'var(--surgr-text)',
              display: 'inline-flex', alignItems: 'center', gap: 10,
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#C8FF00" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
              {r.surgr}
            </span>
          </div>
        ))}
      </div>

      <p style={{
        textAlign: 'center', marginTop: 24,
        color: 'var(--surgr-text-dim)', fontSize: 12, letterSpacing: 1.5,
        fontWeight: 700, textTransform: 'uppercase',
      }}>
        Comparação baseada nos planos públicos de Hevy, Strong e Fitbod (mai/2026)
      </p>
    </section>
  );
}

window.SurgrLandingKit.ComparisonSection = ComparisonSection;