import React from "react";
import { Button, useMediaQuery } from "@mui/material";
import SomePic from "../../assets/business-presentation.png";
import { useNavigate } from "react-router-dom";

const Homepage = () => {
  const matches = useMediaQuery("(min-width:600px)");

  const navigate = useNavigate();

  return (
    <section className="wrapper" style={{ borderTop: "3px solid #1d8cf8" }}>
      <div className="row p-4">
        <div className="col-md-6">
          <h1
            style={{
              fontSize: matches ? "7rem" : "3rem",
              textTransform: "uppercase",
              textAlign: "justify",
              fontWeight: 700,
              textShadow: "-0.04em 0.04em #0f3460, -0.06em 0.06em #fd5d93",
              color: "#fff",
            }}
          >
            Easy CRM for Your Basic CRM needs
          </h1>
          <p className="text-danger lead title">*It's in development</p>
        </div>
        <div className="col-md-6">
          {matches && <img src={SomePic} alt="" style={{ maxWidth: "100%" }} />}
          <div>
            <Button variant="contained" onClick={() => navigate("/login")}>
              Login
            </Button>
            <Button
              variant="outlined"
              color="secondary"
              className="ms-3"
              onClick={() => navigate("/signup")}
            >
              Get started
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Homepage;