import Button from "../../pageElements/Button";
import suitAI from "../../Assets/Images/suitAI.png";
import laptop from "../../Assets/Images/laptop.png";
import arrow from "../../Assets/Images/Arrow.png";
import scales_centered from "../../Assets/Images/scales_centered.png";
import hand_rework7 from "../../Assets/Images/hand_rework7.png";
import gavel_clear1 from "../../Assets/Images/gavel_clear1.png";
import Group80 from "../../Assets/Images/Group80.png";
import { useNavigate } from "react-router-dom";
import "../../styles/homepage.scss";

const HomePage = () => {
  const navigate = useNavigate();

  const handleNavigate = () => {
    navigate("/signup");
  };

  const handleLogin = () => {
    navigate("/login");
  };

  const handleDemo = () => {
    const supReq = null;
    navigate("/requestpage/supReq");
  };

  return (
    <>
      <div className="homepage-container">
        <section
          className="section-1"
          style={{ backgroundImage: `url(${suitAI})`, backgroundSize: "cover" }}
        >
          <div className="first-section-subcontainer">
            <div className="row upper-row-one">
              <div className="col-md-12">
                <div className="heading-one-container">
                  <h1 className="heading-1">
                    Novodraft: Leverage AI to draft discovery faster <i>and </i>{" "}
                    smarter.
                  </h1>
                </div>
                <p className="text-block-1">
                  Responses ready to serve in minutes.
                </p>
                <p className="text-block-two">
                  Reclaim hours every week. Boost your billables or spend more
                  time growing your practice.
                </p>
                <div className="try-it-button-box">
                  <Button
                    className="primary-button homepage-button"
                    labelText="Try It For Free"
                    onClick={handleNavigate}
                  />
                </div>
              </div>
            </div>
          </div>
        </section>
        {/* Section 2 */}
        <section className="section-2">
          <div className="home-row">
            <div className="home-col-50">
              <div className="heading-2-mobile-box">
                <h2 className="heading-2-mobile">
                  Made by Attorneys, for Attorneys
                </h2>
              </div>

              <div className="pad-2">
                <img
                  src={laptop}
                  alt="image of a laptop computer"
                  className="img-2"
                />
              </div>
            </div>
            <div className="home-col-50">
              <div className="pad-2">
                <h2 className="heading-2">Made by Attorneys, for Attorneys</h2>
                <div className="text-block-2-box">
                  <p className="text-block-2">
                    Legal tech built by people that get it.
                  </p>
                </div>

                <p className="section-two-body">
                  Novodraft understands the demands on your time. For example,
                  that discovery request on your desk. With a few clicks, and
                  Novodraft's AI assistant on the task, you can draft a
                  ready-to-serve response in minutes. It's as easy as uploading
                  a .pdf file.
                </p>
                <p className="section-two-body">
                  Novodraft cuts through a mire of rote tasks, but does much
                  more than automate.
                </p>
                <p className="section-two-body">
                  Intellidraft AI technology powers persuasive arguments and
                  boosts bland, boilerplate objections. Configurable for level
                  of authoritative citation and for infering factual context
                  from pleadings and briefs. Use it to augment your drafting as
                  much or as little as you prefer.
                </p>
                <div className="home-link-box">
                  <a className="link">
                    Explore Novodraft
                    <img src={arrow} className="img-1" alt="" />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </section>
        {/* Section 3 */}
        <section className="section-3">
          <div className="section-three-header-box">
            <h2 className="section-three-header">
              AI-Powered Legal Drafting Technology{" "}
            </h2>
            <p className="section-three-subhead">
              Created by litigators with law-centric AI at its core to give you
              an edge.
            </p>
          </div>
          <div className="card-section-container">
            {/***********  CARD ONE *********** */}
            <div className="home-card">
              <div className="card-image-container">
                <img
                  src={hand_rework7}
                  alt=""
                  width="100%"
                  className="card-image"
                />
              </div>
              <div className="card-body">
                <div className="card-upper-box">
                  <div className="home-card-title">
                    <h3 className="foo-card-title">Discovery Requests</h3>
                    <div className="home-card-divider"></div>
                  </div>
                </div>

                <div className="home-card-text-box">
                  <p className="card-texts">
                    Generate discovery requests with a few clicks, or select
                    manually from a comprehensive request library. Done in a
                    heartbeat, with a .docx for review and service.
                  </p>
                </div>
              </div>
            </div>
            {/***********  CARD TWO *********** */}
            <div className="home-card">
              <div className="card-image-container">
                <img
                  src={scales_centered}
                  alt=""
                  width="100%"
                  className="card-image"
                />
              </div>
              <div className="card-body">
                <div className="card-upper-box">
                  <div className="home-card-title">
                    <h3 className="foo-card-title">Discovery Responses</h3>
                    <div className="home-card-divider"></div>
                  </div>
                </div>

                <div className="home-card-text-box">
                  <p className="card-texts">
                    Novodraft's AI drafts responses complete with compelling
                    arguments about what you choose not to disclose. Finished in
                    minutes with a .docx file for service.
                  </p>
                </div>
              </div>
            </div>
            {/***********  CARD THREE *********** */}
            <div className="home-card">
              <div className="card-image-container">
                <img src={gavel_clear1} alt="" className="card-image" />
              </div>
              <div className="card-body">
                <div className="card-upper-box">
                  <div className="home-card-title">
                    <h3 className="foo-card-title">Proactive Alerts</h3>
                    <div className="home-card-divider"></div>
                  </div>
                </div>
                <div className="home-card-text-box">
                  <p className="card-texts">
                    Your Novodash displays important deadlines, sends email/SMS
                    alerts, can auto-draft documents and remind you to serve
                    them.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section className="section-5 py-5">
          <div
            className="home-test-container"
            style={{
              backgroundImage: `url(${Group80})`,
              backgroundSize: "cover",
            }}
          >
            <div className="row">
              <div className="col-md-6">
                <div className="bottom-header-box">
                  <h4 className="heading-6">
                    Questions about our products and services? We’re here to
                    answer!
                  </h4>
                  <h4 className="heading-6-mobile">
                    Questions about our products and services?
                  </h4>
                  <h4 className="heading-6-mobile">We’re here to answer!</h4>
                </div>
                <h6 className="foo-heading">
                  Let us show you how Novodraft will revolutionize your
                  practice. Join our growing base of satisfied Novodrafters.
                </h6>
              </div>
              <div className="col-md-6 d-flex">
                <button className="button-2" onClick={handleDemo}>
                  Request a demo
                </button>
                <button className="button-2" onClick={handleLogin}>
                  Go to product login
                </button>
              </div>
            </div>
          </div>
        </section>
      </div>
    </>
  );
};

export default HomePage;
