import { createFileRoute, Link } from "@tanstack/react-router";
import { SpriteIcon, type SpriteIconName } from "@/components/SpriteIcon";
import { MarketingLayout } from "@/components/MarketingLayout";
import { BackToHub } from "@/components/BackToHub";
import { SeeAlso } from "@/components/SeeAlso";
import { getPageHead, createPageLoader } from "@/lib/page-seo";
import { useT } from "@/lib/i18n";

export const Route = createFileRoute("/$locale/i18n/multilingual-seo")({
  loader: createPageLoader(),
  head: ({ loaderData }) => {
    return getPageHead({
      messages: loaderData?.messages || {},
      locale: loaderData?.locale || "en",
      pageKey: "multilingualSeo",
      pathname: "/i18n/multilingual-seo",
      pageType: "educational",
      structuredDataOptions: {
        title: "Multilingual SEO Guide",
        description:
          "Complete guide to multilingual SEO: optimize your website for multiple languages and regions to rank globally with Better I18N.",
      },
    });
  },
  component: MultilingualSeoPage,
});

const challenges = [
  { icon: "api-connection", titleKey: "challenges.hreflang.title", descKey: "challenges.hreflang.description", defaultTitle: "Hreflang Implementation", defaultDesc: "Correctly implementing hreflang tags to tell search engines which language version to show each user." },
  { icon: "globe", titleKey: "challenges.urlStructure.title", descKey: "challenges.urlStructure.description", defaultTitle: "URL Structure Decisions", defaultDesc: "Choosing between subdirectories, subdomains, and ccTLDs for your multilingual site architecture." },
  { icon: "magnifying-glass", titleKey: "challenges.keywordResearch.title", descKey: "challenges.keywordResearch.description", defaultTitle: "Multilingual Keyword Research", defaultDesc: "Conducting keyword research in each language rather than translating English keywords directly." },
  { icon: "rocket", titleKey: "challenges.contentDuplication.title", descKey: "challenges.contentDuplication.description", defaultTitle: "Content Duplication Risks", defaultDesc: "Avoiding duplicate content penalties when similar pages exist across multiple language versions." },
];

