/* Surgr Landing — Phone Mockup (in-app preview shown beside hero) */

const { Icons: PMIcons } = window.SurgrLandingKit;

function PhoneMockup() {
  return (
    <div style={{
      width: '100%', maxWidth: 340, margin: '0 auto',
      background: 'linear-gradient(160deg, rgba(200,255,0,0.08), rgba(200,255,0,0.02) 50%, transparent)',
      borderRadius: 36,
      border: '1px solid rgba(255,255,255,0.08)',
      padding: '24px 20px',
      animation: 'surgr-float 6s ease-in-out infinite',
    }}>
      {/* Status bar */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 20, padding: '0 4px', color: '#55556A', fontSize: 12,
        fontFamily: 'var(--surgr-font-body)', fontWeight: 600,
      }}>
        <span>9:41</span>
        <span style={{ color: 'var(--surgr-accent)', fontWeight: 800, letterSpacing: 1 }}>SURGR</span>
        <span>100%</span>
      </div>

      {/* Treino card */}
      <div style={{
        borderRadius: 16, padding: 16, marginBottom: 12,
        background: 'rgba(255,255,255,0.03)',
        border: '1px solid rgba(255,255,255,0.06)',
      }}>
        <div style={{
          fontSize: 10, fontWeight: 800, letterSpacing: 2, textTransform: 'uppercase',
          color: 'var(--surgr-accent)', marginBottom: 8,
          fontFamily: 'var(--surgr-font-body)',
        }}>PRÓXIMO TREINO</div>
        <div style={{
          fontFamily: 'var(--surgr-font-heading)',
          fontWeight: 700, fontSize: 22, color: '#FFF', letterSpacing: 0.5,
        }}>Push Day · Força</div>
        <div style={{ fontSize: 12, color: '#8F8F9A', marginTop: 4, fontFamily: 'var(--surgr-font-body)' }}>
          6 exercícios · ~58 min
        </div>
      </div>

      {/* Coach bubble */}
      <div style={{
        borderRadius: 16, padding: 14,
        background: 'rgba(200,255,0,0.05)',
        border: '1px solid rgba(200,255,0,0.15)',
        marginBottom: 12,
      }}>
        <div style={{
          fontSize: 10, fontWeight: 800, letterSpacing: 2, textTransform: 'uppercase',
          color: 'var(--surgr-accent)', marginBottom: 6,
          fontFamily: 'var(--surgr-font-body)',
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <PMIcons.Brain size={11}/> SURGR COACH
        </div>
        <div style={{
          fontSize: 12, color: '#CCC', lineHeight: 1.5,
          fontFamily: 'var(--surgr-font-body)', fontWeight: 500,
        }}>
          Aumento detectado. Vamos pra <strong style={{ color: 'var(--surgr-accent)' }}>82.5kg</strong> hoje pra quebrar o platô.
        </div>
      </div>

      {/* Stat row */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
        {[['Streak', '7d'], ['Volume', '8.5t'], ['PRs', '12']].map(([l, v]) => (
          <div key={l} style={{
            background: 'rgba(255,255,255,0.03)',
            border: '1px solid rgba(255,255,255,0.06)',
            borderRadius: 12, padding: 10,
          }}>
            <div style={{
              fontFamily: 'var(--surgr-font-heading)', fontWeight: 700, fontSize: 18,
              color: '#FFF', letterSpacing: 0.5,
            }}>{v}</div>
            <div style={{
              fontSize: 9, fontWeight: 800, letterSpacing: 1.5, textTransform: 'uppercase',
              color: '#55556A', marginTop: 2, fontFamily: 'var(--surgr-font-body)',
            }}>{l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.SurgrLandingKit.PhoneMockup = PhoneMockup;