import BookingScriptSection from "../sections/bookingScriptSection/BookingScriptSection";
import PageSectionManager from "../../../../features/form/TOD.PageSectionManager";
import { useState } from "react";
import WBSpacer from "../../../../components/WBSpacer";
import { Step_n } from "../../../../App.js";

const BookingScript = () => {
  const [showScriptsSection, setShowScriptsSection] = useState(false);
  const forms = [BookingScriptSection];
  return (
    <div className="form-container">
      <div className="page-layout-header">
        <div>
          <h2>
            6. OPTIONAL (you can do this later): Create booking pages and plugin
            (install on) your website
          </h2>
          <p>
            MioCommerce proprietary Advance Booking Technologies make it
            possible to instantly engage website visitors and convert them into
            paying customers. For each service you offer, you can create and
            embed any one of the below listed 3 booking technologies. <br></br>
            <br></br>To learn more about the use case for each of the below
            Advanced Booking Page, click{" "}
            <a
              href="https://support.miocommerce.com/en/articles/11164912-service-request-pages-v-s-interactive-quote-pages-v-s-live-pricing-real-time-booking-pages"
              target="_blank"
            >
              HERE
            </a>{" "}
            or on the “want live support?” button at the top of this page. To
            learn how to easily create the booking pages and to embed them on
            your site, click
            <a
              href="https://support.miocommerce.com/en/articles/4574760-how-do-i-install-a-booking-page-on-my-website"
              target="_blank"
            >
              See how to install booking pages on your website here.{" "}
            </a>
          </p>
          <ol style={{ color: "var(--color-gray)", fontSize: "0.875rem" }}>
            <li>
              A{" "}
              <a
                href="https://support.miocommerce.com/en/articles/4574191-how-do-i-create-a-new-booking-page"
                target="_blank"
              >
                Live Pricing and Real-Time booking page
              </a>
              ;
            </li>
            <li>
              An{" "}
              <a
                href="https://support.miocommerce.com/en/articles/8839909-how-to-create-an-interactive-quote-iq-page"
                target="_blank"
              >
                Interactive Quoting page
              </a>
              ; or
            </li>
            <li>
              A generic{" "}
              <a href="https://support.miocommerce.com/en/articles/11165067-how-to-create-a-service-request">
                Service Request
              </a>{" "}
              page.
            </li>
          </ol>
          <p style={{ fontSize: 12 }}>
            NOTE : You can create unlimited advanced booking pages, when you
            also subscribe to a Start-up, Grow or Mutli-Channel Inbox Plus
            subscription,. If you do not have any of these subscriptions you
            still still get 1 Free advance booking page to add to your website
          </p>
        </div>
      </div>
      <WBSpacer />
      <p style={{ fontWeight: 500 }}>
        Your website is fully functional without completing this step. You can
        go live now and add advanced booking pages later or do it now. What
        would you like to do?
      </p>
      <WBSpacer />
      <div
        style={{
          display: "flex",
          gap: 30,
          alignItems: "center",
          flexWrap: "wrap",
        }}
      >
        <button
          class="edit-section-button"
          style={{ fontSize: 16 }}
          onClick={() => {
            Step_n.value = Step_n.value + 1;
            window.scrollTo({ top: 0, behavior: "smooth" });
          }}
        >
          Go live with my website
        </button>
        {!showScriptsSection && (
          <button
            class="edit-section-button"
            style={{ fontSize: 16, background: "white", color: "black" }}
            onClick={() => {
              setShowScriptsSection(true);
            }}
          >
            I have my booking scripts, let's install them!
          </button>
        )}
      </div>
      {showScriptsSection && (
        <PageSectionManager
          forms={forms}
          pageName="bookingScript"
          showOrderButtons={false}
        />
      )}
    </div>
  );
};

export default BookingScript;
