package landingpage

import (
	"cpone/layout"
)

templ MainLandingPage(medicalServiceComponent templ.Component, listAdvantageComponent templ.Component, listPromotion templ.Component, footer templ.Component) {
	<div class="wrapper-custom mb-25">
		<!-- Navbar Start -->
		<nav
			class="navbar navbar-expand-sm navbar-expand-lg navbar-lp justify-content-between"
		>
			<a class="navbar-brand" href="#">
				<img
					src="/asset-corporate-portal/media/landingpage/logo.png"
					width="126"
					height="40"
					class="d-inline-block align-top"
					alt="Your Brand"
				/>
			</a>
			<button type="button" class="btn btn-lg btn-primary btn-pill">
				<span class="title">Login</span>
			</button>
		</nav>
		<!-- Navbar End -->
		<!-- jumbotron START -->
		<!-- <div class="jumbotron jumbotron-lp d-none d-lg-block"> -->
		@HeaderCard()
		<!-- jumbotron END -->
		<!-- Our Medical Service START -->
		<div class="row">
			@HeaderSection("Our Medical Services", "Discover excellence in healthcare at Our Medical Services. From diagnosis to treatment, our dedicated team provides personalized care for your well-being.")
		</div>
		@medicalServiceComponent
		<!-- Our Medical Service END -->
		<!-- Why Westerindo START  belum fix di ukuran < 1400 -->
		<div class="container p-0 mt-5 ">
			<div class="row">
				@HeaderSection("Why Westerindo", "With a dedicated team of professionals we’re committed to providing medical attention tailored to your needs, ensuring a journey to optimal health and vitality.")
			</div>
			@listAdvantageComponent
		</div>
		<!-- Why Westerindo END -->
		<!-- Promotion START -->
		<div class="container mt-4">
			<div class="row">
				@HeaderSection("Promotions", "Seize This Opportunity to Enhance Your Health")
			</div>
			@listPromotion
		</div>
		<!-- Promotion END -->
		<!-- footer START -->
		@footer
		<!-- footer END -->
	</div>
}

templ CssLandingPage() {
	<style>
    body {
      background-color: white;
      /* padding-right: 100px;
            padding-left: 100px; */
    }

    .navbar-lp {
      padding-top: 40px;
      padding-bottom: 40px;
    }

    .jumbotron-lp {
      border-radius: 32px;
      /* background: #3B4F9F; */
    }

    .title {
      /* color: #FFF; */
      font-family: Poppins;
      font-size: 15px;
      /* font-size: 1vw; */
      font-style: normal;
      font-weight: 700;
    }

    .title-jumbotron-sm {
      /* color: #FFF; */
      font-family: Poppins;
      font-size: 32px;
      /* font-size: 3vw; */
      font-style: normal;
      font-weight: 600;
    }

    .title-jumbotron-md {
      /* color: #FFF; */
      font-family: Poppins;
      font-size: 42px;
      /* font-size: 3vw; */
      font-style: normal;
      font-weight: 600;
    }

    .title-jumbotron {
      /* color: #FFF; */
      font-family: Poppins;
      font-size: 52px;
      /* font-size: 3vw; */
      font-style: normal;
      font-weight: 600;
    }

    .sub-title-jumbotron {
      /* color: #FFF; */
      font-family: Poppins;
      font-size: 16px;
      /* font-size: 1vw; */
      font-style: normal;
      font-weight: 400;
    }

    .btn-login {
      border-radius: 40px;
      /* background-color: #3B4F9F; */
      box-shadow: 0px 8px 16px 0px rgba(59, 79, 159, 0.24);
    }

    .title-get-started {
      /* color: #0C518C; */
      font-family: Poppins;
      font-size: 20px;
      /* font-size: 1vw; */
      font-style: normal;
      font-weight: 700;
    }

    .custom-button-get-started {
      border-radius: 40px;
      /* background-color: #FFF; */
      box-shadow: 0px 8px 16px 0px rgba(12, 81, 140, 0.24);
      padding: 20px;
      margin-top: 44px;
      justify-content: center;
      align-items: center;
      width: 242px;
    }

    .title-section {
      /* color: #000; */
      font-family: Poppins;
      font-size: 40px;
      /* font-size: 3vw; */
      font-style: normal;
      font-weight: 600;
      line-height: 80px;
      margin-bottom: 16px;
    }

    .sub-title-section {
      /* color: #212B36; */
      font-family: Poppins;
      font-size: 20px;
      /* font-size: 1.5vw; */
      font-style: normal;
      font-weight: 400;
      line-height: 36px;
    }

    .custom-card-lp {
      border-radius: 24px;
      border: 1px solid #d9d9d9;
      margin-top: 40px;
    }

    .title-fs-20 {
      /* color: #0E1E28; */
      font-family: Poppins;
      font-size: 20px;
      /* font-size: 1.5vw; */
      font-style: normal;
      /* font-weight: 500; */
      line-height: 36px;
    }

    .sub-title-fs-12 {
      /* color: #0E1E28; */
      font-family: Poppins;
      font-size: 12px;
      /* font-size: 0.9vw; */
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      margin-bottom: 16px;
    }

    .icon-container {
      display: inline-block;
      border-radius: 8px;
      margin-bottom: 16px;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
    }

    .link-learn-more {
      /* color: #3B4F9F; */
      font-family: Poppins;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      text-decoration: none;
    }

    .wrapper-custom {
      /* background: #1B1D1F; */
      padding-left: 10vw;
      padding-right: 10vw;
    }

    .media-left-icon {
      width: 40px;
      height: 40px;
    }

    .footer-title {
      /* color: #FFF; */
      font-family: Poppins;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px;
    }

    .footer-sub-title {
      /* color: #C3C4C5; */
      font-family: Poppins;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
    }

    .logo-footer {
      margin-bottom: 24px;
      margin-top: -20px;
    }

    .garis {
      /* background: #C3C4C5; */
      height: 0.2px;
    }
    .card-footer {
        background-color: transparent !important;
        border: none;
      }
      .slick-prev:before,
      .slick-next:before {
        color: var(--primarybg);
      }
      .img-header {
        object-fit: contain;
      }
      .underdev {
        font-family: "Public Sans";
        font-size: 64px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
      .underdevsub {
        font-family: "Public Sans";
        font-size: 26px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
  </style>
}

templ JsLandingPage() {
	<!-- SCRIPT -->
	<script type="text/javascript" src="assets/js/slick/slick.min.js"></script>
	<script type="text/javascript">
      $(document).ready(function () {
        // lg
        $(".responsive-lg").slick({
          dots: false,
          autoplay: true,
          autoplaySpeed: 2000,
          infinite: true,
          lazyLoad: "ondemand",
          slidesToShow: 3,
          slidesToScroll: 3,
          nextArrow: '<button type="button" class="slick-next">Next</button>',
          prevArrow:
            '<button type="button" class="slick-prev">Previous</button>',
        });

        // md
        $(".responsive-md").slick({
          dots: false,
          autoplay: true,
          autoplaySpeed: 2000,
          infinite: true,
          lazyLoad: "ondemand",
          slidesToShow: 2,
          slidesToScroll: 2,
        });

        // sm
        $(".responsive-sm").slick({
          dots: false,
          autoplay: true,
          autoplaySpeed: 2000,
          infinite: true,
          lazyLoad: "ondemand",
          slidesToShow: 1,
          slidesToScroll: 1,
        });
      });
    </script>
	<!-- SCRIPT -->
}

templ ShowLandingPage(title string, cmp templ.Component, css templ.Component, js templ.Component) {
	@layout.PlaygroundLayout(title, css, js) {
		@cmp
	}
}
