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-100 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-200 text-base font-normal text-fg-200 mb-2">Full Stack Software Engineer</p>
    <p class="fade-up delay-200 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-300 text-[0.9375rem] text-fg-200 max-w-120 leading-[1.7] mb-9">
        Full-stack software engineer who ships — from backend APIs to polished frontends. Aligned with US timezones and
        based in Japan, building things that
        matter.
    </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 full-stack software engineer specializing in Python and C# Blazor — I work across the whole stack,
            from backend APIs to server-side rendering to the UI.
        </p>
        <p class="text-[0.9375rem] text-fg-200 leading-[1.75] mb-6">
            I'm also a Linux and Neovim enthusiast, which means I care just as much about the craft of writing code as I
            do about shipping it.
        </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">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">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">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-100 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-200 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()
}
}