'use client'

import { useRef } from 'react'
import { useTranslations } from 'next-intl'
import { motion, useInView } from 'framer-motion'
import Image from 'next/image'
import { BedDouble, Bath, Maximize2 } from 'lucide-react'
import { MOCK_UNITS } from '@/lib/mock'

export default function UnitsSection() {
  const t = useTranslations('units')
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: '-80px' })

  return (
    <section id="daireler" className="bg-vesta-cream py-24 md:py-32">
      <div ref={ref} className="container mx-auto px-6">
        {/* Başlık */}
        <div className="text-center mb-16">
          <motion.p
            initial={{ opacity: 0, y: 15 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.5 }}
            className="text-vesta-earth text-xs tracking-[0.3em] uppercase mb-3"
          >
            {t('label')}
          </motion.p>
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="text-vesta-dark text-3xl md:text-5xl font-serif font-light"
          >
            {t('title')}
          </motion.h2>
        </div>

        {/* Daire listesi */}
        <div className="grid md:grid-cols-2 gap-8">
          {MOCK_UNITS.map((unit, i) => (
            <motion.div
              key={unit.id}
              initial={{ opacity: 0, y: 30 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.1 * i }}
              className="group bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-shadow duration-400"
            >
              {/* Görsel */}
              <div className="relative aspect-video overflow-hidden">
                <Image
                  src={unit.imageUrl || 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=800'}
                  alt={unit.typeTr}
                  fill
                  className="object-cover transition-transform duration-700 group-hover:scale-105"
                />
                {/* Müsaitlik badge */}
                <div className={`absolute top-4 right-4 px-3 py-1 rounded-full text-xs font-medium ${
                  unit.available
                    ? 'bg-vesta-forest text-white'
                    : 'bg-gray-400 text-white'
                }`}>
                  {unit.available ? t('available') : t('notAvailable')}
                </div>
              </div>

              {/* İçerik */}
              <div className="p-6">
                <div className="flex items-start justify-between mb-3">
                  <h3 className="text-vesta-dark text-xl font-serif font-medium">
                    {unit.typeTr}
                  </h3>
                  <span className="text-vesta-earth text-2xl font-serif font-light">
                    {unit.size} <span className="text-sm">{t('sqm')}</span>
                  </span>
                </div>

                <p className="text-vesta-dark/60 text-sm leading-relaxed mb-5 line-clamp-2">
                  {unit.descTr}
                </p>

                {/* Özellikler */}
                <div className="flex items-center gap-5 pt-4 border-t border-gray-100">
                  <div className="flex items-center gap-1.5 text-vesta-dark/50 text-sm">
                    <BedDouble className="w-4 h-4" />
                    <span>{unit.rooms} {t('rooms')}</span>
                  </div>
                  <div className="flex items-center gap-1.5 text-vesta-dark/50 text-sm">
                    <Bath className="w-4 h-4" />
                    <span>{unit.bathrooms} {t('bath')}</span>
                  </div>
                  <div className="flex items-center gap-1.5 text-vesta-dark/50 text-sm">
                    <Maximize2 className="w-4 h-4" />
                    <span>{unit.size} {t('sqm')}</span>
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        {/* Katalog CTA */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6, delay: 0.5 }}
          className="text-center mt-12"
        >
          <a
            href="https://indd.adobe.com/view/6b17e969-ae44-481c-861f-684806e8c3b2"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 bg-vesta-dark text-white px-8 py-4 rounded-full text-sm tracking-wide hover:bg-vesta-forest transition-colors duration-300"
          >
            Proje Kataloğunu İncele
          </a>
        </motion.div>
      </div>
    </section>
  )
}