<script lang="ts">
import Euro from "util/Euro.svelte";
import { formatDataVolume } from "util/Formatting";

type Plan = {
	title: string
	monthly: number
	egress: number
	storage: number
	checkout_cadence_1?: string
	checkout_cadence_6?: string
	checkout_cadence_12?: string
}

const gb = 1e9
const tb = gb*1000
const euro = 1e6

const plans: Plan[] = [
	{
		title: "Luna",
		monthly: 2*euro,
		egress: 2*tb,
		storage: 500*gb,
		// checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://www.creem.io/test/payment/prod_4WIbZB54NgOTVSGEe8kwpA",
		checkout_cadence_12: "https://www.creem.io/test/payment/prod_4A8depiWgKgJ5h5tJD2Sv7",
	}, {
		title: "Io",
		monthly: 4*euro,
		egress: 4*tb,
		storage: 1*tb,
		// checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://example.com",
		checkout_cadence_12: "https://example.com",
	}, {
		title: "Callisto",
		monthly: 8*euro,
		egress: 8*tb,
		storage: 2*tb,
		checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://example.com",
		checkout_cadence_12: "https://example.com",
	}, {
		title: "Mercury",
		monthly: 16*euro,
		egress: 16*tb,
		storage: 4*tb,
		checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://example.com",
		checkout_cadence_12: "https://example.com",
	}, {
		title: "Titan",
		monthly: 32*euro,
		egress: 32*tb,
		storage: 8*tb,
		checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://example.com",
		checkout_cadence_12: "https://example.com",
	}, {
		title: "Ganymede",
		monthly: 64*euro,
		egress: 64*tb,
		storage: 16*tb,
		checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://example.com",
		checkout_cadence_12: "https://example.com",
	}, {
		title: "Mars",
		monthly: 128*euro,
		egress: 128*tb,
		storage: 32*tb,
		checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://example.com",
		checkout_cadence_12: "https://example.com",
	}, {
		title: "Venus",
		monthly: 256*euro,
		egress: 256*tb,
		storage: 64*tb,
		checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://example.com",
		checkout_cadence_12: "https://example.com",
	}, {
		title: "Terra",
		monthly: 512*euro,
		egress: 512*tb,
		storage: 128*tb,
		checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://example.com",
		checkout_cadence_12: "https://example.com",
	}, {
		title: "Neptunus",
		monthly: 1024*euro,
		egress: 1024*tb,
		storage: 256*tb,
		checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://example.com",
		checkout_cadence_12: "https://example.com",
	}, {
		title: "Uranus",
		monthly: 2048*euro,
		egress: 2048*tb,
		storage: 512*tb,
		checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://example.com",
		checkout_cadence_12: "https://example.com",
	}, {
		title: "Saturnus",
		monthly: 4096*euro,
		egress: 4096*tb,
		storage: 1024*tb,
		checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://example.com",
		checkout_cadence_12: "https://example.com",
	}, {
		title: "Jupiter",
		monthly: 8192*euro,
		egress: 8192*tb,
		storage: 2048*tb,
		checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://example.com",
		checkout_cadence_12: "https://example.com",
	}, {
		title: "Sol",
		monthly: 16384*euro,
		egress: 16384*tb,
		storage: 4096*tb,
		checkout_cadence_1: "https://example.com",
		checkout_cadence_6: "https://example.com",
		checkout_cadence_12: "https://example.com",
	}
]
</script>

<div class="horizontal_scroll">
	<div class="feat_table">
		{#each plans as plan (plan.title)}
			<div class="plan">
				<div>
					<span class="title">{plan.title}</span>
					<br/>
					<Euro amount={plan.monthly}/> / month
				</div>
				<div class="features">
					<div>
						<span class="bold">{formatDataVolume(plan.storage, 0)}</span>
						storage space
					</div>
					<div>
						<span class="bold">{formatDataVolume(plan.egress, 0)}</span>
						egress traffic per month
					</div>
				</div>
				<div class="order">
					{#if plan.checkout_cadence_1 !== undefined}
						<a href="{plan.checkout_cadence_1}" class="button">
							<div class="bold">Monthly</div>
							<div><Euro amount={plan.monthly}/> / month</div>
						</a>
					{:else}
						<span>Monthly plan not available</span>
					{/if}
					{#if plan.checkout_cadence_6 !== undefined}
						<a href="{plan.checkout_cadence_6}" class="button">
							<div class="bold">Bi-yearly (save 10%)</div>
							<div><Euro amount={plan.monthly*6*.9}/> / 6 months</div>
						</a>
					{:else}
						<span>Bi-yearly plan not available</span>
					{/if}
					{#if plan.checkout_cadence_12 !== undefined}
						<a href="{plan.checkout_cadence_12}" class="button">
							<div class="bold">Yearly (save 20%)</div>
							<div><Euro amount={plan.monthly*12*.8}/> / year</div>
						</a>
					{:else}
						<span>Yearly plan not available</span>
					{/if}
				</div>
			</div>
		{/each}
	</div>
</div>

<style>
.horizontal_scroll {
	overflow-x: scroll;
	overflow-y: hidden;
	width: 100%;
}
.feat_table {
	display: flex;
	flex-direction: row;
	gap: 8px;
	padding: 8px;
}
.plan {
	flex: 0 0 18em;
	display: flex;
	width: 18em;
	flex-direction: column;
	border: 1px solid var(--highlight_color);
	border-radius: 8px;
	background-color: var(--body_color);
}
.plan > div {
	flex: 1 1 0;
	margin: 0.2em;
	padding: 0.5em;
	text-align: center;
	word-wrap: break-word;
	hyphens: auto;
}
.title {
	font-size: 1.5em;
}
.plan > .order {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.plan > .order > .button {
	flex-direction: column;
}
.bold {
	font-weight: bold;
}
</style>
