// Portfolio Intel · embedded interactive
// Adapted from uploads/portfolio-intel.jsx for AGI Intelligence Report v8.
// Changes from source:
//   - ES module import → React globals
//   - Scoped under .report-portfolio-intel so the warm palette doesn't leak
//   - 'Cormorant Garamond' → 'Fraunces' (matches the rest of the report)
//   - body{margin:0} removed; noise overlay scoped to mount root (not viewport-fixed)
//   - Added ReactDOM mount at the bottom

(function () {
const { useState, useEffect, useCallback } = React;

// ============================================================================
// COMPANIES — broadcast slides
// ============================================================================

const COMPANIES = {
  elorian: {
    name: "Elorian",
    tag: "Different Base Model",
    layer: "L3 · Foundation",
    lenses: ["Multimodal", "World Models", "Robotics"],
    bigStat: "Vision-first",
    bigStatSub: "No text bottleneck",
    sideStat: { value: "$55M", label: "Seed · Apr 2026" },
    altStat: { value: "$300M", label: "Valuation" },
    script: "When Gemini-class models compress image and video into text-first attention, they inherit a text-first prior. Elorian's bet is that vision-native architectures see the world differently — and that gap widens, not narrows, as the giants merge more modalities into one stack.",
    backers: "Striker · Menlo · Altimeter · NVIDIA · Jeff Dean",
    pedigree: "ex-DeepMind · ex-Apple",
    transcript: null,
    visual: "eye",
  },
  cartesia: {
    name: "Cartesia",
    tag: "Different Base Model",
    layer: "L3 · Voice",
    lenses: ["Multimodal", "Robotics"],
    bigStat: "<100",
    bigStatSub: "ms · text-to-speech",
    sideStat: { value: "$191M", label: "Total raised" },
    altStat: { value: "Sonic-3", label: "Oct 2025 launch" },
    script: "Gemini Live and ChatGPT voice mode set the latency bar at sub-second. SSM/Mamba architectures hit sub-100ms structurally — not through optimization. As multimodal agents demand voice as a first-class output, the architecture choice compounds.",
    backers: "Kleiner · Index · Lightspeed · NVIDIA",
    pedigree: "Stanford AI Lab · Mamba lineage",
    transcript: {
      quote: "For voice to be viable, cost has to be closer to $5 per million characters — a big jump from $100.",
      source: "Inworld AI · TTS interview · Aug 2025",
    },
    visual: "waveform",
  },
  livekit: {
    name: "LiveKit",
    tag: "Delivery Layer",
    layer: "L4 · Real-time transport",
    lenses: ["Multi-agent", "Multimodal", "Robotics"],
    bigStat: "3",
    bigStatSub: "ChatGPT · Grok · ElevenLabs",
    sideStat: { value: "$45M", label: "Series B" },
    altStat: { value: "OSS", label: "+ cloud" },
    script: "Every merged multimodal agent eventually has to stream — video in, audio out, telemetry, actions. LiveKit already won this layer for voice. Robotics is the same shape with higher stakes, and the merge thesis turns robots into the next obvious customer.",
    backers: "Altimeter",
    pedigree: "Open-source · neutral transport",
    transcript: {
      quote: "Robotics foundation models follow the LLM trajectory — they become so big they can only live in the cloud.",
      source: "David Chen, GM Robotics · LiveKit · Feb 2026",
    },
    visual: "network",
  },
  nomadic: {
    name: "Nomadic ML",
    tag: "Vertical Specialization",
    layer: "L5/L6 · Vertical VLM",
    lenses: ["Multi-agent", "Multimodal", "Robotics"],
    bigStat: "99%",
    bigStatSub: "vs 80% on general VLM",
    sideStat: { value: "+19pts", label: "Above generalist" },
    altStat: { value: "Seed", label: "Pear VC PearX" },
    script: "The merge thesis assumes general models will be good enough. They aren't, at 95-99% accuracy on robotic footage. Nomadic ensembles fine-tuned vision-language models per vertical, per sub-vertical, per customer mental model. The gap between Gemini-grade describing and DMV-grade reviewing is the moat.",
    backers: "Pear VC",
    pedigree: "ex-Microsoft GPT-3 · ex-Snowflake",
    transcript: {
      quote: "Enterprises don't want labeling at 50% or even 80%. Minimum 95%, if not 99%.",
      source: "Mustafa, CEO · Nomadic ML · Feb 2026",
    },
    visual: "accuracy",
  },
  higgsfield: {
    name: "Higgsfield",
    tag: "Creator Surface",
    layer: "L6 · Consumer creative",
    lenses: ["Multimodal", "World Models"],
    bigStat: "4",
    bigStatSub: "Sora · Veo · Kling · Seedance",
    sideStat: { value: "~$50M", label: "Total raised" },
    altStat: { value: "1 UX", label: "Across model wars" },
    script: "The model wars are Higgsfield's tailwind, not their threat. Every frontier video model wrapped under one Cinema Studio UX. When Veo 4 leapfrogs Sora 3 next quarter, Higgsfield users don't switch products. The wrapper compounds with every model release.",
    backers: "Menlo Ventures",
    pedigree: "Alex Mashrabov · ex-Snap GenAI head",
    transcript: {
      quote: "Veo's goal is to be the world's best model — 'best' depends on user and use case. Flow is a tool.",
      source: "Ricky Wong, Veo3 lead PM · July 2025",
    },
    visual: "stack",
  },
};

const COMPANY_ORDER = ['elorian', 'cartesia', 'livekit', 'nomadic', 'higgsfield'];
const SLIDE_DURATION_MS = 9000;

// ============================================================================
// SLIDE VISUAL — varies per company (using report palette)
// ============================================================================

function SlideVisual({ kind }) {
  if (kind === "eye") {
    return (
      <svg viewBox="0 0 300 300" className="slide-svg">
        <defs>
          <radialGradient id="eyeGrad2" cx="50%" cy="50%">
            <stop offset="0%" stopColor="#c9a96e" />
            <stop offset="55%" stopColor="#0a1626" />
            <stop offset="100%" stopColor="#0a1626" />
          </radialGradient>
        </defs>
        <circle cx="150" cy="150" r="140" fill="none" stroke="#e8e2d5" strokeWidth="1" opacity="0.35" />
        <ellipse cx="150" cy="150" rx="135" ry="75" fill="none" stroke="#e8e2d5" strokeWidth="1.2" />
        <circle cx="150" cy="150" r="50" fill="url(#eyeGrad2)" />
        <circle cx="150" cy="150" r="18" fill="#0a1626" />
        <circle cx="162" cy="138" r="5" fill="#f4ede0" />
        {Array.from({length: 8}, (_,i) => (
          <line key={i} x1="20" y1={90 + i*22} x2="280" y2={90 + i*22} stroke="#c9a96e" strokeWidth="0.4" opacity="0.35">
            <animate attributeName="opacity" values="0.1;0.5;0.1" dur="3s" begin={`${i*0.2}s`} repeatCount="indefinite" />
          </line>
        ))}
      </svg>
    );
  }
  if (kind === "waveform") {
    const bars = Array.from({length: 36}, (_, i) => {
      const t = i / 36;
      return 12 + Math.abs(Math.sin(t * 14) * Math.cos(t*4)) * 80 + Math.sin(i*0.9)*14;
    });
    return (
      <div className="bcast-wave">
        {bars.map((h, i) => (
          <div key={i} className="bcast-wave-bar" style={{ height: `${h}px`, animationDelay: `${i*60}ms` }} />
        ))}
      </div>
    );
  }
  if (kind === "network") {
    return (
      <svg viewBox="0 0 320 260" className="slide-svg">
        <g fontFamily="JetBrains Mono, monospace" fontSize="9">
          <rect x="115" y="20" width="90" height="40" fill="none" stroke="#e8e2d5" strokeWidth="1.2" />
          <text x="160" y="44" textAnchor="middle" fill="#e8e2d5" letterSpacing="2">MODEL</text>
          <circle cx="160" cy="130" r="34" fill="none" stroke="#c9a96e" strokeWidth="1.5" />
          <text x="160" y="128" textAnchor="middle" fontSize="11" fill="#c9a96e" letterSpacing="2">LIVE</text>
          <text x="160" y="142" textAnchor="middle" fontSize="11" fill="#c9a96e" letterSpacing="2">KIT</text>
          <rect x="20" y="200" width="60" height="32" fill="none" stroke="#e8e2d5" />
          <text x="50" y="220" textAnchor="middle" fill="#e8e2d5" letterSpacing="1.5">VOICE</text>
          <rect x="130" y="200" width="60" height="32" fill="none" stroke="#e8e2d5" />
          <text x="160" y="220" textAnchor="middle" fill="#e8e2d5" letterSpacing="1.5">ROBOT</text>
          <rect x="240" y="200" width="60" height="32" fill="none" stroke="#e8e2d5" />
          <text x="270" y="220" textAnchor="middle" fill="#e8e2d5" letterSpacing="1.5">VIDEO</text>
          <line x1="160" y1="60" x2="160" y2="96" stroke="#e8e2d5" strokeWidth="1" />
          <line x1="138" y1="152" x2="60" y2="200" stroke="#c9a96e" strokeWidth="1" strokeDasharray="3 4"/>
          <line x1="160" y1="164" x2="160" y2="200" stroke="#c9a96e" strokeWidth="1" strokeDasharray="3 4"/>
          <line x1="182" y1="152" x2="265" y2="200" stroke="#c9a96e" strokeWidth="1" strokeDasharray="3 4"/>
          <circle cx="100" cy="178" r="3" fill="#c9a96e"><animate attributeName="opacity" values="1;0;1" dur="1.6s" repeatCount="indefinite" /></circle>
          <circle cx="160" cy="182" r="3" fill="#c9a96e"><animate attributeName="opacity" values="0;1;0" dur="1.6s" repeatCount="indefinite" /></circle>
          <circle cx="220" cy="178" r="3" fill="#c9a96e"><animate attributeName="opacity" values="1;0;1" dur="1.9s" repeatCount="indefinite" /></circle>
        </g>
      </svg>
    );
  }
  if (kind === "accuracy") {
    const rows = [
      { name: "Bounding boxes", pct: 50, hot: false },
      { name: "General VLM", pct: 80, hot: false },
      { name: "Enterprise floor", pct: 95, hot: false, target: true },
      { name: "Nomadic ensemble", pct: 99, hot: true },
    ];
    return (
      <div className="bcast-acc">
        {rows.map((r, i) => (
          <div key={i} className="bcast-acc-row" style={{ animationDelay: `${i*150 + 200}ms` }}>
            <div className="bcast-acc-name">{r.name}</div>
            <div className="bcast-acc-track">
              <div className={`bcast-acc-fill ${r.hot ? 'hot' : ''} ${r.target ? 'target' : ''}`} style={{ width: `${r.pct}%`, animationDelay: `${i*150 + 400}ms` }} />
            </div>
            <div className={`bcast-acc-pct ${r.hot ? 'hot' : ''}`}>{r.pct}%</div>
          </div>
        ))}
      </div>
    );
  }
  if (kind === "stack") {
    const models = ['SORA 2', 'VEO 3.1', 'KLING 3.0', 'SEEDANCE'];
    return (
      <div className="bcast-stack">
        <div className="bcast-stack-top">HIGGSFIELD · CINEMA STUDIO</div>
        <div className="bcast-stack-arrow">↓</div>
        {models.map((m, i) => (
          <div key={m} className="bcast-stack-row" style={{ animationDelay: `${600 + i*180}ms` }}>{m}</div>
        ))}
      </div>
    );
  }
  return null;
}

// ============================================================================
// SLIDE
// ============================================================================

function BroadcastSlide({ company, slideKey, total, idx }) {
  return (
    <div className="bcast-slide" key={slideKey}>
      {/* corner brackets */}
      <div className="bcast-bracket br-tl" />
      <div className="bcast-bracket br-tr" />
      <div className="bcast-bracket br-bl" />
      <div className="bcast-bracket br-br" />

      {/* top strip — segment counter + timecode only */}
      <div className="bcast-topstrip">
        <span className="bcast-segment">SEGMENT {String(idx+1).padStart(2,'0')} / {String(total).padStart(2,'0')}</span>
        <span className="bcast-timecode mono"><LiveClock /></span>
      </div>

      {/* main content */}
      <div className="bcast-main">
        <div className="bcast-left">
          <div className="bcast-tag-row">
            <span className="bcast-tag-bold">{company.tag}</span>
            <span className="bcast-tag-sep">·</span>
            <span className="bcast-tag-layer">{company.layer}</span>
          </div>
          <div className="bcast-lenses">
            {company.lenses.map((l) => (
              <span key={l} className="bcast-lens">{l}</span>
            ))}
          </div>
          <h2 className="bcast-name">{company.name}</h2>
          <div className="bcast-bigstat-wrap">
            <div className="bcast-bigstat">{company.bigStat}</div>
            <div className="bcast-bigstat-sub">{company.bigStatSub}</div>
          </div>
          <div className="bcast-substats">
            <div className="bcast-substat">
              <div className="bcast-substat-v">{company.sideStat.value}</div>
              <div className="bcast-substat-l">{company.sideStat.label}</div>
            </div>
            <div className="bcast-substat">
              <div className="bcast-substat-v">{company.altStat.value}</div>
              <div className="bcast-substat-l">{company.altStat.label}</div>
            </div>
          </div>
        </div>

        <div className="bcast-right">
          <SlideVisual kind={company.visual} />
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// LIVE CLOCK
// ============================================================================

function LiveClock() {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  const hh = String(now.getUTCHours()).padStart(2,'0');
  const mm = String(now.getUTCMinutes()).padStart(2,'0');
  const ss = String(now.getUTCSeconds()).padStart(2,'0');
  return <>{hh}:{mm}:{ss} <span style={{opacity:0.55}}>UTC</span></>;
}

// ============================================================================
// MAIN
// ============================================================================

function PortfolioIntel() {
  const [idx, setIdx] = useState(0);
  const [playing, setPlaying] = useState(true);
  const [progressKey, setProgressKey] = useState(0);

  const next = useCallback(() => {
    setIdx(i => (i + 1) % COMPANY_ORDER.length);
    setProgressKey(k => k + 1);
  }, []);
  const prev = useCallback(() => {
    setIdx(i => (i - 1 + COMPANY_ORDER.length) % COMPANY_ORDER.length);
    setProgressKey(k => k + 1);
  }, []);
  const goTo = useCallback((i) => {
    setIdx(i);
    setProgressKey(k => k + 1);
  }, []);

  useEffect(() => {
    if (!playing) return;
    const t = setTimeout(() => {
      setIdx(i => (i + 1) % COMPANY_ORDER.length);
      setProgressKey(k => k + 1);
    }, SLIDE_DURATION_MS);
    return () => clearTimeout(t);
  }, [idx, playing]);

  useEffect(() => {
    const handler = (e) => {
      if (e.key === 'ArrowRight') next();
      else if (e.key === 'ArrowLeft') prev();
      else if (e.key === ' ') { e.preventDefault(); setPlaying(p => !p); }
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [next, prev]);

  const currentKey = COMPANY_ORDER[idx];
  const currentCompany = COMPANIES[currentKey];

  return (
    <div className="intel-root">
      <style>{`
        /* ============================
           INTELLIGENCE REPORT PALETTE
           ============================
           Background ivory:  #f4ede0
           Deep ink (navy):   #0a1626
           Mid ink:           #1f2a3a
           Body text:         #2a3142
           Muted text:        #6b7387
           Rules / dividers:  #c5bca8
           Accent (warm tan): #c9a96e
           Subtle accent:     #8a6f3d
        */

        .intel-root {
          background: #f4ede0;
          color: #1f2a3a;
          font-family: "DM Sans", -apple-system, sans-serif;
          padding: 48px 44px 56px;
          position: relative;
          background-image:
            radial-gradient(circle at 12% 4%, rgba(10,22,38,0.035) 0%, transparent 45%),
            radial-gradient(circle at 88% 92%, rgba(201,169,110,0.05) 0%, transparent 50%);
          overflow: hidden;
        }
        .intel-root::before {
          content: '';
          position: absolute;
          inset: 0;
          background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='0.85'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.09 0 0 0 0 0.14 0 0 0 0.32 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
          opacity: 0.14;
          pointer-events: none;
          mix-blend-mode: multiply;
          z-index: 1;
        }
        .intel-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; }

        .display-serif { font-family: "Fraunces", Georgia, serif; }
        .mono { font-family: "JetBrains Mono", monospace; }
        .dm { font-family: "DM Sans", sans-serif; }

        /* MASTHEAD */
        .pi-masthead {
          border-bottom: 1px solid #0a1626;
          padding-bottom: 28px;
          margin-bottom: 36px;
        }
        .pi-masthead-row {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          flex-wrap: wrap;
          gap: 16px;
        }
        .pi-masthead-kicker {
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: 0.24em;
          color: #6b7387;
          margin-bottom: 14px;
          text-transform: uppercase;
        }
        .pi-masthead-title {
          font-family: "Fraunces", Georgia, serif;
          font-size: clamp(40px, 5.5vw, 68px);
          line-height: 0.98;
          font-weight: 500;
          margin: 0;
          letter-spacing: -0.015em;
          color: #0a1626;
        max-width: 14ch;
          overflow-wrap: break-word;
        }
        .pi-masthead-title em {
          font-style: italic;
          font-weight: 400;
          color: #2a3142;
        }
        .pi-masthead-sub {
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: 0.18em;
          color: #6b7387;
          margin-top: 18px;
          max-width: 720px;
          text-transform: uppercase;
        }
        .pi-masthead-meta {
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: 0.18em;
          color: #6b7387;
          text-align: right;
          text-transform: uppercase;
        }
        .pi-masthead-meta > div + div { margin-top: 4px; }

        /* PREMISE */
        .premise {
          display: grid;
          grid-template-columns: 200px 1fr;
          gap: 36px;
          margin-bottom: 60px;
        }
        @media (max-width: 800px) { .premise { grid-template-columns: 1fr; } }
        .premise-label {
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: 0.18em;
          color: #6b7387;
          text-transform: uppercase;
          padding-top: 8px;
        }
        .premise-body {
          font-family: "DM Sans", sans-serif;
          font-size: 19px;
          line-height: 1.55;
          color: #2a3142;
          max-width: 740px;
          margin: 0;
          font-weight: 400;
        }
        .premise-body strong {
          color: #0a1626;
          font-weight: 600;
        }

        /* ============ BROADCAST SECTION ============ */
        .bcast-section {
          margin: 48px 0 40px;
        }

        /* LETTERBOX FRAME */
        .bcast-frame {
          background: #0a1626;
          color: #f4ede0;
          aspect-ratio: 16 / 9;
          position: relative;
          overflow: hidden;
          box-shadow: 0 18px 42px rgba(10,22,38,0.18);
        }
        .bcast-frame::after {
          content: '';
          position: absolute; inset: 0;
          background-image: repeating-linear-gradient(0deg, rgba(244,237,224,0.018) 0 1px, transparent 1px 3px);
          pointer-events: none;
          z-index: 6;
        }

        .bcast-slide {
          position: absolute;
          inset: 0;
          animation: slideIn 0.42s cubic-bezier(0.4,0,0.2,1) forwards;
        }
        @keyframes slideIn {
          0%   { opacity: 0; transform: translateX(20px); }
          60%  { opacity: 1; }
          100% { opacity: 1; transform: translateX(0); }
        }

        /* corner brackets — tan */
        .bcast-bracket {
          position: absolute;
          width: 24px; height: 24px;
          border: 1px solid #c9a96e;
          z-index: 3;
          opacity: 0.7;
        }
        .br-tl { top: 18px; left: 18px; border-right: none; border-bottom: none; }
        .br-tr { top: 18px; right: 18px; border-left: none; border-bottom: none; }
        .br-bl { bottom: 18px; left: 18px; border-right: none; border-top: none; }
        .br-br { bottom: 18px; right: 18px; border-left: none; border-top: none; }

        /* top strip */
        .bcast-topstrip {
          position: absolute;
          top: 30px;
          left: 56px;
          right: 56px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: 0.2em;
          color: rgba(244,237,224,0.55);
          z-index: 4;
          opacity: 0;
          animation: fadeInDown 0.45s ease 0.18s forwards;
        }
        .bcast-timecode { font-feature-settings: "tnum"; }

        @keyframes fadeInDown {
          from { opacity: 0; transform: translateY(-6px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInUp {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }

        /* main content */
        .bcast-main {
          position: absolute;
          inset: 0;
          padding: 88px 80px 72px;
          display: grid;
          grid-template-columns: 1.55fr 1fr;
          gap: 40px;
          z-index: 2;
        }
        .bcast-left { display: flex; flex-direction: column; justify-content: center; }
        .bcast-right { display: flex; align-items: center; justify-content: center; }
        .slide-svg {
          width: 100%;
          max-width: 360px;
          height: auto;
          opacity: 0;
          animation: fadeInUp 0.6s ease 0.4s forwards;
        }

        /* BOLDED top tag row */
        .bcast-tag-row {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 12px;
          opacity: 0;
          animation: fadeInDown 0.5s ease 0.22s forwards;
          white-space: nowrap;
        }
        .bcast-tag-bold {
          font-family: "JetBrains Mono", monospace;
          font-size: 9.5px;
          letter-spacing: 0.18em;
          color: #c9a96e;
          text-transform: uppercase;
          font-weight: 700;
        }
        .bcast-tag-sep {
          color: rgba(244,237,224,0.3);
          font-family: "JetBrains Mono", monospace;
          font-size: 9.5px;
        }
        .bcast-tag-layer {
          font-family: "JetBrains Mono", monospace;
          font-size: 9px;
          letter-spacing: 0.14em;
          color: rgba(244,237,224,0.55);
          text-transform: uppercase;
        }

        /* model category chips */
        .bcast-lenses {
          display: flex;
          gap: 6px;
          margin-bottom: 22px;
          flex-wrap: wrap;
          opacity: 0;
          animation: fadeInDown 0.5s ease 0.28s forwards;
        }
        .bcast-lens {
          font-family: "JetBrains Mono", monospace;
          font-size: 9px;
          letter-spacing: 0.16em;
          color: rgba(244,237,224,0.75);
          text-transform: uppercase;
          padding: 4px 9px;
          border: 1px solid rgba(244,237,224,0.18);
          border-radius: 2px;
        }

        .bcast-name {
          font-family: "DM Sans", -apple-system, sans-serif;
          font-size: 72px;
          font-weight: 500;
          margin: 0 0 24px;
          line-height: 0.98;
          letter-spacing: -0.03em;
          color: #f4ede0;
          opacity: 0;
          animation: fadeInUp 0.55s ease 0.34s forwards;
        }
        .bcast-bigstat-wrap {
          margin: 8px 0 30px;
          opacity: 0;
          animation: fadeInUp 0.6s ease 0.5s forwards;
        }
        .bcast-bigstat {
          font-family: "Fraunces", Georgia, serif;
          font-size: clamp(56px, 10vw, 116px);
          font-weight: 500;
          line-height: 0.9;
          color: #c9a96e;
          letter-spacing: -0.04em;
        word-break: keep-all;
          white-space: nowrap;
        }
        .bcast-bigstat-sub {
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: 0.06em;
          color: rgba(244,237,224,0.6);
          text-transform: none;
          margin-top: 10px;
          white-space: nowrap;
        }
        .bcast-substats {
          display: flex;
          gap: 44px;
          padding-top: 20px;
          border-top: 1px solid rgba(244,237,224,0.14);
          opacity: 0;
          animation: fadeInUp 0.5s ease 0.66s forwards;
        }
        .bcast-substat-v {
          font-family: "Fraunces", Georgia, serif;
          font-size: 28px;
          font-weight: 500;
          line-height: 1;
          color: #f4ede0;
        }
        .bcast-substat-l {
          font-family: "JetBrains Mono", monospace;
          font-size: 9.5px;
          letter-spacing: 0.06em;
          color: rgba(244,237,224,0.55);
          text-transform: none;
          margin-top: 8px;
          white-space: nowrap;
        }

        /* waveform visual */
        .bcast-wave {
          display: flex;
          align-items: center;
          gap: 4px;
          height: 140px;
          width: 100%;
          max-width: 380px;
          border-top: 1px solid rgba(244,237,224,0.28);
          border-bottom: 1px solid rgba(244,237,224,0.28);
          padding: 12px 0;
        }
        .bcast-wave-bar {
          flex: 1;
          background: #f4ede0;
          opacity: 0;
          animation: barIn 0.5s ease forwards;
        }
        .bcast-wave-bar:nth-child(3n) { background: #c9a96e; }
        @keyframes barIn { to { opacity: 1; } }

        /* accuracy visual */
        .bcast-acc {
          width: 100%;
          max-width: 400px;
          display: flex;
          flex-direction: column;
          gap: 14px;
        }
        .bcast-acc-row {
          display: grid;
          grid-template-columns: 130px 1fr 44px;
          gap: 12px;
          align-items: center;
          opacity: 0;
          animation: fadeInUp 0.4s ease forwards;
        }
        .bcast-acc-name {
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: 0.1em;
          color: rgba(244,237,224,0.65);
          text-transform: uppercase;
        }
        .bcast-acc-track {
          height: 5px;
          background: rgba(244,237,224,0.08);
          position: relative;
        }
        .bcast-acc-fill {
          height: 100%;
          background: rgba(244,237,224,0.4);
          width: 0;
          animation: fillIn 0.9s cubic-bezier(0.4,0,0.2,1) forwards;
        }
        .bcast-acc-fill.target { background: #f4ede0; }
        .bcast-acc-fill.hot { background: #c9a96e; }
        @keyframes fillIn { to {} }
        .bcast-acc-pct {
          font-family: "JetBrains Mono", monospace;
          font-size: 11px;
          color: #f4ede0;
          text-align: right;
        }
        .bcast-acc-pct.hot { color: #c9a96e; font-weight: 500; }

        /* stack visual */
        .bcast-stack {
          width: 100%;
          max-width: 360px;
        }
        .bcast-stack-top {
          font-family: "JetBrains Mono", monospace;
          font-size: 11px;
          letter-spacing: 0.2em;
          text-align: center;
          padding: 14px;
          background: #c9a96e;
          color: #0a1626;
          font-weight: 600;
          opacity: 0;
          animation: fadeInDown 0.45s ease 0.3s forwards;
        }
        .bcast-stack-arrow {
          text-align: center;
          font-family: "JetBrains Mono", monospace;
          color: rgba(244,237,224,0.45);
          font-size: 18px;
          margin: 6px 0;
          opacity: 0;
          animation: fadeInDown 0.45s ease 0.5s forwards;
        }
        .bcast-stack-row {
          font-family: "JetBrains Mono", monospace;
          font-size: 12px;
          letter-spacing: 0.2em;
          padding: 12px 16px;
          background: rgba(244,237,224,0.06);
          color: #f4ede0;
          margin-bottom: 5px;
          border-left: 2px solid rgba(201,169,110,0.5);
          opacity: 0;
          animation: fadeInLeft 0.45s ease forwards;
        }
        @keyframes fadeInLeft {
          from { opacity: 0; transform: translateX(-12px); }
          to { opacity: 1; transform: translateX(0); }
        }

        /* PLAYER */
        .bcast-player {
          margin-top: 0;
          background: #0a1626;
          color: #f4ede0;
          position: relative;
          overflow: hidden;
        }
        .bcast-progress {
          position: absolute;
          top: 0; left: 0;
          height: 2px;
          background: #c9a96e;
          width: 0;
          animation: progress ${SLIDE_DURATION_MS}ms linear forwards;
        }
        .bcast-progress.paused { animation-play-state: paused; }
        @keyframes progress { from { width: 0; } to { width: 100%; } }

        .bcast-controls {
          display: flex;
          align-items: center;
          gap: 0;
          padding: 14px 18px;
        }
        .bcast-ctrl {
          all: unset;
          cursor: pointer;
          padding: 8px 14px;
          font-family: "JetBrains Mono", monospace;
          font-size: 11px;
          letter-spacing: 0.18em;
          color: rgba(244,237,224,0.65);
          transition: color 0.15s ease;
        }
        .bcast-ctrl:hover { color: #c9a96e; }
        .bcast-ctrl.play { color: #c9a96e; font-weight: 500; min-width: 60px; text-align: center; }
        .bcast-dots {
          display: flex;
          gap: 8px;
          margin: 0 auto;
        }
        .bcast-dot {
          all: unset;
          cursor: pointer;
          width: 24px;
          height: 3px;
          background: rgba(244,237,224,0.18);
          transition: background 0.2s ease;
        }
        .bcast-dot.active { background: #c9a96e; }
        .bcast-dot:hover { background: rgba(244,237,224,0.45); }
        .bcast-dot.active:hover { background: #c9a96e; }

        /* SCRIPT (DM Sans body) */
        .bcast-script-wrap {
          margin-top: 40px;
          display: grid;
          grid-template-columns: 200px 1fr;
          gap: 36px;
        }
        @media (max-width: 800px) { .bcast-script-wrap { grid-template-columns: 1fr; } }
        .bcast-script-label {
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: 0.18em;
          color: #6b7387;
          text-transform: uppercase;
          padding-top: 6px;
        }
        .bcast-script-body {
          font-family: "DM Sans", sans-serif;
          font-size: 18px;
          line-height: 1.6;
          color: #1f2a3a;
          max-width: 740px;
          margin: 0 0 20px;
          font-weight: 400;
        }
        .bcast-script-quote {
          border-left: 1px solid #c9a96e;
          padding: 12px 0 12px 20px;
          margin: 22px 0 0;
          max-width: 720px;
        }
        .bcast-script-quote-text {
          font-family: "Fraunces", Georgia, serif;
          font-style: italic;
          font-size: 18px;
          line-height: 1.5;
          color: #2a3142;
          margin: 0;
          font-weight: 400;
        }
        .bcast-script-quote-src {
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: 0.14em;
          color: #6b7387;
          margin-top: 8px;
        }
        .bcast-script-meta {
          font-family: "JetBrains Mono", monospace;
          font-size: 10px;
          letter-spacing: 0.14em;
          color: #6b7387;
          margin-top: 22px;
          text-transform: uppercase;
        }
        .bcast-script-meta strong { color: #0a1626; font-weight: 600; }

        @media (max-width: 700px) {
          .bcast-main { grid-template-columns: 1fr; padding: 80px 32px 72px; }
          .bcast-name { font-size: 48px; }
          .bcast-bigstat { font-size: 80px; }
          .bcast-right { display: none; }
        }
      `}</style>

      <div className="intel-content">



        {/* PREMISE — no byline */}
        <section className="premise">
          <div className="premise-label">The Premise</div>
          <div>
            <p className="premise-body">
              Image, video, voice, and language are converging into single base models. Google's Gemini, OpenAI's GPT-class, Anthropic's Claude — all racing toward one stack that handles every modality at once. <strong>The question is no longer which modality to bet on, it's where a startup still earns defensibility and how to best align with the wave.</strong>
            </p>
          </div>
        </section>

        {/* BROADCAST */}
        <section className="bcast-section">
          <div className="bcast-frame">
            <BroadcastSlide
              company={currentCompany}
              slideKey={`${currentKey}-${progressKey}`}
              total={COMPANY_ORDER.length}
              idx={idx}
            />
          </div>

          {/* player */}
          <div className="bcast-player">
            <div
              key={progressKey}
              className={`bcast-progress ${playing ? '' : 'paused'}`}
            />
            <div className="bcast-controls">
              <button className="bcast-ctrl" onClick={prev} aria-label="Previous">◀ PREV</button>
              <button className="bcast-ctrl play" onClick={() => setPlaying(p => !p)} aria-label={playing ? 'Pause' : 'Play'}>
                {playing ? '❚❚ PAUSE' : '▶ PLAY'}
              </button>
              <button className="bcast-ctrl" onClick={next} aria-label="Next">NEXT ▶</button>
              <div className="bcast-dots">
                {COMPANY_ORDER.map((k, i) => (
                  <button
                    key={k}
                    className={`bcast-dot ${i === idx ? 'active' : ''}`}
                    onClick={() => goTo(i)}
                    aria-label={`Go to slide ${i+1}`}
                  />
                ))}
              </div>
            </div>
          </div>

          {/* SCRIPT */}
          <div className="bcast-script-wrap" key={`script-${currentKey}-${progressKey}`}>
            <div className="bcast-script-label">Segment Script</div>
            <div>
              <p className="bcast-script-body">{currentCompany.script}</p>
              {currentCompany.transcript && (
                <div className="bcast-script-quote">
                  <p className="bcast-script-quote-text">"{currentCompany.transcript.quote}"</p>
                  <div className="bcast-script-quote-src">{currentCompany.transcript.source}</div>
                </div>
              )}
              <div className="bcast-script-meta">
                <strong>{currentCompany.name}</strong> &nbsp;·&nbsp; {currentCompany.pedigree} &nbsp;·&nbsp; BACKED BY {currentCompany.backers}
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}

// Mount into the report. The mount node is created in the Field Notes section.
(function mountPortfolioIntel() {
  function mount() {
    const el = document.getElementById('portfolio-intel-mount');
    if (!el) return false;
    if (el.dataset.mounted === '1') return true;
    el.dataset.mounted = '1';
    ReactDOM.createRoot(el).render(React.createElement(PortfolioIntel));
    return true;
  }
  if (!mount()) {
    document.addEventListener('DOMContentLoaded', mount);
  }
})();

})();
