'use client'

import { useRef } from 'react'
import { useTranslations } from 'next-intl'
import { motion, useInView } from 'framer-motion'
import Image from 'next/image'

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

  const stats = [
    { label: t('stat1Label'), value: t('stat1Value') },
    { label: t('stat2Label'), value: t('stat2Value') },
    { label: t('stat3Label'), value: t('stat3Value') },
  ]

  return (
    <section id="proje" ref={ref} className="bg-vesta-dark py-24 md:py-32">
      <div className="container mx-auto px-6">
        <div className="grid md:grid-cols-2 gap-16 items-center">
          {/* Sol: Görsel */}
          <motion.div
            initial={{ opacity: 0, x: -40 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.9, ease: 'easeOut' }}
            className="relative aspect-[4/5] rounded-2xl overflow-hidden"
          >
            <Image
              src="https://images.unsplash.com/photo-1448375240586-882707db888b?w=800&q=80"
              alt="Vesta Muğla - Orman"
              fill
              className="object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-vesta-dark/60 to-transparent" />
            {/* Label */}
            <div className="absolute bottom-6 left-6">
              <span className="text-white/60 text-xs tracking-[0.3em] uppercase">
                Emtisi İnşaat
              </span>
            </div>
          </motion.div>

          {/* Sağ: İçerik */}
          <div>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="text-vesta-earth text-xs tracking-[0.3em] uppercase mb-4"
            >
              {t('label')}
            </motion.p>

            <motion.h2
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.7, delay: 0.2 }}
              className="text-white text-3xl md:text-4xl font-serif font-light leading-snug mb-6"
            >
              {t('title')}
            </motion.h2>

            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.7, delay: 0.3 }}
              className="text-white/50 text-base leading-relaxed mb-12"
            >
              {t('desc')}
            </motion.p>

            {/* İstatistikler */}
            <div className="grid grid-cols-3 gap-6">
              {stats.map((stat, i) => (
                <motion.div
                  key={stat.label}
                  initial={{ opacity: 0, y: 20 }}
                  animate={isInView ? { opacity: 1, y: 0 } : {}}
                  transition={{ duration: 0.6, delay: 0.4 + i * 0.1 }}
                  className="border-t border-white/10 pt-4"
                >
                  <p className="text-white text-2xl md:text-3xl font-serif font-light">
                    {stat.value}
                  </p>
                  <p className="text-white/40 text-xs mt-1 tracking-wide">{stat.label}</p>
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}