// Hero + landing sections — reframed as live monitoring, not one-shot report

function Hero() {
  return (
    <section className="uo-hero">
      <div className="hero-meta">
        <span>○ LIVE FEED · APR 2026</span>
        <span>·</span>
        <span>REVENUE REALITY MONITORING</span>
        <span>·</span>
        <span className="redacted">REDACTED</span>
      </div>
      <h1 className="hero-title">
        A live feed of what <span className="accent">happens</span><br/>
        when you're not<br/>
        in the <span className="underline">room.</span>
      </h1>
      <p className="hero-sub">
        We send real prospects into your business and your competitors' — every month, on cadence. You get a dashboard that updates with every new interaction, not a PDF that ages the day it's delivered.
      </p>
      <div className="hero-actions">
        <a href="request.html" className="uo-btn uo-btn-primary">Request Access</a>
        <a href="dossier.html" className="uo-btn-ghost">See a sample dashboard →</a>
      </div>
      <FloatingDossier />
    </section>
  );
}

function FloatingDossier() {
  return (
    <div className="hero-dossier">
      <div className="dossier-header">
        <span>LIVE FEED</span>
        <span>UPD 14:32</span>
      </div>
      <div className="dossier-stamp">LIVE</div>
      <div style={{ marginBottom: 10, fontWeight: 700, letterSpacing: '0.1em', display: 'flex', justifyContent: 'space-between' }}>
        <span>INBOUND · 90-DAY</span>
        <span style={{ color: 'var(--signal)' }}>● MONITORING</span>
      </div>
      <DRow label="Response time" val="47h → 12h" tone="good" trend="↓ 74%" />
      <DRow label="Competitor avg" val="6h 04m" />
      <DBar width="22%" />
      <DRow label="Discovery score" val="42 → 71" tone="good" trend="↑ 29pt" />
      <DRow label="Competitor avg" val="78 / 100" />
      <DBar width="91%" />
      <DRow label="Follow-ups/lead" val="0.8 → 2.4" tone="good" />
      <DRow label="Interactions this mo." val="18" />
      <DRow label="Next drop" val="01 MAY" />
      <div className="dossier-foot">OP-14 · MONTH 04 OF SUBSCRIPTION</div>
    </div>
  );
}

function DRow({ label, val, tone, trend }) {
  return (
    <div className="dossier-row">
      <span className="lbl">{label}</span>
      <span className={`val ${tone || ''}`}>{val}{trend && <span style={{ marginLeft: 8, opacity: 0.7, fontSize: '0.9em' }}>{trend}</span>}</span>
    </div>
  );
}
function DBar({ width, tone }) {
  return <div className="dossier-bar"><div className={`fill ${tone || ''}`} style={{ width }} /></div>;
}

