latosa-escrima/frontend/app/(main)/page.tsx

"use server";

import Features, { FeatureItem } from "@/components/features";
import Gallery from "@/components/gallery";
import Hero from "@/components/hero";
import Testimonial from "@/components/testimonial";
import { CarouselItem } from "@/components/ui/carousel";
import YouTubeEmbed from "@/components/youtube-embed";
import { IYoutube } from "@/interfaces/youtube";
import getShortcode from "@/lib/getShortcode";

export default async function Home() {
	let videos: IYoutube | null = null;
	if (process.env.YOUTUBE_API_KEY) {
		const query = `https://www.googleapis.com/youtube/v3/search?key=${process.env.YOUTUBE_API_KEY}&channelId=UCzuFLl5I0WxSMqbeMaiq_FQ&part=snippet,id&order=date&maxResults=50`;
		const res = await fetch(query);
		videos = await res.json();
	}
	const hero = await getShortcode("hero_image");
	const systemEvolution = await getShortcode("evolution_systeme");
	const fondations = await getShortcode("fondements");
	const todaysPrinciples = await getShortcode("aujourdhui");
	return (
		<main>
			<Hero
				background={
					hero.media?.url ??
					"https://shadcnblocks.com/images/block/placeholder-2.svg"
				}
			/>
			<div className="p-12">
				<YouTubeEmbed
					loadIframe
					width="full"
					height="full"
					video="cbxWxPDXgNM"
					autoPlay={false}
				/>
			</div>
			<div className="flex flex-col p-12">
				<Features
					title="DÉVELOPPEMENT DU SYSTÈME"
					description="Latosa Escrima Concepts est un système martial dynamique et en constante évolution. Ce système repose sur une approche logique, qui progresse au fil du développement des compétences techniques des pratiquants."
					cta="Envie de découvrir Latosa Escrima ?"
				>
					<FeatureItem
						title="Les Fondements de Latosa Escrima Concepts"
						position="left"
						image={
							fondations.media?.url ??
							"https://shadcnblocks.com/images/block/placeholder-2.svg"
						}
					>
						<ol className="flex list-decimal flex-col gap-4 text-justify">
							<li>
								Un Système Centré sur les Concepts{" "}
								<ul className="list-inside list-disc">
									<li>
										Étude et application des meilleurs
										concepts et stratégies issus de
										différentes approches martiales.
									</li>
									<li>
										Comprendre ce que l’on fait, comment on
										le fait et pourquoi on le fait.
									</li>
								</ul>
							</li>
							<li>
								Éducation au Mouvement et à l’Efficacité
								<ul className="list-inside list-disc">
									<li>
										Plus qu’un enchaînement de techniques :
										une véritable éducation aux mouvements
										corporels et à l’efficacité des armes.
									</li>
									<li>
										Priorité à l’authenticité et à la
										réalité.
									</li>
								</ul>
							</li>
						</ol>
					</FeatureItem>
					<FeatureItem
						title="L’Évolution du Système"
						position="right"
						image={
							systemEvolution.media?.url ??
							"https://shadcnblocks.com/images/block/placeholder-2.svg"
						}
					>
						<ol className="flex list-none flex-col gap-4 text-justify">
							<li>
								<span className="font-bold">
									Les Premières Étapes
								</span>
								<ul className="list-inside list-disc">
									<li>
										Initialement centré sur les techniques
										et mouvements, le système s’est montré
										efficace mais incomplet.
									</li>
									<li>
										Recherche de ce qui différencie les arts
										martiaux philippins des autres
										disciplines.
									</li>
								</ul>
							</li>
							<li>
								<span className="font-bold">
									La Découverte des Concepts Clés
								</span>{" "}
								<ul className="list-inside list-disc">
									<li>
										Rôle central des concepts de combat :
										<ul className="list-inside list-disc pl-4">
											<li>Puissance dans les frappes.</li>
											<li>Blocage ferme.</li>
											<li>Équilibre et attitude.</li>
										</ul>
									</li>
									<li>
										Restructuration des exercices pour
										intégrer et transmettre ces concepts
										fondamentaux.
									</li>
								</ul>
							</li>
						</ol>
					</FeatureItem>
					<FeatureItem
						title="Les Principes du Système Aujourd’hui"
						position="left"
						image={
							todaysPrinciples.media?.url ??
							"https://shadcnblocks.com/images/block/placeholder-2.svg"
						}
					>
						Latosa Escrima Concepts repose sur cinq concepts
						fondamentaux :
						<ul className="list-inside list-disc">
							<li>Équilibre</li>
							<li>Vitesse (Timing et Distance)</li>
							<li>Puissance</li>
							<li>Concentration</li>
							<li>Transition</li>
						</ul>
					</FeatureItem>
				</Features>
				<Gallery
					tagLine="Tag Line"
					cta="Book a demo"
					ctaHref="#"
					title="Gallery"
				/>
				{videos && (
					<Gallery
						tagLine=""
						cta="Accéder à la chaîne"
						ctaHref="https://youtube.com/@WingTsunPicardie"
						title="Vidéos YouTube"
					>
						{videos.items.map((video) => {
							return (
								<CarouselItem
									key={video.id.videoId}
									className="pl-[20px] md:max-w-[452px]"
								>
									<YouTubeEmbed video={video} />
								</CarouselItem>
							);
						})}
					</Gallery>
				)}
				<Testimonial />
			</div>
		</main>
	);
}