canina/frontend/application/components/BlogPage.tsx

"use client";
import React from "react";
import { motion } from "motion/react";
import { ChevronRight, Calendar, User, ArrowLeft, Sparkles, BookOpen } from "lucide-react";
import { Product } from "../data/products";
import { productService } from "../services/productService";

const BLOG_POSTS = [
  {
    id: "p1",
    title: "مزایای شگفت‌انگیز صدف لب‌سبز نیوزیلند برای مفاصل پت",
    excerpt: "صدف لب‌سبز (Perna Canaliculus) تنها منبع طبیعی حاوی گلیکوزآمین‌گلیکان‌ها (GAG) در غلظت بسیار بالا محسوب می‌شود.",
    image: "https://images.unsplash.com/photo-1599443015574-be5fe8a05783?auto=format&fit=crop&q=80&w=800",
    date: "۲۵ اردیبهشت ۱۴۰۳",
    author: "دکتر کلاوس هنینگ",
    content: `
      صدف لب‌سبز نیوزیلندی قلب تپنده محصولات ارتوپدی کانینا است. این صدف که منحصراً در آب‌های فوق‌العاده تمیز نیوزیلند تکثیر می‌شود، حاوی ترکیبات ضدالتهابی طبیعی است که در هیچ منبع دیگری به این غلظت یافت نمی‌شود.
      
      چرا برای سگ‌های نژاد بزرگ حیاتی است؟
      در سگ‌های نژاد بزرگ، سرعت رشد اسکلتی بسیار بالاست. اگر مفاصل و تاندون‌ها با این سرعت هماهنگ نشوند، بدشکلی‌های ماندگار ایجاد می‌شود. GAG موجود در صدف، مانند چسب بیولوژیک عمل کرده و بافت غضروفی را ترمیم می‌کند.
      
      مکمل Canhydrox GAG با دارا بودن ۱۵٪ پودر صدف لب‌سبز خالص، استاندارد طلایی در دامپزشکی آلمان است.
    `
  },
  {
    id: "p2",
    title: "چگونه سیستم ایمنی پت خود را در برابر بیماری‌های فصلی تقویت کنیم؟",
    excerpt: "آغوز (Colostrum) اولین سد دفاعی طبیعت است. با ایمیون‌بوستر کانی‌نا، پت شما در برابر ویروس‌ها بیمه می‌شود.",
    image: "https://images.unsplash.com/photo-1576091160550-217359f42f8c?auto=format&fit=crop&q=80&w=800",
    date: "۲۰ اردیبهشت ۱۴۰۳",
    author: "دکتر النا اشمیت",
    content: "ایمنی بدن یک مکانیزم پیچیده است. استفاده از Immun-Booster به ویژه در دوران واکسیناسیون یا جابجایی، به بدن پت کمک می‌کند تا آنتی‌بادی‌های لازم را با سرعت بیشتری تولید کند."
  },
  {
    id: "p3",
    title: "اهمیت اسیدهای چرب امگا ۳ در درخشش پوشش مویی",
    excerpt: "ریزش موی شدید در سگ و گربه معمولاً نشانه کمبود اسیدهای چرب ضروری EPA و DHA است. روغن سالمون پرس سرد راه حل نهایی است.",
    image: "https://images.unsplash.com/photo-1516734212186-a967f81ad0d7?auto=format&fit=crop&q=80&w=800",
    date: "۱۵ اردیبهشت ۱۴۰۳",
    author: "دکتر ماری کونیگ",
    content: "روغن سالمون کانی‌نا به روش پرس سرد تهیه شده تا تمامی ویتامین‌های حساس به حرارت حفظ شوند. این روغن نه تنها پوست را مرطوب نگه می‌دارد، بلکه التهابات مفصلی را نیز کاهش می‌دهد."
  }
];

import { useRouter } from 'next/navigation';

