package templates

import "github.com/haydenhargreaves/Potion/internal/templates/components"

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 pillButton(name string) {
	<button
		class="w-32 px-4 py-1.5 border-gray-300 border rounded-full hover:border-blue-500 hover:shadow-sm hover:shadow-blue-300 duration-200"
	>
		{ name }
	</button>
}

templ searchBar() {
	<div class="relative w-full max-w-xl">
		<input
			type="text"
			placeholder="Search recipes, ingredients..."
			class="w-full pr-4 pl-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
		/>
		<svg
			class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400"
			fill="none"
			stroke="currentColor"
			viewBox="0 0 24 24"
			xmlns="http://www.w3.org/2000/svg"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
			></path>
		</svg>
	</div>
}

templ searchSection() {
	<section class="w-full flex flex-col items-center justify-center my-8 py-4">
		<h2 class="text-xl md:text-2xl bg-gradient-to-r from-blue-400 to-blue-600 w-full h-fit py-6 text-center text-white">
			Craving Something Specific?
		</h2>
		<div class="w-full md:w-2/3 px-4 py-6 bg-gray-50 rounded-lg shadow-md flex flex-col gap-4 items-center my-4">
			@searchBar()
			<div class="flex flex-wrap justify-center gap-3 my-4">
				@pillButton("Breakfast")
				@pillButton("Lunch")
				@pillButton("Dinner")
				@pillButton("Desert")
				@pillButton("Snack")
				@pillButton("Side")
				@pillButton("Other")
			</div>
			<button class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 duration-200">
				Search Recipes
			</button>
		</div>
	</section>
}

templ HomePage() {
	@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()
		</div>
	</div>
}