import React, { Component } from "react";
import "./planes.css";
import { withRouter, } from "react-router-dom";
import { Row,Col,CarouselItem, Container } from 'react-bootstrap'
import Carousel from 'react-bootstrap/Carousel'
import ReactPlayer from 'react-player';

class PlanesPage extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  componentDidMount() {
    this.props.initsetState({ sectionPage : 'plan' });
  }

  render() {
    const { height, arrData } = this.props.initState
    const date = new Date();
    return (
      <div className="grid-cell grid-cell-sidebar" style={{ height: `calc(${height}px - 60px)`, overflow: 'auto', paddingTop: 0,backgroundColor:'#eaeaea' }} >
        { /* Planes View */ }
          {/* <img src={'img/txt.png' } alt="banner" style={{width:'100%'}}/> */}
          <Container className="wrapper">
            
            <Row className="justify-content-sm-center pb-0">
                <Col xs={12} className="mb-3">
                  {/*<p className={'text-center'}>¡Hola { arrData.name_member }!</p>*/}
                  <h2 className="text-center">Elige tu <span style={{color:"#ff0350"}}>tarjeta.id</span></h2>
                  
                </Col>
                <Col xs={12} md={6}>
                    <div className="box__plan" onClick={
                    ()=>{ this.onSelectPlan(1) }
                  }>
                      {/* <img className="box__plan__logo" src={'img/mini-logo.png'} alt="logo_mini"/> */}
                      <img className="box__plan__logo" src={'img/iphone-mini.png'}/>
                      <ul className="box__plan_list mt-3">
                        <li>El diseño de tu id digital</li>
                        <li>Tu propia url y QR para compartir</li>
                        <li>Integración con tu website</li>
                        <li>Integración con whatsapp y redes sociales</li>
                        <li>Tu información actualizada de forma sencilla 24/7</li>
                        <li>Editor automátizado y soporte técnico.</li>
                      </ul>
                      <img className="box__plan__logo__price" src={'img/price-mini.png?id=20'}/>
                      <button className="btn btn-primary btn-block box__plan_button" onClick={()=>{ this.onSelectPlan(1) }}>ELEGIR ID MINI</button>
                    </div>
                </Col>
                <Col xs={12} md={6} className="mt-5 mt-sm-5 mt-md-0">
                  <div className="box__plan" onClick={
                    ()=>{ this.onSelectPlan(2) }
                  }>
                      {/* <img className="box__plan__logo" src={'img/plus-logo.png'} alt="logo_mini"/> */}
                      <img className="box__plan__logo" src={'img/iphone-plus.png'}/>
                      <p style={{marginLeft:'30px',color:'#606060'}}>Todas las ventajas de una tarjeta.id con un plus de contenido personalizado:</p>
                      <ul className="box__plan_list mt-1">
                        <li>Editor de portada</li>
                        <li>Sección de diapositivas de imagenes</li>
                        <li>Sección para incluir tu video</li>
                        <li>Sección para incrustar tu ubicación en google maps</li>
                        <li>Sección de testimonios</li>
                      </ul>
                      <img className="box__plan__logo__price" src={'img/price-plus.png?id=20'}/>
                      <button className="btn btn-primary btn-block box__plan_button" onClick={()=>{ this.onSelectPlan(2) }}>ELEGIR ID PLUS</button>
                    </div>
                </Col>
                {/* <Col xs={12} md={12}>
                  <img className="box__plan__logo__banner" src={'img/banner.png?id=20'} alt="banner"/>
                </Col> */}
            </Row>
          </Container>

          {/* <img src={'img/banner_footer.png' } alt="banner" style={{width:'100%'}}/> */}

          <Container fluid>
            <Row style={{justifyContent:'center'}}>
              <Col xs={12} md={8} style={{justifyContent:'center',marginTop:'70px'}}>
                <h3 style={{fontSize:'2.1rem',textAlign:'center',fontWeight:'500',color:'#606060'}}>¿Aún tienes dudas o necesitas atención personalizada? ¡contáctanos!</h3>
              </Col>
              <Col xs={12} style={{justifyContent:'center',textAlign:'center',marginTop:'35px'}}>
                <a href={'https://www.instagram.com/tarjetaid/'} target={'_blank'}><img style={{width:'80px',height:'80px'}} src={'img/icons_redes/ig.png?id=20'} alt="icon_social1" /></a>
                <a href={'https://www.facebook.com/tarjeta.id'} target={'_blank'}><img style={{width:'80px',height:'80px'}} src={'img/icons_redes/fb.png?id=20'} alt="icon_social2" /></a>
                <a href={'https://www.linkedin.com/showcase/tarjeta.id'} target="_blank"><img style={{width:'80px',height:'80px'}} src={'img/icons_redes/in.png?id=20'} alt="icon_social3" /></a>
                <a href={'https://wa.me/5214811119787?text=Hola%20podr%C3%ADas%20darme%20informes.'} target="_blank"><img style={{width:'80px',height:'80px'}} src={'img/icons_redes/wa.png?id=20'} alt="icon_social4" /></a>
                <a href={'mailto:elizabeth@wsoft.com.mx?subject=Hola%20podr%C3%ADas%20darme%20informes.'} target={'_blank'}><img style={{width:'80px',height:'80px'}} src={'img/icons_redes/mail.png?id=20'} alt="icon_social5" /></a>
              </Col>
              <Col xs={12} style={{textAlign:'center',marginTop:'35px'}}>
                <p style={{fontSize:'1.4rem',color:'#606060'}}>© {date.getFullYear()} All Rights Reserved tarjeta.id Developed by WSoft</p>
              </Col>
            </Row>
          </Container>

      </div>
    )
  }

  onSelectPlan(opt) {
    const { arrData, app_id_s, } = this.props.initState
    console.log(app_id_s)

    if(opt === 1) {
      // window.location = `https://editor.tarjeta.id/?e=${encodeURI(arrData.correo)}&n=${encodeURI(arrData.name_member)}&p=${encodeURI(arrData.telefono)}&app_id_dash=${encodeURI(app_id_s)}`
      window.location = `https://editor.tarjeta.id/`
    } else if(opt === 2) {
      // window.location = `https://plus.tarjeta.id/?app_id_s=${encodeURI(app_id_s)}`
      window.location = `https://plus.tarjeta.id/`
    }

  }

  initsetState(param) {
    this.props.initsetState(param)
    return true
  }

};

export default withRouter(PlanesPage)