const DIR = "/low-moq";

/** Tile geometry the artwork offsets below are measured against. */
export const MOQ_TILE = { width: 213, height: 234 };

/** How many products the rail shows at once. */
export const MOQ_PER_PAGE = 3;

export type MoqProduct = {
  id: string;
  slug: string;
  name: string;
  /** Minimum order quantity, in pieces. */
  moq: number;
  /** Unit price in USD. */
  pricePerPiece: number;
  piecesSold: number;
  image: string;
  /** Artwork placement inside the tile: every cut-out is framed differently. */
  art: { left: number; top: number; width: number; height: number };
  /**
   * Figma crops each cut-out to its box rather than letterboxing it, so the
   * artwork is covered, not contained. This is the crop centre from the fill's
   * imageTransform.
   */
  objectPosition: string;
};

export const moqProducts: MoqProduct[] = [
  {
    id: "chronograph-steel-watch",
    slug: "chronograph-steel-watch",
    name: "Chronograph Steel Watch",
    moq: 1,
    pricePerPiece: 18.4,
    piecesSold: 2000,
    image: `${DIR}/watch.png`,
    art: { left: 42, top: 43, width: 127, height: 149 },
    objectPosition: "48.3% 50%",
  },
  {
    id: "running-sneakers",
    slug: "running-sneakers",
    name: "Running Sneakers",
    moq: 1,
    pricePerPiece: 8,
    piecesSold: 2000,
    image: `${DIR}/sneakers.png`,
    art: { left: 26.2, top: 62, width: 164, height: 110 },
    objectPosition: "50% 50%",
  },
  {
    id: "leather-tote",
    slug: "leather-tote",
    name: "Leather Tote",
    moq: 1,
    pricePerPiece: 20.2,
    piecesSold: 2000,
    image: `${DIR}/tote.png`,
    art: { left: 46.2, top: 54, width: 119, height: 127 },
    objectPosition: "46.6% 50%",
  },
];

export type OfferSlide = {
  id: string;
  background: string;
  /**
   * Figma paints the copy white and blends the group with DIFFERENCE, which
   * inverts it to dark navy over the two light backgrounds. The navy slide has
   * no blend, so its copy stays white.
   */
  invertCopy: boolean;
  /** The grain overlay is dialled right down on the navy slide. */
  noiseOpacity: number;
};

export const OFFER_STAGE = { width: 423, height: 124 };
export const OFFER_INTERVAL_MS = 4200;
export const OFFER_NOISE = `${DIR}/noise.png`;
export const offerEyebrow = "Limited-time lane";
export const offerTitle = "40% off first order";

export const offerSlides: OfferSlide[] = [
  { id: "navy", background: `${DIR}/banner-navy.png`, invertCopy: false, noiseOpacity: 0.02 },
  { id: "cyan", background: `${DIR}/banner-cyan.png`, invertCopy: true, noiseOpacity: 0.2 },
  { id: "yellow", background: `${DIR}/banner-yellow.png`, invertCopy: true, noiseOpacity: 0.2 },
];

export type MoqCategory = { name: string; count?: string };

export const moqCategories: MoqCategory[] = [
  { name: "Men's and Boys Fashion", count: "2.1k" },
  { name: "Electronics Accessories" },
  { name: "Mother & Baby" },
  { name: "Sports & Outdoors" },
  { name: "Home & Lifestyle" },
  { name: "Automotive & Motorbike" },
  { name: "Security" },
  { name: "Mobile & Smartphones" },
  { name: "Office" },
];