import React from "react";
const json = require('../HomePopularCards/carddata.json');
console.log(json);
export default function ProjectDetailPage(props) {
  const projectID = props.match.params.projectID;
  const project = json.cards.find(card => card.projectID === projectID);

  return (    
    <div>
      <div className="container-fluid page-header">
        <div className="row">
          <div className="col-md-12">
            <h2 className="text-center">{project.projectName}</h2>
          </div>
        </div>
      </div>

      <div className="container">
        <div className="row">
          <div className="col-md-8">
            <iframe width="667" height="315" src={project.videoUrl} title="Tent Video"  />
            <div className="project-share w-hidden-main w-hidden-medium">
              <a
                className="btn btn-inline btn-small btn-transparent link-hidden-light u-marginbottom-10"
                href="/pt/explore?pg_search=DF"
              >
                <span className="fa fa-map-marker" /> New York, NY
              </a>
              <a
                className="btn btn-inline btn-small btn-transparent link-hidden-light"
                href="/pt/explore#by_category_id/7"
              >
                <span className="fa fa-tag" />Product Design
              </a>
            </div>
            <div className="project-share w-hidden-small w-hidden-tiny">
              <div className="u-marginbottom-30 u-text-center-small-only">
                <div className="w-inline-block fontcolor-secondary fontsize-smaller u-marginright-20">
                  Share On:
                </div>

                <div
                  className="btn btn-inline btn-medium btn-terciary u-marginright-20"
                  data-href="https://developers.facebook.com/docs/plugins/"
                  data-layout="button_count"
                  data-mobile-iframe="true"
                  data-size="small"
                >
                  <a
                    className="fb-xfbml-parse-ignore"
                    target="_blank" rel="noopener noreferrer"
                    href="https://www.facebook.com/sharer/sharer.php?u=http://myhobnob.xyz/projects/1&amp;src=sdkpreparse"
                  >
                    Facebook
                  </a>
                </div>

                <div
                  className="btn btn-inline btn-medium btn-terciary u-marginright-20"
                  data-href="https://developers.facebook.com/docs/plugins/"
                  data-layout="button_count"
                  data-mobile-iframe="true"
                  data-size="small"
                >
                  <a
                    className="fb-xfbml-parse-ignore"
                    target="_blank" rel="noopener noreferrer"
                    href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://myhobnob.xyz/1/summary=Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experiencesource=LinkedIn"
                  >
                    LinkedIn
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div className="col-md-4">
            <div className="aside" id="project-sidebar">
              <div className="project-stats">
                <div className="project-stats-inner">
                  <div className="project-blurb">
                    {project.projectBy}
                    {project.projectDescrition}
                    {project.projectLocation}
                  </div>
                  <div className="back-project-btn-div">
                    <div className="back-project--btn-row">
                      <a
                        className="btn btn-back-it btn-large  u-marginbottom-20"
                        id="contribute_project_form"
                        href="https://www.indiegogo.com/projects/one-tent-system-every-possibility-crua-clan-camping/"
                      >
                        Back It
                      </a>
                    </div>

                    <div className="back-project-btn-row-right">
                      <a
                        className="facebook_cube3d tsc_social_cube64"
                        title="facebook"
                        href="https://www.facebook.com/sharer/sharer.php?u=http://myhobnob.xyz/projects/1&amp;src=sdkpreparse"
                      >
                        facebook
                      </a>
                    </div>
                  </div>
                  <div className="fontsize-smaller u-marginbottom-30 ">
                    You can support this project until Sat, September 2 2017
                    12:01 AM BST.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="container">
        <div className="row">
          <div className="col-md-8 project-about">
            <p className="fontsize-base">
              <br />
              <strong>Overview</strong>
            </p>
            {/* <img src={require(`../../../assets/images/${project.overviewImage}`)} /><br /> <br /> */}
            {project.overviewPara}
            <br />
            <br />
            {project.subpara1}
            <br />
            <br />
            {project.subpara2}
            <br />
            <br />
            {project.subpara3}
            <br />
            <br />
            {project.subpara4}
            <br />
            <br />
            {project.subpara5}
            <br />
            <br />
            {/* <p><img src={require(`../../../assets/images/${project.tentImage1}`)} /></p>
                        <p><img src={require(`../../../assets/images/${project.tentImage2}`)} /></p>
                        <p><img src={require(`../../../assets/images/${project.tentImage3}`)} /></p>
                        <p><img src={require(`../../../assets/images/${project.tentImage4}`)} /></p>
                        <p><img src={require(`../../../assets/images/${project.tentImage5}`)} /></p>
                        <p><img src={require(`../../../assets/images/${project.tentImage6}`)} /></p> */}
            <p>
              <strong>One Revolutionary System</strong>
            </p>
            {project.midPara}
            <br />
            <br />
            {project.midPara1}
            <br />
            <br />
            {project.midPara2}
            <br />
            <br />
            {project.midPara3}
            <br />
            <br />
            {project.midPara4}
            <br />
            <br />
            {/* <p><img src={require(`../../../assets/images/${project.tentImage7}`)} /></p>
                        <p><img src={require(`../../../assets/images/${project.tentImage8}`)} /></p> 
                        <p><strong>SPECS</strong></p>
                        <p><img src={require(`../../../assets/images/${project.tentImage10}`)} /></p>
                        <p><strong>Timeline</strong></p>
                        <p><img src={require(`../../../assets/images/${project.tentImage11}`)} /></p>
                        <p><strong>As seen on</strong></p>
                        <p><img src={require(`../../../assets/images/${project.tentImage9}`)} /></p> */}
          </div>
          <div className="col-md-4 ">
            <br />
            <div className="fontsize-base fontweight-semibold u-marginbottom-30">
              Project Inventor
            </div>
            <div className="reward u-marginbottom-30" id="rewards">
              <div className="card-reward  card card-secondary u-marginbottom-10">
                <div className="u-marginbottom-20">
                  {/* <img className="img-circle" src={require(`../../../assets/images/${project.profileImage}`)} /> */}
                  <div className="fontsize-base fontweight-semibold">
                    Crua Outdoors
                  </div>
                </div>
                <br />
                <div className="fontsize-smaller fontweight-semibold" />
                <div className="fontsize-smaller reward-description fontcolor-secondary">
                  <p>Visit Them:</p>
                  <ul className="w-hidden-tiny w-hidden-small w-list-unstyled fontsize-smaller fontweight-semibold u-margintop-20 u-marginbottom-20">
                    <li>
                      <a
                        className="link-hidden"
                        target="_blank" rel="noopener noreferrer"
                        
                        href="https://www.cruaoutdoors.com"
                      >
                        https://www.cruaoutdoors.com
                      </a>
                    </li>
                    <li>
                      <a
                        className="link-hidden"
                        target="_blank" rel="noopener noreferrer"
                        href="https://www.facebook.com/thermotents/"
                      >
                        www.facebook.com
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}