package landingpage

import (
	"github.com/emarifer/go-templ-project-structure/services"
)

templ MedicalService(title string, desciption string, icon string, link string) {
	<div class="col-lg-4">
		<!-- 1 -->
		<div class="card custom-card-lp mr-6">
			<div class="card-body">
				<div class="icon-container bg-primary-transparent">
					<span
						class="iconify text-primary w-20 h-20"
						data-icon={ icon }
					></span>
				</div>
				<h5 class="card-title title-fs-20">{ title }</h5>
				<p class="card-text sub-title-fs-12">
					{ desciption }
				</p>
			</div>
			<div class="card-footer">
				<a href={ templ.SafeURL(link) } class="link-learn-more text-primary">
					Learn More
					<span
						class="iconify text-primary w-20 h-20"
						data-icon="eva:arrow-forward-outline"
					></span>
				</a>
			</div>
		</div>
	</div>
}

templ ListMedicalService(medserData []services.ClientService) {
	<div class="row responsive-sm d-xs-block d-sm-block d-md-none">
		for _, d := range medserData {
			@MedicalService(d.ClientServiceName, d.ClientServiceDescription, d.ClientServiceIcon, d.ClientServiceLink)
		}
	</div>
	<div class="row responsive-md d-none d-md-block d-lg-none">
		for _, d := range medserData {
			@MedicalService(d.ClientServiceName, d.ClientServiceDescription, d.ClientServiceIcon, d.ClientServiceLink)
		}
	</div>
	<div class="row responsive-lg d-none d-lg-block">
		for _, d := range medserData {
			@MedicalService(d.ClientServiceName, d.ClientServiceDescription, d.ClientServiceIcon, d.ClientServiceLink)
		}
	</div>
}

templ HeaderSection(title string, desc string) {
	<div class="col-md-12 text-left">
		<h2 class="title-section text-black">{ title }</h2>
		<p class="sub-title-section text-black">
			{ desc }
		</p>
	</div>
}

templ Advantage(title string, desc string) {
	<div class="row flex-grow-1">
		<div class="media">
			<div class="media-left">
				<span
					class="iconify text-primary media-left-icon"
					data-icon="mingcute:certificate-line"
				></span>
			</div>
			<div class="media-body">
				<h4 class="title-fs-20 text-black ml-4">{ title }</h4>
				<p class="sub-title-fs-12 text-black ml-4">
					{ desc }
				</p>
			</div>
		</div>
	</div>
}

templ ListAdvantage(adData []services.AdvantageClient) {
	<div class="row mt-5">
		<div class="col-md-6">
			<img
				src="/asset-corporate-portal/media/landingpage/why_westerindo_right.png"
				alt="Your Brand"
				class="align-top w-100 h-100 pt-4 pb-4"
			/>
		</div>
		<div class="col-md-6 d-flex flex-column">
			for _, d := range adData {
				@Advantage(d.AdvantageClientName, d.AdvantageClientDesc)
			}
		</div>
	</div>
}

templ HeaderCard() {
	// Hp
	<div class="jumbotron bg-primary d-xs-block d-sm-block d-md-none">
		<div class="container">
			<div class="row">
				<div class="col-sm-12 mb-3 d-flex justify-content-sm-end">
					<div class="d-flex m-1 align-items-center">
						<img
							src="/asset-corporate-portal/media/landingpage/jumbotron_left.png"
							class="img-fluid w-100 h-100 img-header"
							alt="Your Brand"
						/>
					</div>
				</div>
				<div class="col-sm-12 d-flex flex-column">
					<div class="mb-3">
						<h1 class="title-jumbotron-sm text-white">
							Invest in Your Well-being with Our Comprehensive Medical
							Check-Up
						</h1>
						<p class="sub-title-jumbotron text-white">
							Elevate your health journey with our thorough medical
							assessments, empowering you to take proactive steps towards a
							healthier, happier life.
						</p>
						<button type="button" class="btn btn-lg btn-pill bg-white">
							<span class="title-get-started">Get Started</span>
						</button>
					</div>
					<div class="mt-auto"></div>
				</div>
			</div>
		</div>
	</div>
	// End Hp
	// Tablet
	<div class="jumbotron bg-primary d-none d-md-block d-lg-none">
		<div class="container">
			<div class="row">
				<div class="col-md-12 mb-3 d-flex justify-content-md-end">
					<div class="d-flex m-1 align-items-center">
						<img
							src="/asset-corporate-portal/media/landingpage/jumbotron_left.png"
							class="img-fluid w-100 h-100 img-header"
							alt="Your Brand"
						/>
					</div>
				</div>
				<div class="col-md-12 d-flex flex-column">
					<div class="mb-3">
						<h1 class="title-jumbotron-md text-white">
							Invest in Your Well-being with Our Comprehensive Medical
							Check-Up
						</h1>
						<p class="sub-title-jumbotron text-white">
							Elevate your health journey with our thorough medical
							assessments, empowering you to take proactive steps towards a
							healthier, happier life.
						</p>
						<button type="button" class="btn btn-lg btn-pill bg-white">
							<span class="title-get-started">Get Started</span>
						</button>
					</div>
					<div class="mt-auto"></div>
				</div>
			</div>
		</div>
	</div>
	// End Tablet
	// Dekstop
	<div class="jumbotron bg-primary d-none d-lg-block">
		<div class="container">
			<div class="row">
				<div class="col-md-8 d-flex flex-column">
					<div class="mb-3">
						<h1 class="title-jumbotron text-white">
							Invest in Your Well-being with Our Comprehensive Medical
							Check-Up
						</h1>
						<p class="sub-title-jumbotron text-white">
							Elevate your health journey with our thorough medical
							assessments, empowering you to take proactive steps towards a
							healthier, happier life.
						</p>
						<button type="button" class="btn btn-lg btn-pill bg-white">
							<span class="title-get-started">Get Started</span>
						</button>
					</div>
					<div class="mt-auto"></div>
				</div>
				<div class="col-md-4 d-flex justify-content-md-end">
					<!-- style="
                    flex: 2;
                    margin: 10px;
                    display: flex;
                    align-items: center;
                  " -->
					<div class="d-flex m-1o align-items-center">
						<img
							src="/asset-corporate-portal/media/landingpage/jumbotron_left.png"
							class="img-fluid w-100 h-100 img-header"
							alt="Your Brand"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>
	// End Dekstop
}

