"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 { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
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="">
				<div className="flex flex-col lg:flex-row gap-4 justify-between w-full p-12">
					<div className="flex flex-col lg:w-1/2 xl:w-full gap-4 w-full justify-center">
						<Card className="py-5 max-h-fit">
							<CardHeader className="text-center p-2">
								<CardTitle className="text-5xl">
									Nicolas GORUK
								</CardTitle>
								<CardDescription>
									Président l'association française de Latosa
									Escrima
								</CardDescription>
							</CardHeader>
							<CardContent className="px-8 sm:px-10 py-14">
								<div className="flex flex-col gap-4 justify-center">
									<h2 className="text-pretty text-center text-xl font-semibold md:mb-0.5 lg:mb-1 lg:max-w-3xl sm: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-center text-xl font-semibold md:mb-0.5 lg:mb-1 lg:max-w-3xl sm: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>
								</div>
							</CardContent>
						</Card>
					</div>
					<div className="w-full lg:w-1/2 border rounded">
						<img
							className="w-full aspect-square"
							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>
					<p className="mt-1 text-muted-foreground">
						equipement (gants, casque) pris en compte. Prévoir une
						tenue sportive adaptée.
					</p>
				</div>
				<div className="mt-12 flex flex-col sm:flex-row px-12 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>
		</>
	);
}