Refactor UI architecture

Implemented broad UI and data layer alignments:
- Added and wired new components: AnimatedTrustBadge, Header, Footer, ShareButtons, ProductQuickView, wishlist/store shims
- Replaced language usage with locale across Hero, Shop, and ProductDetail flows
- Implemented minimal supabase-typed product models and Shopify-compatible cart structures
- Replaced heavy, DB-mismatched fields with DB-aligned product schema mappings
- Introduced lightweight filtering, search, and quick-view UX for catalog with CRO-oriented tweaks

X-Lovable-Edit-ID: edt-093e1ded-07b9-4f7e-bc4e-db04ec442b62

Author: lovable-dev[bot]

src/components/AnimatedTrustBadge.tsx

@@ -0,0 +1,9 @@
+import { ShieldCheck } from "lucide-react";
+
+export const AnimatedTrustBadge = () => (
+  <div className="relative w-24 h-24 flex items-center justify-center">
+    <div className="absolute inset-0 rounded-full border-2 border-accent/40 animate-spin" style={{ animationDuration: '8s' }} />
+    <div className="absolute inset-2 rounded-full border border-accent/20" />
+    <ShieldCheck className="w-8 h-8 text-accent" />
+  </div>
+);

src/components/Footer.tsx

@@ -0,0 +1,14 @@
+import { useLanguage } from "@/contexts/LanguageContext";
+
+export const Footer = () => {
+  const { t } = useLanguage();
+  return (
+    <footer className="bg-primary text-primary-foreground py-12">
+      <div className="container mx-auto px-4 max-w-7xl text-center">
+        <p className="font-serif text-lg mb-2">ASPER BEAUTY SHOP</p>
+        <p className="text-sm opacity-70">{t("footer.tagline")}</p>
+        <p className="text-xs opacity-50 mt-4">© {new Date().getFullYear()} {t("footer.copyright")}</p>
+      </div>
+    </footer>
+  );
+};

src/components/Header.tsx

