57db4a16-c67f-4e5f-ad5b-27d528f2b9cc/src/pages/ShopPage.tsx

import { routes } from "@/routes";
import NavbarCentered from "@/components/ui/NavbarCentered";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import FooterMinimal from "@/components/sections/footer/FooterMinimal";
import Card from "@/components/ui/Card";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import Tag from "@/components/ui/Tag";
import RatingStars from "@/components/ui/RatingStars";
import PriceDisplay from "@/components/ui/PriceDisplay";
import Button from "@/components/ui/Button";

const SHOP_PRODUCTS = [
  {
    id: "p1",
    name: "Ruby Matte Signature Lipstick",
    price: 14.99,
    originalPrice: 22.00,
    rating: 4.9,
    reviews: 1284,
    isSale: true,
    imageSrc: "https://images.unsplash.com/photo-1586495777744-4413f21062fa?auto=format&fit=crop&q=80"
  },
  {
    id: "p2",
    name: "Velvet Finish Liquid Foundation",
    price: 24.50,
    rating: 4.7,
    reviews: 856,
    isSale: false,
    imageSrc: "https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?auto=format&fit=crop&q=80"
  },
  {
    id: "p3",
    name: "Crimson Glow Highlighter Palette",
    price: 18.00,
    originalPrice: 25.00,
    rating: 4.8,
    reviews: 642,
    isSale: true,
    imageSrc: "https://images.unsplash.com/photo-1599305090598-fe179d501227?auto=format&fit=crop&q=80"
  },
  {
    id: "p4",
    name: "Midnight Black Precision Eyeliner",
    price: 12.99,
    rating: 4.6,
    reviews: 415,
    isSale: false,
    imageSrc: "https://images.unsplash.com/photo-1631214500515-8739516115a8?auto=format&fit=crop&q=80"
  },
  {
    id: "p5",
    name: "Rose Petal 18-Color Eyeshadow",
    price: 29.99,
    originalPrice: 38.00,
    rating: 4.9,
    reviews: 2105,
    isSale: true,
    imageSrc: "https://images.unsplash.com/photo-1512496115841-8743e1d92f1a?auto=format&fit=crop&q=80"
  },
  {
    id: "p6",
    name: "All-Day Flawless Setting Spray",
    price: 16.50,
    rating: 4.5,
    reviews: 328,
    isSale: false,
    imageSrc: "https://images.unsplash.com/photo-1620916566398-39f1143ab7be?auto=format&fit=crop&q=80"
  }
];

export default function ShopPage() {
  return (
    <div className="min-h-screen bg-background text-foreground flex flex-col">
      <NavbarCentered
        logo="Miss Rose"
        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
        ctaButton={{ text: "Cart (0)", href: "/cart" }}
      />

      <main className="flex-grow">
        <HeroBillboard
          tag="Shop All"
          title="Bold Beauty, Unapologetically You"
          description="Discover our full collection of high-performance cosmetics designed to make you stand out. Rich pigments, long-lasting wear, and a signature ruby aesthetic."
          primaryButton={{ text: "Shop Best Sellers", href: "#products" }}
          secondaryButton={{ text: "View Offers", href: "#products" }}
          imageSrc="https://images.unsplash.com/photo-1616683693504-3ea7e9ad6fec?auto=format&fit=crop&q=80"
        />

        <section id="products" className="py-24 px-6 max-w-7xl mx-auto">
          <div className="mb-12 text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">The Ruby Collection</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">Explore our complete line of premium makeup products, featuring exclusive online pricing and verified customer reviews.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {SHOP_PRODUCTS.map((product) => (
              <Card key={product.id} className="p-5 flex flex-col gap-4 border-border bg-card hover:border-primary-cta transition-colors">
                <div className="relative aspect-square overflow-hidden rounded-md bg-muted">
                  <ImageOrVideo imageSrc={product.imageSrc} className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
                  {product.isSale && (
                    <div className="absolute top-3 left-3">
                      <Tag text="Sale" className="bg-primary-cta text-primary-cta-foreground border-none font-bold" />
                    </div>
                  )}
                </div>
                
                <div className="flex flex-col flex-grow gap-3">
                  <h3 className="text-lg font-bold leading-tight text-card-foreground">{product.name}</h3>
                  
                  <div className="flex items-center gap-2">
                    <RatingStars rating={product.rating} className="text-primary-cta" />
                    <span className="text-sm text-muted-foreground">({product.reviews} reviews)</span>
                  </div>
                  
                  <div className="mt-auto pt-4 flex items-center justify-between">
                    <PriceDisplay price={product.price} originalPrice={product.originalPrice} currency="$" className="text-xl font-bold" />
                  </div>
                  
                  <Button text="Add to Cart" variant="primary" className="w-full mt-2" />
                </div>
              </Card>
            ))}
          </div>
        </section>
      </main>

      <FooterMinimal
        brand="Miss Rose Cosmetics"
        copyright="© 2024 Miss Rose. All rights reserved."
      />
    </div>
  );
}