export default function BlogPage() {
  const router = useRouter();
  const [selectedPost, setSelectedPost] = React.useState<typeof BLOG_POSTS[0] | null>(null);
  const [products, setProducts] = React.useState<Product[]>([]);

  React.useEffect(() => {
    productService.getProducts().then(data => setProducts(data));
  }, []);

  if (selectedPost) {
    return (
      <div className="min-h-screen bg-medical-gray-50 pt-8 pb-20 px-4 font-vazir" dir="rtl">
        <div className="max-w-7xl mx-auto">
          {/* Breadcrumbs */}
          <div className="flex items-center gap-2 text-[10px] font-black text-medical-gray-400 uppercase tracking-widest mb-10">
             <span className="cursor-pointer hover:text-canina-blue" onClick={() => router.push('/')}>خانه</span>
             <ChevronRight className="w-2.5 h-2.5" />
             <span className="cursor-pointer hover:text-canina-blue" onClick={() => setSelectedPost(null)}>مجله سلامت</span>
             <ChevronRight className="w-2.5 h-2.5" />
             <span className="text-canina-blue">{selectedPost.title}</span>
          </div>

          <div className="grid lg:grid-cols-12 gap-12">
            <div className="lg:col-span-8">
               <motion.div 
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="bg-white rounded-[3.5rem] border border-medical-gray-200 shadow-2xl overflow-hidden"
               >
                  <div className="aspect-video w-full overflow-hidden">
                     <img src={selectedPost.image} alt={selectedPost.title} className="w-full h-full object-cover" />
                  </div>
                  <div className="p-12">
                     <div className="flex items-center gap-4 text-xs font-bold text-canina-blue mb-8">
                        <div className="bg-canina-blue/10 px-4 py-1.5 rounded-full uppercase tracking-widest">تحقیق بالینی</div>
                        <div className="flex items-center gap-1">
                           <Calendar className="w-4 h-4" />
                           {selectedPost.date}
                        </div>
                     </div>
                     <h1 className="text-4xl lg:text-5xl font-black text-medical-gray-900 mb-10 leading-tight">
                        {selectedPost.title}
                     </h1>
                     <div className="prose prose-lg max-w-none text-medical-gray-600 leading-[2] text-justify space-y-6">
                        <p className="font-bold text-medical-gray-900 italic text-xl border-r-4 border-canina-blue pr-6 py-2">
                           {selectedPost.excerpt}
                        </p>
                        <div className="whitespace-pre-line">
                           {selectedPost.content}
                        </div>
                     </div>

                     <div className="mt-16 pt-10 border-t border-medical-gray-100 flex items-center justify-between">
                        <div className="flex items-center gap-4">
                           <div className="w-14 h-14 bg-medical-gray-100 rounded-full flex items-center justify-center text-medical-gray-400 border-2 border-white shadow-lg">
                              <User className="w-8 h-8" />
                           </div>
                           <div>
                              <div className="font-black text-medical-gray-900 text-lg">{selectedPost.author}</div>
                              <div className="font-bold text-medical-gray-400">تیم تحقیق و توسعه کانی‌نا آلمان</div>
                           </div>
                        </div>
                        <div className="flex gap-4">
                           <button className="p-4 bg-medical-gray-100 rounded-2xl hover:bg-canina-blue hover:text-white transition-all text-medical-gray-400">
                              <Sparkles className="w-6 h-6" />
                           </button>
                        </div>
                     </div>
                  </div>
               </motion.div>
            </div>

            <div className="lg:col-span-4 space-y-10">
               <div className="bg-canina-blue rounded-[3rem] p-10 text-white shadow-2xl relative overflow-hidden">
                  <div className="absolute top-0 left-0 p-8 opacity-10">
                     <Sparkles className="w-20 h-20" />
                  </div>
                  <h4 className="text-2xl font-black mb-6 italic relative z-10">محصولات پیشنهادی</h4>
                  <div className="space-y-6 relative z-10">
                      {products.slice(4, 7).map(p => (
                        <div 
                           key={p.id}
                           onClick={() => router.push(`/shop/${p.id}`)}
                           className="bg-white/10 border border-white/20 p-4 rounded-3xl flex items-center gap-4 cursor-pointer hover:bg-white/20 transition-all group"
                        >
                           <div className="w-16 h-16 bg-white rounded-2xl p-2 shrink-0 group-hover:scale-110 transition-transform">
                              <img src={p.image} alt={p.name} className="w-full h-full object-contain" />
                           </div>
                           <div>
                              <div className="text-[10px] font-black opacity-50 uppercase tracking-widest">{p.category}</div>
                              <div className="text-sm font-black font-vazir text-white">{p.name}</div>
                           </div>
                        </div>
                      ))}
                  </div>
               </div>

               <div className="bg-white rounded-[3rem] border border-medical-gray-200 p-10 shadow-xl">
                  <h4 className="text-xl font-black italic mb-6">محبوب‌ترین مقالات</h4>
                  <div className="space-y-6">
                     {BLOG_POSTS.map(p => (
                       <div 
                         key={p.id} 
                         onClick={() => setSelectedPost(p)}
                         className="flex items-center gap-4 cursor-pointer group"
                       >
                          <div className="w-16 h-16 rounded-2xl overflow-hidden shrink-0">
                             <img src={p.image} className="w-full h-full object-cover group-hover:scale-110 transition-transform" />
                          </div>
                          <div className="text-sm font-black text-medical-gray-900 group-hover:text-canina-blue transition-colors line-clamp-2">
                             {p.title}
                          </div>
                       </div>
                     ))}
                  </div>
               </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-medical-gray-50 pt-8 pb-20 px-4 font-vazir" dir="rtl">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="flex flex-col md:flex-row items-center justify-between mb-16 gap-6">
           <div className="text-right">
              <div className="inline-flex items-center gap-2 px-3 py-1 bg-canina-blue/10 text-canina-blue rounded-full text-[10px] font-black uppercase tracking-widest mb-4">
                 <BookOpen className="w-3 h-3" />
                 Canina Science Blog
              </div>
              <h1 className="text-4xl lg:text-6xl font-black text-medical-gray-900 italic leading-tight">
                مجله تخصصی <span className="text-canina-blue">سلامت پت‌ها</span>
              </h1>
              <p className="text-lg text-medical-gray-500 font-medium mt-4 max-w-xl">
                 آخرین یافته‌های علمی محققین کانی‌نا آلمان در مورد تغذیه و سلامت پت‌ها.
              </p>
           </div>
           <button 
             onClick={() => router.push('/')}
             className="px-8 py-3 bg-white border border-medical-gray-200 rounded-2xl text-medical-gray-700 shadow-sm flex items-center gap-2 font-black hover:bg-medical-gray-50 transition-all"
           >
             <ChevronRight className="w-5 h-5" />
             بازگشت به خانه
           </button>
        </div>

        {/* Featured Post */}
        <div className="mb-20">
           <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="bg-white rounded-[3.5rem] overflow-hidden border border-medical-gray-200 shadow-2xl flex flex-col lg:flex-row cursor-pointer group"
            onClick={() => setSelectedPost(BLOG_POSTS[0])}
           >
              <div className="lg:w-1/2 aspect-video lg:aspect-auto">
                 <img 
                   src={BLOG_POSTS[0].image} 
                   alt={BLOG_POSTS[0].title}
                   className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                 />
              </div>
              <div className="lg:w-1/2 p-12 flex flex-col justify-center">
                 <div className="flex items-center gap-4 text-xs font-bold text-canina-blue mb-6">
                    <div className="bg-canina-blue/10 px-3 py-1 rounded-full uppercase tracking-widest">تخصصی</div>
                    <div className="flex items-center gap-1">
                       <Calendar className="w-3 h-3" />
                       {BLOG_POSTS[0].date}
                    </div>
                 </div>
                 <h2 className="text-3xl lg:text-4xl font-black text-medical-gray-900 mb-6 leading-tight group-hover:text-canina-blue transition-colors">
                    {BLOG_POSTS[0].title}
                 </h2>
                 <p className="text-lg text-medical-gray-500 mb-8 leading-relaxed italic">
                    {BLOG_POSTS[0].excerpt}
                 </p>
                 <div className="flex items-center justify-between pt-8 border-t border-medical-gray-100">
                    <div className="flex items-center gap-3">
                       <div className="w-10 h-10 bg-medical-gray-100 rounded-full flex items-center justify-center text-medical-gray-400">
                          <User className="w-6 h-6" />
                       </div>
                       <div className="text-sm">
                          <div className="font-black text-medical-gray-900">{BLOG_POSTS[0].author}</div>
                          <div className="font-bold text-medical-gray-400">محقق ارشد کانی‌نا</div>
                       </div>
                    </div>
                    <div className="flex items-center gap-2 text-canina-blue font-black">
                       ادامه مطلب
                       <ArrowLeft className="w-5 h-5 group-hover:-translate-x-2 transition-transform" />
                    </div>
                 </div>
              </div>
           </motion.div>
        </div>

        {/* Post Grid */}
        <div className="grid md:grid-cols-2 gap-8">
           {BLOG_POSTS.slice(1).map((post, idx) => (
             <motion.div 
               key={post.id}
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true }}
               transition={{ delay: idx * 0.1 }}
               className="bg-white rounded-[3rem] overflow-hidden border border-medical-gray-200 shadow-xl group hover:shadow-2xl transition-all cursor-pointer"
               onClick={() => setSelectedPost(post)}
             >
                <div className="aspect-[16/9] overflow-hidden">
                   <img 
                     src={post.image} 
                     alt={post.title}
                     className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                   />
                </div>
                <div className="p-8">
                   <div className="flex items-center gap-4 text-[10px] font-bold text-canina-blue mb-4">
                      <div className="flex items-center gap-1">
                        <Calendar className="w-3 h-3" />
                        {post.date}
                      </div>
                   </div>
                   <h3 className="text-xl font-black text-medical-gray-900 mb-4 group-hover:text-canina-blue transition-colors">
                      {post.title}
                   </h3>
                   <p className="text-sm text-medical-gray-500 mb-8 leading-relaxed line-clamp-2">
                      {post.excerpt}
                   </p>
                   <div className="flex items-center gap-2 text-medical-gray-900 font-bold group">
                      مطالعه مقاله
                      <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
                   </div>
                </div>
             </motion.div>
           ))}

           {/* Newsletter / CTA Box */}
           <div className="bg-canina-blue rounded-[3rem] p-10 text-white relative overflow-hidden flex flex-col justify-center">
              <div className="absolute top-0 right-0 p-8 opacity-20">
                 <Sparkles className="w-24 h-24" />
              </div>
              <h3 className="text-3xl font-black mb-4 italic">مشترک خبرنامه علمی شوید</h3>
              <p className="text-white/80 mb-8 font-medium leading-relaxed">
                 ماهانه یک ایمیل حاوی مهم‌ترین نکات سلامت پت‌ها و کدهای تخفیف اختصاصی دریافت کنید.
              </p>
              <div className="flex gap-2">
                 <input 
                   type="email" 
                   placeholder="آدرس ایمیل شما"
                   className="flex-1 bg-white/10 border border-white/20 rounded-xl px-4 py-3 outline-none focus:bg-white/20 placeholder:text-white/40"
                 />
                 <button className="bg-white text-canina-blue px-6 py-3 rounded-xl font-black">
                   عضویت
                 </button>
              </div>
           </div>
        </div>

        {/* Synergy Products Cross-sell */}
        <section className="mt-32 p-12 bg-canina-blue rounded-[4rem] text-white overflow-hidden relative shadow-2xl">
            <div className="absolute inset-0 opacity-20 pointer-events-none">
                <div className="grid grid-cols-6 h-full w-full">
                    {Array.from({length: 36}).map((_, i) => (
                        <div key={i} className="border border-white/20" />
                    ))}
                </div>
            </div>
            <div className="relative z-10 flex flex-col lg:flex-row items-center gap-12">
               <div className="flex-1">
                  <h3 className="text-3xl lg:text-4xl font-black italic mb-6">علم آلمانی در خدمت سلامت پت شما</h3>
                  <p className="text-white/80 mb-8 leading-relaxed max-w-xl">
                      تمامی مقالات این وبلاگ بر اساس کاتالوگ‌های رسمی و نتایج آزمایشگاهی کمپانی کانی‌نا آلمان تدوین شده است.
                  </p>
                  <button 
                    onClick={() => router.push('/shop')}
                    className="bg-white text-canina-blue px-8 py-4 rounded-2xl font-black hover:scale-105 transition-transform"
                  >
                    مشاهده محصولات تخصصی
                  </button>
               </div>
               <div className="grid grid-cols-2 gap-4 flex-shrink-0">
                  {products.slice(0, 2).map((p) => (
                    <div 
                      key={p.id}
                      onClick={() => router.push(`/shop/${p.id}`)}
                      className="bg-white/10 border border-white/20 p-6 rounded-3xl cursor-pointer hover:bg-white/20 transition-all text-center group"
                    >
                       <img src={p.image} alt={p.name} className="w-20 h-20 mx-auto mb-4 object-contain filter brightness-0 invert group-hover:scale-110 transition-transform" />
                       <h5 className="text-[10px] font-black">{p.name}</h5>
                    </div>
                  ))}
               </div>
            </div>
        </section>
      </div>
    </div>
  );
}