<script>
	import Contact from '$lib/components/contact.svelte';

	let contactName = $state('');
	let contactEmail = $state('');
	let contactMessage = $state('');

	let error_box_message = $state('');
</script>

<title>Brock Tomlinson - Contact</title>

<div id="ContactMe">
	<div>
		<h2>Get in Touch</h2>
		<p>
			Please feel free to reach out about questions, opporunities or just want to connect. Feel free
			to either fill out this form or contact me through one of the many of the platforms below
		</p>
	</div>
	<form
		onsubmit={(e) => {
			e.preventDefault();
		}}
	>
		<label for="name">Name</label>
		<input type="text" id="name" bind:value={contactName} />

		<label for="email">Email</label>
		<input type="email" id="email" bind:value={contactEmail} />

		<label for="message">Message</label>
		<textarea id="message" bind:value={contactMessage}></textarea>

		<p>{error_box_message}</p>
		<button onclick={() => console.log('Clicked')}> Submit </button>
	</form>
</div>
<Contact />

<style>
	#ContactMe {
		display: flex;
		flex-flow: row wrap;
		column-gap: 2svw;
		row-gap: 4svh;
		min-height: 70svh;
		margin-top: 4svh;
		justify-content: space-evenly;
	}

	div div,
	form {
		display: flex;
		flex-grow: 1;
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
		flex-direction: column;
		justify-content: center;
		margin: 2svh 0.5svw;
		padding: 2svh 1svw;
		max-width: 600px;
	}

	p {
		margin: 2svh 0svw;
		padding: 0svh 0svw;
	}

	input {
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
		border-color: rgba(245, 245, 245, 0.5);
		border-width: 2px;
		padding: 1svh 0svw;
		margin: 1svh 0.5svw;
		color: inherit;
		align-items: start;
	}

	textarea {
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
		border-color: rgba(245, 245, 245, 0.4);
		border-width: 2px;
		padding: 1svh 0svw;
		margin: 1svh 0.5svw;
		color: inherit;
		align-items: start;
		min-height: 25svh;
	}

	button {
		border-radius: var(--card-border-radius);
		border-color: rgba(245, 245, 245, 0.5);
		padding: 1svh 0svw;
		margin: 1svh 0.5svw;
		color: inherit;
		align-items: start;
		background-color: rgba(0, 128, 0, 0.6);
		border-color: transparent;
	}

	button:hover {
		cursor: pointer;
		color: #91a4d2;
		background-color: rgba(0, 150, 0, 0.6);
	}
</style>
