"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="px-24 py-28 lg:py-32">
				<div className="flex flex-row gap-4 justify-center w-full pb-24">
					<div className="flex flex-col gap-4 w-3/5 justify-center">
						<Card className="pt-10 pb-5 max-h-fit">
							<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>
								</div>
							</CardContent>
						</Card>
						<div className="max-w-full text-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">
								Mes associés
							</h2>
							<div className="relative items-center justify-center flex flex-row gap-14 w-full">
								<Avatar className="w-20 h-20 m-4">
									<AvatarImage className="rounded-full z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
									<div className="absolute border rounded-xl py-0.5 px-5 w-fit opacity-100 top-20 left-[calc(50%+11em)] translate-x-[-50%]  bg-white z-50">
										Marc Zuckenberg
									</div>
									<AvatarFallback>CN</AvatarFallback>
								</Avatar>
								<Avatar className="w-20 h-20 m-4">
									<AvatarImage className="rounded-full z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
									<div className="absolute border rounded-xl py-0.5 px-5 w-fit opacity-100 top-20 left-[calc(50%)] translate-x-[-50%]  bg-white z-50">
										Robert Lewis
									</div>
									<AvatarFallback>CN</AvatarFallback>
								</Avatar>
								<Avatar className="w-20 h-20 m-4">
									<AvatarImage className="rounded-full z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
									<div className="absolute border rounded-xl py-0.5 px-5 w-fit opacity-100 top-20 left-[calc(50%-11em)] translate-x-[-50%]  bg-white z-50">
										Marria Caré
									</div>
									<AvatarFallback>CN</AvatarFallback>
								</Avatar>
							</div>
						</div>
					</div>
					<div className="container w-2/5 h-fit 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>
					<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-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>
		</>
	);
}
