`src/sections.ts`

90 lines
import dims from './dims.json';

export const FPS = 30;
export const WIDTH = 1920;
export const HEIGHT = 1080;

export type Kind = 'card' | 'shot';

export interface Section {
  kind: Kind;
  id: string;
  file?: string;         // shots/<id>.png
  w?: number;
  h?: number;
  act: string;           // small eyebrow label
  title: string;
  sub: string;
  url?: string;          // fake browser address bar
  frames: number;
  accent: string;
}

const D: Record<string, { w: number; h: number }> = dims as any;

const CYAN = '#38bdf8';
const AMBER = '#f5b301';
const GREEN = '#34d399';

// ── Act 1: front-facing pages ────────────────────────────────
const front: Array<[string, string, string, string, number]> = [
  // id, title, sub, url, seconds
  ['home',     'Home',               'The Prestige treatment — hand wash, detail & ceramic', 'prestigecarwash.com', 15],
  ['services', 'Services & Pricing',  'Eight packages from Express Wash to Ceramic Coating',  'prestigecarwash.com/services', 11],
  ['contact',  'Book / Contact',      'Lead-capture booking form + shop location',            'prestigecarwash.com/contact', 9],
];

// ── Act 2: admin growth center tabs ──────────────────────────
const admin: Array<[string, string, string, number]> = [
  ['overview',    'Overview',             'Live counts across the whole growth dataset', 10.5],
  ['competitors', 'Competitors',          '12 rival washes in the San Fernando Valley', 10.5],
  ['best-post',   'Best Times to Post',   'When engagement peaks by channel', 10.5],
  ['best-market', 'Best Times to Market', 'When to spend to convert', 10.5],
  ['holidays',    'Holiday-Driven',       'Eight seasonal campaign hooks', 10.5],
  ['services',    'Services (Admin)',     'Editable service catalog behind the storefront', 10.5],
  ['suggestions', 'Grow the Business',    'Ten ranked growth plays with rationale', 10.5],
  ['ads',         'Online Ads',           'Platform-by-platform ad headlines', 10.5],
  ['directories', 'Groups · Directories', 'Nextdoor, local groups & listing sites', 10.5],
  ['google',      'Google Business',      'Places profile draft-update panel', 10.5],
  ['leads',       'Leads',                'Inbound booking requests from the site', 10.5],
  ['credentials', 'Credentials',          'Keys & access the build depends on', 10.5],
];

const sec = (s: number) => Math.round(s * FPS);

export const SECTIONS: Section[] = [
  {
    kind: 'card', id: 'intro', act: 'Product Walkthrough',
    title: 'Prestige Car Wash', sub: 'Storefront + Growth Center · a guided tour',
    frames: sec(6), accent: CYAN,
  },
  {
    kind: 'card', id: 'act1', act: 'Act 1',
    title: 'The Storefront', sub: 'What customers see',
    frames: sec(3), accent: CYAN,
  },
  ...front.map(([id, title, sub, url, s]): Section => ({
    kind: 'shot', id, file: `shots/${id}.png`, w: D[id]?.w, h: D[id]?.h,
    act: 'Front-facing', title, sub, url, frames: sec(s), accent: CYAN,
  })),
  {
    kind: 'card', id: 'act2', act: 'Act 2',
    title: 'The Growth Center', sub: 'Admin dashboard · click-through of every tab',
    frames: sec(3), accent: AMBER,
  },
  ...admin.map(([id, title, sub, s]): Section => {
    const key = 'admin-' + id;
    return {
      kind: 'shot', id: key, file: `shots/${key}.png`, w: D[key]?.w, h: D[key]?.h,
      act: 'Admin · Growth Center', title, sub, url: 'prestigecarwash.com/admin', frames: sec(s), accent: AMBER,
    };
  }),
  {
    kind: 'card', id: 'outro', act: 'Prestige Car Wash',
    title: 'Storefront + Growth Center', sub: 'Built with Claude Code',
    frames: sec(5), accent: GREEN,
  },
];

export const TOTAL_FRAMES = SECTIONS.reduce((a, s) => a + s.frames, 0);