"use client";

import { Package, RefreshCw, Sparkles, Truck } from "lucide-react";
import { Stagger, StaggerItem } from "@/components/motion/Stagger";

const items = [
  {
    icon: Package,
    title: "Women · Men · Kids · Baby",
    text: "Everyday clothes, considered fit, one catalog",
  },
  {
    icon: Truck,
    title: "Worldwide delivery",
    text: "Fast shipping across the United States & beyond",
  },
  {
    icon: RefreshCw,
    title: "Easy returns",
    text: "Hassle-free returns on eligible orders",
  },
  {
    icon: Sparkles,
    title: "Weekly deals",
    text: "Flash sales and new arrivals every week",
  },
];

/** Marketplace trust strip. */
export function TrustStrip({ compact = false }: { compact?: boolean }) {
  return (
    <section className="border-y border-border bg-card">
      <Stagger
        className={`atelier grid gap-5 sm:grid-cols-2 lg:grid-cols-4 lg:gap-6 ${
          compact ? "py-6" : "py-8 lg:py-9"
        }`}
      >
        {items.map((item) => (
          <StaggerItem key={item.title}>
            <div className="flex gap-3">
              <item.icon className="mt-0.5 h-5 w-5 shrink-0 text-foreground" />
              <div>
                <p className="text-sm font-semibold tracking-tight">
                  {item.title}
                </p>
                <p className="mt-0.5 text-xs text-muted">{item.text}</p>
              </div>
            </div>
          </StaggerItem>
        ))}
      </Stagger>
    </section>
  );
}