// ============================================================
// BMG — Media side, v2 (dark). Loaded after PageMedia.jsx and
// replaces window.Media. Reuses the reel (ReelGroup, LAND_CLIPS,
// PORT_CLIPS) and TOP_CLIENTS from PageMedia.jsx.
// Case studies, testimonials and team bios come from the BMG
// offer deck (~/Sales-Assets/bmg-general-deck/src/media.js).
// ============================================================

const BMG_IMG = (f) => res('assets/bmg/clients/' + f);

// ---- intro: just the BMG triangle, glowing, on pure black ----
function BMGIntro() {
  // deep links like #media/contact (from the case-story pages) skip the intro
  const deep = window.location.hash.indexOf('/') !== -1;
  const [out, setOut] = React.useState(deep);
  const [gone, setGone] = React.useState(deep);
  React.useEffect(() => {
    if (deep) { const s = document.getElementById('bvs-splash'); if (s) s.remove(); document.documentElement.classList.remove('bvs-splash-lock'); return; }
    // landing straight on #media: skip the blue BVS globe splash
    const s = document.getElementById('bvs-splash');
    if (s) { s.remove(); }
    document.documentElement.classList.add('bvs-splash-lock');
    const t1 = setTimeout(() => setOut(true), 2300);
    const t2 = setTimeout(() => setGone(true), 3100);
    return () => { clearTimeout(t1); clearTimeout(t2); document.documentElement.classList.remove('bvs-splash-lock'); };
  }, []);
  React.useEffect(() => { if (out) document.documentElement.classList.remove('bvs-splash-lock'); }, [out]);
  if (gone) return null;
  // portalled to <body>: .page-enter animates transform, which would trap a
  // position:fixed overlay inside the page and put the header above it
  return ReactDOM.createPortal(
    <div className={'bmg-intro' + (out ? ' out' : '')} onClick={() => setOut(true)} aria-hidden="true">
      <div className="bmg-intro-halo" />
      <div className="bmg-intro-inner">
        <div className="bmg-intro-mark" dangerouslySetInnerHTML={{ __html: VMARK }} />
        <div className="bmg-intro-word">Bleu Media Group</div>
      </div>
    </div>,
    document.body
  );
}

// ---- VSL: poster + play button until clicked, then native controls ----
// preload="none" so the 6:49 film costs nothing until someone presses play.
function BMGVsl() {
  const vid = React.useRef(null);
  const [started, setStarted] = React.useState(false);
  const start = () => {
    const v = vid.current;
    if (!v) return;
    setStarted(true);
    v.play().catch(() => {});
  };
  return (
    <div className="reveal bmg-vsl bmg-hue" style={delay(3)}>
      <div className="bmg-vsl-frame">
        <video ref={vid} src={res('assets/bmg/vsl/bmg-vsl.mp4')} poster={res('assets/bmg/vsl/poster.jpg')}
          preload="none" playsInline controls={started} />
        {!started && (
          <button className="bmg-vsl-play" onClick={start} aria-label="Play video">
            <span className="bmg-vsl-btn"><span className="bmg-vsl-tri" /></span>
            <span className="bmg-vsl-label">Watch the film · 6:49</span>
          </button>
        )}
      </div>
    </div>
  );
}

