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

// ============================================================================
// PROOF STRIP — general capabilities, not campaign numbers
// ============================================================================
function ProofStrip() {
  const stats = [
    { val: "96.28%", label: "Detection accuracy", sub: "vs. 48.40% for off-the-shelf models" },
    { val: "100+",   label: "Sports & properties",   sub: "broadcast, OTT, in-venue, social" },
    { val: "24–48h", label: "Asset onboarding",      sub: "logo upload to live measurement" },
    { val: "0.40",   label: "Relevance threshold",   sub: "every post NLP-scored before it counts" },
  ];
  return (
    <section className="proof">
      <div className="proof__inner">
        <div className="proof__grid">
          {stats.map((s, i) => (
            <div key={i} className="proof__cell">
              <div className="proof__val">{s.val}</div>
              <div className="proof__label">{s.label}</div>
              <div className="proof__sub">{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// BEYOND THE BROADCAST — real Ironman 70.3 Marbella data from the actual report
// ============================================================================
function BeyondBroadcast() {
  const [phase, setPhase] = useState(0); // 0 = vision, 1 = social
  useEffect(() => {
    const id = setInterval(() => setPhase(p => (p + 1) % 2), 5500);
    return () => clearInterval(id);
  }, []);

  // Real platform data from SIQ - Ironman Marbella.pdf
  const platforms = [
    { p: "YouTube",   posts: 87,  reach: "2.43M", eng: "36.3K",   value: 29214, pct: 20.7 },
    { p: "TikTok",    posts: 243, reach: "7.06M", eng: "722.7K", value: 42341, pct: 30.1 },
    { p: "Instagram", posts: 214, reach: "5.83M", eng: "588.5K", value: 58255, pct: 41.4 },
    { p: "X",         posts: 257, reach: "1.38M", eng: "24.0K",   value: 11015, pct: 7.8 },
    { p: "Reddit",    posts: 8,   reach: "6.2K",  eng: "625",     value: 31,    pct: 0.0 },
  ];

  return (
    <section className="bb" id="beyond">
      <div className="bb__inner">
        <div className="section-head">
          <span className="eyebrow"><span className="eyebrow__dot" /> BEYOND THE BROADCAST · IRONMAN 70.3 MARBELLA · 2025</span>
          <h2 className="section-h2">A logo on screen is half the story. <em>We tell the other half.</em></h2>
          <p className="section-sub">
            Vision counts every frame the IRONMAN mark appeared in. Listening scores every post that mentioned the
            property — across five platforms, scored against a 0.40 relevance threshold, valued at platform-specific
            CPMs. Below: the actual numbers from a single championship weekend.
          </p>
        </div>

        <div className="bb__stage">
          <button className={"bb__tab" + (phase === 0 ? " is-on" : "")} onClick={() => setPhase(0)}>
            <span className="bb__tab-num">01</span>
            <span className="bb__tab-t">Vision · every frame, every logotype</span>
          </button>
          <button className={"bb__tab" + (phase === 1 ? " is-on" : "")} onClick={() => setPhase(1)}>
            <span className="bb__tab-num">02</span>
            <span className="bb__tab-t">Listening · every post, every platform</span>
          </button>
        </div>

        <div className="bb__panel">
          {/* LEFT: real frame capture from the report */}
          <div className="bb__frame">
            <div className="bb__frame-chrome">
              <span className="bb__frame-rec"><span className="bb__frame-dot" /> CV · FRAME CAPTURE</span>
              <span className="bb__frame-label">IRONMAN 70.3 · MARBELLA · OCT 2025</span>
            </div>
            <div className="bb__frame-art bb__frame-art--photo">
              <div className="bb__frame-imgwrap">
                <img src="assets/ironman-marbella-frame.jpg" alt="Ironman 70.3 Marbella beach with Precision Fuel & Hydration inflatable" className="bb__frame-img" />
                {/* bbox coords in image-native space — wrapper matches image ratio so percentages are stable across viewport widths */}
                <DetectionBox style={{ left: "67.2%", top: "41.9%", width: "7.4%", height: "6.3%" }} label="PRECISION · Patch (top) · 98.7%" />
                <DetectionBox style={{ left: "66.3%", top: "60.5%", width: "5.5%", height: "22.3%" }} label="PRECISION · Vertical · 99.1%" highlight />
                <DetectionBox style={{ left: "58.3%", top: "85.7%", width: "26.3%", height: "14.3%" }} label="IRONMAN 70.3 · Wordmark · 96.4%" />
              </div>
            </div>
            <div className="bb__frame-strip">
              <span className="bb__frame-strip-l">3 LOGOTYPES TRACKED · 809 RELEVANT POSTS</span>
              <span className="bb__frame-strip-r">REPORT: <strong>20260402-IM703</strong></span>
            </div>
          </div>

          {/* RIGHT: switches between vision panel + social panel */}
          <div className="bb__layer" data-phase={phase}>
            <div className="bb__layer-card bb__layer-card--vision" data-on={phase === 0}>
              <div className="bb__layer-head">
                <span className="bb__layer-eyebrow">CV DETECTION LOG</span>
                <span className="bb__layer-time">4 ASSET VARIANTS</span>
              </div>
              <div className="bb__layer-title">The frame, accounted for.</div>
              <div className="bb__vision-rows">
                {[
                  ["Precision Fuel & Hydration", "Inflatable · top patch",   "Patch ID 20011", "98.7%"],
                  ["Precision Fuel & Hydration", "Inflatable · vertical",    "Patch ID 20012", "99.1%"],
                  ["IRONMAN 70.3",               "Course barrier · wordmark","ID 10003",       "96.4%"],
                ].map(([b, a, id, c], i) => (
                  <div key={i} className="bb-row">
                    <span className="bb-row__brand">{b}</span>
                    <span className="bb-row__asset">{a}</span>
                    <span className="bb-row__time" style={{ fontFamily: "var(--font-mono)", color: "var(--fg-3)" }}>{id}</span>
                    <span className="bb-row__conf">{c}</span>
                  </div>
                ))}
              </div>
              <div className="bb__layer-foot">
                <span>Sponsor of record</span>
                <span className="bb__layer-foot-v">Precision Fuel & Hydration · 202 social mentions</span>
              </div>
            </div>

            <div className="bb__layer-card bb__layer-card--social" data-on={phase === 1}>
              <div className="bb__layer-head">
                <span className="bb__layer-eyebrow">LISTENING · 5-PLATFORM ROLLUP</span>
                <span className="bb__layer-time">JUL 1 — DEC 14, 2025</span>
              </div>
              <div className="bb__layer-title">The conversation, scored and valued.</div>

              <div className="bb__plat">
                <div className="bb__plat-head">
                  <span>PLATFORM</span><span>POSTS</span><span>REACH</span><span>VALUE</span>
                </div>
                {platforms.map((p, i) => (
                  <div key={i} className="bb__plat-row">
                    <span className="bb__plat-name">{p.p}</span>
                    <span className="bb__plat-posts">{p.posts}</span>
                    <span className="bb__plat-reach">{p.reach}</span>
                    <span className="bb__plat-val">${p.value.toLocaleString()}</span>
                    <div className="bb__plat-bar"><div className="bb__plat-bar-f" style={{ width: `${p.pct}%` }} /></div>
                  </div>
                ))}
              </div>

              <div className="bb__rollup">
                <div className="bb__rollup-cell">
                  <div className="bb__rollup-l">RELEVANT POSTS</div>
                  <div className="bb__rollup-v">809</div>
                </div>
                <div className="bb__rollup-cell">
                  <div className="bb__rollup-l">SENTIMENT</div>
                  <div className="bb__rollup-v bb__rollup-v--accent">96.7% pos/neutral</div>
                </div>
                <div className="bb__rollup-cell">
                  <div className="bb__rollup-l">EST. REACH</div>
                  <div className="bb__rollup-v bb__rollup-v--accent">16.7M</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="bb__total">
          <div className="bb__total-l">
            <span className="eyebrow"><span className="eyebrow__dot" /> CHAMPIONSHIP WEEKEND · ROLLED UP</span>
            <div className="bb__total-h">809 posts. 16.7M reach. <em>$140,856 in measured media value.</em></div>
            <p className="bb__total-foot">
              From the <strong>SIQ — IRONMAN 70.3 Marbella</strong> report. Each number traces back to a CSV row, a frame, or a post URL — never a panel survey.
            </p>
          </div>
          <div className="bb__total-r">
            <div className="bb__total-pill">
              <span className="bb__total-pill-l">Engagement</span>
              <span className="bb__total-pill-v">1.37M</span>
            </div>
            <div className="bb__total-plus">·</div>
            <div className="bb__total-pill">
              <span className="bb__total-pill-l">Top athlete</span>
              <span className="bb__total-pill-v" style={{ fontSize: 14 }}>Lucy Charles-Barclay</span>
            </div>
            <div className="bb__total-plus">·</div>
            <div className="bb__total-pill bb__total-pill--final">
              <span className="bb__total-pill-l">Total media value</span>
              <span className="bb__total-pill-v bb__total-pill-v--final">$140,856</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DetectionBox({ style, label, highlight }) {
  return (
    <div className={"db" + (highlight ? " db--hi" : "")} style={style}>
      <span className="db__c db__c--tl" /><span className="db__c db__c--tr" />
      <span className="db__c db__c--bl" /><span className="db__c db__c--br" />
      <span className="db__label">{label}</span>
    </div>
  );
}

function BroadcastFrameSVG() { return null; }

// ============================================================================
// HOW IT WORKS — pipeline
// ============================================================================
function HowItWorks() {
  const stages = [
    { id: "01", t: "Ingest",   desc: "Live broadcast, tape, and every public post mentioning the property — pulled into one pipeline.", tag: "SDI · RTMP · YouTube · TikTok · IG · X · Reddit" },
    { id: "02", t: "Detect",   desc: "A vision transformer scans every frame for sponsorship surfaces — LED, jersey, dasher, helmet, virtual overlay.",   tag: "ViT · YOLOv8-x · ensemble" },
    { id: "03", t: "Identify", desc: "A vision-language model reads the surface — Coke vs. Coke Zero, the right team's livery — even occluded or motion-blurred.", tag: "CLIP+VLM · 1.4M brand corpus" },
    { id: "04", t: "Listen",   desc: "NLP scores every post for sentiment, athlete mentions, sponsor share-of-voice, and conversation themes.",  tag: "Multilingual NLP · sentiment · NER" },
    { id: "05", t: "Value",    desc: "Each exposure and mention is converted to Sponsor Media Value using platform-specific CPMs and engagement-based reach.", tag: "QV model · CPM-weighted" },
  ];
  return (
    <section className="how" id="how">
      <div className="how__inner">
        <div className="section-head">
          <span className="eyebrow"><span className="eyebrow__dot" /> THE PIPELINE</span>
          <h2 className="section-h2">From feed to defensible value <em>in five stages.</em></h2>
          <p className="section-sub">No panel surveys. No estimation. Every number is grounded in pixels we can show you and posts we can link to.</p>
        </div>
        <div className="pipeline">
          {stages.map((s, i) => (
            <React.Fragment key={s.id}>
              <div className="stage">
                <div className="stage__num">{s.id}</div>
                <div className="stage__t">{s.t}</div>
                <div className="stage__desc">{s.desc}</div>
                <div className="stage__tag"><span className="stage__tag-dot" />{s.tag}</div>
              </div>
              {i < stages.length - 1 && <div className="stage__connector" aria-hidden="true">
                <svg viewBox="0 0 60 12" preserveAspectRatio="none">
                  <line x1="0" y1="6" x2="50" y2="6" stroke="rgba(167,139,250,0.25)" strokeWidth="0.6" strokeDasharray="2 2" />
                  <path d="M 50 2 L 58 6 L 50 10" fill="none" stroke="var(--accent)" strokeWidth="0.8" />
                </svg>
              </div>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// SEGMENTS
// ============================================================================
function Segments() {
  const [active, setActive] = useState(0);
  const tabs = [
    { who: "Brands & Sponsors",
      lede: "Find your next growth lever — outside your own marketing.",
      body: "Don't just audit what you bought. Use SponsorIQ's listening data to identify which creators, athletes, and properties already reach the demographic you're trying to grow into.",
      bullets: [
        "Demographic discovery — see who's already talking near your category",
        "Partner shortlists ranked by audience overlap and engagement quality",
        "Contract delivery audits, frame-by-frame, against real broadcast"
      ]},
    { who: "Leagues & Properties",
      lede: "Price every pixel. Defend every dollar.",
      body: "Know what every LED slot, jersey patch, and venue surface is worth — and prove it to partners with delivery reports that run themselves.",
      bullets: [
        "Inventory yield maps by camera angle and game state",
        "Live partner reporting between meetings",
        "Sentiment and theme tracking across every property mention"
      ]},
    { who: "Agencies",
      lede: "Walk into renewal with receipts.",
      body: "Build packages priced on reality — not panel estimates — and hand clients reports that match your deck system.",
      bullets: [
        "Portfolio rollups across every property a client touches",
        "Packageable assets ranked by qualified value",
        "White-labeled, contract-grade exports"
      ]},
  ];
  const t = tabs[active];

  return (
    <section className="seg" id="segments">
      <div className="seg__inner">
        <div className="section-head">
          <span className="eyebrow"><span className="eyebrow__dot" /> WHO IT'S FOR</span>
          <h2 className="section-h2">Three sides of the table. <em>One ledger.</em></h2>
        </div>
        <div className="seg__tabs" role="tablist">
          {tabs.map((tb, i) => (
            <button key={i} role="tab" aria-selected={active === i}
              className={"seg__tab" + (active === i ? " is-active" : "")}
              onClick={() => setActive(i)}>
              <span className="seg__tab-num">{String(i + 1).padStart(2, "0")}</span>
              {tb.who}
            </button>
          ))}
        </div>
        <div className="seg__panel">
          <div className="seg__copy">
            <div className="seg__lede">{t.lede}</div>
            <p className="seg__body">{t.body}</p>
            <ul className="seg__list">
              {t.bullets.map((b, i) => (
                <li key={i}><span className="seg__check">▸</span>{b}</li>
              ))}
            </ul>
            <a href="mailto:tim@sponsoriq.io" className="btn btn--primary">
              Talk to us about {t.who.toLowerCase()} <span className="btn__arrow">→</span>
            </a>
          </div>
          <div className="seg__viz"><SegmentViz active={active} /></div>
        </div>
      </div>
    </section>
  );
}

function SegmentViz({ active }) {
  if (active === 0) {
    return (
      <div className="viz">
        <div className="viz__head"><span>AUDIENCE OVERLAP · YOUR BRAND</span><span className="viz__head-r">5 PARTNERS SHORTLISTED</span></div>
        <div className="viz__rows">
          {[
            ["@ironmantri",                92, "26-44 · M/F"],
            ["Global Triathlon Network",   84, "28-42 · M"],
            ["Lucy Charles-Barclay",       78, "22-38 · F"],
            ["Matt Byrn",                  64, "30-48 · M"],
            ["Triathlon Mike",             52, "35-55 · M"],
          ].map(([n, w, d], i) => (
            <div key={i} className="viz__row">
              <span className="viz__row-n">{n}</span>
              <div className="viz__bar"><div className="viz__bar-f" style={{ width: `${w}%` }} /></div>
              <span className="viz__row-v">{d}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (active === 1) {
    return (
      <div className="viz">
        <div className="viz__head"><span>VENUE YIELD · ALL CAMS</span><span className="viz__head-r">8 INVENTORY ZONES</span></div>
        <div style={{ padding: 12 }}>
          <svg viewBox="0 0 200 110" style={{ width: "100%", height: "auto" }}>
            <path d="M100 95 L20 30 A85 85 0 0 1 180 30 Z" fill="rgba(167,139,250,0.06)" stroke="rgba(167,139,250,0.25)" strokeWidth="0.4" />
            <circle cx="100" cy="78" r="3" fill="var(--accent)" />
            {[[30,35,16,"$1.2M"],[80,18,22,"$2.4M"],[140,22,18,"$1.8M"],[170,50,14,"$0.9M"],[60,55,12,"$0.7M"],[120,60,14,"$1.1M"],[40,75,10,"$0.5M"],[150,85,12,"$0.8M"]].map(([x,y,r,v],i) => (
              <g key={i}>
                <circle cx={x} cy={y} r={r * 0.5} fill="var(--accent)" opacity="0.22" />
                <circle cx={x} cy={y} r="1.4" fill="var(--accent)" />
                <text x={x + r * 0.5 + 1} y={y + 1.2} fontSize="3" fill="rgba(245,242,250,0.7)" fontFamily="var(--font-mono)">{v}</text>
              </g>
            ))}
          </svg>
        </div>
      </div>
    );
  }
  return (
    <div className="viz">
      <div className="viz__head"><span>PORTFOLIO ROLLUP · Q3</span><span className="viz__head-r">QV ↗ +18%</span></div>
      <div className="viz__rows">
        {[
          ["Mastercard / PGA Tour", 92, "$4.2M"],
          ["Geico / NFL",           78, "$3.1M"],
          ["Chevrolet / MLB",       64, "$2.4M"],
          ["T-Mobile / NHL",        51, "$1.9M"],
          ["Capital One / NCAA",    44, "$1.6M"],
        ].map(([n, w, v], i) => (
          <div key={i} className="viz__row">
            <span className="viz__row-n">{n}</span>
            <div className="viz__bar"><div className="viz__bar-f" style={{ width: `${w}%` }} /></div>
            <span className="viz__row-v">{v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============================================================================
// PARTNER CALLOUT
// ============================================================================
function PartnerCallout() {
  return (
    <section className="partner">
      <div className="partner__inner">
        <div className="partner__l">
          <span className="eyebrow"><span className="eyebrow__dot" /> PARTNERSHIP</span>
          <h2 className="partner__h2">SponsorIQ + Two Circles.</h2>
          <p className="partner__p">
            We measure the pixels and the conversations. Two Circles measures the audience and the commercial story
            around them. Together, our data plugs straight into Two Circles' commercial intelligence — so you can move
            from "what was seen" to "what to do about it" without leaving a single platform.
          </p>
          <div className="partner__row">
            <a href="https://docs.sponsoriq.io" className="btn btn--ghost">Read the docs</a>
            <a href="https://who.sponsoriq.io" className="btn btn--ghost">Meet the team</a>
          </div>
        </div>
        <div className="partner__r">
          <div className="partner__diagram">
            <div className="partner__node partner__node--us">
              <div className="partner__node-tag">SIQ</div>
              <div className="partner__node-t">Vision + Listening</div>
              <div className="partner__node-d">Detect · Identify · Listen · Value</div>
            </div>
            <div className="partner__bridge">
              <svg viewBox="0 0 120 30" preserveAspectRatio="none">
                <path d="M 5 15 L 115 15" stroke="var(--accent)" strokeWidth="0.8" strokeDasharray="2 2" />
                <path d="M 5 15 L 115 15" stroke="var(--accent)" strokeWidth="0.8" opacity="0.3">
                  <animate attributeName="stroke-dashoffset" values="0;-12" dur="1.2s" repeatCount="indefinite" />
                </path>
                <text x="60" y="11" fontSize="3.5" fill="rgba(245,242,250,0.55)" fontFamily="var(--font-mono)" textAnchor="middle">SMV STREAM · 38ms</text>
              </svg>
            </div>
            <div className="partner__node partner__node--them">
              <div className="partner__node-tag">2C</div>
              <div className="partner__node-t">Commercial intelligence</div>
              <div className="partner__node-d">Audience · Strategy · Activation</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// CTA + FOOTER
// ============================================================================
function CTA() {
  return (
    <section className="cta">
      <div className="cta__inner">
        <div className="cta__content">
          <h2 className="cta__h2">Stop estimating sponsorship.<br/><em>Start measuring it.</em></h2>
          <p className="cta__p">A 30-minute walkthrough on your own footage. We'll show you what we find.</p>
          <div className="cta__row">
            <a href="mailto:tim@sponsoriq.io" className="btn btn--primary btn--lg">
              Request demo <span className="btn__arrow">→</span>
            </a>
            <span className="cta__hint">tim@sponsoriq.io · usually replies same day</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="ft">
      <div className="ft__inner">
        <div className="ft__brand">
          <Wordmark size={20} />
          <p>AI vision and social listening for global sponsorship.</p>
          <div className="ft__parent">
            <span>A company of</span>
            <strong>Machine Vision Inc.</strong>
          </div>
        </div>
        <div className="ft__cols">
          <div className="ft__col"><h5>Product</h5>
            <a href="#demo">The benchmark</a>
            <a href="#beyond">Beyond broadcast</a>
            <a href="#how">How it works</a>
            <a href="#segments">Who it's for</a>
          </div>
          <div className="ft__col"><h5>Company</h5>
            <a href="https://who.sponsoriq.io">Who we are</a>
            <a href="https://docs.sponsoriq.io">Documentation</a>
            <a href="mailto:tim@sponsoriq.io">Contact</a>
          </div>
          <div className="ft__col"><h5>Partners</h5>
            <a href="#">Two Circles</a>
            <a href="#">Machine Vision Inc.</a>
          </div>
          <div className="ft__col"><h5>Legal</h5>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Data processing</a>
          </div>
        </div>
        <div className="ft__btm">
          <span>© {new Date().getFullYear()} SponsorIQ · Machine Vision Inc.</span>
          <span className="ft__btm-r">
            <span className="nav__pulse" /> All systems operational
          </span>
        </div>
      </div>
    </footer>
  );
}

function Wordmark({ size = 22 }) {
  return <img src="assets/sponsoriq-logo.png" alt="SponsorIQ" style={{ height: size * 1.2, width: "auto", display: "block" }} />;
}

// ============================================================================
// DOCUMENTS — sample reports back the data
// ============================================================================
function Documents() {
  return (
    <section className="docs" id="documents">
      <div className="docs__inner">
        <div className="section-head">
          <span className="eyebrow"><span className="eyebrow__dot" /> THE DOCUMENTS</span>
          <h2 className="section-h2">Every number above traces back <em>to a report you can read.</em></h2>
          <p className="section-sub">
            We don't show you a dashboard and ask you to trust it. Every measurement period closes with a Media &
            Exposure Valuation Report — methodology disclosed, CPMs cited, every post URL appended.
          </p>
        </div>
        <div className="docs__grid">
            <a href="mailto:tim@sponsoriq.io?subject=Request%3A%20IRONMAN%2070.3%20Marbella%20report%20(20260402-IM703)" className="doc">
              <div className="doc__top">
              <div className="doc__icon">PDF</div>
              <div className="doc__meta">
                <div className="doc__cls">CONFIDENTIAL · 12 PAGES</div>
                <div className="doc__id">REPORT 20260402-IM703</div>
              </div>
            </div>
            <div className="doc__title">SIQ — IRONMAN 70.3 World Championship<br/><span>Marbella · October–November 2025</span></div>
            <div className="doc__rows">
              <div className="doc__row"><span>Total media value</span><strong>$140,856</strong></div>
              <div className="doc__row"><span>Estimated reach</span><strong>16.7M</strong></div>
              <div className="doc__row"><span>Relevant posts</span><strong>809</strong></div>
              <div className="doc__row"><span>Platforms</span><strong>YouTube · TikTok · IG · X · Reddit</strong></div>
            </div>
            <div className="doc__cta">Request the report — we'll email it to you <span className="doc__arrow">↗</span></div>
          </a>
          <div className="docs__sidecar">
            <div className="docs__sidecar-h">Inside every report</div>
            <ul className="docs__list">
              <li><span>01</span>About — period, platforms, search terms, hashtags, logotypes, relevance threshold</li>
              <li><span>02</span>Summary — total value, reach, posts, engagement, by platform</li>
              <li><span>03</span>Platform deep-dive — top posts, authors, links, view counts</li>
              <li><span>04</span>Sentiment & themes — pos/neutral/mixed/neg per platform · top athletes · top sponsors</li>
              <li><span>05</span>Search performance — keyword coverage + hashtag gap analysis</li>
              <li><span>06</span>Methodology — CPM rates, sources, valuation formula</li>
              <li><span>07</span>Appendices — full post DB · CV detection log · frame gallery · CPM citations</li>
            </ul>
            <div className="docs__cpm">
              <div className="docs__cpm-h">What we won't do</div>
              <ul className="docs__list" style={{ marginTop: 8 }}>
                <li><span>—</span>Quote a number we can't trace back to a frame URL or post link</li>
                <li><span>—</span>Estimate reach where a verified view count exists</li>
                <li><span>—</span>Hide the methodology behind a black box</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Documents = Documents;
window.BeyondBroadcast = BeyondBroadcast;
window.HowItWorks = HowItWorks;
window.Segments = Segments;
window.PartnerCallout = PartnerCallout;
window.CTA = CTA;
window.Footer = Footer;