package pages

import "personal-site/components"
import "personal-site/constants"
import "personal-site/components/icons"

templ heroSection() {
	<section id="hero" class="pb-5">
		<p
			class="hero-eyebrow fade-up font-mono text-xs font-medium text-fg-200 tracking-[0.08em] uppercase flex items-center gap-2 mb-5"
		>
			available for work
		</p>
		<h1 class="fade-up delay-1 text-[clamp(2.25rem,6vw,3.25rem)] font-bold tracking-[-0.04em] leading-[1.05] mb-3">
			Derrick Gee
		</h1>
		<p class="fade-up delay-2 text-base font-normal text-fg-200 mb-2">Full Stack Software Engineer</p>
		<p class="fade-up delay-2 font-mono text-xs text-fg-300 flex items-center gap-1.5 mb-8">
			<svg width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
				<path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
				<path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
			</svg>
			Japan · US Citizen
		</p>
		<p class="fade-up delay-3 text-[0.9375rem] text-fg-200 max-w-120 leading-[1.7] mb-9">
			I build full-stack web applications with a focus on developer experience and real-world impact. Python, C#
			Blazor, Go — and everything in between.
		</p>
		<div class="fade-up delay-4 flex items-center gap-3 flex-wrap">
			<a
				href="#projects"
				class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium bg-fg-100 text-bg-100 border border-transparent no-underline transition-opacity duration-150 hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-100"
			>
				View Projects
			</a>
			<a
				href="#experience"
				class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium bg-transparent text-fg-100 border border-border-100 no-underline transition-all duration-150 hover:bg-bg-300 hover:border-border-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-100"
			>
				Experience
			</a>
			<a
				href="https://git.kokopi.dev/kokopi"
				target="_blank"
				class="inline-flex items-center gap-2 p-1.5 rounded-lg text-[0.8125rem] font-medium bg-transparent text-fg-200 no-underline transition-all duration-150 hover:text-fg-100 hover:bg-bg-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-100"
			>
				<svg width="15" height="15" viewBox="0 0 32 32" fill="currentColor">
					<path
						d="M16 0C7.163 0 0 7.163 0 16c0 8.836 7.163 16 16 16 8.836 0 16-7.163 16-16C32 7.163 24.837 0 16 0zm7.68 21.155a1.06 1.06 0 01-1.458.387l-4.514-2.607a1.842 1.842 0 01-.638.223v4.017a1.06 1.06 0 01-2.12 0v-4.017a1.842 1.842 0 01-1.3-1.787 1.843 1.843 0 011.842-1.842c.347 0 .671.097.948.264l4.418-2.551a1.06 1.06 0 011.457.387 1.06 1.06 0 01-.387 1.457l-4.418 2.551c.01.09.016.181.016.274 0 .093-.006.184-.016.274l4.514 2.607a1.06 1.06 0 01.387 1.457l-.731-.695zm-13.512-8.24a1.06 1.06 0 011.457-.387l4.418 2.551c.277-.167.601-.264.948-.264.347 0 .671.097.948.264l4.418-2.551a1.06 1.06 0 011.457.387 1.06 1.06 0 01-.387 1.457l-4.418 2.551c.01.09.016.181.016.274a1.843 1.843 0 01-1.842 1.842 1.843 1.843 0 01-1.842-1.842c0-.093.006-.184.016-.274l-4.418-2.551a1.06 1.06 0 01-.387-1.457h.616z"
					></path>
				</svg>
				Gitea
				@icons.ArrowUpRight("size-3")
			</a>
			<a
				href="https://github.com/kokopi-dev"
				target="_blank"
				class="inline-flex items-center gap-2 p-1.5 rounded-lg text-[0.8125rem] font-medium bg-transparent text-fg-200 no-underline transition-all duration-150 hover:text-fg-100 hover:bg-bg-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-100"
			>
				<svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24">
					<path
						d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
					></path>
				</svg>
				GitHub
				@icons.ArrowUpRight("size-3")
			</a>
		</div>
	</section>
}

