import React from "react";
import { useNavigate } from "react-router-dom";

const HeroSection = () => {
  const navigate = useNavigate();
  return (
    <div className="section-container">
      <div className="hero-section-container">
        <h1 className="section-title">
          Manage your schedule any time, at any pointe.
        </h1>
        <p className="section-paragraph">
          Book appointments, manage appointments, collect payments, and many
          more in our all-in-one service that makes managing your schedule
          easier than ever. Whether you&apos;re running a business, or just for
          personal use, you will find everything you need in SchedulePointe.
        </p>
        <div className="generic-row-20px">
          <button
            className="action-button"
            onClick={() => {
              navigate("/register");
            }}
          >
            Get Started
          </button>
          <a
            className="secondary-button"
            href="#contact"
            style={{ textDecoration: "none" }}
          >
            Contact Us
          </a>
        </div>
      </div>
    </div>
  );
};

const FeatureSection = () => {
  return (
    <div className="section-container">
      <h1 className="section-title">Features</h1>
      <p className="section-paragraph">
        We provide the tools and features to help facilitate your appointment
        management.
      </p>
      <div className="feature-row">
        <div className="feature">
          <div className="box" />
          <p className="section-paragraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
        <div className="feature">
          <div className="box" />
          <p className="section-paragraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
        <div className="feature">
          <div className="box" />
          <p className="section-paragraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
        <div className="feature">
          <div className="box" />
          <p className="section-paragraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
      </div>
      <div className="feature-row">
        <div className="feature">
          <div className="box" />
          <p className="section-paragraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
        <div className="feature">
          <div className="box" />
          <p className="section-paragraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>
      </div>
    </div>
  );
};

const ContactSection = () => {
  return (
    <div id="contact" className="section-container">
      <h1 className="section-title">Contact Us</h1>
      <p className="section-paragraph">
        Please fill out the contact form below and a member of our team will get
        back to you shortly. You can also email us directly at&nbsp;
        <a
          href="mailto:customer-care@schedulepointe.com"
          style={{ textDecoration: "none" }}
        >
          customer-care@schedulepointe.com
        </a>
      </p>
      <form className="generic-column-20px">
        <div className="generic-row-20px">
          <input
            type="text"
            className="contact-form-field"
            placeholder="First Name"
          />
          <input
            type="text"
            className="contact-form-field"
            placeholder="Last Name"
          />
        </div>
        <div className="generic-row-20px">
          <input
            type="text"
            className="contact-form-field"
            placeholder="Email"
          />
          <input
            type="text"
            className="contact-form-field"
            placeholder="Subject"
          />
        </div>
        <textarea
          className="contact-form-message"
          name="text"
          rows="7"
          wrap="soft"
          placeholder="Message"
        />
        <input
          type="submit"
          value="Submit"
          className="action-button"
          style={{ padding: "15px 50px" }}
        />
      </form>
    </div>
  );
};

const Landing = () => {
  return (
    <div className="landing-content">
      <HeroSection />
      <FeatureSection />
      <ContactSection />
    </div>
  );
};

export default Landing;