import {
  el,
  hex,
  vfrac,
  type Activity,
  type Storyboard,
  type TravelTimeFilter,
  type VideoConfig,
} from './script.js';

type FormFactor = 'desktop' | 'mobile';

/**
 * The list of demo videos to render, in order.
 *
 * Authoring rules (these are what earlier cuts kept getting wrong):
 *
 *   1. SAID ≠ SHOWN. The spoken `text` is never rendered on screen, and it
 *      must never describe what the viewer can already see ("now we zoom
 *      in…"). The voice carries intent and benefit; the product carries
 *      proof. The optional `caption` is a ≤6-word hook chip that says
 *      something DIFFERENT from the narration.
 *   2. TIGHT TIMELINES. Cues are 1–2 short sentences (~0.45s/word with the
 *      current voices). Homepage demo ≈45s, ads ≈15–20s. Tails are short
 *      breaths, not dwells.
 *   3. THE PRODUCT IS THE HERO. Every cue has the dashboard doing real work
 *      (typing, submitting, dragging, zooming, tapping postcodes, scrolling
 *      real data). On 9:16 cuts the bottom sheet gets dragged out of the way
 *      whenever the map is the story.
 *   4. Filter names MUST match live /api/features exactly (e.g.
 *      "Serious crime (avg/yr)", "Distance to nearest amenity (Waitrose)
 *      (km)") — wrong names silently no-op and the map never changes.
 *      preflight.ts validates every stubbed name against the live API.
 *
 * `name` doubles as the on-disk slug. The pipeline writes per-storyboard
 * artefacts to `output/<name>/` and publishes `<name>.mp4` / `<name>.jpg`
 * to the homepage. The default storyboard is named `recording` so the
 * existing homepage `/video/recording.mp4` keeps working unchanged.
 *
 * Audio is generated first (one batched Qwen call per storyboard, using
 * its own voice config), so each cue's actual duration is known before
 * recording. The runner sizes each cue's wall-time to the measured audio
 * length, padding short `during` blocks with a trailing wait.
 */

// School features as served by live /api/features. The data pipeline moved
// to modelled catchment counts ("Good+ primary school catchments"), which the
// local stack already serves; prod still serves the older "…within 2km" names
// until that deploy lands. Preflight fails loudly if these drift from
// whichever API render.sh is pointed at — flip them back if you render against
// prod before the catchment model deploys there.
const SCHOOL_GOOD_PRIMARY = 'Good+ primary school catchments';
const SCHOOL_OUTSTANDING_PRIMARY = 'Outstanding primary school catchments';

// Cold-open lean-in on the AI card. Desktop only; kept moderate so the
// map remains visible on the right (zoomTo clamps the pan so the app
// always covers the full frame — no backdrop voids).
const AI_ZOOM_SCALE_DESKTOP = 1.45;

const TT_CARD_SELECTOR = '[data-filter-name="tt_0"]';
const TT_SLIDER_MAX = 120;
const TT_DRAG_FROM_MIN = 35;
// 25 (not 20): tight enough that the drag visibly prunes the map, loose
// enough that street-level central London keeps plenty of matching
// postcodes — at 20 the brief emptied the centre and the postcode tap had
// nothing fresh to land on (the drawer then opened in its "filtered stats
// are empty" fallback).
const TT_DRAG_TO_MIN = 25;

// Where on the map the demo zoom-in lands. Desktop targets a fixed pixel
// in the 1920x1080 viewport; mobile targets the upper-third of the visible
// map area (the bottom of the 540x960 viewport is occupied by the
// MobileBottomSheet until it gets dragged away).
const MAP_FOCUS_DESKTOP = vfrac(1140 / 1920, 605 / 1080);
const MAP_FOCUS_MOBILE = vfrac(0.5, 0.34);
const HOMEPAGE_RIGHT_PANE_SELECTOR =
  '[data-tutorial="right-pane"], .fixed.inset-0.z-50:has(button[aria-label="Close drawer"])';

const MOBILE_MAP_ZOOM_STEPS = 9;
const MOBILE_MAP_ZOOM_MS = 2200;
// 11 wheel-steps ≈ +3.1 zoom: deep enough that hexagons become postcode
// polygons, shallow enough that several matching blocks stay in frame and
// the deck.gl layer count doesn't thrash the main thread (14+ steps dove
// into sparse street tiles and stalled every page.evaluate for seconds).
const DESKTOP_MAP_ZOOM_STEPS = 11;
const DESKTOP_MAP_ZOOM_MS = 2800;

// Bottom-sheet height fractions for dragSheet. The MobileBottomSheet clamps
// to its own minimum (~132px at 960h ≈ 0.14), so aiming slightly below that
// pins it to the grab-handle sliver and hands the frame to the map.
const SHEET_DOWN = 0.12;
const SHEET_UP = 0.5;

type RecordingLocale = 'en' | 'de' | 'zh' | 'hi';

interface RecordingLocalization {
  name: string;
  appLanguage: string;
  ttsLanguage: string;
  voiceInstruct: string;
  voiceReferenceText: string;
  promptText: string;
  travelTimeLabel: string;
  exportButtonTitle: string;
  /** Text of the ExportMenu modal's full-width confirm button (header.exportLabel). */
  exportConfirmLabel: string;
  /** Localized aria-label of the mobile drawer's close button (mobileDrawer.closeDrawer). */
  closeDrawerLabel: string;
  colourMapTitle: string;
  brand: {
    name: string;
    tagline: string;
    url: string;
  };
  cues: {
    hook: string;
    brief: string;
    search: string;
    commute: string;
    streets: string;
    open: string;
    shortlist: string;
    outro: string;
  };
}

// The outro card strips any leading "https://" via dom.ts so the CTA renders
// as a bare domain. Keep this constant in URL form here since /api/* calls
// and other internal links still expect a scheme.
const BRAND_URL = 'https://perfect-postcode.co.uk';

