// StatBand + Method + SampleDossier + Verticals + Quote + Engagements

function StatBand() {
  const stats = [
    { label: 'Cost of a blind spot', num: '41', unit: '%', desc: "Of inbound leads go unanswered for 24+ hours at mid-market companies. Every one of them is a competitor's lunch." },
    { label: "What a monthly feed sees", num: '7.2', unit: '×', desc: 'Performance gap between top and bottom reps on the same team — invisible from the inside, obvious in month one of monitoring.' },
    { label: 'Decay of one-shot audits', num: '90', unit: 'd', desc: 'Half-life of a mystery-shop report. By month three your team has adapted, your competitors have changed, and the PDF is scrap.' },
  ];
  return (
    <section className="uo-stat-band">
      <div className="uo-stat-grid">
        {stats.map((s, i) => (
          <div className="uo-stat" key={i}>
            <div className="uo-stat-label">{s.label}</div>
            <div className="uo-stat-num">{s.num}{s.unit && <span className="unit">{s.unit}</span>}</div>
            <div className="uo-stat-desc">{s.desc}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Method() {
  const steps = [
    { n: 'MONTH 01 / INTAKE & BASELINE', t: 'Define the target. Set the baseline.', d: 'We identify the three to five competitors who actually take your deals, calibrate the prospect profiles, and run the first 50 interactions to establish your baseline. You approve the scope before a single call is placed.' },
    { n: 'EVERY MONTH / DEPLOY', t: 'Put operators in the field.', d: 'Our shoppers — real people, vertical-specific, trained to pose as your ideal prospect — run a fresh batch of interactions against you and each named competitor. Every channel you sell on. Every month, on cadence.' },
    { n: 'CONTINUOUS / CAPTURE', t: 'Record the reality.', d: 'Every email, every call, every demo, every follow-up. Captured, transcribed, scored against the rubric that matters to your buyer. Appended to your dashboard as it happens.' },
    { n: 'ALWAYS-ON / ALERT', t: 'Dashboard, not dossier.', d: 'A live CEO-level view. Named competitors, trendlines, rep-level scorecards, recordings. Real-time alerts when a competitor changes pricing or behavior. The feed never stops.' },
  ];
  return (
    <section className="uo-section" id="how">
      <div className="uo-section-meta">METHODOLOGY · 04 PHASES</div>
      <h2 className="uo-section-title">How we find out <em>what's really happening.</em></h2>
      <p className="uo-section-lede">We don't survey. We don't ask your team. We go get the answer ourselves, the same way your customers do.</p>
      <div className="uo-steps">
        {steps.map((s, i) => (
          <div className="uo-step" key={i}>
            <div className="num">{s.n}</div>
            <div className="t">{s.t}</div>
            <div className="d">{s.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function SampleDossier() {
  return (
    <section className="uo-on-bone" id="findings">
      <div className="uo-section">
        <div className="uo-section-meta">SAMPLE DASHBOARD · APRIL 2026 SNAPSHOT</div>
        <h2 className="uo-section-title">A dashboard, updated <em>every month.</em></h2>
        <p className="uo-section-lede">This is what your feed looks like. The same view, refreshed with every new batch of interactions. Trendlines that tell you whether you're closing the gap. Names changed for this sample.</p>

        <div className="uo-finding-doc">
          <div className="case-stamp">FEED #HVAC-0241</div>
          <div className="doc-header">
            <span>LIVE · APR 2026 · MONTH 04</span>
            <span>THIS MONTH: 47 INTERACTIONS · RUN TOTAL: 187</span>
          </div>
          <h3 className="doc-title">Inbound Sales Response · You vs. Top 4 Regional Competitors</h3>

          <div className="comparison-table">
            <div className="header">Metric</div>
            <div className="header">You</div>
            <div className="header">Comp. A</div>
            <div className="header">Comp. B</div>
            <div className="header">Comp. C</div>

            <SDRow metric="Avg. first-response time" you="47h 12m" a="6h 04m" aT="g" b="18h 30m" bT="n" c="4h 22m" cT="g" />
            <SDRow metric="Discovery quality (0–100)" you="42" a="81" aT="g" b="67" bT="n" c="74" cT="g" />
            <SDRow metric="Quote delivered in 48h" you="3 / 12" a="11 / 12" aT="g" b="8 / 12" bT="n" c="10 / 12" cT="g" />
            <SDRow metric="Follow-up attempts (14d)" you="0.8" a="3.4" aT="g" b="1.9" bT="n" c="2.7" cT="g" />
            <SDRow metric="ROI calculator provided" you="NEVER" a="ALWAYS" aT="g" b="SOMETIMES" bT="n" c="ALWAYS" cT="g" />
          </div>

          <div className="redacted-note">
            <strong>Month-over-month:</strong> Response time has dropped 35 hours since you turned on monitoring — the largest single lever in the network this month. Discovery quality is up 29 points after rep-level scorecards landed in Month 02. Your gap against Comp. A has narrowed from 41 points to 17. The feed keeps scoring; next drop is May 01.
          </div>

          <div style={{ marginTop: 40, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <a href="dossier.html" className="uo-btn uo-btn-primary">Open the live dashboard →</a>
            <a href="request.html" className="uo-btn-ghost">Request access</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function SDRow({ metric, you, a, aT, b, bT, c, cT }) {
  const cls = (t) => t === 'g' ? 'val-good' : t === 'b' ? 'val-bad' : 'val-neutral';
  return (
    <>
      <div className="metric">{metric}</div>
      <div className="you val-bad">{you}</div>
      <div className={cls(aT)}>{a}</div>
      <div className={cls(bT)}>{b}</div>
      <div className={cls(cT)}>{c}</div>
    </>
  );
}

function Verticals() {
  const verticals = [
    { n: '01 / HOME SERVICES', t: 'HVAC · Plumbing · Roofing', d: 'High-intent inbound, conversion is everything, regional competition is fierce. Most leave 30%+ of bookings on the table.' },
    { n: '02 / B2B SAAS', t: '$5M–$50M ARR', d: 'Founders who suspect their AEs sandbag discovery, blow follow-ups, and lose winnable deals on competitive bakeoffs.' },
    { n: '03 / MULTI-LOCATION HEALTHCARE', t: 'Dental · Vet · Med Spa', d: 'Front-desk phone handling is the entire funnel. Most practices have no idea how theirs compares to the practice down the street.' },
    { n: '04 / AUTO & DEALERSHIPS', t: 'New · Used · Service', d: 'Notoriously uneven sales floors. Owners who want the truth — and the recordings — get it delivered monthly.' },
    { n: '05 / FINANCIAL SERVICES', t: 'RIAs · Insurance · Mortgage', d: 'Commoditized products won on service and speed. We measure both, against the firms actually taking your clients.' },
    { n: '06 / PE PORTFOLIO COMPANIES', t: 'Roll-ups & value creation', d: 'Post-close operating diligence for operating partners. Benchmark every portco location against its regional competitors.' },
  ];
  return (
    <section className="uo-section" id="verticals">
      <div className="uo-section-meta">FIELD OF OPERATION</div>
      <h2 className="uo-section-title">Who this is <em>for.</em></h2>
      <p className="uo-section-lede">Founder-led and PE-backed operators running businesses between $10M and $500M in revenue, where execution quality decides who wins.</p>
      <div className="uo-verticals">
        {verticals.map((v, i) => (
          <a href="industries.html" className="uo-vertical" key={i} style={{ textDecoration: 'none', color: 'inherit', display: 'block', borderBottom: 0 }}>
            <div className="n">{v.n}</div>
            <div className="t">{v.t}</div>
            <div className="d">{v.d}</div>
          </a>
        ))}
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="uo-quote">
      <div className="inner">
        <div className="mark">"</div>
        <div className="text">
          I thought we were losing deals on price. The Stakeout showed me we were losing them before we even returned the call. Changed how we run the whole sales team in a week.
        </div>
        <div className="attr">
          <span className="name">CEO</span> · MULTI-REGION HOME SERVICES · $42M REVENUE
        </div>
      </div>
    </section>
  );
}

function Engagements() {
  return (
    <section className="uo-section" id="engagements">
      <div className="uo-section-meta">SUBSCRIPTIONS · LIVE MONITORING</div>
      <h2 className="uo-section-title">Two <em>cadences.</em> One feed.</h2>
      <p className="uo-section-lede">Monthly or weekly. Both are live, continuous, and benchmarked against your named competitors. Both append to a dashboard that never goes stale.</p>
      <div className="uo-packages">
        <Package
          name="SUBSCRIPTION 01"
          title={<>The <em>Beat</em></>}
          price="Monthly cadence · from $6,200/mo · 12-mo minimum"
          items={[
            '50 fresh interactions every month against you and up to four named competitors',
            'Live dashboard, updated as each interaction lands — recordings and transcripts attached',
            'Rep-level scorecards and trendlines from month one',
            'Quarterly analyst note delivered to your board or operating partner',
            'First-month baseline and onboarding included',
          ]}
          cta={<a href="request.html" className="uo-btn-ghost">Request access →</a>}
        />
        <Package
          featured
          tag="REAL-TIME"
          name="SUBSCRIPTION 02"
          title={<>The <em>Watch</em></>}
          price="Weekly cadence · from $14,900/mo · 12-mo minimum"
          items={[
            'Fresh interactions every week — 4× the volume of The Beat',
            'Real-time competitor alerts: pricing, response time, positioning changes',
            'Dedicated lead analyst on Slack / Teams',
            'Monthly executive briefings with the founder and leadership team',
            'Priority scope-change: add or swap competitors any month',
          ]}
          cta={<a href="request.html" className="uo-btn uo-btn-primary">Request briefing →</a>}
        />
      </div>
    </section>
  );
}

function Package({ name, title, price, items, cta, featured, tag }) {
  return (
    <div className={`uo-package ${featured ? 'featured' : ''}`}>
      {tag && <div className="tag">{tag}</div>}
      <div className="n">{name}</div>
      <div className="t">{title}</div>
      <div className="p">{price}</div>
      <ul className="list">
        {items.map((it, i) => <li key={i}>{it}</li>)}
      </ul>
      {cta}
    </div>
  );
}

Object.assign(window, { StatBand, Method, SampleDossier, Verticals, Quote, Engagements });