'use client'

import { motion } from "framer-motion"
import Image from "next/image"
import Link from "next/link"
import { ArrowLeft, Clock, User } from 'lucide-react'

export default function NewsDetailClient({ lang, dict, post }: { lang: string, dict: any, post: any }) {
  return (
    <main className="bg-[#FAF7F0] min-h-screen">
      {/* HEADER & IMAGE */}
      <section className="pt-44 pb-20 px-6 max-w-[1000px] mx-auto">
        <div className="space-y-12">
            {/* Back Button */}
            <Link href={`/${lang}/blog`} className="inline-flex items-center space-x-2 text-[11px] font-bold tracking-[0.4em] uppercase text-[#1A1A1A]/40 hover:text-[#1A1A1A] transition-colors">
                <ArrowLeft size={16} />
                <span>{lang === 'tr' ? 'Haberlere Dön' : 'Back to News'}</span>
            </Link>

            <div className="space-y-8 text-center md:text-left">
                <motion.div 
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    className="flex flex-wrap justify-center md:justify-start items-center gap-6 text-[12px] font-bold tracking-[0.2em] uppercase text-[#1A1A1A]/30"
                >
                    <div className="flex items-center space-x-2">
                        <User size={14} className="text-[#C88C4B]" />
                        <span>{post.author}</span>
                    </div>
                    <div className="flex items-center space-x-2">
                        <Clock size={14} className="text-[#C88C4B]" />
                        <span>{new Date(post.createdAt).toLocaleDateString(lang === 'tr' ? 'tr-TR' : 'en-US')}</span>
                    </div>
                </motion.div>

                <motion.h1 
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.1 }}
                    className="text-5xl md:text-[80px] font-serif text-[#1A1A1A] leading-[1.1] tracking-tight"
                >
                    {post.title}
                </motion.h1>
            </div>

            {post.image && (
                <motion.div 
                    initial={{ opacity: 0, scale: 0.98 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 1, delay: 0.2 }}
                    className="aspect-[21/10] relative overflow-hidden rounded-[2px] shadow-2xl"
                >
                    <Image 
                        src={post.image} 
                        alt={post.title} 
                        fill
                        sizes="100vw"
                        className="object-cover"
                        priority
                    />
                </motion.div>
            )}
        </div>
      </section>

      {/* CONTENT */}
      <section className="pb-44 px-6 max-w-[800px] mx-auto">
         <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.4 }}
            className="prose prose-neutral prose-xl max-w-none"
         >
            <p className="text-2xl md:text-3xl font-serif text-[#1A1A1A] italic leading-relaxed mb-12 opacity-80 border-l-4 border-[#C88C4B] pl-8">
                {post.excerpt}
            </p>
            
            <div className="text-[#1A1A1A]/80 leading-loose text-lg md:text-xl space-y-8 whitespace-pre-wrap">
                {post.content}
            </div>
         </motion.div>

         <div className="mt-32 pt-12 border-t border-[#1A1A1A]/10 text-center">
            <Link 
                href={`/${lang}/contact`}
                className="inline-flex items-center space-x-4 text-[13px] font-bold tracking-[0.4em] uppercase border-b-2 border-[#1A1A1A] pb-2 group"
            >
                <span>{dict.footer.book}</span>
                <span className="transform group-hover:translate-x-1 transition-transform">→</span>
            </Link>
         </div>
      </section>
    </main>
  )
}