import React, { Component } from 'react';
import Drawer from "./drawer";
import Radium, { StyleRoot } from "radium";
import $ from 'jquery';
import cookie from 'react-cookies';
import api from './api/api'
class newMemberOrientation extends Component {
  constructor(props) {
    super(props);
    if (
      cookie.load("user_id") == "" || cookie.load("user_id") == "undefined" || typeof(cookie.load("user_id")) == undefined
    ) {
      console.log("user_id", cookie.load("user_id"));
      props.history.push("/");
    }
    console.log("session", localStorage.getItem("current_state"));
    console.log("is_active", localStorage.getItem("login_is_active"));
    this.state={
      is_active:localStorage.getItem("login_is_active")==1?true:false,
      index:true
    }
}
 

render() {
  return (
   <div className="bcd_header_div_margin index_page_header"> 
    <div className="allpages_desktop_boxes_div index_pt"> 
    {this.state.is_active && <Drawer prop={this.props} />}
      <p  className="title3  text-center new_member_para">
        Welcome to
      </p>
      <div  className="text-center">
        <img
          src={api.image_path+"family_one.png"}
          alt=""
          title=""
          width="250px"
        />
      </div>
      <div className="inner_container" >
        <p className="new_member_para_second subtitle" style={{textAlign:"center"}} >
          Canada's largest parenting and family network
        </p>
        <p className="page-txt mt40" >
          family.one represents families from pregnancy to grandparents, and of all 
          configurations and sizes. 
        </p>
        <p className="page-txt mt40 new_member_para_third">
          family.one members have access to <span className="new_member_para_f">F</span>
                                            <span className="new_member_para_r">R</span>
                                            <span className="new_member_para_e">E</span>
                                            <span className="new_member_para_e1">E</span> products, 
          contests, Canada's first Perks program for families and
          loads more. 
        </p>
        <div className="mainactive_later mt70" style={{cursor:'pointer'}}>
          <a
            onClick={() => {
              localStorage.setItem("past_member","no")
              this.props.history.push("/new_member_orientation1")}}
            className="active_later new_member_anchor"
          >
            <span>
              Give me a sneak peek{" "}
              <i>
                <img
                  src={api.image_path+"next_arrow.jpg"}
                  alt=""
                  title=""
                  width="30"
                />
              </i>
            </span>
          </a>
        </div>
        {!this.state.loader && (
        <div className="mt70 mb50 text-center">
        <a className="skip_link" onClick={() => this.props.history.push("/new_member_orientation4")}>
                Skip
              </a>
            </div>
          )}
        <div className="mt70" />
      </div>
   </div>
  </div>
  );
}
}

export default newMemberOrientation;