// ============================================================
// BVS — Media (Bleu Media Group) — mirrors bleuventurestudios.com/media
// ============================================================

// ---- Media hero ----
function MediaHero({ onNav }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="depth" style={{ position: 'relative', overflow: 'hidden', padding: '88px 0 80px' }}>
      <Particles density={0.9} />
      <div className="depth-aurora" />
      <div className="depth-orb" style={{ width: 380, height: 380, background: 'rgba(0,23,219,0.5)', top: '-110px', right: '8%' }} />
      <div className="depth-orb" style={{ width: 320, height: 320, background: 'rgba(60,120,255,0.38)', bottom: '-120px', left: '4%', animationDelay: '2.5s' }} />
      <div className="wrap" style={{ position: 'relative' }}>
        <Eyebrow className="reveal" onBlue style={{ color: 'rgba(255,255,255,0.6)' }}>media studio · bleu media group</Eyebrow>
        <h1 className="reveal h-disp" style={{ color: '#fff', fontSize: 'clamp(31px,3.6vw,52px)', lineHeight: 0.98, marginTop: 14, maxWidth: 1100, ...delay(1) }}>
          Media Studio. <span style={{ color: 'rgba(255,255,255,0.55)' }}>Globalizing you.</span>
        </h1>
        <p className="reveal" style={{ fontSize: 'clamp(14px,1.05vw,16.5px)', fontWeight: 500, lineHeight: 1.5, color: 'rgba(255,255,255,0.82)', maxWidth: 760, marginTop: 22, ...delay(2) }}>
          We partner with founders, CEOs and creators who want consistent, evergreen organic lead gen and a fully hands-off, done-for-you growth system. We distribute your content globally and position you as the face of your industry.
        </p>
        <div className="reveal" style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap', ...delay(3) }}>
          <Button kind="white" onClick={() => onNav('case-studies')} arrow>See Our Work</Button>
          <Button kind="ghost-w" onClick={() => onNav('contact')}>Get in Touch</Button>
        </div>
      </div>
    </section>
  );
}

// ---- full-service statement ----
function MediaStatement() {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ background: PAPER, padding: '104px 0' }}>
      <div className="wrap">
        <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
          <span className="chip chip-blue">👋 full-service media production</span>
        </div>
        <h2 className="reveal h-disp" style={{ fontSize: 'clamp(25px,2.8vw,40px)', maxWidth: 1100, lineHeight: 1.04, ...delay(1) }}>
          We’re a full-service media production company. Our goal is to <span style={{ color: BLUE }}>globalize you</span> through AI-driven content &amp; distribution.
        </h2>
      </div>
    </section>
  );
}

// ---- Top Clients marquee (real client roster + imagery from the live site) ----
const TOP_CLIENTS = [
  { name: 'RYT Chain', role: 'Pioneering Layer-1 Blockchain', img: 'assets/bvs/marquee/ryt-chain.jpg' },
  { name: 'Big Loud Rock Records', role: 'Record Label', img: 'assets/bvs/marquee/big-loud-rock.jpg' },
  { name: 'Boeshi', role: 'Influencer', img: 'assets/bvs/marquee/boeshi.jpg' },
  { name: 'Hardy', role: 'Artist', img: 'assets/bvs/marquee/hardy.jpg' },
  { name: 'Letdown.', role: 'Artist', img: 'assets/bvs/marquee/letdown.jpg' },
  { name: 'Solo E TV', role: 'Entrepreneur', img: 'assets/bvs/marquee/solo-e-tv.jpg' },
  { name: 'Tai Lopez', role: 'Entrepreneur', img: 'assets/bvs/marquee/tai-lopez.jpg' },
  { name: 'Rayston Neem', role: 'Entrepreneur', img: 'assets/bvs/marquee/rayston-neem.jpg' },
  { name: 'Moses Heredia', role: 'Entrepreneur', img: 'assets/bvs/marquee/moses-heredia.jpg' },
  { name: 'Dontez Akram', role: 'Entrepreneur', img: 'assets/bvs/marquee/dontez-akram.jpg' },
];

