'use client'

import Image from 'next/image'
import Link from 'next/link'
import { useCarplacePreferences } from '@/components/CarplaceShell'
import { getCarplaceMessages } from '@/lib/carplace/messages'
import { carplaceHref, homepageHref } from '@/lib/carplace/routes'
import { appPrivacyHref, appTermsHref } from '@/lib/footerContent'

export default function CarplaceFooter({ dashboardUrl }: { dashboardUrl: string }) {
  const { language } = useCarplacePreferences()
  const copy = getCarplaceMessages(language)
  const year = new Date().getUTCFullYear()

  return (
    <footer className="border-t border-stone-200 bg-white dark:border-blue-900 dark:bg-blue-950">
      <div className="shell grid gap-10 py-12 md:grid-cols-[1.4fr_1fr_1fr_1fr]">
        <div>
          <Link href={homepageHref(language)} className="inline-flex items-center gap-3 text-blue-950 no-underline dark:text-white">
            <Image src="/rentaldrivego.png" alt="" width={42} height={42} className="rounded-xl" unoptimized />
            <span><strong className="block text-lg">RentalDriveGo</strong><span className="text-xs font-bold uppercase tracking-[0.2em] text-orange-600 dark:text-orange-400">Carplace</span></span>
          </Link>
          <p className="mt-5 max-w-md text-sm leading-7 text-stone-600 dark:text-slate-300">{copy.footer.description}</p>
        </div>
        <FooterGroup title={copy.footer.explore} items={[
          [copy.nav.find, carplaceHref('/search')],
          [copy.nav.companies, carplaceHref('/#companies')],
          [copy.nav.deals, carplaceHref('/#offers')],
          [copy.nav.how, carplaceHref('/#how-it-works')],
        ]} />
        <FooterGroup title={copy.footer.support} items={[
          [copy.nav.help, carplaceHref('/#help')],
          [copy.booking.privacy, appPrivacyHref[language]],
          [copy.booking.terms, appTermsHref[language]],
        ]} />
        <FooterGroup title={copy.footer.business} items={[
          [copy.actions.companySpace, dashboardUrl],
          ['RentalDriveGo', homepageHref(language)],
        ]} external />
      </div>
      <div className="border-t border-stone-200 dark:border-blue-900">
        <div className="shell flex flex-col gap-2 py-5 text-xs text-stone-500 sm:flex-row sm:items-center sm:justify-between dark:text-slate-400">
          <p>© {year} RentalDriveGo. {copy.footer.rights}</p>
          <p>{copy.tagline}</p>
        </div>
      </div>
    </footer>
  )
}

function FooterGroup({ title, items, external = false }: { title: string; items: Array<[string, string]>; external?: boolean }) {
  return (
    <div>
      <h2 className="text-sm font-black text-blue-950 dark:text-white">{title}</h2>
      <ul className="mt-4 grid gap-3 text-sm text-stone-600 dark:text-slate-300">
        {items.map(([label, href]) => (
          <li key={`${label}-${href}`}>
            {external ? <a href={href} className="no-underline hover:text-orange-600">{label}</a> : <Link href={href} className="no-underline hover:text-orange-600">{label}</Link>}
          </li>
        ))}
      </ul>
    </div>
  )
}
