Potion/internal/templates/pages/home.templ

package templates

import "github.com/haydenhargreaves/Potion/internal/templates/components"
import "github.com/haydenhargreaves/Potion/internal/domain/server"
import domainRecipe "github.com/haydenhargreaves/Potion/internal/domain/recipe"

templ introSection() {
	<section class="w-full h-fit mb-16">
		<div class="relative">
			<video class="" autoplay loop muted playsinline>
				<source src="/v1/web/static/img/salmon_video.mp4" type="video/mp4"/>
			</video>
			<h1
				class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center
          text-white text-3xl w-4/5 font-bold z-10"
			>
				Discover Your Next Favorite Meal
			</h1>
		</div>
		<p class="leading-relaxed p-4 my-8">
			Welcome to your ultimate recipe hub! Whether you're a seasoned chef or just starting your culinary adventure,
			we're here to inspire. Explore thousands of delicious recipes, from quick weeknight dinners to gourmet delights,
			all at your fingertips. Find exactly what you're craving with our powerful search and intuitive filters, or
			browse our trending dishes for fresh ideas.
		</p>
	</section>
}

templ searchSection() {
	<section class="w-full flex flex-col items-center justify-center my-8 py-4">
		@components.BannerText("Craving Something Specific?")
		<div class="w-full md:w-3/4">
			@components.SearchBar(domainRecipe.SearchFilters{}, true, false, false)
		</div>
		<div class="hidden" id="result-list"></div>
	</section>
}

templ highlightSection(recipeOfTheWeek *domainRecipe.Recipe) {
	<section class="w-full flex flex-col items-center justify-center my-8 py-4">
		@components.BannerText("Recipe of the Week!")
		<p class="leading-relaxed p-4 my-8">
			Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes
			our community loves most. This isn't just about how many people view a recipe; it's also about
			how many times it's been made, liked, reviewed, and its average rating, all combined to find
			the true fan favorite of the week. It's our way of highlighting the best recipes that truly
			resonate with our users!
		</p>
		<div class="flex items-center justify-center w-full">
			@components.RecipeCardLarge(recipeOfTheWeek)
		</div>
	</section>
}

templ listsSection(loggedIn bool, viewed, made []domainRecipe.Recipe) {
	<section class="w-full flex flex-col items-center justify-center my-8 py-4">
		@components.BannerText("Take Another Look.")
		<div class="w-full">
			<h3 class="text-lg mt-8 mx-4">Recently viewed</h3>
			if loggedIn {
				<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
					if len(viewed) > 0 {
						for _, recipe := range viewed {
							@components.RecipeCardSmall(recipe)
						}
						@components.ContentCardSmall("View full history...", "/v1/web/history")
					} else {
						<p class="text-sm">You have not viewed any recipes. There is nothing to show.</p>
					}
				</div>
			} else {
				<div class="my-2 mx-4 text-gray-800">
					<a class="underline" href={ domain.WEB_LOGIN }>
						<p class="text-sm">Log in to view metrics.</p>
					</a>
				</div>
			}
			<h3 class="text-lg mt-8 mx-4">Make again</h3>
			if loggedIn {
				<div class="flex overflow-x-auto gap-x-4 mx-4 my-4">
          if len(made) > 0 {
            for _, recipe := range made {
              @components.RecipeCardSmall(recipe)
            }
            @components.ContentCardSmall("View full history...", "/v1/web/history")
          } else {
						<p class="text-sm">You have not made any recipes. There is nothing to show.</p>
          }
				</div>
			} else {
				<div class="my-2 mx-4 text-gray-800">
					<a class="underline" href={ domain.WEB_LOGIN }>
						<p class="text-sm">Log in to view metrics.</p>
					</a>
				</div>
			}
		</div>
	</section>
}

templ ctaSection() {
	<section
		class="w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center"
	>
		<h2 class="text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4">
			Unleash Your Inner Chef!
		</h2>
		<p class="text-md md:text-lg text-gray-700 max-w-2xl mb-10 px-4 leading-relaxed">
			Have a unique recipe idea? Want to share your culinary masterpiece with the world?
			It's time to bring your creations to life!
		</p>
		<a
			href={ domain.WEB_CREATE }
			class="flex items-center justify-center
                   bg-gradient-to-r from-blue-400 to-blue-600 text-white
                   px-12 py-5 rounded-full shadow-sm hover:shadow-md
                   transition-all duration-300 ease-in-out shadow-blue-700
                   text-lg md:text-2xl font-bold uppercase tracking-wide"
		>
			Create Your Recipe!
		</a>
	</section>
}

templ HomePage(loggedIn bool, viewed, made []domainRecipe.Recipe, recipeOfTheWeek *domainRecipe.Recipe) {
	@components.Navbar("home")
	<div class="w-full h-fit flex justify-center">
		<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
			@introSection()
			@searchSection()
			@highlightSection(recipeOfTheWeek)
			@listsSection(loggedIn, viewed, made)
			@ctaSection()
		</div>
	</div>
}