// ---- hero ----
function BMGHero({ onNav }) {
  const ref = useReveal();
  const stats = [['1.5B+', 'Views generated'], ['15K+', 'Clips posted'], ['10M+', 'Followers managed'], ['5', 'Platforms']];
  const run = [...TOP_CLIENTS, ...TOP_CLIENTS];
  return (
    <section ref={ref} className="bmg-sec" style={{ paddingTop: 150, paddingBottom: 40 }}>
      <div className="bmg-glow-top" />
      <div className="bmg-stars-top"><Particles density={2.2} accent="140,170,255" /></div>
      <div className="wrap bmg-center" style={{ position: 'relative' }}>
        <div className="reveal bmg-pill"><VMark size={13} color="#fff" />Bleu Media Group</div>
        <h1 className="reveal bmg-h1" style={{ marginTop: 26, maxWidth: 1000, ...delay(1) }}>
          <span style={{ display: 'inline-block' }}>Most agencies get you views.</span> <span className="bmg-grad" style={{ display: 'inline-block' }}>We get you clients.</span>
        </h1>
        <p className="reveal bmg-lead" style={delay(2)}>
          Strategy, production, distribution and the funnels behind them — one in-house system built to turn attention into revenue for your business or personal brand. You film. We handle everything else.
        </p>
        <BMGVsl />
        <div className="reveal bmg-stats" style={delay(3)}>
          {stats.map(([v, l]) => <div key={l} className="bmg-stat"><b>{v}</b><span>{l}</span></div>)}
        </div>
        <div className="reveal" style={{ display: 'flex', gap: 12, marginTop: 38, flexWrap: 'wrap', justifyContent: 'center', ...delay(4) }}>
          <button className="bmg-btn bmg-btn-w" onClick={() => onNav('contact')}>Book a call <span>→</span></button>
          <button className="bmg-btn bmg-btn-d" onClick={() => onNav('case-studies')}>See our work</button>
        </div>
      </div>
      <div className="bmg-fade-x" style={{ marginTop: 56, position: 'relative' }}>
        <div className="bmg-rail">
          {run.map((c, i) => (
            <div key={i} className="bmg-rail-card">
              <div className="bmg-rail-img"><img src={res(c.img)} alt={c.name} loading="lazy" /></div>
              <div style={{ marginTop: 12, fontWeight: 600, fontSize: 14 }}>{c.name}</div>
              <div style={{ fontSize: 12, color: 'var(--bmg-faint)', marginTop: 3 }}>{c.role}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="wrap reveal bmg-thesis">
        <div className="bmg-kicker" style={{ display: 'flex', justifyContent: 'center' }}>Built for established businesses</div>
        <div className="bmg-thesis-eq" style={{ marginTop: 18 }}><span>Our content</span><i aria-label="equals"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9.5h12M6 14.5h12" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" /></svg></i><span className="bmg-grad">you make money</span></div>
        <p>
          You’ve already built the business: a proven offer, a team that delivers, and at least one acquisition channel that works. What’s missing is more of it — more leads, more sales, more revenue.
        </p>
        <p>
          Social is your next acquisition channel. We build it, run it and make you dominant on it, so your content becomes a second engine of revenue on top of the one you already have.
        </p>
        <div className="bmg-fit">
          {['Proven offer', 'Fulfilment team in place', 'One channel already working'].map((t) => (
            <span key={t}><i aria-hidden="true">✓</i>{t}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- what we do ----
function BMGServices() {
  const ref = useReveal();
  // strategy is the business around the content, not just the content plan (from the BMG proposals)
  const strategy = [
    ['Positioning & content', 'Brand positioning and messaging, content pillars, story arcs, hooks and scripts.'],
    ['Offer architecture', 'Pricing, promise and guarantee — built into a ladder from low-ticket entry to premium.'],
    ['Funnel & sales', 'Front-end funnel, paid traffic, VSL, application flow and a call framework.'],
    ['Nurture & ascension', 'Email, retargeting and community sequences that move buyers up the ladder.'],
    ['Tracking & attribution', 'See exactly which piece of content produced which sale.'],
    ['Weekly strategy call', 'One call a week with you. Everything else runs without you.'],
  ];
  const cards = [
    ['Pre & post production', 'Scripting, shot planning, filming with our in-house crew, editing, motion, thumbnails and per-platform formats. All you do is show up.'],
    ['Multi-account distribution', 'Your content deployed across a network of organic accounts for omnipresence and maximum algorithm exposure on Instagram, TikTok and YouTube.'],
  ];
  return (
    <section ref={ref} className="bmg-sec">
      <div className="wrap bmg-center">
        <div className="reveal bmg-kicker">What we do</div>
        <h2 className="reveal bmg-h2" style={{ maxWidth: 820, ...delay(1) }}>Strategy, production and distribution — <span className="bmg-grad">under one roof.</span></h2>
        <div className="bmg-svc">
          <div className="reveal bmg-card bmg-svc-lead">
            <div className="bmg-svc-intro">
              <div className="bmg-svc-n">01</div>
              <div className="bmg-svc-t">Strategy</div>
              <p className="bmg-svc-d">We don’t stop at views. We build the business your content feeds — so attention turns into booked calls and revenue, not just followers.</p>
            </div>
            <div className="bmg-svc-grid">
              {strategy.map(([t, d]) => (
                <div key={t} className="bmg-svc-item">
                  <div className="t">{t}</div>
                  <p>{d}</p>
                </div>
              ))}
            </div>
          </div>
          {cards.map(([t, d], i) => (
            <div key={t} className="reveal bmg-card" style={{ padding: '30px 28px 32px', ...delay(i + 1) }}>
              <div className="bmg-svc-n">{String(i + 2).padStart(2, '0')}</div>
              <div className="bmg-svc-t" style={{ fontSize: 22 }}>{t}</div>
              <p className="bmg-svc-d">{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- muted BTS loop: plays only while on screen, poster until then ----
function BMGLoop({ src, label }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const v = ref.current;
    if (!v || !('IntersectionObserver' in window)) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) v.play().catch(() => {}); else v.pause(); }, { threshold: 0.25 });
    io.observe(v);
    return () => io.disconnect();
  }, []);
  return (
    <div className="bmg-loop">
      <video ref={ref} className="bmg-shot" src={BMG_IMG(src + '.mp4')} poster={BMG_IMG(src + '.jpg')} muted loop playsInline preload="none" aria-label={label} />
      <span className="bmg-loop-tag">BTS</span>
    </div>
  );
}

// ---- case studies (from the BMG offer deck) ----
const BMG_CASES = [
  {
    id: 'ryt', story: 'case-studies/ryt-chain.html', sector: 'Blockchain · Web3', title: 'RYT Chain',
    body: "RYT is a pioneering Layer-1 blockchain bringing governments and citizens onto a secure, gas-free ecosystem. They had zero social infrastructure — we're architecting it entirely, embedded in their team, across X, LinkedIn, Instagram, TikTok and YouTube Shorts.",
    tags: ['Full social build', 'Short-form production', 'Brand voice & identity', 'Embedded with their team'],
    visual: () => (
      <div style={{ display: 'grid', gap: 12 }}>
        <img className="bmg-shot" src={BMG_IMG('ryt.jpg')} alt="RYT Chain" loading="lazy" style={{ aspectRatio: '16 / 8', objectFit: 'cover' }} />
        <img className="bmg-shot" src={BMG_IMG('ryt-team.jpg')} alt="RYT team" loading="lazy" style={{ aspectRatio: '16 / 8', objectFit: 'cover' }} />
      </div>
    ),
  },
  {
    id: 'pavle', story: 'case-studies/pavle-vllento.html', sector: 'Founder brand · Rebuild in progress', title: 'Pavle · VLLENTO',
    body: "Pavle co-founded Funpunch — #1 punching bags on Amazon and TikTok Shop, 15,000 orders a day at peak — and runs CEO Camp, his mentorship for e-commerce brands. We're rebuilding his online presence from the ground up: positioned as an operator, not a lifestyle creator, filmed weekly in Warsaw in 4K by a full production team, and distributed across five platforms.",
    stats: [['49.7K', 'channel views · 28 days'], ['26.2K', 'views on one video'], ['+309', 'subscribers · 28 days']],
    tags: ['Personal brand rebuild', 'Full production team · 4K', 'Funnel & VSL', 'Distribution'],
    visual: () => (
      <div style={{ display: 'grid', gap: 12 }}>
        <div className="bmg-g2">
          {[['pavle-3.jpg', 'Pavle, founder story shoot'], ['pavle-4.jpg', 'Pavle, sit-down interview']].map(([f, a]) => (
            <img key={f} className="bmg-shot" src={BMG_IMG(f)} alt={a} loading="lazy" />
          ))}
        </div>
        <img className="bmg-shot" src={BMG_IMG('pavle-thumb.jpg')} alt="Pavle — 20M in Q4, how we did it (YouTube thumbnail)" loading="lazy" style={{ aspectRatio: '16 / 9', objectFit: 'cover' }} />
        <figure className="bmg-fig">
          <img className="bmg-shot" src={BMG_IMG('pavle-video-analytics.jpg')} alt="YouTube analytics for “We Traveled To China” — 26,222 views, 716 watch hours and +238 subscribers since publishing" loading="lazy" />
          <figcaption>“20M in Q4” · 26.2K views, 716 watch hours and +238 subscribers in its first 10 days</figcaption>
        </figure>
        <figure className="bmg-fig">
          <img className="bmg-shot" src={BMG_IMG('pavle-channel-analytics.jpg')} alt="YouTube channel analytics — 49,681 views in the last 28 days, 44K more than usual" loading="lazy" />
          <figcaption>Channel · 49.7K views in 28 days — 44K more than usual</figcaption>
        </figure>
        <div className="bmg-bts">
          <BMGLoop src="pavle-bts-1" label="Rooftop shoot · Warsaw" />
          <img className="bmg-shot" src={BMG_IMG('pavle-bts-3.jpg')} alt="Behind the scenes — two-camera setup in Pavle's apartment" loading="lazy" />
          <BMGLoop src="pavle-bts-2" label="Interview setup" />
        </div>
      </div>
    ),
  },
  {
    id: 'licenseos', story: 'case-studies/license-os.html', sector: 'Our company · Consulting & growth equity', title: 'License OS',
    body: "License OS is our consulting and growth equity firm: partners go from zero to selling $6k–$24k AI packages to small businesses in under 30 days. We built and marketed it ourselves — the brand films, content, funnel and ads — and our team builds out each partner's operations and runs their marketing.",
    stats: [['7 figures', 'in revenue'], ['150+', 'clients served'], ['$8M+', 'tracked client revenue']],
    tags: ['Brand films', 'Funnel & ads', 'Partner operations', 'Partner marketing'],
    visual: () => (
      <div className="bmg-g2">
        {[['los-1.jpg', 'Nick Scheller — License OS film'], ['los-2.jpg', 'License OS team in Belgrade'], ['los-3.jpg', 'License OS — Marbella'], ['los-4.jpg', 'License OS — building']].map(([f, a]) => (
          <img key={f} className="bmg-shot" src={BMG_IMG(f)} alt={a} loading="lazy" />
        ))}
      </div>
    ),
  },
  {
    id: 'bigloud', sector: 'Music · Records', title: 'Big Loud Rock Records',
    body: "A mass-clipping campaign across their roster — one month of pure volume on 120+ accounts posting an artist's music daily, into the millions of views.",
    stats: [['2.3M+', 'total views'], ['126', 'accounts'], ['75K+', 'likes']],
    visual: () => (
      <div style={{ display: 'grid', gap: 12 }}>
        <div className="bmg-shot" style={{ display: 'grid', placeItems: 'center', padding: '28px 10%', background: '#050505' }}>
          <img src={BMG_IMG('blrk-cropped.png')} alt="Big Loud Rock" loading="lazy" style={{ maxWidth: '100%', maxHeight: 110, display: 'block' }} />
        </div>
        <img className="bmg-shot" src={BMG_IMG('blrk-totals.jpg')} alt="Campaign totals" loading="lazy" style={{ background: '#fff', padding: 6 }} />
        <img className="bmg-shot" src={BMG_IMG('blrk-charts.jpg')} alt="Per-account performance" loading="lazy" style={{ background: '#fff', padding: 8 }} />
      </div>
    ),
  },
  {
    id: 'soloe', sector: 'Trading educator · Clipping & social', title: 'Solo E TV',
    body: 'Eric Williams — Solo E TV, now @therealsoloe — is a forex day trader and trading educator. We ran his clipping and his social media: his streams and long-form cut into a daily flow of short-form clips, and his accounts managed end to end.',
    tags: ['Clipping', 'Social media management', 'Short-form', 'YouTube · Instagram · TikTok'],
    visual: () => <img className="bmg-shot" src={BMG_IMG('soloe.jpg')} alt="Solo E in his studio" loading="lazy" style={{ maxHeight: 560, objectFit: 'cover' }} />,
  },
  {
    id: 'daniel', sector: 'Education · Creator', title: 'English with Daniel',
    body: 'A creator-led education channel (Angielski z Danielem). End-to-end production and distribution that compounded into millions of views and a six-figure subscriber base.',
    stats: [['3.5M', 'views · 90 days'], ['110K+', 'subscribers']],
    visual: () => <img className="bmg-shot" src={BMG_IMG('daniel-analytics.jpg')} alt="English with Daniel — YouTube analytics" loading="lazy" />,
  },
];

function BMGCaseStudies() {
  const ref = useReveal();
  return (
    <section id="case-studies" ref={ref} className="bmg-sec" style={{ scrollMarginTop: 72 }}>
      <div className="bmg-glow-mid" />
      <div className="wrap" style={{ position: 'relative' }}>
        <div className="bmg-center">
          <div className="reveal bmg-kicker">Case studies</div>
          <h2 className="reveal bmg-h2" style={delay(1)}>Reach built. <span className="bmg-grad">Brands globalized.</span></h2>
          <p className="reveal bmg-lead" style={delay(2)}>From Layer-1 blockchains to record labels, founders and creators — what we built, and what it did.</p>
          <a className="reveal bmg-link" href="case-studies/" style={delay(3)}>Read the full case stories <span>→</span></a>
        </div>
        <div style={{ marginTop: 40 }}>
          {BMG_CASES.map((c, i) => (
            <div key={c.id} className={'reveal bmg-case' + (i % 2 ? ' flip' : '')}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', color: 'var(--bmg-faint)' }}>{String(i + 1).padStart(2, '0')}</span>
                  <span style={{ width: 24, height: 1, background: 'var(--bmg-line-2)' }} />
                  <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--bmg-faint)' }}>{c.sector}</span>
                </div>
                <h3 style={{ fontSize: 'clamp(28px,3vw,42px)', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05, margin: '18px 0 0' }}>{c.title}</h3>
                <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--bmg-dim)', margin: '16px 0 0', fontWeight: 500, maxWidth: 560 }}>{c.body}</p>
                {c.stats && (
                  <div className="bmg-case-stats">
                    {c.stats.map(([v, l]) => <div key={l}><b>{v}</b><span>{l}</span></div>)}
                  </div>
                )}
                {c.tags && (
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 26 }}>
                    {c.tags.map((t) => <span key={t} className="bmg-tag">{t}</span>)}
                  </div>
                )}
                {c.story && (
                  <a className="bmg-btn bmg-story-btn" href={c.story}>Read the case story <span>→</span></a>
                )}
              </div>
              <div className="bmg-hue">{c.visual()}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- the reel (clips + tiles from PageMedia.jsx) ----
// Pavle's long-form edits lead the landscape group
const PAVLE_CLIPS = [
  { slug: 'pavle-1', tag: 'Pavle · VLLENTO' },
  { slug: 'pavle-2', tag: 'Pavle · VLLENTO' },
  { slug: 'pavle-3', tag: 'Pavle · VLLENTO' },
  { slug: 'pavle-5', tag: 'Pavle · VLLENTO' },
  { slug: 'pavle-4', tag: 'Pavle · VLLENTO' },
];
// hand-ordered for the 3-column grid: Pavle spread through the reel, and no two
// clips from the same client (Pavle, LicenseOS, Forthwrite, web3 series) touching
const BMG_LAND_ORDER = [
  'pavle-1', 'bvs-los', 'forthwrite-ad-1',
  'l1-real-world-utility', 'ibiza-aura', 'pavle-2',
  'bvs-license-clips', 'pavle-3', 'clip-a',
  'curtis-6', 'tokenized-money-market-funds', 'los-bvs-marbella',
  'pavle-5', 'clip-0531', 'banks-run-cobol',
  'bvs-license-os', 'forthwrite-ad-3', 'pavle-4',
  'ketchikan-alaska', 'market-migration', 'los-clip-5',
  'clip-0514',
];
const BMG_LAND = (() => {
  const all = [...PAVLE_CLIPS, ...LAND_CLIPS];
  const bySlug = Object.fromEntries(all.map((c) => [c.slug, c]));
  const ordered = BMG_LAND_ORDER.map((k) => bySlug[k]).filter(Boolean);
  // anything added to LAND_CLIPS later still shows up, at the end
  return [...ordered, ...all.filter((c) => !BMG_LAND_ORDER.includes(c.slug))];
})();
const BTS_CLIPS = [
  { slug: 'pavle-bts-rooftop', tag: 'Rooftop · Warsaw' },
  { slug: 'pavle-bts-interview', tag: 'Interview setup' },
];

// behind the scenes: two phone clips from the Pavle shoots + a set photo
function BMGBehindScenes() {
  return (
    <React.Fragment>
      <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '44px 0 20px' }}>
        <span className="mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: GREEN, flex: 'none' }}>behind the scenes</span>
        <span className="mono" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.4)', flex: 'none' }}>on set with Pavle</span>
        <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.14)' }} />
      </div>
      <div className="reel-port" style={{ display: 'grid', gap: 18 }}>
        <ReelTile c={BTS_CLIPS[0]} i={0} port />
        <div className="reveal reel-item" style={{ ...delay(1, 70), position: 'relative', aspectRatio: '9 / 16', borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.12)', background: '#05060f' }}>
          <img src={BMG_IMG('pavle-bts-3.jpg')} alt="Two-camera setup in Pavle's apartment" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          <span className="mono" style={{ position: 'absolute', left: 12, bottom: 12, fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#fff', textShadow: '0 1px 6px rgba(0,0,0,0.8)', zIndex: 2 }}>Two-camera setup</span>
        </div>
        <ReelTile c={BTS_CLIPS[1]} i={2} port />
      </div>
    </React.Fragment>
  );
}
function BMGWork() {
  const ref = useReveal();
  return (
    <section ref={ref} className="bmg-sec">
      <div className="bmg-glow-mid" />
      <div className="wrap" style={{ position: 'relative' }}>
        <div className="bmg-center">
          <div className="reveal bmg-kicker">Our work</div>
          <h2 className="reveal bmg-h2" style={delay(1)}>Content that <span className="bmg-grad">moves the numbers.</span></h2>
        </div>
        <BMGBehindScenes />
        <ReelGroup label="landscape" count={BMG_LAND.length + ' clips'} clips={BMG_LAND} grid="reel-land" />
        <ReelGroup label="vertical" count={PORT_CLIPS.length + ' clips'} clips={PORT_CLIPS} grid="reel-port" port />
      </div>
    </section>
  );
}

// ---- client journey (simplified from the internal fulfilment board) ----
const BMG_JOURNEY = [
  { t: 'Onboarding', when: 'Week 1',
    d: 'Contract signed and you’re set up the same day — everything lives in one place from the start.',
    we: ['Shared Google Drive and client portal', 'Private Slack channel with the team', 'Welcome pack with everything we need'],
    you: 'Fill in a short onboarding questionnaire and send over your brand assets.' },
  { t: 'Strategy call', when: 'Week 1',
    d: 'One working session to lock in who you’re talking to, where, and what you want to be known for.',
    we: ['Goals, audience and platforms mapped', 'Competitor and niche research', 'Content pillars and positioning agreed'],
    you: 'Show up and talk. We ask the questions.' },
  { t: 'Pre-production', when: 'Before every shoot',
    d: 'We turn the strategy into a plan you can film from — nothing is improvised on the day.',
    we: ['Scripts, hooks and episode outlines', 'Brand kit, titles and thumbnail concepts', 'Shot list, location and run of show'],
    you: 'Review the plan and flag anything that doesn’t sound like you.' },
  { t: 'Filming', when: 'Shoot day',
    d: 'Our production team films with you, or we direct you step by step if you’re filming yourself.',
    we: ['Long-form episodes and interviews', 'Short-form hooks, several takes each', 'B-roll and behind the scenes'],
    you: 'Be on camera. That’s it.' },
  { t: 'Editing & review', when: 'Within the week',
    d: 'In-house editors cut everything, it passes our own quality check, then it comes to you for sign-off.',
    we: ['Editing, colour, captions and sound', 'Titles, thumbnails, descriptions', 'Internal QC before you ever see it'],
    you: 'Approve or request changes — all in one review link.' },
  { t: 'Distribution & growth', when: 'Every week',
    d: 'Content goes out on schedule across every platform, and the numbers drive what we make next.',
    we: ['Scheduled posting, 1–2 weeks ahead', 'Live dashboard of every post', 'Regular check-ins and monthly reporting'],
    you: 'Watch it grow. Tell us what’s landing in your DMs.' },
];

function BMGJourney() {
  const [on, setOn] = React.useState(0);
  const s = BMG_JOURNEY[on];
  const rhythm = ['Script', 'Film', 'Edit', 'Review', 'Post'];
  return (
    <div className="bmg-jny">
      <div className="bmg-jny-rail reveal" role="tablist" aria-label="Client journey">
        {BMG_JOURNEY.map((x, i) => (
          <button key={x.t} role="tab" aria-selected={on === i} className={'bmg-jny-step' + (on === i ? ' on' : '') + (i < on ? ' done' : '')} onClick={() => setOn(i)}>
            <span className="dot">{String(i + 1).padStart(2, '0')}</span>
            <span className="t">{x.t}</span>
            <span className="w">{x.when}</span>
          </button>
        ))}
      </div>
      <div key={on} className="bmg-card bmg-jny-panel" role="tabpanel">
        <div>
          <div className="bmg-kicker" style={{ color: 'var(--bmg-faint)' }}>Step {on + 1} of {BMG_JOURNEY.length} · {s.when}</div>
          <h3 style={{ fontSize: 'clamp(26px,2.6vw,36px)', fontWeight: 700, letterSpacing: '-0.03em', margin: '14px 0 0' }}>{s.t}</h3>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--bmg-dim)', margin: '12px 0 0', fontWeight: 500 }}>{s.d}</p>
          <div style={{ display: 'flex', gap: 10, marginTop: 26 }}>
            <button className="bmg-btn bmg-btn-d" style={{ padding: '10px 16px' }} disabled={on === 0} onClick={() => setOn(on - 1)}>← Back</button>
            <button className="bmg-btn bmg-btn-w" style={{ padding: '10px 16px' }} disabled={on === BMG_JOURNEY.length - 1} onClick={() => setOn(on + 1)}>Next step <span>→</span></button>
          </div>
        </div>
        <div className="bmg-jny-cols">
          <div>
            <div className="bmg-jny-lab">We handle</div>
            {s.we.map((w) => <div key={w} className="bmg-row" style={{ fontSize: 15 }}><span className="bmg-jny-tick">✓</span>{w}</div>)}
          </div>
          <div className="bmg-jny-you">
            <div className="bmg-jny-lab" style={{ color: '#fff' }}>Your part</div>
            <p>{s.you}</p>
          </div>
        </div>
      </div>
      <div className="reveal bmg-jny-rhythm">
        <span className="bmg-jny-lab" style={{ margin: 0 }}>Then, every week</span>
        <div className="flow">
          {rhythm.map((r, i) => <React.Fragment key={r}><span className="chip">{r}</span>{i < rhythm.length - 1 && <span className="arr">→</span>}</React.Fragment>)}
        </div>
        <span style={{ fontSize: 13, color: 'var(--bmg-faint)', fontWeight: 500 }}>Always 1–2 weeks of content ready to go.</span>
      </div>
    </div>
  );
}

// ---- process ----
function BMGProcess({ onNav }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="bmg-sec">
      <div className="wrap bmg-center">
        <div className="reveal bmg-kicker">Your journey</div>
        <h2 className="reveal bmg-h2" style={delay(1)}>From first call to <span className="bmg-grad">omnipresence.</span></h2>
        <p className="reveal bmg-lead" style={delay(2)}>Six steps, one team. Here’s exactly what happens after you say yes — and the little we need from you along the way.</p>
        <BMGJourney />
      </div>
    </section>
  );
}

// ---- team ----
const BMG_TEAM = [
  { name: 'Simon Choudhry', role: 'Founder · CEO', photo: 'simon.jpg',
    bio: "Founder & CEO of Bleu Venture Studios, BMG's parent. Polish-American, raised in Chicago, now based in Poland. Runs BMG's media practice — the content distribution and audience-monetization arm." },
  { name: 'Piotr Gładysz', role: 'Co-Founder · COO', photo: 'piotr.jpg',
    bio: "Polish-American, born in Philadelphia. Law graduate, former VP of KoLiber and co-initiator of the EU citizens' initiative One of Us. Seven years in project management at Allianz and Heineken." },
  { name: 'Radek Radziłowski', role: 'Co-Founder · Head of Fulfillment & Client Success', photo: 'radek.jpg',
    bio: 'Polish-American, 17 years in the US and 10 in branding and marketing. Built political TikTok accounts to millions of views; runs an X account with over 100M impressions.' },
  { name: 'Nick Scheller', role: 'Co-Founder · Head of Sales & Marketing', photo: 'nick.jpg',
    bio: "Scaled his own agency past six figures in eight months. Now runs BMG's sales and marketing: built the call framework every call is scored against, trains the team and takes closing calls himself." },
];

function BMGTeam() {
  const ref = useReveal();
  return (
    <section id="team" ref={ref} className="bmg-sec" style={{ scrollMarginTop: 72 }}>
      <div className="wrap bmg-center">
        <div className="reveal bmg-kicker">Meet the team</div>
        <h2 className="reveal bmg-h2" style={delay(1)}>The people <span className="bmg-grad">behind your brand.</span></h2>
        <div className="bmg-team">
          {BMG_TEAM.map((m, i) => (
            <div key={m.name} className="reveal" style={delay(i, 90)}>
              <div className="bmg-hue"><img className="bmg-shot" src={res('assets/bmg/team/' + m.photo)} alt={m.name} loading="lazy" /></div>
              <div style={{ fontWeight: 700, fontSize: 19, letterSpacing: '-0.01em', marginTop: 20 }}>{m.name}</div>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--bmg-faint)', marginTop: 6, lineHeight: 1.5 }}>{m.role}</div>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--bmg-dim)', margin: '12px 0 0', fontWeight: 500 }}>{m.bio}</p>
            </div>
          ))}
        </div>

        <div className="reveal bmg-card" style={{ marginTop: 96, width: '100%', padding: 'clamp(26px,3vw,40px)', display: 'grid', gridTemplateColumns: 'minmax(0,260px) 1fr', gap: 36, alignItems: 'center', textAlign: 'left' }}>
          <div className="bmg-hue" style={{ background: '#fff', borderRadius: 14, padding: 28, display: 'grid', placeItems: 'center' }}>
            <img src={res('assets/bvs/clients/jake-logo-clean.png')} alt="Jake Productions" style={{ width: '100%', maxHeight: 90, objectFit: 'contain', display: 'block' }} />
          </div>
          <div>
            <div className="bmg-kicker">Media partner</div>
            <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 10 }}>Jake Productions</div>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--bmg-dim)', margin: '10px 0 0', fontWeight: 500, maxWidth: 620 }}>
              The leading provider of film &amp; photo production in France &amp; Monaco — offices in Monaco, Nice, Marseille and Paris, covering the Riviera, Provence, the Alps and everywhere in between.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- contact ----
function BMGContact() {
  const ref = useReveal();
  const [v, setV] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const upd = (k, val) => setV((s) => ({ ...s, [k]: val }));
  const fields = [['name', 'Full name', 'text', 'Jane Doe'], ['email', 'Work email', 'email', 'you@company.com'], ['company', 'Company or channel', 'text', '@yourbrand']];
  return (
    <section id="contact" ref={ref} className="bmg-sec" style={{ scrollMarginTop: 72 }}>
      <div className="bmg-glow-mid" />
      <div className="wrap bmg-center" style={{ position: 'relative' }}>
        <VMark size={40} color="#fff" style={{ filter: 'drop-shadow(0 0 18px rgba(255,255,255,0.45))' }} />
        <h2 className="reveal bmg-h2" style={{ marginTop: 24 }}>Let’s globalize <span className="bmg-grad">your brand.</span></h2>
        <p className="reveal bmg-lead" style={delay(1)}>Tell us who you are and where you want to be seen. We reply within 24 hours.</p>
        <div className="bmg-contact reveal" style={delay(2)}>
          <div>
            <div className="bmg-kicker">Direct line</div>
            <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[['Simon Choudhry', 'Founder · CEO'], ['Piotr Gładysz', 'Co-Founder · COO']].map(([n, r]) => (
                <div key={n}><div style={{ fontWeight: 700, fontSize: 18 }}>{n}</div><div style={{ fontSize: 13, color: 'var(--bmg-faint)', marginTop: 3 }}>{r}</div></div>
              ))}
            </div>
            <div style={{ marginTop: 26, paddingTop: 22, borderTop: '1px solid var(--bmg-line)', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <a href="mailto:admin@bleuventurestudios.com" className="ul-link" style={{ fontSize: 15, color: '#fff' }}>admin@bleuventurestudios.com</a>
              <a href="tel:+17738140959" className="ul-link" style={{ fontSize: 15, color: 'var(--bmg-dim)' }}>+1 (773) 814-0959</a>
            </div>
          </div>
          <div className="bmg-card" style={{ padding: 'clamp(24px,3vw,38px)' }}>
            {sent ? (
              <div style={{ padding: '40px 0', textAlign: 'center' }}>
                <div style={{ fontSize: 'clamp(40px,5vw,60px)', fontWeight: 700, letterSpacing: '-0.03em' }}>Sent.</div>
                <div style={{ fontSize: 15, color: 'var(--bmg-dim)', margin: '12px 0 26px' }}>We’ll be in touch within 24 hours.</div>
                <button className="bmg-btn bmg-btn-d" onClick={() => { setSent(false); setV({}); }}>Send another</button>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                {fields.map(([k, label, type, ph]) => (
                  <label key={k} className="bmg-field"><span>{label}</span>
                    <input value={v[k] || ''} onChange={(e) => upd(k, e.target.value)} placeholder={ph} type={type} />
                  </label>
                ))}
                <label className="bmg-field"><span>What do you want to build?</span>
                  <textarea rows={4} value={v.msg || ''} onChange={(e) => upd('msg', e.target.value)} placeholder="Your goals, your platforms, where you want to be in 12 months." />
                </label>
                <button className="bmg-btn bmg-btn-w" style={{ alignSelf: 'flex-start', marginTop: 4 }} onClick={() => setSent(true)}>Send inquiry <span>→</span></button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// cursor spotlight for .bmg-card borders — one delegated listener, writes --mx/--my on the hovered card
function useCardSpotlight() {
  React.useEffect(() => {
    const move = (e) => {
      const card = e.target.closest && e.target.closest('.bmg-card');
      if (!card) return;
      const r = card.getBoundingClientRect();
      card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
      card.style.setProperty('--my', (e.clientY - r.top) + 'px');
    };
    document.addEventListener('pointermove', move, { passive: true });
    return () => document.removeEventListener('pointermove', move);
  }, []);
}

function MediaV2({ onNav }) {
  useCardSpotlight();
  return (
    <div className="bmg page-enter">
      <BMGIntro />
      <BMGHero onNav={onNav} />
      <BMGServices />
      <BMGCaseStudies />
      <BMGWork />
      <BMGProcess onNav={onNav} />
      <BMGTeam />
      <BMGContact />
    </div>
  );
}

window.Media = MediaV2;
Object.assign(window, { MediaV2, BMG_CASES, BMG_TEAM });
