'use client'

import { useMarketplacePreferences } from '@/components/MarketplaceShell'
import Image from 'next/image'
import Link from 'next/link'
import { resolveBrowserAppUrl } from '@/lib/appUrls'

export default function WorkspaceTabs() {
  const { language, theme } = useMarketplacePreferences()
  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3000/dashboard')

  const copy = {
    en: {
      badge: 'Unified Workspace',
      title: 'One launch point on port 3000 for marketplace discovery, company operations, and platform admin work.',
      intro:
        'The apps still run as separate Next.js surfaces internally, but the navbar now takes you straight to each workspace area without hunting for ports.',
      sectionBadge: 'RentalDriveGo Marketplace',
      sectionTitle: 'Browse local rental fleets without losing the company behind the wheel.',
      sectionBodyA: 'Discovery happens here. Booking and payment happen on each rental company\'s own branded site.',
      sectionBodyB: 'Customers only reach that branded booking site after selecting a vehicle from a company\'s fleet.',
      exploreVehicles: 'Explore vehicles',
      viewPricing: 'View pricing',
      nowServing: 'Now serving',
      promoTitle: 'Discovery, pricing, owner sign-in, and booking entry all stay anchored on the marketplace surface.',
      promoBody:
        'Company Workspace and Platform Operations stay available from the navbar, while branded booking starts after a renter picks a vehicle.',
      customerPaths: 'Customer Paths',
      ownerSignIn: 'Owner sign in',
      pricing: 'Pricing',
      workspaceAreas: 'Workspace Areas',
      workspaceA: 'Company Workspace for fleet operations, team, billing, and analytics.',
      workspaceB: 'Platform Operations for platform-level support and tenant oversight.',
      workspaceC: 'Branded booking handoff begins only after a renter chooses a specific vehicle.',
    },
    fr: {
      badge: 'Espace unifié',
      title: 'Un point d’entrée sur le port 3000 pour la découverte marketplace, les opérations de l’entreprise et l’administration de la plateforme.',
      intro:
        'Les applications restent des interfaces Next.js séparées en interne, mais la barre de navigation mène directement à chaque espace sans avoir à changer de port manuellement.',
      sectionBadge: 'Marketplace RentalDriveGo',
      sectionTitle: 'Parcourez les flottes locales sans perdre l’identité de l’entreprise qui gère la location.',
      sectionBodyA: 'La découverte commence ici. La réservation et le paiement se font sur le site de réservation propre à chaque entreprise.',
      sectionBodyB: 'Les clients accèdent à ce site de réservation seulement après avoir choisi un véhicule dans la flotte d’une entreprise.',
      exploreVehicles: 'Explorer les véhicules',
      viewPricing: 'Voir les tarifs',
      nowServing: 'Disponible',
      promoTitle: 'La découverte, les tarifs, la connexion propriétaire et l’accès à la réservation restent ancrés dans la marketplace.',
      promoBody:
        'L’espace entreprise et les opérations de la plateforme restent accessibles depuis la navigation, tandis que la réservation de marque commence après le choix d’un véhicule.',
      customerPaths: 'Parcours client',
      ownerSignIn: 'Connexion propriétaire',
      pricing: 'Tarifs',
      workspaceAreas: 'Espaces de travail',
      workspaceA: 'Espace entreprise pour la flotte, l’équipe, la facturation et l’analyse.',
      workspaceB: 'Opérations plateforme pour le support global et la supervision multi-entreprises.',
      workspaceC: 'Le transfert vers la réservation de marque commence seulement après le choix d’un véhicule précis.',
    },
    ar: {
      badge: 'مساحة موحدة',
      title: 'نقطة دخول واحدة على المنفذ 3000 لاكتشاف السوق وعمليات الشركات وإدارة المنصة.',
      intro:
        'ما زالت التطبيقات تعمل كواجهات Next.js منفصلة داخلياً، لكن شريط التنقل ينقلك مباشرة إلى كل مساحة عمل من دون الحاجة إلى البحث عن المنافذ.',
      sectionBadge: 'سوق RentalDriveGo',
      sectionTitle: 'تصفح أساطيل التأجير المحلية مع الحفاظ على هوية الشركة التي تدير الحجز.',
      sectionBodyA: 'الاكتشاف يبدأ هنا. الحجز والدفع يتمان على موقع الحجز الخاص بكل شركة.',
      sectionBodyB: 'لا يصل العميل إلى موقع الحجز الخاص بالشركة إلا بعد اختيار سيارة من أسطول تلك الشركة.',
      exploreVehicles: 'استكشف السيارات',
      viewPricing: 'عرض الأسعار',
      nowServing: 'المتاح الآن',
      promoTitle: 'الاكتشاف والأسعار وتسجيل دخول المالك وبداية الحجز تبقى كلها داخل واجهة السوق.',
      promoBody:
        'تبقى مساحة الشركة وعمليات المنصة متاحتين من شريط التنقل، بينما يبدأ الحجز المرتبط بالعلامة التجارية بعد اختيار المستأجر لسيارة.',
      customerPaths: 'مسارات العملاء',
      ownerSignIn: 'دخول المالك',
      pricing: 'الأسعار',
      workspaceAreas: 'مساحات العمل',
      workspaceA: 'مساحة الشركة لإدارة الأسطول والفريق والفوترة والتحليلات.',
      workspaceB: 'عمليات المنصة للدعم والإشراف على الشركات على مستوى المنصة.',
      workspaceC: 'الانتقال إلى موقع الحجز الخاص بالشركة يبدأ فقط بعد اختيار سيارة محددة.',
    },
  }[language]

  return (
    <main className={`min-h-screen transition-colors ${
      theme === 'dark'
        ? 'bg-[radial-gradient(circle_at_top,rgba(234,88,12,0.20),transparent_28%),linear-gradient(180deg,#0f1f4a,#112d6e)]'
        : 'bg-[radial-gradient(circle_at_top,rgba(234,88,12,0.08),transparent_28%),linear-gradient(180deg,#f5f8ff,white)]'
    }`}>
      <div className="shell py-16 sm:py-20">
        <div className="max-w-4xl">
          <div className="flex items-center gap-4">
            <Link href="/" aria-label="RentalDriveGo home">
              <Image
                src="/rentalcardrive.png"
                alt="RentalDriveGo"
                width={72}
                height={72}
                className={`h-16 w-16 rounded-2xl object-contain p-1 shadow-sm ${
                  theme === 'dark' ? 'border border-orange-500/40 bg-blue-950' : 'border border-orange-200 bg-white'
                }`}
              />
            </Link>
            <p className={`text-sm font-semibold uppercase tracking-[0.24em] ${
              theme === 'dark' ? 'text-orange-300' : 'text-orange-700'
            }`}>
              {copy.badge}
            </p>
          </div>
          <h1 className={`mt-5 text-4xl font-black tracking-tight sm:text-6xl ${
            theme === 'dark' ? 'text-slate-100' : 'text-blue-900'
          }`}>
            {copy.title}
          </h1>
          <p className={`mt-6 max-w-3xl text-lg leading-8 ${
            theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
          }`}>
            {copy.intro}
          </p>
        </div>

        <section className={`mt-10 overflow-hidden rounded-[2rem] border shadow-xl transition-colors ${
          theme === 'dark'
            ? 'border-blue-900 bg-blue-950 shadow-black/20'
            : 'border-stone-200 bg-white shadow-stone-200/40'
        }`}>
          <div className={`px-6 py-6 ${theme === 'dark' ? 'border-b border-stone-800' : 'border-b border-stone-200'}`}>
            <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
              theme === 'dark' ? 'text-orange-300' : 'text-orange-700'
            }`}>
              {copy.sectionBadge}
            </p>
            <div className="mt-3 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
              <div className="max-w-3xl">
                <h2 className={`text-2xl font-black tracking-tight ${
                  theme === 'dark' ? 'text-slate-100' : 'text-blue-900'
                }`}>
                  {copy.sectionTitle}
                </h2>
                <p className={`mt-3 text-sm leading-7 ${
                  theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
                }`}>
                  {copy.sectionBodyA}
                </p>
                <p className={`mt-3 text-sm leading-7 ${
                  theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
                }`}>
                  {copy.sectionBodyB}
                </p>
              </div>

              <div className="flex flex-wrap gap-3">
                <Link
                  href="/features"
                  className={`rounded-full px-5 py-2.5 text-sm font-semibold transition ${
                    theme === 'dark'
                      ? 'bg-orange-400 text-blue-950 hover:bg-orange-300'
                      : 'bg-blue-950 text-white hover:bg-blue-900/40'
                  }`}
                >
                  {copy.exploreVehicles}
                </Link>
                <Link
                  href="/pricing"
                  className={`rounded-full border px-5 py-2.5 text-sm font-semibold transition ${
                    theme === 'dark'
                      ? 'border-blue-800 text-slate-200 hover:border-blue-600 hover:bg-blue-900/40'
                      : 'border-stone-300 text-stone-700 hover:border-stone-400 hover:bg-stone-50'
                  }`}
                >
                  {copy.viewPricing}
                </Link>
              </div>
            </div>
          </div>

          <div className={`grid gap-6 px-6 py-8 lg:grid-cols-[1.4fr_0.9fr] ${
            theme === 'dark' ? 'bg-blue-950' : 'bg-stone-50'
          }`}>
            <div className="rounded-[1.5rem] bg-[linear-gradient(135deg,#06132e,#0d1b38)] p-8 text-white">
              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-orange-300">{copy.nowServing}</p>
              <h3 className="mt-4 text-3xl font-black tracking-tight">
                {copy.promoTitle}
              </h3>
              <p className="mt-4 max-w-2xl text-sm leading-7 text-stone-200">
                {copy.promoBody}
              </p>
            </div>

            <div className="grid gap-4">
              <div className={`rounded-[1.5rem] border p-5 ${
                theme === 'dark' ? 'border-blue-900 bg-blue-950' : 'border-stone-200 bg-white'
              }`}>
                <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
                  theme === 'dark' ? 'text-stone-400' : 'text-stone-500'
                }`}>{copy.customerPaths}</p>
                <div className="mt-4 flex flex-wrap gap-3">
                  <Link href="/features" className="rounded-full bg-orange-500 px-4 py-2 text-sm font-semibold text-white">
                    {copy.exploreVehicles}
                  </Link>
                  <a className={`rounded-full border px-4 py-2 text-sm font-semibold ${
                    theme === 'dark' ? 'border-stone-700 text-stone-200' : 'border-stone-300 text-stone-700'
                  }`} href={`${dashboardUrl}/sign-in`}>
                    {copy.ownerSignIn}
                  </a>
                  <Link className={`rounded-full border px-4 py-2 text-sm font-semibold ${
                    theme === 'dark' ? 'border-stone-700 text-stone-200' : 'border-stone-300 text-stone-700'
                  }`} href="/pricing">
                    {copy.pricing}
                  </Link>
                </div>
              </div>

              <div className={`rounded-[1.5rem] border p-5 ${
                theme === 'dark' ? 'border-blue-900 bg-blue-950' : 'border-stone-200 bg-white'
              }`}>
                <p className={`text-xs font-semibold uppercase tracking-[0.18em] ${
                  theme === 'dark' ? 'text-stone-400' : 'text-stone-500'
                }`}>{copy.workspaceAreas}</p>
                <ul className={`mt-4 space-y-3 text-sm ${
                  theme === 'dark' ? 'text-stone-300' : 'text-stone-600'
                }`}>
                  <li>{copy.workspaceA}</li>
                  <li>{copy.workspaceB}</li>
                  <li>{copy.workspaceC}</li>
                </ul>
              </div>
            </div>
          </div>
        </section>
      </div>
    </main>
  )
}