function Ticker() {
  const items = [
    { t: 'OP-14 // PACIFIC NW // 14:32:07', sig: true },
    { t: 'INBOUND CAPTURED · RESPONSE 12H · ↓ 35H M/M', sig: false },
    { t: 'OP-08 // MIDWEST // 09:11:22', sig: true },
    { t: 'COMP. A PRICING UPDATED · ALERT SENT', sig: false },
    { t: 'OP-22 // SOUTHEAST // 16:04:58', sig: true },
    { t: 'FEED UPDATE · APRIL BATCH · 47 INTERACTIONS', sig: false },
    { t: 'OP-03 // NORTHEAST // 11:48:09', sig: true },
    { t: 'REP-LEVEL SCORE · 7.2× → 3.1× SPREAD', sig: false },
  ];
  const doubled = [...items, ...items];
  return (
    <div className="uo-ticker">
      <div className="uo-ticker-track">
        {doubled.map((it, i) => (
          <span key={i}>
            <span className={it.sig ? 'sig' : ''}>●</span> {it.t}
            <span className="dot">//</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function TrustBand() {
  const rows = [
    'HOME SERVICES · $42M',
    'B2B SAAS · $18M ARR',
    'DENTAL NETWORK · 34 LOC.',
    'PE PORTCO · AUTO GROUP',
    'RIA · $2.1B AUM',
    'MED SPA · 12 LOC.',
  ];
  return (
    <div className="uo-trust">
      <div className="uo-trust-head">
        <strong>47 founder-CEOs</strong> currently running monthly field monitoring with us. We do not publish their names.
      </div>
      <div className="uo-trust-list">
        {rows.map((r, i) => <span key={i} className="redacted-name">{r}</span>)}
      </div>
    </div>
  );
}

function Compare() {
  return (
    <section className="uo-section">
      <div className="uo-section-meta">CATEGORY · REVENUE REALITY MONITORING</div>
      <h2 className="uo-section-title">Not a report. A <em>live feed.</em></h2>
      <p className="uo-section-lede">We aren't mystery shopping. We aren't conversation intelligence. We aren't a consulting deck. We're a monthly data stream on how your business actually performs — benchmarked against the firms taking your deals.</p>
      <div className="uo-compare">
        <div className="uo-compare-col neg">
          <h4>What we don't do</h4>
          <ul>
            <li>Deliver a 60-page PDF that ages the day it arrives</li>
            <li>Record your own calls and score them</li>
            <li>Compare you against "industry averages"</li>
            <li>Audit greeters and bathroom cleanliness</li>
            <li>Ship a deck of slogans and quadrants</li>
          </ul>
        </div>
        <div className="uo-compare-col pos">
          <h4>What we do</h4>
          <ul>
            <li>Run <em>monthly field ops</em> against you and named competitors</li>
            <li>Update your <em>dashboard live</em> with every new interaction</li>
            <li>Benchmark you against firms <em>actually taking your deals</em></li>
            <li>Attach <em>recordings and transcripts</em> to every data point</li>
            <li>Alert you when a <em>competitor changes behavior</em></li>
          </ul>
        </div>
      </div>
    </section>
  );
}

function Proof() {
  const items = [
    { lbl: 'Active subscriptions', val: '47', desc: 'Founder-CEOs with live monitoring running right now.' },
    { lbl: 'Interactions / month', val: '2,100', desc: 'Captured across all active feeds, every 30 days.' },
    { lbl: 'Months of data', val: '18', desc: 'Longest continuously-running feed in the network.' },
    { lbl: 'Competitor alerts', val: '84', sig: true, desc: 'Fired in the last quarter when a rival changed behavior.' },
  ];
  return (
    <section className="uo-section">
      <div className="uo-section-meta">SCOREBOARD · LIVE</div>
      <h2 className="uo-section-title">The network, <em>in numbers.</em></h2>
      <p className="uo-section-lede">Every active feed adds to the record. We don't guess. We count.</p>
      <div className="uo-proof-grid">
        {items.map((it, i) => (
          <div key={i} className="uo-proof-cell">
            <div className="lbl">{it.lbl}</div>
            <div className={`val ${it.sig ? 'sig' : ''}`}>{it.val}</div>
            <div className="desc">{it.desc}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function FAQ() {
  const qs = [
    { q: "How is this different from mystery shopping?", a: "Mystery shopping is a checklist audit delivered once. We run continuous field operations — real prospects, real calls, every month — against your competitors and score the cognitive work that drives revenue. The dashboard stays live; the data keeps compounding." },
    { q: "How often does the dashboard update?", a: "Every month. New interactions, new recordings, new competitor benchmarks drop on the first of the month. Competitor alerts fire in real time when a rival changes pricing, response time, or positioning." },
    { q: "Do you record our competitors without consent?", a: "We operate as real prospects under our standard shopper terms. Every state we work in permits single-party consent on the channels we use. We do not publish recordings. Your feed stays with you." },
    { q: "What does it cost?", a: "Subscriptions start at $6,200/month for The Beat (monthly continuous) and $14,900/month for The Watch (weekly, with real-time alerting). Annual commitment; cancel after 12 months. Onboarding and first-month benchmark included." },
    { q: "Will my team know you're monitoring them?", a: "That is your call. Most CEOs run the first 90 days silently to establish a clean baseline. We have never been made. The data is sharper that way — and the conversation with your team afterwards has receipts." },
    { q: "Can you do this for my PE portfolio?", a: "Yes. Portfolio-wide subscriptions are priced per portco. Each gets its own dashboard benchmarked against regional rivals; the operating partner gets a consolidated view across every portfolio company." },
    { q: "How long until I see the first data?", a: "First-month benchmark lands on day 30. Live feed updates begin immediately after. Most CEOs act on the first three findings inside the first 60 days." },
  ];
  return (
    <section className="uo-section">
      <div className="uo-section-meta">QUESTIONS FROM THE FIELD</div>
      <h2 className="uo-section-title">What CEOs <em>ask first.</em></h2>
      <div className="uo-faq">
        {qs.map((it, i) => (
          <details key={i}>
            <summary>{it.q}</summary>
            <div className="a">{it.a}</div>
          </details>
        ))}
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="uo-final-cta" id="cta">
      <h2>Stop guessing. <em>Start monitoring.</em></h2>
      <p>A 30-minute briefing call. We'll show you what the live feed would look like for your business — and what the first month would surface.</p>
      <div className="actions">
        <a href="request.html" className="uo-btn uo-btn-primary">Request Access</a>
        <a href="dossier.html" className="uo-btn-ghost">See a sample dashboard</a>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Ticker, TrustBand, Compare, Proof, FAQ, FinalCTA });