const RECORDING_LOCALIZATIONS: Record<RecordingLocale, RecordingLocalization> = {
  en: {
    name: 'recording',
    appLanguage: 'en',
    ttsLanguage: 'English',
    voiceInstruct:
      'Calm and cheerful young British male narrator from the North of England with a ' +
      'strong Manchester accent.',
    voiceReferenceText:
      "Welcome to the demonstration. This is the narrator voice you'll hear throughout the video.",
    promptText:
      'First home under £600k, 35 min to central London, good schools, low crime, quiet street, fast broadband',
    travelTimeLabel: 'Central London',
    exportButtonTitle: 'Export to Excel',
    exportConfirmLabel: 'Export',
    closeDrawerLabel: 'Close drawer',
    colourMapTitle: 'Colour map',
    brand: {
      name: 'Perfect Postcode',
      tagline: 'Find the hidden-gem postcode.',
      url: BRAND_URL,
    },
    cues: {
      hook: "A postcode's reputation is priced in. Its value isn't.",
      brief:
        'So start with the brief. Budget, commute, schools, even how quiet the street is.',
      search: 'One brief, and England narrows to the postcodes worth your money.',
      commute: 'Tighten the commute, and the keepers narrow further in seconds.',
      streets: 'Down at street level, the strongest streets start to stand out.',
      open:
        'Open one, and it shows its work. Sold prices, schools, crime, noise, broadband.',
      shortlist:
        'Keep the best-value few, export them, and scout where it actually counts.',
      outro: 'Stop paying for the name. Find the value.',
    },
  },
  de: {
    name: 'recording-de',
    appLanguage: 'de',
    ttsLanguage: 'German',
    voiceInstruct:
      'Calm and cheerful German male narrator with clear standard German pronunciation ' +
      'and a friendly, practical delivery.',
    voiceReferenceText:
      'Willkommen zur Demonstration. Diese Sprecherstimme hörst du im gesamten Video.',
    promptText:
      'Wohnung unter £600k, 35 Min. ins Zentrum von London, gute Schulen, niedrige Kriminalität, ruhige Straßen',
    travelTimeLabel: 'Zentrum von London',
    exportButtonTitle: 'Nach Excel exportieren',
    exportConfirmLabel: 'Exportieren',
    closeDrawerLabel: 'Drawer schließen',
    colourMapTitle: 'Karte einfärben',
    brand: {
      name: 'Perfect Postcode',
      tagline: 'Finde die unterschätzte Postleitzahl.',
      url: BRAND_URL,
    },
    cues: {
      hook: 'Der Ruf einer Gegend steckt im Preis. Ihr wahrer Wert nicht.',
      brief:
        'Also sag, was du suchst. Budget, Arbeitsweg, Schulen, sogar wie ruhig die Straße ist.',
      search:
        'Eine Vorgabe, und England schrumpft auf die Postleitzahlen, die dein Geld wert sind.',
      commute: 'Verschärf den Arbeitsweg, und in Sekunden bleiben nur die besten übrig.',
      streets: 'Auf Straßenebene stechen die besten Ecken von selbst hervor.',
      open:
        'Öffne eine, und sie zeigt die Belege. Verkaufspreise, Schulen, Kriminalität, Lärm, Internet.',
      shortlist:
        'Behalte die paar mit dem besten Preis-Leistungs-Verhältnis, exportier sie und schau sie dir vor Ort an.',
      outro: 'Zahl nicht für den Namen. Finde den Wert.',
    },
  },
  zh: {
    name: 'recording-zh',
    appLanguage: 'zh',
    ttsLanguage: 'Chinese',
    voiceInstruct:
      'Calm and cheerful Mandarin Chinese male narrator with clear standard Mandarin ' +
      'pronunciation and a friendly, practical delivery.',
    voiceReferenceText: '欢迎观看演示。整段视频都会使用这位旁白的声音。',
    promptText: '60万英镑以内的公寓，35分钟到伦敦市中心，学校好，犯罪率低，街道安静',
    travelTimeLabel: '伦敦市中心',
    exportButtonTitle: '导出为 Excel',
    exportConfirmLabel: '导出',
    closeDrawerLabel: '关闭侧栏',
    colourMapTitle: '地图着色',
    brand: {
      name: 'Perfect Postcode',
      tagline: '发现那个被低估的邮区。',
      url: BRAND_URL,
    },
    cues: {
      hook: '一个邮区的名气，早就算进了房价里。它真正的价值，却没有。',
      brief: '所以，把你的需求告诉它。预算、通勤、学校，甚至这条街够不够安静。',
      search: '一份需求，整个英格兰就缩小到那些真正值这个价的邮区。',
      commute: '把通勤再收紧一点，几秒钟，留下的好选择又少了一批。',
      streets: '放大到街道层面，好街区自己浮现出来。',
      open: '点开一个，它把依据都摆给你看。成交价、学校、治安、噪音、宽带。',
      shortlist: '留下最划算的那几个，导出来，去真正值得的地方实地看房。',
      outro: '别再为名气买单。找到真正的价值。',
    },
  },
  hi: {
    name: 'recording-hi',
    appLanguage: 'hi',
    ttsLanguage: 'English',
    voiceInstruct:
      'Calm and cheerful Indian male narrator speaking English with a strong Indian accent ' +
      'and a friendly, practical delivery.',
    voiceReferenceText:
      "Welcome to the demonstration. This is the narrator voice you'll hear throughout the video.",
    promptText: 'Flat under £600k, 35 min to central London, good schools, low crime, quiet streets',
    travelTimeLabel: 'Central London',
    exportButtonTitle: 'Excel में export करें',
    exportConfirmLabel: 'Export',
    closeDrawerLabel: 'ड्रॉअर बंद करें',
    colourMapTitle: 'मानचित्र रंगें',
    brand: {
      name: 'Perfect Postcode',
      tagline: 'Find the hidden-gem postcode.',
      url: BRAND_URL,
    },
    cues: {
      hook: "A postcode's reputation is priced in. Its value isn't.",
      brief:
        'So start with the brief. Budget, commute, schools, even how quiet the street is.',
      search: 'One brief, and England narrows to the postcodes worth your money.',
      commute: 'Tighten the commute, and the keepers narrow further in seconds.',
      streets: 'Down at street level, the strongest streets start to stand out.',
      open:
        'Open one, and it shows its work. Sold prices, schools, crime, noise, broadband.',
      shortlist:
        'Keep the best-value few, export them, and scout where it actually counts.',
      outro: 'Stop paying for the name. Find the value.',
    },
  },
};

