'use client'

import { motion } from 'framer-motion'
import Image from 'next/image'
import Link from 'next/link'

export default function ProjectDetailClient({ project }: { project: any }) {
  return (
    <main className="min-h-screen bg-white selection:bg-black selection:text-white">
      {/* Navigation */}
      <nav className="fixed top-0 left-0 w-full z-50 p-6 md:p-10 flex justify-between items-center mix-blend-difference text-white pointer-events-none">
        <Link href="/" className="pointer-events-auto font-bebas text-2xl tracking-tighter hover:opacity-70 transition-opacity">
          A.N.T
        </Link>
        <Link href="/projects" className="pointer-events-auto text-[10px] font-bold uppercase tracking-[0.2em] hover:opacity-70 transition-opacity">
          Tüm Projeler
        </Link>
      </nav>

      {/* Hero Section */}
      <div className="flex flex-col md:flex-row min-h-screen">
        <div className="w-full md:w-1/3 pt-32 pb-10 px-6 md:px-10 flex flex-col justify-between">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <div className="text-[10px] font-bold text-black/40 uppercase tracking-[0.3em] mb-4">
              {project.year} — {project.location}
            </div>
            <h1 className="text-4xl md:text-6xl font-bebas text-black leading-none tracking-tighter uppercase mb-6">
              {project.title}
            </h1>
            <div className="h-[1px] w-12 bg-black mb-6" />
            <p className="text-sm text-black/60 leading-relaxed max-w-sm">
              {project.description || `Bu proje, modern mimari prensipleri ve fonksiyonel tasarım anlayışıyla hayata geçirilmiştir. Fethiye merkezli A.N.T Architecture vizyonuyla şekillenen bu yapı, çevresel dokuyla uyumlu bir estetik sunar.`}
            </p>
          </motion.div>

          <div className="mt-12">
            <div className="text-[10px] font-bold text-black uppercase tracking-[0.2em] mb-2 opacity-40">Kategori</div>
            <div className="text-sm font-bold text-black uppercase tracking-widest">{project.category || 'Architecture'}</div>
          </div>
        </div>

        <div className="w-full md:w-2/3 h-[70vh] md:h-screen relative overflow-hidden bg-zinc-100">
          <motion.div 
            initial={{ scale: 1.1, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 1.5, ease: [0.76, 0, 0.24, 1] }}
            className="w-full h-full"
          >
            <Image 
              src={project.image}
              alt={project.title}
              fill
              sizes="(max-width: 768px) 100vw, 80vw"
              priority
              className="object-cover"
            />
          </motion.div>
        </div>
      </div>

      {/* Gallery Section */}
      {project.gallery && project.gallery.length > 0 && (
        <section className="py-20 md:py-40 px-6 md:px-10 bg-[#f9f9f9]">
          <div className="max-w-[1400px] mx-auto">
            <div className="mb-20">
              <h2 className="text-[10px] font-bold text-black/30 uppercase tracking-[0.5em] mb-4">PROJE GÖRSELLERİ</h2>
              <div className="h-[1px] w-full bg-black/5" />
            </div>
            
            <div className="columns-1 md:columns-2 gap-10 space-y-10">
              {project.gallery.map((img: string, i: number) => (
                <motion.div
                  key={i}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true, margin: "-100px" }}
                  transition={{ duration: 0.8, delay: i * 0.1 }}
                  className="relative group overflow-hidden bg-white"
                >
                  <Image 
                    src={img} 
                    alt={`${project.title} Gallery ${i}`} 
                    width={1200}
                    height={800}
                    className="w-full h-auto object-cover grayscale group-hover:grayscale-0 transition-all duration-1000"
                  />
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Back Link Footer */}
      <footer className="py-20 flex flex-col items-center justify-center border-t border-black/5">
        <Link href="/projects" className="group flex flex-col items-center gap-4">
          <span className="text-[10px] font-bold uppercase tracking-[0.5em] text-black/40 group-hover:text-black transition-colors">SIRADAKİ PROJE</span>
          <div className="w-px h-12 bg-black/10 group-hover:h-20 transition-all duration-700" />
        </Link>
      </footer>
    </main>
  )
}