'use client'

import Link from 'next/link'
import { ArrowRight } from 'lucide-react'
import { imageUrls } from '@/lib/images'
import { useLanguage } from '@/lib/LanguageContext'
import { getTranslation } from '@/lib/i18n'

/** Parámetro area para el listado interno de propiedades (searchFilters). */
const AREA_PARAMS: Record<string, string> = {
  centro: 'zona-romantica',
  hotelZone: 'hotel-zone-marina',
  southShore: 'south-shore',
  rivieraNayarit: 'riviera-nayarit',
}

const areas = [
  { key: 'centro', name: 'Centro & Zona Romántica', img: imageUrls.areas.centro, desc: 'Walkable, vibrant, historic.' },
  { key: 'hotelZone', name: 'Hotel Zone & Marina', img: imageUrls.areas.hotelZone, desc: 'Resort living and yachting.' },
  { key: 'southShore', name: 'South Shore Hills', img: imageUrls.areas.southShore, desc: 'Exclusive hillside luxury.' },
  { key: 'rivieraNayarit', name: 'Riviera Nayarit', img: imageUrls.areas.rivieraNayarit, desc: 'High growth and resorts.' },
]

export default function Areas() {
  const { language } = useLanguage()

  return (
    <section className="py-16 sm:py-20 md:py-24 bg-white border-t border-brand-accent/20">
      <div className="container mx-auto px-4 sm:px-6 mb-12 sm:mb-16 flex flex-col md:flex-row md:items-end justify-between gap-4 sm:gap-6">
        <h2 className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-extrabold tracking-tighter uppercase leading-none">
          {getTranslation(language, 'areas.title')} <br className="hidden sm:block" /> {getTranslation(language, 'areas.titleBreak')}
        </h2>
        <Link
          href={`/${language}/properties`}
          className="bg-black text-white px-6 sm:px-8 py-2.5 sm:py-3 rounded-xl text-xs sm:text-sm font-semibold uppercase tracking-wide hover:bg-brand-primary transition-all self-start md:self-auto"
        >
          {getTranslation(language, 'areas.cta')}
        </Link>
      </div>

      <div className="container mx-auto px-4 sm:px-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
          {areas.map((area) => {
            const areaParam = AREA_PARAMS[area.key]
            const href = areaParam ? `/${language}/properties?area=${areaParam}` : `/${language}/properties`
            return (
              <Link
                key={area.key}
                href={href}
                className="group relative h-[400px] sm:h-[500px] md:h-[600px] overflow-hidden rounded-2xl sm:rounded-[2rem] block"
              >
              <div
                className="absolute inset-0 bg-cover bg-center transition-transform duration-[1.5s] group-hover:scale-110"
                style={{ backgroundImage: `url("${(area.img || '').replace(/"/g, '\\"')}")` }}
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent z-10" />
              <div className="absolute bottom-6 sm:bottom-10 left-6 sm:left-10 right-6 sm:right-10 z-20 translate-y-6 group-hover:translate-y-0 transition-all duration-700">
                <h3 className="text-white text-xl sm:text-2xl font-extrabold uppercase mb-2 leading-tight">
                  {area.name}
                </h3>
                <p className="text-white/80 text-xs sm:text-sm uppercase tracking-wide font-medium mb-4 sm:mb-6 opacity-0 group-hover:opacity-100 transition-opacity">
                  {area.desc}
                </p>
                <div className="w-9 h-9 sm:w-10 sm:h-10 bg-white rounded-full flex items-center justify-center group-hover:bg-brand-accent transition-all">
                  <ArrowRight size={16} className="sm:w-[18px] sm:h-[18px]" />
                </div>
              </div>
            </Link>
            )
          })}
        </div>
      </div>
    </section>
  )
}