/**
 * Homepage demo cues. ~45s total: hook → type brief → search → commute
 * slider + colour layer → street-level zoom → open a postcode (real data
 * pane) → export → outro. No on-screen captions: the homepage player runs
 * with sound, the narration carries the story, and the product stays
 * unobstructed.
 */
function createCues(locale: RecordingLocale, formFactor: FormFactor): Storyboard['cues'] {
  const copy = RECORDING_LOCALIZATIONS[locale];
  const isMobile = formFactor === 'mobile';
  const mapFocus = isMobile ? MAP_FOCUS_MOBILE : MAP_FOCUS_DESKTOP;
  const mapZoomSteps = isMobile ? MOBILE_MAP_ZOOM_STEPS : DESKTOP_MAP_ZOOM_STEPS;
  const mapZoomMs = isMobile ? MOBILE_MAP_ZOOM_MS : DESKTOP_MAP_ZOOM_MS;
  const colourTravelTime = el(`${TT_CARD_SELECTOR} button[title="${copy.colourMapTitle}"]`);
  const definingCharacteristicsSelector =
    '[data-tutorial="right-pane"] button:has-text("Defining characteristics"), ' +
    '.fixed.inset-0.z-50:has(button[aria-label="Close drawer"]) button:has-text("Defining characteristics")';

  return [
    {
      // Hook over the untouched dashboard; desktop leans into the filter
      // panel so the brief lands big in the next beat.
      text: copy.cues.hook,
      gapBeforeMs: 0,
      during: isMobile
        ? [{ kind: 'wait', durationMs: 500 }]
        : [
            {
              kind: 'zoomTo',
              target: el('[data-tutorial="ai-filters"]'),
              scale: AI_ZOOM_SCALE_DESKTOP,
              durationMs: 900,
            },
          ],
      tail: [{ kind: 'wait', durationMs: 150 }],
    },
    {
      text: copy.cues.brief,
      gapBeforeMs: 200,
      during: [
        {
          kind: 'type',
          selector: '[data-tutorial="ai-filters"] textarea',
          text: copy.promptText,
          durationMs: 4200,
        },
      ],
      tail: [{ kind: 'wait', durationMs: 120 }],
    },
    {
      text: copy.cues.search,
      gapBeforeMs: 250,
      during: [
        {
          kind: 'submitForm',
          formSelector: '[data-tutorial="ai-filters"] form',
          durationMs: 2000,
          waitForMapSettled: true,
          timeoutMs: 15000,
        },
        ...(isMobile ? [] : [{ kind: 'zoomReset', durationMs: 800 } as Activity]),
      ],
      tail: [{ kind: 'wait', durationMs: 250 }],
    },
    {
      text: copy.cues.commute,
      gapBeforeMs: 300,
      during: [
        {
          kind: 'dragSlider',
          thumbSelector: `${TT_CARD_SELECTOR} [role="slider"] >> nth=1`,
          trackSelector: `${TT_CARD_SELECTOR} [data-orientation="horizontal"] >> nth=0`,
          toFraction: TT_DRAG_TO_MIN / TT_SLIDER_MAX,
          durationMs: 1600,
        },
        { kind: 'click', target: colourTravelTime, durationMs: 700 },
      ],
      tail: [{ kind: 'wait', durationMs: 300 }],
    },
    {
      text: copy.cues.streets,
      gapBeforeMs: 300,
      during: [
        ...(isMobile
          ? [{ kind: 'dragSheet', toHeightFrac: SHEET_DOWN, durationMs: 800 } as Activity]
          : []),
        { kind: 'cursorScale', scale: isMobile ? 1 : 1.4, durationMs: 200 },
        {
          // Zoom AROUND the strongest visible match (hex()) so the
          // destination area is guaranteed to contain matching postcodes —
          // a fixed pixel target can dive into a part of town the filters
          // just emptied. Settled so the next cue's hex() click projects
          // against the postcode response for the FINAL viewport.
          kind: 'mapZoom',
          target: hex(),
          steps: mapZoomSteps,
          durationMs: mapZoomMs,
          center: true,
          waitForMapSettled: true,
          timeoutMs: 10000,
        },
      ],
      tail: [{ kind: 'wait', durationMs: 200 }],
    },
    {
      text: copy.cues.open,
      gapBeforeMs: 250,
      during: [
        {
          kind: 'click',
          target: hex(),
          durationMs: 1100,
          waitForSelectionReady: true,
          timeoutMs: 8000,
        },
        ...(isMobile
          ? []
          : [
              {
                kind: 'zoomTo',
                target: el(HOMEPAGE_RIGHT_PANE_SELECTOR),
                scale: 1.3,
                durationMs: 850,
              } as Activity,
            ]),
        {
          kind: 'scrollPane',
          selector: HOMEPAGE_RIGHT_PANE_SELECTOR,
          top: isMobile ? 430 : 380,
          durationMs: 850,
        },
      ],
      tail: [
        {
          kind: 'clickIfVisible',
          target: el(definingCharacteristicsSelector),
          durationMs: 600,
          timeoutMs: 700,
        },
        {
          kind: 'scrollPane',
          selector: HOMEPAGE_RIGHT_PANE_SELECTOR,
          top: isMobile ? 760 : 900,
          durationMs: 850,
        },
        { kind: 'wait', durationMs: 350 },
      ],
    },
    {
      text: copy.cues.shortlist,
      gapBeforeMs: 300,
      during: isMobile
        ? [
            {
              // The drawer's close-button aria-label is localized
              // (mobileDrawer.closeDrawer), so use the per-locale string.
              // clickIfVisible keeps a label mismatch from crashing the
              // take — worst case the drawer lingers behind the zoom-out.
              kind: 'clickIfVisible',
              target: el(`button[aria-label="${copy.closeDrawerLabel}"]`),
              durationMs: 650,
              timeoutMs: 1500,
            },
            {
              kind: 'mapZoom',
              target: mapFocus,
              steps: 5,
              durationMs: 1300,
              direction: 'out',
            },
          ]
        : [
            { kind: 'zoomReset', durationMs: 800 },
            {
              // IfVisible: the export button only renders on ≥1024px-wide
              // dashboards with a licensed user — a missing button must not
              // crash the take, just skip the ripple.
              kind: 'clickIfVisible',
              target: el(`button[title="${copy.exportButtonTitle}"]`),
              durationMs: 800,
              timeoutMs: 1500,
            },
            { kind: 'wait', durationMs: 400 },
            {
              // Complete the flow: the header button opens the ExportMenu
              // modal; confirm it so the demo shows a finished export
              // rather than an abandoned dialog.
              kind: 'clickIfVisible',
              target: el(`button[class*="w-full"]:has-text("${copy.exportConfirmLabel}")`),
              durationMs: 700,
              timeoutMs: 1500,
            },
          ],
      tail: [
        { kind: 'wait', durationMs: 500 },
        // Insurance: if the modal lingers (slow export resolve), dismiss it
        // before the outro card comes up.
        { kind: 'pressKey', key: 'Escape', durationMs: 150 },
      ],
    },
    {
      text: copy.cues.outro,
      gapBeforeMs: 350,
      during: [
        {
          kind: 'showOutro',
          brand: copy.brand.name,
          tagline: copy.brand.tagline,
          url: copy.brand.url,
          // Burn the spoken closer for sound-off / accessibility.
          subtitle: copy.cues.outro,
          durationMs: 0,
        },
      ],
      tail: [{ kind: 'wait', durationMs: 1700 }],
    },
  ];
}

