import type { BlitzPage } from "blitz";
import { Link, Routes } from "blitz";
import { HiCheck, HiX } from "react-icons/hi";
import clsx from "clsx";

import BaseLayout from "../components/base-layout";

const paidFeatures = [
	"SMS",
	"MMS (coming soon)",
	"Calls",
	"SMS forwarding (coming soon)",
	"Call forwarding (coming soon)",
	"Voicemail (coming soon)",
	"Call recording (coming soon)",
];

const pricing = {
	tiers: [
		{
			title: "Free",
			price: 0,
			frequency: "",
			description: "The essentials to let you try Shellphone.",
			features: ["SMS (send only)"],
			unavailableFeatures: paidFeatures.slice(1),
			cta: "Join waitlist",
			yearly: false,
		},
		{
			title: "Yearly",
			price: 10,
			frequency: "/month",
			description: "Text and call anyone, anywhere in the world, all year long.",
			features: paidFeatures,
			unavailableFeatures: [],
			cta: "Join waitlist",
			yearly: true,
		},
		{
			title: "Monthly",
			price: 15,
			frequency: "/month",
			description: "Text and call anyone, anywhere in the world.",
			features: paidFeatures,
			unavailableFeatures: [],
			cta: "Join waitlist",
			yearly: false,
		},
	],
};

const Pricing: BlitzPage = () => {
	return (
		<section className="pt-32 pb-10 px-4 sm:px-6 md:pt-34 md:pb-16">
			<div className="bg-white">
				<h2 className="text-3xl font-mackinac font-extrabold text-gray-900 sm:text-5xl sm:leading-none sm:tracking-tight">
					Simple no-tricks pricing
				</h2>
				<p className="mt-6 max-w-2xl text-xl text-gray-500">
					One affordable and transparent plan that includes everything you need.
				</p>

				<div className="mt-24 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
					{pricing.tiers.map((tier) => (
						<div
							key={tier.title}
							className="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col"
						>
							<div className="flex-1">
								<h3 className="text-xl font-semibold text-gray-900">{tier.title}</h3>
								{tier.yearly ? (
									<p className="absolute top-0 py-1.5 px-4 bg-primary-500 rounded-full text-xs font-semibold uppercase tracking-wide text-white transform -translate-y-1/2">
										Get 2 months free!
									</p>
								) : null}
								<p className="mt-4 flex items-baseline text-gray-900">
									<span className="text-5xl font-extrabold tracking-tight">{tier.price}€</span>
									<span className="ml-1 text-xl font-semibold">{tier.frequency}</span>
								</p>
								{tier.yearly ? (
									<p className="text-gray-500 text-sm">Billed yearly ({tier.price * 10}€)</p>
								) : null}
								<p className="mt-6 text-gray-500">{tier.description}</p>

								<ul role="list" className="mt-6 space-y-6">
									{tier.features.map((feature) => (
										<li key={feature} className="flex">
											<HiCheck
												className="flex-shrink-0 w-6 h-6 text-[#0eb56f]"
												aria-hidden="true"
											/>
											<span className="ml-3 text-gray-500">{feature}</span>
										</li>
									))}
									{tier.unavailableFeatures.map((feature) => (
										<li key={feature} className="flex">
											<HiX className="flex-shrink-0 w-6 h-6 text-[#d95565]" aria-hidden="true" />
											<span className="ml-3 text-gray-500">
												{~feature.indexOf("(coming soon)")
													? feature.slice(0, feature.indexOf("(coming soon)"))
													: feature}
											</span>
										</li>
									))}
								</ul>
							</div>

							<Link href={Routes.LandingPage({ join_waitlist: "" })}>
								<a
									className={clsx(
										tier.yearly
											? "bg-primary-500 text-white hover:bg-primary-600"
											: "bg-primary-50 text-primary-700 hover:bg-primary-100",
										"mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium",
									)}
								>
									{tier.cta}
								</a>
							</Link>
						</div>
					))}
				</div>
			</div>
		</section>
	);
};

Pricing.getLayout = (page) => <BaseLayout>{page}</BaseLayout>;
Pricing.suppressFirstRenderFlicker = true;

export default Pricing;