function TopClients() {
  const ref = useReveal();
  const run = [...TOP_CLIENTS, ...TOP_CLIENTS];
  return (
    <section ref={ref} style={{ background: '#fff', padding: '104px 0', overflow: 'hidden' }}>
      <div className="wrap">
        <Eyebrow className="reveal">some of our top clients</Eyebrow>
        <h2 className="reveal h-disp" style={{ fontSize: 'clamp(23px,2.4vw,34px)', marginTop: 12, marginBottom: 8, ...delay(1) }}>Brands &amp; creators we’ve globalized.</h2>
      </div>
      <div style={{ position: 'relative', marginTop: 28 }}>
        <div className="marquee" style={{ gap: 18 }}>
          {run.map((c, i) => (
            <div key={i} style={{ width: 230, flex: 'none' }}>
              <div style={{ aspectRatio: '4 / 5', borderRadius: 14, overflow: 'hidden', border: '1px solid var(--bvs-line)', background: PAPER_DIM }}>
                {c.img ? (
                  <img src={res(c.img)} alt={c.name} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                ) : (
                  /* no artwork on file yet — branded placeholder beats a broken image */
                  <div aria-label={c.name} className="dotgrid" style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, background: PAPER_DIM }}>
                    <VMark size={26} color="rgba(10,10,10,0.28)" />
                    <span className="mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(10,10,10,0.4)', textAlign: 'center', padding: '0 14px', lineHeight: 1.5 }}>{c.name}</span>
                  </div>
                )}
              </div>
              <div style={{ marginTop: 12 }}>
                <div style={{ fontWeight: 700, fontSize: 15, lineHeight: 1.15 }}>{c.name}</div>
                <div className="mono" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', color: 'rgba(10,10,10,0.45)', marginTop: 4 }}>{c.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- metrics ----
function MediaMetrics() {
  const ref = useReveal();
  const stats = [['1.5B+', 'Views Generated'], ['15K+', 'Clips Posted'], ['10M+', 'Followers Managed']];
  return (
    <section ref={ref} style={{ background: INK, color: '#fff', padding: '104px 0' }}>
      <div className="wrap">
        <Eyebrow className="reveal" onBlue style={{ color: 'rgba(255,255,255,0.55)' }}>results &amp; analytics</Eyebrow>
        <h2 className="reveal h-disp" style={{ color: '#fff', fontSize: 'clamp(23px,2.4vw,33px)', marginTop: 12, ...delay(1) }}>Performance, by the numbers.</h2>
        <div className="mm-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '0 40px', marginTop: 24 }}>
          {stats.map(([v, l], i) => (
            <div key={l} className="reveal" style={{ ...delay(i), borderTop: '1px solid rgba(255,255,255,0.22)', padding: '24px 0' }}>
              <div className="h-disp" style={{ color: i === 2 ? GREEN : '#fff', fontSize: 'clamp(33px,3.6vw,54px)', lineHeight: 0.85 }}>{v}</div>
              <div className="mono" style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginTop: 14 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- proven strategies (3 cards) ----
function Strategies() {
  const ref = useReveal();
  const cards = [
    ['Multi-Account Distribution', 'Deploy your content across organic accounts to create omnipresence and maximize algorithm exposure across Instagram, TikTok and YouTube.'],
    ['Pre & Post Production', 'From designing your brand identity and content structure to the full editing process, final delivery and distribution across every platform — we manage everything start to finish. All you do is film and run your business.'],
    ['Content Strategy', 'Mass distribution expands your influence into untapped audiences — new followers, business opportunities and brand advocates. Continuous creation builds a long-term, sustainable brand, not short-term spikes.'],
  ];
  return (
    <section ref={ref} style={{ background: PAPER, padding: '74px 0' }}>
      <div className="wrap">
        <Eyebrow className="reveal">our proven strategies</Eyebrow>
        <h2 className="reveal h-disp" style={{ fontSize: 'clamp(25px,2.6vw,38px)', marginTop: 12, maxWidth: 820, ...delay(1) }}>Our proven strategies for creator success.</h2>
        <p className="reveal" style={{ fontSize: 17, lineHeight: 1.5, color: 'rgba(10,10,10,0.6)', maxWidth: 820, marginTop: 16, fontWeight: 500, ...delay(2) }}>
          We combine high-level content strategy, world-class creative execution and a multi-platform distribution system to scale your media presence — expanding your reach, amplifying your influence and making your brand impossible to ignore.
        </p>
        <div className="strat-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18, marginTop: 40 }}>
          {cards.map(([t, d], i) => (
            <div key={t} className="reveal card" style={{ ...delay(i), padding: '28px 26px 30px', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div className="mono" style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', color: BLUE }}>{String(i + 1).padStart(2, '0')}</div>
              <div className="h-disp" style={{ fontSize: 'clamp(20px,2vw,26px)' }}>{t}</div>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'rgba(10,10,10,0.62)', margin: 0, fontWeight: 500 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- how we stand out (comparison) ----
function StandOut() {
  const ref = useReveal();
  const others = ['Slow turnaround', 'Zero communication', 'Not following trends', 'Fulfillment issues'];
  const bvs = ['Quick and efficient delivery', '24/7 Slack channel communication', 'On top of the latest content trends', 'Seamless fulfillment'];
  return (
    <section ref={ref} style={{ background: '#fff', padding: '74px 0' }}>
      <div className="wrap">
        <Eyebrow className="reveal">why us</Eyebrow>
        <h2 className="reveal h-disp" style={{ fontSize: 'clamp(25px,2.6vw,38px)', marginTop: 12, maxWidth: 820, ...delay(1) }}>How we stand out from other agencies.</h2>
        <p className="reveal" style={{ fontSize: 17, lineHeight: 1.5, color: 'rgba(10,10,10,0.6)', maxWidth: 820, marginTop: 16, fontWeight: 500, ...delay(2) }}>
          Most agencies depend on a scattered network of freelancers — inconsistent quality and missed deadlines. We use an in-house creative team and a structured content system covering ideation, scripting, editing, thumbnails and multi-platform distribution — giving you predictable output and full control over your brand.
        </p>
        <div className="cmp-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginTop: 40 }}>
          <div className="reveal card" style={{ padding: '30px 30px 34px' }}>
            <div className="mono" style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(10,10,10,0.45)', marginBottom: 20 }}>Other media agencies</div>
            {others.map((o) => (
              <div key={o} className="hair" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 0' }}>
                <span style={{ width: 20, height: 20, borderRadius: '50%', background: 'rgba(239,43,43,0.12)', color: 'var(--bvs-red)', display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 800, flex: 'none' }}>×</span>
                <span style={{ fontSize: 15.5, fontWeight: 600, color: 'rgba(10,10,10,0.6)' }}>{o}</span>
              </div>
            ))}
          </div>
          <div className="reveal" style={{ ...delay(1), background: BLUE, color: '#fff', borderRadius: 18, padding: '30px 30px 34px' }}>
            <div className="mono" style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 8 }}><VMark size={14} color="#fff" />Bleu Venture Studios</div>
            {bvs.map((b) => (
              <div key={b} className="hair-w" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 0' }}>
                <span style={{ width: 20, height: 20, borderRadius: '50%', background: GREEN, color: INK, display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 800, flex: 'none' }}>✓</span>
                <span style={{ fontSize: 15.5, fontWeight: 600 }}>{b}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- our process (5 steps) ----
function Process() {
  const ref = useReveal();
  const steps = [
    ['Discovery &\nOnboarding', 'A personalized call to understand your goals and map the partnership.'],
    ['Pre-Production', 'Ideation, brand alignment, scripting and weekly content structure — every piece strategic.'],
    ['Post-Production', 'Elite editing, sound design, trailers, creative copy and motion — all under one roof.'],
    ['Mass Distribution', 'Short-form, long-form and platform-specific posting engineered for omnipresence.'],
    ['Support & Analytics', 'Transparent KPI reporting translated into insights that drive continuous optimization.'],
  ];
  return (
    <section ref={ref} className="depth" style={{ color: '#fff', padding: '74px 0', position: 'relative', overflow: 'hidden' }}>
      <Particles density={1} />
      <div className="depth-aurora" />
      <div className="wrap" style={{ position: 'relative' }}>
        <Eyebrow className="reveal" onBlue style={{ color: 'rgba(255,255,255,0.6)' }}>our process</Eyebrow>
        <h2 className="reveal h-disp" style={{ color: '#fff', fontSize: 'clamp(25px,2.6vw,38px)', marginTop: 12, maxWidth: 760, ...delay(1) }}>From first call to omnipresence.</h2>
        <div style={{ position: 'relative', marginTop: 52, paddingLeft: 8 }}>
          {/* the path */}
          <div className="jrny-line" style={{ position: 'absolute', left: 25, top: 18, bottom: 18, width: 2, background: 'linear-gradient(180deg, ' + GREEN + ' 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.12) 100%)' }}>
            <div className="jrny-pulse" />
          </div>
          {steps.map(([t, d], i) => (
            <div key={t} className="reveal" style={{ ...delay(i, 80), position: 'relative', display: 'grid', gridTemplateColumns: '52px 1fr', gap: 24, alignItems: 'center', padding: '16px 0' }}>
              <div className={'jrny-node j' + (i + 1)} style={{ position: 'relative', zIndex: 1, width: 36, height: 36, borderRadius: '50%', background: '#fff', color: BLUE, display: 'grid', placeItems: 'center', fontFamily: 'var(--bvs-mono)', fontSize: 13, fontWeight: 700, boxShadow: '0 0 0 6px rgba(0,23,219,1), 0 0 0 7px rgba(255,255,255,0.18)' }}>{String(i + 1).padStart(2, '0')}</div>
              <div className="proc-row" style={{ display: 'flex', alignItems: 'baseline', gap: 18, flexWrap: 'wrap' }}>
                <div className="h-disp" style={{ color: '#fff', fontSize: 'clamp(19px,1.9vw,25px)', lineHeight: 1.1, minWidth: 220, whiteSpace: 'pre-line' }}>{t}</div>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: 'rgba(255,255,255,0.7)', margin: 0, fontWeight: 500, maxWidth: 440 }}>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- our work (video reel) ----
// The static server can't stream video to a <video src=> (no range-request
// support), so we fetch the file as a blob and play from an object URL.
// With a full reel of clips we must NOT do that on mount — it would pull every
// video at page load. Nothing is fetched until the viewer actually clicks a
// tile; until then only the poster JPG is on the wire.
function BlobVideo({ src, poster, style }) {
  const vidRef = React.useRef(null);
  const urlRef = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const [state, setState] = React.useState('idle'); // idle | loading | ready
  const stateRef = React.useRef('idle');
  const setPhase = (s) => { stateRef.current = s; setState(s); };

  // revoke the object URL on unmount / src change
  React.useEffect(() => () => { if (urlRef.current) URL.revokeObjectURL(urlRef.current); }, [src]);

  const play = (v) => {
    v.muted = false;
    v.play().catch(() => { v.muted = true; v.play().catch(() => {}); });
  };

  const toggle = () => {
    const v = vidRef.current;
    if (!v) return;
    if (stateRef.current === 'loading') return;
    if (stateRef.current === 'ready') {
      if (v.paused) play(v); else v.pause();
      return;
    }
    setPhase('loading');
    fetch(src).then((r) => r.blob()).then((b) => {
      if (!vidRef.current) return;
      urlRef.current = URL.createObjectURL(b);
      vidRef.current.src = urlRef.current;
      setPhase('ready');
      play(vidRef.current);
    }).catch(() => setPhase('idle'));
  };

  return (
    <div onClick={toggle} style={{ position: 'absolute', inset: 0, cursor: 'pointer' }}>
      <video ref={vidRef} poster={poster} loop playsInline preload="none"
        onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)}
        style={{ ...style, width: '100%', height: '100%' }}></video>
      {!playing && (
        <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 52, height: 52, borderRadius: '50%', background: 'rgba(255,255,255,0.16)', backdropFilter: 'blur(4px)', border: '1px solid rgba(255,255,255,0.5)', display: 'grid', placeItems: 'center', pointerEvents: 'none' }}>
          {state === 'loading'
            ? <span className="reel-spin" />
            : <span style={{ width: 0, height: 0, borderTop: '8px solid transparent', borderBottom: '8px solid transparent', borderLeft: '13px solid #fff', marginLeft: 3 }} />}
        </div>
      )}
    </div>
  );
}

// slug = assets/bvs/work/<slug>.mp4 with a matching <slug>-poster.jpg
// `port` marks a 9:16 clip; everything else renders 16:9. Portrait and
// landscape are interleaved so the masonry columns stay visually mixed.
const WORK_CLIPS = [
  { slug: 'bvs-los', tag: 'BVS × LicenseOS' },
  { slug: 'ryt-7', tag: 'RYT Chain', port: true },
  { slug: 'ibiza-aura', tag: 'Ibiza Aura' },
  { slug: 'short-form', tag: 'Short-Form', port: true },
  { slug: 'forthwrite-ad-1', tag: 'Forthwrite Ad' },
  { slug: 'sakana-fugu', tag: 'Sakana', port: true },
  { slug: 'bvs-license-clips', tag: 'LicenseOS' },
  { slug: 'video-1', tag: 'Short-Form', port: true },
  { slug: 'los-bvs-marbella', tag: 'Marbella' },
  { slug: 'clip-a', tag: 'Social Edit' },
  { slug: 'curtis-6', tag: 'Curtis' },
  { slug: 'clip-b', tag: 'Social Edit', port: true },
  { slug: 'forthwrite-ad-3', tag: 'Forthwrite Ad' },
  { slug: 'ketchikan-alaska', tag: 'Travel' },
  { slug: 'bvs-license-os', tag: 'LicenseOS' },
  { slug: 'clip-c', tag: 'Social Edit', port: true },
  { slug: 'los-clip-5', tag: 'LicenseOS' },
  { slug: 'l1-real-world-utility', tag: 'Web3 · L1 Utility' },
  { slug: 'clip-0531', tag: 'Brand Film' },
  { slug: 'tokenized-money-market-funds', tag: 'Tokenized Funds' },
  { slug: 'clip-0514', tag: 'Brand Film' },
  { slug: 'banks-run-cobol', tag: 'Fintech' },
  { slug: 'market-migration', tag: 'Market Migration' },
];
// split by orientation — each group is a uniform ratio, so a plain grid tiles
// exactly (15 landscape over 3 cols = 5 rows; 8 vertical over 4 cols = 2 rows)
const LAND_CLIPS = WORK_CLIPS.filter((c) => !c.port);
const PORT_CLIPS = WORK_CLIPS.filter((c) => c.port);

function ReelTile({ c, i, port }) {
  return (
    <div className="reveal reel-item" style={{ ...delay(i % 4, 70), position: 'relative', aspectRatio: port ? '9 / 16' : '16 / 9', borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.12)', background: '#05060f', boxShadow: '0 30px 60px -36px rgba(0,0,0,0.7)' }}>
      <BlobVideo
        src={res('assets/bvs/work/' + c.slug + '.mp4')}
        poster={res('assets/bvs/work/' + c.slug + '-poster.jpg')}
        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, pointerEvents: 'none' }}>{c.tag}</span>
    </div>
  );
}

function ReelGroup({ label, count, clips, grid, port }) {
  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' }}>{label}</span>
        <span className="mono" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.4)', flex: 'none' }}>{count}</span>
        <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.14)' }} />
      </div>
      <div className={grid} style={{ display: 'grid', gap: 18 }}>
        {clips.map((c, i) => <ReelTile key={c.slug} c={c} i={i} port={port} />)}
      </div>
    </React.Fragment>
  );
}

function OurWork() {
  const ref = useReveal();
  return (
    <section ref={ref} className="depth" style={{ padding: '74px 0', position: 'relative', overflow: 'hidden' }}>
      <Particles density={0.8} />
      <div className="depth-aurora" />
      <div className="wrap" style={{ position: 'relative' }}>
        <Eyebrow className="reveal" onBlue style={{ color: 'rgba(255,255,255,0.6)' }}>our work</Eyebrow>
        <h2 className="reveal h-disp" style={{ color: '#fff', fontSize: 'clamp(25px,2.6vw,38px)', marginTop: 12, maxWidth: 760, ...delay(1) }}>Content that moves the numbers.</h2>
        <ReelGroup label="landscape" count={LAND_CLIPS.length + ' clips'} clips={LAND_CLIPS} grid="reel-land" />
        <ReelGroup label="vertical" count={PORT_CLIPS.length + ' clips'} clips={PORT_CLIPS} grid="reel-port" port />
      </div>
    </section>
  );
}

// ---- media partners (Jake Productions) ----
function MediaPartner({ onNav }) {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ background: PAPER, padding: '74px 0' }}>
      <div className="wrap">
        <Eyebrow className="reveal">media partners</Eyebrow>
        <div className="jake-grid reveal" style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 40, alignItems: 'center', marginTop: 28, ...delay(1) }}>
          <div style={{ background: '#fff', borderRadius: 10, padding: '40px', display: 'grid', placeItems: 'center', minHeight: 200, border: '1px solid var(--bvs-line)' }}>
            <img src={res('assets/bvs/clients/jake-logo-clean.png')} alt="Jake Productions" style={{ width: '78%', maxHeight: 130, objectFit: 'contain', display: 'block' }} />
          </div>
          <div>
            <h2 className="h-disp" style={{ fontSize: 'clamp(24px,2.6vw,38px)', marginBottom: 16 }}>Jake Productions<span style={{ color: BLUE }}>.</span></h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: 'rgba(10,10,10,0.64)', maxWidth: 600, fontWeight: 500, margin: '0 0 22px' }}>
              The leading provider of film &amp; photo production in France &amp; Monaco. From offices in Monaco, Nice, Marseille and Paris, they cover all of France — Provence, the French Riviera, Bordeaux, Burgundy, the Alps, Cannes, Saint-Tropez, Corsica and everywhere in between.
            </p>
            <Button kind="ghost-b" onClick={() => onNav('contact')} arrow>Book a Consultation</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Media({ onNav }) {
  return (
    <div className="page-enter">
      <MediaHero onNav={onNav} />
      <MediaStatement />
      <TopClients />
      <MediaMetrics />
      <Strategies />
      <OurWork />
      <StandOut />
      <Process />
      <CaseStudiesSection side="MEDIA" onNav={onNav} bg={PAPER} />
      <TeamSection side="media" />
      <MediaPartner onNav={onNav} />
      <ContactSection defaultSide="media" />
    </div>
  );
}

Object.assign(window, { Media, TOP_CLIENTS });