import React, { Component } from 'react';
import './RightContentDisplay.scss';
import { Link } from 'react-router';

export default class RightContentDisplay extends Component {
  static displayName = 'RightContentDisplay';

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div className="right-content-display" style={styles.container}>
        <div style={styles.content}>
          <h2 style={styles.title}>现已公测</h2>
          <p style={styles.description}>
            <a href="https://survey.alibaba.com/survey/40jTDgV_R">
              点击这里提交申请
            </a>{' '}
            将有机会获得企业级 VIP 支持。（<Link to="/docs/vip">
              了解 VIP 服务
            </Link>
            ）
          </p>
        </div>
      </div>
    );
  }
}

const styles = {
  container: {
    background: '#fafafa',
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    position: 'relative',
    alignItems: 'center',
    overflow: 'hidden',
    height: '300px',
  },
  col: {
    width: '1000%',
  },
  title: {
    fontSize: '28px',
    fontWeight: 'bold',
  },
  description: {
    color: '#666',
    lineHeight: '22px',
    marginTop: '20px',
  },
  image: {
    position: 'absolute',
    top: '20px',
    width: '40%',
  },
};