@@ -0,0 +1,39 @@
+import { Link } from "react-router-dom";
+import { ShoppingBag, Search, User, Globe } from "lucide-react";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { useCartStore } from "@/stores/cartStore";
+
+export const Header = () => {
+  const { locale, toggle, t } = useLanguage();
+  const itemCount = useCartStore(s => s.items.reduce((sum, i) => sum + i.quantity, 0));
+
+  return (
+    <header className="fixed top-0 inset-x-0 z-50 bg-background/90 backdrop-blur-md border-b border-border">
+      <div className="container mx-auto px-4 max-w-7xl flex items-center justify-between h-16">
+        <Link to="/" className="font-serif text-xl font-bold text-primary tracking-wide">
+          ASPER
+        </Link>
+        <nav className="hidden md:flex items-center gap-6 text-sm font-medium">
+          <Link to="/shop" className="text-foreground/80 hover:text-primary transition-colors">{t("nav.shop")}</Link>
+          <Link to="/lab" className="text-foreground/80 hover:text-primary transition-colors">{t("nav.intelligence")}</Link>
+        </nav>
+        <div className="flex items-center gap-3">
+          <button onClick={toggle} className="p-2 text-foreground/60 hover:text-accent transition-colors" aria-label="Toggle language">
+            <Globe className="w-5 h-5" />
+          </button>
+          <Link to="/auth" className="p-2 text-foreground/60 hover:text-primary transition-colors">
+            <User className="w-5 h-5" />
+          </Link>
+          <Link to="/shop" className="p-2 text-foreground/60 hover:text-primary transition-colors relative">
+            <ShoppingBag className="w-5 h-5" />
+            {itemCount > 0 && (
+              <span className="absolute -top-0.5 -right-0.5 bg-primary text-primary-foreground text-[10px] w-4 h-4 rounded-full flex items-center justify-center font-bold">
+                {itemCount}
+              </span>
+            )}
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+};

src/components/HeroSection.tsx

@@ -64,8 +64,8 @@ const GoldParticles = () => {
 };
 const HeroSection = () => {
   const [videoLoaded, setVideoLoaded] = useState(false);
-  const { language } = useLanguage();
-  const isAr = language === "ar";
+  const { locale } = useLanguage();
+  const isAr = locale === "ar";
 
   return (
     <section className="relative min-h-screen w-full overflow-hidden bg-gradient-to-b from-[#FFF8E1] via-[#FFFDF5] to-[#FFF8E1]">

src/components/ProductQuickView.tsx

@@ -0,0 +1,47 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ShoppingBag } from "lucide-react";
+import { formatJOD, getProductImage } from "@/lib/productImageUtils";
+
+interface Product {
+  id: string;
+  title: string;
+  price: number;
+  description: string | null;
+  image_url: string | null;
+  brand: string | null;
+  category?: string;
+}
+
+interface ProductQuickViewProps {
+  product: Product | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAddToCart?: (product: Product) => void;
+}
+
+export const ProductQuickView = ({ product, open, onOpenChange, onAddToCart }: ProductQuickViewProps) => {
+  if (!product) return null;
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="font-serif">{product.title}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <img src={getProductImage(product.image_url)} alt={product.title} className="w-full aspect-square object-cover rounded-lg" />
+          {product.brand && <p className="text-xs text-muted-foreground uppercase tracking-widest">{product.brand}</p>}
+          <p className="text-sm text-muted-foreground">{product.description}</p>
+          <div className="flex items-center justify-between">
+            <span className="text-lg font-bold">{formatJOD(product.price)}</span>
+            {onAddToCart && (
+              <Button onClick={() => onAddToCart(product)} size="sm" className="gap-2">
+                <ShoppingBag className="w-4 h-4" /> Add to Cart
+              </Button>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/ProductSearchFilters.tsx

@@ -0,0 +1,34 @@
+import { Input } from "@/components/ui/input";
+import { Search } from "lucide-react";
+
+export interface FilterState {
+  searchQuery: string;
+  categories: string[];
+  subcategories: string[];
+  brands: string[];
+  skinConcerns: string[];
+  priceRange: [number, number];
+  onSaleOnly: boolean;
+}
+
+interface ProductSearchFiltersProps {
+  filters: FilterState;
+  onFilterChange: (filters: FilterState) => void;
+  products: any[];
+}
+
+export const ProductSearchFilters = ({ filters, onFilterChange }: ProductSearchFiltersProps) => {
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+        <Input
+          placeholder="Search products..."
+          value={filters.searchQuery}
+          onChange={(e) => onFilterChange({ ...filters, searchQuery: e.target.value })}
+          className="pl-10"
+        />
+      </div>
+    </div>
+  );
+};

src/components/ShareButtons.tsx

@@ -0,0 +1,25 @@
+import { Share2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+
+interface ShareButtonsProps {
+  url: string;
+  title: string;
+}
+
+export const ShareButtons = ({ url, title }: ShareButtonsProps) => {
+  const handleShare = async () => {
+    if (navigator.share) {
+      await navigator.share({ title, url });
+    } else {
+      await navigator.clipboard.writeText(url);
+      toast.success("Link copied!");
+    }
+  };
+
+  return (
+    <Button variant="outline" size="sm" onClick={handleShare} className="gap-2">
+      <Share2 className="w-4 h-4" /> Share
+    </Button>
+  );
+};

src/lib/productImageUtils.ts

@@ -0,0 +1,16 @@
+export function formatJOD(price: number): string {
+  return `${price.toFixed(2)} JOD`;
+}
+
+export function getProductImage(imageUrl: string | null, _category?: string, _title?: string): string {
+  return imageUrl || "/placeholder.svg";
+}
+
+export const CATEGORY_FILTER_TO_DB: Record<string, string[]> = {
+  "skin-care": ["Skin Care", "Skincare", "skincare"],
+  "makeup": ["Makeup", "Make Up", "makeup"],
+  "hair-care": ["Hair Care", "Haircare", "hair care"],
+  "fragrance": ["Fragrance", "Fragrances", "fragrance"],
+  "body-care": ["Body Care", "Body", "body care"],
+  "tools-devices": ["Tools", "Devices", "tools"],
+};

src/lib/productUtils.ts

@@ -0,0 +1,15 @@
+type Locale = "en" | "ar";
+
+export function getLocalizedCategory(category: string | null, locale: Locale): string {
+  if (!category) return locale === "ar" ? "عام" : "General";
+  return category;
+}
+
+export function getLocalizedDescription(description: string | null | undefined, locale: Locale, maxLength = 300): string {
+  if (!description) return "";
+  return description.length > maxLength ? description.slice(0, maxLength) + "…" : description;
+}
+
+export function translateTitle(title: string, _locale: Locale): string {
+  return title;
+}