canina/frontend/application/app/page.tsx

"use client";

import { useEffect, useState } from "react";
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";
import { useSettingsStore } from "../lib/store/settingsStore";
import api from "../lib/services/api";

export default function Home() {
  const getText = useSettingsStore(state => state.getText);
  const [data, setData] = useState<any>(null);

  useEffect(() => {
    api.get('/home')
      .then(res => setData(res.data))
      .catch(err => console.error('Home data fetch error:', err));
  }, []);

  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 font-sans">
          <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 font-lalezar tracking-wide">
                      {getText('nav_card_shop_title', "فروشگاه تخصصی")}
                  </h3>
                  <p className="text-medical-gray-500 mb-8 leading-relaxed font-shabnam">
                      {getText('nav_card_shop_desc', "دسترسی به تمامی محصولات بر اساس علائم بالینی و نیازهای پت شما.")}
                  </p>
                  <div className="flex items-center gap-2 text-canina-blue font-black tracking-widest uppercase text-xs font-vazir">
                      {getText('nav_card_shop_cta', "کاتالوگ کامل محصولات")}
                      <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 font-lalezar tracking-wide">
                      {getText('nav_card_wiki_title', "دانشنامه علمی")}
                  </h3>
                  <p className="text-white/60 mb-8 leading-relaxed font-shabnam">
                      {getText('nav_card_wiki_desc', "آشنایی با ترکیبات نایاب و استانداردهای دارویی محصولات آلمانی کانینا.")}
                  </p>
                  <div className="flex items-center gap-2 text-canina-blue font-black tracking-widest uppercase text-xs font-vazir">
                      {getText('nav_card_wiki_cta', "مطالعه مقالات تخصصی")}
                      <span className="text-lg">←</span>
                  </div>
              </Link>
          </div>
      </section>

      {/* About Section Teaser */}
      <section className="py-24 bg-white overflow-hidden font-sans">
          <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 font-lalezar tracking-wide">{getText('quality', "کیفیت")}</div>
                      <div className="text-xs uppercase tracking-widest font-bold opacity-80 font-vazir">{getText('ultra_pharmaceutical', "استانداردهای فوق‌دارویی")}</div>
                  </div>
              </div>
              <div>
                  <div className="text-canina-blue text-xs font-bold uppercase tracking-[0.2em] mb-4 font-vazir">
                      {getText('about_label', "میراث ما از آلمان")}
                  </div>
                  <h2 className="text-3xl lg:text-5xl font-black text-medical-gray-900 leading-[1.2] mb-12 font-lalezar tracking-wide">
                      {getText('about_title', "چرا برند آلمانی Canina مرجع دامپزشکان است؟")}
                  </h2>
                  <div className="space-y-6">
                      {[
                          { title: getText('about_item1_title', "مواد اولیه نایاب"), desc: getText('about_item1_desc', "استفاده از پودر صدف لب‌سبز اصل نیوزیلند و مواد ارگانیک با گرید دارویی.") },
                          { title: getText('about_item2_title', "فاقد مواد نگهدارنده"), desc: getText('about_item2_desc', "تمامی محصولات ۱۰۰٪ طبیعی و فاقد رنگ‌های مصنوعی و طعم‌دهنده‌های شیمیایی هستند.") },
                          { title: getText('about_item3_title', "تاییدیه اروپا"), desc: getText('about_item3_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-black font-lalezar text-xl shadow-sm">
                                  {toPersian(idx + 1)}
                              </div>
                              <div>
                                  <h4 className="text-lg font-bold text-medical-gray-900 mb-1 font-shabnam">{item.title}</h4>
                                  <p className="text-sm text-medical-gray-500 leading-relaxed font-medium font-sans">{item.desc}</p>
                              </div>
                          </div>
                      ))}
                  </div>
              </div>
          </div>
      </section>

      {/* Call to Action */}
      <section className="bg-canina-blue py-20 relative overflow-hidden font-sans">
          <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 font-lalezar tracking-wide">
                  {getText('cta_title', "می‌خواهید بدانید کدام محصول برای پت شما مناسب‌تر است؟")}
              </h2>
              <p className="text-white/80 text-lg mb-10 leading-relaxed font-shabnam">
                  {getText('cta_desc', "تیم متخصص دامپزشکی کانینا ایران آماده پاسخگویی به سوالات شماست.")}
              </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 font-shabnam">
                      {getText('cta_btn_primary', "دریافت رژیم مکمل رایگان")}
                  </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 font-shabnam"
                  >
                      {getText('cta_btn_secondary', "پروانه دامپزشکی و اصالت کالا")}
                  </Link>
              </div>
          </div>
      </section>
    </>
  );
}