"use server";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardFooter,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { CheckIcon } from "lucide-react";

export default async function About() {
	const make_contact_div = (<a className="w-full" href="/contact">
		<Button className="w-full" variant={"outline"}>
			Prendre contact
		</Button>
	</a>)
	return (
		<>
			<div className="px-24 py-28 lg:py-32">
				<div className="flex flex-row gap-4 justify-center w-full pb-24">
					<Card className="w-3/5 py-12">
						<CardHeader className="text-center p-2">
							<CardTitle className="m-5">Entraîneur depuis 60 ans</CardTitle>
							<span className="font-bold text-5xl">Robert Louis Jean Jacke</span>
						</CardHeader>
						<CardContent className="px-28 py-14">
							<div className="flex gap-4 flex-col justify-center">
								<h2 className="text-pretty text-xl font-semibold md:mb-0.5 md:text-4xl lg:mb-1 lg:max-w-3xl lg:text-3xl">
									Lorem ipsum, dolor sit amet
								</h2>
								<p className="blog-paragraph text-muted-foreground">
									Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis accusamus illum, nam nemo quod delectus velit repellat
									odio dolorum sapiente soluta, aliquam atque praesentium ea placeat ad, neque eveniet adipisci?
								</p>
								<h2 className="text-pretty text-xl font-semibold md:mb-0.5 md:text-4xl lg:mb-1 lg:max-w-3xl lg:text-3xl">
									Lorem ipsum, dolor sit amet
								</h2>
								<p className="blog-paragraph text-muted-foreground">
									Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis accusamus illum, nam nemo quod delectus velit repellat
									odio dolorum sapiente soluta, aliquam atque praesentium ea placeat ad, neque eveniet adipisci?
								</p>
								<p className="blog-paragraph text-muted-foreground">
									Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis accusamus illum, nam nemo quod delectus velit repellat
									odio dolorum sapiente soluta, aliquam atque praesentium ea placeat ad, neque eveniet adipisci?
								</p>
							</div>
						</CardContent>
					</Card>
					<div className="container w-2/5 border rounded">
						<img
							className=""
							src="https://shadcnblocks.com/images/block/placeholder-dark-1.svg" alt="president profile image" />
					</div>
				</div>
				<div className="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
					<h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
						Tarifs
					</h2>
					<p className="mt-1 text-muted-foreground">
						License accessible à partir de 90€. Aide "une aide de l'état" possible.
					</p>
				</div>
				<div className="mt-12 flex flex-row justify-center gap-6 lg:items-center">
					<Card className="border-primary">
						<CardHeader className="text-center pb-2">
							<Badge className="uppercase w-max self-center mb-3">
								Most popular
							</Badge>
							<CardTitle className="!mb-7">Startup</CardTitle>
							<span className="font-bold text-5xl">£39</span>
						</CardHeader>
						<CardDescription className="text-center w-11/12 mx-auto">
							All the basics for starting a new business
						</CardDescription>
						<CardContent>
							<ul className="mt-7 space-y-2.5 text-sm">
								<li className="flex space-x-2">
									<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
									<span className="text-muted-foreground">2 user</span>
								</li>
								<li className="flex space-x-2">
									<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
									<span className="text-muted-foreground">Plan features</span>
								</li>
								<li className="flex space-x-2">
									<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
									<span className="text-muted-foreground">Product support</span>
								</li>
							</ul>
						</CardContent>
						<CardFooter>
							<a href="/contact" className="w-full">
								<Button className="w-full">Prendre contact</Button></a>
						</CardFooter>
					</Card>
					<Card>
						<CardHeader className="text-center pb-2">
							<CardTitle className="mb-7">Team</CardTitle>
							<span className="font-bold text-5xl">£89</span>
						</CardHeader>
						<CardDescription className="text-center  w-11/12 mx-auto">
							Everything you need for a growing business
						</CardDescription>
						<CardContent>
							<ul className="mt-7 space-y-2.5 text-sm">
								<li className="flex space-x-2">
									<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
									<span className="text-muted-foreground">5 user</span>
								</li>
								<li className="flex space-x-2">
									<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
									<span className="text-muted-foreground">Plan features</span>
								</li>
								<li className="flex space-x-2">
									<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
									<span className="text-muted-foreground">Product support</span>
								</li>
							</ul>
						</CardContent>
						<CardFooter>
							{make_contact_div}
						</CardFooter>
					</Card>
					<Card>
						<CardHeader className="text-center pb-2">
							<CardTitle className="mb-7">Enterprise</CardTitle>
							<span className="font-bold text-5xl">149</span>
						</CardHeader>
						<CardDescription className="text-center  w-11/12 mx-auto">
							Advanced features for scaling your business
						</CardDescription>
						<CardContent>
							<ul className="mt-7 space-y-2.5 text-sm">
								<li className="flex space-x-2">
									<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
									<span className="text-muted-foreground">10 user</span>
								</li>
								<li className="flex space-x-2">
									<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
									<span className="text-muted-foreground">Plan features</span>
								</li>
								<li className="flex space-x-2">
									<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4" />
									<span className="text-muted-foreground">Product support</span>
								</li>
							</ul>
						</CardContent>
						<CardFooter>
							{make_contact_div}
						</CardFooter>
					</Card>
				</div>
			</div>
		</>
	);
}