templ Promotion(prm services.Promotion) {
	<div class="col-md-4 mt-2">
		<img
			src={ prm.PromotionAsset }
			class="img-fluid"
			alt="Your Brand"
		/>
	</div>
}

templ ListPromotion(prm []services.Promotion) {
	<div class="row responsive-sm d-xs-block d-sm-block d-md-none">
		for _, d := range prm {
			@Promotion(d)
		}
	</div>
	<div class="row responsive-md d-none d-md-block d-lg-none">
		for _, d := range prm {
			@Promotion(d)
		}
	</div>
	<div class="row responsive-lg d-none d-lg-block d-xl-block">
		for _, d := range prm {
			@Promotion(d)
		}
	</div>
}

templ Footer() {
	<footer class="wrapper-custom bg-black pb-25 pt-25 mt-25">
		<div class="row mb-5">
			<div class="col-md-12 col-lg">
				<img
					src="asset-corporate-portal/media/landingpage/logo.png"
					class="logo-footer"
					width="126"
					height="40"
					alt="Your Brand"
				/>
				<div class="text-white d-flex flex-row mb-3">
					<!-- style="display: flex; flex-direction: row; color: white;align-items: start; margin-bottom: 24px;" -->
					<div class="mr-3 mt-1">
						<i
							class="fas fa-map-marker-alt marker footer-icon text-warning"
						></i>
					</div>
					<div class="flex-grow-1">
						<p class="footer-sub-title text-grey">
							Jl. Cipaku I No.5, RT.2/RW.4, Petogogan, Kec. Kby. Baru, Kota
							Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12170
						</p>
					</div>
				</div>
				<div class="d-flex flex-row">
					<div class="mr-3 mt-1">
						<i class="fas fa-phone footer-icon text-warning"></i>
					</div>
					<div class="flex-grow-1">
						<p class="footer-sub-title text-grey">021-7392345</p>
						<p class="footer-sub-title text-grey">021-2702525</p>
						<p class="footer-sub-title text-grey">021-7255080</p>
					</div>
				</div>
			</div>
			<div class="col-md col-lg">
				<h4 class="footer-title text-white mb-3">Dashboard</h4>
				<p class="footer-sub-title text-grey">
					Employee Medical Health Analytic Clinic Admission
				</p>
			</div>
			<div class="col-md col-lg">
				<h4 class="footer-title text-white">Benefit</h4>
			</div>
			<div class="col-md col-lg">
				<h4 class="footer-title text-white">Finance & Claims</h4>
			</div>
			<div class="col-md col-lg">
				<h4 class="footer-title text-white">Membership</h4>
			</div>
		</div>
		<div class="garis bg-grey"></div>
		<div class="row mt-4">
			<div class="col-md-6">
				<p class="footer-sub-title text-grey">
					© Copyright 2024. Organized PT SADHANA ABIYASA SAMPOERNA (Privacy
					Policy)
				</p>
			</div>
			<div class="col-md-6 text-right">
				<p class="footer-icons">
					<a href="#" class="mr-3"><i class="fab fa-whatsapp"></i></a>
					<a href="#" class="mr-3"><i class="fab fa-facebook"></i></a>
					<a href="#"><i class="fab fa-instagram"></i></a>
				</p>
			</div>
		</div>
	</footer>
}
