'use client'

import { useRef } from 'react'
import { useTranslations } from 'next-intl'
import { motion, useInView } from 'framer-motion'
import { Waves, GraduationCap, Building2, Heart, Plane, Landmark } from 'lucide-react'

const locationItems = [
  { key: 'beach' as const, itemsKey: 'beachItems' as const, icon: Waves },
  { key: 'education' as const, itemsKey: 'educationItems' as const, icon: GraduationCap },
  { key: 'city' as const, itemsKey: 'cityItems' as const, icon: Building2 },
  { key: 'health' as const, itemsKey: 'healthItems' as const, icon: Heart },
  { key: 'airport' as const, itemsKey: 'airportItems' as const, icon: Plane },
  { key: 'tourism' as const, itemsKey: 'tourismItems' as const, icon: Landmark },
]

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

  return (
    <section id="lokasyon" className="bg-vesta-dark py-24 md:py-32">
      <div ref={ref} className="container mx-auto px-6">
        <div className="grid md:grid-cols-2 gap-16 items-start">
          {/* Sol: Başlık + Grid */}
          <div>
            <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-4"
            >
              {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-white text-3xl md:text-4xl font-serif font-light leading-snug mb-12"
            >
              {t('title')}
            </motion.h2>

            <div className="grid grid-cols-1 gap-5">
              {locationItems.map((item, i) => {
                const Icon = item.icon
                return (
                  <motion.div
                    key={item.key}
                    initial={{ opacity: 0, x: -20 }}
                    animate={isInView ? { opacity: 1, x: 0 } : {}}
                    transition={{ duration: 0.5, delay: 0.15 + i * 0.08 }}
                    className="flex items-start gap-4 border-b border-white/8 pb-5"
                  >
                    <div className="w-9 h-9 rounded-full bg-vesta-forest/30 flex items-center justify-center shrink-0 mt-0.5">
                      <Icon className="w-4 h-4 text-vesta-earth" />
                    </div>
                    <div>
                      <p className="text-white/80 text-sm font-medium mb-1">{t(item.key)}</p>
                      <p className="text-white/40 text-xs leading-relaxed">{t(item.itemsKey)}</p>
                    </div>
                  </motion.div>
                )
              })}
            </div>
          </div>

          {/* Sağ: Harita embed */}
          <motion.div
            initial={{ opacity: 0, x: 40 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="rounded-2xl overflow-hidden aspect-square md:aspect-auto md:h-[600px] sticky top-24"
          >
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d50536.60905254124!2d28.3200!3d37.2153!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14be5ce7c5a5ccdb%3A0x1e3eb12f3c0f3c0a!2sMu%C4%9Fla%2C%20T%C3%BCrkiye!5e1!3m2!1str!2str!4v1700000000000"
              width="100%"
              height="100%"
              style={{ border: 0 }}
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              className="grayscale"
            />
          </motion.div>
        </div>
      </div>
    </section>
  )
}