function MultilingualSeoPage() {
  const t = useT("marketing.i18n.multilingualSeo");
  const tCommon = useT("marketing");
  const { locale } = Route.useParams();

  const benefits = [
    { key: "benefits.list.organicReach", defaultValue: "Expand organic reach to non-English speaking markets worldwide" },
    { key: "benefits.list.localSearchVisibility", defaultValue: "Improve visibility in local search results for each target market" },
    { key: "benefits.list.reducedBounceRate", defaultValue: "Reduce bounce rates by serving content in the user's preferred language" },
    { key: "benefits.list.higherConversions", defaultValue: "Increase conversion rates with culturally relevant localized content" },
    { key: "benefits.list.competitiveEdge", defaultValue: "Gain competitive advantage in markets with less SEO competition" },
    { key: "benefits.list.brandAuthority", defaultValue: "Build brand authority and trust with native-language content" },
  ];

  const processSteps = [
    { number: "1", titleKey: "process.step1.title", descKey: "process.step1.description", defaultTitle: "Audit & Plan", defaultDesc: "Assess your current site structure, identify target markets, and plan your multilingual URL architecture." },
    { number: "2", titleKey: "process.step2.title", descKey: "process.step2.description", defaultTitle: "Technical Setup", defaultDesc: "Implement hreflang tags, configure URL structure, and set up international sitemaps for each language." },
    { number: "3", titleKey: "process.step3.title", descKey: "process.step3.description", defaultTitle: "Content Localization", defaultDesc: "Translate and localize content with SEO-optimized keywords for each target language and region." },
    { number: "4", titleKey: "process.step4.title", descKey: "process.step4.description", defaultTitle: "Monitor & Scale", defaultDesc: "Track rankings and organic traffic per locale, then expand to additional markets based on performance data." },
  ];

  const urlStructures = [
    { titleKey: "urlStructures.subdirectory.title", descKey: "urlStructures.subdirectory.description", exampleKey: "urlStructures.subdirectory.example", defaultTitle: "Subdirectory", defaultDesc: "Language versions live under path segments on the same domain. Consolidates domain authority and is easiest to maintain.", defaultExample: "example.com/en/, example.com/fr/" },
    { titleKey: "urlStructures.subdomain.title", descKey: "urlStructures.subdomain.description", exampleKey: "urlStructures.subdomain.example", defaultTitle: "Subdomain", defaultDesc: "Each language gets its own subdomain. Allows separate server configurations but splits domain authority.", defaultExample: "en.example.com, fr.example.com" },
    { titleKey: "urlStructures.cctld.title", descKey: "urlStructures.cctld.description", exampleKey: "urlStructures.cctld.example", defaultTitle: "Country-Code TLD", defaultDesc: "Each country gets its own top-level domain. Strongest geotargeting signal but highest cost and complexity.", defaultExample: "example.com, example.fr, example.de" },
  ];

  const hreflangChecklist = [
    { key: "hreflang.checklist.selfRef", defaultValue: "Every page includes a self-referencing hreflang tag pointing to itself" },
    { key: "hreflang.checklist.bidirectional", defaultValue: "All hreflang references are bidirectional — page A points to page B and page B points back to page A" },
    { key: "hreflang.checklist.xDefault", defaultValue: "An x-default hreflang tag is set to indicate the fallback page for unmatched locales" },
    { key: "hreflang.checklist.validCodes", defaultValue: "Language and region codes follow ISO 639-1 and ISO 3166-1 Alpha-2 standards" },
    { key: "hreflang.checklist.canonical", defaultValue: "Canonical tags do not conflict with hreflang tags — each localized page canonicalizes to itself" },
    { key: "hreflang.checklist.sitemap", defaultValue: "International sitemaps include hreflang annotations as an alternative to HTML link elements" },
    { key: "hreflang.checklist.consistent", defaultValue: "Hreflang tags are consistent across all pages — no orphan references or missing reciprocal links" },
  ];

  const relatedPages = [
    { name: "International SEO Strategy", href: "/$locale/i18n/international-seo", description: t("related.internationalSeo", { defaultValue: "Build a comprehensive international SEO strategy" }) },
    { name: "Website Localization", href: "/$locale/i18n/website-localization", description: t("related.websiteLocalization", { defaultValue: "Adapt your website for global audiences" }) },
    { name: "Website Translation", href: "/$locale/i18n/website-translation", description: t("related.websiteTranslation", { defaultValue: "Translate your website for international users" }) },
    { name: "Translation Management System", href: "/$locale/i18n/translation-management-system", description: t("related.tms", { defaultValue: "Centralize your localization workflow with a TMS" }) },
  ];

  return (
    <MarketingLayout showCTA={false}>
      <BackToHub hub="i18n" locale={locale} />
      <section className="py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-2 rounded-full bg-mist-100 px-3 py-1 text-sm text-mist-700 mb-6">
              <SpriteIcon name="globe" className="size-4" />
              <span>{t("badge", { defaultValue: "Multilingual SEO" })}</span>
            </div>
            <h1 className="font-display text-4xl/[1.1] font-medium tracking-[-0.02em] text-mist-950 sm:text-5xl/[1.1]">
              {t("hero.title", { defaultValue: "Multilingual SEO: Rank in Every Language and Market You Serve" })}
            </h1>
            <p className="mt-6 text-lg/8 text-mist-700 max-w-2xl">
              {t("hero.subtitle", { defaultValue: "Multilingual SEO is the practice of optimizing your website to rank in search engines across multiple languages and regions. Learn hreflang tags, URL structures, localization SEO strategies, and how multilingual SEO services can help you capture global organic traffic." })}
            </p>
          </div>
        </div>
      </section>

      <section className="py-16 bg-white">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="lg:grid lg:grid-cols-2 lg:gap-16 items-start">
            <div>
              <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl mb-6">
                {t("definition.title", { defaultValue: "What Is Multilingual SEO?" })}
              </h2>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("definition.paragraph1", { defaultValue: "Multilingual SEO is the process of optimizing website content in multiple languages so that search engines can correctly index and rank each language version for users in the appropriate locale. It combines technical SEO with content localization to ensure that a Spanish-speaking user in Madrid sees Spanish content and a French speaker in Paris sees French content." })}
              </p>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("definition.paragraph2", { defaultValue: "A multilingual SEO company or multilingual SEO agency will typically address hreflang tag implementation, localized keyword research, URL architecture decisions, and canonical tag management — all of which signal to Google which version of a page to serve to which audience." })}
              </p>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("definition.paragraph3", { defaultValue: "Localization SEO goes further than translation. It accounts for regional search behavior, local slang, and cultural nuances that affect how people search. This is why multilingual SEO services must combine technical precision with deep linguistic expertise." })}
              </p>
              <p className="text-mist-700 leading-relaxed">
                {t("definition.paragraph4", { defaultValue: "Multilingual SEO also intersects with the rise of AI-powered search. Google AI Overviews, Perplexity, and other AI answer engines rely on structured language signals — including hreflang tags — to determine which language version of content to cite in generated responses. When hreflang implementation is correct, AI systems can confidently attribute and surface the right locale-specific content. This means proper multilingual SEO is no longer just about traditional search rankings — it directly affects whether your content appears in AI-generated answers for users searching in different languages." })}
              </p>
            </div>
            <div className="mt-10 lg:mt-0 p-8 rounded-2xl bg-mist-50 border border-mist-100">
              <h3 className="text-lg font-medium text-mist-950 mb-4">
                {t("keyStats.title", { defaultValue: "Why Multilingual SEO Matters" })}
              </h3>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("keyStats.content", { defaultValue: "Over 75% of internet users search in languages other than English. Only 25% of web content is in English, yet businesses that optimize for local languages capture 70% more qualified traffic from those markets. A multilingual SEO strategy is the most cost-effective path to international growth." })}
              </p>
              <p className="text-mist-700 leading-relaxed">
                {t("keyStats.content2", { defaultValue: "Google processes billions of searches daily in over 150 languages. Without proper hreflang implementation and localized content, your international pages compete against each other — causing keyword cannibalization and ranking losses." })}
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 bg-mist-50">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="text-center mb-12">
            <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl">
              {t("challenges.title", { defaultValue: "Common Multilingual SEO Challenges" })}
            </h2>
            <p className="mt-3 text-mist-700 max-w-2xl mx-auto">
              {t("challenges.subtitle", { defaultValue: "These are the technical and strategic obstacles most businesses face when scaling multilingual SEO." })}
            </p>
          </div>
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {challenges.map((challenge) => (
              <div key={challenge.titleKey} className="p-6 rounded-xl bg-white border border-mist-200">
                <div className="size-10 rounded-lg bg-mist-100 flex items-center justify-center text-mist-700 mb-4">
                  <SpriteIcon name={challenge.icon as SpriteIconName} className="size-5" />
                </div>
                <h3 className="text-base font-medium text-mist-950 mb-2">
                  {t(challenge.titleKey, { defaultValue: challenge.defaultTitle })}
                </h3>
                <p className="text-sm text-mist-700 leading-relaxed">
                  {t(challenge.descKey, { defaultValue: challenge.defaultDesc })}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 bg-white">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="text-center mb-12">
            <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl">
              {t("urlStructures.title", { defaultValue: "URL Structure Options for Multilingual Websites" })}
            </h2>
            <p className="mt-3 text-mist-700 max-w-2xl mx-auto">
              {t("urlStructures.subtitle", { defaultValue: "Choosing the right URL architecture is one of the most important multilingual SEO decisions you will make. Each approach has distinct tradeoffs for authority, maintenance, and geotargeting." })}
            </p>
          </div>
          <div className="grid grid-cols-1 gap-8 sm:grid-cols-3">
            {urlStructures.map((structure) => (
              <div key={structure.titleKey} className="p-6 rounded-xl border border-mist-200 bg-mist-50">
                <div className="flex items-center gap-3 mb-3">
                  <SpriteIcon name="group" className="size-5 text-mist-700" />
                  <h3 className="text-base font-medium text-mist-950">
                    {t(structure.titleKey, { defaultValue: structure.defaultTitle })}
                  </h3>
                </div>
                <p className="text-sm text-mist-700 leading-relaxed mb-3">
                  {t(structure.descKey, { defaultValue: structure.defaultDesc })}
                </p>
                <code className="text-xs bg-mist-200 text-mist-800 rounded px-2 py-1">
                  {t(structure.exampleKey, { defaultValue: structure.defaultExample })}
                </code>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 bg-mist-50">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="max-w-3xl mx-auto">
            <div className="text-center mb-10">
              <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl">
                {t("hreflang.checklist.title", { defaultValue: "Hreflang Tag Implementation Checklist" })}
              </h2>
              <p className="mt-3 text-mist-700 max-w-2xl mx-auto">
                {t("hreflang.checklist.subtitle", { defaultValue: "Use this checklist to verify your hreflang tags are correctly implemented. Missing or misconfigured hreflang annotations are among the most common multilingual SEO errors, and search engines will ignore invalid hreflang directives entirely." })}
              </p>
            </div>
            <ul className="space-y-4">
              {hreflangChecklist.map((item) => (
                <li key={item.key} className="flex items-start gap-3 p-4 rounded-xl border border-mist-200 bg-white">
                  <SpriteIcon name="checkmark" className="size-5 text-emerald-500 mt-0.5 shrink-0" />
                  <span className="text-mist-700 leading-relaxed">{t(item.key, { defaultValue: item.defaultValue })}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      <section className="py-16 bg-white">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
            <div>
              <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl mb-6">
                {t("benefits.title", { defaultValue: "Benefits of a Strong Multilingual SEO Strategy" })}
              </h2>
              <p className="text-mist-700 leading-relaxed">
                {t("benefits.subtitle", { defaultValue: "Proper multilingual SEO and localization SEO investment compounds over time, giving you sustainable organic growth across every market you enter." })}
              </p>
            </div>
            <div className="mt-8 lg:mt-0">
              <ul className="space-y-4">
                {benefits.map((benefit) => (
                  <li key={benefit.key} className="flex items-start gap-3">
                    <SpriteIcon name="checkmark" className="size-5 text-emerald-500 mt-0.5 shrink-0" />
                    <span className="text-mist-700">{t(benefit.key, { defaultValue: benefit.defaultValue })}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 bg-mist-50">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="text-center mb-12">
            <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl">
              {t("localizationVsTranslation.title", { defaultValue: "Content Localization vs Translation for SEO" })}
            </h2>
            <p className="mt-3 text-mist-700 max-w-2xl mx-auto">
              {t("localizationVsTranslation.subtitle", { defaultValue: "Direct translation and true content localization produce fundamentally different SEO outcomes. Understanding the distinction is essential for any multilingual SEO strategy." })}
            </p>
          </div>
          <div className="lg:grid lg:grid-cols-2 lg:gap-16">
            <div className="p-8 rounded-2xl bg-mist-50 border border-mist-100">
              <h3 className="text-lg font-medium text-mist-950 mb-4">
                {t("localizationVsTranslation.translationFails.title", { defaultValue: "Why Translation Alone Fails" })}
              </h3>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("localizationVsTranslation.translationFails.paragraph1", { defaultValue: "Keyword mismatch is the primary reason direct translation underperforms. A high-volume English keyword, when translated word-for-word into German or Japanese, often maps to a phrase that native speakers rarely type into a search engine. Search engines rank pages that match actual query patterns — not pages that contain grammatically correct but rarely searched phrases." })}
              </p>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("localizationVsTranslation.translationFails.paragraph2", { defaultValue: "Cultural context also shifts the meaning and relevance of content. Metaphors, idioms, and references that resonate with an American audience may confuse or alienate readers in South Korea or Brazil. When users bounce from content that feels unnatural, search engines interpret that engagement signal as a ranking demotion indicator." })}
              </p>
              <p className="text-mist-700 leading-relaxed">
                {t("localizationVsTranslation.translationFails.paragraph3", { defaultValue: "Search intent itself varies between languages and regions. The same topic may have informational intent in one market and transactional intent in another. A translated page that ignores these intent differences will rank poorly because it fails to satisfy what users in that locale are actually looking for." })}
              </p>
            </div>
            <div className="mt-8 lg:mt-0 p-8 rounded-2xl bg-mist-50 border border-mist-100">
              <h3 className="text-lg font-medium text-mist-950 mb-4">
                {t("localizationVsTranslation.localizationAdds.title", { defaultValue: "What Content Localization Adds" })}
              </h3>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("localizationVsTranslation.localizationAdds.paragraph1", { defaultValue: "Native keyword research is the foundation of content localization. Instead of translating English keywords, localization teams research what terms people in each market actually search. This often reveals entirely different keyword clusters that a translation-only approach would miss completely." })}
              </p>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("localizationVsTranslation.localizationAdds.paragraph2", { defaultValue: "Cultural adaptation ensures that examples, case studies, and references align with the target audience's experience. A localized page for the French market might reference GDPR compliance scenarios, while the same page for Japan might emphasize data residency regulations — even though the core topic remains the same." })}
              </p>
              <p className="text-mist-700 leading-relaxed">
                {t("localizationVsTranslation.localizationAdds.paragraph3", { defaultValue: "Local link building relevance improves when content is genuinely localized. Regional publishers, bloggers, and industry sites are far more likely to link to content that speaks to their audience's specific concerns. These local backlinks send strong geographic relevance signals to search engines, reinforcing your rankings in that specific market." })}
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 bg-mist-100">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="text-center mb-12">
            <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl">
              {t("process.title", { defaultValue: "Multilingual SEO Implementation Process" })}
            </h2>
            <p className="mt-3 text-mist-700">
              {t("process.subtitle", { defaultValue: "A structured approach to launching and scaling multilingual SEO for your website." })}
            </p>
          </div>
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {processSteps.map((step) => (
              <div key={step.number} className="text-center p-6">
                <div className="size-10 rounded-full bg-mist-950 text-white flex items-center justify-center text-sm font-medium mx-auto mb-4">
                  {step.number}
                </div>
                <h3 className="text-base font-medium text-mist-950 mb-2">
                  {t(step.titleKey, { defaultValue: step.defaultTitle })}
                </h3>
                <p className="text-sm text-mist-600">
                  {t(step.descKey, { defaultValue: step.defaultDesc })}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 bg-white">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl mb-6">
              {t("solution.title", { defaultValue: "How Better I18N Powers Your Multilingual SEO" })}
            </h2>
            <p className="text-mist-700 leading-relaxed mb-8">
              {t("solution.content", { defaultValue: "Better I18N automates the translation pipeline that underpins multilingual SEO success. From AI-powered localization that preserves keyword intent to automatic hreflang injection and CDN-delivered locale bundles, Better I18N removes the technical friction of multilingual SEO implementation." })}
            </p>
            <div className="grid grid-cols-1 gap-6 sm:grid-cols-3 text-left">
              <div className="p-6 rounded-xl bg-mist-50 border border-mist-100">
                <h3 className="text-base font-medium text-mist-950 mb-2">
                  {t("solution.feature1.title", { defaultValue: "SEO-Aware Translations" })}
                </h3>
                <p className="text-sm text-mist-700">
                  {t("solution.feature1.description", { defaultValue: "AI translations that preserve target keywords, meta tag structure, and semantic intent for each locale." })}
                </p>
              </div>
              <div className="p-6 rounded-xl bg-mist-50 border border-mist-100">
                <h3 className="text-base font-medium text-mist-950 mb-2">
                  {t("solution.feature2.title", { defaultValue: "Hreflang Management" })}
                </h3>
                <p className="text-sm text-mist-700">
                  {t("solution.feature2.description", { defaultValue: "Automatically generate and maintain hreflang tags across all language variants without manual configuration." })}
                </p>
              </div>
              <div className="p-6 rounded-xl bg-mist-50 border border-mist-100">
                <h3 className="text-base font-medium text-mist-950 mb-2">
                  {t("solution.feature3.title", { defaultValue: "Global CDN Delivery" })}
                </h3>
                <p className="text-sm text-mist-700">
                  {t("solution.feature3.description", { defaultValue: "Serve locale content from edge locations worldwide to improve Core Web Vitals scores and international rankings." })}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-16 bg-mist-50">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="max-w-3xl mx-auto">
            <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl mb-8 text-center">
              {t("faq.title", { defaultValue: "Frequently Asked Questions About Multilingual SEO" })}
            </h2>
            <div className="space-y-6">
              <div className="p-6 rounded-xl bg-white border border-mist-200">
                <h3 className="text-base font-medium text-mist-950 mb-2">
                  {t("faq.q1.question", { defaultValue: "What is the difference between multilingual SEO and international SEO?" })}
                </h3>
                <p className="text-sm text-mist-700 leading-relaxed">
                  {t("faq.q1.answer", { defaultValue: "Multilingual SEO focuses on optimizing content across different languages — ensuring each language version ranks for relevant queries in that language. International SEO is a broader concept that also includes geographic targeting, currency, and market-specific strategies. Multilingual SEO is a key component of any international SEO strategy." })}
                </p>
              </div>
              <div className="p-6 rounded-xl bg-white border border-mist-200">
                <h3 className="text-base font-medium text-mist-950 mb-2">
                  {t("faq.q2.question", { defaultValue: "Do I need separate domains for each language?" })}
                </h3>
                <p className="text-sm text-mist-700 leading-relaxed">
                  {t("faq.q2.answer", { defaultValue: "No. Most multilingual websites use subdirectories (example.com/fr/) or subdomains (fr.example.com) rather than separate country-code TLDs. Subdirectories consolidate domain authority and are the most common choice. Separate domains (example.fr) provide the strongest geotargeting signal but split authority and increase maintenance cost." })}
                </p>
              </div>
              <div className="p-6 rounded-xl bg-white border border-mist-200">
                <h3 className="text-base font-medium text-mist-950 mb-2">
                  {t("faq.q3.question", { defaultValue: "How do hreflang tags work?" })}
                </h3>
                <p className="text-sm text-mist-700 leading-relaxed">
                  {t("faq.q3.answer", { defaultValue: "Hreflang tags are HTML link elements placed in the <head> of each page that tell search engines which language and regional version of a page to serve to users. Each page lists all its language variants, including itself. The x-default value indicates the fallback page for users whose language is not specifically targeted. Correct implementation prevents duplicate content issues across language versions." })}
                </p>
              </div>
              <div className="p-6 rounded-xl bg-white border border-mist-200">
                <h3 className="text-base font-medium text-mist-950 mb-2">
                  {t("faq.q4.question", { defaultValue: "Should I translate my keywords or research new ones per language?" })}
                </h3>
                <p className="text-sm text-mist-700 leading-relaxed">
                  {t("faq.q4.answer", { defaultValue: "Always research keywords natively in each target language rather than directly translating English keywords. Search behavior differs across languages and cultures — a direct translation may not match how people actually search. Use local keyword research tools and native speakers to identify high-value terms in each market." })}
                </p>
              </div>
              <div className="p-6 rounded-xl bg-white border border-mist-200">
                <h3 className="text-base font-medium text-mist-950 mb-2">
                  {t("faq.q5.question", { defaultValue: "How long does it take to see results from multilingual SEO?" })}
                </h3>
                <p className="text-sm text-mist-700 leading-relaxed">
                  {t("faq.q5.answer", { defaultValue: "Multilingual SEO typically takes 3-6 months to show meaningful ranking improvements in new language markets, similar to standard SEO timelines. Factors that affect speed include domain authority, content quality, competition level in the target market, and technical implementation correctness. Markets with less SEO competition may show results faster." })}
                </p>
              </div>
              <div className="p-6 rounded-xl bg-white border border-mist-200">
                <h3 className="text-base font-medium text-mist-950 mb-2">
                  {t("faq.q6.question", { defaultValue: "What are the most common hreflang mistakes?" })}
                </h3>
                <p className="text-sm text-mist-700 leading-relaxed">
                  {t("faq.q6.answer", { defaultValue: "The most frequent hreflang mistakes are missing reciprocal tags, incorrect language or region codes, and conflicts between canonical and hreflang tags. Reciprocal tags mean that if page A declares page B as its French version, page B must also declare page A as its English version — otherwise search engines may ignore both annotations. Using wrong codes, such as 'uk' instead of the correct ISO 639-1 code 'en-GB' for British English, causes search engines to discard the tag entirely. Canonical tag conflicts occur when a localized page points its canonical tag to a different language version instead of itself, which contradicts the hreflang declaration and confuses crawlers." })}
                </p>
              </div>
              <div className="p-6 rounded-xl bg-white border border-mist-200">
                <h3 className="text-base font-medium text-mist-950 mb-2">
                  {t("faq.q7.question", { defaultValue: "How do I measure multilingual SEO success?" })}
                </h3>
                <p className="text-sm text-mist-700 leading-relaxed">
                  {t("faq.q7.answer", { defaultValue: "Measure multilingual SEO success by tracking per-locale organic traffic, keyword rankings segmented by language and country, and conversion rates for each market. Google Search Console's international targeting report and the performance report filtered by country provide direct visibility into how each locale performs. Use hreflang validation tools to regularly audit your implementation for errors such as orphan tags or missing return links. Monitor indexation status per language version to ensure search engines are crawling and indexing all locale variants. Comparing organic growth rates across locales helps identify which markets are responding to your multilingual SEO efforts and which need further optimization." })}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>


      <SeeAlso currentSlug="multilingual-seo" locale={locale} />
      <section className="py-12 border-t border-mist-200">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <h2 className="text-lg font-medium text-mist-950 mb-6">{tCommon("whatIs.relatedTopics", { defaultValue: "Related Topics" })}</h2>
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {relatedPages.map((page) => (
              <Link
                key={page.href}
                to={page.href}
                params={{ locale }}
                className="group flex items-center justify-between p-4 rounded-xl border border-mist-200 bg-white hover:border-mist-300 hover:shadow-md transition-all"
              >
                <div>
                  <h3 className="text-sm font-medium text-mist-950">{page.name}</h3>
                  <p className="text-xs text-mist-500 mt-1">{page.description}</p>
                </div>
                <SpriteIcon name="arrow-right" className="w-4 h-4 text-mist-400 group-hover:text-mist-600 group-hover:translate-x-1 transition-all" />
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 sm:py-24 bg-mist-950 rounded-3xl mx-6 lg:mx-10 mb-16">
        <div className="mx-auto max-w-2xl text-center px-6">
          <h2 className="font-display text-3xl/[1.1] font-medium tracking-[-0.02em] text-white sm:text-4xl/[1.1]">
            {t("cta.title", { defaultValue: "Launch Your Multilingual SEO Strategy Today" })}
          </h2>
          <p className="mt-4 text-lg text-mist-300">
            {t("cta.subtitle", { defaultValue: "Automate translation, hreflang management, and locale delivery so your teams can focus on content strategy — not infrastructure." })}
          </p>
          <div className="mt-8 flex justify-center gap-4 flex-wrap">
            <a
              href="https://dash.better-i18n.com"
              aria-label="Get started with Better I18N for multilingual SEO"
              className="rounded-full bg-white px-6 py-3 text-sm font-medium text-mist-950 hover:bg-mist-100 transition-colors"
            >
              {t("cta.primary", { defaultValue: "Get Started Free" })}
            </a>
            <a
              href="https://docs.better-i18n.com"
              className="rounded-full border border-mist-600 px-6 py-3 text-sm font-medium text-white hover:bg-mist-800 transition-colors"
            >
              {t("cta.secondary", { defaultValue: "Read the Docs" })}
            </a>
          </div>
        </div>
      </section>
    </MarketingLayout>
  );
}
