'use client'

import { useMarketplacePreferences } from '@/components/MarketplaceShell'
import { type FooterPageSlug, getFooterPageContent } from '@/lib/footerContent'

const pageMeta = {
  en: {
    kicker: 'Footer information',
    cta: 'Need more details?',
    support: 'Contact the RentalDriveGo team through our official channels for business, support, or partnership requests.',
  },
  fr: {
    kicker: 'Informations du pied de page',
    cta: 'Besoin de plus de détails ?',
    support: "Contactez l'équipe RentalDriveGo via nos canaux officiels pour toute demande commerciale, support ou partenariat.",
  },
  ar: {
    kicker: 'معلومات التذييل',
    cta: 'هل تحتاج إلى مزيد من التفاصيل؟',
    support: 'تواصل مع فريق RentalDriveGo عبر القنوات الرسمية للاستفسارات التجارية أو الدعم أو الشراكات.',
  },
} as const

export default function FooterContentPage({ slug }: { slug: FooterPageSlug }) {
  const { language } = useMarketplacePreferences()
  const content = getFooterPageContent(language, slug)
  const meta = pageMeta[language]
  const isArabic = language === 'ar'

  return (
    <main className="site-page">
      <div className="site-section mx-auto max-w-4xl">
        <section className="site-panel overflow-hidden p-0">
          <div className="site-panel-muted rounded-none border-0 border-b border-stone-100/80 px-6 py-10 sm:px-10 sm:py-14 dark:border-stone-800">
            <p className="site-kicker">
              {meta.kicker}
            </p>
            <h1 className="site-title">
              {content.title}
            </h1>
          </div>

          <div className={`space-y-6 px-6 py-10 sm:px-10 sm:py-12 ${isArabic ? 'text-right' : 'text-left'}`}>
            {content.paragraphs.map((paragraph) => (
              <p key={paragraph} className="text-lg leading-8 text-stone-700 dark:text-stone-300">
                {paragraph}
              </p>
            ))}

            <div className="rounded-3xl border border-amber-200 bg-amber-50 px-6 py-5 dark:border-amber-800 dark:bg-amber-950/30">
              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-amber-800 dark:text-amber-400">
                {meta.cta}
              </p>
              <p className="mt-2 text-base leading-7 text-stone-700 dark:text-stone-300">{meta.support}</p>
            </div>
          </div>
        </section>
      </div>
    </main>
  )
}