/* global React */
const { useState, useEffect, useRef } = React;

// ===================================================================
// Shared data
// ===================================================================

// Studio reel — same Bunny stream the homepage hero plays muted.
// Used by the "Watch reel" buttons and as the default video for any WORK
// item that doesn't define its own `videoUrl`.
const REEL_URL = 'https://iframe.mediadelivery.net/embed/653743/c48a2278-d069-4456-976c-c775bb412d05';

// === SYNC:NOTION_WORK START — managed by api/sync-productions, do not edit by hand ===
const NOTION_WORK = [
  { id: '20211103_CGGJEWELLERY', title: 'The Worry Collection', client: 'Charlie Carr-Gomm Jewellery', type: 'Commercial', ranking: 'Medium', tags: ['Commercial', '1:40'], img: 'assets/work-the-worry-collection.jpg', videoUrl: 'https://iframe.mediadelivery.net/embed/653743/08be1353-5b8c-4535-ba78-868a81ec828b', description: 'Short etherial commercial for Charlie Carr-Gomm Jewellery set in The Ringing Station at the foot of Seven Sisters.' },
  { id: '20220930_MARKBEAUCHAMP', title: 'Mark Beauchamp', client: 'Mark Beauchamp', type: 'Brand Videos', ranking: 'Medium', tags: ['Brand Videos', '0:32'], img: 'assets/work-mark-beauchamp.jpg', videoUrl: 'https://iframe.mediadelivery.net/embed/653743/e644057a-e490-48fc-a839-1b58da5f2bae', description: 'Model catalogue film created for Mark Beauchamp set in the beautiful Ouse Valley Viaduct.' },
  { id: '20250412MW_SOCCERAID', title: 'Soccer Aid', client: 'Frame the Game B.V.', type: 'Social Content', ranking: 'Medium', tags: ['Social Content', '0:32'], img: 'assets/work-soccer-aid.jpg', videoUrl: 'https://iframe.mediadelivery.net/embed/653743/436174ba-e710-412c-a513-96fc28c1eeff', description: 'Promotional video for charity football match with high profile celebrities encouraging viewers to support the cause by purchasing a sports jersey.' },
  { id: '240319MW_THETALEOFTWORUNNERS', title: 'A Tale of Two Runners', client: 'Christians in Sport', type: 'Brand Videos', ranking: 'Medium', tags: ['Brand Videos', '7:51'], img: 'assets/work-a-tale-of-two-runners.jpg', videoUrl: 'https://iframe.mediadelivery.net/embed/653743/a6bd1dbb-034c-4819-a335-3287ff3df835', description: 'Branded short film production for a UK sports charity, blending cinematic storytelling with an authentic message of faith and community.' },
  { id: '20250312CE_CELAUNCHEVENT', title: 'CE Launch Event', client: 'Christianity Explored Ministries', type: 'Live Events', ranking: 'Low', tags: ['Live Events', '0:56'], img: 'assets/work-ce-launch-event.jpg', videoUrl: 'https://iframe.mediadelivery.net/embed/653743/ea9a3e61-c991-4761-ba22-42d9a1dba908', description: 'Event coverage for the Christianity Explored launch at Christ Church Kensington, including reception and keynote previews.' },
  { id: '20251001SH_BROADFIELDSHS', title: 'Saracens Broadfields Primary', client: 'Saracens MAT', type: 'Commercial', ranking: 'Medium', tags: ['Commercial', '2:22'], img: 'assets/work-saracens-broadfields-primary.jpg', videoUrl: 'https://iframe.mediadelivery.net/embed/653743/8cbfd18c-19e0-428f-bc27-184c2755d461', description: 'Primary school welcome film for for school in North London, showcasing school values, facilities, and community to prospective parents researching local primary education options.' },
  { id: '20251027MW_LEDLEYKING', title: 'Ledley King x Match Worn Shirt', client: 'Frame the Game B.V.', type: 'Social Content', ranking: 'High', tags: ['Social Content', '1:11'], img: 'assets/work-ledley-king-x-match-worn-shirt.jpg', videoUrl: 'https://iframe.mediadelivery.net/embed/653743/054a3d46-aec0-48af-857a-e19b050085ab', description: 'Football interview video production with Tottenham Hotspur legend Ledley King for MatchWornShirt, creating vertical social media content promoting Spurs match‑worn shirt auctions.' },
  { id: '230524BX_THEGOODFIGHT', title: 'The Good Fight', client: 'Boxx', type: 'Commercial', ranking: 'Medium', tags: ['Commercial', '0:43'], img: 'assets/work-good-fight.jpg', videoUrl: 'https://iframe.mediadelivery.net/embed/653743/98bf30c6-f0df-444f-9d7c-adfae96bc931', description: 'Social spot for Boxx+ at home champaign highlighting their simple to use at home workouts.' },
];
// === SYNC:NOTION_WORK END ===

