package components

import "github.com/moh682/portfolio/domain"

import "slices"
import "strings"

templ experienceCard(exp domain.Experience) {
	<section class="min-h-[var(--content-height)] w-full flex relative items-center">
		<!-- Left Side: Job Details -->
		<div class="p-6 flex flex-col gap-4 transition-all opacity-0">
			<h3 class="text-xl font-semibold text-white">{ exp.Job.Title }</h3>
			<div class="flex flex-col gap-2">
				<a href={ templ.SafeURL(exp.Company.Link) } class="text-emerald-400 font-medium text-lg ">{ exp.Company.Name }</a>
				<p class="text-slate-400 ">{ exp.Duration() }</p>
				<p class="text-slate-600 text-sm">{ exp.GetStartDate() } - { exp.GetEndDate() } </p>
				<a href={ templ.SafeURL(exp.Company.LocationLink) } class="text-emerald-500">{ exp.Company.City }</a>
			</div>
			<div class="flex flex-wrap gap-2">
				for _, stack := range slices.Concat(exp.Job.FrontendStack, exp.Job.BackendStack, exp.Job.InfrastructureStack) {
					@techStack(stack)
				}
			</div>
			<div class="flex flex-col gap-2">
				<h4 class="text-xl font-medium">About { exp.Company.Name }</h4>
				for _, description := range strings.Split(exp.Company.Description, "\n") {
					<p class="text-slate-300">
						{ description }
					</p>
				}
			</div>
			<div class="flex flex-col gap-2">
				<h4 class="text-xl font-medium">Role & Responsibilities</h4>
				<div class="text-slate-300 whitespace-pre-wrap">
					{ exp.Job.Description }
				</div>
			</div>
		</div>
	</section>
}

templ ExperiencesPage(experiences []domain.Experience) {
	@rootLayout() {
		<script defer src="assets/js/experiences.js"></script>
		<main class="bg-gradient-to-b from-slate-900 w-full to-slate-800 px-6 overflow-x-hidden">
			<div class="flex w-full items-center justify-between" x-data="{active:$persist(0)}">
				<div class="relative w-full flex items-center justify-center">
					<!-- Timeline -->
					<div id="timeline" class="fixed w-10 top-[var(--navbar-height)] left-2 h-[var(--content-height)] flex items-center justify-center">
						<div class="absolute bg-radial-[at_50%_25%] from-40% from-slate-700 h-full w-0.5 to-slate-800"></div>
						<div id="timeline-point" class={ "flex items-center flex-grow-0 justify-center w-10 h-10 rounded-full bg-emerald-900 border-4 border-slate-800 z-[80]" }>
							<div class="absolute w-2 h-2 z-[80]  bg-emerald-400 rounded-full"></div>
						</div>
					</div>
					<div id="exps-container" class="ml-4 items-center content-center relative xl:w-[1600px]">
						for _, exp := range experiences {
							@experienceCard(exp)
						}
					</div>
				</div>
			</div>
		</main>
	}
}