---
import GridLayout from '../layouts/GridLayout.astro';

import PageTitle from '../components/PageTitle.astro';
import { AmazonBook, ColorSwatch, ColorStack } from '../components';

import { Content as Intro } from '../text/traditional-colors-of-japan/intro.mdx';
import colors from '../data/colors-japan.json';

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

<GridLayout title="The Traditional Colors of Japan" grid="wide" class="grid" innerGrid>
	<PageTitle grid="wide" innerGrid>The Traditional Colors of&nbsp;Japan</PageTitle>

	<article class="col-start-1 col-end-17 grid md:col-end-8 xl:content-center">
		<Intro components={mapping} />
	</article>

	<article class="col-start-1 col-end-17 flex grid-cols-2 md:col-start-9 md:justify-end">
		<AmazonBook
			alt="The Traditional Colors of Japan"
			asin="475624100X"
			class="mie-[1.5vw] max-w-[300px] [&_img]:self-end"
		/>
		<AmazonBook
			alt="Traditional Japanese Color Palette"
			asin="475624114X"
			class="mis-[1.5vw] max-w-[300px] [&_img]:self-end"
		/>
	</article>

	<ColorStack>
		{
			colors.map(({ name, description, color }) => (
				<ColorSwatch client:visible color={color} title={name} description={description} />
			))
		}
	</ColorStack>
</GridLayout>
