---
import { site } from '../data/site';

import GridLayout from './GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
import Image from '../components/Image.astro';

const { frontmatter } = Astro.props;
const schema = JSON.stringify({
	'@context': 'https://schema.org/',
	'@type': 'Person',
	name: site.author,
	url: site.url,
	image: site.url + '/assets/images/ai-portrait-stefan-imhoff.png',
	jobTitle: 'Senior Software Engineer',
	worksFor: {
		'@type': 'Organization',
		name: 'NEW WORK SE',
	},
	sameAs: [
		'https://twitter.com/kogakure',
		'https://www.instagram.com/kogakure/',
		'https://www.youtube.com/@kogakure',
		'https://www.linkedin.com/in/kogakure/',
		'https://github.com/kogakure',
	],
});
---

<GridLayout title={frontmatter.title} grid="narrow" backLink="/" {...frontmatter}>
	<PageTitle slot="title" grid="narrow" {...frontmatter}>
		{frontmatter.title}
	</PageTitle>
	<div
		slot="before-content"
		class="col-start-1 col-end-12 md:col-start-3 md:col-end-10 xl:col-start-15 xl:col-end-18 xl:row-start-2 xl:-scale-x-100 3xl:col-start-14 3xl:col-end-17"
	>
		<Image alt="Stefan Imhoff" src="/assets/images/ai-portrait-stefan-imhoff.webp" />
	</div>
	<slot />
	<script type="application/ld+json" set:html={schema} />
</GridLayout>