function buildPre(): Storyboard['pre'] {
  return [
    { kind: 'clearVignette', durationMs: 0 },
    { kind: 'wait', durationMs: 120 },
  ];
}

function buildVideoConfig(formFactor: FormFactor): VideoConfig {
  if (formFactor === 'mobile') {
    return {
      aspect: '9x16',
      // 540x960 CSS viewport (narrower than Tailwind's 768px `md:`
      // breakpoint) so the frontend picks mobile typography/spacing.
      // DPR 2 makes the browser render internally at 1080x1920 device
      // pixels for sharp antialiasing; the screencast still writes the
      // mp4 at 540x960. Result: a sharp phone-sized 9:16 cut that
      // genuinely looks mobile-styled, not desktop in portrait.
      viewport: { width: 540, height: 960 },
      captureScale: 2,
      cursorStyle: 'touch',
      webmBitrate: '4M',
      outputFps: 50,
      minDurationS: 10,
      maxDurationS: 75,
      // Street-level zoom with the sheet collapsed — the map is the frame.
      posterTimeS: 25,
    };
  }
  return {
    aspect: '16x9',
    // Native 1920x1080. NOTE: don't be tempted by a narrower CSS viewport —
    // the dashboard header switches to tablet sidebar nav between 768 and
    // 1023px and the Export button (cue 7) disappears.
    captureScale: 1,
    cursorStyle: 'arrow',
    webmBitrate: '8M',
    outputFps: 50,
    minDurationS: 10,
    maxDurationS: 75,
    // Right-pane inspection: London map, filters applied, data pane
    // FULLY populated (Street View + price history). 31s caught the pane
    // mid-load on prod (empty white + spinner); 35s lands a few seconds into
    // the "open" cue once the evidence has rendered — the strongest preview.
    posterTimeS: 35,
  };
}

function storyboardName(copy: RecordingLocalization, formFactor: FormFactor): string {
  return formFactor === 'mobile' ? `${copy.name}-mobile` : copy.name;
}

function createRecordingStoryboard(
  locale: RecordingLocale,
  formFactor: FormFactor
): Storyboard {
  const copy = RECORDING_LOCALIZATIONS[locale];
  // Both form factors open at zoom 12 so the cold-open frame lands on a
  // densely-populated inner-London slice rather than the low-density outer
  // edges. Desktop was 11.5, but the opening lean-in panned the visible map
  // toward the sparse NW suburbs (Wembley/Ealing) — a soft first frame for
  // the hero. 12 keeps central London (rich default-density colouring) in
  // shot from t=0.
  const initialZoom = 12;

  // On mobile the MobileBottomSheet covers the bottom ~44% of the
  // viewport, so the map's geographic centre sits roughly at the seam
  // between the visible map and the sheet. Shift the centre lat ~0.04°
  // south so central London (51.515) lands in the upper half of the
  // visible map area instead of getting hidden under the sheet. The
  // desktop layout already has the map dominate the viewport, so it
  // keeps the original centre. -0.13 lon centres on Holborn/Bloomsbury,
  // between the West End and the City, so the Bank-station travel filter
  // and the deep zoom-in both land on richly matched inner-London blocks.
  const mapLat = formFactor === 'mobile' ? 51.475 : 51.515;
  const mapLon = -0.13;

  return {
    name: storyboardName(copy, formFactor),
    locale: formFactor === 'mobile' ? `${locale}-mobile` : locale,
    video: buildVideoConfig(formFactor),
    voice: {
      instruct: copy.voiceInstruct,
      language: copy.ttsLanguage,
      referenceText: copy.voiceReferenceText,
      temperature: 0.6,
      topP: 0.9,
      seed: 42,
    },
    content: {
      promptText: copy.promptText,
      appLanguage: copy.appLanguage,
      aiZoomScale: AI_ZOOM_SCALE_DESKTOP,
      initialMapView: { lat: mapLat, lon: mapLon, zoom: initialZoom },
      // Filters returned by the AI stub. Keys MUST match real feature names
      // from /api/features (preflight validates against the live server).
      stubbedFilters: {
        'Property type': ['Flats/Maisonettes', 'Semi-Detached'],
        // £600k (not £315k like the old Manchester cut): central London is
        // pricier, and at £315k the price+crime combo emptied the inner
        // boroughs. At £600k ~51k postcodes pass in-frame, dropping to ~10k
        // once the commute is dragged to 25 min — a visible prune that still
        // leaves the zoom something to land on (verified via /api/filter-counts).
        'Estimated current price': [0, 600000],
        // Loose enough to keep the central-London map richly populated — a
        // cap of 20 emptied the city centre and left the zoom with nothing
        // to land on.
        'Serious crime (avg/yr)': [0, 40],
        [SCHOOL_GOOD_PRIMARY]: [1, 10],
        'Noise (dB)': [0, 65],
        // ≥30 Mbps, not ≥100: FTTP coverage gaps make a 100 floor empty
        // whole suburbs, and the narration only claims "fast broadband".
        'Max available download speed (Mbps)': [30, 1000],
      },
      // Travel-time filters returned by the AI stub. Slug matches the real
      // /api/travel-destinations?mode=transit response. Bank tube station is
      // the central-London transit anchor served by the local stack (the
      // older city-level "manchester" slug only exists on prod's fuller data).
      stubbedTravelTimeFilters: [
        {
          mode: 'transit',
          slug: 'bank-tube-station',
          label: copy.travelTimeLabel,
          max: TT_DRAG_FROM_MIN,
        },
      ],
      travelTimeCardSelector: TT_CARD_SELECTOR,
      travelTimeSliderMax: TT_SLIDER_MAX,
      travelTimeDragFromMin: TT_DRAG_FROM_MIN,
      travelTimeDragToMin: TT_DRAG_TO_MIN,
      brand: copy.brand,
      // A tight 7-filter inner-London search; a plausible total (not the
      // shared stub default) so the on-screen count reads as real.
      matchCount: 1843,
    },
    pre: buildPre(),
    cues: createCues(locale, formFactor),
  };
}