templ aboutSection() {
	<section id="about" class="py-5">
		<p
			class="section-label font-mono text-[0.6875rem] font-semibold tracking-widest uppercase text-fg-300 mb-5 flex items-center gap-3"
		>
			about
		</p>
		<div
			class="fade-up bg-bg-200 border border-border-100 rounded-lg p-5 transition-all duration-200 hover:border-border-200 hover:bg-bg-300"
		>
			<p class="text-[0.9375rem] text-fg-200 leading-[1.75] mb-5">
				I'm a Python and C# Blazor full-stack software engineer. I work across the whole stack — backend APIs,
				server-side rendering, and polished frontends. I'm also a Linux and Neovim enthusiast who enjoys tinkering
				with configs as much as shipping features.
			</p>
			<p class="text-[0.9375rem] text-fg-200 leading-[1.75] mb-6">
				When I'm not coding, I'm exploring new technologies that solve real-world problems. Currently based in
				Japan, working remotely.
			</p>
			<div class="flex flex-wrap gap-1.5">
				<span
					class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
				>Python</span>
				<span
					class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
				>
					C#
					/ Blazor
				</span>
				<span
					class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
				>Golang</span>
				<span
					class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
				>FastAPI</span>
				<span
					class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
				>Hugo</span>
				<span
					class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
				>Tailwindcss</span>
				<span
					class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
				>Javascript</span>
				<span
					class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
				>Lua</span>
				<span
					class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
				>Neovim</span>
				<span
					class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100 whitespace-nowrap"
				>Linux</span>
			</div>
		</div>
	</section>
}

templ expSection() {
	<section id="experience" class="py-5">
		<p
			class="section-label font-mono text-[0.6875rem] font-semibold tracking-widest uppercase text-fg-300 mb-5 flex items-center gap-3"
		>
			experience
		</p>
		<div class="flex flex-col gap-3">
			// westbold
			<div
				class="fade-up bg-bg-200 border border-border-100 rounded-lg p-5 transition-colors duration-200 hover:border-border-200"
			>
				<div class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
					<div>
						<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
							<span
								class="status-live inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.72_0.15_145)] mr-1"
							></span>
							Westbold · Remote
						</p>
						<p class="text-[0.9375rem] font-semibold mb-2">Full Stack Software Engineer</p>
					</div>
					<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Jul 2021 — Present</span>
				</div>
				<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
					Full-stack development across customer-facing
					workflows, frontend architecture, and internal tooling. Focused on improving usability, reducing
					friction, and modernizing the codebase.
				</p>
				<div class="flex flex-wrap gap-1.5">
					<span
						class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
					>C#</span>
					<span
						class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
					>Blazor</span>
					<span
						class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
					>Tailwindcss</span>
					<span
						class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
					>Hugo</span>
					<span
						class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
					>Javascript</span>
					<span
						class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
					>Python</span>
				</div>
			</div>
			// tenchijin
			<div
				class="fade-up delay-1 bg-bg-200 border border-border-100 rounded-lg p-5 transition-colors duration-200 hover:border-border-200"
			>
				<div class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
					<div>
						<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
							<span class="inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.75_0_0)] mr-1"></span>
							Tenchijin · Remote
						</p>
						<p class="text-[0.9375rem] font-semibold mb-2">Full Stack Software Engineer</p>
					</div>
					<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Dec 2020 — Sep 2021</span>
				</div>
				<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
					Backend development with some frontend on an
					enterprise satellite data platform. Improved performance, rewrote core services, and documented
					workflows for faster onboarding.
				</p>
				<div class="flex flex-wrap gap-1.5">
					<span
						class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
					>Python</span>
					<span
						class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
					>Django</span>
					<span
						class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
					>VueJS</span>
				</div>
			</div>
			// hennge
			<div
				class="fade-up delay-2 bg-bg-200 border border-border-100 rounded-lg p-5 transition-colors duration-200 hover:border-border-200"
			>
				<div class="flex justify-between items-start gap-4 flex-wrap mb-1.5">
					<div>
						<p class="text-xs font-medium text-fg-200 mb-1 flex items-center gap-2">
							<span class="inline-block w-1.5 h-1.5 rounded-full bg-[oklch(0.75_0_0)] mr-1"></span>
							Hennge · Hybrid
						</p>
						<p class="text-[0.9375rem] font-semibold mb-2">Software Engineer Intern</p>
					</div>
					<span class="font-mono text-[0.6875rem] text-fg-300 whitespace-nowrap pt-0.5">Sep 2020 — Nov 2020</span>
				</div>
				<p class="text-sm text-fg-200 mb-3.5 leading-relaxed">
					Contributed to a production enterprise email platform
					and built internal proof-of-concept projects to explore cloud infrastructure.
				</p>
				<div class="flex flex-wrap gap-1.5">
					<span
						class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
					>Python</span>
					<span
						class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
					>VueJS</span>
					<span
						class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
					>Terraform</span>
					<span
						class="inline-flex items-center px-2 py-0.5 rounded-md font-mono text-[0.6875rem] font-medium bg-bg-300 text-fg-200 border border-border-100"
					>AWS</span>
				</div>
			</div>
		</div>
	</section>
}

templ Index() {
	{{ params := constants.NewLayoutParams("Home") }}
	@components.MainLayout(params) {
		<style>
    .hero-eyebrow::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 1px;
        background: var(--color-fg-300);
    }

    .section-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--color-border-100);
    }
</style>
		@heroSection()
		@aboutSection()
		@expSection()
	}
}