// Manually-curated entries. Empty by design — productions are now published
// via Notion → api/sync-productions, which writes to NOTION_WORK above.
const LEGACY_WORK = [];

// Notion-managed entries first, legacy entries below (de-duplicated by id).
const WORK = (() => {
  const ids = new Set(NOTION_WORK.map((w) => w.id));
  return [...NOTION_WORK, ...LEGACY_WORK.filter((w) => !ids.has(w.id))];
})();

const SERVICES = [
  {
    idx: 'S—01',
    name: 'Brand Videos',
    price: 'From £18k',
    blurb: 'Hero films that anchor a brand campaign — written, shot and finished by the same small team. Shape and tone are the point; we won\'t hand you a generic edit on a different soundbed.',
    deliverables: ['Strategy & treatment', 'Casting & locations', 'Direction & DOP', 'Edit, grade, sound design', '60s / 30s / 15s / 6s cuts', 'Stills package'],
  },
  {
    idx: 'S—02',
    name: 'Commercial',
    price: 'From £24k',
    blurb: 'Product, fashion, beauty and watch films for direct response and broadcast. We work close to art direction so the spot looks intentional, not stitched.',
    deliverables: ['Pre-production & boards', 'Studio or location', 'Cinematographer-led', 'Motion graphics', 'Cutdowns for paid social', 'Master deliveries'],
  },
  {
    idx: 'S—03',
    name: 'Social Content',
    price: 'From £12k',
    blurb: 'Episodic and social-first work that lives between a campaign and an always-on channel. Built for the platform, edited for the scroll, written like a film.',
    deliverables: ['Series planning', 'Multi-day capture', 'Vertical & landscape edits', 'Subtitles & access', 'Channel-ready masters', 'Performance cutdowns'],
  },
  {
    idx: 'S—04',
    name: 'Live Events',
    price: 'From £6k / day',
    blurb: 'Multi-camera capture of conferences, launches and matches. Same-day social cuts; full event film delivered on a 5–10 day turnaround.',
    deliverables: ['Multi-cam capture (3–6)', 'On-site sound', 'Same-day social cuts', 'Highlights edit', 'Full event film', 'Live streaming option'],
  },
];

const PROCESS = [
  { num: '01', title: 'Brief',           blurb: 'A 30-minute conversation. We listen, ask, and write back the same week with a one-page response — what we\'d make and why.',                                                                                            dur: 'Discovery' },
  { num: '02', title: 'Pre-production',  blurb: 'Treatment, locations, casting, crew and schedule. Shot list and call sheet locked — the shape of the film agreed before a camera turns over.',                                                                          dur: 'Locked-in' },
  { num: '03', title: 'Production',      blurb: 'Pre-pro, shoot days, then offline. Small dedicated crew. You\'re welcome on set; many clients aren\'t there.',                                                                                                            dur: 'On set' },
  { num: '04', title: 'Post & delivery', blurb: 'Edit through structured revision rounds — internal cut first, then yours, every version tracked. Colour, sound mix, masters in your formats. A set of graded frames and short social cuts lands with the final delivery — yours to use.', dur: 'Post & wrap' },
];

