// Hero slide definitions, transcribed from the production design.
// Geometry is authored in the design's native 1200x554 coordinate space;
// HeroBanner scales the whole stage to whatever width it is given.

export type HeroLayer = {
  src: string;
  alt?: string;
  top: number;
  left: number;
  width: number;
  height: number;
  z: number;
  /** Static rotation baked into the artwork placement. */
  rotate?: number;
  /**
   * Character cut-outs are drawn larger than their slot and bleed past it.
   * When set, the image uses these offsets/size instead of filling the slot.
   */
  image?: { left: number; top: number; width: number; height: number };
  /** Offset the layer animates in from, in design px. */
  from: { x: number; y: number; scale: number };
};

export type HeroSlide = {
  id: string;
  label: string;
  background: string;
  /** Brand wordmark artwork, unique per slide. */
  brandText: {
    src: string;
    alt: string;
    /** Intrinsic pixel size of the artwork. */
    width: number;
    height: number;
    top: number;
    /** Width the artwork is rendered at on the stage. */
    renderWidth: number;
    /** Height of the crop window, when the artwork is masked. */
    cropHeight?: number;
    /** Upward nudge applied to the artwork inside the crop window. */
    imageOffsetY?: number;
  };
  layers: HeroLayer[];
};

const LIFT = { x: 0, y: 14, scale: 0.94 };
const CORNER = {
  topLeft: { x: -280, y: -230, scale: 0.76 },
  topRight: { x: 280, y: -230, scale: 0.76 },
  bottomLeft: { x: -280, y: 230, scale: 0.76 },
  bottomRight: { x: 280, y: 230, scale: 0.76 },
};

// The purple asset folder ships with a "PERPLE" typo while its files use "purple-".
const icon = (folder: string, prefix: string, name: string) => `/HERO-SECTION/${folder} ICON/${prefix}-${name}.png`;
const BLUE = (n: string) => icon("BLUE", "blue", n);
const CYAN = (n: string) => icon("CYAN", "cyan", n);
const PURPLE = (n: string) => icon("PERPLE", "purple", n);

const LEFT_ALT = "Shopper wearing headphones";
const RIGHT_ALT = "Woman holding a phone";

export const HERO_STAGE = { width: 1200, height: 554 };

