import { ExclamationTriangle } from "react-bootstrap-icons";
import howtohand from "../../Assets/Images/howtohand.png";
import "../../styles/howTo-page.scss";
export const Steps = () => (
  <div className="steps-wrapper">
    <div className="steps-text-wrapper">
      <h2 className="doc-header-text">Generate Discovery Responses</h2>
    </div>
    <div className="fooze">
      <div className="steps-upper-left">
        <div className="steps-text-wrapper">
          <span className="bold-span">CREATE THE CASE: </span> Click “Cases” in
          the top navigation bar to go to the Case View. Click “Create New Case”
          (lower right button) to surface the Create Case Modal. Follow prompts
          to enter relevant information. You will end with the Case's Details
          View. Click “Upload Document”.
        </div>
        <div className="steps-text-wrapper">
          <span className="bold-span">UPLOAD YOUR DOCUMENT: </span>You will now
          see the Document Upload Modal. Enter the discovery request's title,
          i.e. “Defendant’s Interrogatories,” and (optionally) the date served.
          Drag and drop, or click and select the .pdf from your files. {"  "}
          <div className="mini-break">
            Click <span className="bold-span"> “Upload”.</span>
          </div>
          <div className="mini-break">
            Parsing the document usually takes under 2 minutes, but be patient -
            it may take up to 5.
          </div>
        </div>
      </div>
      <div className="steps-upper-right">
        <div className="image-right-one">
          <div className="image-jhon"></div>
          <div className="image-moun">
            <img src={howtohand} className="howto-hand-img"></img>
          </div>
        </div>
      </div>
    </div>
    <div className="barzee">
      <div className="steps-text-wrapper">
        <span className="bold-span">GENERATE THE RESPONSE: </span>From the
        Document List View, click the “Generate Responses'' button. Novdraft’s
        Intellidraft AI will generate the response and automatically navigate to
        the interactive Document Editor. You can edit the responses and save
        progress any time by clicking the “Save Changes” button.
      </div>
      <div className="steps-text-wrapper">
        <span className="bold-span">DOWNLOAD YOUR RESPONSE DOCUMENT: </span>
        Click the “Create .Docx' button to download your fully-formatted,
        ready-to-serve response.
      </div>
      <ExclamationTriangle
        style={{ color: "red", marginRight: "6px", marginBottom: "2px" }}
      />
      <span className="bold-span">Pro tip:</span> Once you've created the case,
      skip step one - search for the case by entering the case number in the
      search bar on your Dashboard, click "Express Document Upload" and follow
      the prompts.
    </div>
  </div>
);