const PRINCIPLES = [
  { num: 'P—01', title: 'Detail driven, not detail proud.',     body: 'Lighting that earns its frame. Audio that disappears. A grade that supports the story rather than performs over it.' },
  { num: 'P—02', title: 'Small team, end to end.',              body: 'Director, DOP, editor — usually three or four people from brief to master. The people who shape the brief are the same people behind the camera.' },
  { num: 'P—03', title: 'High-budget craft, compact crew.',     body: 'The sophistication of bigger productions without the overhead. Fewer people on set, more attention on the work.' },
  { num: 'P—04', title: 'Story first, kit second.',             body: 'We have a shelf of kit and we love it. But we\'ve never opened a brief and asked which camera before asking what we\'re trying to say.' },
  { num: 'P—05', title: 'First of many.',                       body: 'We treat every project like the start of a working relationship. The films that last are the ones clients come back for — so we make every one count.' },
  { num: 'P—06', title: 'Calm on set, sharp in post.',          body: 'A small crew that feels like one. Talent who relax. A set that produces without performing — and a post pipeline that delivers without drama.' },
];

const TEAM = [
  {
    name: 'Max Paterson',
    role: 'Founder · Director',
    img: 'assets/team-max.jpg',
    years: '8 yrs',
    specialty: 'Story-led brand films',
    signature: 'The Worry Collection · CCG Jewellery (2021)',
    pronouns: 'he/him',
    facts: [
      { k: 'From', v: 'New Zealand' },
      { k: 'Favourite film', v: 'Whiplash' },
    ],
    short: 'Writes the treatment, runs the floor, sits in on the grade. The thread that runs from brief to master.',
    bio: [
      'Max founded Valley Films in 2018. New Zealand born and London based, he came up behind the camera and still thinks like a cinematographer. Story first, then the frames that earn their place.',
      'He writes every treatment, runs casting, and sits in on the colour grade. The through-line from first email to final master, and the kind of director who gets the best out of a set without raising his voice.',
      'The studio\'s instinct for documentary is his: a preference for real moments over manufactured ones, and a conviction that high-budget polish doesn\'t need a high-budget crew.',
    ],
    credits: ['Lent — I Fly Away', 'IWC — On Tour', 'Tearfund — Frames'],
    contact: 'max@valley.film',
  },
  {
    name: 'Peter Dundas',
    role: 'Camera Technician & Operator',
    img: 'assets/team-peter.jpg',
    years: '5 yrs',
    specialty: 'Kit prep & on-set support',
    signature: 'Broadfields Primary · Saracens (2025)',
    pronouns: 'he/him',
    facts: [
      { k: 'From', v: 'Northern Ireland' },
      { k: 'Favourite film', v: 'The Banshees of Inisherin' },
    ],
    short: 'Preps the kit, pulls focus, keeps the set moving. Quiet adapter, calm when it tightens.',
    bio: [
      'Peter handles kit prep and technical support on the camera side, plus works as a 1st AC or spark on Valley shoots. Gear prepped, maintained, and ready to perform. Then he steps onto crew when production scales up.',
      'His background is in events, capturing highlights at conferences, festivals, and live gatherings, where the moment happens once and you adapt fast. That instinct shapes how he preps kit and works on set: think ahead, stay ready for what shifts, and support the team without adding friction.',
      'His role bridges the rental operation and on-set crew, which means he knows the kit inside-out and can troubleshoot fast when something goes sideways. Efficient with cable runs, quick with focus marks, calm when the schedule tightens.',
    ],
    credits: ['Sarah — Saxophone', 'Brodie Bird — Cockpit', 'Silje Marie — Cobblestone'],
    contact: 'pete@valley.film',
  },
  {
    name: 'Vince Poblete',
    role: 'Head of Post Production',
    img: 'assets/team-vince.png',
    years: '2 yrs',
    specialty: 'Colour grading & post pipeline',
    signature: 'Mark Beauchamp (2022)',
    pronouns: 'he/him',
    facts: [
      { k: 'From', v: 'Philippines' },
      { k: 'Favourite film', v: 'Parasite' },
    ],
    short: 'Runs assembly, online, grade and delivery. The reason a Valley film leaves the building on time.',
    bio: [
      'Vince takes raw, unpolished moments and pieces them together into something that actually moves people. He specializes in narrative construction, transforming raw footage into cohesive and engaging visual stories.',
      'He approaches editing with a focus on structure and intent. Rather than simply assembling clips, he prioritizes the logical and emotional flow of the material to ensure the final product aligns with the project\'s goals.',
      'His work is defined by a commitment to clarity, effective pacing, and a professional dedication to the craft of storytelling.',
    ],
    credits: ['Mark Beauchamp — Studio Sessions', 'CCG — Fine Jewellery', 'True Vision — Brand Film'],
    contact: 'vince@valley.film',
  },
];

