/* Surgr Landing — Trainer Chat preview section */

const { GlassCard: TCGlassCard, SectionHead: TCSectionHead, Icons: TCIcons } = window.SurgrLandingKit;

function TrainerChatSection() {
  return (
    <section style={{
      padding: '120px 24px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 60, alignItems: 'center' }}>
        <div>
          <p style={{
            fontFamily: 'var(--surgr-font-body)',
            fontSize: 11, fontWeight: 800, letterSpacing: 3,
            textTransform: 'uppercase',
            color: 'var(--surgr-accent)',
            margin: '0 0 16px',
          }}>O TREINADOR</p>
          <h2 style={{
            fontFamily: 'var(--surgr-font-heading)',
            fontWeight: 800,
            fontSize: 'clamp(36px, 5vw, 56px)',
            letterSpacing: -1,
            lineHeight: 1.05,
            color: '#FFF',
            margin: 0,
          }}>FALA COM ELE.<br/>ELE TE OUVE <span style={{ color: 'var(--surgr-accent)', textShadow: '0 0 30px rgba(200,255,0,0.4)' }}>DE VERDADE</span>.</h2>
          <p style={{
            fontFamily: 'var(--surgr-font-body)',
            fontSize: 17, color: '#8888A0',
            marginTop: 20, lineHeight: 1.6,
          }}>
            Pergunta sobre forma, dor, substituição, periodização. Ele lê seu histórico, vê suas cargas, e responde com ajustes aplicados no app — não receita pronta.
          </p>
        </div>

        <TCGlassCard accent="#C8FF00">
          {/* User msg */}
          <div style={{
            alignSelf: 'flex-end',
            background: 'rgba(255,255,255,0.05)',
            border: '1px solid rgba(255,255,255,0.06)',
            borderRadius: '18px 4px 18px 18px',
            padding: '12px 16px',
            maxWidth: '85%',
            marginLeft: 'auto', marginBottom: 16,
            fontSize: 14, color: '#F0F0F5',
            lineHeight: 1.55,
            fontFamily: 'var(--surgr-font-body)', fontWeight: 500,
          }}>
            Meu ombro estala na elevação lateral, o que eu faço?
          </div>

          {/* Bot msg */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8,
            fontSize: 11, fontWeight: 800, letterSpacing: 2,
            textTransform: 'uppercase', color: 'var(--surgr-accent)',
            fontFamily: 'var(--surgr-font-body)',
          }}>
            <span style={{ width: 8, height: 8, borderRadius: 4, background: '#C8FF00', boxShadow: '0 0 10px #C8FF00', animation: 'surgr-pulse 2s ease-in-out infinite' }}/>
            SURGR TREINADOR
          </div>
          <div style={{
            background: 'rgba(200,255,0,0.06)',
            border: '1px solid rgba(200,255,0,0.15)',
            borderRadius: '4px 18px 18px 18px',
            padding: '14px 18px',
            fontSize: 14,
            lineHeight: 1.6,
            color: '#F0F0F5',
            fontFamily: 'var(--surgr-font-body)', fontWeight: 500,
          }}>
            Isso indica atrito subacromial. Faz a elevação no plano escapular, ~30° à frente da linha dos ombros. Levemente rotacionado internamente.
            <div style={{
              marginTop: 12, padding: '10px 12px',
              background: 'rgba(0,0,0,0.3)',
              borderRadius: 10,
              display: 'flex', alignItems: 'center', gap: 8,
              fontSize: 11, fontWeight: 800, letterSpacing: 1.5,
              textTransform: 'uppercase', color: 'var(--surgr-accent)',
            }}>
              <TCIcons.Check size={14}/> AJUSTEI SEU TREINO NO APP
            </div>
          </div>
        </TCGlassCard>
      </div>
    </section>
  );
}

window.SurgrLandingKit.TrainerChatSection = TrainerChatSection;