export const dynamic = "force-dynamic"; // Prevents static rendering

import { LocationCard } from "@/components/locations/location-card";
import { Badge } from "@/components/ui/badge";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Info } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardFooter,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { SITE_NAME } from "@/lib/constants";
import getShortcode from "@/lib/getShortcode";
import request from "@/lib/request";
import { Location } from "@/types/types";
import { CheckIcon } from "lucide-react";

// Define props interface for PricingCard
interface PricingCardProps {
	title: string;
	price: number;
	description: string;
	features: string[];
	isPopular?: boolean;
	ctaText?: string;
	ctaLink?: string;
}

const UnderConstructionBanner = () => {
	return (
		<Alert variant="destructive" className="rounded-2xl shadow-md mb-4">
			<Info className="h-5 w-5 text-red-500 mr-2" />
			<div>
				<AlertTitle>Attention</AlertTitle>
				<AlertDescription>
					Cette page est encore en cours de construction et les
					informations listées peuvent ne pas être exactes pour le
					moment.
				</AlertDescription>
			</div>
		</Alert>
	);
};

// Reusable Pricing Card Component
const PricingCard: React.FC<PricingCardProps> = ({
	title,
	price,
	description,
	features,
	isPopular = false,
	ctaText = "Prendre contact",
	ctaLink = "/contact",
}) => (
	<Card
		className={`border transition-all duration-300 hover:shadow-lg flex-1 max-w-md ${
			isPopular ? "border-primary shadow-lg" : "shadow-sm"
		}`}
	>
		<CardHeader className="text-center pb-2">
			{isPopular && (
				<Badge className="uppercase w-max self-center mb-3 bg-gradient-to-r from-indigo-500 to-purple-500">
					Le plus populaire
				</Badge>
			)}
			<CardTitle className="mb-4 text-2xl">{title}</CardTitle>
			<span className="font-bold text-4xl">{price}€</span>
		</CardHeader>
		<CardDescription className="text-center w-11/12 mx-auto">
			{description}
		</CardDescription>
		<CardContent>
			<ul className="mt-6 space-y-3 text-sm">
				{features.map((feature, index) => (
					<li key={index} className="flex space-x-2">
						<CheckIcon className="flex-shrink-0 mt-0.5 h-4 w-4 text-green-500" />
						<span className="text-muted-foreground">{feature}</span>
					</li>
				))}
			</ul>
		</CardContent>
		<CardFooter>
			<a href={ctaLink} className="w-full">
				<Button
					className={`w-full transition-all duration-300 ${
						isPopular
							? "bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600"
							: "bg-gray-800 hover:bg-gray-900"
					}`}
					aria-label={`Contact us for ${title} plan`}
				>
					{ctaText}
				</Button>
			</a>
		</CardFooter>
	</Card>
);

export default async function About() {
	const profileImage = await getShortcode("profile_image");
	const locations = await request<Location[]>("/locations/all", {
		requiresAuth: false,
	});

	return (
		<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
			{/* Hero Section */}
			<div className="px-6 py-12 lg:py-16 lg:px-12">
				<UnderConstructionBanner />
			</div>
			<section className="grid grid-cols-1 lg:grid-cols-3 gap-6 w-full px-6 py-12 lg:px-12 lg:py-16 items-stretch">
				{/* Text Section - Takes 2/3 on large screens */}
				<div className="lg:col-span-2 flex flex-col justify-center">
					<Card className="h-full shadow-md transition-all duration-300 hover:shadow-xl">
						<CardHeader className="text-center p-6">
							<CardTitle className="text-4xl lg:text-5xl font-bold">
								Nicolas GORUK
							</CardTitle>
							<CardDescription className="text-lg mt-2">
								Président de l'association française de{" "}
								{SITE_NAME}
							</CardDescription>
						</CardHeader>
						<CardContent className="px-6 sm:px-10 py-12 space-y-6">
							<div className="flex flex-col gap-6 justify-center text-justify">
								<h2 className="text-center text-xl font-semibold sm:text-2xl">
									Notre mission
								</h2>
								<p className="text-muted-foreground text-base">
									Chez {SITE_NAME}, nous nous engageons à
									promouvoir l'excellence. Nous offrons un
									environnement dynamique pour tous nos
									membres, avec des événements réguliers et
									des opportunités uniques.
								</p>
								<h2 className="text-center text-xl font-semibold sm:text-2xl">
									Notre histoire
								</h2>
								<p className="text-muted-foreground text-base">
									Fondée en [année], notre association a
									grandi pour devenir un acteur clé dans
									[domaine]. Nous avons organisé [nombre]
									événements et touché plus de [nombre]
									personnes grâce à nos initiatives.
								</p>
							</div>
						</CardContent>
					</Card>
				</div>

				{/* Image Section - Takes 1/3 on large screens */}
				<div className="lg:col-span-1 flex items-center">
					<img
						className="w-full h-full object-cover rounded-lg shadow-md transition-transform duration-300 hover:scale-105"
						src={
							profileImage?.media?.url ??
							"https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
						}
						alt="Portrait de Nicolas GORUK, président de l'association"
					/>
				</div>
			</section>

			{/* Locations Section */}
			{locations.data && locations.data.length > 0 && (
				<section className="py-16 px-6 lg:px-12">
					<h2 className="scroll-m-20 border-b pb-3 text-3xl font-semibold tracking-tight text-center">
						Retrouvez-nous
					</h2>
					<div className="mt-12 flex flex-wrap gap-6 justify-center">
						{locations.data.map((l: Location) => (
							<LocationCard
								key={`${l.street}-${l.city}`}
								location={l}
							/>
						))}
					</div>
				</section>
			)}

			{/* Pricing Section */}
			<section className="py-16 px-6 lg:px-12">
				<div className="max-w-3xl mx-auto text-center mb-12">
					<h2 className="scroll-m-20 border-b pb-3 text-3xl font-semibold tracking-tight">
						Tarifs
					</h2>
					<p className="mt-3 text-muted-foreground text-base">
						Adhésion à partir de [prix]€.
					</p>
					<p className="mt-2 text-muted-foreground text-base">
						Équipement (gants, casque) fourni. Prévoir une tenue
						sportive adaptée.
					</p>
				</div>
				<div className="mt-12 flex flex-col sm:flex-row justify-center gap-6 lg:items-center">
					<PricingCard
						title="Étudiant"
						price={125}
						description="Tarif d'une année pour un étudiant."
						features={[]}
					/>
					<PricingCard
						title="Normal"
						price={150}
						description="Tarif normal pour n'importe quel individu."
						features={[]}
					/>
				</div>
			</section>
		</div>
	);
}