'use client'

import { useMarketplacePreferences } from '@/components/MarketplaceShell'
import PricingClient from './PricingClient'

const copy = {
  en: {
    kicker: 'Pricing',
    title: 'One platform, every fleet size.',
    body: 'Start free for 90 days, then choose the plan that grows with your business. Switch plans or cancel at any time.',
    faq: 'Frequently asked',
    items: [
      ['Can I change plans later?', 'Yes. Upgrade or downgrade at any time — changes take effect on your next billing cycle.'],
      ['What counts as a vehicle?', 'Any vehicle record added to your fleet dashboard, active or not.'],
      ['Is there a setup fee?', 'No setup fee, ever. You only pay the monthly or annual subscription.'],
      ['How does the marketplace listing work?', 'All paid plans include a public marketplace listing on RentalDriveGo. Renters can discover your fleet and are redirected to your branded booking site.'],
    ],
  },
  fr: {
    kicker: 'Tarifs',
    title: 'Une seule plateforme pour toutes les tailles de flotte.',
    body: 'Commencez gratuitement pendant 90 jours, puis choisissez la formule qui accompagne votre activité. Vous pouvez changer de formule ou annuler à tout moment.',
    faq: 'Questions fréquentes',
    items: [
      ['Puis-je changer de formule plus tard ?', 'Oui. Vous pouvez passer à une formule supérieure ou inférieure à tout moment. Les changements prennent effet au cycle de facturation suivant.'],
      ["Qu'est-ce qui compte comme véhicule ?", "Tout véhicule ajouté à votre tableau de bord de flotte, qu'il soit actif ou non."],
      ["Y a-t-il des frais d'installation ?", "Aucun frais d'installation. Vous payez uniquement l'abonnement mensuel ou annuel."],
      ['Comment fonctionne la visibilité marketplace ?', 'Toutes les formules payantes incluent une présence publique sur RentalDriveGo. Les clients découvrent votre flotte puis sont redirigés vers votre site de réservation.'],
    ],
  },
  ar: {
    kicker: 'الأسعار',
    title: 'منصة واحدة لكل أحجام الأساطيل.',
    body: 'ابدأ مجاناً لمدة 14 يوماً، ثم اختر الخطة التي تناسب نمو نشاطك. يمكنك تغيير الخطة أو إلغاءها في أي وقت.',
    faq: 'الأسئلة الشائعة',
    items: [
      ['هل يمكنني تغيير الخطة لاحقاً؟', 'نعم. يمكنك الترقية أو التخفيض في أي وقت — وتدخل التغييرات حيز التنفيذ في دورة الفوترة التالية.'],
      ['ما الذي يُحتسب كسيارة؟', 'أي سجل سيارة تتم إضافته إلى لوحة الأسطول سواء كان نشطاً أم لا.'],
      ['هل توجد رسوم إعداد؟', 'لا توجد أي رسوم إعداد. أنت تدفع فقط قيمة الاشتراك الشهري أو السنوي.'],
      ['كيف تعمل قائمة السوق؟', 'كل الخطط المدفوعة تشمل الظهور العام على RentalDriveGo. يكتشف المستأجرون أسطولك ثم يتم تحويلهم إلى موقع الحجز الخاص بك.'],
    ],
  },
} as const

export default function PricingPageContent({ initialPricing }: { initialPricing?: React.ComponentProps<typeof PricingClient>['initialPricing'] }) {
  const { language } = useMarketplacePreferences()
  const dict = copy[language]

  return (
    <main className="site-page">
      <div className="site-section">
        <div className="mx-auto max-w-2xl text-center">
          <p className="site-kicker">{dict.kicker}</p>
          <h1 className="site-title">{dict.title}</h1>
          <p className="site-lead">{dict.body}</p>
        </div>

        <div className="mt-16">
          <PricingClient initialPricing={initialPricing} />
        </div>

        <div className="site-panel mx-auto mt-24 max-w-3xl divide-y divide-stone-200/80 dark:divide-stone-800">
          <h2 className="pb-8 text-2xl font-bold text-stone-900 dark:text-stone-100">{dict.faq}</h2>
          {dict.items.map(([q, a]) => (
            <div key={q} className="py-6">
              <p className="font-semibold text-stone-900 dark:text-stone-100">{q}</p>
              <p className="mt-2 text-sm leading-6 text-stone-600 dark:text-stone-400">{a}</p>
            </div>
          ))}
        </div>
      </div>
    </main>
  )
}