import preactLogo from '../../assets/preact.svg';
import './style.css';

export function Logo(){
	return (
		<a href="https://preactjs.com" target="_blank">
			<img src={preactLogo} alt="Preact logo" height="160" width="160" />
		</a>
	);
}

export function Home() {
	return (
		<div class="home">
			<Logo/>
			<h1>Get Started with the Calendar Optimizer</h1>
			<a href="/calendar-optimizer" target="_blank">Calendar Optimizer</a>
			<a href="/historical-calendar-prices" target="_blank">Historical Calendar Prices</a>
			<section>
				<Resource
					title="Learn Preact"
					description="If you're new to Preact, try the interactive tutorial to learn important concepts"
					href="https://preactjs.com/tutorial"
				/>
				<Resource
					title="Differences to React"
					description="If you're coming from React, you may want to check out our docs to see where Preact differs"
					href="https://preactjs.com/guide/v10/differences-to-react"
				/>
				<Resource
					title="Learn Vite"
					description="To learn more about Vite and how you can customize it to fit your needs, take a look at their excellent documentation"
					href="https://vitejs.dev"
				/>
			</section>
		</div>
	);
}

function Resource(props) {
	return (
		<a href={props.href} target="_blank" class="resource">
			<h2>{props.title}</h2>
			<p>{props.description}</p>
		</a>
	);
}