const RECORDING_LOCALES: readonly RecordingLocale[] = ['en', 'de', 'zh', 'hi'];
const RECORDING_FORM_FACTORS: readonly FormFactor[] = ['desktop', 'mobile'];

const ENGLISH_HOMEPAGE_STORYBOARDS: Storyboard[] = RECORDING_FORM_FACTORS.map((formFactor) =>
  createRecordingStoryboard('en', formFactor)
);

const DEMO_STORYBOARDS: Storyboard[] = RECORDING_LOCALES.flatMap((locale) =>
  RECORDING_FORM_FACTORS.map((formFactor) => createRecordingStoryboard(locale, formFactor))
);

// ---------------------------------------------------------------------------
// Social ads.
//
// Every ad is one hook + one real product interaction + one closer, in
// 15–20 seconds of 9:16. Narration starts on the first frame and never
// reads what's on screen; the only on-screen text is a short hook chip on
// the opening cue. The bottom sheet is dragged away whenever the map is
// the story, and a fingertip-style cursor sells the gestures as touch.
// ---------------------------------------------------------------------------

type CityKey = 'manchester' | 'birmingham' | 'bristol' | 'london' | 'leeds';

interface DemoAdCueConfig {
  text: string;
  caption?: string;
  gapBeforeMs?: number;
  /** Activities that fit inside the cue's audio window. */
  during?: Activity[];
  /** Activities that run after the cue's audio ends, before the next cue. */
  tail?: Activity[];
}

interface DemoAdStoryboardConfig {
  name: string;
  city: CityKey;
  /**
   * The text typed into the AI box. The AI stub returns `filters` /
   * `travelTimeFilters` regardless of the typed text, so the prompt value
   * here is purely for visual veracity (it must match what the filters
   * imply, or sharp-eyed viewers cry fake).
   */
  promptText?: string;
  /** Filters returned by the AI stub after a type+submit. */
  filters?: Record<string, [number, number] | string[]>;
  /** Filters already applied at load (via URL) for cold-open-on-results ads. */
  initialFilters?: Record<string, [number, number] | string[]>;
  travelTimeFilters?: TravelTimeFilter[];
  posterTimeS?: number;
  initialZoom?: number;
  /** Plausible per-city "{{count}} properties match" total for the AI summary. */
  matchCount?: number;
  /** Activities to run before the cue loop starts (silent — keep short). */
  prePrime?: Activity[];
  /** Spoken line during the outro card. Must NOT repeat the card's text. */
  outroLine: string;
  cues: DemoAdCueConfig[];
}

const AD_VIDEO: VideoConfig = {
  aspect: '9x16',
  viewport: { width: 540, height: 960 },
  captureScale: 2,
  cursorStyle: 'touch',
  webmBitrate: '4M',
  outputFps: 50,
  minDurationS: 8,
  // Generous upper bound — ads with a deep mapZoom drift a second or two
  // past their declared budgets while tiles load.
  maxDurationS: 35,
  posterTimeS: 5,
};

const AD_BRAND = {
  name: 'Perfect Postcode',
  tagline: 'Find the hidden-gem postcode.',
  url: BRAND_URL,
};

/**
 * Ad voice persona. The SAME config is used across every ad so the voice
 * timbre stays consistent across the set (render.sh additionally reuses the
 * first minted reference WAV for all of them).
 */
const AD_VOICE = {
  instruct:
    'British male creator-style narrator. Warm, confident, conversational, with a ' +
    'slightly quick pace, like telling a friend about a great find. No salesy hype, ' +
    'no exaggeration. Short sentences, natural delivery.',
  language: 'English',
  referenceText:
    'This is a short social video for people choosing where to live in England.',
  temperature: 0.58,
  topP: 0.9,
  seed: 87,
};

/**
 * Initial map centres for each ad. Centres are shifted south of the true
 * city centre so the interesting area sits in the upper (visible) half of
 * the 9:16 frame while the bottom sheet is still up; once the sheet is
 * dragged away the framing reads as comfortably centred.
 */
const CITY_VIEWS: Record<CityKey, { lat: number; lon: number; zoom: number }> = {
  manchester: { lat: 53.3495, lon: -2.2451, zoom: 11.2 },
  birmingham: { lat: 52.3562, lon: -1.8904, zoom: 11.0 },
  bristol: { lat: 51.3245, lon: -2.5879, zoom: 11.3 },
  london: { lat: 51.4272, lon: -0.1276, zoom: 10.4 },
  leeds: { lat: 53.7308, lon: -1.5491, zoom: 11.0 },
};

