'use client'

import { useState, useEffect, useMemo } from 'react'
import { ChevronLeft, ChevronRight, ChevronDown, X, Check, Coins, Shield, MapPin, TrendingUp, Bed, Bath, Ruler, Paintbrush, Waves, FileText, Mail, MessageCircle, Send } from 'lucide-react'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
import ScrollAnimations from '@/components/ScrollAnimations'
import PropertyLocationMap from '@/components/PropertyLocationMap'
import { getTranslation } from '@/lib/i18n'
import { submitForm } from '@/lib/formSubmit'
import Image from 'next/image'
import type { PropertyMeta } from '@/lib/properties'
import type { Language } from '@/lib/i18n'

const ITEMS_PER_PAGE = 12

function buildGalleryPaths(folder: string, count: number): string[] {
  return Array.from({ length: count }, (_, i) => `/images/${folder}/${i + 1}_resultado.webp`)
}

function getGalleryImages(property: PropertyMeta): string[] {
  if (property.galleryImages?.length) {
    return property.galleryImages.map((p) => `/images/${p}`)
  }
  return buildGalleryPaths(property.imageFolder, property.galleryCount)
}

function pickImageIndex(galleryCount: number, preferred: number): number {
  return Math.min(preferred, galleryCount)
}

/** Encodes image path for use in URL (e.g. CSS backgroundImage or img src) so paths with spaces work. */
function imageUrlForCss(path: string): string {
  return encodeURI(path)
}

interface PropertyDetailProps {
  property: PropertyMeta
  lang: Language
}

