'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 14 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 14 jours puis choisissez le plan qui accompagne votre activité. Changez ou annulez à tout moment.',
    faq: 'Questions fréquentes',
    items: [
      ['Puis-je changer de plan plus tard ?', 'Oui. Vous pouvez monter ou descendre à tout moment — les changements prennent effet au prochain cycle de facturation.'],
      ['Qu’est-ce qui compte comme véhicule ?', 'Tout véhicule ajouté à votre tableau de bord flotte, 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 ?', 'Tous les plans payants 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() {
  const { language } = useMarketplacePreferences()
  const dict = copy[language]

  return (
    <main className="min-h-screen bg-[radial-gradient(circle_at_top,#fef3c7,transparent_30%),linear-gradient(180deg,#fafaf9,white)]">
      <div className="shell py-20">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-semibold uppercase tracking-[0.24em] text-amber-700">{dict.kicker}</p>
          <h1 className="mt-4 text-5xl font-black tracking-tight text-stone-900">{dict.title}</h1>
          <p className="mt-5 text-lg leading-8 text-stone-600">{dict.body}</p>
        </div>

        <div className="mt-16">
          <PricingClient />
        </div>

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