import { Link } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { ArrowRight, FolderKanban, Link2 } from 'lucide-react'; import SEOHead from '@/components/seo/SEOHead'; import FAQSection from '@/components/seo/FAQSection'; import { getLocalizedText, getLocalizedTextList, getSeoCollectionPage, interpolateTemplate, normalizeSeoLocale, } from '@/config/seoPages'; import { getToolSEO } from '@/config/seoData'; import { generateBreadcrumbs, generateFAQ, generateWebPage, getSiteOrigin } from '@/utils/seo'; import NotFoundPage from '@/pages/NotFoundPage'; interface SeoCollectionPageProps { slug: string; } const COPY = { en: { toolsHeading: 'Popular tools in this collection', selectionHeading: 'How to choose the right workflow', relatedHeading: 'Related landing pages', openTool: 'Open tool', chooseBullets: [ 'Pick a conversion workflow when the format itself needs to change.', 'Pick a PDF workflow when you need to compress, merge, split, or secure a file.', 'Use the shortest path first, then add OCR or cleanup only if the source file needs it.', ], breadcrumbLabel: 'Collections', }, ar: { toolsHeading: 'أدوات شائعة داخل هذه المجموعة', selectionHeading: 'كيف تختار سير العمل المناسب', relatedHeading: 'صفحات هبوط ذات صلة', openTool: 'افتح الأداة', chooseBullets: [ 'اختر مسار تحويل عندما تحتاج إلى تغيير الصيغة نفسها.', 'اختر مسار PDF عندما تحتاج إلى الضغط أو الدمج أو التقسيم أو الحماية.', 'ابدأ بأقصر مسار مباشر، ثم أضف OCR أو التنظيف فقط إذا احتاج الملف المصدر إلى ذلك.', ], breadcrumbLabel: 'المجموعات', }, } as const; export default function SeoCollectionPage({ slug }: SeoCollectionPageProps) { const { t, i18n } = useTranslation(); const locale = normalizeSeoLocale(i18n.language); const copy = COPY[locale]; const page = getSeoCollectionPage(slug); if (!page) { return ; } const focusKeyword = getLocalizedText(page.focusKeyword, locale); const tokens = { brand: 'Dociva', focusKeyword, }; const title = interpolateTemplate(getLocalizedText(page.titleTemplate, locale), tokens); const description = interpolateTemplate(getLocalizedText(page.descriptionTemplate, locale), tokens); const intro = interpolateTemplate(getLocalizedText(page.introTemplate, locale), tokens); const keywords = [focusKeyword, ...getLocalizedTextList(page.supportingKeywords, locale)].join(', '); const siteOrigin = getSiteOrigin(typeof window !== 'undefined' ? window.location.origin : ''); const faqItems = page.faqTemplates.map((item) => ({ question: getLocalizedText(item.question, locale), answer: getLocalizedText(item.answer, locale), })); const relatedCollections = page.relatedCollectionSlugs .map((collectionSlug) => getSeoCollectionPage(collectionSlug)) .filter((entry): entry is NonNullable => Boolean(entry)); const contentSections = page.contentSections ?? []; const path = locale === 'ar' ? `/ar/${page.slug}` : `/${page.slug}`; const url = `${siteOrigin}${path}`; const alternates = [ { hrefLang: 'en', href: `${siteOrigin}/${page.slug}`, ogLocale: 'en_US' }, { hrefLang: 'ar', href: `${siteOrigin}/ar/${page.slug}`, ogLocale: 'ar_SA' }, ]; const jsonLd = [ generateWebPage({ name: title, description, url, }), generateBreadcrumbs([ { name: t('common.home'), url: siteOrigin }, { name: copy.breadcrumbLabel, url: siteOrigin }, { name: title, url }, ]), generateFAQ(faqItems), ]; return ( <>

{focusKeyword}

{title}

{description}

{intro}

{copy.toolsHeading}

{page.targetToolSlugs.map((toolSlug) => { const tool = getToolSEO(toolSlug); if (!tool) { return null; } return (

{tool.category}

{t(`tools.${tool.i18nKey}.title`)}

{t(`tools.${tool.i18nKey}.shortDesc`)}

{copy.openTool} ); })}

{copy.selectionHeading}

    {copy.chooseBullets.map((item) => (
  • {item}
  • ))}
{contentSections.length > 0 ? (
{contentSections.map((section) => (

{getLocalizedText(section.heading, locale)}

{getLocalizedText(section.body, locale)}

))}
) : null}

{copy.relatedHeading}

{relatedCollections.map((collection) => { const collectionTitle = interpolateTemplate(getLocalizedText(collection.titleTemplate, locale), { brand: 'Dociva', focusKeyword: getLocalizedText(collection.focusKeyword, locale), }); return (
{locale === 'ar' ? `/ar/${collection.slug}` : `/${collection.slug}`}

{collectionTitle}

); })}
); }