import { ExclamationTriangle } from "react-bootstrap-icons";

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 to select. {"  "} Then Click{" "}
          <span className="bold-span"> “Upload”.</span>
          <div className="mini-break"></div>
          <div className="mini-break">
            Parsing the document for language processing usually takes fewer
            than 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="https://imagedelivery.net/OvFc3s8IYmBw7-_bogeTLg/9a7dea0e-db93-4028-ade2-0eda32a5c100/public"
              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. Novos: This feature controls the depth
        of factual inferences AI will make in articulating arguments; modulated
        through a CRAC-based CoT prompt sequence. It is distinct from the
        so-called LLM 'temperature' parameter.
      </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>
      <div className="steps-text-wrapper">
        <ExclamationTriangle
          style={{ color: "orange", marginRight: "6px", marginBottom: "4px" }}
        />
        <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>
  </div>
);

export const OutgoingSteps = () => (
  <div className="steps-wrapper">
    <div className="steps-text-wrapper">
      <h2 className="doc-header-text">Generate Discovery Requests</h2>
    </div>
    <div className="barzee">
      <div className="steps-text-wrapper">
        If you have not yet done so, follow the steps described above in "CREATE
        THE CASE". From the Case Details view, click the "Upload Document"
        button to surface the document upload modal.
      </div>
      <div className="steps-text-wrapper">
        <span className="bold-span">UPLOAD THE COMPLAINT: </span> Drag and drop,
        or click and select the Complaint .pdf from your files. Be sure to
        select "Complaint" in the document type section (see image right).
      </div>
      <div className="steps-text-wrapper">
        <span className="bold-span">GENERATE THE RESPONSE: </span>Click
        "Upload." Novdraft’s Intellidraft AI will generate the response. When
        complete, you will be taken to the Document Editor where you may edit
        and download the response in .docx format.
      </div>
      <div className="steps-text-wrapper">
        Novodraft currently supports generation of combined interrogatories and
        requests for production. Additional request types (i.e. admissions),
        features and request generation configurations are launching each month.
      </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>
    </div>
  </div>
);