/* ============================================================
   Farbodfilms — data + design-system tokens
   Three dark-cinematic "directions" the user can toggle live.
   ============================================================ */

// ---- The three directions ----------------------------------
// Each shares the dark, film-first DNA but commits to a distinct
// type system, accent, texture and hero treatment.
const THEMES = {
  reel: {
    key: "reel",
    name: "Reel",
    blurb: "Bold Helvetica-style grotesque + a retro script accent. Your brand voice.",
    fonts: {
      display: "'Archivo', sans-serif",
      body: "'Archivo', sans-serif",
      mono: "'Space Mono', monospace",
    },
    vars: {
      "--bg": "#16100F",
      "--bg2": "#1e1614",
      "--panel": "#241a18",
      "--fg": "#F4EFE7",
      "--fg-dim": "#A89F95",
      "--fg-faint": "#6E665E",
      "--line": "#352a27",
      "--accent": "#E0392B",
      "--accent-fg": "#F4EFE7",
      "--radius": "3px",
      "--display-weight": "800",
      "--display-tracking": "-0.035em",
      "--display-transform": "none",
    },
    grain: false,
    hero: "minimal",
  },
  editorial: {
    key: "editorial",
    name: "Editorial",
    blurb: "Film-magazine — giant serif headlines, warm black, high contrast.",
    fonts: {
      display: "'Instrument Serif', serif",
      body: "'Archivo', sans-serif",
      mono: "'Space Mono', monospace",
    },
    vars: {
      "--bg": "oklch(0.155 0.006 40)",
      "--bg2": "oklch(0.195 0.008 40)",
      "--panel": "oklch(0.215 0.009 40)",
      "--fg": "oklch(0.96 0.005 70)",
      "--fg-dim": "oklch(0.75 0.01 60)",
      "--fg-faint": "oklch(0.55 0.012 55)",
      "--line": "oklch(0.31 0.01 45)",
      "--accent": "#E0392B",
      "--accent-fg": "#F4EFE7",
      "--radius": "2px",
      "--display-weight": "400",
      "--display-tracking": "-0.01em",
      "--display-transform": "none",
    },
    grain: false,
    hero: "editorial",
  },
  analog: {
    key: "analog",
    name: "Analog",
    blurb: "Warm + grainy — golden accent, film-strip motifs, tactile.",
    fonts: {
      display: "'Bricolage Grotesque', sans-serif",
      body: "'Archivo', sans-serif",
      mono: "'JetBrains Mono', monospace",
    },
    vars: {
      "--bg": "oklch(0.165 0.009 55)",
      "--bg2": "oklch(0.205 0.011 55)",
      "--panel": "oklch(0.225 0.012 55)",
      "--fg": "oklch(0.95 0.008 75)",
      "--fg-dim": "oklch(0.76 0.014 65)",
      "--fg-faint": "oklch(0.56 0.016 60)",
      "--line": "oklch(0.33 0.014 55)",
      "--accent": "#E0392B",
      "--accent-fg": "#F4EFE7",
      "--radius": "5px",
      "--display-weight": "700",
      "--display-tracking": "-0.025em",
      "--display-transform": "none",
    },
    grain: true,
    hero: "analog",
  },
};

// ---- Sample "footage" scenes (functional placeholders) ------
// Layered CSS gradients standing in for real footage. The user
// can send real stills/clips to swap in. Each is a believable
// photographic scene so the before/after grade reads clearly.
const SCENES = {
  goldenField: {
    label: "golden hour · field",
    css: "radial-gradient(120% 80% at 50% 115%, #2a1c0e 0%, rgba(42,28,14,0) 55%), radial-gradient(90% 70% at 72% 22%, #f3c977 0%, #e89a4e 26%, #b8703a 52%, #5c3a24 100%), linear-gradient(180deg, #cfe0e6 0%, #e9c98e 46%, #7a4f2e 100%)",
  },
  portrait: {
    label: "portrait · window light",
    css: "radial-gradient(70% 90% at 38% 38%, #e7b48f 0%, #c98a64 30%, #7e5440 55%, #3a2620 100%), linear-gradient(120deg, #241a18 0%, #3c2a26 100%)",
  },
  cityNight: {
    label: "city · night",
    css: "radial-gradient(60% 50% at 28% 78%, #f0a23c 0%, rgba(240,162,60,0) 45%), radial-gradient(80% 70% at 72% 30%, #5b6cc0 0%, #3a3f86 35%, #201f49 70%, #0e0e26 100%), linear-gradient(180deg, #141433 0%, #241a36 100%)",
  },
  coast: {
    label: "coastline · dusk",
    css: "radial-gradient(100% 60% at 50% 8%, #f5d7a0 0%, #e7a268 22%, #9b6aa0 48%, #3d4a7e 78%, #1d2747 100%), linear-gradient(180deg, rgba(0,0,0,0) 55%, #0d1430 100%)",
  },
  forest: {
    label: "forest · morning",
    css: "radial-gradient(80% 70% at 60% 20%, #cfe3a8 0%, #8fae5f 28%, #4f7140 56%, #233a26 100%), linear-gradient(180deg, #2c3a1f 0%, #16210f 100%)",
  },
  desertRoad: {
    label: "desert road · noon",
    css: "radial-gradient(70% 50% at 50% 95%, #6b5336 0%, rgba(107,83,54,0) 60%), radial-gradient(120% 80% at 50% 18%, #cfe3ee 0%, #e9cf9c 40%, #cf9a5e 72%, #8a5a32 100%)",
  },
};