export default function PropertyDetail({ property, lang }: PropertyDetailProps) {
  const k = property.i18nKey
  const allGalleryImages = useMemo(() => getGalleryImages(property), [property])
  const galleryCount = allGalleryImages.length
  const heroSliderImages = allGalleryImages.slice(0, property.heroSliderCount)
  const designImageIdx = pickImageIndex(galleryCount, property.designImageIndex ?? 26)
  const amenitiesImageIdx = pickImageIndex(galleryCount, property.amenitiesImageIndex ?? 37)
  const ctaImageIdx = pickImageIndex(galleryCount, property.ctaImageIndex ?? 41)
  const designImage = property.designImagePath
    ? `/images/${property.designImagePath}`
    : allGalleryImages[designImageIdx - 1] || allGalleryImages[0]

  const [currentHeroIndex, setCurrentHeroIndex] = useState(0)
  const [galleryPage, setGalleryPage] = useState(0)
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null)
  const [formData, setFormData] = useState({ name: '', email: '', phone: '', message: '' })
  const [formStatus, setFormStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle')
  const listingHighlight = property.mls
    ? { icon: FileText, title: `MLS #${property.mls}`, subtitle: getTranslation(lang, `${k}.specMlsSub`) }
    : { icon: FileText, title: getTranslation(lang, `${k}.specMlsSub`), subtitle: getTranslation(lang, 'properties.listingInfo') }

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentHeroIndex((prev) => (prev + 1) % heroSliderImages.length)
    }, 5000)
    return () => clearInterval(interval)
  }, [heroSliderImages.length])

  useEffect(() => {
    if (lightboxIndex === null) return
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'ArrowRight') setLightboxIndex((p) => (p !== null ? (p + 1) % allGalleryImages.length : null))
      if (e.key === 'ArrowLeft') setLightboxIndex((p) => (p !== null ? (p - 1 + allGalleryImages.length) % allGalleryImages.length : null))
      if (e.key === 'Escape') {
        setLightboxIndex(null)
        document.body.style.overflow = 'unset'
      }
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [lightboxIndex, allGalleryImages.length])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setFormStatus('sending')
    const result = await submitForm({
      type: property.slug,
      name: formData.name,
      email: formData.email,
      phone: formData.phone,
      message: formData.message,
      language: lang,
      propertyTitle: property.title[lang],
    })
    if (result.ok) {
      setFormStatus('sent')
      setFormData({ name: '', email: '', phone: '', message: '' })
      setTimeout(() => setFormStatus('idle'), 5000)
    } else {
      setFormStatus('error')
      setTimeout(() => setFormStatus('idle'), 3000)
    }
  }

  const currentGalleryImages = allGalleryImages.slice(
    galleryPage * ITEMS_PER_PAGE,
    (galleryPage + 1) * ITEMS_PER_PAGE
  )
  const maxGalleryPages = Math.ceil(allGalleryImages.length / ITEMS_PER_PAGE)

  return (
    <div className="min-h-screen bg-white">
      <ScrollAnimations />
      <Navbar />

      {/* Hero */}
      <section id="home" className="relative h-screen flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0">
          {heroSliderImages.map((img, index) => (
            <div
              key={index}
              className={`absolute inset-0 transition-opacity duration-1000 ${index === currentHeroIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'}`}
              style={{ backgroundImage: `url(${imageUrlForCss(img)})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
            />
          ))}
        </div>
        <div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-black/50 z-20" />
        <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-brand-primary via-brand-primary/60 to-transparent z-30" />
        <div className="relative z-40 text-center px-4 max-w-4xl mx-auto text-white fade-in pt-20 md:pt-0">
          <span className="block uppercase tracking-[0.2em] text-sm md:text-base mb-4 text-brand-accent font-semibold">
            {getTranslation(lang, `${k}.heroEyebrow`)}
          </span>
          <h1 className="font-semibold text-5xl md:text-7xl mb-6 leading-tight">{property.title[lang]}</h1>
          <p className="text-lg md:text-2xl font-normal mb-10 max-w-2xl mx-auto opacity-90">
            {getTranslation(lang, `${k}.heroSub`)}
          </p>
          <a
            href="#property"
            className="inline-block border-2 border-white text-white px-8 py-3 text-sm uppercase tracking-widest font-semibold hover:bg-brand-primary hover:border-brand-primary transition-all duration-300 rounded-lg"
          >
            {getTranslation(lang, `${k}.heroCta`)}
          </a>
        </div>
        <button type="button" onClick={() => setCurrentHeroIndex((p) => (p - 1 + heroSliderImages.length) % heroSliderImages.length)} className="absolute left-4 md:left-8 top-1/2 -translate-y-1/2 z-50 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white p-3 rounded-full transition-all">
          <ChevronLeft size={24} />
        </button>
        <button type="button" onClick={() => setCurrentHeroIndex((p) => (p + 1) % heroSliderImages.length)} className="absolute right-4 md:right-8 top-1/2 -translate-y-1/2 z-50 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white p-3 rounded-full transition-all">
          <ChevronRight size={24} />
        </button>
        <div className="absolute bottom-20 left-1/2 -translate-x-1/2 z-50 flex gap-2">
          {heroSliderImages.map((_, index) => (
            <button key={index} type="button" onClick={() => setCurrentHeroIndex(index)} className={`h-2.5 transition-all rounded-full ${index === currentHeroIndex ? 'w-8 bg-white' : 'w-2.5 bg-white/40'}`} />
          ))}
        </div>
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-white/70 z-50">
          <ChevronDown size={24} />
        </div>
      </section>

      {/* Intro */}
      <section id="property" className="py-20 md:py-24 px-6">
        <div className="max-w-4xl mx-auto text-center fade-in">
          <h2 className="font-semibold text-3xl md:text-4xl text-brand-text mb-8">
            {getTranslation(lang, `${k}.introTitle`)}
          </h2>
          <div className="w-20 h-1 bg-brand-primary mx-auto mb-8 rounded-full" />
          <p className="text-gray-700 text-lg md:text-xl leading-relaxed font-normal mb-8">
            {getTranslation(lang, `${k}.introText`)}
          </p>
        </div>
      </section>

      {/* Video */}
      {(() => {
        const videoIds = property.youtubeIds?.length ? property.youtubeIds : (property.youtubeId ? [property.youtubeId] : [])
        const videoUrls = property.videoUrls ?? []
        if (!videoIds.length && !videoUrls.length) return null
        return (
          <section className="py-16 px-6 bg-brand-light">
            <div className="max-w-4xl mx-auto fade-in">
              <h3 className="font-semibold text-2xl md:text-3xl text-brand-text mb-8 text-center">
                {getTranslation(lang, 'properties.videoTitle')}
              </h3>
              <div className="flex flex-col gap-8">
                {videoIds.map((videoId, idx) => (
                  <div key={videoId} className="relative aspect-video rounded-2xl overflow-hidden shadow-xl bg-black">
                    <iframe
                      title={`${property.title[lang]} ${getTranslation(lang, 'properties.videoTitle')}${videoIds.length > 1 ? ` ${idx + 1}` : ''}`}
                      src={`https://www.youtube.com/embed/${videoId}?rel=0`}
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowFullScreen
                      className="absolute inset-0 w-full h-full"
                    />
                  </div>
                ))}
                {videoUrls.map((videoUrl, idx) => (
                  <div key={videoUrl} className="relative aspect-video rounded-2xl overflow-hidden shadow-xl bg-black">
                    {/\.(mp4|webm|ogg)(\?.*)?$/i.test(videoUrl) ? (
                      <video controls playsInline preload="metadata" className="absolute inset-0 w-full h-full">
                        <source src={videoUrl} />
                      </video>
                    ) : (
                      <iframe
                        title={`${property.title[lang]} ${getTranslation(lang, 'properties.videoTitle')} ${videoIds.length + idx + 1}`}
                        src={videoUrl}
                        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture"
                        allowFullScreen
                        className="absolute inset-0 w-full h-full"
                      />
                    )}
                  </div>
                ))}
              </div>
            </div>
          </section>
        )
      })()}

      {property.mapCoordinates && property.mapAddress && (
        <PropertyLocationMap
          title={property.title[lang]}
          location={property.location[lang]}
          address={property.mapAddress}
          coordinates={property.mapCoordinates}
          lang={lang}
        />
      )}

      {/* Design */}
      <section className="py-16 px-6 bg-brand-light">
        <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
          <div className="fade-in">
            <h3 className="font-semibold text-3xl text-brand-text mb-6 leading-tight">
              {getTranslation(lang, `${k}.designTitle`).split('<br>').map((part, i) => (
                <span key={i}>{part}{i < 1 && <br />}</span>
              ))}
            </h3>
            <p className="text-gray-700 mb-6 font-normal leading-relaxed">
              {getTranslation(lang, `${k}.designText`)}
            </p>
            <span className="inline-block px-4 py-1.5 border-2 border-brand-primary text-brand-text text-xs tracking-widest uppercase rounded-full font-semibold">
              {getTranslation(lang, 'properties.turnkey')}
            </span>
          </div>
          <div className="fade-in relative aspect-video rounded-2xl overflow-hidden shadow-xl">
            <Image
              src={imageUrlForCss(designImage)}
              alt={`${property.title[lang]} Interior`}
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              className="object-cover"
            />
          </div>
        </div>
      </section>

      {/* Highlights */}
      <section className="py-20 px-6">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12 fade-in">
            <h3 className="font-semibold text-2xl text-brand-text">
              {getTranslation(lang, `${k}.highlightsTitle`)}
            </h3>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-8 md:gap-12">
            {[
              { icon: Bed, title: getTranslation(lang, `${k}.specBeds`), subtitle: getTranslation(lang, `${k}.specBedsSub`) },
              { icon: Bath, title: getTranslation(lang, `${k}.specBaths`), subtitle: getTranslation(lang, `${k}.specBathsSub`) },
              { icon: Ruler, title: `${property.sqft} ${getTranslation(lang, 'properties.sqft')}`, subtitle: getTranslation(lang, `${k}.specSizeSub`) },
              { icon: Paintbrush, title: getTranslation(lang, `${k}.specDesign`), subtitle: getTranslation(lang, `${k}.specDesignSub`) },
              { icon: Waves, title: getTranslation(lang, `${k}.specView`), subtitle: getTranslation(lang, `${k}.specViewSub`) },
              listingHighlight,
            ].map((item, index) => (
              <div key={index} className="flex flex-col items-center text-center p-6 bg-white border-2 border-brand-accent rounded-xl shadow-sm hover:shadow-lg hover:border-brand-primary transition-all fade-in">
                <item.icon size={32} className="text-brand-primary mb-4" />
                <h3 className="font-semibold text-xl text-brand-text mb-2">{item.title}</h3>
                <p className="text-sm text-gray-600 font-normal">{item.subtitle}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Gallery */}
      <section id="gallery" className="py-20 px-6 bg-white">
        <div className="max-w-7xl mx-auto fade-in">
          <div className="text-center mb-12">
            <h3 className="font-semibold text-3xl md:text-4xl text-brand-text mb-4">
              {getTranslation(lang, `${k}.galleryTitle`)}
            </h3>
            <p className="text-gray-700 font-normal">{getTranslation(lang, `${k}.gallerySubtitle`)}</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-6">
            {currentGalleryImages.map((img, index) => {
              const globalIndex = galleryPage * ITEMS_PER_PAGE + index
              return (
                <button
                  key={globalIndex}
                  type="button"
                  onClick={() => { setLightboxIndex(globalIndex); document.body.style.overflow = 'hidden' }}
                  className="aspect-square overflow-hidden rounded-xl cursor-pointer hover:opacity-90 transition-opacity bg-gray-100 group relative"
                >
                  <Image src={imageUrlForCss(img)} alt={`${property.title[lang]} ${globalIndex + 1}`} fill sizes="(max-width: 768px) 100vw, (max-width: 1024px) 33vw, 25vw" className="object-cover group-hover:scale-110 transition-transform duration-300" loading="lazy" />
                </button>
              )
            })}
          </div>
          <div className="flex justify-center items-center gap-4">
            <button type="button" onClick={() => setGalleryPage((p) => Math.max(0, p - 1))} disabled={galleryPage === 0} className="bg-brand-primary text-white px-6 py-2 rounded-lg font-semibold hover:bg-brand-darkGreen transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
              {getTranslation(lang, `${k}.galleryPrev`)}
            </button>
            <span className="px-4 py-2 text-brand-text font-semibold">
              {galleryPage * ITEMS_PER_PAGE + 1}-{Math.min((galleryPage + 1) * ITEMS_PER_PAGE, allGalleryImages.length)} / {allGalleryImages.length}
            </span>
            <button type="button" onClick={() => setGalleryPage((p) => Math.min(maxGalleryPages - 1, p + 1))} disabled={galleryPage >= maxGalleryPages - 1} className="bg-brand-primary text-white px-6 py-2 rounded-lg font-semibold hover:bg-brand-darkGreen transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
              {getTranslation(lang, `${k}.galleryNext`)}
            </button>
          </div>
        </div>
      </section>

      {/* Lightbox */}
      {lightboxIndex !== null && (
        <div className="fixed inset-0 bg-black/95 z-[100] flex items-center justify-center p-4 backdrop-blur-sm">
          <button type="button" onClick={() => { setLightboxIndex(null); document.body.style.overflow = 'unset' }} className="absolute top-4 right-4 text-white hover:text-brand-accent z-10">
            <X size={32} />
          </button>
          <button type="button" onClick={() => setLightboxIndex((p) => (p != null ? (p - 1 + allGalleryImages.length) % allGalleryImages.length : 0))} className="absolute left-4 text-white hover:text-brand-accent z-10">
            <ChevronLeft size={32} />
          </button>
          <button type="button" onClick={() => setLightboxIndex((p) => (p != null ? (p + 1) % allGalleryImages.length : 0))} className="absolute right-4 text-white hover:text-brand-accent z-10">
            <ChevronRight size={32} />
          </button>
          <div className="max-w-7xl w-full h-full flex items-center justify-center">
            <div className="relative w-full h-full max-w-6xl max-h-[90vh]">
              <Image src={imageUrlForCss(allGalleryImages[lightboxIndex])} alt={`${property.title[lang]} ${lightboxIndex + 1}`} fill sizes="90vw" className="object-contain rounded-lg" />
            </div>
          </div>
          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-white font-semibold">
            {lightboxIndex + 1} / {allGalleryImages.length}
          </div>
        </div>
      )}

      {/* Amenities */}
      <section id="amenities" className="py-20 px-6 bg-gray-50">
        <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
          <div className="order-2 md:order-1 fade-in relative aspect-video rounded-2xl overflow-hidden shadow-xl">
            <Image src={imageUrlForCss(allGalleryImages[amenitiesImageIdx - 1] || allGalleryImages[0])} alt={`${property.title[lang]} Amenities`} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover" />
          </div>
          <div className="order-1 md:order-2 fade-in">
            <h2 className="font-semibold text-3xl md:text-4xl text-brand-text mb-6">
              {getTranslation(lang, `${k}.amenitiesTitle`)}
            </h2>
            <p className="text-gray-700 mb-8 font-normal">{getTranslation(lang, `${k}.amenitiesIntro`)}</p>
            <ul className="space-y-4">
              {[`${k}.am1`, `${k}.amPools`, `${k}.am2`, `${k}.am3`, `${k}.am4`].map((key, index) => (
                <li key={index} className="flex items-center text-brand-text">
                  <Check size={20} className="text-brand-primary mr-4 flex-shrink-0" />
                  <span className="font-normal">{getTranslation(lang, key)}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* Location */}
      <section id="location" className="py-24 px-6 relative bg-brand-primary overflow-hidden">
        <div className="absolute top-0 right-0 w-1/2 h-full bg-black opacity-20 z-0" />
        <div className="max-w-6xl mx-auto relative z-10 text-white fade-in">
          <div className="text-center mb-16">
            <span className="uppercase tracking-widest text-brand-accent text-sm mb-3 block font-semibold">
              {getTranslation(lang, `${k}.locSubtitle`)}
            </span>
            <h2 className="font-semibold text-3xl md:text-4xl">{getTranslation(lang, `${k}.locTitle`)}</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              { icon: Shield, title: getTranslation(lang, `${k}.loc1Title`), text: getTranslation(lang, `${k}.loc1Text`) },
              { icon: MapPin, title: getTranslation(lang, `${k}.loc2Title`), text: getTranslation(lang, `${k}.loc2Text`) },
              { icon: TrendingUp, title: getTranslation(lang, `${k}.loc3Title`), text: getTranslation(lang, `${k}.loc3Text`) },
            ].map((item, index) => (
              <div key={index} className="bg-white/5 p-8 border-2 border-white/20 backdrop-blur-sm hover:bg-white/10 hover:border-brand-accent transition-all rounded-xl">
                <item.icon size={24} className="text-brand-accent mb-4" />
                <h4 className="font-semibold text-xl mb-3">{item.title}</h4>
                <p className="text-gray-200 text-sm font-normal leading-relaxed">{item.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Investment */}
      <section id="investment" className="py-20 bg-white px-6 relative overflow-hidden">
        <div className="absolute inset-0 opacity-5">
          <div className="w-full h-full bg-gradient-to-br from-brand-primary/10 to-transparent" />
        </div>
        <div className="max-w-5xl mx-auto text-center fade-in border-2 border-brand-accent p-10 shadow-lg rounded-xl relative z-10 bg-white/95 backdrop-blur-sm">
          <Coins size={48} className="text-brand-primary mb-6 mx-auto" />
          <h2 className="font-semibold text-3xl md:text-4xl text-brand-text mb-6">
            {getTranslation(lang, `${k}.investTitle`)}
          </h2>
          <p className="text-xl md:text-2xl font-normal mb-4 max-w-3xl mx-auto text-gray-700">
            {(() => {
              const text = getTranslation(lang, `${k}.investText`)
              const needle = '$120,000 – $145,000 USD'
              if (text.includes(needle)) {
                return text.split(needle).map((part, i) => (
                  <span key={i}>
                    {part}
                    {i === 0 && <span className="text-brand-primary font-semibold">{needle}</span>}
                  </span>
                ))
              }
              return text
            })()}
          </p>
          <p className="text-md text-gray-600 mb-8 font-normal">{getTranslation(lang, `${k}.investMgmt`)}</p>
          <p className="text-xs text-gray-400 italic opacity-80 mb-8">{getTranslation(lang, `${k}.investDisclaimer`)}</p>
          <a href="#contact" className="inline-block bg-brand-primary text-white px-8 py-4 text-sm uppercase tracking-widest font-semibold hover:bg-brand-darkGreen transition-all duration-300 rounded-lg">
            {getTranslation(lang, `${k}.investCta`)}
          </a>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 px-6 bg-gradient-to-br from-brand-primary to-black relative overflow-hidden">
        <div className="absolute inset-0 opacity-30">
          <div className="w-full h-full bg-gradient-to-br from-brand-primary/20 to-black/40" />
        </div>
        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center relative z-10">
          <div className="fade-in">
            <h2 className="font-semibold text-4xl md:text-5xl text-white mb-6">{getTranslation(lang, `${k}.ctaTitle`)}</h2>
            <p className="text-xl text-white/90 mb-8 font-normal">{getTranslation(lang, `${k}.ctaText`)}</p>
            <div className="flex flex-col sm:flex-row gap-4">
              <a href="#contact" className="bg-white text-brand-primary px-8 py-4 text-sm uppercase tracking-widest font-semibold hover:bg-brand-accent transition-all duration-300 rounded-lg text-center">
                {getTranslation(lang, `${k}.ctaButton`)}
              </a>
              <a href="#gallery" className="border-2 border-white text-white px-8 py-4 text-sm uppercase tracking-widest font-semibold hover:bg-white/10 transition-all duration-300 rounded-lg text-center">
                {getTranslation(lang, `${k}.ctaGallery`)}
              </a>
            </div>
          </div>
          <div className="fade-in relative aspect-video rounded-2xl overflow-hidden shadow-2xl">
            <Image src={imageUrlForCss(allGalleryImages[ctaImageIdx - 1] || allGalleryImages[0])} alt={property.title[lang]} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover" />
          </div>
        </div>
      </section>

      {/* Contact */}
      <section id="contact" className="py-20 px-6 bg-brand-light">
        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 bg-white rounded-2xl overflow-hidden shadow-xl border-2 border-brand-accent">
          <div className="bg-white p-10 md:p-14 fade-in">
            <h2 className="font-semibold text-3xl text-brand-text mb-4">{getTranslation(lang, `${k}.contactTitle`)}</h2>
            <p className="text-gray-700 mb-8 font-normal">{getTranslation(lang, `${k}.contactSub`)}</p>
            <div className="space-y-6">
              <div className="flex items-start">
                <Mail size={20} className="mt-1 text-brand-primary mr-4 flex-shrink-0" />
                <div>
                  <h4 className="font-semibold text-brand-text">Email</h4>
                  <a href="mailto:kevin@hogarrealtors.com" className="text-gray-600 hover:text-brand-primary font-normal">kevin@hogarrealtors.com</a>
                </div>
              </div>
              <div className="flex items-start">
                <MessageCircle size={20} className="mt-1 text-brand-primary mr-4 flex-shrink-0" />
                <div>
                  <h4 className="font-semibold text-brand-text">WhatsApp</h4>
                  <a href="https://wa.me/523222311415" className="text-gray-600 hover:text-brand-primary font-normal">+52 (322) 231 1415</a>
                </div>
              </div>
            </div>
          </div>
          <div className="p-4 md:p-8 bg-gray-50 fade-in border-l-2 border-brand-accent">
            <form onSubmit={handleSubmit} className="space-y-4">
              <input required name="name" value={formData.name} onChange={(e) => setFormData((f) => ({ ...f, name: e.target.value }))} placeholder={getTranslation(lang, 'contact.fullName')} className="w-full px-4 py-3 rounded-xl border border-brand-accent bg-white focus:outline-none focus:ring-2 focus:ring-brand-primary" />
              <input required type="email" name="email" value={formData.email} onChange={(e) => setFormData((f) => ({ ...f, email: e.target.value }))} placeholder="Email" className="w-full px-4 py-3 rounded-xl border border-brand-accent bg-white focus:outline-none focus:ring-2 focus:ring-brand-primary" />
              <input name="phone" value={formData.phone} onChange={(e) => setFormData((f) => ({ ...f, phone: e.target.value }))} placeholder={getTranslation(lang, 'contact.phone')} className="w-full px-4 py-3 rounded-xl border border-brand-accent bg-white focus:outline-none focus:ring-2 focus:ring-brand-primary" />
              <textarea name="message" value={formData.message} onChange={(e) => setFormData((f) => ({ ...f, message: e.target.value }))} placeholder={getTranslation(lang, 'contact.message')} rows={3} className="w-full px-4 py-3 rounded-xl border border-brand-accent bg-white focus:outline-none focus:ring-2 focus:ring-brand-primary resize-none" />
              <button type="submit" disabled={formStatus === 'sending'} className="w-full bg-brand-primary text-white px-4 py-3 rounded-xl font-semibold flex items-center justify-center gap-2 hover:bg-brand-darkGreen transition disabled:opacity-50">
                {formStatus === 'sending' ? getTranslation(lang, 'contact.sending') : formStatus === 'sent' ? getTranslation(lang, 'contact.sent') : formStatus === 'error' ? getTranslation(lang, 'contact.error') : getTranslation(lang, 'contact.send')}
                {formStatus !== 'sending' && <Send size={18} />}
              </button>
            </form>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  )
}