export const heroSlides: HeroSlide[] = [
  {
    id: "blue",
    label: "Blue slide",
    background: "/HERO-SECTION/BACKGROUND/blue-background.png",
    brandText: {
      src: "/HERO-SECTION/ALL TEXT/blue-brand-text.png",
      alt: "সেতুবন্ধন",
      width: 1191,
      height: 779,
      top: 252,
      renderWidth: 430,
      cropHeight: 164,
      imageOffsetY: 79,
    },
    layers: [
      { src: BLUE("big-spring-top-left"), top: -145, left: -110, width: 430, height: 431.967, z: 10, rotate: 12.84, from: CORNER.topLeft },
      { src: BLUE("big-spring-bottom-left"), top: 348, left: -110, width: 430, height: 370.569, z: 10, rotate: 1.63, from: CORNER.bottomLeft },
      { src: BLUE("big-spring-top-right"), top: -150, left: 959, width: 345, height: 363.871, z: 10, rotate: -17.8, from: CORNER.topRight },
      { src: BLUE("big-spring-bottom-right"), top: 311, left: 907, width: 450, height: 441.116, z: 10, rotate: 19.16, from: CORNER.bottomRight },
      { src: BLUE("small-spring-upper"), top: 143, left: 384, width: 84, height: 66.3158, z: 20, from: LIFT },
      { src: BLUE("small-spring-lower"), top: 361, left: 794, width: 80, height: 63.1351, z: 20, from: LIFT },
      { src: BLUE("left-character"), alt: LEFT_ALT, top: 196, left: 240, width: 155, height: 181.656, z: 30, image: { left: -2.96, top: -2.96, width: 161.911, height: 188.567 }, from: LIFT },
      { src: BLUE("right-character"), alt: RIGHT_ALT, top: 190, left: 809, width: 155, height: 176.476, z: 30, image: { left: -30.81, top: -12.14, width: 223.163, height: 225.964 }, from: LIFT },
    ],
  },
  {
    id: "cyan",
    label: "Cyan slide",
    background: "/HERO-SECTION/BACKGROUND/cyan-background.png",
    brandText: {
      src: "/HERO-SECTION/ALL TEXT/cyan-brand-text.png",
      alt: "ব্র্যান্ড",
      width: 843,
      height: 708,
      top: 213,
      renderWidth: 270,
    },
    layers: [
      { src: CYAN("big-spring-top-left"), top: -145, left: -350, width: 1050, height: 485.965, z: 10, rotate: -4, from: CORNER.topLeft },
      { src: CYAN("big-spring-top-right"), top: -115, left: 595, width: 1050, height: 485.965, z: 10, from: CORNER.topRight },
      { src: CYAN("big-spring-bottom-left"), top: 250, left: -300, width: 1050, height: 485.965, z: 10, from: CORNER.bottomLeft },
      { src: CYAN("big-spring-bottom-right"), top: 215, left: 450, width: 1150, height: 532.247, z: 10, from: CORNER.bottomRight },
      { src: CYAN("small-spring-upper"), top: 104, left: 713, width: 184, height: 97.9694, z: 20, from: LIFT },
      { src: CYAN("small-spring-lower"), top: 299, left: 328, width: 192, height: 90.0384, z: 20, from: LIFT },
      { src: CYAN("left-character"), alt: LEFT_ALT, top: 196, left: 240, width: 155, height: 181.114, z: 30, image: { left: -37.91, top: -0.84, width: 205.543, height: 217.337 }, from: LIFT },
      { src: CYAN("right-character"), alt: RIGHT_ALT, top: 190, left: 809, width: 155, height: 198.489, z: 30, image: { left: -13.38, top: -6.69, width: 181.763, height: 209.64 }, from: LIFT },
    ],
  },
  {
    id: "purple",
    label: "Purple slide",
    background: "/HERO-SECTION/BACKGROUND/purple-background.png",
    brandText: {
      src: "/HERO-SECTION/ALL TEXT/purple-platform-text.png",
      alt: "প্ল্যাটফর্ম",
      width: 1054,
      height: 782,
      top: 223,
      renderWidth: 370,
      cropHeight: 175,
      imageOffsetY: 78,
    },
    layers: [
      { src: PURPLE("big-spring-top-left"), top: -190, left: -435, width: 1135, height: 521.385, z: 10, from: CORNER.topLeft },
      { src: PURPLE("big-spring-top-right"), top: -202, left: 395, width: 1290, height: 585.442, z: 10, from: { x: 310, y: -235, scale: 0.76 } },
      { src: PURPLE("big-spring-bottom-left"), top: 285, left: -305, width: 1080, height: 496.119, z: 10, from: { x: -310, y: 295, scale: 0.76 } },
      { src: PURPLE("big-spring-bottom-right"), top: 244, left: 605, width: 1030, height: 473.151, z: 10, from: { x: 510, y: 235, scale: 0.76 } },
      { src: PURPLE("small-spring-upper"), top: 133, left: 313, width: 175, height: 80.3897, z: 20, from: LIFT },
      { src: PURPLE("small-spring-lower"), top: 365, left: 722, width: 162, height: 74.4179, z: 20, from: LIFT },
      { src: PURPLE("left-character"), alt: LEFT_ALT, top: 196, left: 240, width: 155, height: 193.503, z: 30, image: { left: -2.96, top: -32.58, width: 161.911, height: 230.032 }, from: LIFT },
      { src: PURPLE("right-character"), alt: RIGHT_ALT, top: 190, left: 809, width: 155, height: 208.448, z: 30, image: { left: -38.48, top: -19.24, width: 253.345, height: 231.966 }, from: LIFT },
    ],
  },
];

/** Shared headline artwork that stays put across slides. */
export const heroTopCopy = {
  src: "/HERO-SECTION/ALL TEXT/hero-top-copy.png",
  alt: "আপনার ব্যবসার বিশ্বস্ত",
  top: 164,
  width: 348,
  naturalWidth: 1053,
  naturalHeight: 357,
};

export const heroSubtitle = [
  "মার্কেটিং সরবরাহকারী, প্রতিযোগিতামূলক মূল্য এবং নির্ভরযোগ্য",
  "সাপোর্টে গড়ে তুলুন আপনার গ্লোবাল ব্যবসা",
];

export const HERO_INTERVAL_MS = 5000;
export const HERO_TRANSITION_S = 1.3;