---
import { animation, animationDelay } from '../data/site';

import GridLayout from '../layouts/GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
import DownloadLink from '../components/DownloadLink.astro';
import EmailLink from '../components/EmailLink.astro';
import {
	Divider,
	Headline,
	ListItem,
	Subheadline,
	Text,
	TextLink,
	UnorderedList,
} from '../components';

import cv from '../data/cv.json';

import { Content as Intro } from '../text/cv/intro.mdx';
import { Content as InterestsHobbies } from '../text/cv/interests-hobbies.mdx';

import { mapping } from '../mdx-components';

const title = 'CV';
const description =
	'The curriculum vitae of Stefan Imhoff, Senior Software Engineer from Hamburg, Germany.';
---

<GridLayout
	backLink="/"
	class="grid"
	description={description}
	grid="wide"
	innerGrid
	nofollow={true}
	noindex={true}
	title={title}
>
	<PageTitle grid="wide" innerGrid>Curriculum Vitae</PageTitle>

	<article class="col-span-full md:col-start-1 md:col-end-9" {...animation}>
		<Headline>{cv.summary.headline}</Headline>
		<Intro components={mapping} />
	</article>

	<article class="col-span-full md:col-start-10 md:col-end-18" {...animationDelay}>
		<Headline>Personal Information</Headline>
		<Subheadline class="font-semibold">{cv.personal.name}</Subheadline>
		<Text class="!mbe-0">{cv.personal.tagline}</Text>
		<TextLink href="https://www.stefanimhoff.de">Website</TextLink> •
		<EmailLink data-domain="stefanimhoff" data-name="cv" data-tld="de" icon={false} /> •
		<DownloadLink href="/downloads/cv-stefan-imhoff.zip" text="CV" /> •
		<DownloadLink href="/downloads/business-card-stefan-imhoff.zip" text="VCard" />
	</article>

	<Divider class="col-span-full w-[90] !mbe-0 !mbs-0" />

	<article class="col-span-full md:col-start-1 md:col-end-9">
		<Headline>{cv.experience.headline}</Headline>
		{
			cv.experience.items.map((item) => (
				<div>
					<div class="mbe-10">
						<Subheadline class="font-semibold">{item.title}</Subheadline>
						<div class="italic mbe-2 no-common-ligatures">{item.duration}</div>
						<div class="leading-none">
							<strong>{item.company}</strong> / {item.location}
						</div>
						{item.url && (
							<div>
								<TextLink href={item.url}>
									{item.url.replace(/https?:\/\//, '')}
								</TextLink>
							</div>
						)}
					</div>
					{item.tasks.length > 0 && (
						<UnorderedList>
							{item.tasks.map((task) => (
								<ListItem>{task}</ListItem>
							))}
						</UnorderedList>
					)}
				</div>
			))
		}

		<Headline>{cv.education.headline}</Headline>
		{
			cv.education.items.map((item) => (
				<div class="mbe-12">
					<Subheadline class="font-semibold">{item.degree}</Subheadline>
					<div class="italic mbe-2 no-common-ligatures">{item.duration}</div>
					<div class="leading-none">
						<strong>{item.school}</strong> / {item.location}
					</div>
					{item.url && (
						<div>
							<TextLink href={item.url}>
								{item.url.replace(/https?:\/\//, '')}
							</TextLink>
						</div>
					)}
				</div>
			))
		}
	</article>

	<aside class="col-span-full md:col-start-10 md:col-end-18">
		<article>
			<Headline>{cv.skills.headline}</Headline>
			{
				cv.skills.items.map((item) => (
					<div>
						<Subheadline class="font-semibold">{item.headline}</Subheadline>
						<UnorderedList class="!list-none p-0 mbe-10 mbs-5">
							{item.tags.map((tag, index) => (
								<ListItem class="inline">
									{index === item.tags.length - 1
										? tag.concat('')
										: tag.concat(', ')}
								</ListItem>
							))}
						</UnorderedList>
					</div>
				))
			}
		</article>

		<article>
			<Headline>{cv.languages.headline}</Headline>
			<UnorderedList>
				{
					cv.languages.items.map((item) => (
						<ListItem>
							<strong>{item.language}</strong> ({item.level})
						</ListItem>
					))
				}
			</UnorderedList>

			<article>
				<Headline>{cv.awards.headline}</Headline>
				<UnorderedList>
					{cv.awards.items.map((item) => <ListItem>{item}</ListItem>)}
				</UnorderedList>
			</article>
		</article>
	</aside>
	<Divider class="col-span-full w-[90] !mbe-0 !mbs-0" />

	<article class="col-span-full">
		<Headline>{cv.interests.headline}</Headline>
		<ul class="columns-1 gap-gap md:columns-2">
			<InterestsHobbies components={mapping} />
		</ul>
	</article>
</GridLayout>