import Hero from "../components/Hero";
import SmartAdvisor from "../components/SmartAdvisor";
import FeaturedProducts from "../components/FeaturedProducts";
import VetGallery from "../components/VetGallery";
import Link from 'next/link';
import { toPersian } from "../lib/utils";

async function getHomeData() {
  try {
    const res = await fetch('http://localhost:4000/api/home', { next: { revalidate: 60 } });
    if (!res.ok) throw new Error('Failed to fetch home data');
    return res.json();
  } catch (error) {
    console.error('Home data fetch error:', error);
    return null;
  }
}

export default async function Home() {
  const data = await getHomeData();
  const banners = data?.heroBanners || [];
  const testimonials = data?.vetTestimonials || [];
  const rules = data?.smartAdvisorRules || [];

  return (
    <>
      <Hero banners={banners} />
      <SmartAdvisor rules={rules} />
      <FeaturedProducts />
      <VetGallery testimonials={testimonials} />
      
      {/* Navigation to Sections */}
      <section className="py-20 bg-medical-gray-50 border-y border-medical-gray-100">
          <div className="max-w-7xl mx-auto px-4 grid md:grid-cols-2 gap-8">
              <Link 
                  href="/shop"
                  className="bg-white p-12 rounded-[3.5rem] border border-medical-gray-200 shadow-sm hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block"
              >
                  <h3 className="text-3xl font-black text-medical-gray-900 mb-4 group-hover:text-canina-blue transition-colors italic">فروشگاه تخصصی</h3>
                  <p className="text-medical-gray-500 mb-8 leading-relaxed">دسترسی به تمامی محصولات بر اساس علائم بالینی و نیازهای پت شما.</p>
                  <div className="flex items-center gap-2 text-canina-blue font-black tracking-widest uppercase text-xs">
                      کاتالوگ کامل محصولات
                      <span className="text-lg">←</span>
                  </div>
              </Link>
              <Link 
                  href="/wiki"
                  className="bg-medical-gray-900 p-12 rounded-[3.5rem] text-white hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block"
              >
                  <h3 className="text-3xl font-black mb-4 group-hover:text-canina-blue transition-colors italic">دانشنامه علمی</h3>
                  <p className="text-white/60 mb-8 leading-relaxed">آشنایی با ترکیبات نایاب و استانداردهای دارویی محصولات آلمانی کانینا.</p>
                  <div className="flex items-center gap-2 text-canina-blue font-black tracking-widest uppercase text-xs">
                      مطالعه مقالات تخصصی
                      <span className="text-lg">←</span>
                  </div>
              </Link>
          </div>
      </section>

      {/* About Section Teaser */}
      <section className="py-24 bg-white overflow-hidden">
          <div className="max-w-7xl mx-auto px-4 grid lg:grid-cols-2 gap-16 lg:gap-24 items-center">
              <div className="relative">
                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-canina-blue/5 rounded-full blur-3xl" />
                  <img 
                      src="/assets/images/regenerated_image_1779109861747.png" 
                      alt="Laboratory" 
                      className="rounded-[3rem] shadow-2xl relative z-10 grayscale-[10%]"
                  />
                  <div className="absolute -bottom-6 -left-6 bg-canina-blue text-white p-8 rounded-3xl shadow-xl z-20">
                      <div className="text-4xl font-black mb-1 italic">کیفیت</div>
                      <div className="text-xs uppercase tracking-widest font-bold opacity-80">استانداردهای فوق‌دارویی</div>
                  </div>
              </div>
              <div>
                  <div className="text-canina-blue text-xs font-bold uppercase tracking-[0.2em] mb-4">میراث ما از آلمان</div>
                  <h2 className="text-3xl lg:text-5xl font-black text-medical-gray-900 leading-[1.2] mb-12">
                      چرا برند آلمانی Canina مرجع دامپزشکان است؟
                  </h2>
                  <div className="space-y-6">
                      {[
                          { title: 'مواد اولیه نایاب', desc: 'استفاده از پودر صدف لب‌سبز اصل نیوزیلند و مواد ارگانیک با گرید دارویی.' },
                          { title: 'فاقد مواد نگهدارنده', desc: 'تمامی محصولات ۱۰۰٪ طبیعی و فاقد رنگ‌های مصنوعی و طعم‌دهنده‌های شیمیایی هستند.' },
                          { title: 'تاییدیه اروپا', desc: 'مطابق با سخت‌گیرانه‌ترین استانداردهای ایمنی مواد غذایی و دارویی در اتحادیه اروپا.' }
                      ].map((item, idx) => (
                          <div key={idx} className="flex gap-4 items-center">
                              <div className="w-12 h-12 rounded-2xl bg-medical-gray-50 flex items-center justify-center flex-shrink-0 text-canina-blue font-bold">
                                  {toPersian(idx + 1)}
                              </div>
                              <div>
                                  <h4 className="text-lg font-bold text-medical-gray-900 mb-1">{item.title}</h4>
                                  <p className="text-sm text-medical-gray-500 leading-relaxed font-medium">{item.desc}</p>
                              </div>
                          </div>
                      ))}
                  </div>
              </div>
          </div>
      </section>

      {/* Call to Action */}
      <section className="bg-canina-blue py-20 relative overflow-hidden">
          <div className="absolute inset-0 opacity-10">
              <div className="grid grid-cols-10 h-full w-full">
                  {Array.from({length: 100}).map((_, i) => (
                      <div key={i} className="border border-white/20" />
                  ))}
              </div>
          </div>
          <div className="max-w-4xl mx-auto px-4 text-center relative z-10">
              <h2 className="text-3xl lg:text-5xl font-black text-white mb-8 leading-tight">
                  می‌خواهید بدانید کدام محصول برای پت شما مناسب‌تر است؟
              </h2>
              <p className="text-white/80 text-lg mb-10 leading-relaxed">
                  تیم متخصص دامپزشکی کانینا ایران آماده پاسخگویی به سوالات شماست.
              </p>
              <div className="flex flex-wrap justify-center gap-4">
                  <button className="bg-white text-canina-blue px-12 py-5 rounded-full font-black text-xl hover:scale-105 transition-transform shadow-2xl shadow-black/20">
                      دریافت رژیم مکمل رایگان
                  </button>
              <Link 
                  href="/shop"
                  className="bg-transparent border-2 border-white text-white px-12 py-5 rounded-full font-black text-xl hover:bg-white hover:text-canina-blue transition-all"
              >
                  پروانه دامپزشکی و اصالت کالا
              </Link>
              </div>
          </div>
      </section>
    </>
  );
}