import BookingStep from "../sections/bookingStep/bookingStep";
import HeroBanner from "../sections/herobanner/HeroBanner";
import PageSectionManager from "../../../../features/form/TOD.PageSectionManager";
import InformationSection from "../sections/informationsSection/InformationSection";
import TestimonialSection from "../sections/testimonialSection/TestimonialSection";
import ReviewContactSection from "../sections/reviewContactSection/ReviewContactSection";
import WhyChooseSection from "../sections/whyChooseSection/WhyChooseSection";
import ServicesSection from "../sections/ServicesSection/ServicesSection";
import FAQSectionHome from "../sections/FAQSectionHome/FAQSectionHome";
import WBSpacer from "../../../../components/WBSpacer";
import { generatePreview } from "../../../../features/navigation/components/TOD.Navigation.js";

const HomePage = () => {
  const theme_variation = window.wb_onboard_options.variation || "premium";
  let forms = [];
  if (theme_variation === "advanced") {
    forms = [
      BookingStep,
      ServicesSection,
      InformationSection,
      FAQSectionHome,
      WhyChooseSection,
    ];
  } else {
    forms = [
      BookingStep,
      ServicesSection,
      InformationSection,
      TestimonialSection,
      ReviewContactSection,
      FAQSectionHome,
      WhyChooseSection,
    ];
  }

  return (
    <div className="page-container">
      <div className="page-layout-header">
        <div>
          <h2>3. Enter Your Home Page Content</h2>
          <p>
            Provide content for every home page section below. You can re-order
            the sections or hide them if you do not want them to show up on the
            website. When editing a section, use the preview button to see how
            the section looks on your home page.
          </p>
          <a
            className="wb-form-btn preview-btn active"
            onClick={() => generatePreview()}
          >
            Preview Home Page
            <svg
              xmlns="http://www.w3.org/2000/svg"
              height="1em"
              viewBox="0 0 576 512"
            >
              <path d="M129.1 361.4C93.6 327.2 67.7 286.9 52.5 256c15.1-30.9 41-71.2 76.6-105.4C171.8 109.5 224.9 80 288 80s116.2 29.5 158.9 70.6c35.6 34.3 61.5 74.5 76.6 105.4c-15.1 30.9-41 71.2-76.6 105.4C404.2 402.5 351.1 432 288 432s-116.2-29.5-158.9-70.6zM288 480c158.4 0 258-149.3 288-224C546 181.3 446.4 32 288 32S30 181.3 0 256c30 74.7 129.6 224 288 224zm0-144c-44.2 0-80-35.8-80-80c0-5.4 .5-10.6 1.5-15.7L288 256l-15.7-78.5c5.1-1 10.3-1.5 15.7-1.5c44.2 0 80 35.8 80 80s-35.8 80-80 80zM160 256c0 70.7 57.3 128 128 128s128-57.3 128-128s-57.3-128-128-128c-8.6 0-17 .8-25.1 2.5c-50.3 10-90 49.5-100.3 99.7l-.1 .7c-1.6 8.1-2.5 16.5-2.5 25.1z" />
            </svg>
          </a>
        </div>
        <div></div>
      </div>
      <HeroBanner />
      <PageSectionManager forms={forms} pageName="homePage" />
      <WBSpacer />
    </div>
  );
};

export default HomePage;
