From e6411388873c02bbdcb0a0c37cf49cb70d3633a4 Mon Sep 17 00:00:00 2001
From: Evandro Fonseca Junior <asemlk54@hotmail.com>
Date: Thu, 30 Oct 2025 19:17:46 -0300
Subject: [PATCH] refactor: replace MarketOffers component with MarketExample
 in home page

Renamed imported component from MarketOffers to MarketExample and updated its usage in the home page layout. Also removed rarity badge display from ItemCard to align with simplified design.
Related to component refactoring for consistency.
---
 app/[locale]/page.tsx                  |   4 +-
 components/item-card.tsx               |  15 ---
 components/sections/market-example.tsx | 164 +++++++++++++++++++++++++
 lib/mock-data.ts                       |  50 ++++----
 messages/en.json                       |   5 +
 messages/pt.json                       |   5 +
 6 files changed, 201 insertions(+), 42 deletions(-)
 create mode 100644 components/sections/market-example.tsx

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 3671236..cbd9c06 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -4,7 +4,7 @@ import { EscrowExplanation } from "@/components/sections/escrow-explanation";
 import { HeroSection } from "@/components/sections/hero-section";
 import { HowItWorks } from "@/components/sections/how-it-works";
 import { FeaturedItems } from "@/components/sections/featured-items";
-import { MarketOffers } from "@/components/sections/market-offers";
+import { MarketExample } from "@/components/sections/market-example";
 import { MarketStats } from "@/components/sections/market-stats";
 import { DonationFooterCard } from "@/components/donation-footer-card";
 