// ---- The LUT looks (CSS-filter approximations) --------------
// "ungraded" = flat LOG-ish; each look = its graded signature.
const GRADES = {
  ungraded: {
    filter: "contrast(0.8) saturate(0.55) brightness(1.08)",
    overlay: "linear-gradient(0deg, rgba(120,130,140,0.16), rgba(120,130,140,0.16))",
  },
  daydream: {
    // soft, warm, lifted, pastel
    filter: "contrast(0.98) saturate(1.12) brightness(1.07) sepia(0.16) hue-rotate(-6deg)",
    overlay: "linear-gradient(0deg, rgba(255,210,170,0.12), rgba(190,210,255,0.10))",
  },
  afterlight: {
    // moody teal-orange, golden hour, crushed
    filter: "contrast(1.16) saturate(1.22) brightness(0.96) sepia(0.22) hue-rotate(-10deg)",
    overlay: "radial-gradient(110% 90% at 50% 20%, rgba(255,160,70,0.16), rgba(0,0,0,0) 55%), linear-gradient(0deg, rgba(20,60,80,0.28), rgba(20,60,80,0.05))",
  },
};

// ---- Products ----------------------------------------------
const COLLECTION = "SS26";

// Real before/after photo pairs. Each pair: { slog, graded, label }.
// When a product has `pairs`, the slider/scenes use real photos instead
// of the CSS-filter placeholders.
const PAIRS = {
  daydream: [
    { slog: "assets/daydream-portrait-slog.jpg", graded: "assets/daydream-portrait-graded.jpg", label: "dusk · portrait" },
    { slog: "assets/daydream-field-slog.jpg", graded: "assets/daydream-field-graded.jpg", label: "golden hour · field" },
    { slog: "assets/daydream-cafe-slog.jpg", graded: "assets/daydream-cafe-graded.jpg", label: "café · two cups" },
  ],
  afterlight: [
    { slog: "assets/afterlight-1-slog.jpg", graded: "assets/afterlight-1-graded.jpg", label: "night · tram" },
    { slog: "assets/afterlight-3-slog.jpg", graded: "assets/afterlight-3-graded.jpg", label: "blue hour · bench" },
    { slog: "assets/afterlight-2-slog.jpg", graded: "assets/afterlight-2-graded.jpg", label: "dusk · street" },
  ],
};

const PRODUCTS = [
  {
    id: "daydream",
    name: "Daydream",
    collection: "SS26",
    grade: "daydream",
    price: 14,
    tagline: "Soft, sunlit, half-remembered.",
    description:
      "A gentle pastel warmth that lifts the shadows and rounds off contrast — for golden afternoons, skin tones and anything you want to feel like a memory.",
    looks: ["Warm pastel", "Lifted shadows", "Soft contrast"],
    heroScene: "goldenField",
    scenes: ["goldenField", "portrait", "coast"],
    pairs: PAIRS.daydream,
    swatch: "linear-gradient(120deg, #f0c98a, #e79a86, #cdb6e0)",
  },
  {
    id: "afterlight",
    name: "Afterlight",
    collection: "SS26",
    grade: "afterlight",
    price: 14,
    tagline: "The hour after the sun goes down.",
    description:
      "Moody teal-and-orange with rich, controlled contrast and a touch of crushed shadow. Built for blue hour, city nights and cinematic street work.",
    looks: ["Teal & orange", "Deep contrast", "Cinematic"],
    heroScene: "cityNight",
    scenes: ["cityNight", "coast", "desertRoad"],
    pairs: PAIRS.afterlight,
    swatch: "linear-gradient(120deg, #e89a4e, #2b6f7e, #18243f)",
  },
  {
    id: "ss26-bundle",
    name: "SS26 Collection",
    collection: "SS26",
    grade: "afterlight",
    price: 24,
    bundle: true,
    includes: ["daydream", "afterlight"],
    tagline: "Both SS26 looks. Every future drop in the season, free.",
    description:
      "The complete SS26 set — Daydream and Afterlight together at a saving, plus every LUT we add to the SS26 season delivered to you free as it drops.",
    looks: ["2 LUTs", "Best value", "Season updates"],
    heroScene: "coast",
    scenes: ["goldenField", "cityNight", "coast"],
    pairs: [PAIRS.daydream[0], PAIRS.afterlight[0]],
    swatch: "linear-gradient(120deg, #f0c98a, #e79a86, #2b6f7e, #18243f)",
  },
];

// upcoming season teaser (reflects the every-two-seasons cadence)
const NEXT_DROP = { collection: "FW26", eta: "Autumn 2026" };

Object.assign(window, {
  THEMES, SCENES, GRADES, PRODUCTS, PAIRS, COLLECTION, NEXT_DROP,
});