"use client"; import Link from "next/link"; import { ReactNode, useMemo, useState } from "react"; import { useLanguage } from "@/contexts/LanguageContext"; import { isIndexableArticleSlug, TYPE_COLORS, TYPE_LABELS, } from "@/data/resources-articles"; import type { ArticleType } from "@/data/resources-articles"; import { CONTENT } from "@/data/resources-content"; type ResourceFilter = "all" | ArticleType; const FILTER_ORDER: ResourceFilter[] = [ "all", "guide", "playbook", "template", ]; const TYPE_ICONS: Record = { guide: ( ), playbook: ( ), comparison: ( ), template: ( ), }; export default function ResourcesArea() { const { language } = useLanguage(); const lang = language === "ar" ? "ar" : "en"; const langLink = (path: string) => path.startsWith("http") ? path : `/${lang}${path === "/" ? "" : path}`; const content = CONTENT[lang]; const isArabic = lang === "ar"; const [activeFilter, setActiveFilter] = useState("all"); const visibleCards = useMemo( () => content.cards.filter((card) => isIndexableArticleSlug(card.articleId)), [content.cards], ); const filteredCards = useMemo(() => { if (activeFilter === "all") return visibleCards; return visibleCards.filter((card) => card.type === activeFilter); }, [activeFilter, visibleCards]); const q = encodeURIComponent(content.askAiPrompt); const aiLinks = [ { name: "ChatGPT", href: `https://chatgpt.com/?q=${q}`, bg: "#000000", svg: ( ), }, { name: "Claude", href: `https://claude.ai/new?q=${q}`, bg: "#F0EEE5", svg: ( ), }, { name: "Perplexity", href: `https://www.perplexity.ai/?q=${q}`, bg: "#0F1A1F", svg: ( ), }, { name: "Gemini", href: `https://gemini.google.com/app?q=${q}`, bg: "#FFFFFF", svg: ( ), }, { name: "Grok", href: `https://grok.com/?q=${q}`, bg: "#000000", svg: ( ), }, ]; return (
{content.badge}

{content.title}

{content.subtitle}

{content.primaryCta} {content.secondaryCta}
{content.stats.map((stat) => (
{stat.value} {stat.label}
))}
{/* Ask AI Section */}

{content.askAiTitle}

{content.askAiSubtitle}

{aiLinks.map((ai) => ( {ai.svg} ))}

{content.sectionsTitle}

{content.sectionsSubtitle}

{FILTER_ORDER.map((filter) => ( ))}
{filteredCards.length === 0 ? (

{lang === "ar" ? "لا توجد موارد في هذه الفئة بعد." : "No resources in this category yet."}

) : null} {filteredCards.map((card, index) => { const color = TYPE_COLORS[card.type]; return (
{TYPE_ICONS[card.type]}
{TYPE_LABELS[lang][card.type]}

{card.title}

{card.description}

{content.readArticle} {isArabic ? "←" : "→"}
); })}

{content.productTitle}

{content.productSubtitle}

{content.productCards.map((product) => (

{product.title}

{product.description}

{product.cta} →
))}
{content.funnelBadge}

{content.funnelTitle}

{content.funnelSubtitle}

{content.funnelSteps.map((step, index) => (
{String(index + 1).padStart(2, "0")}

{step.title}

{step.description}

))}

{content.ctaTitle}

{content.ctaSubtitle}

{content.ctaButton}
); }