text: /*!
  
  =========================================================
  * Paper Kit React - v1.2.0
  =========================================================
  
  * Product Page: https://www.creative-tim.com/product/paper-kit-react
  
  * Copyright 2020 Creative Tim (https://www.creative-tim.com)
  * Licensed under MIT (https://github.com/creativetimofficial/paper-kit-react/blob/master/LICENSE.md)
  
  * Coded by Creative Tim
  
  =========================================================
  
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  
  */
  import React, { useState } from "react";
  
  // reactstrap components
  import {
    Button,
    Card,
    CardBody,
    CardFooter,
    CardTitle,
    Form,
    Input,
    InputGroupAddon,
    InputGroupText,
    InputGroup,
    Container,
    Row,
    Col,
    Spinner,
  } from "reactstrap";
  
  // core components
  import LandingPageHeader from "components/Headers/LandingPageHeader.js";
  import { sendMail } from "../utils/mailUtils";
  
  function LandingPage({ setLoginModal }) {
    document.documentElement.classList.remove("nav-open");
    React.useEffect(() => {
      document.body.classList.add("profile-page");
      return function cleanup() {
        document.body.classList.remove("profile-page");
      };
    });
  
    const [mailButton, setMailButton] = useState({
      message: "SEND MESSAGE",
      color: "primary",
    });
  
    const handleContactSubmit = (e) => {
      e.preventDefault();
  
      setMailButton({ message: "SENDING", color: "primary" });
  
      const { name, emailContent, email } = e.target;
      const mail = {
        name: name.value,
        emailContent: emailContent.value,
        email: email.value,
      };
      console.log(mail);
  
      sendMail(mail)
        .then(() => {
          setMailButton({ message: "SENT", color: "success" });
          const form = document.getElementById("contact-form");
          form.reset();
          setTimeout(
            () => setMailButton({ message: "SEND MESSAGE", color: "primary" }),
            1500
          );
        })
        .catch(() => {
          setMailButton({ message: "SOMETHING WENT WRONG", color: "danger" });
          setTimeout(
            () => setMailButton({ message: "SEND MESSAGE", color: "primary" }),
            1500
          );
        });
    };
    return (
      <>
        <LandingPageHeader setLoginModal={setLoginModal} />
        <div className="main">
          <div className="section text-center">
            <Container>
              <Row>
                <Col className="ml-auto mr-auto" md="8">
                  <h2 className="title">Welcome!</h2>
                  <h5 className="description">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Illum eius soluta ratione sapiente deleniti facere, mollitia
                    qui nesciunt commodi iste quos, architecto, dolore doloribus
                    aliquam voluptas? Hic velit eaque fugiat.
                  </h5>
                  <br />
                  <Button
                    className="btn-round"
                    color="info"
                    href="#pablo"
                    onClick={(e) => e.preventDefault()}
                  >
                    See Details
                  </Button>
                </Col>
              </Row>
              <br />
              <br />
              <Row>
                <Col md="4">
                  <div className="info">
                    <div className="icon icon-info">
                      <i className="nc-icon nc-alert-circle-i" />
                    </div>
                    <div className="description">
                      <h4 className="info-title">How the Group Works</h4>
                      <p className="description">
                        Planning on buying just one or two things, or not every
                        month? Not a problem. Skipping a month? Also fine...
                      </p>
                      <Button className="btn-link" color="info" href="#pablo">
                        See more
                      </Button>
                    </div>
                  </div>
                </Col>
                <Col md="4">
                  <div className="info">
                    <div className="icon icon-info">
                      <i className="nc-icon nc-paper" />
                    </div>
                    <div className="description">
                      <h4 className="info-title">Ts & Cs</h4>
                      <p>
                        Terms and Conditions Local + Healthy + Ethical is a
                        private solidarity purchasing group run from a private
                        home in Lakeside, Cape Town. We are a community of people
                        who are committed to source food from various producers as
                        locally, directly and ethically as possible...
                      </p>
                      <Button className="btn-link" color="info" href="#pablo">
                        See more
                      </Button>
                    </div>
                  </div>
                </Col>
                <Col md="4">
                  <div className="info">
                    <div className="icon icon-info">
                      <i className="nc-icon nc-money-coins" />
                    </div>
                    <div className="description">
                      <h4 className="info-title">Bank Details</h4>
                      <p>
                        K.A Obree FNB Account number: 62167667222 Branch: 250655
                        Please use your name as a reference.
                      </p>
                      <Button className="btn-link" color="info" href="#pablo">
                        See more
                      </Button>
                    </div>
                  </div>
                </Col>
              </Row>
            </Container>
          </div>
          <div className="section section-dark text-center">
            <Container>
              <h2 className="title">The Team</h2>
              <Row>
                <Col md="4">
                  <Card className="card-profile card-plain">
                    <div className="card-avatar">
                      <a href="#pablo" onClick={(e) => e.preventDefault()}>
                        <img
                          alt="..."
                          src={require("assets/img/faces/clem-onojeghuo-3.jpg")}
                        />
                      </a>
                    </div>
                    <CardBody>
                      <a href="#pablo" onClick={(e) => e.preventDefault()}>
                        <div className="author">
                          <CardTitle tag="h4">Henry Ford</CardTitle>
                          <h6 className="card-category">Product Manager</h6>
                        </div>
                      </a>
                      <p className="card-description text-center">
                        Teamwork is so important that it is virtually impossible
                        for you to reach the heights of your capabilities or make
                        the money that you want without becoming very good at it.
                      </p>
                    </CardBody>
                    <CardFooter className="text-center">
                      <Button
                        className="btn-just-icon btn-neutral"
                        color="link"
                        href="#pablo"
                        onClick={(e) => e.preventDefault()}
                      >
                        <i className="fa fa-twitter" />
                      </Button>
                      <Button
                        className="btn-just-icon btn-neutral ml-1"
                        color="link"
                        href="#pablo"
                        onClick={(e) => e.preventDefault()}
                      >
                        <i className="fa fa-google-plus" />
                      </Button>
                      <Button
                        className="btn-just-icon btn-neutral ml-1"
                        color="link"
                        href="#pablo"
                        onClick={(e) => e.preventDefault()}
                      >
                        <i className="fa fa-linkedin" />
                      </Button>
                    </CardFooter>
                  </Card>
                </Col>
                <Col md="4">
                  <Card className="card-profile card-plain">
                    <div className="card-avatar">
                      <a href="#pablo" onClick={(e) => e.preventDefault()}>
                        <img
                          alt="..."
                          src={require("assets/img/faces/joe-gardner-2.jpg")}
                        />
                      </a>
                    </div>
                    <CardBody>
                      <a href="#pablo" onClick={(e) => e.preventDefault()}>
                        <div className="author">
                          <CardTitle tag="h4">Sophie West</CardTitle>
                          <h6 className="card-category">Designer</h6>
                        </div>
                      </a>
                      <p className="card-description text-center">
                        A group becomes a team when each member is sure enough of
                        himself and his contribution to praise the skill of the
                        others. No one can whistle a symphony. It takes an
                        orchestra to play it.
                      </p>
                    </CardBody>
                    <CardFooter className="text-center">
                      <Button
                        className="btn-just-icon btn-neutral"
                        color="link"
                        href="#pablo"
                        onClick={(e) => e.preventDefault()}
                      >
                        <i className="fa fa-twitter" />
                      </Button>
                      <Button
                        className="btn-just-icon btn-neutral ml-1"
                        color="link"
                        href="#pablo"
                        onClick={(e) => e.preventDefault()}
                      >
                        <i className="fa fa-google-plus" />
                      </Button>
                      <Button
                        className="btn-just-icon btn-neutral ml-1"
                        color="link"
                        href="#pablo"
                        onClick={(e) => e.preventDefault()}
                      >
                        <i className="fa fa-linkedin" />
                      </Button>
                    </CardFooter>
                  </Card>
                </Col>
                <Col md="4">
                  <Card className="card-profile card-plain">
                    <div className="card-avatar">
                      <a href="#pablo" onClick={(e) => e.preventDefault()}>
                        <img
                          alt="..."
                          src={require("assets/img/faces/erik-lucatero-2.jpg")}
                        />
                      </a>
                    </div>
                    <CardBody>
                      <a href="#pablo" onClick={(e) => e.preventDefault()}>
                        <div className="author">
                          <CardTitle tag="h4">Robert Orben</CardTitle>
                          <h6 className="card-category">Developer</h6>
                        </div>
                      </a>
                      <p className="card-description text-center">
                        The strength of the team is each individual member. The
                        strength of each member is the team. If you can laugh
                        together, you can work together, silence isn’t golden,
                        it’s deadly.
                      </p>
                    </CardBody>
                    <CardFooter className="text-center">
                      <Button
                        className="btn-just-icon btn-neutral"
                        color="link"
                        href="#pablo"
                        onClick={(e) => e.preventDefault()}
                      >
                        <i className="fa fa-twitter" />
                      </Button>
                      <Button
                        className="btn-just-icon btn-neutral ml-1"
                        color="link"
                        href="#pablo"
                        onClick={(e) => e.preventDefault()}
                      >
                        <i className="fa fa-google-plus" />
                      </Button>
                      <Button
                        className="btn-just-icon btn-neutral ml-1"
                        color="link"
                        href="#pablo"
                        onClick={(e) => e.preventDefault()}
                      >
                        <i className="fa fa-linkedin" />
                      </Button>
                    </CardFooter>
                  </Card>
                </Col>
              </Row>
            </Container>
          </div>
          <div className="section landing-section">
            <Container>
              <Row>
                <Col className="ml-auto mr-auto" md="8">
                  <h2 className="text-center">Get in Touch!</h2>
                  <Form
                    onSubmit={handleContactSubmit}
                    className="contact-form"
                    id="contact-form"
                  >
                    <Row>
                      <Col md="6">
                        <label>Name</label>
                        <InputGroup>
                          <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                              <i className="nc-icon nc-single-02" />
                            </InputGroupText>
                          </InputGroupAddon>
                          <Input
                            name="name"
                            placeholder="Name"
                            type="text"
                            required
                          />
                        </InputGroup>
                      </Col>
                      <Col md="6">
                        <label>Email</label>
                        <InputGroup>
                          <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                              <i className="nc-icon nc-email-85" />
                            </InputGroupText>
                          </InputGroupAddon>
                          <Input
                            name="email"
                            placeholder="Email"
                            type="email"
                            required
                          />
                        </InputGroup>
                      </Col>
                    </Row>
                    <label>Message</label>
                    <Input
                      name="emailContent"
                      placeholder="Tell us your thoughts and feelings..."
                      type="textarea"
                      rows="4"
                      required
                    />
                    <Row>
                      <Col className="ml-auto mr-auto" md="4">
                        <Button
                          type="submit"
                          className="btn-fill"
                          color={mailButton.color}
                          size="lg"
                        >
                          {mailButton.message}
                          {mailButton.message === "SENDING" && (
                            <Spinner size="sm" className="ml-2" />
                          )}
                          {mailButton.message === "SENT" && (
                            <i className="ml-2 nc-icon nc-check-2" />
                          )}
                          {mailButton.message === "SOMETHING WENT WRONG" && (
                            <i className="ml-2 nc-icon nc-simple-remove" />
                          )}
                        </Button>
                      </Col>
                    </Row>
                  </Form>
                </Col>
              </Row>
            </Container>
          </div>
        </div>
      </>
    );
  }
  
  export default LandingPage;
  