const JOURNAL = [
  { id: 'j1', cat: 'Process',    title: 'How we treat treatments — a one-pager guide.',                  date: 'Apr 2025', read: '6 min', img: 'assets/bts-bookshelf.jpg' },
  { id: 'j2', cat: 'Field note', title: 'Three days in Wellington with Brodie Bird.',                    date: 'Mar 2025', read: '4 min', img: 'assets/work-cockpit.jpg' },
  { id: 'j3', cat: 'Craft',      title: 'A small case for vintage glass on commercial work.',            date: 'Feb 2025', read: '5 min', img: 'assets/bts-camera-op.jpg' },
  { id: 'j4', cat: 'Studio',     title: 'On building a small London team that doesn\'t burn out.',       date: 'Jan 2025', read: '7 min', img: 'assets/bts-studio-set.jpg' },
  { id: 'j5', cat: 'Field note', title: 'Lent: capturing performance without performing.',                date: 'Dec 2024', read: '5 min', img: 'assets/work-lent.jpg' },
  { id: 'j6', cat: 'Process',    title: 'A budget template that survives a creative review.',             date: 'Nov 2024', read: '8 min', img: 'assets/work-mark-beauchamp.jpg' },
];

// === SYNC:NOTION_LOGOS START — managed by api/sync-productions, do not edit by hand ===
const NOTION_LOGOS = [
];
// === SYNC:NOTION_LOGOS END ===

const LEGACY_LOGOS = [
  { name: 'Bigen',    logo: 'assets/logo-bigen.png' },
  { name: 'Boxx',     logo: 'assets/logo-boxx.png' },
  { name: 'CIS',      logo: 'assets/logo-cis.png' },
  { name: 'MWS',      logo: 'assets/logo-mws.png', aliases: ['MatchWornShirt', 'Match Worn Shirt', 'Frame the Game B.V.', 'Frame the Game'] },
  { name: 'Navs',     logo: 'assets/logo-navs.png' },
  { name: 'Saracens', logo: 'assets/logo-saracens.png' },
  { name: 'SBI',      logo: 'assets/logo-sbi.png' },
];

// Legacy logos are the authoritative starting set; Notion-published logos
// append (deduped by case-insensitive client name).
const CLIENT_LOGOS = (() => {
  const seen = new Set(LEGACY_LOGOS.map((l) => l.name.toLowerCase()));
  return [
    ...LEGACY_LOGOS,
    ...NOTION_LOGOS.filter((l) => {
      const k = l.name.toLowerCase();
      if (seen.has(k)) return false;
      seen.add(k);
      return true;
    }),
  ];
})();

// Title-derived slug for /work/:slug URLs. Keep purely derived (no schema
// change) so Notion-synced entries pick this up automatically — title
// changes flow through to the URL on the next sync.
const slugForWork = (w) => ((w && w.title) || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');

Object.assign(window, { REEL_URL, WORK, SERVICES, PROCESS, PRINCIPLES, TEAM, JOURNAL, CLIENT_LOGOS, slugForWork });