// -- small helpers used by the per-ad cue lists -------------------------------

const AI_TEXTAREA = '[data-tutorial="ai-filters"] textarea';
const AI_FORM = '[data-tutorial="ai-filters"] form';

const typeAct = (text: string, durationMs = 2600): Activity => ({
  kind: 'type',
  selector: AI_TEXTAREA,
  text,
  durationMs,
});
const submitSettled = (durationMs = 1400, timeoutMs = 10000): Activity => ({
  kind: 'submitForm',
  formSelector: AI_FORM,
  durationMs,
  waitForMapSettled: true,
  timeoutMs,
});
const ttDragAct = (toMin: number, durationMs = 1700): Activity => ({
  kind: 'dragSlider',
  thumbSelector: `${TT_CARD_SELECTOR} [role="slider"] >> nth=1`,
  trackSelector: `${TT_CARD_SELECTOR} [data-orientation="horizontal"] >> nth=0`,
  toFraction: toMin / TT_SLIDER_MAX,
  durationMs,
});
const wait = (durationMs: number): Activity => ({ kind: 'wait', durationMs });
const sheetDown = (durationMs = 800): Activity => ({
  kind: 'dragSheet',
  toHeightFrac: SHEET_DOWN,
  durationMs,
});
const sheetUp = (durationMs = 700): Activity => ({
  kind: 'dragSheet',
  toHeightFrac: SHEET_UP,
  durationMs,
});
const touchShow = (): Activity => ({ kind: 'cursorScale', scale: 1, durationMs: 150 });
const touchHide = (): Activity => ({ kind: 'cursorScale', scale: 0, durationMs: 150 });
const mapZoomIn = (durationMs = 1500, steps = 5): Activity => ({
  kind: 'mapZoom',
  target: vfrac(0.5, 0.34),
  steps,
  durationMs,
});
/**
 * Tap the centre of the highest-priority visible postcode polygon from the
 * latest map response (robust to zoom drift — a fixed pixel target at deep
 * zoom can land on a road or river and the drawer never opens).
 */
const tapHex = (durationMs = 1000): Activity => ({
  kind: 'click',
  target: hex(),
  durationMs,
  waitForSelectionReady: true,
  timeoutMs: 8000,
});

// Right-pane / drawer used after a postcode tap.
const RIGHT_PANE_SELECTOR = '[data-tutorial="right-pane"]';
const scrollDrawer = (top: number, durationMs = 800): Activity => ({
  kind: 'scrollPane',
  selector: RIGHT_PANE_SELECTOR,
  top,
  durationMs,
});

/** Default silent pre: vignette + hidden cursor; narration starts at t≈0. */
const AD_PRE: Activity[] = [
  { kind: 'clearVignette', durationMs: 0 },
  { kind: 'cursorScale', scale: 0, durationMs: 0 },
  { kind: 'wait', durationMs: 80 },
];

function createDemoAdStoryboard(ad: DemoAdStoryboardConfig): Storyboard {
  const promptText =
    ad.promptText ??
    'Flat under £350k, good commute, good schools, lower crime, quieter streets';

  const initialMapView = {
    ...CITY_VIEWS[ad.city],
    zoom: ad.initialZoom ?? CITY_VIEWS[ad.city].zoom,
  };

  return {
    name: ad.name,
    locale: 'en',
    video: { ...AD_VIDEO, posterTimeS: ad.posterTimeS ?? AD_VIDEO.posterTimeS },
    voice: AD_VOICE,
    content: {
      promptText,
      appLanguage: 'en',
      aiZoomScale: 1,
      initialMapView,
      initialFilters: ad.initialFilters,
      stubbedFilters: ad.filters ?? {},
      stubbedTravelTimeFilters: ad.travelTimeFilters ?? [],
      travelTimeCardSelector: TT_CARD_SELECTOR,
      travelTimeSliderMax: TT_SLIDER_MAX,
      travelTimeDragFromMin: TT_DRAG_FROM_MIN,
      travelTimeDragToMin: TT_DRAG_TO_MIN,
      brand: AD_BRAND,
      matchCount: ad.matchCount,
    },
    pre: ad.prePrime ?? AD_PRE,
    cues: [
      ...ad.cues.map((cue, index) => ({
        text: cue.text,
        caption: cue.caption,
        gapBeforeMs: cue.gapBeforeMs ?? (index === 0 ? 0 : 250),
        during: cue.during,
        tail: cue.tail ?? [wait(300)],
      })),
      {
        text: ad.outroLine,
        gapBeforeMs: 250,
        during: [
          {
            kind: 'showOutro',
            brand: AD_BRAND.name,
            tagline: AD_BRAND.tagline,
            url: AD_BRAND.url,
            // Burn the spoken closer onto the card so muted social viewers
            // (the ads' real channel) still read the CTA.
            subtitle: ad.outroLine,
            durationMs: 0,
          },
        ],
        // Hold the brand card long enough to read the URL + closer with sound off.
        tail: [wait(2200)],
      },
    ],
  };
}

// ---------------------------------------------------------------------------
// The ad set. 8 concepts, each: hook chip + one product interaction.
// All filter names verified against live /api/features.
// ---------------------------------------------------------------------------

