'use client'

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

const copy = {
  en: {
    kicker: 'Features',
    title: 'Operations, marketplace discovery, and branded booking.',
    body: 'RentalDriveGo combines company-only operations with a public marketplace that sends renters to each company’s own payment flow.',
    cards: [
      ['Private dashboard', 'Fleet, reservations, CRM, team permissions, billing, and reports stay isolated per company.'],
      ['Marketplace discovery', 'Published vehicles and public offers appear on `/explore` for cross-company browsing.'],
      ['Branded booking site', 'Each company gets its own subdomain where renters complete booking and payment directly.'],
      ['Payment flexibility', 'Use AmanPay or PayPal for subscriptions and for company-side renter payments.'],
      ['Advanced rental ops', 'Insurance, additional drivers, pricing rules, and structured fuel policies live in dashboard settings.'],
      ['Notification controls', 'Both company staff and renters can manage event-by-channel notification preferences.'],
    ],
  },
  fr: {
    kicker: 'Fonctionnalités',
    title: 'Opérations, découverte marketplace et réservation de marque.',
    body: 'RentalDriveGo combine des opérations privées pour l’entreprise avec une marketplace publique qui redirige les clients vers le parcours de paiement propre à chaque société.',
    cards: [
      ['Tableau de bord privé', 'Flotte, réservations, CRM, permissions d’équipe, facturation et rapports restent isolés par entreprise.'],
      ['Découverte marketplace', 'Les véhicules publiés et les offres publiques apparaissent sur `/explore` pour une navigation multi-entreprises.'],
      ['Site de réservation de marque', 'Chaque entreprise dispose de son propre sous-domaine où les clients finalisent la réservation et le paiement.'],
      ['Flexibilité de paiement', 'Utilisez AmanPay ou PayPal pour les abonnements et pour les paiements côté entreprise.'],
      ['Opérations avancées', 'Assurance, conducteurs supplémentaires, règles tarifaires et politiques carburant structurées sont gérés dans les paramètres du tableau de bord.'],
      ['Contrôle des notifications', 'Le personnel comme les clients peuvent gérer leurs préférences de notification par événement et canal.'],
    ],
  },
  ar: {
    kicker: 'المزايا',
    title: 'العمليات، اكتشاف السوق، والحجز المخصص.',
    body: 'يجمع RentalDriveGo بين عمليات الشركة الخاصة وسوق عام يوجّه المستأجرين إلى مسار الدفع الخاص بكل شركة.',
    cards: [
      ['لوحة تحكم خاصة', 'الأسطول والحجوزات وCRM وصلاحيات الفريق والفوترة والتقارير تبقى معزولة لكل شركة.'],
      ['اكتشاف عبر السوق', 'تظهر السيارات المنشورة والعروض العامة في `/explore` للتصفح بين الشركات.'],
      ['موقع حجز مخصص', 'تحصل كل شركة على نطاق فرعي خاص بها لإتمام الحجز والدفع مباشرة.'],
      ['مرونة الدفع', 'استخدم AmanPay أو PayPal للاشتراكات ومدفوعات المستأجرين من جهة الشركة.'],
      ['عمليات متقدمة', 'التأمين والسائقون الإضافيون وقواعد التسعير وسياسات الوقود المنظمة موجودة في إعدادات اللوحة.'],
      ['التحكم في الإشعارات', 'يمكن للموظفين والمستأجرين إدارة تفضيلات الإشعارات حسب الحدث والقناة.'],
    ],
  },
} as const

export default function FeaturesPage() {
  const { language } = useMarketplacePreferences()
  const dict = copy[language]

  return (
    <main className="min-h-screen bg-stone-50">
      <div className="shell space-y-12 py-16">
        <div className="max-w-3xl">
          <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="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
          {dict.cards.map(([title, body]) => (
            <article key={title} className="card p-8">
              <h2 className="text-xl font-black text-stone-900">{title}</h2>
              <p className="mt-4 text-sm leading-7 text-stone-600">{body}</p>
            </article>
          ))}
        </div>
      </div>
    </main>
  )
}