"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-4 py-8 lg:px-24 lg:py-32">
				<div className="
					flex flex-col lg:flex-row gap-4 
					justify-center w-full pb-24">
					<div className="
						flex flex-col gap-4 w-full 
						lg:w-3/5 justify-center">
						<Card className="py-5 sm:mx-10 max-h-fit">
							<CardHeader className="text-center p-2">
								<CardTitle className="m-5">
									Entraîneur depuis 60 ans
								</CardTitle>
								<span className="font-bold text-4xl 
									sm:text-4xl">
									Robert Louis Jean Jacke
								</span>
							</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 className="max-w-full my-8 text-center lg:hidden" >
							<h2 className="text-pretty text-xl font-semibold mb-4 sm:mb-8 sm:text-3xl lg:mb-1 lg:max-w-3xl">
								Mes associés
							</h2>
							<div className="relative flex flex-col lg:flex-row items-center justify-center overflow-y-visible gap-6 w-full">
								<Avatar className="flex flex-row gap-9 w-20 h-20 m-1">
									<AvatarImage className="rounded-full z-50 ld:md:z-10" src="https://github.com/shadcn.png" alt="@shadcn" />

									<div className="
										md:absolute border self-center rounded-xl font-bold 
										text-center 
										py-4 px-8 lg:md:px-5 w-fit opacity-100 lg:md:top-20 
										md:left-[calc(50%-11em)] translate-x-[-50%] lg:left-[calc(50% -4em)] 
										sm:translate-x-[100%] lg:translate-x-[50%] z-40 lg:md:z-50">
										Richard Vagneur
									</div>

									<AvatarFallback>CN</AvatarFallback>
								</Avatar>
								<Avatar className="flex flex-row translate-x-[-8em] gap-9 w-20 h-20 m-1">
									<AvatarImage className="rounded-full z-50 ld:md:z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
									<div className="
										md:absolute border rounded-xl font-bold text-center 
										py-4 px-8 lg:md:px-5 w-fit opacity-100 lg:md:top-20 
										md:left-[calc(50%)] translate-x-[-50%] z-40 lg:md:z-50
										sm:translate-x-[-50%] lg:translate-x-[-50%] self-center">
										Robert Lewis
									</div>
									<AvatarFallback>CN</AvatarFallback>
								</Avatar>
								<Avatar className="flex flex-row gap-9 w-20 h-20 m-1">
									<AvatarImage className="rounded-full z-50 ld:md:z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
									<div className="
										md:absolute border rounded-xl font-bold text-center 
										py-4 px-8 lg:md:px-5 w-fit opacity-100 lg:md:top-20 
										md:left-[calc(50%-11em)] translate-x-[-50%] z-40 
										lg:md:z-50 sm:translate-x-[125%] sm:self-center
										lg:translate-x-[-100%]">
										Marria Caré
									</div>
									<AvatarFallback>CN</AvatarFallback>
								</Avatar>
							</div>
						</div>
					</div>
					<div className="w-full lg:w-2/5 sm:self-center sm:w-3/5 h-fit border rounded">
						<img
							className="w-full"
							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>
		</>
	);
}