const AD_CONFIGS: DemoAdStoryboardConfig[] = [
  // -------------------------------------------------------------------
  // 01 — The hero feature: the whole brief in one sentence.
  // Cold open ON the typing; map reveal as the payoff.
  // -------------------------------------------------------------------
  {
    name: 'ad-01-say-it',
    matchCount: 2410,
    city: 'london',
    promptText: 'Flat under £600k, 35 min to central London, low crime, quiet street',
    filters: {
      'Property type': ['Flats/Maisonettes'],
      'Estimated current price': [0, 600000],
      'Serious crime (avg/yr)': [0, 35],
      'Noise (dB)': [0, 60],
    },
    travelTimeFilters: [
      { mode: 'transit', slug: 'london', label: 'Central London', max: 35 },
    ],
    initialZoom: 10.2,
    posterTimeS: 8,
    outroLine: 'The underpriced twin is on this map. Find it.',
    cues: [
      {
        text: 'My whole house brief is one plain sentence.',
        caption: "Reputation is priced in. Value isn't.",
        during: [
          typeAct('Flat under £600k, 35 min to central London, low crime, quiet street', 2600),
        ],
        tail: [wait(150)],
      },
      {
        text: 'Every postcode in England that fits, sorted by value.',
        caption: 'All of England, by value',
        during: [submitSettled(1400)],
        tail: [sheetDown(800), wait(250)],
      },
      {
        text: 'Same schools, same commute, the price quietly drops nearby.',
        caption: 'The cheaper twin nearby',
        during: [mapZoomIn(1400, 4)],
        tail: [wait(400)],
      },
    ],
  },

  // -------------------------------------------------------------------
  // 02 — The commute slider. Cold open on a travel-time-coloured map
  // (filter + colour applied in pre), then the 60→20 drag is the story.
  // -------------------------------------------------------------------
  {
    name: 'ad-02-twenty-minute-map',
    matchCount: 38600,
    city: 'london',
    promptText: 'Within an hour of central London',
    filters: {},
    travelTimeFilters: [
      { mode: 'transit', slug: 'london', label: 'Central London', max: 60 },
    ],
    initialZoom: 10.2,
    posterTimeS: 9,
    outroLine: 'The commute is priced in. The bargain is not.',
    prePrime: [
      { kind: 'clearVignette', durationMs: 0 },
      { kind: 'cursorScale', scale: 0, durationMs: 0 },
      // Paint the map by journey time, then hand the frame to the map.
      {
        kind: 'click',
        target: el(`${TT_CARD_SELECTOR} button[title="Colour map"]`),
        durationMs: 600,
      },
      { kind: 'wait', durationMs: 500 },
      sheetDown(700),
      { kind: 'wait', durationMs: 200 },
    ],
    cues: [
      {
        text: 'Every colour on this map is a commute to central London.',
        caption: 'Same commute, cheaper postcode',
        during: [wait(400)],
        tail: [wait(150)],
      },
      {
        text: "Here's what twenty minutes actually leaves you.",
        caption: 'What 20 minutes buys',
        during: [sheetUp(700), touchShow(), ttDragAct(20, 1700)],
        tail: [touchHide(), sheetDown(800), wait(300)],
      },
      {
        text: "Same twenty minutes wherever it's lit, but not the same price.",
        caption: 'Same ride, lower price',
        during: [mapZoomIn(1300, 3)],
        tail: [wait(400)],
      },
    ],
  },

  // -------------------------------------------------------------------
  // 03 — Tap a postcode, read its file. The drawer (sold prices, Street
  // View, schools, crime) is the wow — most viewers don't know this exists.
  // -------------------------------------------------------------------
  {
    name: 'ad-03-postcode-files',
    matchCount: 1290,
    city: 'london',
    initialFilters: {
      'Estimated current price': [0, 700000],
      [SCHOOL_OUTSTANDING_PRIMARY]: [1, 10],
    },
    initialZoom: 10.6,
    posterTimeS: 11,
    outroLine: 'Every postcode, proven on the numbers, not its reputation.',
    prePrime: [
      { kind: 'clearVignette', durationMs: 0 },
      { kind: 'cursorScale', scale: 0, durationMs: 0 },
      sheetDown(700),
      { kind: 'wait', durationMs: 200 },
    ],
    cues: [
      {
        text: 'One name costs more. The block next door scores the same.',
        caption: 'See the proof, not the postcode',
        during: [
          {
            // Zoom around the strongest visible match so the destination
            // area contains matching postcodes; settled so the tapHex in
            // the next cue projects against the final viewport's response.
            kind: 'mapZoom',
            target: hex(),
            steps: 8,
            durationMs: 2600,
            center: true,
            waitForMapSettled: true,
            timeoutMs: 9000,
          },
        ],
        tail: [wait(150)],
      },
      {
        text: 'Sold prices, schools, crime, even Street View, for this exact postcode.',
        caption: 'The whole postcode file',
        during: [touchShow(), tapHex(1000), scrollDrawer(420, 850)],
        tail: [wait(200)],
      },
      {
        text: 'The same evidence a pricey postcode has, sitting quietly cheaper here.',
        caption: 'Same proof, less money',
        during: [scrollDrawer(820, 900), touchHide()],
        tail: [wait(350)],
      },
    ],
  },

  // -------------------------------------------------------------------
  // 04 — Noise. The strongest single line in the set; the product proves it.
  // -------------------------------------------------------------------
  {
    name: 'ad-04-quiet-streets',
    matchCount: 6420,
    city: 'london',
    promptText: 'Quiet London street under 55 decibels, low crime',
    filters: {
      'Noise (dB)': [0, 55],
      'Serious crime (avg/yr)': [0, 35],
    },
    initialZoom: 10.6,
    posterTimeS: 7,
    outroLine: 'The quiet street nobody bid up.',
    cues: [
      {
        text: 'Listing photos are silent. Main roads are not.',
        caption: "The quiet that's overlooked",
        during: [typeAct('Quiet London street under 55 decibels, low crime', 2400)],
        tail: [wait(150)],
      },
      {
        text: 'This is London under fifty-five decibels.',
        caption: 'Under 55 decibels',
        during: [submitSettled(1400)],
        tail: [sheetDown(800), wait(250)],
      },
      {
        text: 'Nearby, just as quiet, and overlooked.',
        caption: 'Quiet, and overlooked',
        during: [mapZoomIn(1600, 5)],
        tail: [wait(400)],
      },
    ],
  },

  // -------------------------------------------------------------------
  // 05 — Families / the school run. Leeds for non-London variety.
  // -------------------------------------------------------------------
  {
    name: 'ad-05-school-run',
    matchCount: 3380,
    city: 'leeds',
    promptText: 'Family home in Leeds under £350k, good primary schools, low crime',
    filters: {
      'Estimated current price': [0, 350000],
      [SCHOOL_GOOD_PRIMARY]: [2, 10],
      'Serious crime (avg/yr)': [0, 30],
    },
    initialZoom: 11.0,
    posterTimeS: 13,
    outroLine: 'The schools are real. The premium is optional.',
    cues: [
      {
        text: 'Good primary, low crime, under three hundred and fifty. The actual family brief.',
        caption: 'Catchment, minus the premium',
        during: [
          typeAct('Family home in Leeds under £350k, good primary schools, low crime', 2800),
        ],
        tail: [wait(150)],
      },
      {
        text: 'Everything still on the map passes all three filters.',
        caption: 'Passes all three',
        during: [submitSettled(1400)],
        tail: [sheetDown(800), wait(250)],
      },
      {
        text: 'Same primary, same low crime, without the name everyone else is bidding up.',
        caption: 'Same catchment, less money',
        during: [mapZoomIn(1600, 5)],
        tail: [wait(400)],
      },
    ],
  },

  // -------------------------------------------------------------------
  // 06 — Lifestyle amenities. The Waitrose line is the hook; tube + park
  // make it practical. Names match the live amenity-distance features.
  // -------------------------------------------------------------------
  {
    name: 'ad-06-waitrose-test',
    matchCount: 880,
    city: 'london',
    promptText: 'Walking distance to a Waitrose, a tube station and a park',
    filters: {
      'Distance to nearest amenity (Waitrose) (km)': [0, 1],
      'Distance to nearest amenity (Tube station) (km)': [0, 0.8],
      'Distance to nearest amenity (Park) (km)': [0, 0.5],
    },
    initialZoom: 10.4,
    posterTimeS: 7,
    outroLine: 'Same Waitrose. Same tube. Cheaper postcode.',
    cues: [
      {
        text: 'A Waitrose, a tube stop, a park nearby. Search by what you want.',
        caption: 'The Waitrose test',
        during: [typeAct('Walking distance to a Waitrose, a tube station and a park', 2800)],
        tail: [wait(150)],
      },
      {
        text: 'London, narrowed to the postcodes that fit the way you live.',
        caption: 'Fits how you live',
        during: [submitSettled(1400)],
        tail: [sheetDown(800), wait(250)],
      },
      {
        text: 'Same amenities, lower price nearby.',
        caption: 'Same life, lower price',
        during: [mapZoomIn(1400, 4)],
        tail: [wait(400)],
      },
    ],
  },

  // -------------------------------------------------------------------
  // 07 — Renters. Every tool is for buyers; rent is a live feature here.
  // -------------------------------------------------------------------
  {
    name: 'ad-07-renters-map',
    matchCount: 2160,
    city: 'london',
    promptText: 'Rent under £1,600, 30 min to central London, quiet street',
    filters: {
      'Estimated monthly rent': [0, 1600],
      'Noise (dB)': [0, 58],
    },
    travelTimeFilters: [
      { mode: 'transit', slug: 'london', label: 'Central London', max: 30 },
    ],
    initialZoom: 10.3,
    posterTimeS: 13,
    outroLine: 'The name costs more. The street does not.',
    cues: [
      {
        text: 'Rent under sixteen hundred, half an hour to central, on a quiet street.',
        caption: 'Stop renting the reputation',
        during: [typeAct('Rent under £1,600, 30 min to central London, quiet street', 2800)],
        tail: [wait(150)],
      },
      {
        text: 'Letting sites rank flats. This ranks the streets around them.',
        caption: 'Areas, not just flats',
        during: [submitSettled(1400)],
        tail: [sheetDown(800), wait(250)],
      },
      {
        text: 'Same commute, same quiet, lower rent nearby.',
        caption: 'Same street, lower rent',
        during: [mapZoomIn(1600, 5)],
        tail: [wait(400)],
      },
    ],
  },

  // -------------------------------------------------------------------
  // 08 — Value. The cost of overpaying for a name vs the one-off fee.
  // -------------------------------------------------------------------
  {
    name: 'ad-08-value',
    matchCount: 1540,
    city: 'london',
    promptText: 'Under £500k, 35 min to central London, low crime, good schools',
    filters: {
      'Estimated current price': [0, 500000],
      'Serious crime (avg/yr)': [0, 35],
      [SCHOOL_GOOD_PRIMARY]: [1, 10],
    },
    travelTimeFilters: [
      { mode: 'transit', slug: 'london', label: 'Central London', max: 35 },
    ],
    initialZoom: 10.4,
    posterTimeS: 7,
    outroLine: 'Buy value, not reputation.',
    cues: [
      {
        text: 'Two streets, same schools, same commute, priced tens of thousands apart.',
        caption: 'Two streets. One is overpriced.',
        during: [typeAct('Under £500k, 35 min to central London, low crime, good schools', 2600)],
        tail: [wait(150)],
      },
      {
        text: "You pay for the postcode's name; the value sits a postcode away.",
        caption: 'You pay for the name',
        during: [submitSettled(1400)],
        tail: [sheetDown(800), wait(250)],
      },
      {
        text: 'Pay once, find the bargain, stop overpaying for the name.',
        caption: 'Find the value instead',
        during: [mapZoomIn(1600, 5)],
        tail: [wait(400)],
      },
    ],
  },
];

const AD_STORYBOARDS = AD_CONFIGS.map(createDemoAdStoryboard);

const STORYBOARD_SET = process.env.VIDEO_STORYBOARD_SET ?? 'homepage-en';

export const storyboards: Storyboard[] = (() => {
  switch (STORYBOARD_SET) {
    case 'homepage-en':
      return ENGLISH_HOMEPAGE_STORYBOARDS;
    case 'demo':
      return DEMO_STORYBOARDS;
    case 'all':
      return [...AD_STORYBOARDS, ...DEMO_STORYBOARDS];
    case 'ads':
    default:
      return AD_STORYBOARDS;
  }
})();

export function getStoryboard(name: string): Storyboard {
  const sb = storyboards.find((s) => s.name === name);
  if (!sb) {
    throw new Error(
      `Unknown storyboard "${name}". Known: ${storyboards.map((s) => s.name).join(', ')}`
    );
  }
  return sb;
}