@@ -17,7 +17,7 @@ export default function Home() {
         <HeroSection />
         <HowItWorks />
         <FeaturedItems />
-        <MarketOffers />
+        <MarketExample />
         <MarketStats />
       </main>
       <EscrowExplanation />
diff --git a/components/item-card.tsx b/components/item-card.tsx
index 10cd2e8..28d6d22 100644
--- a/components/item-card.tsx
+++ b/components/item-card.tsx
@@ -283,21 +283,6 @@ export function ItemCard({ item, mode = "market" }: ItemCardProps) {
       <MagicCard className="p-0 overflow-hidden rounded-xl border border-border/50 hover:border-primary/30 transition-all duration-300 hover:scale-[1.02] hover:shadow-xl">
         {/* Header com ícone e badge de raridade */}
         <div className="relative aspect-square bg-linear-to-br from-background to-muted p-6">
-          {/* Badge de raridade com glow (apenas em modo market) */}
-          {mode === "market" && (
-            <Badge
-              className={`${
-                rarityColors[item.rarity]
-              } text-white absolute top-3 left-3 z-20 shadow-lg ${getRarityGlow(
-                item.rarity
-              )} ${item.rarity === "legendary" ? "animate-pulse" : ""} ${
-                item.rarity === "epic" ? "animate-pulse" : ""
-              }`}
-            >
-              {item.rarity}
-            </Badge>
-          )}
-
           {/* Botão de favorito */}
           <Button
             variant="ghost"
diff --git a/components/sections/market-example.tsx b/components/sections/market-example.tsx
new file mode 100644
index 0000000..e88be4e
--- /dev/null
+++ b/components/sections/market-example.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { ItemCard } from "@/components/item-card";
+import { BlurFade } from "@/components/ui/blur-fade";
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface MarketItem {
+  id: string;
+  name: string;
+  image: string;
+  category: string;
+  level?: number;
+  weight?: number;
+  rarity?: string;
+  price?: {
+    buy: number;
+    sell: number;
+  };
+  priceHistory?: {
+    highest: number;
+    lowest: number;
+    average: number;
+  };
+}
+
+export function MarketExample() {
+  const t = useTranslations("home.marketExample");
+  const [items, setItems] = useState<MarketItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchItems() {
+      try {
+        setIsLoading(true);
+        // Buscar mix de categorias para variedade visual
+        const categories = ["weapon", "armor", "helmet"];
+        const response = await fetch(
+          `/api/items?category=${categories.join(",")}&pageSize=8&sort=name`
+        );
+
+        if (!response.ok) {
+          throw new Error("Falha ao carregar itens");
+        }
+
+        const data = await response.json();
+        const fetchedItems = data.items || [];
+
+        // Enriquecer com preços mockados e raridades
+        const enrichedItems = fetchedItems.map((item: any, index: number) => {
+          const basePrice = Math.floor(Math.random() * 100000) + 10000;
+          const buyPrice = basePrice;
+          const sellPrice = Math.floor(basePrice * 0.85);
+          const average = basePrice;
+          const highest = Math.floor(average * 1.3);
+          const lowest = Math.floor(average * 0.7);
+
+          return {
+            ...item,
+            // Garantir ID único para evitar duplicação de keys
+            id: `${item.id}-${index}`,
+            price: {
+              buy: buyPrice,
+              sell: sellPrice,
+            },
+            priceHistory: {
+              highest,
+              lowest,
+              average,
+            },
+            rarity:
+              item.rarity ||
+              (["common", "uncommon", "rare", "epic"] as const)[
+                Math.floor(Math.random() * 4)
+              ],
+          };
+        });
+
+        setItems(enrichedItems);
+        setError(null);
+      } catch (err) {
+        console.error("Erro ao buscar itens:", err);
+        setError("Não foi possível carregar os itens");
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchItems();
+  }, []);
+
+  // Skeleton para loading
+  const LoadingSkeleton = () => (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+      {Array.from({ length: 8 }).map((_, index) => (
+        <div key={index} className="space-y-4">
+          <Skeleton className="h-48 w-full rounded-xl" />
+          <div className="space-y-2">
+            <Skeleton className="h-6 w-3/4" />
+            <Skeleton className="h-4 w-1/2" />
+            <Skeleton className="h-4 w-1/3" />
+          </div>
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-2/3" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  return (
+    <section className="py-20 bg-muted/30">
+      <div className="container">
+        <BlurFade delay={0.2}>
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold mb-4">
+              {t("title")}
+            </h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              {t("subtitle")}
+            </p>
+          </div>
+        </BlurFade>
+
+        {/* Grid de itens */}
+        {isLoading ? (
+          <LoadingSkeleton />
+        ) : error ? (
+          <div className="text-center py-12">
+            <div className="text-6xl mb-4">⚠️</div>
+            <h3 className="text-xl font-semibold mb-2">
+              {t("errorTitle")}
+            </h3>
+            <p className="text-muted-foreground">{error}</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            {items.map((item, index) => (
+              <BlurFade key={item.id} delay={0.2 + index * 0.05}>
+                <ItemCard item={item as any} mode="market" />
+              </BlurFade>
+            ))}
+          </div>
+        )}
+
+        {/* Mensagem quando não há itens */}
+        {!isLoading && !error && items.length === 0 && (
+          <div className="text-center py-12">
+            <div className="text-6xl mb-4">📦</div>
+            <h3 className="text-xl font-semibold mb-2">
+              Nenhum item encontrado
+            </h3>
+            <p className="text-muted-foreground">
+              Tente novamente mais tarde
+            </p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/lib/mock-data.ts b/lib/mock-data.ts
index 9ac1968..452543a 100644
--- a/lib/mock-data.ts
+++ b/lib/mock-data.ts
@@ -3,22 +3,22 @@ import { TibiaItem, MarketOffer } from "@/types/item";
 export const featuredItems: TibiaItem[] = [
   {
     id: "1",
-    name: "Armor of Fire",
-    image: "/items/armor-of-fire.png",
-    alt: "Armor of Fire - Armadura lendária de Tibia com proteção contra fogo +10",
+    name: "Ornate Chestplate",
+    image: "/api/images?path=data/images/armaduras/ornate_chestplate.gif",
+    alt: "Ornate Chestplate - Armadura lendária de Tibia nível 300",
     category: "armor",
     rarity: "legendary",
-    stats: { armor: 16, weight: 120 },
-    requirements: { level: 200, vocation: "Knight" },
-    protections: { fire: 10 },
-    price: { buy: 2500000, sell: 2200000, bid: 2350000 },
-    priceHistory: { highest: 2800000, lowest: 2000000, average: 2350000 },
-    dropLocation: "Fire Dragon Lair",
+    stats: { armor: 18, weight: 185 },
+    requirements: { level: 300, vocation: "Knight" },
+    protections: { fire: 5, ice: 5 },
+    price: { buy: 8500000, sell: 8200000, bid: 8350000 },
+    priceHistory: { highest: 9000000, lowest: 8000000, average: 8400000 },
+    dropLocation: "Ornate Chest",
   },
   {
     id: "2",
     name: "Demon Helmet",
-    image: "/items/demon-helmet.png",
+    image: "/api/images?path=data/images/capacetes/demon_helmet.gif",
     alt: "Demon Helmet - Capacete épico de Tibia nível 100",
     category: "helmet",
     rarity: "epic",
@@ -31,7 +31,7 @@ export const featuredItems: TibiaItem[] = [
   {
     id: "3",
     name: "Vampire Shield",
-    image: "/items/vampire-shield.png",
+    image: "/api/images?path=data/images/escudos/vampire_shield.gif",
     alt: "Vampire Shield - Escudo épico de Tibia com defesa 38",
     category: "shield",
     rarity: "epic",
@@ -44,7 +44,7 @@ export const featuredItems: TibiaItem[] = [
   {
     id: "4",
     name: "Zaoan Helmet",
-    image: "/items/zaoan-helmet.png",
+    image: "/api/images?path=data/images/capacetes/zaoan_helmet.gif",
     alt: "Zaoan Helmet - Capacete raro de Tibia nível 80",
     category: "helmet",
     rarity: "rare",
@@ -57,7 +57,7 @@ export const featuredItems: TibiaItem[] = [
   {
     id: "5",
     name: "Magic Sword",
-    image: "/items/magic-sword.png",
+    image: "/api/images?path=data/images/espadas/magic_sword.gif",
     alt: "Magic Sword - Espada rara de Tibia nível 75",
     category: "weapon",
     rarity: "rare",
@@ -70,7 +70,7 @@ export const featuredItems: TibiaItem[] = [
   {
     id: "6",
     name: "Demonbone Amulet",
-    image: "/items/demonbone-amulet.png",
+    image: "/api/images?path=data/images/amuletos/demonbone_amulet.gif",
     alt: "Demonbone Amulet - Amuleto épico de Tibia com proteção contra fogo",
     category: "amulet",
     rarity: "epic",
@@ -82,22 +82,22 @@ export const featuredItems: TibiaItem[] = [
   },
   {
     id: "7",
-    name: "Ornate Chestplate",
-    image: "/items/ornate-chestplate.png",
-    alt: "Ornate Chestplate - Armadura lendária de Tibia nível 300",
-    category: "armor",
+    name: "Dragon Shield",
+    image: "/api/images?path=data/images/escudos/dragon_shield.gif",
+    alt: "Dragon Shield - Escudo lendário de Tibia",
+    category: "shield",
     rarity: "legendary",
-    stats: { armor: 18, weight: 185 },
-    requirements: { level: 300, vocation: "Knight" },
-    protections: { fire: 5, ice: 5 },
-    price: { buy: 8500000, sell: 8200000, bid: 8350000 },
-    priceHistory: { highest: 9000000, lowest: 8000000, average: 8400000 },
-    dropLocation: "Ornate Chest",
+    stats: { defense: 45, weight: 55 },
+    requirements: { level: 200, vocation: "Knight" },
+    protections: { fire: 10, energy: 5 },
+    price: { buy: 1500000, sell: 1400000, bid: 1450000 },
+    priceHistory: { highest: 1600000, lowest: 1350000, average: 1475000 },
+    dropLocation: "Dragon Lairs",
   },
   {
     id: "8",
     name: "Ultimate Health Potion",
-    image: "/items/uhp.png",
+    image: "/api/images?path=data/images/liquidos/ultimate_health_potion.gif",
     alt: "Ultimate Health Potion - Poção de saúde máxima de Tibia",
     category: "potion",
     rarity: "common",
diff --git a/messages/en.json b/messages/en.json
index acb1c91..8ddb9bd 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -173,6 +173,11 @@
       "stats": "Statistics",
       "viewDetails": "View Details",
       "buyNow": "Buy Now"
+    },
+    "marketExample": {
+      "title": "Market Examples",
+      "subtitle": "See real Tibia items with updated prices",
+      "errorTitle": "Error Loading Items"
     }
   },
   "underConstruction": {
diff --git a/messages/pt.json b/messages/pt.json
index 8b9750b..9eaafb4 100644
--- a/messages/pt.json
+++ b/messages/pt.json
@@ -173,6 +173,11 @@
       "stats": "Estatísticas",
       "viewDetails": "Ver Detalhes",
       "buyNow": "Comprar Agora"
+    },
+    "marketExample": {
+      "title": "Exemplos do Market",
+      "subtitle": "Veja itens reais do Tibia com preços atualizados",
+      "errorTitle": "Erro ao Carregar Itens"
     }
   },
   "underConstruction": {