import { Link } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { ArrowRight, CheckCircle, FileText, Link2 } from 'lucide-react'; import BreadcrumbNav from '@/components/seo/BreadcrumbNav'; import SEOHead from '@/components/seo/SEOHead'; import FAQSection from '@/components/seo/FAQSection'; import RelatedTools from '@/components/seo/RelatedTools'; import SuggestedTools from '@/components/seo/SuggestedTools'; import { getLocalizedText, getLocalizedTextList, getProgrammaticToolPage, getSeoCollectionPage, interpolateTemplate, normalizeSeoLocale, } from '@/config/seoPages'; import { getToolSEO } from '@/config/seoData'; import { generateBreadcrumbs, generateFAQ, generateHowTo, generateToolSchema, generateWebPage, getSiteOrigin, } from '@/utils/seo'; import NotFoundPage from '@/pages/NotFoundPage'; interface SeoPageProps { slug: string; } const COPY = { en: { cta: 'Open the tool', introHeading: 'What this page helps you do', workflowHeading: 'Recommended workflow', useCasesHeading: 'When this workflow fits best', relatedHeading: 'Related guides', internalLinksHeading: 'You may also need', supportHeading: 'Built for fast bilingual workflows', supportBody: 'Dociva supports English and Arabic user flows, which makes these landing pages usable for both local and international search traffic.', stepsName: 'How to use this workflow', breadcrumbLabel: 'Guides', popularTools: 'Popular tools', }, ar: { cta: 'افتح الأداة', introHeading: 'ما الذي تساعدك عليه هذه الصفحة', workflowHeading: 'سير العمل المقترح', useCasesHeading: 'متى يكون هذا المسار مناسباً', relatedHeading: 'صفحات ذات صلة', internalLinksHeading: 'قد تحتاج أيضاً', supportHeading: 'مصممة لسير عمل ثنائي اللغة بسرعة', supportBody: 'يدعم Dociva سير العمل بالإنجليزية والعربية، مما يجعل صفحات الهبوط هذه قابلة للاستخدام مع الترافيك المحلي والدولي معاً.', stepsName: 'كيفية استخدام هذا المسار', breadcrumbLabel: 'الأدلة', popularTools: 'أدوات شائعة', }, } as const; export default function SeoPage({ slug }: SeoPageProps) { const { t, i18n } = useTranslation(); const locale = normalizeSeoLocale(i18n.language); const copy = COPY[locale]; const page = getProgrammaticToolPage(slug); if (!page) { return ; } const tool = getToolSEO(page.toolSlug); if (!tool) { return ; } const toolTitle = t(`tools.${tool.i18nKey}.title`); const toolDescription = t(`tools.${tool.i18nKey}.description`); const steps = t(`seo.${tool.i18nKey}.howToUse`, { returnObjects: true }) as string[]; const benefits = t(`seo.${tool.i18nKey}.benefits`, { returnObjects: true }) as string[]; const useCases = t(`seo.${tool.i18nKey}.useCases`, { returnObjects: true }) as string[]; const focusKeyword = getLocalizedText(page.focusKeyword, locale); const keywords = [focusKeyword, ...getLocalizedTextList(page.supportingKeywords, locale)].join(', '); const tokens = { brand: 'Dociva', focusKeyword, }; const title = interpolateTemplate(getLocalizedText(page.titleTemplate, locale), tokens); const description = interpolateTemplate(getLocalizedText(page.descriptionTemplate, locale), tokens); const path = locale === 'ar' ? `/ar/${page.slug}` : `/${page.slug}`; const siteOrigin = getSiteOrigin(typeof window !== 'undefined' ? window.location.origin : ''); const url = `${siteOrigin}${path}`; 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 introBody = `${toolDescription} ${description}`; const workflowBody = `${t(`seo.${tool.i18nKey}.whatItDoes`)} ${t(`tools.${tool.i18nKey}.shortDesc`)}`; const fallbackBenefits = tool.features; const resolvedBenefits = Array.isArray(benefits) && benefits.length > 0 ? benefits : fallbackBenefits; const resolvedUseCases = Array.isArray(useCases) && useCases.length > 0 ? useCases : tool.relatedSlugs.map((relatedSlug) => { const relatedTool = getToolSEO(relatedSlug); return relatedTool ? t(`tools.${relatedTool.i18nKey}.title`) : relatedSlug; }); const localizedCollectionPath = (collectionSlug: string) => (locale === 'ar' ? `/ar/${collectionSlug}` : `/${collectionSlug}`); 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, }), generateToolSchema({ name: toolTitle, description, url, category: tool.category === 'PDF' ? 'UtilitiesApplication' : 'WebApplication', }), generateBreadcrumbs([ { name: t('common.home'), url: siteOrigin }, { name: copy.breadcrumbLabel, url: siteOrigin }, { name: title, url }, ]), generateHowTo({ name: copy.stepsName, description, steps: Array.isArray(steps) ? steps : [], url, }), generateFAQ(faqItems), ]; return ( <>

{focusKeyword}

{title}

{description}

{copy.cta} {toolTitle}

{copy.popularTools}

{toolTitle}

{toolDescription}

    {resolvedBenefits.slice(0, 4).map((item) => (
  • {item}
  • ))}

{copy.introHeading}

{introBody}

{copy.workflowHeading}

{workflowBody}

    {(Array.isArray(steps) ? steps : []).map((step) => (
  1. {step}
  2. ))}

{copy.useCasesHeading}

{resolvedUseCases.slice(0, 6).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 (
{localizedCollectionPath(collection.slug)}

{collectionTitle}

{interpolateTemplate(getLocalizedText(collection.descriptionTemplate, locale), { brand: 'Dociva', focusKeyword: getLocalizedText(collection.focusKeyword, locale), })}

); })}

{copy.internalLinksHeading}

{copy.supportHeading}

{copy.supportBody}

); }